:root{--ink:#1c2733;--wall:#f4f5f3;--line:#d5d9d3;--accent:#2f6fed;--accent-ink:#fff;--wall-ink:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;font:400 1.0625rem/1.6 "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink);background:var(--wall)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,4vw,3rem);background:var(--wall);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:-.02em}
.logo span:not(.logo-mark){font-weight:400}
.logo-mark{width:1.5rem;height:1.5rem;border-radius:50% 50% 50% 0;background:var(--accent);transition:background .5s}
nav{display:flex;align-items:center;gap:1.5rem}
nav a{text-decoration:none;font-weight:600}
nav a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.btn{display:inline-block;padding:.85rem 1.4rem;border:0;border-radius:4px;background:var(--accent);color:var(--accent-ink);font:600 1rem inherit;font-family:inherit;text-decoration:none;cursor:pointer;transition:background .5s,color .5s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn.small{padding:.5rem 1rem}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:stretch;max-width:1200px;margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,3rem)}
h1{margin:0 0 1.2rem;font-size:clamp(2.5rem,6.2vw,5rem);font-weight:800;line-height:1.02;letter-spacing:-.035em}
.hero-text p{max-width:34rem}
.pick-label{margin:2rem 0 .6rem;font-weight:600}
.swatches{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}
.swatch{width:3.2rem;height:3.2rem;border:2px solid var(--wall);border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
.wall{position:relative;overflow:hidden;min-height:440px;border-radius:4px;display:flex;align-items:flex-end;padding:1.5rem;background:#2f6fed;color:var(--wall-ink)}
.coat{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.wall-label{position:relative;display:flex;flex-direction:column;margin:0;line-height:1.2}
.wall-label strong{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em}
.section{max-width:1200px;margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,3rem)}
h2{margin:0 0 2rem;font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
h3{margin:0;font-size:1.25rem}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:1fr 2fr auto;gap:1.5rem;align-items:baseline;padding:1.5rem 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows p{margin:0}
.rows span{font-weight:600;white-space:nowrap}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.steps li{padding-top:1rem;border-top:6px solid var(--accent);transition:border-color .5s}
.steps h3{font-size:2.6rem;font-weight:800;letter-spacing:-.04em}
.steps strong{display:block;margin:.3rem 0}
.steps p{margin:0}
.contact{background:var(--ink);color:var(--wall)}
.contact :focus-visible{outline-color:var(--wall)}
.contact-inner{max-width:1200px;margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
address{display:flex;flex-direction:column;gap:.4rem;margin-top:2rem;font-style:normal}
address a{font-weight:600;font-size:1.25rem}
form{display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-weight:600}
input,select,textarea{width:100%;padding:.75rem;border:2px solid transparent;border-radius:4px;background:var(--wall);color:var(--ink);font:inherit}
input[aria-invalid="true"]{border-color:#ff8a7a}
.form-msg{min-height:1.5rem;margin:0;font-weight:600}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.5rem clamp(1rem,4vw,3rem);font-size:.95rem}
.foot p{margin:0}
@media(max-width:820px){
  .hero,.contact-inner{grid-template-columns:1fr}
  .wall{min-height:260px;order:-1}
  .rows li{grid-template-columns:1fr;gap:.4rem}
  .steps{grid-template-columns:1fr 1fr}
  nav a:not(.btn){display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}