/* ============================================================================
   ZENITH ROOFING & EXTERIORS — PUBLIC SITE SKIN
   Brand & Market System v2.0 · §006.2 Colour · §006.3 Typography · §006.4 Voice
   Daylight-primary hybrid: light reading surface, Deep Evergreen dark bands.
   Class names are unchanged from the previous build so markup is portable.
   NO RAW HEX ON A ZENITH SURFACE — every colour below resolves to a token.
   ========================================================================= */

/* ---- legacy variable names remapped onto Brand v2 roles ---- */
:root{
  --charcoal:      var(--heading);      /* headings → Evergreen */
  --body:          var(--text-2);       /* body copy → Slate 8.19:1 */
  --muted:         var(--text-3);       /* muted → 5.60:1 */
  --dark:          var(--band);         /* dark surfaces → Deep */
  --bg2:           var(--raised);
  --good:          var(--ok);
  --shadow:        0 1px 2px rgba(10,19,16,.06), 0 8px 24px rgba(10,19,16,.06);
  --shadow-lg:     0 2px 6px rgba(10,19,16,.08), 0 24px 56px rgba(10,19,16,.12);
  --radius:        14px;
  --radius-sm:     10px;
  --font:          var(--z-body);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--z-body); font-weight:400; font-size:16px;
  color:var(--text); background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* §006.3 — Archivo ExtraBold, tracking -2.5%, sentence case.
   ALL-CAPS IS RESERVED FOR THE WORDMARK. */
h1,h2,h3,h4{
  font-family:var(--z-disp); font-weight:800; letter-spacing:-.025em;
  color:var(--heading); line-height:1.15; margin:0;
}
strong,b{font-weight:600;color:var(--text)}

/* §006.3 — IBM Plex Mono 500 +0.14em. The engineered register. Never below 10px. */
.eyebrow,.z-label,.tag,.tierbadge,.tierpill,.badge,footer h4,.legend b{
  font-family:var(--z-mono); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase;
}

/* ─────────────────────────  HEADER  ───────────────────────── */
header.nav{
  position:sticky;top:0;z-index:50;background:var(--card);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;height:100%}
.brand img{height:40px;width:auto;display:block}
.nav-links{
  display:flex;gap:22px;margin-left:auto;font-weight:500;font-size:15px;
  color:var(--text);height:72px;align-items:center;
}
.nav-links > a{display:flex;align-items:center;height:100%}
.nav-links a:hover{color:var(--accent)}
.has-sub{position:relative;display:flex;align-items:center;height:72px}
.has-sub > .top{display:flex;align-items:center;gap:5px;cursor:pointer;height:100%}
.has-sub > .top:after{content:"▾";font-size:10px;color:var(--text-3)}
.has-sub:hover > .top{color:var(--accent)}
.nav-links .sub{
  position:absolute;top:72px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent-lg);
  border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-lg);
  padding:8px;min-width:230px;display:none;flex-direction:column;z-index:70;
}
.has-sub:hover > .sub{display:flex}
.nav-links .sub a{
  padding:10px 12px;border-radius:8px;font-size:14.5px;color:var(--text);
  white-space:nowrap;font-weight:500;height:auto;
}
.nav-links .sub a:hover{background:var(--accent-soft);color:var(--accent)}
.nav-links .sub .lbl{
  font-family:var(--z-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);padding:9px 12px 4px;
}
.nav-links .sub .lbl:first-child{padding-top:2px}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{
  font-family:var(--z-mono);font-weight:500;letter-spacing:.04em;
  color:var(--heading);font-size:15px;white-space:nowrap;
}
.nav-phone:hover{color:var(--accent)}
@media(max-width:900px){.nav-links{display:none}.nav-phone{display:none}}
@media(max-width:520px){.brand img{height:34px}.nav-in{height:64px}}

/* ─────────────────────────  BUTTONS  ───────────────────────── */
.btn{
  display:inline-block;border:none;cursor:pointer;font-family:var(--z-body);
  font-weight:600;font-size:15px;padding:13px 22px;border-radius:var(--radius-sm);
  transition:.15s;text-align:center;white-space:nowrap;min-height:var(--tap);
}
.btn-primary{background:var(--accent-lg);color:var(--z-rainier-white)}
.btn-primary:hover{background:var(--accent)}
.btn-lg{font-size:17px;padding:17px 28px}
.btn-ghost{background:var(--card);color:var(--heading);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent-lg);color:var(--accent)}

/* ─────────────────────────  HERO (dark band)  ───────────────────────── */
.hero{position:relative;background:var(--band);color:var(--band-text-2);overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42}
.hero:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,26,23,.58) 0%,rgba(8,15,13,.88) 100%);
}
.hero-in{
  position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;
  gap:48px;align-items:center;padding:76px 0 88px;
}
.hero h1{color:var(--band-text);font-size:46px;margin-bottom:18px}
.hero h1 .hl{color:var(--band-accent)}
.hero p.lead{font-size:18px;color:var(--band-text-2);margin:0 0 26px;max-width:60ch}
.hero-spec{
  font-family:var(--z-mono);font-weight:500;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--band-accent);margin-bottom:18px;
}
.hero-badges{
  display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--band-line-2);
  font-size:14px;color:var(--band-text-2);
}
.hero-badges b{color:var(--band-text);font-weight:600}
.stars{color:var(--band-accent);letter-spacing:2px}

/* estimate card floating on the hero band */
.estimate-card{
  background:var(--card);color:var(--text);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:28px;border-top:4px solid var(--accent-lg);
}
.estimate-card h3{font-size:21px;margin-bottom:6px}
.estimate-card p.sub{color:var(--text-2);font-size:14.5px;margin:0 0 18px}
.addr-row{display:flex;flex-direction:column;gap:10px}
input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:14px 15px;border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);font-size:16px;font-family:var(--z-body);
  background:var(--card);color:var(--text);transition:.15s;min-height:var(--tap);
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent-lg);
  box-shadow:0 0 0 3px rgba(181,98,47,.18);
}
.mini-trust{
  display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;
  color:var(--text-3);font-size:12.5px;font-family:var(--z-mono);letter-spacing:.06em;
}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:32px;padding:52px 0 62px}
  .hero h1{font-size:33px}
}

/* ─────────────────────────  TRUST BAR  ───────────────────────── */
.trustbar{background:var(--raised);border-bottom:1px solid var(--line)}
.trustbar-in{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;padding:18px 0;
  color:var(--text-2);font-size:13.5px;font-family:var(--z-mono);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}
.trustbar-in .ti{display:flex;align-items:center;gap:9px}
.trustbar-in .ti .d{color:var(--accent-lg);font-size:15px}

/* ─────────────────────────  SECTIONS  ───────────────────────── */
section.sec{padding:78px 0}
section.sec.alt{background:var(--raised)}
.eyebrow{color:var(--accent);font-size:11.5px;margin-bottom:12px}
.sec h2{font-size:34px;margin-bottom:14px}
.sec .intro{color:var(--text-2);font-size:17px;max-width:70ch;margin-bottom:38px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}.sec h2{font-size:26px}section.sec{padding:52px 0}}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.card .ic{
  width:48px;height:48px;border-radius:var(--radius-sm);background:var(--accent-soft);
  display:grid;place-items:center;font-size:23px;margin-bottom:15px;
}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--text-2);font-size:15.5px;line-height:1.6;margin:0}

/* ─────────────────────────  STEPS  ───────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{
  position:relative;padding:26px 24px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--accent-lg);
  border-radius:0 var(--radius) var(--radius) 0;
}
.step .n{
  font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.14em;
  color:var(--accent-lg);margin-bottom:10px;
}
.step h3{font-size:18px;margin-bottom:7px}
.step p{color:var(--text-2);font-size:15.5px;margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr}}

/* ─────────────────────────  GUARANTEE GRID  ───────────────────────── */
.guarantees{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.guarantees{grid-template-columns:1fr}}
.gcard{
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent-lg);
  border-radius:0 0 var(--radius) var(--radius);padding:24px 26px;box-shadow:var(--shadow);
}
.gcard .gno{
  font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.14em;
  color:var(--accent);margin-bottom:8px;
}
.gcard h3{font-size:20px;margin-bottom:8px}
.gcard p{color:var(--text-2);font-size:15.5px;line-height:1.6;margin:0}

/* proof strip — the numbers, in mono */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--band-line-2);
  border:1px solid var(--band-line-2);border-radius:var(--radius);overflow:hidden}
.proof .p{background:var(--band-2);padding:24px 20px;text-align:center}
.proof .p .n{
  font-family:var(--z-mono);font-weight:500;font-size:32px;color:var(--band-text);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.proof .p .l{
  font-family:var(--z-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--band-muted);margin-top:8px;
}
@media(max-width:820px){.proof{grid-template-columns:1fr 1fr}}

/* ─────────────────────────  CTA BAND  ───────────────────────── */
.cta-band{
  background:var(--band);color:var(--band-text-2);border-radius:var(--radius);
  border-top:4px solid var(--accent-lg);padding:44px 40px;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:var(--band-text);font-size:29px}
.cta-band p{margin:8px 0 0;color:var(--band-text-2)}
.cta-band .btn-primary{background:var(--accent-lg);color:var(--z-rainier-white)}
.cta-band .btn-primary:hover{background:var(--band-accent);color:var(--z-ink)}
@media(max-width:560px){.cta-band{padding:30px 24px}.cta-band h2{font-size:23px}}

/* ─────────────────────────  AREAS  ───────────────────────── */
.areas{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.area-list{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:9px 15px;border-radius:var(--radius-sm);background:var(--card);
  border:1px solid var(--line-strong);font-family:var(--z-mono);font-weight:500;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
}
.chip.pri{background:var(--accent-soft);border-color:var(--accent-lg);color:var(--accent)}
@media(max-width:900px){.areas{grid-template-columns:1fr}}

/* ─────────────────────────  REVIEWS  ───────────────────────── */
.rev-head{display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap}
.rev-score{font-family:var(--z-mono);font-weight:500;font-size:44px;color:var(--heading);line-height:1}
.review{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.review .q{font-size:15.5px;line-height:1.65;color:var(--text);margin:0 0 14px}
.review .who{font-weight:600;font-size:14px;color:var(--heading)}
.review .who span{color:var(--text-3);font-weight:400}

/* ─────────────────────────  FAQ  ───────────────────────── */
.faq{display:flex;flex-direction:column;gap:10px;max-width:840px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px 20px}
.faq-item summary{
  cursor:pointer;font-family:var(--z-disp);font-weight:800;letter-spacing:-.02em;
  color:var(--heading);font-size:16.5px;padding:17px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";color:var(--accent-lg);font-size:23px;font-weight:700;flex:none}
.faq-item[open] summary:after{content:"\2212"}
.faq-item[open]{border-left:3px solid var(--accent-lg)}
.faq-item p{color:var(--text-2);font-size:15.5px;line-height:1.65;margin:0 0 17px}

/* ─────────────────────────  CONTACT  ───────────────────────── */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.contact .card h3{font-size:22px}
label.fld{
  display:block;font-family:var(--z-mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:16px 0 7px;
}
@media(max-width:900px){.contact{grid-template-columns:1fr}}

/* ─────────────────────────  FOOTER (dark band)  ───────────────────────── */
footer{background:var(--band-deep);color:var(--band-text-2);padding:56px 0 26px;font-size:14.5px}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:32px}
footer .fgrid4{grid-template-columns:1.5fr 1fr 1fr 1.1fr}
footer .fgrid div a{display:inline-block;padding:3px 0;color:var(--band-text-2)}
footer a:hover{color:var(--band-accent)}
footer .fbrand img{height:44px;width:auto;display:block;margin-bottom:16px}
footer h4{
  color:var(--band-text);font-family:var(--z-mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;
}
footer .fphone{
  font-family:var(--z-mono);font-weight:500;letter-spacing:.04em;
  color:var(--band-accent);font-size:16px;
}
footer .licence{
  font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.12em;
  color:var(--band-muted);margin-top:14px;
}
footer .legal{
  border-top:1px solid var(--band-line-2);padding-top:18px;color:var(--band-muted);
  font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
@media(max-width:900px){footer .fgrid4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){footer .fgrid,footer .fgrid4{grid-template-columns:1fr}}

/* ─────────────────────────  STICKY MOBILE BAR  ───────────────────────── */
.mobar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--card);
  border-top:1px solid var(--line-strong);padding:10px 12px;gap:10px;
  box-shadow:0 -6px 20px rgba(10,19,16,.10);
}
.mobar .btn{flex:1}
@media(max-width:900px){.mobar{display:flex}body{padding-bottom:74px}}

/* ─────────────────────────  ESTIMATOR MODAL  ───────────────────────── */
.modal{
  display:none;position:fixed;inset:0;z-index:200;background:rgba(8,15,13,.62);
  backdrop-filter:blur(3px);padding:20px;overflow-y:auto;
}
.modal.open{display:block}
.modal-card{
  max-width:540px;margin:34px auto;background:var(--card);border-radius:var(--radius);
  border-top:4px solid var(--accent-lg);box-shadow:var(--shadow-lg);padding:28px;position:relative;
}
.modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;font-size:24px;
  color:var(--text-3);cursor:pointer;line-height:1;min-height:var(--tap);min-width:var(--tap);
}
.progress{display:flex;gap:6px;margin:4px 0 20px}
.progress .dot{height:4px;flex:1;background:var(--line);border-radius:2px;transition:.3s}
.progress .dot.on{background:var(--accent-lg)}
.m-h2{font-family:var(--z-disp);font-weight:800;letter-spacing:-.025em;color:var(--heading);font-size:22px;margin-bottom:6px}
.m-sub{color:var(--text-2);font-size:14.5px;margin:0 0 18px}
.intent{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--card);cursor:pointer;transition:.15s;
  position:relative;text-align:left;width:100%;font-family:var(--z-body);
}
.opt:hover{border-color:var(--accent-lg);background:var(--accent-soft)}
.opt .ic{
  width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent-soft);
  display:grid;place-items:center;font-size:21px;flex:none;
}
.opt .txt{flex:1}
.opt .txt b{display:block;font-size:15.5px;color:var(--heading);font-weight:600}
.opt .txt span{font-size:13px;color:var(--text-2)}
.opt .chev{margin-left:auto;color:var(--accent-lg);font-size:20px}
.badge{
  position:absolute;top:-10px;right:14px;background:var(--accent-lg);
  color:var(--z-rainier-white);font-size:10px;padding:4px 10px;border-radius:20px;
}
.measure{display:flex;align-items:baseline;gap:8px;justify-content:center}
.measure .big{font-family:var(--z-mono);font-weight:500;font-size:38px;color:var(--heading);font-variant-numeric:tabular-nums}
.measure .unit{font-family:var(--z-mono);font-size:13px;color:var(--text-2);letter-spacing:.1em;text-transform:uppercase}
input[type=range]{width:100%;accent-color:var(--accent-lg)}
.pill-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.pill{
  padding:11px 16px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--card);font-family:var(--z-body);font-size:14.5px;font-weight:500;
  cursor:pointer;color:var(--text);min-height:var(--tap);
}
.pill.on{border-color:var(--accent-lg);background:var(--accent-soft);color:var(--accent)}

/* the range — never a point estimate */
.range-hero{text-align:center;padding:6px 0}
.range-hero .label{
  font-family:var(--z-mono);font-weight:500;font-size:11px;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.14em;
}
.range-hero .amt{
  font-family:var(--z-mono);font-weight:500;font-size:34px;color:var(--heading);
  margin:8px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.range-hero .mid{font-family:var(--z-mono);font-size:12.5px;color:var(--text-3);letter-spacing:.06em}
.range-hero .prod{font-size:14.5px;color:var(--accent);font-weight:600;margin-top:6px}
.ladder{display:flex;flex-direction:column;gap:9px}
.lrow{
  display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
}
.lrow.hi{border-color:var(--accent-lg);background:var(--accent-soft)}
.lrow .n b{display:block;color:var(--heading);font-size:15px;font-weight:600}
.lrow .n span{font-size:12.5px;color:var(--text-2)}
.lrow .amt{font-family:var(--z-mono);font-weight:500;color:var(--heading);font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* method caveat — §1.5, body type, above the number, never a footnote */
.method{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent-lg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 20px;margin:0 0 20px;
  font-size:15px;line-height:1.6;color:var(--text-2);
}
.method b{color:var(--heading);font-weight:600}
.disc{
  font-size:12.5px;color:var(--text-3);margin-top:16px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;line-height:1.55;
}
.m-btn{
  display:block;width:100%;border:none;cursor:pointer;font-family:var(--z-body);
  font-weight:600;font-size:16px;padding:16px;border-radius:var(--radius-sm);
  background:var(--accent-lg);color:var(--z-rainier-white);margin-top:18px;min-height:var(--tap);
}
.m-btn:hover{background:var(--accent)}
.m-ghost{
  background:none;border:none;color:var(--text-3);font-family:var(--z-body);font-weight:500;
  font-size:13.5px;margin-top:10px;cursor:pointer;width:100%;padding:10px;min-height:var(--tap);
}
.hide{display:none!important}

/* ═══════════════  SUB-PAGE COMPONENTS  ═══════════════ */
.subhero{background:var(--band);color:var(--band-text-2);padding:52px 0 58px;position:relative;overflow:hidden}
.subhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.72}
.subhero:before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(8,15,13,.88) 0%,rgba(8,15,13,.62) 46%,rgba(8,15,13,.22) 100%),
             linear-gradient(180deg,rgba(8,15,13,.10) 0%,rgba(8,15,13,.72) 100%);
}
.subhero .wrap{position:relative;z-index:2}
.subhero.has-photo{background:var(--band-deep)}
.crumb{font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--band-muted);margin-bottom:16px}
.crumb a{color:var(--band-accent)}
.crumb a:hover{color:var(--band-text)}
.subhero h1{color:var(--band-text);font-size:40px;margin-bottom:14px;max-width:20ch;line-height:1.12}
.subhero p.lead{font-size:17.5px;color:var(--band-text-2);max-width:66ch;margin:0 0 24px}
.subhero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.subhero .btn-ghost{background:transparent;color:var(--band-text);border:1.5px solid var(--band-line-2)}
.subhero .btn-ghost:hover{background:var(--band-2);border-color:var(--band-accent);color:var(--band-accent)}
.tierbadge{display:inline-block;font-size:11px;padding:6px 12px;border-radius:20px;margin-bottom:16px}
.tb-value{background:var(--band-2);color:var(--band-accent);border:1px solid var(--band-line-2)}
.tb-premium{background:var(--band-2);color:var(--band-text);border:1px solid var(--band-line-2)}
@media(max-width:900px){.subhero h1{font-size:29px;max-width:none}}

.prose{max-width:70ch}
.prose h2{font-size:28px;margin:40px 0 14px}
.prose h3{font-size:22px;margin:32px 0 10px}
.prose p{color:var(--text-2);font-size:17px;line-height:1.7;margin:0 0 18px}
.prose .lead-in{font-size:19px;line-height:1.6;color:var(--text);font-weight:400}
.prose strong{color:var(--heading);font-weight:600}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--text-2);font-size:17px;line-height:1.7}
.prose li{margin:7px 0}
.prose blockquote{
  margin:24px 0;padding:18px 24px;border-left:3px solid var(--accent-lg);
  background:var(--raised);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text);font-size:17px;line-height:1.65;
}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.prose p{font-size:16px}.prose .lead-in{font-size:17.5px}.prose h2{font-size:23px}}

.spec{width:100%;border-collapse:collapse;margin:12px 0 8px;font-size:15.5px}
.spec th,.spec td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);line-height:1.55}
.spec th{width:36%;color:var(--heading);font-weight:600;background:var(--raised);vertical-align:top}
.spec td{color:var(--text-2)}

.checks{list-style:none;padding:0;margin:12px 0;display:grid;gap:12px}
.checks li{position:relative;padding-left:28px;font-size:16px;line-height:1.6;color:var(--text)}
.checks li:before{content:"✔";color:var(--ok);font-weight:700;position:absolute;left:0;top:1px}
.checks.cons li:before{content:"!";color:var(--accent);font-weight:700;left:4px}
.checks strong{color:var(--heading)}
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.subgrid{grid-template-columns:1fr}}

.matgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.matgrid{grid-template-columns:1fr}}
.matcard{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.15s;color:inherit;
}
.matcard:hover{box-shadow:var(--shadow-lg);border-color:var(--accent-lg)}
.matcard .top{padding:24px 26px 6px}
.matcard .tag{font-size:11px;color:var(--accent)}
.matcard h3{font-size:21px;margin:8px 0 10px}
.matcard p{color:var(--text-2);font-size:15.5px;line-height:1.6;margin:0}
.matcard .foot{margin-top:auto;padding:16px 26px 22px;display:flex;align-items:center;justify-content:space-between}
.matcard .go{color:var(--accent);font-weight:600;font-size:14.5px}
.tierpill{font-size:10.5px;padding:5px 11px;border-radius:20px;background:var(--accent-soft);color:var(--accent)}

.cmp-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:var(--radius)}
.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:14.5px;background:var(--card)}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.cmp thead th{font-family:var(--z-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.cmp .rowlabel{font-weight:600;color:var(--heading);background:var(--raised);width:19%}
.cmp .h-typ{background:var(--raised);color:var(--text-2)}
.cmp .h-zen{background:var(--accent);color:var(--z-rainier-white)}
.cmp .h-mal{background:var(--band);color:var(--band-text)}
.cmp .h-typ small,.cmp .h-zen small,.cmp .h-mal small{display:block;font-weight:400;font-size:11px;opacity:.9;margin-top:3px;letter-spacing:.04em}
.cmp td.c-typ{color:var(--text-3);background:var(--bg)}
.cmp td.c-zen{background:var(--accent-soft);color:var(--text)}
.cmp td.c-mal{background:var(--raised);color:var(--text)}
.cmp tr:last-child td{border-bottom:none}
.cmp .mk{font-weight:700}.cmp .mk.x{color:var(--danger)}.cmp .mk.ok{color:var(--ok)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--text-3)}
.legend b{color:var(--text-2);font-size:11px}
.callout{
  background:var(--accent-soft);border:1px solid var(--accent-lg);border-radius:var(--radius-sm);
  padding:18px 22px;margin:24px 0;color:var(--accent);font-size:16px;line-height:1.6;
}
.callout b{color:var(--accent);font-weight:600}
.src{font-size:12px;color:var(--text-3);margin-top:10px}
.src a{color:var(--text-3);text-decoration:underline}

.stepnum{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
@media(max-width:900px){.stepnum{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stepnum{grid-template-columns:1fr}}
.stepnum .st{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent-lg);border-radius:0 0 var(--radius) var(--radius);padding:20px}
.stepnum .st .n{font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:10px}
.stepnum .st b{display:block;font-family:var(--z-disp);font-weight:800;letter-spacing:-.02em;color:var(--heading);margin-bottom:5px;font-size:16px}
.stepnum .st p{color:var(--text-2);font-size:14.5px;line-height:1.55;margin:0}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
@media(max-width:900px){.gal{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gal{grid-template-columns:1fr}}
.gtile{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--band);display:flex;align-items:flex-end;
}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.gtile .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;opacity:.30;z-index:0}
.gtile .cap{
  position:relative;width:100%;padding:14px;z-index:2;color:var(--band-text);font-size:13.5px;font-weight:600;
  background:linear-gradient(transparent,rgba(8,15,13,.88));
}
.gtile .cap span{display:block;font-family:var(--z-mono);font-weight:500;color:var(--band-accent);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.notice{
  background:var(--warn-bg);border:1px solid var(--accent-lg);color:var(--warn);
  border-radius:var(--radius-sm);padding:14px 18px;margin:4px 0 6px;font-size:15px;line-height:1.55;
}
.photoband{
  position:relative;width:100%;aspect-ratio:16/6;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--band);margin:8px 0;
}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;opacity:.28}

.meta{font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.keytable{width:100%;border-collapse:collapse;margin:10px 0;font-size:15.5px}
.keytable th,.keytable td{padding:12px 15px;border:1px solid var(--line);text-align:left;line-height:1.5}
.keytable th{background:var(--raised);color:var(--heading);font-weight:600}
.keytable td{color:var(--text-2)}

.ratebar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--raised);
  border:1px solid var(--line);border-left:3px solid var(--accent-lg);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin-bottom:26px;
}
.ratebar .big{font-family:var(--z-mono);font-weight:500;font-size:40px;color:var(--heading);line-height:1}
.ratebar .stars{color:var(--accent);font-size:18px;letter-spacing:2px}
.revgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:12px}
@media(max-width:900px){.revgrid{grid-template-columns:1fr}}
.revcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.revcard .st{color:var(--accent-lg);font-size:15px;letter-spacing:2px;margin-bottom:10px}
.revcard .q{font-size:16px;color:var(--text);margin:0 0 14px;line-height:1.65}
.revcard .who{font-weight:600;color:var(--heading);font-size:14px}
.revcard .who span{color:var(--text-3);font-weight:400}

.hours{list-style:none;padding:0;margin:0}
.hours li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--text)}
.hours li:last-child{border-bottom:none}
.hours li span{font-family:var(--z-mono);font-weight:500;font-size:13.5px;color:var(--text-2)}

/* GUARDRAILS — Cedar #B5622F is AA-large only (3.99:1). Small type uses
   --accent (Cedar Deep, 5.99:1). Ember / Mist / Wet Slate are dark-field
   colours and appear only inside .hero, .subhero, .cta-band, .proof, footer. */

/* ═══════════  APPROVAL-ROUND ADDITIONS (12 Aug 2026)  ═══════════ */

/* the two-week claim is a schedule, not a guarantee — the caveat rides with it */
.lead-caveat{
  font-size:14.5px;color:var(--band-muted);max-width:60ch;margin:0 0 26px;
  padding-left:14px;border-left:2px solid var(--band-line-2);
}
.ladder-note{
  margin-top:26px;padding:16px 20px;background:var(--raised);
  border-left:3px solid var(--accent-lg);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-2);font-size:15px;max-width:78ch;
}

/* proof strip and guarantee grid at three across */
.proof-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.proof-3{grid-template-columns:1fr}}
.guarantees-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.guarantees-3{grid-template-columns:1fr}}

/* project portal section */
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:960px){.portal-grid{grid-template-columns:1fr;gap:30px}}
.portal-shot img{
  display:block;width:100%;border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
.portal-shot .cap{
  margin:12px 0 0;font-family:var(--z-mono);font-weight:500;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-align:center;
}

/* ============================================================================
   MOTION & MEDIA LAYER — added 2026-08-15
   Photography, reveals, lightbox, compare slider, scroll chrome.
   Every rule resolves to a v2.0 token. Nothing here is load-bearing for
   readability: with JS off or reduced-motion on, all content is visible.
   ========================================================================= */

/* ---- 1. REVEALS --------------------------------------------------------- */
html.z-js [data-reveal]{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
html.z-js [data-reveal="fade"]{transform:none}
html.z-js [data-reveal="left"]{transform:translate3d(-22px,0,0)}
html.z-js [data-reveal="right"]{transform:translate3d(22px,0,0)}
html.z-js [data-reveal="scale"]{transform:scale(.965)}
html.z-js [data-reveal].is-in{opacity:1;transform:none}

/* ---- 2. SCROLL PROGRESS + STUCK HEADER ---------------------------------- */
.z-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:transparent;pointer-events:none}
.z-progress > i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--z-cedar) 0%,var(--z-ember) 100%);
  will-change:transform}
header{transition:box-shadow .3s ease,background-color .3s ease}
header.is-stuck{box-shadow:0 1px 0 var(--band-line),0 10px 30px rgba(8,15,13,.28)}

/* ---- 3. SECTION NAV ----------------------------------------------------- */
.z-secnav{position:sticky;top:72px;z-index:40;background:var(--card);
  border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.z-secnav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0 22px;
  max-width:1120px;margin:0 auto}
.z-secnav a{display:block;padding:13px 15px;white-space:nowrap;text-decoration:none;
  font-family:var(--z-mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.z-secnav a:hover{color:var(--accent)}
.z-secnav a.is-on{color:var(--accent);border-bottom-color:var(--accent-lg)}

/* ---- 4. PHOTO PRIMITIVE ------------------------------------------------- */
/* .ph is a fixed-ratio box painted with the photo's own average colour, so
   there is never a white flash or a layout shift before the image lands.  */
.ph{position:relative;overflow:hidden;background:var(--z-panel);
  border-radius:var(--radius);isolation:isolate}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
/* The blur-up fade is gated on html.z-js. Ungated, a blocked or failed
   site.js leaves every photograph on the site as a flat colour rectangle -
   the placeholder fill with nothing on top of it. The photo is the default;
   the animation is the enhancement. */
/* No opacity fade on photographs at all. Gating it on html.z-js was still one
   dependency too many: it has now twice produced a site of flat colour blocks
   where the photos should be. The placeholder colour prevents the white flash
   and holds the layout; the image simply appears when it decodes. */
.ph-4x3{aspect-ratio:4/3}
.ph-3x2{aspect-ratio:3/2}
.ph-16x9{aspect-ratio:16/9}
.ph-1x1{aspect-ratio:1/1}
.ph-21x9{aspect-ratio:21/9}
.ph-sq{border-radius:0}

/* zoom on hover, only where a pointer exists */
@media (hover:hover){
  .ph-zoom img{transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
  .ph-zoom:hover img.is-loaded{transform:scale(1.055)}
}

/* ---- 5. FIGURE + CAPTION ------------------------------------------------ */
figure.z-fig{margin:0}
figure.z-fig figcaption,.z-cap{
  font-family:var(--z-mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-top:12px;
  padding-left:13px;border-left:2px solid var(--accent-lg);line-height:1.5}
.z-cap-dark{color:var(--band-muted)}

/* ---- 6. HERO PHOTOGRAPHY ------------------------------------------------ */
.hero-bg{opacity:.72;transform:scale(1.06);transform-origin:52% 46%}
.hero.is-cinematic .hero-bg{animation:zdrift 26s ease-in-out infinite alternate}
@keyframes zdrift{from{transform:scale(1.04) translate3d(0,0,0)}
                  to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(92deg,rgba(8,15,13,.86) 0%,rgba(8,15,13,.60) 42%,rgba(8,15,13,.14) 100%),
             linear-gradient(180deg,rgba(8,15,13,0) 62%,rgba(8,15,13,.88) 100%)}
.hero-in{position:relative;z-index:2}
.hero-scroll{position:absolute;left:50%;bottom:20px;z-index:3;transform:translateX(-50%);
  font-family:var(--z-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--band-muted);display:flex;flex-direction:column;align-items:center;gap:7px}
.hero-scroll:after{content:"";width:1px;height:26px;
  background:linear-gradient(180deg,var(--z-cedar),transparent);animation:zpulse 2.4s ease-in-out infinite}
@keyframes zpulse{0%,100%{opacity:.35;height:18px}50%{opacity:1;height:30px}}

/* ---- 7. FULL-BLEED PHOTO BAND ------------------------------------------ */
.z-band{position:relative;isolation:isolate;background:var(--band-deep);
  color:var(--band-text-2);overflow:hidden}
.z-band > img.z-band-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.62;z-index:0}
.z-band:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(8,15,13,.94) 0%,rgba(8,15,13,.86) 38%,rgba(8,15,13,.42) 72%,rgba(8,15,13,.30) 100%)}
.z-band .wrap{position:relative;z-index:2}
.z-band h2{color:var(--band-text)}
.z-band .eyebrow{color:var(--band-accent)}
.z-band p,.z-band .intro,.z-band li{color:var(--band-text-2)}
.z-band .intro{max-width:54ch}
.z-band .z-cap{color:var(--band-muted)}

/* ---- 8. SPLIT: COPY + PHOTO -------------------------------------------- */
.z-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.z-split.is-wide-media{grid-template-columns:1fr 1.25fr}
.z-split.is-flip > :first-child{order:2}

/* ---- 9. MOSAIC GALLERY -------------------------------------------------- */
.z-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.z-filters button{
  font-family:var(--z-mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 15px;border-radius:999px;cursor:pointer;
  background:var(--card);border:1px solid var(--line-strong);color:var(--text-2);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.z-filters button:hover{border-color:var(--accent-lg);color:var(--accent)}
.z-filters button.is-on{background:var(--band);border-color:var(--band);color:var(--band-text)}
.z-filter-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.z-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.z-tile{position:relative;cursor:zoom-in;border-radius:var(--radius);
  overflow:hidden;background:var(--z-panel);margin:0}
/* the wide/full variants keep their own ratio so rows never go ragged */
.z-tile.is-wide{grid-column:span 2;aspect-ratio:auto}
.z-tile.is-wide.ph-3x2{aspect-ratio:3.06/1}
.z-tile.is-full{grid-column:1 / -1;aspect-ratio:auto}
.z-tile.is-full.ph-3x2{aspect-ratio:4.64/1}
.z-tile:focus-visible{outline:3px solid var(--accent-lg);outline-offset:3px}
.z-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 18px 15px;
  background:linear-gradient(180deg,rgba(8,15,13,0),rgba(8,15,13,.9));
  font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--z-rainier-white);
  opacity:0;transform:translateY(7px);transition:opacity .3s ease,transform .3s ease}
@media (hover:none){.z-tile figcaption{opacity:1;transform:none}}
.z-tile:hover figcaption,.z-tile:focus-visible figcaption{opacity:1;transform:none}
.z-tile .z-tile-zoom{position:absolute;top:11px;right:11px;z-index:2;width:31px;height:31px;
  border-radius:50%;background:rgba(8,15,13,.62);color:var(--z-rainier-white);
  display:grid;place-items:center;font-size:15px;opacity:0;transition:opacity .3s ease}
.z-tile:hover .z-tile-zoom{opacity:1}

/* ---- 10. LIGHTBOX ------------------------------------------------------- */
html.z-noscroll{overflow:hidden}
.z-lb{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(8,15,13,.965);backdrop-filter:blur(5px);
  align-items:center;justify-content:center;padding:56px 20px 92px}
.z-lb.is-open{display:flex}
.z-lb-fig{margin:0;max-width:1240px;width:100%;display:flex;flex-direction:column;
  align-items:center;gap:16px}
.z-lb-fig img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:6px;
  box-shadow:0 30px 90px rgba(0,0,0,.6)}
.z-lb-fig figcaption{font-family:var(--z-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--band-text-2);text-align:center;
  padding-left:13px;border-left:2px solid var(--z-cedar)}
.z-lb-x,.z-lb-nav{position:absolute;background:rgba(242,244,241,.09);border:0;cursor:pointer;
  color:var(--z-rainier-white);border-radius:50%;display:grid;place-items:center;
  transition:background .2s ease}
.z-lb-x:hover,.z-lb-nav:hover{background:var(--z-cedar)}
.z-lb-x{top:16px;right:18px;width:44px;height:44px;font-size:27px;line-height:1}
.z-lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:30px;line-height:1}
.z-lb-prev{left:18px}.z-lb-next{right:18px}
.z-lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--z-mono);font-size:11.5px;letter-spacing:.14em;color:var(--band-muted)}
.z-lb-x:focus-visible,.z-lb-nav:focus-visible{outline:3px solid var(--z-ember);outline-offset:2px}

/* ---- 11. BEFORE / AFTER COMPARE ---------------------------------------- */
.z-cmp{position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:3/2;background:var(--z-panel);cursor:ew-resize;user-select:none;touch-action:pan-y}
.z-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.z-cmp-b{clip-path:inset(0 0 0 50%)}
.z-cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;
  background:var(--z-rainier-white);cursor:ew-resize;border:0;padding:0;z-index:3;
  box-shadow:0 0 0 1px rgba(8,15,13,.28)}
.z-cmp-handle:after{content:"";position:absolute;top:50%;left:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:var(--z-rainier-white);box-shadow:0 4px 18px rgba(8,15,13,.42)}
.z-cmp-handle:before{content:"";position:absolute;top:50%;left:50%;z-index:1;
  width:19px;height:11px;margin:-5.5px 0 0 -9.5px;
  background:var(--z-evergreen);
  clip-path:polygon(0 50%,32% 0,32% 34%,68% 34%,68% 0,100% 50%,68% 100%,68% 66%,32% 66%,32% 100%)}
.z-cmp-handle:focus-visible{outline:3px solid var(--z-ember);outline-offset:4px}
.z-cmp-tag{position:absolute;bottom:14px;z-index:2;
  font-family:var(--z-mono);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--z-rainier-white);
  background:rgba(8,15,13,.74);padding:7px 12px;border-radius:5px;pointer-events:none}
.z-cmp-tag.is-a{left:14px}
.z-cmp-tag.is-b{right:14px}

/* ---- 12. PROOF COUNTERS ------------------------------------------------- */
.proof .p .n{font-variant-numeric:tabular-nums}

/* ---- 13. MOBILE NAV PANEL ---------------------------------------------- */
.z-burger{display:none;background:none;border:0;cursor:pointer;padding:10px 8px;
  color:var(--heading);order:9;margin-left:2px}
.z-burger:focus-visible{outline:2px solid var(--accent-lg);outline-offset:2px;border-radius:4px}
.z-burger span{display:block;width:22px;height:2px;background:currentColor;margin:4px 0;
  transition:transform .28s ease,opacity .28s ease}
.z-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.z-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.z-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.z-mobnav{display:none;position:fixed;inset:72px 0 0;z-index:110;background:var(--band);
  padding:26px 22px 110px;overflow-y:auto}
.z-mobnav.is-open{display:block}
.z-mobnav a{display:block;padding:15px 0;color:var(--band-text);text-decoration:none;
  border-bottom:1px solid var(--band-line);font-size:18px}
.z-mobnav a:hover{color:var(--band-accent)}
.z-mobnav .lbl{font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--band-muted);margin:24px 0 4px}

/* ---- 14. RESPONSIVE ----------------------------------------------------- */
@media (max-width:960px){
  .z-split,.z-split.is-wide-media{grid-template-columns:1fr;gap:28px}
  .z-split.is-flip > :first-child{order:0}
  .z-mosaic{grid-template-columns:repeat(2,1fr)}
  .z-tile.is-wide,.z-tile.is-wide.ph-3x2{grid-column:span 2;aspect-ratio:2/1}
  .z-tile.is-full.ph-3x2{aspect-ratio:2/1}
  .z-secnav{top:64px}
}
@media (max-width:640px){
  .z-mosaic{grid-template-columns:1fr}
  .z-tile.is-wide,.z-tile.is-wide.ph-3x2,.z-tile.is-full.ph-3x2{grid-column:span 1;aspect-ratio:3/2}
  .z-lb{padding:52px 12px 76px}
  .z-lb-nav{width:42px;height:42px;font-size:25px}
  .z-lb-prev{left:8px}.z-lb-next{right:8px}
  .hero-scroll{display:none}
}

/* ---- 15. REDUCED MOTION — hard override -------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .ph img{opacity:1 !important;transform:none !important}
  .hero.is-cinematic .hero-bg{animation:none}
}

/* ---- 16. PRINT ---------------------------------------------------------- */
@media print{
  .z-progress,.z-secnav,.z-lb,.mobar,.z-burger,.z-mobnav,.hero-scroll{display:none !important}
  .ph img{opacity:1 !important;position:static;height:auto}
}

/* ---- 17. MONO SECTION NUMBERS (replaces emoji card icons) --------------- */
.card .ic-num,.gcard .ic-num,.step .ic-num{
  font-family:var(--z-mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;
  color:var(--accent);background:none !important;border:0;border-radius:0 !important;
  width:auto;height:auto;line-height:1;
  display:block;padding:0;margin:0 0 14px;position:relative}
.card .ic-num:after{content:"";display:block;width:26px;height:2px;margin-top:9px;
  background:var(--accent-lg)}

/* ---- 18. MOBILE NAV VISIBILITY ----------------------------------------- */
@media(max-width:900px){ .z-burger{display:block} }

/* ============================================================================
   19. READABILITY & CONTRAST CORRECTIONS — 2026-08-15
   Measured with a WCAG contrast pass over 14 rendered pages, against the real
   reading surface (--bg #EAEEE9), not against white.

   Two systemic findings, both fixed here:

   a) --accent-lg (Cedar #B5622F) was carrying the primary CTA and several
      small labels at 3.99:1. Brand v2 §006.2 already says Cedar is AA-large
      only and Cedar Deep is required under 18pt — the site was not applying
      its own rule. Every sub-18pt use of Cedar now resolves to Cedar Deep.

   b) --text-3 (#5C6B64) is documented at 5.60:1, but that is against #FFFFFF.
      On the actual page surface it measures 4.47:1 — a fail. Captions, meta
      and small links now use --text-3-aa, which is the same hue darkened to
      clear 4.5:1 on the surface it is actually printed on.
   ========================================================================= */
:root{
  --text-3-aa:   #49574F;   /* 6.1:1 on --bg, 6.6:1 on --card */
  --accent-press:#7A3E1B;   /* pressed/hover state, stays above 4.5:1 */
}

/* -- a) primary action: Cedar Deep, not Cedar ---------------------------- */
.btn-primary{background:var(--accent);color:var(--z-rainier-white)}
.btn-primary:hover{background:var(--accent-press)}
.cta-band .btn-primary{background:var(--accent)}
.cta-band .btn-primary:hover{background:var(--band-accent);color:var(--z-ink)}

/* small type that was set in Cedar */
.step .n,
.card .ic-num,
th.h-zen,
.gcard .gno{color:var(--accent)}

/* -- b) small type on the light surface ---------------------------------- */
.z-cap,
figure.z-fig figcaption,
.z-tile figcaption,          /* sits on a scrim, kept for consistency */
.review .who span,
.trustbar-in,
.legend b{color:var(--text-3-aa)}
.stars{color:var(--accent)}
.band-surface .stars,.hero .stars,.z-band .stars,footer .stars{color:var(--band-accent)}
.z-tile figcaption{color:var(--z-rainier-white)}   /* white on dark scrim - already passes */

/* ============================================================================
   20. MEASURE — the single biggest readability problem found
   Body copy was running 84-137 characters per line. Comfortable measure is
   45-75. Everything that is a column of prose is now capped; grid and table
   cells are explicitly exempt so layouts do not collapse.
   ========================================================================= */
.sec p, .prose p, .prose li, .lead-in, .ladder-note, .intro{max-width:68ch}
.prose h2,.prose h3{max-width:34ch}
.faq-item p{max-width:68ch}
.hero p.lead{max-width:54ch}
.subhero p.lead{max-width:60ch}
/* exemptions: anything inside a sized column already has its own measure */
.grid3 p,.grid4 p,.steps p,.guarantees p,.card p,.gcard p,.step p,
.z-split p,.areas p,.contact p,.review .q,
td p,th p,.portal-grid p,.z-tile figcaption,.cta-band p{max-width:none}

/* ============================================================================
   21. PREMIUM PASS — 2026-08-15
   Findings from a full-page critique. The site read as generic because almost
   every block was the same object: a rounded, bordered, drop-shadowed white
   card floating on a tinted field, stacked four sections deep with an
   identical eyebrow / headline / intro rhythm. Fixes below, in order of how
   much each one was costing.
   ========================================================================= */

/* -- 1. SHARPEN. 14px radius on everything reads consumer-app, not
      contractor. Architectural work wants a tighter corner. ------------- */
:root{ --radius:5px; --radius-sm:4px;
       --shadow:none;
       --shadow-lg:0 18px 50px rgba(10,19,16,.10); }

/* -- 2. DE-CARD. Cards were border + shadow + fill + radius, four devices
      doing one job. One hairline and a flat fill is enough. ------------- */
.card,.step,.gcard{
  box-shadow:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
}
/* height:100% only inside the feature grids — on a standalone card it
   inflates the box to the grid row and opens dead space underneath. */
.grid3 > .card,.grid4 > .card,.steps > .step,.guarantees > .gcard{
  height:100%;display:flex;flex-direction:column;
}
.step{border-left:2px solid var(--accent-lg)}
.grid3,.grid4,.steps,.guarantees{align-items:stretch}
.card:hover,.gcard:hover{border-color:var(--line-strong)}

/* -- 3. TYPE. Headlines were timid against the amount of air around them,
      and body copy was small and light. Widen the gap between them. ----- */
.sec h2{font-size:40px;line-height:1.1;letter-spacing:-.022em;max-width:20ch}
.sec .intro{font-size:17.5px;line-height:1.62;color:var(--text-2);margin-bottom:44px}
.card p,.gcard p,.step p{font-size:16px;line-height:1.62}
.card h3,.gcard h3{font-size:19.5px;letter-spacing:-.012em}
.eyebrow{margin-bottom:16px}
@media(max-width:900px){.sec h2{font-size:30px;max-width:none}}

/* -- 4. RHYTHM. Every section had identical padding, so the page read as
      one long undifferentiated column. --------------------------------- */
.sec{padding:88px 0}
.sec.alt{padding:96px 0}
@media(max-width:900px){.sec,.sec.alt{padding:60px 0}}

/* -- 5. MOSAIC. The wide-tile variant never lined up against its 3:2
      neighbours and left a stranded tile on the last row. Uniform grid. - */
.z-tile.is-wide,.z-tile.is-full,
.z-tile.is-wide.ph-3x2,.z-tile.is-full.ph-3x2{
  grid-column:span 1;aspect-ratio:3/2}
@media(max-width:960px){
  .z-tile.is-wide,.z-tile.is-wide.ph-3x2,.z-tile.is-full.ph-3x2{grid-column:span 1}}

/* -- 6. SERVICE-AREA CHIPS. A pill cloud is the most generic component on
      the internet. Set them as a typographic list instead. -------------- */
.area-list{gap:0;display:block;columns:2;column-gap:34px;max-width:420px}
.chip{display:block;background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:11px 0;font-family:var(--z-mono);font-weight:500;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);
  break-inside:avoid}
.chip.pri{color:var(--accent);border-bottom-color:var(--accent-lg)}
.chip.pri:after{content:" ·";color:var(--accent-lg)}

/* -- 7. PORTAL + REVIEWS. Both had a short left column against a tall right
      one with the grid vertically centred, opening a dead band. --------- */
.portal-grid,.areas,.contact,.z-split{align-items:start}
.portal-shot{position:relative}
.rev-head{align-items:baseline}
.rev-score{font-size:66px;letter-spacing:-.03em}

/* -- 8. CTA BAND. Was a rounded box with a cedar cap rail. Full-bleed
      reads more deliberate and stops it looking like another card. ------ */
.cta-band{border-radius:var(--radius);border-top-width:3px}
.cta-band h2{font-size:31px;letter-spacing:-.02em;max-width:22ch}

/* -- 9. TRUST BAR. The ◆ glyph row was pure decoration. ---------------- */
.trustbar-in .ti .d{display:none}
.trustbar-in{gap:0;flex-wrap:wrap}
.trustbar-in .ti{font-family:var(--z-mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:0 22px;
  border-left:1px solid var(--line)}
.trustbar-in .ti:first-child{border-left:0;padding-left:0}

/* -- 10. PROOF STRIP. Numbers are the strongest thing on the page; they
       were set at the same weight as everything else. ------------------- */
.proof .p .n{font-size:42px;letter-spacing:-.02em}
.proof .p{padding:30px 20px}

/* -- 11. FOCUS. Keyboard focus was the browser default on a dark band. -- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--accent-lg);outline-offset:2px;border-radius:2px}
.hero a:focus-visible,.subhero a:focus-visible,.z-band a:focus-visible,
footer a:focus-visible{outline-color:var(--band-accent)}

/* estimator option numerals — the picker used emoji, now mono numerals */
.opt .ic-num{font-family:var(--z-mono);font-weight:500;font-size:11.5px;
  letter-spacing:.16em;color:var(--accent);background:none !important;
  border:0;border-radius:0 !important;width:auto;height:auto;
  display:block;margin:0 14px 0 0;align-self:center}
.opt .ic-num:after{display:none}

/* -- 12. The card was still the only object on the page. Inside a feature
      grid it does not need to be a box at all — a cedar rule and the
      section field is enough, and it lets the type breathe. Standalone
      .card (forms, address panels, callouts) keeps its container. ------ */
.grid3 > .card,.grid4 > .card,.steps > .step{
  background:none;border:0;border-top:2px solid var(--accent-lg);
  border-radius:0;padding:22px 0 0;box-shadow:none}
.grid3 > .card:hover,.grid4 > .card:hover{border-top-color:var(--accent)}
.guarantees > .gcard{background:none;border:0;border-top:2px solid var(--line-strong);
  border-radius:0;padding:22px 0 0}
.grid3,.grid4{gap:34px}
.steps{gap:34px}
.guarantees{gap:34px}

/* the schedule caveat was yet another tinted box */
.ladder-note{background:none;border:0;border-left:2px solid var(--line-strong);
  padding:4px 0 4px 18px;margin-top:34px;max-width:68ch;
  font-size:15px;line-height:1.62;color:var(--text-2)}

/* headline measure — 20ch broke short headlines onto three lines */
.sec h2{max-width:24ch}
.z-band h2{max-width:19ch}

/* -- 13. Final trim ------------------------------------------------------ */
.chip.pri:after{content:none}                 /* stray trailing middot */
.card .ic-num:after{display:none}             /* the rule above replaced it */
.card .ic-num{margin-bottom:10px}
.areas .card,.contact .card,.z-split .card{align-self:start}
.areas{grid-template-columns:1.35fr .8fr}

/* reviews block was four lines of type against half a screen of nothing */
.rev-wrap{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:start}
.rev-wrap .rev-head{flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.rev-wrap .rev-score{font-size:88px;line-height:.9}
.rev-wrap .intro{margin-bottom:26px}
@media(max-width:820px){.rev-wrap{grid-template-columns:1fr;gap:22px}
  .rev-wrap .rev-score{font-size:64px}}

/* portal: the two columns were far apart in height, opening a dead band */
.portal-grid{gap:56px}

/* The typography block above sets .sec .intro to --text-2; the photo band is
   also a .sec, so its intro was inheriting dark type onto a dark image
   (measured 2.14:1). Same specificity, so this has to come last. */
.sec.z-band .intro,.sec.z-band p,.z-band .intro,.z-band p{color:var(--band-text-2)}
.sec.z-band .z-cap{color:var(--band-muted)}

/* ============================================================================
   22. OFFER + PROOF, CARRIED TO EVERY LANDING PAGE — 2026-08-15
   The core offer ("The Two-Week Roof") and every proof point lived only on the
   homepage, while the 43 service, material and city pages — where Meta and
   search traffic actually lands — carried a bare estimator CTA with no promise
   and no evidence. Both now appear once per page, identically worded.
   ========================================================================= */
.offer-line{
  font-family:var(--z-mono);font-weight:500;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--band-accent);line-height:1.75;
  margin:0 0 22px;max-width:70ch}
.proofbar{background:var(--band-2);border-bottom:1px solid var(--band-line)}
.proofbar .wrap{display:flex;flex-wrap:wrap;gap:0;padding-top:0;padding-bottom:0}
.proofbar .pb{
  font-family:var(--z-mono);font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--band-muted);
  padding:15px 20px;border-left:1px solid var(--band-line)}
.proofbar .pb:first-child{border-left:0;padding-left:0}
.proofbar .pb b{color:var(--band-text);font-weight:600}
@media(max-width:820px){
  .proofbar .pb{padding:11px 14px;font-size:10.5px}
  .proofbar .pb:first-child{padding-left:0}
}

/* ============================================================================
   23. TILE CAPTIONS BECOME REAL CAPTIONS — 2026-08-15
   Captions were a hover-revealed overlay sitting on a gradient scrim inside
   the photo. Two problems: on any device the browser reports as hover:none
   they were permanently on, printed over the image; and a hover-only caption
   is invisible to touch, to keyboard and to anyone scanning the page. Good
   editorial sites set the caption in type beneath the frame and leave it
   there. So do we now.
   ========================================================================= */
.z-tile{position:relative;cursor:zoom-in;background:none;border-radius:0;overflow:visible}
.z-tile .ph{border-radius:var(--radius);overflow:hidden}
.z-tile figcaption{
  position:static;opacity:1;transform:none;background:none;padding:0;
  margin-top:11px;font-family:var(--z-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3-aa);
  line-height:1.5;transition:color .2s ease}
.z-tile:hover figcaption{color:var(--accent)}
.z-tile:focus-visible{outline:none}
.z-tile:focus-visible .ph{outline:3px solid var(--accent-lg);outline-offset:3px}
.z-tile .z-tile-zoom{background:rgba(8,15,13,.55);backdrop-filter:blur(2px)}
.z-mosaic{align-items:start}

/* ============================================================================
   24. NAV — the dropdowns were opening on any pointer pass, including while
   scrolling back up past the header. Suppress hover-open during scroll.
   ========================================================================= */
html.is-scrolling .nav-links .has-sub:hover > .sub{display:none}

/* ============================================================================
   25. PHOTO BAND — light type on a photograph needs its own scrim, not the
   band's. Measured 2.14:1 before; the column now carries its own gradient.
   ========================================================================= */
.z-band .wrap{position:relative}
.z-band .wrap:before{
  content:"";position:absolute;top:-40px;bottom:-40px;left:-40px;right:38%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(96deg,rgba(8,15,13,.92) 0%,rgba(8,15,13,.86) 55%,rgba(8,15,13,0) 100%)}
@media(max-width:900px){
  .z-band .wrap:before{right:-40px;
    background:linear-gradient(180deg,rgba(8,15,13,.9),rgba(8,15,13,.82))}}
.z-band .intro{color:var(--z-rainier-white)}

/* ============================================================================
   26. EDITORIAL LAYER — 2026-08-15
   Patterns borrowed from award-listed architecture and studio sites, chosen
   for ones that survive without WebGL, a scroll-hijack library or a 3D scene,
   because none of those belong on a roofing site that has to convert on a
   phone in a driveway.

   What was taken:
   - a real type scale rather than ad-hoc sizes
   - a grid that breaks deliberately instead of one column width everywhere
   - a running section index, the way a studio numbers its projects
   - motion that is staggered and weighted, not uniform
   - micro-interactions on the things worth touching
   ========================================================================= */

/* -- 26.1 TYPE SCALE. Fluid, 1.25 ratio, clamped so it holds on a phone. -- */
:root{
  --t-display: clamp(38px, 5.4vw, 62px);
  --t-h2:      clamp(28px, 3.4vw, 44px);
  --t-h3:      clamp(19px, 1.5vw, 22px);
  --t-lead:    clamp(17px, 1.35vw, 19.5px);
}
.hero h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.03em;max-width:15ch}
.subhero h1{font-size:clamp(30px,3.9vw,50px);line-height:1.06;letter-spacing:-.028em;max-width:17ch}
.sec h2,.z-band h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.026em}
.card h3,.gcard h3,.step h3{font-size:var(--t-h3);letter-spacing:-.012em}
.hero p.lead,.subhero p.lead{font-size:var(--t-lead);line-height:1.58}

/* -- 26.2 THE RUNNING INDEX. A studio numbers its sections; it also gives
      the eye a fixed left edge to travel down. -------------------------- */
body{counter-reset:zsec}
.sec:has(.eyebrow){counter-increment:zsec}
.sec .eyebrow:before{
  content:counter(zsec, decimal-leading-zero);
  margin-right:14px;padding-right:14px;
  border-right:1px solid var(--line-strong);
  color:var(--text-3-aa)}
.z-band .eyebrow:before,.hero .eyebrow:before{
  border-right-color:var(--band-line-2);color:var(--band-muted)}

/* -- 26.3 THE GRID BREAKS. The mosaic escapes the 1120px measure and runs
      to the viewport edge — the one place the page stops being a column. */
.z-mosaic{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 clamp(22px,4vw,64px);
  grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.1vw,18px)}
@media(max-width:960px){.z-mosaic{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.z-mosaic{grid-template-columns:1fr}}

/* -- 26.4 MOTION WITH WEIGHT. One easing curve, staggered across siblings,
      slower and longer than the default so it reads deliberate. --------- */
html.z-js [data-reveal]{
  transform:translate3d(0,26px,0);
  transition:opacity .78s cubic-bezier(.16,.84,.36,1),
             transform .78s cubic-bezier(.16,.84,.36,1)}
html.z-js [data-stagger]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .66s cubic-bezier(.16,.84,.36,1),
             transform .66s cubic-bezier(.16,.84,.36,1)}
html.z-js [data-stagger].is-in{opacity:1;transform:none}

/* -- 26.5 MICRO-INTERACTIONS. Underlines that draw, tiles that lift. ---- */
.prose a:not(.btn),.sec p a:not(.btn),.faq-item p a{
  color:var(--accent);text-decoration:none;
  background-image:linear-gradient(var(--accent-lg),var(--accent-lg));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .32s cubic-bezier(.16,.84,.36,1)}
.prose a:not(.btn):hover,.sec p a:not(.btn):hover,.faq-item p a:hover{
  background-size:0% 1px}
.z-tile .ph{transition:transform .5s cubic-bezier(.16,.84,.36,1)}
.z-tile:hover .ph{transform:translateY(-3px)}
.btn{transition:background-color .22s ease,color .22s ease,transform .22s ease}
.btn-primary:active{transform:translateY(1px)}

/* -- 26.6 The header earns its keep once you have scrolled past the hero. */
header.is-stuck{backdrop-filter:saturate(1.1) blur(6px)}

@media (prefers-reduced-motion:reduce){
  .z-tile:hover .ph{transform:none}
  .prose a:not(.btn){transition:none}
}