/* ==========================================================================
   Ventura ADU Specialists
   Premise: drawn to built. The dimension line is the signature.
   ========================================================================== */

:root{
  /* A committed light design. Without this, a visitor whose OS is in dark
     mode gets dark rendered form controls, scrollbars and autofill against
     the paper palette. */
  color-scheme:light;

  /* palette sampled from the footage with ffmpeg */
  --canvas:#F2EEE7;
  --canvas-deep:#E7E1D6;
  --panel:#FBF9F5;
  --accent:#29498C;
  --accent-hover:#1D3568;
  --accent-muted:#A9B4CC;
  --text-primary:#1B2438;
  --text-secondary:#515969;
  --timber:#7F6149;

  --paper-line:rgba(27,36,56,.10);
  --paper-line-strong:rgba(27,36,56,.19);

  --ff-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --wrap:1200px;
  --gut:clamp(1.25rem,4.2vw,3rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,8,16,.95),0 3px 12px rgba(5,8,16,.78),0 10px 44px rgba(5,8,16,.8);
}

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}

h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.06;letter-spacing:-.022em;margin:0 0 .5em}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.35rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.012em}
p{margin:0 0 1.15em}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.22em}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--panel);color:var(--text-primary);padding:.8rem 1.3rem;font-weight:600}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- the fixed drafting-sheet environment ---------------------- */
.sheet{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--paper-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-line) 1px,transparent 1px),
    linear-gradient(var(--paper-line-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--paper-line-strong) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,40px 40px,40px 40px;
  opacity:.5;
  animation:sheetdrift 90s linear infinite;
  animation-delay:-22s;
}
@keyframes sheetdrift{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:0 40px,40px 0,0 40px,40px 0}
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--tight{max-width:min(860px,100%)}
main{position:relative;z-index:1}

.section{padding-block:clamp(4.5rem,10vw,8.5rem);position:relative}
.section--paper{background:var(--canvas-deep)}
.section--ink{background:var(--text-primary);color:#D9DEE9}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink a{color:#A9C2F5}

.kicker{
  font-family:var(--ff-mono);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.15rem;
  display:flex;align-items:center;gap:.85rem;
}
.kicker::after{content:"";height:1px;flex:1;max-width:130px;background:var(--accent-muted);animation:kickpulse 6s var(--ease-soft) infinite;animation-delay:-2s}
@keyframes kickpulse{0%,100%{opacity:.45}50%{opacity:1}}
.section--ink .kicker{color:#8FA8E0}
.section--ink .kicker::after{background:rgba(169,180,204,.4)}

.lede{font-size:clamp(1.06rem,1.5vw,1.28rem);color:var(--text-secondary);max-width:60ch}
.section--ink .lede{color:#AEB7C6}
.head{margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.head h2{max-width:19ch}

/* ---------- buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-body);font-size:1rem;font-weight:600;letter-spacing:.005em;
  padding:.95rem 1.7rem;border:1.5px solid transparent;border-radius:2px;
  cursor:pointer;text-decoration:none;line-height:1.2;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn--line{background:transparent;color:var(--text-primary);border-color:var(--paper-line-strong)}
.btn--line:hover{border-color:var(--text-primary);background:var(--text-primary);color:var(--canvas)}
.btn--onfilm{background:rgba(242,238,231,.1);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn--onfilm:hover{background:#fff;color:var(--text-primary);border-color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- the dimension line (the signature element) ---------------- */
.dim{display:block;width:100%;color:var(--accent-muted);overflow:visible}
.dim .run,.dim .tick,.dim .ext{
  stroke:currentColor;stroke-width:1.25;fill:none;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.1s var(--ease);
}
.dim.drawn .run,.dim.drawn .tick,.dim.drawn .ext{stroke-dashoffset:0}
.dim .run{transition-delay:.12s}
.dim .tick{transition-delay:.46s}
.dim .label{
  font-family:var(--ff-mono);font-size:11px;font-weight:700;letter-spacing:.09em;
  fill:var(--accent);opacity:0;transition:opacity .5s var(--ease) .72s;
}
.dim.drawn .label{opacity:1}

/* ---------- header ---------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--gut);
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.solid{background:rgba(242,238,231,.93);backdrop-filter:blur(12px);border-bottom-color:var(--paper-line);padding-block:.7rem}
.site-header__mark{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.site-header__mark svg{width:30px;height:30px;flex-shrink:0}
.site-header__name{font-family:var(--ff-display);font-weight:700;font-size:.94rem;letter-spacing:-.01em;line-height:1.15;color:#fff;transition:color .4s var(--ease);white-space:nowrap}
.site-header__name span{display:block;font-family:var(--ff-mono);font-size:.58rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.site-header.solid .site-header__name{color:var(--text-primary)}
/* Target the <svg>, not the path. The mark is drawn with <use>, and outer
   selectors do not match shadow content — but fill is an inherited property,
   so setting it on the svg does reach the symbol. The old rule matched
   nothing, which is why the mark rendered black in both states. */
.site-header__mark svg{fill:#fff;transition:fill .4s var(--ease)}
.site-header.solid .site-header__mark svg{fill:var(--accent)}
.site-header__cta{display:flex;align-items:center;gap:.7rem}
.site-header .btn{padding:.65rem 1.15rem;font-size:.9rem}
.site-header__tel{font-family:var(--ff-mono);font-size:.85rem;font-weight:700;color:#fff;letter-spacing:.02em;transition:color .4s var(--ease)}
.site-header.solid .site-header__tel{color:var(--text-primary)}
.site-header__tel:hover{color:#fff;text-decoration:underline}
.site-header.solid .site-header__tel:hover{color:var(--accent)}
@media (max-width:640px){
  .site-header__tel{display:none}
  .site-header__name span{display:none}
}

/* ==========================================================================
   THE HERO
   ========================================================================== */
/* The scroll distance for the whole hero film is this height less one
   viewport: 620vh - 100vh = 520vh. It was 900vh (800vh of scroll), so
   the film now finishes in 35 percent less scrolling. The six caption
   bands are keyed to progress fractions, not pixels, so they still land
   on the same moments of the video. */
.hero{position:relative;height:620vh}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--text-primary);
}
.stage__media{position:absolute;inset:0}
.poster,.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 52%;
}
.poster{background-size:cover;background-position:center 52%;background-repeat:no-repeat}
.stage video{opacity:0;transition:opacity .7s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}

/* layer 1: the global base scrim */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 125% 95% at 50% 52%,rgba(8,11,20,0) 30%,rgba(8,11,20,.66) 100%);
}
.scrim--top{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,20,.5) 0%,rgba(8,11,20,.16) 34%,rgba(8,11,20,0) 55%);
}

/* the loading ring */
.ring{
  position:absolute;left:50%;bottom:6.5vh;transform:translateX(-50%);
  width:34px;height:34px;color:rgba(255,255,255,.8);z-index:6;
}
.ring circle{transition:stroke-dashoffset .18s linear}
.cue{
  position:absolute;left:50%;bottom:6.5vh;transform:translateX(-50%);
  color:rgba(255,255,255,.75);z-index:6;animation:cuebob 2.6s var(--ease-soft) infinite;animation-delay:-.6s;
}
@keyframes cuebob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* the caption bands */
.bands{position:absolute;inset:0;z-index:5;pointer-events:none}
.band{
  position:absolute;left:0;right:0;top:0;height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:16vh var(--gut) 0;
  opacity:0;text-align:center;color:#F7F5F1;
  text-shadow:var(--tshadow);
}
/* layer 2: the per-band scrim, upper-centered, riding --k */
.band::before{
  content:"";position:absolute;left:-4%;right:-4%;top:-6%;height:78%;
  pointer-events:none;
  opacity:calc(.28 + .72*var(--k,1));
  background:radial-gradient(ellipse 76% 64% at 50% 34%,rgba(5,8,16,var(--peak,.68)) 0%,rgba(5,8,16,calc(var(--peak,.68) * .66)) 46%,rgba(5,8,16,0) 76%);
}
/* the settle band carries a headline, a subline and a button row, so it needs
   a taller, deeper scrim: its worst frame is the sunlit stucco at 8.7s */
.band.e-settle::before{
  top:-6%;height:99%;
  background:radial-gradient(ellipse 88% 78% at 50% 40%,rgba(5,8,16,var(--peak,.88)) 0%,rgba(5,8,16,calc(var(--peak,.88) * .78)) 50%,rgba(5,8,16,0) 82%);
}
.band > *{position:relative}
/* a shadowed button label reads as grime, so turn it off there */
.band .btn{text-shadow:none}
.band .bk{
  font-family:var(--ff-mono);font-size:.66rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(247,245,241,.82);margin:0 0 1.5rem;
}
.band .bt{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.028em;
  margin:0;max-width:17ch;
}
.band .bs{
  font-size:clamp(1rem,1.55vw,1.22rem);color:rgba(238,240,246,.94);
  margin:1.5rem 0 0;max-width:44ch;line-height:1.5;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* split text spans */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) dimension-draw band 1: characters settle up from a baseline */
.e-dim .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 16px));
}
/* (b) approach-from-depth */
.e-depth .bt{transform:scale(calc(.84 + .16*var(--k,0)));opacity:var(--k,0);transform-origin:50% 55%}
/* (c) grid snap-align */
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (d) word-punch with overshoot */
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.13))*var(--kc) - var(--ov,.13)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) drift-down */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (f) the staged settle */
.e-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px));
}
.e-settle .bs{opacity:clamp(0,(var(--k,0) - .5)*3.4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .5)*3.4,1)) * 14px))}
.e-settle .btn-row{opacity:clamp(0,(var(--k,0) - .68)*4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .68)*4,1)) * 14px));pointer-events:auto;justify-content:center}

.band .dimline{width:min(280px,52vw);margin:1.6rem auto 0;color:rgba(247,245,241,.62)}
.band .dimline .label{fill:#F7F5F1}

/* ---------- the credibility band under the navigation ------------------- */
/* The nav clearance is a margin, so the strip's own height stays ~40px. */
.trustbar{
  margin-top:72px;background:var(--accent-hover);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);
  padding:.5rem var(--gut);text-align:center;position:relative;z-index:2;
}
.trustbar__t{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:0;font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1rem,1.25vw,1.125rem);            /* 16 - 18px */
  line-height:1.3;letter-spacing:-.005em;white-space:nowrap;color:#fff;
}
.trustbar__star{width:.95em;height:.95em;flex:none;fill:#F2C14A}
.site-header.solid + .trustbar{margin-top:60px}
@media (max-width:640px){
  .trustbar{margin-top:64px;padding:.6rem .8rem}
  .trustbar__t{font-size:.875rem;gap:.4rem;white-space:normal}   /* 14px */
  .site-header.solid + .trustbar{margin-top:56px}
}

/* ---------- the static hero (5 gates, matched in JS) ------------------- */
.static-hero{display:none;position:relative;min-height:100svh;background:var(--text-primary);overflow:hidden}
.static-hero__media{position:absolute;inset:0}
.static-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.static-hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,11,20,.86) 0%,rgba(8,11,20,.6) 45%,rgba(8,11,20,.8) 100%);
}
.static-hero__inner{position:relative;z-index:2;padding:clamp(7rem,18vw,9rem) var(--gut) clamp(4rem,10vw,5rem);color:#F7F5F1;text-shadow:var(--tshadow)}
.static-hero h1{color:#fff;max-width:15ch;font-size:clamp(2.3rem,8.5vw,3.4rem)}
.static-hero p{color:rgba(238,240,246,.94);max-width:40ch;font-size:1.06rem}
.static-hero .kicker{color:#A9C2F5}
.static-hero .kicker::after{background:rgba(169,180,204,.45)}

@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}

/* short desktop windows: keep the scrub, drop the small overlays */
@media (max-height:560px){
  .ring,.cue{display:none}
  .band{padding-top:11vh}
}

/* ==========================================================================
   BELOW THE FOLD
   ========================================================================== */

/* 6.1 phases: three columns separated by dimension lines */
.phases{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));position:relative}
.phase{padding:0 clamp(1rem,2.4vw,2rem);position:relative}
.phase + .phase{border-left:1px solid var(--paper-line)}
.phase__n{font-family:var(--ff-mono);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
.phase h3{margin-bottom:.7rem}
.phase p{color:var(--text-secondary);font-size:1rem;margin:0;max-width:36ch}
.phase__rule{margin-top:1.5rem;color:var(--accent-muted)}
@media (max-width:800px){
  .phase + .phase{border-left:0;border-top:1px solid var(--paper-line);padding-top:2.2rem;margin-top:2.2rem}
  .phase{padding-inline:0}
}

/* 6.2 cost: a measured table */
.cost{width:100%;border-collapse:collapse;margin-top:.5rem}
.cost th,.cost td{text-align:left;padding:1.35rem 0;vertical-align:baseline}
.cost thead th{
  font-family:var(--ff-mono);font-size:.66rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);padding-bottom:.9rem;
  border-bottom:1px solid var(--paper-line-strong);
}
.cost tbody tr{border-bottom:1px solid var(--paper-line)}
.cost tbody tr:last-child{border-bottom:0}
.cost td:first-child{font-weight:600;padding-right:2rem;width:48%}
.cost td:last-child{font-family:var(--ff-mono);font-size:.98rem;color:var(--accent);font-weight:700;letter-spacing:-.01em}
@media (max-width:620px){
  .cost thead{display:none}
  .cost tbody tr{display:block;padding-block:1.15rem}
  .cost td{display:block;padding:0;width:auto}
  .cost td:first-child{margin-bottom:.3rem}
}
.footnote{font-size:.95rem;color:var(--text-secondary);border-left:2px solid var(--accent);padding-left:1.2rem;margin-top:2.4rem;max-width:64ch}

/* 6.3 timeline: one measured horizontal bar */
.timeline{margin-top:3rem}
.tl-bar{display:flex;height:64px;border:1px solid var(--paper-line-strong);border-radius:2px;overflow:hidden;background:var(--panel)}
.tl-seg{display:flex;align-items:center;justify-content:center;position:relative;transition:flex-grow .6s var(--ease)}
.tl-seg + .tl-seg{border-left:1px solid var(--paper-line-strong)}
.tl-seg span{font-family:var(--ff-mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);padding-inline:.5rem;text-align:center;line-height:1.3}
.tl-seg.is-slow{background:rgba(41,73,140,.09)}
.tl-seg.is-slow span{color:var(--accent)}
.tl-key{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.1rem;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:700px){
  .tl-bar{height:auto;flex-direction:column}
  .tl-seg{padding-block:1rem}
  .tl-seg + .tl-seg{border-left:0;border-top:1px solid var(--paper-line-strong)}
}

/* 6.4 the lot sizer */
.sizer{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;margin-top:1rem}
@media (max-width:900px){.sizer{grid-template-columns:1fr}}
.sizer__plot{background:var(--panel);border:1px solid var(--paper-line-strong);border-radius:2px;padding:clamp(1.5rem,3vw,2.5rem);position:relative}
.sizer__plot svg{width:100%;height:auto;display:block;overflow:visible}
.plot-fill{fill:rgba(41,73,140,.08);stroke:var(--accent);stroke-width:1.5;transition:none}
.plot-dim{stroke:var(--accent-muted);stroke-width:1;fill:none}
.plot-label{font-family:var(--ff-mono);font-size:12px;font-weight:700;fill:var(--accent);letter-spacing:.05em}
.plot-area{font-family:var(--ff-mono);font-size:22px;font-weight:700;fill:var(--text-primary);letter-spacing:-.01em}
.plot-area-sub{font-family:var(--ff-mono);font-size:10px;font-weight:400;fill:var(--text-secondary);letter-spacing:.16em}
.plot-room{font-family:var(--ff-mono);font-size:9px;fill:var(--text-secondary);letter-spacing:.1em}
.plot-wall{stroke:var(--accent-muted);stroke-width:1;stroke-dasharray:3 3;fill:none}

.ctrl{margin-bottom:2rem}
.ctrl__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;gap:1rem}
.ctrl__top label{font-family:var(--ff-mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.ctrl__val{font-family:var(--ff-mono);font-size:1.1rem;font-weight:700;color:var(--accent)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--paper-line-strong);
  border-radius:2px;outline-offset:8px;margin:0;padding:0;border:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:3px solid var(--panel);cursor:grab;
  box-shadow:0 1px 6px rgba(27,36,56,.32);transition:transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.14)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--accent);
  border:3px solid var(--panel);cursor:grab;box-shadow:0 1px 6px rgba(27,36,56,.32);
}
.readouts{border-top:1px solid var(--paper-line);margin-top:2.2rem;padding-top:1.5rem;display:grid;gap:1rem}
.readout{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.97rem}
.readout dt{color:var(--text-secondary);margin:0}
.readout dd{margin:0;font-family:var(--ff-mono);font-size:.88rem;font-weight:700;text-align:right;letter-spacing:.02em}
.readout dd.yes{color:#1F6B4A}
.readout dd.no{color:var(--timber)}

/* 6.5 the work gallery */
.work{display:grid;gap:.75rem;grid-template-columns:repeat(12,1fr)}
.work figure{margin:0;position:relative;overflow:hidden;background:var(--canvas-deep);grid-column:span 4}
.work figure.wide{grid-column:span 8}
.work figure.tall{grid-column:span 4;grid-row:span 2}
.work img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .8s var(--ease)}
.work figure.tall img{aspect-ratio:3/4.4}
.work figure.wide img{aspect-ratio:8/4.5}
.work figure:hover img{transform:scale(1.04)}
.work figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.4rem .95rem .8rem;
  background:linear-gradient(to top,rgba(8,11,20,.9),transparent);
  font-family:var(--ff-mono);font-size:.63rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}
@media (max-width:900px){
  .work{grid-template-columns:repeat(6,1fr)}
  .work figure,.work figure.wide,.work figure.tall{grid-column:span 3;grid-row:auto}
  .work figure.tall img,.work figure.wide img{aspect-ratio:4/3}
}
@media (max-width:520px){
  .work figure,.work figure.wide,.work figure.tall{grid-column:span 6}
}

/* 6.6 trust: offset split */
.trust{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:end}
@media (max-width:860px){.trust{grid-template-columns:1fr}}
.trust__img{position:relative}
.trust__img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.proof{display:grid;gap:0;margin-top:3rem;border-top:1px solid rgba(169,180,204,.25)}
.proof div{
  padding:1.1rem 0;border-bottom:1px solid rgba(169,180,204,.25);
  font-family:var(--ff-mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#A9C2F5;
}

/* 6.7 faq */
.faq{border-top:1px solid var(--paper-line-strong);margin-top:1rem}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.5rem 3rem 1.5rem 0;
  font-family:var(--ff-display);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.28rem);
  letter-spacing:-.012em;color:var(--text-primary);
  transition:color .25s var(--ease);
}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:.35rem;top:50%;background:var(--accent);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq summary::before{width:15px;height:1.5px;transform:translateY(-50%)}
.faq summary::after{width:1.5px;height:15px;right:calc(.35rem + 6.75px);transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq details > div{padding-bottom:1.7rem;color:var(--text-secondary);max-width:70ch}
.faq details > div p:last-child{margin-bottom:0}

/* 6.8 area */
.area{display:flex;flex-wrap:wrap;gap:.55rem .5rem;margin-top:2rem;max-width:64ch}
.area li{
  list-style:none;font-family:var(--ff-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--paper-line-strong);border-radius:2px;padding:.5rem .8rem;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.area li:hover{border-color:var(--accent);color:var(--accent)}
.area{padding:0;margin-inline:0}

/* 6.9 form */
.form-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);align-items:start}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.35rem}
.field label{
  display:block;font-family:var(--ff-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.55rem;
}
.field .req{color:var(--accent)}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;font-family:var(--ff-body);font-size:1rem;color:var(--text-primary);
  padding:.85rem 0;border:0;border-bottom:1.5px solid var(--paper-line-strong);
  background:transparent;border-radius:0;
  transition:border-color .25s var(--ease);
}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--accent);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2.5px solid var(--accent);outline-offset:4px}
textarea{resize:vertical;min-height:118px;line-height:1.55}
select{cursor:pointer}
.field-row{display:grid;gap:1.35rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem;color:var(--text-secondary);margin:1.9rem 0}
.check input{width:auto;margin-top:.3rem;flex-shrink:0;accent-color:var(--accent)}
.form-status{
  margin-top:1.4rem;padding:1.1rem 1.3rem;border-left:2px solid var(--accent);
  background:var(--panel);font-size:.97rem;color:var(--text-primary);
}
.form-status[hidden]{display:none}
.side-card{background:var(--panel);border:1px solid var(--paper-line-strong);border-radius:2px;padding:clamp(1.6rem,3vw,2.2rem)}
.side-card + .side-card{margin-top:1rem}
.side-card h3{font-size:1.05rem;margin-bottom:1.3rem}
.side-card dl{margin:0;display:grid;gap:1.25rem}
.side-card dt{font-family:var(--ff-mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.3rem}
.side-card dd{margin:0}
.tel-big{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--text-primary)}
.tel-big:hover{color:var(--accent);text-decoration:none}
.side-card .alt-tel{font-family:var(--ff-mono);font-size:.86rem}

/* ---------- footer ---------------------------------------------------- */
.site-footer{background:var(--text-primary);color:#8792A6;padding-top:clamp(3.5rem,7vw,5rem);position:relative;z-index:1}
.site-footer a{color:#C3CBDA}
.site-footer a:hover{color:#fff}
.footer-dim{color:rgba(169,180,204,.4);margin-bottom:3rem}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));padding-bottom:3rem}
.site-footer h4{
  font-family:var(--ff-mono);font-size:.64rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;margin:0 0 1.2rem;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.6rem;font-size:.93rem}
.footer-mark{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.footer-mark svg{width:32px;height:32px}
.footer-mark path{fill:#A9C2F5}
.footer-mark strong{font-family:var(--ff-display);font-size:1rem;color:#fff;line-height:1.2}
.footer-bottom{
  border-top:1px solid rgba(169,180,204,.16);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#6B7688;
}
.footer-bottom p{margin:0}

/* ---------- entrances ------------------------------------------------- */
.rise{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rise.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:90ms}
.stagger.in > *:nth-child(3){transition-delay:180ms}
.stagger.in > *:nth-child(4){transition-delay:270ms}
.stagger.in > *:nth-child(5){transition-delay:360ms}
.stagger.in > *:nth-child(6){transition-delay:450ms}
/* retire the delays so later hovers do not lag; matches the nth-child specificity */
.stagger.done > *:nth-child(1),.stagger.done > *:nth-child(2),.stagger.done > *:nth-child(3),
.stagger.done > *:nth-child(4),.stagger.done > *:nth-child(5),.stagger.done > *:nth-child(6){transition-delay:0s}

/* ---------- reduced motion ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  html{scroll-behavior:auto}
  .rise,.stagger > *{opacity:1;transform:none}
  .dim .run,.dim .tick,.dim .ext{stroke-dashoffset:0}
  .dim .label{opacity:1}
  .sheet{animation:none}
  .cue{animation:none;transform:translateX(-50%)}
  .ring{display:none}
}

/* pause everything while the tab is hidden or a section is off screen */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ==========================================================================
   LANGUAGE SWITCH
   ========================================================================== */
.lang{display:flex;align-items:center;border:1px solid rgba(255,255,255,.4);border-radius:2px;overflow:hidden;transition:border-color .4s var(--ease)}
.site-header.solid .lang{border-color:var(--paper-line-strong)}
.lang__btn{text-decoration:none;display:inline-flex;align-items:center;
  font-family:var(--ff-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:.5rem .7rem;border:0;background:transparent;
  color:rgba(255,255,255,.82);cursor:pointer;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.site-header.solid .lang__btn{text-decoration:none;display:inline-flex;align-items:center;color:var(--text-secondary)}
.lang__btn:hover{background:rgba(255,255,255,.14);text-decoration:none}
.site-header.solid .lang__btn:hover{background:rgba(41,73,140,.08);text-decoration:none}
.lang__btn.is-on{background:#fff;color:var(--text-primary)}
.site-header.solid .lang__btn.is-on{background:var(--accent);color:#fff}
@media (pointer:coarse){.lang__btn{text-decoration:none;display:inline-flex;align-items:center;min-height:38px}}
@media (max-width:520px){
  .lang__btn{text-decoration:none;display:inline-flex;align-items:center;padding:.5rem .5rem;font-size:.6rem}
  .site-header__mark svg{width:26px;height:26px}
}

/* ==========================================================================
   COMMON WAYS TO ADD AN ADU
   ========================================================================== */
.types{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.type{
  background:var(--panel);border:1px solid var(--paper-line-strong);border-radius:2px;
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.type:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 40px rgba(27,36,56,.09)}
.type__i{width:48px;height:40px;color:var(--accent);margin-bottom:1.35rem;flex-shrink:0}
.type h3{margin-bottom:.7rem}
.type > p{color:var(--text-secondary);font-size:.98rem;margin-bottom:1rem}
.type__eg,.type__when{
  font-size:.9rem;line-height:1.55;padding-left:.9rem;
  border-left:2px solid var(--accent-muted);
}
.type__eg{font-style:italic;color:var(--text-secondary)}
.type__when{color:var(--text-primary);border-left-color:var(--accent);margin-bottom:1.6rem}
.type__cta{margin-top:auto;align-self:flex-start;padding:.7rem 1.2rem;font-size:.9rem}

/* ==========================================================================
   MORE SPACE FOR REAL LIFE
   ========================================================================== */
.uses{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
@media (max-width:880px){.uses{grid-template-columns:1fr}}
.uses__head h2{max-width:12ch}
.uses__list{list-style:none;margin:0;padding:0;counter-reset:u}
.uses__list li{
  counter-increment:u;position:relative;padding:1.5rem 0 1.5rem 3.6rem;
  border-bottom:1px solid rgba(169,180,204,.22);margin:0;
}
.uses__list li:first-child{padding-top:0}
.uses__list li:last-child{border-bottom:0;padding-bottom:0}
.uses__list li::before{
  content:"0" counter(u);position:absolute;left:0;top:1.5rem;
  font-family:var(--ff-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:#8FA8E0;
}
.uses__list li:first-child::before{top:0}
.uses__list h3{font-size:clamp(1.1rem,1.7vw,1.3rem);margin-bottom:.4rem;color:#fff}
.uses__list p{color:#AEB7C6;font-size:.98rem;margin:0;max-width:52ch}

/* ==========================================================================
   THE EIGHT STEPS
   ========================================================================== */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));column-gap:clamp(2rem,5vw,4rem)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;padding:1.6rem 0;border-top:1px solid var(--paper-line);margin:0}
.step__n{
  font-family:var(--ff-mono);font-size:.78rem;font-weight:700;color:var(--accent);
  border:1px solid var(--accent-muted);border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;line-height:1;
}
.step h3{font-size:clamp(1.08rem,1.6vw,1.26rem);margin-bottom:.4rem}
.step p{color:var(--text-secondary);font-size:.97rem;margin:0;max-width:48ch}

/* ==========================================================================
   OFFICIAL RESOURCES
   ========================================================================== */
.reslist{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));column-gap:clamp(2rem,4vw,3.5rem)}
.reslist li{margin:0;border-bottom:1px solid var(--paper-line)}
.reslist a{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.35rem 0;color:var(--text-primary);font-weight:600;font-size:1.02rem;
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.reslist a:hover{color:var(--accent);text-decoration:none;padding-left:.5rem}
.ext-i{width:15px;height:15px;flex-shrink:0;color:var(--accent-muted);transition:color .25s var(--ease),transform .25s var(--ease)}
.reslist a:hover .ext-i{color:var(--accent);transform:translate(2px,-2px)}
.disclaimer{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.4rem 1.6rem;
  background:var(--canvas-deep);border-left:2px solid var(--accent-muted);
  font-size:.92rem;color:var(--text-secondary);max-width:78ch;
}

.faq-sub{
  margin:clamp(3rem,6vw,4.5rem) 0 0;font-family:var(--ff-mono);
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}

/* ---------- header fits every phone -------------------------------------
   Measured: at 320px the row overflowed by 112px and the CTA wrapped to two
   lines. Shorten the language labels, drop the wordmark, stop the CTA wrap. */
.lang__short{display:none}
.site-header .btn{white-space:nowrap}
@media (max-width:700px){
  .lang__long{display:none}
  .lang__short{display:inline}
  .site-header__name{display:none}
  .site-header{padding-inline:1rem;gap:.6rem}
  .site-header .btn{padding:.62rem .8rem;font-size:.82rem}
  .lang__btn{text-decoration:none;display:inline-flex;align-items:center;padding:.55rem .6rem;font-size:.66rem}
}
@media (max-width:360px){
  .site-header .btn{padding:.6rem .6rem;font-size:.76rem}
}

/* anchored sections must not land under the fixed header */
html{scroll-padding-top:96px}
:target{scroll-margin-top:96px}

/* the four official links read better as a 2x2 block than 3 plus an orphan */
.reslist{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

/* the static hero's display line is art direction; the document's real h1 is
   the visually hidden one at the top of main, so there is exactly one */
.static-hero .static-h{
  font-family:var(--ff-display);font-weight:700;line-height:1.06;letter-spacing:-.022em;
  color:#fff;max-width:15ch;font-size:clamp(2.3rem,8.5vw,3.4rem);margin:0 0 .5em;
}
@media (max-width:560px){
  .static-hero .kicker{font-size:.62rem;letter-spacing:.16em}
  .static-hero .btn-row .btn{width:100%}
}

/* ==========================================================================
   MULTI-PAGE SHELL
   ========================================================================== */

/* ---- primary navigation ---- */
.site-header{gap:1rem}
.nav{margin-right:auto}
.nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__list > li{margin:0;position:relative}
.nav__list a,.nav__sub-toggle{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--ff-body);font-size:.88rem;font-weight:600;letter-spacing:.005em;
  padding:.55rem .7rem;border-radius:2px;border:0;background:none;cursor:pointer;
  color:#fff;text-decoration:none;line-height:1.2;white-space:nowrap;
  transition:color .3s var(--ease),background .2s var(--ease);
}
.site-header.solid .nav__list a,.site-header.solid .nav__sub-toggle{color:var(--text-primary)}
.nav__list a:hover,.nav__sub-toggle:hover{background:rgba(255,255,255,.14);text-decoration:none}
.site-header.solid .nav__list a:hover,.site-header.solid .nav__sub-toggle:hover{background:rgba(41,73,140,.08);color:var(--accent)}
.nav__list a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.nav__sub-toggle::after{
  content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.75;
}
.nav__sub{
  position:absolute;top:100%;left:0;min-width:16rem;list-style:none;margin:0;padding:.45rem;
  background:var(--panel);border:1px solid var(--paper-line-strong);border-radius:2px;
  box-shadow:0 18px 48px rgba(19,33,51,.18);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:70;
}
.has-sub:hover .nav__sub,.has-sub:focus-within .nav__sub,.nav__sub-toggle[aria-expanded="true"] + .nav__sub{
  opacity:1;visibility:visible;transform:none;
}
.nav__sub li{margin:0}
.nav__sub a{display:block;width:100%;color:var(--text-primary);font-size:.9rem;padding:.6rem .75rem}
.nav__sub a:hover{background:rgba(41,73,140,.08);color:var(--accent)}

.nav-toggle{
  display:none;background:none;border:1.5px solid rgba(255,255,255,.45);
  border-radius:2px;padding:.5rem .75rem;cursor:pointer;color:#fff;
  font-family:var(--ff-mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.site-header.solid .nav-toggle{border-color:var(--paper-line-strong);color:var(--text-primary)}

@media (max-width:1180px){
  .nav-toggle{display:block;order:3}
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;order:4;
    background:var(--panel);border-top:1px solid var(--paper-line);
    box-shadow:0 20px 50px rgba(19,33,51,.16);
    max-height:min(78vh,640px);overflow-y:auto;padding:.5rem var(--gut) 1.5rem;
  }
  .nav[hidden]{display:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list > li{border-bottom:1px solid var(--paper-line)}
  .nav__list a,.nav__sub-toggle{
    color:var(--text-primary);width:100%;justify-content:space-between;
    padding:.95rem .25rem;font-size:1rem;border-radius:0;
  }
  .site-header.solid .nav__list a,.site-header.solid .nav__sub-toggle{color:var(--text-primary)}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;padding:0 0 .7rem .8rem;min-width:0;display:none;
  }
  .nav__sub-toggle[aria-expanded="true"] + .nav__sub{display:block}
  .nav__sub a{padding:.6rem .25rem;font-size:.94rem;color:var(--text-secondary)}
  .nav__sub-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-3px,-3px)}
}

/* ---- breadcrumbs ---- */
.crumbs{background:var(--canvas);border-bottom:1px solid var(--paper-line);padding-top:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem .55rem;list-style:none;margin:0;padding:.85rem 0}
.crumbs li{margin:0;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.crumbs li + li::before{content:"/";margin-right:.55rem;color:var(--accent-muted)}
.crumbs a{color:var(--text-secondary)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--text-primary);font-weight:700}

/* ---- interior page head ---- */
.page-head{background:var(--canvas-deep);border-bottom:1px solid var(--paper-line);padding-block:clamp(2.5rem,5vw,4rem)}
.page-head h1{max-width:20ch;margin-bottom:.35em}
.page-head .lede{max-width:62ch}
.page-head--article h1{max-width:24ch}
.byline{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin:1.2rem 0 0}
.section--article{padding-top:clamp(2.5rem,5vw,3.5rem)}
.answer{
  font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.6;color:var(--text-primary);
  border-left:3px solid var(--accent);padding:0 0 0 1.4rem;margin-bottom:2.5rem;font-weight:600;
}

/* ---- homepage intro ---- */
.intro__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
@media (max-width:900px){.intro__grid{grid-template-columns:1fr}}
.intro__sub{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.25;letter-spacing:-.015em;color:var(--accent);margin:0 0 1.1rem;max-width:26ch}
.intro__chain{font-size:1.05rem;color:var(--text-primary);font-weight:600;margin-bottom:1.1rem;max-width:46ch}
.intro__facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper-line)}
.intro__facts li{margin:0;padding:1.05rem 0;border-bottom:1px solid var(--paper-line);display:grid;gap:.2rem}
.intro__facts span{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.intro__facts strong{font-size:.98rem;font-weight:600;color:var(--text-primary)}

/* ---- prose bits ---- */
.prose h2{margin-top:2.3em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent)}
.pull{
  font-family:var(--ff-display);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.3;letter-spacing:-.015em;color:var(--text-primary);
  border-left:3px solid var(--accent);padding-left:1.3rem;margin:2rem 0;max-width:34ch;
}
.maybe{font-family:var(--ff-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);color:var(--accent);margin:0 0 .3em;letter-spacing:-.02em}
.warn{background:var(--canvas-deep);border-left:3px solid #C1803A;padding:1.15rem 1.4rem;font-size:.95rem;color:var(--text-primary);margin:1.8rem 0;border-radius:2px}
.section--paper .warn{background:var(--panel)}
.warn.small{font-size:.88rem;padding:.95rem 1.15rem}
.closing{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.4;letter-spacing:-.01em;margin-top:2.5rem;max-width:46ch}
.section--ink .closing{color:#fff}
.closing.small{font-size:.95rem;font-family:var(--ff-body);font-weight:400;color:var(--text-secondary);margin-top:1.4rem}
.sub{margin-top:3rem}
.center{text-align:center}
.center .kicker{justify-content:center}
.center .kicker::after{display:none}
.center .lede{margin-inline:auto}
.center .btn-row{justify-content:center}
.cta-band-sec .lede{color:#c3cbd8}

/* ---- check grid ---- */
.checkgrid{list-style:none;padding:0;margin:0;display:grid;gap:.6rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.checkgrid li{margin:0;display:flex;gap:.65rem;align-items:flex-start;font-size:.97rem;line-height:1.5}
.checkgrid li::before{content:"";flex-shrink:0;width:13px;height:13px;margin-top:.4em;border:1.5px solid var(--accent);border-radius:1px}
.can__grid,.perm__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}

/* ---- factors ---- */
.factors{display:grid;gap:0;margin:1.5rem 0 0;border-top:1px solid var(--paper-line)}
.factors > div{padding:1.15rem 0;border-bottom:1px solid var(--paper-line);display:grid;gap:.25rem .5rem;grid-template-columns:minmax(0,12rem) minmax(0,1fr)}
@media (max-width:640px){.factors > div{grid-template-columns:1fr}}
.factors dt{font-weight:700;color:var(--text-primary)}
.factors dd{margin:0;color:var(--text-secondary);font-size:.97rem}

/* ---- phases with icons ---- */
.phase__i{width:44px;height:36px;color:#8FA8E0;margin-bottom:1.1rem}
.section--ink .phase + .phase{border-left-color:rgba(169,180,204,.25)}
.tlink{display:inline-block;margin-top:1rem;font-size:.9rem;font-weight:600}
.steps--four{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}

/* ---- comparison table ---- */
.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.cmp th,.cmp td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--paper-line);vertical-align:top}
.cmp thead th{background:var(--canvas-deep);font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.cmp td:first-child{font-weight:700;width:26%}

/* The wrapper existed in the markup but had no rule, so a table wider than
   the screen was clipped rather than scrolled. Any wide table now swipes. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

/* Under 700px the comparison stops being a table and becomes one labelled
   block per row, which reads without any sideways movement at all. */
@media (max-width:700px){
  .cmp{min-width:0;font-size:1rem;display:block}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp tbody,.cmp tr,.cmp td{display:block;width:auto}
  .cmp tr{
    border-bottom:1px solid var(--paper-line);
    padding:1.05rem 0;
  }
  .cmp tr:last-child{border-bottom:0}
  .cmp td{border:0;padding:0}
  .cmp td:first-child{
    width:auto;font-family:var(--ff-mono);font-size:.66rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);
    margin-bottom:.55rem;
  }
  .cmp td[data-c]{
    display:grid;grid-template-columns:3.6rem 1fr;gap:.75rem;
    align-items:baseline;padding:.3rem 0;line-height:1.5;
  }
  .cmp td[data-c]::before{
    content:attr(data-c);
    font-family:var(--ff-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;
    color:var(--accent);padding-top:.15rem;
  }
}

/* ---- resource list inline ---- */
.reslist--inline{grid-template-columns:1fr;margin:1.2rem 0 0}
.reslist--inline a{font-size:.98rem;padding:1rem 0}

/* ---- service area list ---- */
.arealist{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));column-gap:clamp(1.5rem,3vw,3rem)}
.arealist li{margin:0;border-bottom:1px solid var(--paper-line)}
.arealist a{display:grid;gap:.15rem;padding:1.2rem 0;color:var(--text-primary);transition:padding-left .25s var(--ease),color .25s var(--ease)}
.arealist a:hover{padding-left:.5rem;color:var(--accent);text-decoration:none}
.arealist strong{font-family:var(--ff-display);font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.arealist span{font-size:.9rem;color:var(--text-secondary)}

/* ---- guides index ---- */
.guides{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.guides li{margin:0}
.guides a{
  display:flex;flex-direction:column;height:100%;gap:.6rem;
  background:var(--panel);border:1px solid var(--paper-line-strong);border-radius:2px;
  padding:clamp(1.4rem,2.4vw,1.9rem);color:var(--text-primary);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.guides a:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 40px rgba(27,36,56,.09);text-decoration:none}
.guides h2{font-size:clamp(1.05rem,1.6vw,1.22rem);margin:0;letter-spacing:-.012em;line-height:1.25}
.guides p{color:var(--text-secondary);font-size:.94rem;margin:0;flex:1}
.guides .more{font-family:var(--ff-mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---- footer additions ---- */
.foot-h{font-family:var(--ff-mono);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 1.2rem}
.foot-blurb{max-width:34ch;font-size:.92rem;margin-bottom:1.2rem}
.foot-nap{font-size:.9rem;line-height:1.7;margin-bottom:1.2rem}
.foot-lic{font-size:.85rem;line-height:1.7;margin:0}
.foot-note{font-size:.84rem;margin-top:1.4rem;color:#7b8aa3;max-width:30ch}
.cslb{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;margin-top:.5rem}
.site-footer .ext-i{width:12px;height:12px}

/* ---- misc ---- */
.side-h{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;margin-bottom:1.3rem;letter-spacing:-.01em}
.reassure{font-size:.9rem;color:var(--text-secondary);margin:1rem 0 0}
.type h3{margin-bottom:.7rem}
.type h3 a{color:inherit}
.type h3 a:hover{color:var(--accent);text-decoration:none}
.section--ink .warn{background:rgba(255,255,255,.06);color:#D9DEE9;border-left-color:#8FA8E0}
.section--ink .prose a{color:#A9C2F5}

.es-notice{
  margin:0;padding:.95rem var(--gut);background:var(--accent);color:#fff;
  font-size:.94rem;text-align:center;
}
.es-notice a{color:#fff;font-weight:700;text-decoration:underline}

/* the header row was 333px of content inside a 320px phone; shed the long labels */
.btn__short{display:none}
.nav-toggle{display:none;align-items:center;gap:.45rem}
.burger{width:15px;height:12px;flex-shrink:0}
@media (max-width:1180px){.nav-toggle{display:inline-flex;order:3}}
@media (max-width:760px){
  .btn__long{display:none}
  .btn__short{display:inline}
}
@media (max-width:430px){
  .nav-toggle__t{display:none}
  .nav-toggle{padding:.5rem .6rem}
  .site-header{gap:.5rem}
}

/* the language switch is a link now, so it needs link resets */
.lang__btn{color:rgba(255,255,255,.82)}
.lang__btn.is-on,.lang__btn.is-on:hover{background:#fff;color:var(--text-primary)}
.site-header.solid .lang__btn.is-on,.site-header.solid .lang__btn.is-on:hover{background:var(--accent);color:#fff}
.es-notice{display:none}


/* ==================================================== trust strip
   Four claims the site can actually back, sat above the footer. */
.tbar{
  background:var(--canvas-deep);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding:1.6rem 0;
}
.tbar__l{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.1rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));
}
.tbar__i{display:flex;gap:.65rem;align-items:flex-start}
.tbar__ic{
  width:22px;height:22px;flex:0 0 22px;color:var(--accent);margin-top:2px;
  max-width:22px;max-height:22px;
}
.tbar__tx{display:block;min-width:0}
.tbar__i b{
  display:block;font-family:var(--ff-body);font-size:.95rem;font-weight:600;
  color:var(--text-primary);line-height:1.3;
}
.tbar__d{
  display:block;font-size:.82rem;line-height:1.45;color:var(--text-secondary);margin-top:.1rem;
}
.tbar__v{margin:1.2rem 0 0;font-size:.85rem}
.tbar__v a{color:var(--accent);font-weight:600}

/* ============================================ sticky contact bar, phones only
   Hidden by default. Only a coarse pointer on a narrow screen gets it, and it
   is pinned below the safe area so it clears the iOS home indicator. */
.stickybar{display:none}

/* ===================================== the mobile action bar
   Three equal actions, phones only. Tablets keep the normal navigation,
   which already offers all three. Design carries the emphasis because it
   is the thing this site has that the others do not. */
@media (max-width:720px) and (pointer:coarse){
  .stickybar{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;
    position:fixed;left:0;right:0;bottom:0;z-index:900;
    padding:.35rem .45rem calc(.35rem + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb, var(--text-primary) 96%, transparent);
    border-top:1px solid rgba(255,255,255,.13);
    box-shadow:0 -6px 22px rgba(27,36,56,.22);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    backdrop-filter:saturate(140%) blur(8px);
  }
  @supports not (background:color-mix(in srgb, red 50%, blue)){
    .stickybar{background:var(--text-primary)}
  }

  .stickybar__b{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
    min-height:52px;padding:.35rem .2rem;border-radius:4px;text-decoration:none;
    color:rgba(242,238,231,.86);
    font-family:var(--ff-mono);font-size:.58rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent;
    transition:background .18s var(--ease),color .18s var(--ease);
  }
  .stickybar__b svg{
    width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;
  }
  .stickybar__b:active{background:rgba(255,255,255,.12);color:#fff}
  .stickybar__b:focus-visible{outline:2px solid #fff;outline-offset:-2px}

  /* the one that matters most */
  .stickybar__b--go{
    background:var(--accent);color:#fff;
    box-shadow:0 2px 10px rgba(41,73,140,.5);
  }
  .stickybar__b--go svg{stroke-width:1.9}
  .stickybar__b--go:active{background:var(--accent-hover);color:#fff}

  /* nothing at the bottom of the page hides behind the bar */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
.sources__k{
  margin:0 0 .55rem;font-family:var(--ff-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
}
.sources__l{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.sources__l a{
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--accent);font-weight:600;font-size:.92rem;
}
.sources__d{
  margin:.75rem 0 0;padding-top:.7rem;border-top:1px solid var(--paper-line);
  font-size:.83rem;line-height:1.55;color:var(--text-secondary);
}
.sources__d strong{color:var(--text-primary)}


/* ============================================= where to go after a guide */
.next{border-top:2px solid var(--text-primary);padding-top:1.1rem}
.next__k{
  margin:0 0 .8rem;font-family:var(--ff-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
}
.next__l{
  list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.next__l a{
  display:block;height:100%;padding:.85rem .95rem;text-decoration:none;
  background:var(--panel);border:1px solid var(--paper-line);border-radius:3px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.next__l a:hover{border-color:var(--accent);transform:translateY(-2px)}
.next__t{
  display:block;font-weight:600;color:var(--accent);font-size:.95rem;line-height:1.3;
}
.next__t::after{content:" \2192"}
.next__d{
  display:block;margin-top:.25rem;font-size:.83rem;line-height:1.45;color:var(--text-secondary);
}


/* ================================================= DESIGN YOUR ADU promo
   High on the home page, and the second of the two conversion paths: one
   for people ready to call, one for people still working it out. */
.designpromo{background:var(--canvas-deep);border-block:1px solid var(--paper-line)}
.designpromo__grid{
  display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.designpromo__h{margin:.2rem 0 .6rem;text-wrap:balance}
.designpromo__list{
  list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;gap:.5rem;
}
.designpromo__list li{
  position:relative;padding-left:1.5rem;font-size:.98rem;line-height:1.5;
  color:var(--text-secondary);
}
.designpromo__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border:2px solid var(--accent);border-radius:1px;
}
.designpromo__note{margin:.75rem 0 0;font-size:.85rem;color:var(--text-secondary)}
.btn--big{font-size:1.02rem;padding:1rem 1.6rem}

/* the framed preview, which is itself a link into the tool */
.designpromo__shot{
  display:block;position:relative;text-decoration:none;border-radius:4px;
  overflow:hidden;background:var(--panel);border:1px solid var(--paper-line-strong);
  box-shadow:0 18px 44px rgba(27,36,56,.13);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.designpromo__shot:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(27,36,56,.2)}
.designpromo__chrome{
  display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;
  background:var(--canvas);border-bottom:1px solid var(--paper-line);
}
.designpromo__dot{width:9px;height:9px;border-radius:50%;background:var(--paper-line-strong)}
.designpromo__url{
  margin-left:.6rem;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);
}
.designpromo__img{display:block;width:100%;height:auto}
@media (max-width:860px){
  .designpromo__grid{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------- the nav item for it */
/* The one navigation item that is a button rather than a link. It uses the
   existing brand accent, so nothing new enters the palette. */
.nav__designer{position:relative;display:flex;align-items:center}
.nav__designer a{
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.5rem .9rem;border-radius:3px;
  background:var(--accent);color:#fff;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 1px 3px rgba(27,36,56,.18);
  transition:background .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.nav__designer a svg{width:15px;height:15px;flex:0 0 15px;stroke:currentColor;fill:none}
.nav__designer a:hover{
  background:var(--accent-hover);
  box-shadow:0 4px 12px rgba(41,73,140,.34);
  transform:translateY(-1px);
}
.nav__designer a:active{transform:translateY(0);box-shadow:0 1px 3px rgba(27,36,56,.18)}
.nav__designer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .nav__designer a{transition:background .22s var(--ease)}
  .nav__designer a:hover{transform:none}
}

/* ------------------------------------------------ the designer page head */
.designer-head{padding-bottom:0}
.designer-head__h{margin:.2rem 0 .5rem;font-size:clamp(2.1rem,5.5vw,3.4rem);text-wrap:balance}
.designer-head__p{max-width:60ch}
.section--designer{padding-top:1.6rem}

/* --------------------------- the old calculator page, now a signpost */
.tocalc{
  border:1px solid var(--paper-line-strong);border-radius:4px;
  padding:clamp(1.4rem,4vw,2.4rem);background:var(--panel);text-align:center;
}
.tocalc__k{
  margin:0 0 .4rem;font-family:var(--ff-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
}
.tocalc h2{margin:0 0 .6rem}
.tocalc p{margin:0 auto 1.3rem;max-width:56ch;color:var(--text-secondary)}
.tocalc .btn-row{justify-content:center}

/* the honeypot: present for bots, never seen or focused by a person */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* The solid header repaints every nav link dark (.site-header.solid
   .nav__list a beats .nav__designer a on specificity), which turned the blue
   button dark on blue once the page scrolled. Keep it white in both states. */
.site-header .nav__list .nav__designer a,
.site-header.solid .nav__list .nav__designer a{
  background:var(--accent);color:#fff;
}
.site-header .nav__list .nav__designer a:hover,
.site-header.solid .nav__list .nav__designer a:hover{
  background:var(--accent-hover);color:#fff;
}

/* ==========================================================================
   SOLID NAVIGATION
   The header used to start transparent over the hero, which left white text
   sitting on the pale blueprint. It is dark navy from first paint now, and
   the scrolled state only adds a shadow. These rules are last in the file
   and match the specificity of the .solid overrides they cancel.
   ========================================================================== */
.site-header,.site-header.solid{
  background:#141C2E;backdrop-filter:none;
  border-bottom:1px solid rgba(169,180,204,.22);
  padding-block:0;min-height:60px;
  box-shadow:none;
}
.site-header.solid{box-shadow:0 6px 20px rgba(5,8,16,.28)}

/* everything inside stays in its light-on-dark form in both states */
.site-header.solid .site-header__name{color:#fff}
.site-header.solid .site-header__mark svg{fill:#fff}
.site-header.solid .site-header__tel{color:#fff}
.site-header.solid .site-header__tel:hover{color:#fff;text-decoration:underline}
.site-header.solid .nav__list a,.site-header.solid .nav__sub-toggle{color:#fff}
.site-header.solid .nav__list a:hover,.site-header.solid .nav__sub-toggle:hover{
  background:rgba(255,255,255,.12);color:#fff}
.site-header.solid .nav-toggle{border-color:rgba(169,180,204,.45);color:#fff}
.site-header.solid .lang{border-color:rgba(169,180,204,.45)}
.site-header.solid .lang__btn{color:rgba(238,240,246,.86)}
.site-header.solid .lang__btn:hover{background:rgba(255,255,255,.12)}
.site-header.solid .lang__btn.is-on,.site-header.solid .lang__btn.is-on:hover{
  background:#fff;color:var(--accent)}
.site-header.solid .nav__list .nav__designer a{background:var(--accent);color:#fff}
.site-header.solid .nav__list .nav__designer a:hover{background:var(--accent-hover);color:#fff}

/* the strip sits directly under a header of constant height in both states */
.trustbar,.site-header.solid + .trustbar{margin-top:60px}
@media (max-width:640px){
  .trustbar,.site-header.solid + .trustbar{margin-top:60px}
}