/* =========================================================
   Halden Roofing Co. · inner pages
   Loaded after style.css; reuses its tokens, buttons, .doc fragments,
   .spec, .ticks, .faq-list, .bform and reveal motion.
   ========================================================= */
@keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* style.css stacks .doc panels in one cell for the homepage tabs; inner pages place them normally */
.doc{grid-area:auto}
/* spacing between stacked sections */
.sec--ink + .faq,.sec--card + .faq,.sec--ink + .jr,.sec--card + .jr,.sec--card + .sec--flush-top,.sec--ink + .sec--flush-top{padding-top:var(--sec)}
.sec--round + .sec--card,.sec--card + .sec--round,.sec--round + .sec--round,.sec--card + .sec--card{margin-top:12px}
.pcards .post-img{aspect-ratio:7/5}
.jr-grid--2 .post-img{aspect-ratio:16/10}
.split > .report,.split > .doc{position:sticky;top:calc(var(--hdr-h) + 32px)}
.scope .doc-table tfoot td{font-size:20px}

/* ---------- header: current page ---------- */
.nav-link[aria-current],.nav-trigger.is-current{background:rgba(20,21,23,.06)}
.nav-link[aria-current="page"]{font-weight:600}
.mega-list a[aria-current]{padding-left:10px}
.mega-list a[aria-current] .n{color:var(--ink)}
.mega-list a[aria-current] .t{font-weight:600}
.mnav li a[aria-current]{font-weight:600}
.mnav li a[aria-current]::after{content:"";order:1;width:7px;height:7px;border-radius:50%;background:var(--ink);margin:0 auto 0 12px}
.mnav li a svg{order:2}   /* word, current-page dot, then the arrow on the right edge */

/* ---------- buttons on ink ---------- */
.btn--line-d{--fg:#fff;--wipe:#fff;--wfg:var(--ink);border-color:var(--line-d)}
.btn--line-d:hover{border-color:#fff}

/* visually hidden radios (pills, slots, segmented controls) must not stick out of narrow rows */
.pills input,.slots input,.seg input,.mopts input{width:1px;height:1px;margin:0}
.contact > *{min-width:0}
.reach a{overflow-wrap:anywhere}

/* verdict rows on ink */
.sec--ink .verdict,.sec--ink .verdict li{border-color:var(--line-d)}
.sec--ink .verdict p{color:var(--muted-d)}
.sec--ink .verdict .sev{color:var(--ink)}
.sec--ink .verdict .sev--hi{color:var(--hi)}
.sec--ink .verdict .sev--ok{color:#fff;border-color:var(--line-d)}

/* ---------- shared type ---------- */
.h1{font-size:clamp(40px,5.4vw,84px);line-height:1.02;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.h1--md{font-size:clamp(38px,4.6vw,70px)}
.h4{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.muted{color:var(--muted)}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.5;letter-spacing:-.012em}
.sec--tight{padding:clamp(64px,7vw,104px) 0}
.sec--flush-top{padding-top:0}
.sec--card{background:var(--card);border-radius:var(--r-lg);margin:0 12px}
.sec--ink.sec--round{border-radius:var(--r-lg);margin:0 12px}
.sec + .sec--card,.sec--card + .sec--card{margin-top:0}
.stack-12 > * + *{margin-top:12px}

/* ---------- breadcrumbs ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font-size:13.5px;font-weight:600;color:var(--muted)}
.crumbs li{display:flex;align-items:center}
.crumbs li + li::before{content:"/";margin:0 10px;color:rgba(20,21,23,.28);font-weight:400}
.crumbs a{display:inline-block;padding:4px 0;transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.crumbs--light ol{color:rgba(255,255,255,.72)}
.crumbs--light li + li::before{color:rgba(255,255,255,.35)}
.crumbs--light a:hover,.crumbs--light [aria-current]{color:#fff}

/* =========================================================
   Page headers
   ========================================================= */
/* photographic band: same inset frame as the homepage hero */
.ph{padding:0 12px}
.ph-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0c0d0f;color:#fff;min-height:clamp(500px,calc(100svh - 38px - var(--hdr-h) - 110px),700px);display:flex;flex-direction:column}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 45%);transform:scale(1.04);animation:heroZoom 2s var(--ease) forwards}
.ph-frame::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(12,13,15,.62) 0%,rgba(12,13,15,.22) 45%,rgba(12,13,15,.22) 60%,rgba(12,13,15,.5) 100%),
  linear-gradient(0deg,rgba(12,13,15,.92) 0%,rgba(12,13,15,.66) 34%,rgba(12,13,15,.2) 62%,rgba(12,13,15,0) 78%),
  linear-gradient(180deg,rgba(12,13,15,.5) 0%,rgba(12,13,15,0) 22%)}
.ph-top,.ph-bottom,.ph-meta{position:relative;z-index:2}
.ph-top{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:clamp(20px,2.4vw,32px) clamp(24px,4vw,56px) 0}
.ph-tag{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.86);padding:8px 14px 8px 12px;border-radius:8px;background:rgba(12,13,15,.35);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ph-tag b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.ph-bottom{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,430px);align-items:end;gap:28px clamp(32px,5vw,80px);padding:48px clamp(24px,4vw,56px) clamp(28px,3vw,44px)}
.ph-kick{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:14px;font-weight:600;color:var(--hi)}
.ph-kick svg{width:18px;height:18px}
.ph-h{font-size:clamp(40px,4.6vw,74px);line-height:1.03;letter-spacing:-.042em;font-weight:500;text-wrap:balance;max-width:17ch}
.ph-side{display:grid;gap:22px;padding-bottom:6px}
.ph-side p{font-size:clamp(15.5px,1.15vw,17px);color:rgba(255,255,255,.82);max-width:42ch}
.ph-ctas{display:flex;flex-wrap:wrap;gap:10px}
.ph-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14);background:rgba(12,13,15,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ph-meta > div{padding:16px clamp(16px,2vw,28px);display:grid;gap:3px}
.ph-meta > div:first-child{padding-left:clamp(24px,4vw,56px)}
.ph-meta > div + div{border-left:1px solid rgba(255,255,255,.12)}
.ph-meta dt{font-size:12px;font-weight:600;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
.ph-meta dd{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ph--ink .ph-frame::before{background:linear-gradient(90deg,rgba(10,14,16,.9) 0%,rgba(10,14,16,.62) 55%,rgba(10,14,16,.4) 100%),linear-gradient(0deg,rgba(10,14,16,.7),rgba(10,14,16,0) 50%)}

/* editorial header: text on paper, hairline underneath */
.eh{padding-top:clamp(20px,2.6vw,36px)}
.eh-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:28px clamp(32px,6vw,96px);padding:clamp(48px,7vw,112px) 0 clamp(36px,4vw,60px);border-bottom:1px solid var(--line)}
.eh .lbl{margin-bottom:22px}
.eh-side{display:grid;gap:24px;justify-items:start;padding-bottom:6px}
.eh-side p{color:var(--muted);font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;max-width:44ch}
.eh-btns{display:flex;flex-wrap:wrap;gap:10px}
.eh-meta{display:flex;flex-wrap:wrap;gap:10px 0;padding:18px 0 0}
.eh-meta > div{display:flex;gap:10px;align-items:baseline;padding-right:28px;margin-right:28px;border-right:1px solid var(--line)}
.eh-meta > div:last-child{border-right:0}
.eh-meta dt{font-size:12.5px;font-weight:600;color:var(--muted)}
.eh-meta dd{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}

/* wide inset photo under an editorial header */
.wide{padding:clamp(24px,3vw,40px) 12px 0}
.wide-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/8;background:var(--paper-2)}
.wide-frame img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.wide-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:48px clamp(20px,3vw,32px) 18px;background:linear-gradient(0deg,rgba(12,13,15,.66),rgba(12,13,15,0));color:#fff;font-size:14px}
.wide-cap .mono{color:rgba(255,255,255,.8)}

/* =========================================================
   Section building blocks
   ========================================================= */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(32px,6vw,96px);align-items:start}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split-side{position:sticky;top:calc(var(--hdr-h) + 32px)}
.split-side .h2{margin-bottom:20px}
.split-side .sec-lede{margin-bottom:26px}
.sec-foot{margin-top:clamp(32px,4vw,48px);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}

/* open columns with a rule on top (no boxes, no icons) */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(20px,3vw,44px)}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:10px;align-content:start}
.col--strong{border-top:2px solid var(--ink)}
.sec--ink .col{border-color:var(--line-d)}
.col h3{font-size:clamp(19px,1.5vw,22px);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.col p{color:var(--muted);font-size:15.5px}
.sec--ink .col p{color:var(--muted-d)}
.col .mono{color:var(--muted)}
.sec--ink .col .mono{color:var(--hi)}

/* signs / symptoms: two-column hairline list */
.signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px);border-top:1px solid var(--line)}
.signs li{padding:22px 0 24px;border-bottom:1px solid var(--line);display:grid;gap:6px;align-content:start}
.signs h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.signs p{color:var(--muted);font-size:15.5px}

/* line-item sheet: what is included */
.sheet{background:var(--card);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,32px)}
.sec--card .sheet{background:var(--paper)}
.sheet-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sheet-head .mono:first-child{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.sheet-head .mono + .mono{color:var(--muted)}
.lines li{display:grid;grid-template-columns:40px minmax(0,4fr) minmax(0,7fr);gap:6px 16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.lines li:last-child{border-bottom:0;padding-bottom:0}
.lines .n{color:var(--muted);font-size:12.5px}
.lines b{font-weight:600;font-size:16.5px;letter-spacing:-.015em;line-height:1.35}
.lines p{color:var(--muted);font-size:15.5px}

/* timeline rows */
.tl{border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:minmax(110px,1.3fr) minmax(0,3fr) minmax(0,5fr);gap:8px clamp(16px,3vw,40px);padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tl .when{font-size:13px;color:var(--muted)}
.tl h3{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.tl p{color:var(--muted)}
.sec--ink .tl,.sec--ink .tl li{border-color:var(--line-d)}
.sec--ink .tl .when{color:var(--hi)}
.sec--ink .tl p{color:var(--muted-d)}

/* price tables */
.ptable{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.ptable th,.ptable td{text-align:left;vertical-align:baseline;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
.ptable thead th{font-size:12.5px;font-weight:600;color:var(--muted);padding-top:0;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.ptable tbody th{font-weight:600;letter-spacing:-.01em}
.ptable td{color:var(--muted)}
.ptable .price{text-align:right;color:var(--ink);font-weight:600;white-space:nowrap;padding-right:0}
.ptable thead th.price{color:var(--muted)}
.ptable small{display:block;color:var(--muted);font-weight:450;font-size:14px;margin-top:2px;letter-spacing:0}
.ptable-wrap{background:var(--card);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,32px) clamp(18px,2.4vw,32px) clamp(8px,1.2vw,16px)}
.ptable-wrap .ptable tr:last-child > *{border-bottom:0}
.sec--card .ptable-wrap{background:var(--paper)}
.kv{border-top:1px solid var(--line)}
.kv > div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sec--ink .kv,.sec--ink .kv > div{border-color:var(--line-d)}
.sec--ink .kv dt{color:var(--muted-d)}

.kv--long > div{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);gap:6px 24px}
.kv--long dd{text-align:left;font-weight:450;line-height:1.5}

/* verdict rows (repair or replace) */
.verdict{border-top:1px solid var(--line)}
.verdict li{display:grid;grid-template-columns:minmax(0,5fr) 96px minmax(0,5fr);gap:8px 20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.verdict b{font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.verdict p{color:var(--muted);font-size:15.5px}
.verdict .sev{justify-self:start}

/* related materials: hairline rows with a small swatch */
.mrows{border-top:1px solid var(--line)}
.mrows a{display:grid;grid-template-columns:56px minmax(0,3fr) minmax(0,2fr) minmax(0,2fr) 24px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);transition:color .25s}
.mrows .sw{width:56px;height:56px;border-radius:9px;overflow:hidden;background:var(--paper-2)}
.mrows .sw img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mrows a:hover .sw img{transform:scale(1.08)}
.mrows b{font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.025em}
.mrows .mono{color:var(--muted)}
.mrows a:hover b{color:#4a4d52}

/* project cards */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.pcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcard{display:grid;gap:12px;align-content:start}
.pcard-img{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:7/5;background:var(--ink-3)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.035)}
.pcard .proj-tag{left:12px;top:12px}
.pcard-type{color:var(--muted)}
.pcard h3{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.22;transition:opacity .25s}
.pcard:hover h3{opacity:.7}
.pcard-spec{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13px}
.sec--ink .pcard-type,.sec--ink .pcard-spec{color:var(--muted-d)}

/* note cards (reuse .post from style.css) */
.post h2{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.22;transition:opacity .25s}
.post-link:hover h2{opacity:.7}
.feature-copy .link{align-self:flex-start}
.jr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* callout band at the end of a page */
.cta{padding:0 12px;margin-top:12px}
.cta-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);color:#fff;padding:clamp(64px,8vw,120px) 0}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.cta-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,14,16,.92) 0%,rgba(14,14,16,.7) 55%,rgba(14,14,16,.5) 100%)}
.cta-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,6vw,96px);align-items:end}
.cta .h2{max-width:18ch}
.cta-side{display:grid;gap:26px}
.cta-side p{color:rgba(255,255,255,.76);max-width:44ch}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.cta .btn--hi{--wipe:#fff;--wfg:var(--ink)}

/* prev / next project */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pnav a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:10px 24px 10px 10px;border-radius:14px;background:var(--card);transition:background-color .3s var(--ease)}
.pnav a:hover{background:#fbfaf7}
.pnav a.is-prev{grid-template-columns:auto auto minmax(0,1fr)}
.pnav img{width:120px;height:86px;border-radius:9px;object-fit:cover}
.pnav small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:3px}
.pnav b{display:block;font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em;line-height:1.25}
.pnav svg{width:20px;height:20px}

/* =========================================================
   Services overview
   ========================================================= */
.svlist{border-top:1px solid var(--line)}
.svlist li{border-bottom:1px solid var(--line)}
.svlist a{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,4fr) minmax(120px,1.4fr) 168px 24px;gap:12px clamp(16px,2.4vw,32px);align-items:center;padding:20px 0;color:var(--ink)}
.svlist .n{color:var(--muted);font-size:13px}
.svlist .t{font-size:clamp(24px,2.4vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1;transition:color .3s var(--ease)}
.svlist .d{color:var(--muted);font-size:15.5px;max-width:40ch}
.svlist .p{font-size:14px;font-variant-numeric:tabular-nums}
.svlist .p b{display:block;font-size:clamp(18px,1.4vw,20px);font-weight:600;letter-spacing:-.015em}
.svlist .p span{color:var(--muted);font-size:12.5px;font-weight:600}
.svlist .th{width:168px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.svlist .th img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svlist a:hover .th img{transform:scale(1.07)}
.svlist a:hover .t{color:#4a4d52}
.svlist a > svg{width:22px;height:22px}

/* symptom -> service finder */
.finder{border-top:1px solid var(--line)}
.finder a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) 24px;gap:12px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.finder .q{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.02em}
.finder .a{color:var(--muted);font-size:15px;font-weight:600;transition:color .25s}
.finder a:hover .a{color:var(--ink)}
.finder svg{width:20px;height:20px;align-self:center}

/* =========================================================
   Service pages
   ========================================================= */
.who-text{font-size:clamp(17px,1.35vw,20px);line-height:1.55;max-width:46ch;margin-bottom:28px}
.sizing .ptable td:nth-child(2){color:var(--ink);font-weight:600}
.est-mini{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}

/* storm page: first-24-hours checklist */
.hours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hour{color:#fff;background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r-md);padding:22px;display:grid;gap:10px;align-content:start}
.hour .mono{color:var(--hi)}
.hour h3{font-size:20px;font-weight:500;letter-spacing:-.025em;line-height:1.25}
.hour p{color:var(--muted-d);font-size:15px}
.hour ul{display:grid;gap:6px;margin-top:4px}
.hour li{font-size:14.5px;color:#d6d8db;padding-left:16px;position:relative}
.hour li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1.5px;background:var(--hi)}
.hours-wrap{background:var(--ink);border-radius:var(--r-lg);padding:clamp(12px,1.6vw,20px)}
.dont{border-top:1px solid var(--line)}
.dont li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.dont li::before{content:"";width:14px;height:2px;background:#b3261e;margin-top:.8em}
.dont b{font-weight:600}

/* inspection page: report fragment */
.report .doc{min-height:0}
.report .doc-issues li{grid-template-columns:78px 64px 1fr}
.report .doc-issues .code{color:var(--muted);font-size:12px}
.verdict-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.verdict-box > div{padding:14px 16px;display:grid;gap:4px}
.verdict-box > div + div{border-left:1px solid var(--line)}
.verdict-box .mono{color:var(--muted);font-size:11.5px}
.verdict-box b{font-weight:600;font-size:15px;line-height:1.35}
.verdict-box .is-call{background:var(--ink);color:#fff}
.verdict-box .is-call .mono{color:var(--hi)}
.zones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px clamp(20px,3vw,40px)}
.zones .col ul{display:grid;gap:6px;margin-top:4px}
.zones .col li{font-size:15px;color:var(--muted);padding-left:16px;position:relative}
.zones .col li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1.5px;background:var(--ink)}
.col .zone-n{color:var(--ink);font-size:clamp(36px,3.4vw,52px);font-weight:500;letter-spacing:-.05em;line-height:1}
.zone-n small{font-size:14px;letter-spacing:0;color:var(--muted);margin-left:6px;font-weight:600}

/* ventilation diagram */
.vdiag{display:flex;flex-direction:column;justify-content:center;background:var(--card);border-radius:var(--r-lg);padding:clamp(16px,2vw,28px)}
.vdiag svg{width:100%;height:auto;display:block}
.vdiag figcaption{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.vdiag figcaption span{display:inline-flex;align-items:center;gap:8px}
.vdiag figcaption i{width:18px;height:0;border-top:2.5px dashed var(--ink)}
.vdiag figcaption i.warm{border-top:3px solid #c65d21}
.vdiag .t-sm{font:600 13px var(--f-sans);fill:var(--muted)}
.vdiag .t-md{font:600 14.5px var(--f-sans);fill:var(--ink)}

/* =========================================================
   Materials
   ========================================================= */
.jump{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.jump a{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:12px;border:1px solid var(--line);font-size:14px;font-weight:550;line-height:1.2;letter-spacing:-.01em;transition:background-color .25s,border-color .25s}
.jump a:hover{border-color:rgba(20,21,23,.35);background:rgba(255,255,255,.5)}
.jump img{width:40px;height:40px;border-radius:7px;object-fit:cover}
.mblock{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,5vw,80px);padding:clamp(56px,6vw,88px) 0;border-top:1px solid var(--line);align-items:start}
.mblock:first-child{border-top:0;padding-top:0}
.mblock-img{position:sticky;top:calc(var(--hdr-h) + 24px);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;background:var(--paper-2)}
.mblock-img img{width:100%;height:100%;object-fit:cover}
.mblock-img .mono{position:absolute;left:14px;top:14px;background:var(--card);border-radius:8px;padding:6px 10px;font-size:12.5px}
.mblock-info{display:grid;gap:24px}
.mblock-info .lead{max-width:40ch}
.mblock-info > p:not(.lead):not(.mono){color:var(--muted);max-width:62ch}
.spec--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spec--3 > div{padding:14px 12px 14px 0}
.spec--3 > div:nth-child(even){padding-left:0;border-left:0}
.spec--3 > div:not(:nth-child(3n+1)){padding-left:16px;border-left:1px solid var(--line)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(20px,3vw,40px)}
.pc h3{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.pc ul{border-top:1px solid var(--line)}
.pc li{display:grid;grid-template-columns:18px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45}
.pc li::before{font-weight:700;font-variant-numeric:tabular-nums}
.pc .pros li::before{content:"+"}
.pc .cons li::before{content:"–";color:var(--muted)}
.mblock-foot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.mblock-foot .rate{font-size:14px;color:var(--muted)}
.mblock-foot .rate b{color:var(--ink);font-size:18px;font-weight:600;letter-spacing:-.015em;margin-right:4px}

.ctable-wrap{position:relative;overflow-x:auto;background:var(--card);border-radius:var(--r-lg);padding:clamp(14px,2vw,28px);-webkit-overflow-scrolling:touch}
.ctable-wrap:focus-visible{outline-offset:-3px}
.ctable{width:100%;min-width:900px;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.ctable th,.ctable td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--line)}
.ctable thead th{font-size:12.5px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--ink);padding-top:0;white-space:nowrap}
.ctable tbody tr:last-child > *{border-bottom:0}
.ctable tbody th{font-weight:600;min-width:170px}
.ctable tbody th a{display:inline-flex;align-items:center;gap:10px}
.ctable tbody th img{width:36px;height:36px;border-radius:7px;object-fit:cover}
.ctable td{color:var(--ink)}
.ctable td.best{color:var(--muted);min-width:220px}
.cost{letter-spacing:.08em;font-weight:600}
.cost i{font-style:normal;color:rgba(20,21,23,.2)}
.choose{border-top:1px solid var(--line)}
.choose li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(20px,4vw,56px);padding:24px 0;border-bottom:1px solid var(--line)}
.choose h3{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.choose p{color:var(--muted)}
.choose .to{display:block;margin-top:8px;color:var(--ink);font-size:14.5px;font-weight:600}

/* =========================================================
   Projects
   ========================================================= */
.filters{display:grid;border-top:1px solid var(--line);margin-bottom:8px}
.filters fieldset{border:0;margin:0;padding:12px 0;min-width:0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 16px;align-items:center;border-bottom:1px solid var(--line)}
.filters legend{float:left;font-size:13px;font-weight:600;color:var(--muted);padding:0}
.filters .pills label{height:38px}
.filters .pills input:focus-visible + label{outline:2.5px solid var(--ink);outline-offset:2px}
.f-status{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0 18px}
.f-status p{font-size:14px;color:var(--muted)}
.f-status b{color:var(--ink);font-weight:600}
.f-reset{font-weight:600;font-size:14px;height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--line);transition:background-color .2s,border-color .2s}
.f-reset:hover{border-color:rgba(20,21,23,.35);background:rgba(20,21,23,.04)}
.plist > li{border-bottom:1px solid var(--line)}
.plist > li[hidden]{display:none}
.prow{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:24px clamp(28px,4vw,64px);padding:clamp(24px,3vw,36px) 0;align-items:stretch}
.prow-img{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:100%;aspect-ratio:7/5;background:var(--ink-3)}
.prow-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.prow:hover .prow-img img{transform:scale(1.03)}
.prow-info{display:flex;flex-direction:column;gap:16px;padding:6px 0}
.prow-info .mono{color:var(--muted)}
.prow-info h2{font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.1;transition:opacity .25s}
.prow:hover h2{opacity:.72}
.prow-info > p:not(.mono){color:var(--muted);max-width:52ch}
.prow-info .spec{margin-top:auto}
.prow-info .link{align-self:flex-start}
.empty{padding:clamp(48px,6vw,80px) 0;display:grid;gap:16px;justify-items:start;border-bottom:1px solid var(--line)}
.empty h2{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.03em}
.empty p{color:var(--muted);max-width:52ch}

/* case study */
.brief{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:32px clamp(28px,4vw,64px);align-items:start}
.brief .lbl{padding-top:.5em}
.brief-text{display:grid;gap:20px}
.brief-text p{font-size:clamp(19px,1.6vw,24px);line-height:1.45;letter-spacing:-.02em}
.brief-text p + p{color:var(--muted)}
.jobsheet{background:var(--card);border-radius:var(--r-md);padding:18px 20px}
.jobsheet .mono:first-child{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.jobsheet .kv{border-top:0}
.jobsheet .kv > div{font-size:14px;padding:10px 0}
.jobsheet .kv > div:last-child{border-bottom:0;padding-bottom:0}
.sevkey{border-top:1px solid var(--line-d);margin-top:8px}
.sevkey li{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-d);font-size:15px;color:var(--muted-d)}
.sevkey .sev{color:var(--ink)}
.sevkey .sev--ok{color:#fff;border-color:var(--line-d)}
.sevkey .sev--hi{color:var(--hi)}
.scope-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(28px,4vw,64px);align-items:start}
.scope .doc{min-height:0;background:var(--card)}
.doc-table td.incl{color:var(--muted)}
.doc-table tr.var td{border-top:1px dashed rgba(20,21,23,.25)}
.doc-table .sub th{font-family:var(--f-sans);font-size:13px;font-weight:600;color:var(--muted);padding-top:22px}
.doc-table tfoot tr.final th,.doc-table tfoot tr.final td{border-top:1px solid var(--line);font-size:16px;padding-top:12px}
.doc-table tfoot tr.final td{font-size:18px}
.numbers{border-top:1px solid var(--line)}
.numbers > div{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.numbers dt{font-size:clamp(36px,3.4vw,52px);font-weight:500;letter-spacing:-.05em;line-height:1}
.numbers dd{color:var(--muted);font-size:15.5px}
.paid{margin-top:28px}
.paid h3{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}
.buildlog .doc{min-height:0}
.buildlog .doc-log li{grid-template-columns:96px 1fr}
.result{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px clamp(28px,4vw,64px);align-items:stretch}
.result-img{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;background:var(--paper-2)}
.result-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.result-img figcaption{position:absolute;left:14px;bottom:14px;background:rgba(20,21,23,.78);color:#fff;border-radius:6px;padding:4px 8px;font-size:11.5px}
.result-copy{display:flex;flex-direction:column;gap:22px;justify-content:center;padding:clamp(4px,1vw,12px) 0}
.result-copy .lead{max-width:48ch}
.warr{display:flex;align-items:center;gap:14px;background:var(--hi);border-radius:var(--r-md);padding:16px 18px;align-self:flex-start}
.warr b{font-size:32px;font-weight:500;letter-spacing:-.05em;line-height:1}
.warr span{font-size:14px;line-height:1.35}
.warr .mono{display:block;font-size:12px;color:rgba(20,21,23,.72)}

/* =========================================================
   About
   ========================================================= */
.years{border-top:1px solid var(--line)}
.years li{display:grid;grid-template-columns:minmax(120px,2fr) minmax(0,4fr) minmax(0,6fr);gap:8px clamp(20px,3vw,44px);padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.years .y{font-size:clamp(36px,3.6vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.years h3{font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.years p{color:var(--muted)}
.promise{width:100%;border-collapse:collapse}
.promise th,.promise td{text-align:left;vertical-align:baseline;padding:20px 20px 20px 0;border-bottom:1px solid var(--line-d)}
.promise thead th{font-size:12.5px;font-weight:600;color:var(--muted-d);padding-top:0;border-bottom-color:rgba(255,255,255,.4)}
.promise tbody th{font-size:clamp(18px,1.5vw,21px);font-weight:500;letter-spacing:-.02em;width:30%}
.promise td{color:var(--muted-d);font-size:15.5px}
.promise td.when{color:var(--hi);font-size:13px;font-weight:600;white-space:nowrap;width:1%}
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(28px,4vw,64px);align-items:stretch;margin-bottom:clamp(40px,5vw,64px)}
.founder .portrait{aspect-ratio:auto;min-height:460px}
.founder-copy{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:12px 0}
.founder-copy blockquote p{font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.03em;font-weight:450}
.portrait{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/5;background:var(--paper-2)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.person{display:grid;gap:12px;align-content:start}
.person h3{font-size:clamp(19px,1.5vw,22px);font-weight:500;letter-spacing:-.025em}
.person .mono{color:var(--muted)}
.person p:last-child{color:var(--muted);font-size:15px}
.towns{border-top:1px solid var(--line)}
.towns li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,5fr);gap:6px 24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.towns b{font-size:clamp(18px,1.5vw,21px);font-weight:500;letter-spacing:-.02em}
.towns .mono{color:var(--muted)}
.towns span:last-child{color:var(--muted);font-size:15px}
.cover{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(20px,3vw,40px)}
.cover h3{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.cover ul{border-top:1px solid var(--line)}
.cover li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:15.5px;position:relative;line-height:1.45}
.cover .yes li::before{content:"";position:absolute;left:2px;top:1.05em;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.cover .no li::before{content:"";position:absolute;left:1px;top:1.3em;width:13px;height:2px;background:var(--muted)}
.yard{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(28px,4vw,64px);align-items:stretch}
.yard-img{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:420px;background:var(--paper-2)}
.yard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.yard-copy{display:flex;flex-direction:column;gap:22px;justify-content:center}

/* =========================================================
   Estimator page
   ========================================================= */
.estp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(28px,4vw,64px);align-items:start}
.esteps{background:var(--card);border-radius:var(--r-lg);padding:clamp(8px,1.4vw,16px) clamp(20px,3vw,40px)}
.estep{border:0;margin:0;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--line);min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 16px}
.estep:last-child{border-bottom:0}
.estep > .mono{grid-row:1/4;color:var(--muted);padding-top:4px}
.estep legend,.estep .legend{float:left;width:100%;font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:0;padding:0}
.estep legend + *{clear:both}
.estep .help{color:var(--muted);font-size:15px;margin:6px 0 16px;max-width:56ch}
.estep-body{grid-column:2}
.estep .range-row{grid-template-columns:1fr auto}
.num{display:flex;align-items:center;gap:8px;height:48px;border-radius:11px;border:1px solid var(--line);background:var(--paper);padding:0 12px;width:150px}
.num:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(221,242,71,.8)}
.num input{width:100%;min-width:0;border:0;background:none;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield;appearance:textfield}
.num input::-webkit-inner-spin-button,.num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.num span{color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.seg--tall label{height:auto;min-height:58px;padding:9px 8px;display:flex;flex-direction:column;justify-content:center;text-align:center;line-height:1.25}
.seg--tall label small{font-size:12px;font-weight:500;opacity:.72}
.mopts{display:grid;gap:8px}
.mopts input{position:absolute;opacity:0;pointer-events:none}
.mopts label{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 16px 8px 8px;border-radius:12px;border:1px solid var(--line);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.mopts label:hover{border-color:rgba(20,21,23,.35)}
.mopts img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.mopts b{display:block;font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.mopts small{display:block;font-size:13px;color:var(--muted)}
.mopts .r{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.mopts input:checked + label{background:var(--ink);border-color:var(--ink);color:#fff}
.mopts input:checked + label small{color:var(--muted-d)}
.mopts input:focus-visible + label{outline:2.5px solid var(--ink);outline-offset:2px}
.estp-out{position:sticky;top:calc(var(--hdr-h) + 24px)}
.estp-out .est-out{gap:20px}
.est-lines{border-top:1px solid var(--line-d)}
.est-lines > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--line-d);font-size:14.5px}
.est-lines dt{color:#e7e8ea}
.est-lines dt small{display:block;color:var(--muted-d);font-size:12.5px;font-weight:500}
.est-lines dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.est-lines .tot dt,.est-lines .tot dd{color:#fff;font-weight:650}
.est-fine{font-size:12.5px;color:var(--muted-d);line-height:1.5}
.formula{border-top:1px solid var(--line)}
.formula li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:6px 32px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.formula b{font-weight:600}
.formula code{font-family:var(--f-sans);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;background:var(--paper-2);border-radius:6px;padding:3px 8px;justify-self:start}
.formula p{color:var(--muted);font-size:15px;grid-column:1/-1}

/* =========================================================
   Roof notes
   ========================================================= */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(28px,4vw,64px);align-items:stretch;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line);margin-bottom:clamp(40px,5vw,64px)}
.feature-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;background:var(--paper-2)}
.feature-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.feature:hover .feature-img img{transform:scale(1.03)}
.feature-copy{display:flex;flex-direction:column;justify-content:center;gap:18px}
.feature-copy h2{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.04em;line-height:1.08;transition:opacity .25s}
.feature:hover h2{opacity:.72}
.feature-copy p:not(.mono){color:var(--muted);max-width:46ch}
.byline{display:flex;align-items:center;gap:12px}
.byline .ava{width:40px;height:40px}
.byline b{display:block;font-weight:600;font-size:15px}
.byline small{display:block;color:var(--muted);font-size:13px}

/* article */
.art-head{max-width:920px;padding:clamp(40px,6vw,96px) 0 clamp(28px,3vw,40px)}
.art-head .crumbs{margin-bottom:clamp(28px,4vw,48px)}
.art-head .mono{color:var(--muted);margin-bottom:18px}
.art-head .h1{font-size:clamp(38px,4.6vw,68px)}
.art-dek{font-size:clamp(18px,1.5vw,22px);line-height:1.5;letter-spacing:-.012em;color:var(--muted);margin-top:24px;max-width:56ch}
.art-by{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.art-by .mono{color:var(--muted);margin:0}
.art-img{padding:0 12px}
.art-img figure{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/9;background:var(--paper-2)}
.art-img img{width:100%;height:100%;object-fit:cover}
.art-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr);gap:40px clamp(28px,4vw,64px);padding-top:clamp(48px,6vw,88px);align-items:start}
.toc{position:sticky;top:calc(var(--hdr-h) + 32px)}
.toc p{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:12px}
.toc ol{border-top:1px solid var(--line)}
.toc a{display:block;padding:10px 0 10px 14px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.35;color:var(--muted);position:relative;transition:color .2s}
.toc a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:transparent;transition:background-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.is-on{color:var(--ink);font-weight:600}
.toc a.is-on::before{background:var(--ink)}

.prose{max-width:68ch;font-size:18px;line-height:1.7}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(25px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.2;margin-top:2em;scroll-margin-top:calc(var(--hdr-h) + 24px)}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.35;margin-top:1.6em}
.prose h2 + *,.prose h3 + *{margin-top:.7em}
.prose > p:first-child{font-size:clamp(19px,1.5vw,21px);line-height:1.6}
.prose a:not(.btn){border-bottom:1.5px solid currentColor;font-weight:600}
.prose a:not(.btn):hover{color:#4a4d52}
.prose strong{font-weight:650}
.prose .ticks{gap:12px}
.prose .ticks li{font-size:17px;line-height:1.6}
.prose .ptable{font-size:15px;line-height:1.5;margin-top:1.6em;margin-bottom:.4em}
.prose .ptable td{color:var(--ink)}
.prose .ptable td.mono{font-size:14px}
.prose .ptable--compare td:last-child{color:var(--muted)}
.callout{background:var(--card);border-radius:var(--r-md);padding:20px 22px;display:grid;gap:8px;border-left:3px solid var(--ink)}
.callout .mono{color:var(--muted)}
.callout p:not(.mono){font-size:16.5px;line-height:1.6}
.check{counter-reset:ck;border-top:1px solid var(--line)}
.check li{counter-increment:ck;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.5}
.check li::before{content:"";width:18px;height:18px;border:1.5px solid var(--ink);border-radius:4px;transform:translateY(3px)}
.art-foot{margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;max-width:68ch}
.art-foot .ava{width:56px;height:56px;font-size:15px}
.art-foot b{font-weight:600}
.art-foot p{color:var(--muted);font-size:15.5px}

/* =========================================================
   Contact
   ========================================================= */
.contact{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px clamp(32px,6vw,96px);align-items:start;padding:clamp(40px,5vw,80px) 0 0}
.contact .h1{margin-bottom:22px}
.contact-lede{color:var(--muted);font-size:clamp(16.5px,1.3vw,19px);max-width:46ch;margin-bottom:36px}
.reach{border-top:1px solid var(--line)}
.reach li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.reach .mono{color:var(--muted)}
.reach a{font-weight:600;transition:opacity .2s}
.reach a:hover{opacity:.7}
.reach small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.open-now{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.open-now .dot{background:var(--muted)}
.open-now.is-open{color:var(--ink)}
.open-now.is-open .dot{background:#3c8d2f}
.contact .bform{border:1px solid var(--line);position:sticky;top:calc(var(--hdr-h) + 24px)}
.next-steps{border-top:1px solid var(--line)}

/* =========================================================
   Legal + 404
   ========================================================= */
.legal{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr);gap:40px clamp(28px,4vw,64px);align-items:start}
.legal .prose{font-size:17px}
.legal .prose h2{font-size:clamp(22px,1.9vw,27px)}
.legal .prose > p:first-child{font-size:clamp(18px,1.4vw,20px)}
.legal .prose .ticks li{font-size:16px}
.updated{margin-top:2.4em;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.nf{padding:clamp(64px,10vw,160px) 0 clamp(64px,8vw,120px)}
.nf-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(32px,6vw,96px);align-items:end}
.nf-code{font-size:clamp(120px,22vw,340px);font-weight:600;letter-spacing:-.07em;line-height:.8;color:var(--ink);margin-bottom:28px}
.nf p.muted{max-width:44ch;margin:18px 0 28px;font-size:18px}
.nf-links{border-top:1px solid var(--line)}
.nf-links a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;transition:color .25s}
.nf-links a:hover{color:#4a4d52}
.nf-links svg{width:20px;height:20px}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1240px){
  .svlist a{grid-template-columns:44px minmax(0,4fr) minmax(0,4fr) minmax(110px,1.4fr) 24px}
  .svlist .th{display:none}
  .jump{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hours{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .ph-bottom{grid-template-columns:1fr;padding-top:160px}
  .ph-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph-meta > div:nth-child(3){border-left:0;padding-left:clamp(24px,4vw,56px)}
  .ph-meta > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .eh-grid,.split,.split--even,.split--wide,.cta-in,.scope-grid,.result,.founder,.yard,.estp,.feature,.contact,.nf-grid,.mblock{grid-template-columns:1fr}
  .split-side,.estp-out,.contact .bform{position:static}
  .mblock-img{position:relative;top:auto;aspect-ratio:16/10}
  .brief{grid-template-columns:1fr 1fr}
  .brief .lbl{grid-column:1/-1;padding-top:0}
  .cols--4,.crew{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcards > :nth-child(3):last-child{display:none}
  .art-body,.legal{grid-template-columns:1fr}
  .toc{position:static;max-width:520px}
  .art-body > :last-child:empty,.legal > :last-child:empty{display:none}
  .founder .portrait{aspect-ratio:4/3;min-height:0}
  .yard-img{min-height:0;aspect-ratio:16/10}
  .result-img{min-height:0;aspect-ratio:16/10}
}
@media (max-width:760px){
  .ph{padding:0 8px}
  .ph-frame{border-radius:16px;min-height:0}
  .ph-img{height:380px;bottom:auto}
  .ph-frame::before{background:linear-gradient(180deg,rgba(12,13,15,.55) 0,rgba(12,13,15,.1) 110px,rgba(12,13,15,.15) 200px,#0c0d0f 380px)}
  .ph-top{padding:16px 16px 0}
  .ph-bottom{padding:170px 16px 22px;gap:20px}
  .ph-h{font-size:clamp(34px,9.6vw,46px)}
  .ph-ctas .btn{width:100%}
  .ph-meta > div,.ph-meta > div:first-child,.ph-meta > div:nth-child(3){padding:12px 16px}
  .ph-meta dd{font-size:14.5px}
  .wide,.art-img{padding-left:8px;padding-right:8px}
  .wide-frame{aspect-ratio:4/3;border-radius:16px}
  .art-img figure{aspect-ratio:4/3;border-radius:16px}
  .sec--card,.sec--ink.sec--round{margin-left:8px;margin-right:8px}
  .cta{padding:0 8px}
  .cta-btns .btn{width:100%}
  .h1{font-size:clamp(36px,10vw,48px)}
  .eh-grid{padding-top:36px}
  .eh-meta > div{padding-right:16px;margin-right:16px}
  .cols,.cols--2,.cols--4,.signs,.pc,.cover,.pcards,.pcards--2,.jr-grid--2,.crew,.zones,.hours{grid-template-columns:1fr}
  .pcards > :nth-child(3):last-child{display:grid}
  .lines li{grid-template-columns:32px minmax(0,1fr)}
  .lines p{grid-column:2}
  .tl li,.years li,.towns li,.choose li,.formula li{grid-template-columns:1fr;gap:6px}
  .verdict li{grid-template-columns:1fr;gap:6px}
  .ptable,.ptable tbody,.ptable tr,.ptable th,.ptable td{display:block}
  .ptable thead{display:none}
  .ptable tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .ptable th,.ptable td{padding:0;border:0}
  .ptable td{margin-top:4px}
  .ptable .price{text-align:left;margin-top:6px}
  .ptable-wrap .ptable tr:last-child{border-bottom:0}
  .prose .ptable caption{display:none}
  .prose .ptable td.mono{display:inline-block}
  .svlist a{grid-template-columns:32px minmax(0,1fr) 22px;row-gap:6px;padding:20px 0}
  .svlist .n{padding-top:6px}
  .svlist .d,.svlist .p{grid-column:2}
  .svlist a > svg{grid-column:3;grid-row:1;align-self:start;margin-top:6px}
  .finder a{grid-template-columns:minmax(0,1fr) 20px}
  .finder .a{grid-column:1}
  .finder svg{grid-column:2;grid-row:1/3}
  .mrows a{grid-template-columns:48px minmax(0,1fr) 20px;gap:4px 14px}
  .mrows .sw{width:48px;height:48px;grid-row:1/3}
  .mrows .mono{grid-column:2}
  .mrows .mono + .mono{display:none}
  .mrows a > svg{grid-column:3;grid-row:1/3}
  .jump{grid-template-columns:1fr 1fr;gap:8px}
  .jump a{font-size:13px;grid-template-columns:34px 1fr;padding:6px 8px 6px 6px}
  .jump img{width:34px;height:34px}
  .spec--3{grid-template-columns:1fr 1fr}
  .spec--3 > div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .spec--3 > div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .filters fieldset{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr}
  .prow-info .spec{grid-template-columns:1fr 1fr}
  .prow-info .spec > div:nth-child(even){padding-left:16px;border-left:1px solid var(--line)}
  .person .portrait{aspect-ratio:4/3}
  .prow-img{min-height:0}
  .brief{grid-template-columns:1fr}
  .report .doc-issues li{grid-template-columns:1fr;gap:4px}
  .verdict-box{grid-template-columns:1fr}
  .verdict-box > div + div{border-left:0;border-top:1px solid var(--line)}
  .pnav{grid-template-columns:1fr}
  .pnav img{width:84px;height:64px}
  .pnav a{padding-right:16px;gap:14px}
  .numbers > div{grid-template-columns:110px 1fr}
  .buildlog .doc-log li{grid-template-columns:1fr;gap:6px}
  .promise,.promise tbody,.promise tr,.promise th,.promise td{display:block;width:auto !important}
  .promise thead{display:none}
  .promise tr{padding:18px 0;border-bottom:1px solid var(--line-d)}
  .promise th,.promise td{padding:0;border:0}
  .promise td{margin-top:6px}
  .estep{grid-template-columns:1fr}
  .estep > .mono{grid-row:auto}
  .estep-body{grid-column:1}
  .estep .range-row{grid-template-columns:1fr}
  .num{width:100%}
  .mopts label{grid-template-columns:44px minmax(0,1fr);row-gap:2px}
  .mopts img{width:44px;height:44px;grid-row:1/3}
  .mopts .r{grid-column:2;text-align:left;font-weight:500}
  .reach li{grid-template-columns:72px minmax(0,1fr)}
  .art-foot{grid-template-columns:1fr}
  .prose{font-size:17px}
  .check li{grid-template-columns:30px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .ph-img{transform:none;animation:none}
}
@media print{
  .util,.hdr,.ftr,.cta,.vv-badge,.toc{display:none !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}