/* STRUX v3
   ---------------------------------------------------------------------------
   One idea runs the whole system: the site is a proposal someone has already
   gone over with a highlighter. The yellow mark is reserved for facts a
   homeowner can plan with — a price, a duration, a warranty term. Nothing
   else on any page gets it, so the eye learns within one screen where to look.

   Palette    drywall ground, white cards, mangrove ink, highlighter yellow.
   Type       Barlow Condensed — road-sign lineage, read at a glance, and narrow
              enough that "$16,000–$22,000" stays one line at display size on
              a 375 phone. Public Sans for everything read — the face of US
              public forms and .gov sites, Franklin lineage like the signage
              face. Atkinson Hyperlegible Mono for labels and measurements.
   --------------------------------------------------------------------------- */

:root{
  --ground:#F3F4F0;      /* drywall */
  --card:#FFFFFF;
  --ink:#13211C;         /* mangrove: 15:1 on ground */
  --ink-2:#56605B;       /* secondary text: 5.9:1 on ground, 6.5:1 on white */
  --ink-3:#8A928E;       /* graphics only, never text */
  --line:#DDE0D9;
  --sunk:#E7EAE3;
  --marker:#FFE04A;      /* highlighter: only behind plannable facts */
  --on-ink-2:#B9C3BE;    /* secondary text on ink: 9.2:1 */

  --f-display:"Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-card:16px;
  --r-img:12px;
  --r-pill:999px;

  --pad:20px;
  --max:1180px;
  --top-h:60px;
  --dock-h:72px;

  --ease:cubic-bezier(.6,.05,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top-h) + 56px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));
}
@media (min-width:960px){ body{ padding-bottom:0; } }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:8px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; }
.skip:focus{ top:8px; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
@media (min-width:720px){ :root{ --pad:32px; } }

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; }
.d1{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.6rem, 10.5vw, 5.25rem); line-height:.96; letter-spacing:-.005em; text-wrap:balance; }
.d2{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.125rem, 8vw, 3.5rem); line-height:1; text-wrap:balance; }
.d3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.625rem, 5.5vw, 2.25rem); line-height:1.05; text-wrap:balance; }
.h3{ font-family:var(--f-body); font-weight:700; font-size:1.125rem; line-height:1.3; }
.fig{ font-family:var(--f-display); font-weight:600; line-height:1; letter-spacing:.005em; font-variant-numeric:lining-nums; }
.label{ font-family:var(--f-mono); font-size:.8125rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
.lede{ font-size:1.125rem; color:var(--ink-2); max-width:38rem; text-wrap:pretty; }
.muted{ color:var(--ink-2); }
.small{ font-size:.9375rem; }
p{ margin:0; }
.stack > * + *{ margin-top:var(--gap, 1rem); }

/* the highlighter ------------------------------------------------------------
   Soft-ended marker stroke behind the text. With JS it draws in when it enters
   the screen; without JS, or with reduced motion, it is simply there. */
.hl{
  background-image:linear-gradient(98deg, rgba(255,224,74,0) 0, var(--marker) .14em, var(--marker) calc(100% - .18em), rgba(255,224,74,0) 100%);
  background-repeat:no-repeat; background-position:0 62%; background-size:100% 74%;
  padding:0 .14em; margin:0 -.14em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.js .hl{ background-size:0% 74%; transition:background-size .75s var(--ease); }
.js .hl.is-on{ background-size:100% 74%; }
@media (prefers-reduced-motion:reduce){ .js .hl{ transition:none; background-size:100% 74%; } }
.band .hl{ color:var(--ink); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:0 1.35rem; border-radius:var(--r-pill);
  font-family:var(--f-body); font-weight:700; font-size:1rem; line-height:1.1; text-decoration:none;
  border:2px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
}
.btn:active{ transform:scale(.98); }
.btn svg{ width:20px; height:20px; flex:none; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--card); }
.btn--light{ background:#fff; border-color:#fff; color:var(--ink); }
.btn--line-light{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn--block{ width:100%; }
.link{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; text-decoration-color:var(--ink-3); }
.link:hover{ text-decoration-color:var(--ink); }
.link svg{ width:18px; height:18px; }

/* ---------- top bar ---------- */
.top{ position:sticky; top:0; z-index:40; background:rgba(243,244,240,.92); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s; }
.top.is-scrolled{ border-bottom-color:var(--line); }
.top__in{ height:var(--top-h); display:flex; align-items:center; gap:12px; }
.wordmark{ font-family:var(--f-display); font-weight:700; font-size:1.625rem; letter-spacing:.2em; text-decoration:none; margin-right:auto; padding-right:.2em; }
.top__nav{ display:none; }
.top__nav a{ text-decoration:none; font-weight:500; font-size:.9688rem; padding:8px 2px; border-bottom:2px solid transparent; }
.top__nav a:hover{ border-bottom-color:var(--ink-3); }
.top__nav a[aria-current="page"]{ border-bottom-color:var(--ink); font-weight:700; }
.iconbtn{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; border:1.5px solid var(--line); background:var(--card); text-decoration:none; cursor:pointer; padding:0; }
.iconbtn svg{ width:20px; height:20px; }
.menubtn{ height:44px; padding:0 16px 0 14px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:var(--card); font-weight:700; font-size:.9375rem; cursor:pointer; }
.menubtn svg{ width:18px; height:18px; }
.top__phone,.top__cta{ display:none; }
@media (min-width:960px){
  .top__nav{ display:flex; gap:22px; margin-right:12px; }
  .top__phone{ display:inline-flex; font-weight:700; text-decoration:none; white-space:nowrap; font-size:.9688rem; }
  .top__cta{ display:inline-flex; min-height:44px; font-size:.9375rem; padding:0 1.1rem; }
  .top .iconbtn, .menubtn{ display:none; }
}

/* ---------- menu sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:60; background:var(--ground); display:flex; flex-direction:column; overflow:auto; }
.sheet__head{ height:var(--top-h); display:flex; align-items:center; }
.sheet__svc{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; }
.sheet__svc a{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; background:var(--card); border-radius:var(--r-card); text-decoration:none; }
.sheet__svc .d3{ font-size:1.75rem; }
.sheet__svc .label{ display:block; margin-top:4px; text-transform:none; letter-spacing:0; font-size:.875rem; }
.sheet__svc svg{ width:22px; height:22px; flex:none; }
.sheet__more{ list-style:none; margin:18px 0 0; padding:0; }
.sheet__more a{ display:block; padding:14px 2px; border-bottom:1px solid var(--line); text-decoration:none; font-weight:700; font-size:1.125rem; }
.sheet__foot{ margin-top:auto; padding:24px 0 calc(24px + env(safe-area-inset-bottom)); display:grid; gap:10px; }
body.is-locked{ overflow:hidden; }

/* ---------- phone dock ---------- */
/* above the page tabs (35): before they stick, the tabs sit where the dock is and covered its buttons */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:36; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:rgba(243,244,240,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:10px; transition:transform .3s var(--ease); }
.dock .btn{ min-height:50px; }
.dock__call{ padding:0 1.1rem; }
.dock.is-away{ transform:translateY(110%); }
@media (min-width:960px){ .dock{ display:none; } }

/* ---------- sections ---------- */
.sec{ padding:56px 0; }
@media (min-width:960px){ .sec{ padding:96px 0; } }
.sec--card{ background:var(--card); }
.sec--sunk{ background:var(--sunk); }
.sec__head{ max-width:44rem; }
.sec__head .label{ display:block; margin-bottom:10px; }
.sec__head .lede{ margin-top:14px; }
.sec__head + *{ margin-top:28px; }
@media (min-width:960px){ .sec__head + *{ margin-top:40px; } }
.crumb{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.crumb svg{ width:16px; height:16px; }

/* ---------- cards / generic ---------- */
.card{ background:var(--card); border-radius:var(--r-card); }
.sec--card .card{ background:var(--ground); }
.pad{ padding:20px; }
@media (min-width:720px){ .pad{ padding:28px; } }
.photo{ border-radius:var(--r-img); overflow:hidden; background:var(--sunk); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.cap{ margin-top:10px; font-size:.9375rem; line-height:1.35; }
.cap .label{ display:block; margin-bottom:2px; text-transform:none; letter-spacing:0; font-size:.8125rem; }

/* ---------- horizontal rail ---------- */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:82%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding:0 var(--pad) 6px; margin:0 calc(var(--pad) * -1); scroll-padding:0 var(--pad); scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }
@media (min-width:720px){ .rail{ grid-auto-columns:42%; } }
@media (min-width:1100px){ .rail{ grid-auto-columns:31%; } }
.rail .photo{ aspect-ratio:4/3; }
.railnav{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.railnav__count{ font-family:var(--f-mono); font-size:.8125rem; color:var(--ink-2); margin-right:auto; }
.railnav button{ width:44px; height:44px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--card); display:grid; place-items:center; cursor:pointer; }
.railnav button:disabled{ opacity:.35; cursor:default; }
.railnav svg{ width:18px; height:18px; }

/* ---------- segmented control ---------- */
.seg{ display:flex; gap:4px; padding:4px; background:var(--sunk); border-radius:var(--r-pill); overflow-x:auto; scrollbar-width:none; }
.seg::-webkit-scrollbar{ display:none; }
.seg button,.seg label{ flex:1 0 auto; min-height:44px; padding:0 clamp(8px, 2.4vw, 14px); border:0; border-radius:var(--r-pill); background:transparent; font-weight:700; font-size:.9375rem; cursor:pointer; white-space:nowrap; display:flex; align-items:center; justify-content:center; transition:background-color .2s ease, box-shadow .2s ease; }
.seg [aria-selected="true"], .seg [aria-pressed="true"], .seg input:checked + span{ background:var(--card); box-shadow:0 1px 2px rgba(19,33,28,.12), 0 2px 8px rgba(19,33,28,.06); }
.seg label{ position:relative; padding:0; }
.seg label span{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:44px; padding:0 clamp(8px, 2.4vw, 14px); border-radius:var(--r-pill); }
.seg input{ position:absolute; opacity:0; inset:0; }
.seg input:focus-visible + span{ outline:3px solid var(--ink); outline-offset:-3px; }

/* ---------- home hero ---------- */
.hero{ padding:28px 0 48px; }
@media (min-width:960px){ .hero{ padding:64px 0 88px; } }
.hero .label{ display:block; margin-bottom:14px; }
.hero .lede{ margin-top:16px; }
.hero__trust{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:18px; list-style:none; padding:0; font-size:.9375rem; font-weight:500; }
.hero__trust li{ display:flex; align-items:center; gap:6px; }
.hero__trust svg{ width:18px; height:18px; flex:none; }

.svcs{ margin-top:28px; }
.svcs .seg{ margin-bottom:12px; }
.svcs__rail{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.svcs__rail::-webkit-scrollbar{ display:none; }
.svcs__rail > *{ scroll-snap-align:start; }
@media (min-width:960px){
  .svcs{ margin-top:48px; }
  .svcs .seg{ display:none; }
  .svcs__rail{ grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); overflow:visible; gap:20px; }
}
.svc{ background:var(--card); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; }
.svc__img{ aspect-ratio:16/9; overflow:hidden; background:var(--sunk); }
.svc__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.svc:hover .svc__img img{ transform:scale(1.03); }
/* where each homepage card sits in its frame; the phone strip is 21:9, so it needs its own */
.svc__img--kit img, .svc__img--bath img{ object-position:50% 45%; }
@media (max-width:959px){
  .svc__img--win img{ object-position:50% 12%; }   /* keep the top of the window frame */
  .svc__img--kit img{ object-position:50% 60%; }   /* the range, not the ceiling */
  .svc__img--bath img{ object-position:50% 64%; }  /* cut at the top edge of the tile */
}
.svc__body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.svc__name{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.svc__name .d3{ font-size:1.875rem; }
.facts{ margin:12px 0 0; padding:0; list-style:none; }
.facts li{ display:grid; grid-template-columns:5.5rem 1fr; gap:4px 12px; padding:11px 0; border-top:1px solid var(--line); align-items:baseline; }
.facts .label{ font-size:.75rem; }
.facts .fig{ font-size:1.75rem; }
.facts .note{ grid-column:2; font-size:.875rem; color:var(--ink-2); line-height:1.3; }
.svc__go{ margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; font-weight:700; border-top:1px solid var(--line); }
.svc__go svg{ width:22px; height:22px; transition:transform .2s ease; }
.svc:hover .svc__go svg{ transform:translateX(4px); }
.aside-note{ margin-top:16px; font-size:.9375rem; color:var(--ink-2); }
.aside-note a{ color:var(--ink); font-weight:700; }

/* ---------- process steps ---------- */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:0; }
.step{ position:relative; display:grid; grid-template-columns:44px 1fr; gap:0 16px; padding-bottom:26px; }
.step::before{ counter-increment:step; content:counter(step); width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.375rem; background:var(--card); border:2px solid var(--ink); grid-row:1 / span 3; z-index:1; }
.step:not(:last-child)::after{ content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--ink); }
.step h3{ padding-top:9px; }
.step p{ margin-top:4px; color:var(--ink-2); }
.pay{ margin-top:10px; display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap; background:var(--card); border:1.5px dashed var(--ink-3); border-radius:10px; padding:7px 12px; font-size:.9375rem; }
.sec--card .step::before, .sec--card .pay{ background:var(--ground); }
.pay b{ font-family:var(--f-display); font-size:1.25rem; font-weight:600; }
@media (min-width:960px){
  .steps{ grid-template-columns:repeat(6, 1fr); gap:0 16px; }
  .step{ grid-template-columns:1fr; padding-bottom:0; align-content:start; }
  .step::before{ grid-row:auto; margin-bottom:14px; }
  .step:not(:last-child)::after{ left:44px; right:-16px; top:21px; bottom:auto; width:auto; height:2px; }
  .step h3{ padding-top:0; }
}

/* ---------- before / after ---------- */
.ba{ position:relative; aspect-ratio:3/2; border-radius:var(--r-img); overflow:hidden; background:var(--sunk); touch-action:pan-y; user-select:none; -webkit-user-select:none; --pos:50%; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* the before layer must be a real box the size of the frame: clipped while it had no height,
   it hid its photograph entirely and both halves showed the after */
.ba__before{ position:absolute; inset:0; z-index:1; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle, .ba__tag{ z-index:2; }
.ba input{ z-index:3; }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:0; pointer-events:none; }
.ba__handle::before{ content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.ba__knob{ position:absolute; top:50%; left:0; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:var(--r-pill); background:#fff; display:grid; place-items:center; box-shadow:0 2px 12px rgba(0,0,0,.25); }
.ba__knob svg{ width:24px; height:24px; }
.ba__tag{ position:absolute; top:12px; padding:5px 10px; border-radius:var(--r-pill); background:rgba(19,33,28,.82); color:#fff; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; pointer-events:none; }
.ba__tag--b{ left:12px; } .ba__tag--a{ right:12px; }
.ba input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.ba input:focus-visible ~ .ba__handle .ba__knob{ outline:3px solid var(--marker); outline-offset:2px; }

/* ---------- service hero ---------- */
.shero{ padding:16px 0 40px; }
@media (min-width:960px){ .shero{ padding:40px 0 72px; } }
.shero__grid{ display:grid; gap:20px; }
@media (min-width:960px){ .shero__grid{ grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; } }
.shero__img{ aspect-ratio:16/8; border-radius:var(--r-img); overflow:hidden; background:var(--sunk); }
.shero__img img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:960px){ .shero__img{ aspect-ratio:4/5; order:2; position:sticky; top:calc(var(--top-h) + 20px); } }
.shero .crumb{ margin-bottom:10px; }
.shero h1{ margin-top:6px; }
.shero .d1{ font-size:clamp(2.375rem, 9.6vw, 4.5rem); }
.answers{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.answer{ background:var(--card); border-radius:14px; padding:12px 14px 14px; text-decoration:none; display:flex; flex-direction:column; position:relative; }
.answer .label{ font-size:.6875rem; letter-spacing:.05em; }
.answer .fig{ font-size:clamp(1.625rem, 7.4vw, 2.5rem); margin-top:6px; }
.answer .note{ margin-top:6px; font-size:.8125rem; line-height:1.3; color:var(--ink-2); }
.answer--what .fig{ font-size:clamp(1.375rem, 6vw, 2rem); }
.answer::after{ content:""; position:absolute; right:12px; top:14px; width:8px; height:8px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); }
.answer:hover::after{ border-color:var(--ink); }
.shero__cta{ display:none; gap:10px; flex-wrap:wrap; margin-top:20px; }
@media (min-width:960px){ .shero__cta{ display:flex; } .answer{ padding:18px 20px 20px; } .answer .note{ font-size:.9375rem; } }

/* ---------- sticky section tabs ---------- */
.tabs{ position:sticky; top:var(--top-h); z-index:35; background:rgba(243,244,240,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.tabs__in{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-top:6px; padding-bottom:6px; }
.tabs__in::-webkit-scrollbar{ display:none; }
.tabs a{ flex:none; min-height:40px; display:flex; align-items:center; padding:0 14px; border-radius:var(--r-pill); text-decoration:none; font-weight:700; font-size:.9375rem; color:var(--ink-2); transition:background-color .2s, color .2s; }
.tabs a.is-on{ background:var(--ink); color:#fff; }

/* ---------- calculator ---------- */
.calc{ display:grid; gap:16px; }
@media (min-width:960px){ .calc{ grid-template-columns:1fr 1fr; gap:24px; align-items:start; } }
.calc__q{ font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px; }
.calc__q + .calc__q, .calc__group + .calc__group{ margin-top:22px; }
.opts{ display:grid; gap:8px; }
.opt{ position:relative; display:block; cursor:pointer; }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.opt__box{ display:grid; grid-template-columns:24px 1fr auto; gap:2px 12px; align-items:start; padding:14px 16px; border-radius:14px; background:var(--card); border:2px solid var(--line); transition:border-color .2s, background-color .2s; }
.sec--card .opt__box{ background:var(--ground); border-color:transparent; }
.opt__mark{ width:24px; height:24px; border-radius:var(--r-pill); border:2px solid var(--ink-3); grid-row:1 / span 2; margin-top:1px; display:grid; place-items:center; transition:all .2s; }
.opt input[type="checkbox"] + .opt__box .opt__mark{ border-radius:7px; }
.opt__mark svg{ width:14px; height:14px; opacity:0; color:#fff; }
.opt__t{ font-weight:700; line-height:1.3; }
.opt__s{ grid-column:2; font-size:.875rem; color:var(--ink-2); line-height:1.35; }
.opt__p{ grid-row:1; grid-column:3; font-family:var(--f-display); font-weight:600; font-size:1.125rem; white-space:nowrap; }
.opt input:checked + .opt__box{ border-color:var(--ink); background:var(--card); }
.opt input:checked + .opt__box .opt__mark{ background:var(--ink); border-color:var(--ink); }
.opt input:checked + .opt__box .opt__mark svg{ opacity:1; }
.opt input:focus-visible + .opt__box{ outline:3px solid var(--ink); outline-offset:2px; }

.result{ background:var(--ink); color:#fff; border-radius:var(--r-card); padding:20px; }
@media (min-width:960px){ .result{ position:sticky; top:calc(var(--top-h) + 72px); padding:28px; } }
.result .label{ color:var(--on-ink-2); }
.result__fig{ font-size:clamp(2.5rem, 12vw, 3.75rem); margin-top:8px; color:var(--ink); display:inline; }
.result__figwrap{ margin-top:8px; }
.result__cap{ margin-top:8px; color:var(--on-ink-2); font-size:.9375rem; }
.result__addons{ margin-top:14px; display:grid; gap:8px; }
.result__addon{ font-size:.875rem; color:var(--on-ink-2); padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.07); }
.result__addon b{ display:block; color:#fff; font-family:var(--f-display); font-weight:600; font-size:1.125rem; margin-bottom:2px; }
.result__promise{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.16); font-weight:700; }
.result .btn{ margin-top:16px; }

.scope{ margin-top:4px; }
.checks{ list-style:none; margin:0; padding:0; }
.checks li{ position:relative; padding:9px 0 9px 32px; border-top:1px solid var(--line); line-height:1.35; }
.checks li:first-child{ border-top:0; }
.checks li::before{ content:""; position:absolute; left:2px; top:12px; width:18px; height:18px; border-radius:var(--r-pill); background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.checks--no li::before{ background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356605B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/16px no-repeat; border:1.5px solid var(--ink-3); width:18px; height:18px; }
.is-swap{ animation:swap .35s var(--ease); }
@keyframes swap{ from{ opacity:.2; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .is-swap{ animation:none; } }

.stepper{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 12px; background:var(--card); border-radius:14px; }
.sec--card .stepper{ background:var(--ground); }
.stepper img{ width:56px; height:56px; }
.stepper__t{ font-weight:700; line-height:1.25; }
.stepper__s{ display:block; font-size:.8125rem; color:var(--ink-2); font-weight:400; }
.stepper__ctl{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--card); }
.stepper__ctl button{ width:44px; height:44px; border:0; background:none; font-size:1.5rem; line-height:1; cursor:pointer; border-radius:var(--r-pill); }
.stepper__ctl button:disabled{ opacity:.3; cursor:default; }
.stepper__ctl input{ width:2.4ch; border:0; background:none; text-align:center; font-family:var(--f-display); font-weight:600; font-size:1.5rem; color:var(--ink); -moz-appearance:textfield; padding:0; }
.stepper__ctl input::-webkit-outer-spin-button,.stepper__ctl input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- duration ---------- */
.big-answer{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.big-answer .fig{ font-size:clamp(3rem, 15vw, 5.5rem); }
.big-answer span.muted{ font-size:1.0625rem; max-width:22rem; }

.cal{ margin-top:22px; }
.cal__legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:10px; font-size:.875rem; color:var(--ink-2); }
.cal__legend i{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:6px; }
.cal__week{ display:grid; grid-template-columns:repeat(5, 1fr) repeat(2, .55fr); gap:4px; margin-top:4px; }
.cal__dow{ display:grid; grid-template-columns:repeat(5, 1fr) repeat(2, .55fr); gap:4px; font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-2); text-align:center; }
.day{ height:44px; border-radius:8px; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:1.125rem; }
.day--out{ background:var(--ink); color:#fff; }
.day--maybe{ background:repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 8px); border:2px solid var(--ink); color:var(--ink); }
.day--maybe span{ background:var(--card); padding:0 4px; border-radius:4px; }
.day--off{ background:transparent; border:1.5px dashed var(--line); }
.day--back{ background:var(--marker); color:var(--ink); }
i.k-out{ background:var(--ink); } i.k-maybe{ background:repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px); border:1.5px solid var(--ink); } i.k-back{ background:var(--marker); }

.before-bar{ margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; padding:14px 16px; border-radius:14px; background:var(--sunk); }
.sec--card .before-bar{ background:var(--ground); }
.before-bar .fig{ font-size:1.625rem; }
.before-bar p{ font-size:.9375rem; color:var(--ink-2); line-height:1.35; }

.keeps{ margin-top:22px; display:grid; gap:10px; }
@media (min-width:720px){ .keeps{ grid-template-columns:1fr 1fr; } }
.keep{ padding:16px 18px; border-radius:14px; background:var(--card); }
.sec--card .keep{ background:var(--ground); }
.keep h3{ margin-bottom:6px; }
.keep p{ color:var(--ink-2); font-size:.9688rem; }
.keep--flag{ border-left:4px solid var(--ink); }

/* factory weeks (windows) */
.weeks{ margin-top:22px; }
.weeks__bar{ display:grid; grid-template-columns:repeat(10, 1fr) 1.3fr; gap:3px; }
.wk{ height:52px; border-radius:6px; background:var(--sunk); border:1.5px solid var(--ink-3); display:grid; place-items:end center; padding-bottom:4px; font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-2); }
.wk--maybe{ background:repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 7px); border-style:dashed; }
.wk--site{ background:var(--marker); border-color:var(--ink); color:var(--ink); font-weight:500; place-items:center; padding:0; font-family:var(--f-display); font-size:.9375rem; font-weight:700; line-height:1; text-align:center; }
.weeks__axis{ display:flex; justify-content:space-between; margin-top:8px; font-size:.875rem; color:var(--ink-2); gap:12px; }
.weeks__axis b{ color:var(--ink); }

/* day sequence (windows) */
.seqs{ display:grid; gap:12px; }
@media (min-width:720px){ .seqs{ grid-template-columns:repeat(3, 1fr); } }
.seq .photo{ aspect-ratio:1; position:relative; }
.seq__time{ position:absolute; left:10px; top:10px; background:var(--card); border-radius:var(--r-pill); padding:4px 12px 3px; font-family:var(--f-display); font-weight:700; font-size:1.375rem; line-height:1.1; }
.seq h3{ margin-top:12px; }
.seq p{ margin-top:4px; color:var(--ink-2); font-size:.9688rem; }

/* ---------- warranty ---------- */
.ledger{ list-style:none; margin:0; padding:0; background:var(--card); border-radius:var(--r-card); }
.sec--card .ledger{ background:var(--ground); }
.ledger li{ display:grid; grid-template-columns:7.5rem 1fr; gap:4px 16px; padding:16px 18px; border-top:1px solid var(--line); }
.ledger li:first-child{ border-top:0; }
.ledger .fig{ font-size:1.875rem; }
.ledger .fig.small-fig{ font-size:1.25rem; line-height:1.15; }
.ledger p{ font-size:.9688rem; color:var(--ink-2); line-height:1.4; }
.ledger p b{ color:var(--ink); }
@media (max-width:420px){ .ledger li{ grid-template-columns:1fr; } }

.layers{ margin-top:20px; }
.layers__scroll{ overflow-x:auto; border-radius:var(--r-img); scrollbar-width:none; background:var(--ground); }
.layers__scroll::-webkit-scrollbar{ display:none; }
.layers__fig{ position:relative; width:170%; max-width:none; }
@media (min-width:720px){ .layers__fig{ width:100%; } }
.layers__fig img{ width:100%; }
.pin{ position:absolute; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:var(--r-pill); background:#fff; color:var(--ink); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1rem; box-shadow:0 1px 6px rgba(0,0,0,.18); }
.pin--key{ background:var(--marker); }
.layers__hint{ font-size:.8125rem; color:var(--ink-2); margin-top:8px; font-family:var(--f-mono); }
@media (min-width:720px){ .layers__hint{ display:none; } }
.legend{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; }
@media (min-width:720px){ .legend{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px 16px; } }
.legend li{ display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; font-size:.9375rem; line-height:1.3; }
.legend b{ width:24px; height:24px; border-radius:var(--r-pill); border:2px solid var(--ink); display:grid; place-items:center; font-family:var(--f-display); font-size:.875rem; }
.legend .key b{ background:var(--marker); }

.inspect{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
@media (min-width:720px){ .inspect{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } }
.inspect li{ display:grid; grid-template-columns:48px 1fr; gap:4px 14px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--card); }
.sec--card .inspect li{ background:var(--ground); }
@media (min-width:720px){ .inspect li{ grid-template-columns:1fr; align-content:start; } }
.inspect img{ width:48px; height:48px; grid-row:span 2; }
@media (min-width:720px){ .inspect img{ grid-row:auto; } }
.inspect b{ display:block; line-height:1.25; }
.inspect span{ font-size:.875rem; color:var(--ink-2); line-height:1.35; }

.cover{ display:grid; gap:10px; }
@media (min-width:720px){ .cover{ grid-template-columns:1fr 1fr; } }
.onelead{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:18px; border-radius:var(--r-card); background:var(--ink); color:#fff; }
.onelead svg{ width:32px; height:32px; }
.onelead p{ color:var(--on-ink-2); }
.onelead p b{ color:#fff; }

.photodoc{ display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:center; padding:14px 16px; border-radius:14px; border:1.5px dashed var(--ink-3); }
.photodoc img{ width:48px; height:48px; }
.photodoc p{ font-size:.9688rem; }

/* ---------- mini grids ---------- */
.trio{ display:grid; gap:10px; }
@media (min-width:720px){ .trio{ grid-template-columns:repeat(3, 1fr); gap:16px; } }
.duo{ display:grid; gap:16px; }
@media (min-width:960px){ .duo{ grid-template-columns:1fr 1fr; gap:32px; align-items:start; } }
.tile{ padding:18px; border-radius:var(--r-card); background:var(--card); }
.sec--card .tile{ background:var(--ground); }
.tile h3{ margin-bottom:6px; }
.tile p{ color:var(--ink-2); font-size:.9688rem; }
.tile .fig{ font-size:2rem; display:block; margin-bottom:6px; }

.license{ background:var(--card); border-radius:var(--r-card); padding:20px; border:2px solid var(--ink); position:relative; }
.license__num{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.5rem, 13vw, 4rem); line-height:1; letter-spacing:.02em; margin:6px 0 4px; }
.license dl{ margin:14px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.9375rem; }
.license dt{ color:var(--ink-2); }
.license dd{ margin:0; font-weight:700; }
.license .link{ margin-top:16px; }
.checktwo{ margin-top:14px; list-style:none; padding:0; display:grid; gap:6px; counter-reset:c; }
.checktwo li{ display:grid; grid-template-columns:26px 1fr; gap:10px; font-size:.9688rem; }
.checktwo li::before{ counter-increment:c; content:counter(c); width:26px; height:26px; border-radius:var(--r-pill); background:var(--sunk); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; }

/* ---------- FAQ ---------- */
.faq{ background:var(--card); border-radius:var(--r-card); }
.sec--card .faq{ background:var(--ground); }
.faq details{ border-top:1px solid var(--line); }
.faq details:first-child{ border-top:0; }
.faq summary{ list-style:none; cursor:pointer; padding:18px 52px 18px 18px; position:relative; font-weight:700; font-size:1.0625rem; line-height:1.35; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:22px; top:24px; width:10px; height:10px; border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(45deg); transition:transform .25s var(--ease); }
.faq details[open] summary::after{ transform:translate(0,4px) rotate(-135deg); }
.faq__a{ padding:0 18px 20px; color:var(--ink-2); }
.faq__a p + p{ margin-top:10px; }
.faq__a a{ color:var(--ink); font-weight:700; }

/* ---------- work grid ---------- */
.chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 4px; }
.chips::-webkit-scrollbar{ display:none; }
.chips button{ flex:none; min-height:44px; padding:0 16px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--card); font-weight:700; font-size:.9375rem; cursor:pointer; }
.chips button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 10px; margin-top:18px; }
@media (min-width:720px){ .grid{ grid-template-columns:repeat(3, 1fr); gap:24px 16px; } }
@media (min-width:1100px){ .grid{ grid-template-columns:repeat(4, 1fr); } }
.grid .photo{ aspect-ratio:4/3; }
.grid .cap{ font-size:.875rem; margin-top:8px; }
.grid figure{ margin:0; }

.project{ display:grid; gap:18px; }
.project + .project{ margin-top:56px; padding-top:56px; border-top:1px solid var(--line); }
.meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
@media (min-width:720px){ .meta{ grid-template-columns:repeat(4, auto); justify-content:start; gap:10px 36px; } }
.meta div{ padding:12px 14px; background:var(--card); border-radius:12px; }
@media (min-width:720px){ .meta div{ background:none; padding:0; } }
.meta dt{ font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); }
.meta dd{ margin:2px 0 0; font-weight:700; line-height:1.3; }
.rail .stage .label{ text-transform:none; letter-spacing:0; }

/* ---------- contact band + form ---------- */
.band{ background:var(--ink); color:#fff; }
.band .label{ color:var(--on-ink-2); }
.band .lede{ color:var(--on-ink-2); }
.band a{ color:#fff; }
.band__grid{ display:grid; gap:28px; }
@media (min-width:960px){ .band__grid{ grid-template-columns:.9fr 1.1fr; gap:64px; } }
.next{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; counter-reset:n; }
.next li{ display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; }
.next li::before{ counter-increment:n; content:counter(n); width:32px; height:32px; border-radius:var(--r-pill); border:2px solid rgba(255,255,255,.5); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.0625rem; }
.next li span{ padding-top:4px; }
.direct{ margin-top:24px; display:grid; gap:8px; }
.direct a, .direct div{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.07); text-decoration:none; }
.direct .label{ font-size:.75rem; }
.direct b{ font-weight:700; text-align:right; }

.form{ background:var(--card); color:var(--ink); border-radius:var(--r-card); padding:20px; }
@media (min-width:720px){ .form{ padding:32px; } }
.form h2, .form h3{ font-family:var(--f-display); font-weight:600; font-size:2rem; line-height:1; margin-bottom:6px; }
.form__row{ display:grid; gap:12px; }
@media (min-width:600px){ .form__row--2{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.form__row .field{ margin-top:0; }
.form__row{ margin-top:14px; }
.field label{ font-weight:700; font-size:.9375rem; }
/* the one field nobody has to fill: said in the label, not discovered on submit */
.field__opt{ font-weight:400; color:var(--ink-2); }
.field textarea::placeholder{ color:var(--ink-2); opacity:1; }
.field input,.field select,.field textarea{
  font:inherit; font-size:1.0625rem; color:var(--ink); background:var(--ground); border:2px solid transparent; border-radius:12px; padding:12px 14px; min-height:52px; width:100%;
  transition:border-color .2s, background-color .2s;
}
.field textarea{ min-height:110px; resize:vertical; }
.field select{ -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313211C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ink); background:#fff; }
.field [aria-invalid="true"]{ border-color:#B42318; background:#FEF3F2; }
.form-error{ color:#B42318; font-size:.875rem; font-weight:700; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form .btn{ margin-top:18px; }
.form__fine{ margin-top:10px; font-size:.875rem; color:var(--ink-2); text-align:center; }
.form-status{ padding:18px; border-radius:14px; }
.form-status strong{ display:block; font-size:1.125rem; margin-bottom:4px; }
.form-status a{ color:var(--ink); font-weight:700; }
.form-status--ok{ background:var(--marker); }
.form-status--error{ background:#FEF3F2; color:#7A271A; }
.form-status--error a{ color:#7A271A; }

.inline-form{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.inline-form input{ flex:1 1 220px; font:inherit; min-height:52px; border-radius:var(--r-pill); border:2px solid var(--line); padding:0 18px; background:var(--card); color:var(--ink); }
.inline-form input:focus{ outline:none; border-color:var(--ink); }
.inline-form .form-error{ flex-basis:100%; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#fff; padding:8px 0 40px; }
.foot__in{ border-top:1px solid rgba(255,255,255,.14); padding-top:32px; display:grid; gap:28px; }
@media (min-width:960px){ .foot__in{ grid-template-columns:1.4fr repeat(3, 1fr); } }
.foot .wordmark{ color:#fff; font-size:1.75rem; }
.foot p, .foot li{ color:var(--on-ink-2); font-size:.9375rem; }
.foot h3{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--on-ink-2); font-weight:500; margin-bottom:10px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot a{ color:#fff; text-decoration:none; }
.foot a:hover{ text-decoration:underline; }
.foot__legal{ margin-top:32px; font-size:.8125rem; color:var(--on-ink-2); }

/* ---------- page intro (non-service) ---------- */
.intro{ padding:20px 0 36px; }
@media (min-width:960px){ .intro{ padding:48px 0 64px; } }
.intro .lede{ margin-top:14px; }
.intro .crumb{ margin-bottom:12px; }

.areas{ display:grid; gap:10px; }
@media (min-width:720px){ .areas{ grid-template-columns:repeat(3, 1fr); } }
.areas .tile p{ font-size:.9375rem; }

.founder{ display:grid; gap:18px; }
@media (min-width:960px){ .founder{ grid-template-columns:.8fr 1.2fr; gap:48px; } }
.founder__txt p + p{ margin-top:14px; }
.founder__txt{ font-size:1.125rem; }
.since{ display:flex; align-items:baseline; gap:12px; }
.since .fig{ font-size:clamp(4rem, 20vw, 7rem); line-height:.85; }

.reveal{ opacity:1; }

/* calculator placement: on a phone the price sits between the choices and the list */
.calc{ grid-template-areas:"opts" "result" "scope"; }
.calc__opts{ grid-area:opts; } .calc .result{ grid-area:result; } .calc__scope{ grid-area:scope; }
@media (min-width:960px){ .calc{ grid-template-areas:"opts result" "scope result"; grid-template-rows:auto 1fr; } }
.cal__marks{ display:flex; justify-content:space-between; margin-top:8px; font-size:.875rem; font-weight:700; }
.cal__marks span:last-child{ text-align:right; }
.cal__note{ margin-top:10px; color:var(--ink-2); font-size:.9688rem; }
.subhead{ margin:36px 0 14px; }
/* on the dark price card the mark is always full: drawn from empty, ink text on ink would vanish mid-stroke */
.js .result .hl{ background-size:100% 74%; transition:none; }
.result .hl.is-on{ animation:swap .35s var(--ease); }
@media (prefers-reduced-motion:reduce){ .result .hl.is-on{ animation:none; } }
.before-bar{ grid-template-columns:1fr; gap:2px; }
/* grid children with a scroller inside must be allowed to shrink, or the rail widens the page */
.duo > *, .calc > *, .shero__grid > *, .band__grid > *, .founder > *, .project > *{ min-width:0; }
.shero{ padding-top:12px; }
.shero__img{ aspect-ratio:16/7; }
@media (min-width:960px){ .shero__img{ aspect-ratio:4/5; } }
.shero .d1{ font-size:clamp(2.125rem, 9vw, 4.5rem); }
.answers{ margin-top:16px; }
.answer .label{ padding-right:16px; }
.answer::after{ width:7px; height:7px; right:13px; top:15px; }

.opt__p{ font-size:1rem; color:var(--ink-2); }
.calc__note{ margin-top:10px; font-size:.875rem; color:var(--ink-2); }
.hero__after{ margin-top:28px; }
@media (min-width:960px){ .hero__after{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px 48px; } .hero__after .aside-note{ grid-column:1 / -1; } }
.hero__trust{ margin-top:14px; }
@media (min-width:960px){ .hero__trust{ flex-direction:column; margin-top:4px; } }
.hero .d1{ margin-top:0; }
/* facts: label over a figure-and-note line, so nothing strands in a column */
.facts li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:10px 0; }
.facts .label{ flex-basis:100%; font-size:.6875rem; }
.facts .note{ font-size:.875rem; }
.svc__img{ aspect-ratio:21/9; }
@media (min-width:960px){ .svc__img{ aspect-ratio:16/10; } }
.sec .sec__head + *{ margin-top:28px; }
@media (min-width:960px){ .sec .sec__head + *{ margin-top:40px; } }
.pay{ display:flex; width:fit-content; }
.wk{ height:60px; }
.weeks__bar{ grid-template-columns:repeat(10, 1fr) 1.9fr; }
.wk--site{ font-size:1.0625rem; }
.dock .btn{ white-space:nowrap; font-size:.9375rem; padding:0 1rem; }
.btn{ white-space:nowrap; }
.btn--block{ white-space:normal; }
.sec--card .meta div{ background:var(--ground); }
@media (min-width:720px){ .sec--card .meta div{ background:none; } }
/* the hero lede is for the desktop reader; on a phone the four answers say the same thing sooner */
.shero__lede{ display:none; margin-top:14px; }
@media (min-width:960px){ .shero__lede{ display:block; } }

/* ---------- home cover ----------------------------------------------------
   One picture and one sentence first; the three starting prices sit directly
   under it on the same screen, and the full cost / time / cover cards follow. */
.homecover{ position:relative; height:min(60svh, 520px); min-height:400px; overflow:hidden; background:var(--ink); color:#fff; }
@media (min-width:960px){ .homecover{ height:min(80vh, 760px); } }
.homecover__img, .homecover__img picture, .homecover__img img{ position:absolute; inset:0; width:100%; height:100%; }
.homecover__img img{ object-fit:cover; object-position:46% 50%; }
/* On a phone the picture is cut to 21:10 (sky first), and the headline sits under it on ink.
   The house fills the middle of the frame with only a strip of lawn below, so a headline
   laid over the picture would cover the house itself. */
@media (max-width:959px){
  .homecover{ height:auto; min-height:0; }
  .homecover__img{ position:relative; aspect-ratio:21 / 10; }
  .homecover .label{ margin-bottom:6px; }
  .homecover__img img{ object-position:44% 64%; }
  .homecover__img::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:24%; background:linear-gradient(to bottom, rgba(19,33,28,0), var(--ink)); }
}

.homecover__text{ position:relative; padding:0 0 14px; background:var(--ink); }
@media (min-width:960px){ .homecover__text{ padding:180px 0 48px; } }
.homecover .label{ color:rgba(255,255,255,.82); display:block; margin-bottom:10px; }
.homecover .d1{ max-width:14ch; }
.homecover__lede{ margin-top:10px; font-size:1.0625rem; color:rgba(255,255,255,.88); max-width:30rem; }
@media (min-width:960px){ .homecover__lede{ font-size:1.25rem; } }

.prices{ background:var(--ground); padding:14px 0 6px; }
@media (min-width:960px){ .prices{ padding:28px 0 0; } }
.prices__in{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
@media (min-width:960px){ .prices__in{ gap:20px; } }
.prices a{ display:flex; flex-direction:column; padding:12px 10px 12px 12px; border-radius:14px; background:var(--card); text-decoration:none; min-width:0; }
@media (min-width:960px){ .prices a{ padding:20px 22px; } }
.prices__svc{ font-weight:700; font-size:.8125rem; line-height:1.2; min-height:2.4em; }
@media (min-width:960px){ .prices__svc{ min-height:0; } }
.prices__from{ margin-top:8px; font-size:.75rem; color:var(--ink-2); line-height:1; }
.prices .fig{ font-size:clamp(1.3125rem, 6vw, 2.5rem); margin-top:2px; white-space:nowrap; }
.prices__unit{ margin-top:4px; font-size:.75rem; color:var(--ink-2); line-height:1.2; }
@media (min-width:960px){ .prices__svc{ font-size:1rem; } .prices__from, .prices__unit{ font-size:.875rem; } }
.homecover + .prices + .hero{ padding-top:40px; }
@media (min-width:960px){ .homecover + .prices + .hero{ padding-top:88px; } }
.quad{ display:grid; gap:10px; }
@media (min-width:720px){ .quad{ grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media (min-width:1100px){ .quad{ grid-template-columns:repeat(4, 1fr); } }
/* an odd number of facts must not leave an empty cell: flex, and the last one stretches */
@media (max-width:719px){ .meta{ display:flex; flex-wrap:wrap; } .meta div{ flex:1 1 140px; } }

/* the wordmark is the brand file itself (Barlow SemiBold, .30em, outlined by tools/make-brand.py), never retyped */
.wordmark{ display:inline-flex; align-items:center; letter-spacing:0; padding-right:0; line-height:1; }
.wordmark__svg{ display:block; width:96px; height:auto; }
.foot .wordmark__svg{ width:112px; }
.wordmark__svg{ overflow:visible; }

/* On a wide screen the whole picture is shown, sky to lawn, at its own shape (capped to the
   window), never enlarged: a render pushed in shows it is a render. The headline sits on
   the lawn under the house; when the window is shorter than the picture, sky is cut first. */
@media (min-width:960px){
  .homecover{ height:min(calc(100vw * 0.558), calc(100svh - var(--top-h))); min-height:520px; }
  .homecover__img img{ object-position:50% 72%; }
  .homecover__text{ position:absolute; left:0; right:0; bottom:0; padding:150px 0 36px;
    background:linear-gradient(to top, rgba(19,33,28,.9) 0%, rgba(19,33,28,.8) 45%, rgba(19,33,28,.4) 75%, rgba(19,33,28,0) 100%); }
  .homecover .label{ color:rgba(255,255,255,.92); }
  .homecover .d1{ max-width:none; font-size:clamp(3rem, 4.6vw, 4.5rem); }
  .homecover__lede{ max-width:none; }
}

/* kitchen page hero: the New Tampa kitchen, framed to keep the navy accent wall in shot —
   low and centred in the phone's wide strip, pinned left in the desktop portrait */
.shero__img--kitchen img{ object-position:50% 62%; }
@media (min-width:960px){ .shero__img--kitchen img{ object-position:0% 50%; } }

/* in-progress / finished: two different camera positions, so not a slider — one frame
   the size of the bathroom sliders, with both states named as tabs over the photo */
.flip{ position:relative; aspect-ratio:3/2; border-radius:var(--r-img); overflow:hidden; background:var(--sunk); touch-action:pan-y; }
.flip__img{ position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease); }
.flip__img.is-on{ opacity:1; }
.flip__img picture, .flip__img img{ width:100%; height:100%; }
.flip__img img{ object-fit:cover; }
.flip__tabs{ position:absolute; top:12px; left:12px; z-index:2; display:flex; gap:2px; padding:3px; border-radius:var(--r-pill); background:rgba(19,33,28,.82); }
.flip__tabs button{ min-height:36px; padding:0 12px; border:0; border-radius:var(--r-pill); background:transparent; color:rgba(255,255,255,.8);
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:background-color .2s, color .2s; }
.flip__tabs button[aria-selected="true"]{ background:#fff; color:var(--ink); }
.flip__tabs button:focus-visible{ outline:3px solid var(--marker); outline-offset:1px; }
@media (prefers-reduced-motion:reduce){ .flip__img{ transition:none; } }
/* the licence row opens the state lookup, so it says it leaves the site */
.direct b svg{ width:15px; height:15px; margin-left:6px; vertical-align:-1px; opacity:.75; }