/* ============================================================================
   Luma — instant quotes for California roofers (a product of Aster National Insurance Group)
   Design system: path2profit donor skin on the Luma palette — amber accent, dark chrome, warm-neutral content (2026-09-08).
   Tokens + components per tools/DESIGN-LANGUAGE.md. Content is visible by
   default; motion.js applies hidden states at runtime only.
   ============================================================================ */

/* ---------------- fonts (self-hosted) ---------------- */
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans-v12-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans-v12-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/fonts/plus-jakarta-sans-v12-latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-v17-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-v17-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-v17-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------------- tokens ---------------- */
:root{
  --brand-primary:#8A5307;        /* Luma accent-text: AA on white (6.9:1) — links, eyebrows, icon ink */
  --brand-primary-deep:#6E4205;
  --brand-bright:#E08A12;         /* Luma accent: fills and decoration only (2.9:1 on white) */
  --brand-cyan:#FFC24B;           /* gradient stops, dark-band accents (Luma accent-hi) */
  --brand-gold:#FFC24B;
  --brand-navy:#0B0B0D;           /* Luma ground — nav, footer, dark bands */
  --brand-navy-mid:#131316;       /* Luma dark surface */
  --bg-page:#F6F5F2;
  --bg-surface:#fff;
  --bg-alt:#F2F0EB;
  --bg-gradient:linear-gradient(135deg,#0B0B0D 0%,#131316 55%,#1f160a 100%);
  --grad-text:linear-gradient(100deg,#E08A12 10%,#FFC24B 90%);
  --text-primary:#1A1D22;
  --text-secondary:#4D525A;
  --text-muted:#5B6069;
  --border-color:#E3DFD7;
  --border-light:#F2F0EB;
  --accent:#E08A12; --accent-hi:#F7941E; --accent-text:#8A5307; --on-accent:#150D02;
  --ok:#0e7a4b; --warn:#b07514; --warn-text:#7d5410; --bad:#c02626;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:22px;
  --shadow-sm:0 1px 3px rgba(11,11,13,.06);
  --shadow-md:0 4px 24px rgba(224,138,18,.08);
  --shadow-lg:0 14px 40px rgba(11,11,13,.12);
  --font-head:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --container:1140px;
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;position:relative;overflow-x:clip;font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--text-primary);background:var(--bg-page)}
/* body is the positioned, clipped ancestor for the page-shell glow orbs —
   without it the offscreen orbs widen scrollWidth on every subpage */
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.2vw,3.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:700;letter-spacing:-.015em}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--brand-primary)}
a:hover{color:var(--brand-primary-deep)}
:focus-visible{outline:3px solid var(--brand-bright);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-navy);color:#fff;padding:10px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0;color:#fff}

/* gradient text span */
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-primary)}

/* ---------------- ambient glows ---------------- */
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
/* shell-level glows (direct children of body) are fixed: ambient decoration
   that can never contribute layout overflow to the capture surface */
body>.glow{position:fixed}
.g1{width:520px;height:520px;top:-180px;right:-120px;background:rgba(255,194,75,.16)}
.g2{width:420px;height:420px;top:340px;left:-180px;background:rgba(224,138,18,.12)}
.g3{width:300px;height:300px;top:120px;left:40%;background:rgba(255,194,75,.10)}

/* ---------------- nav ---------------- */
#nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
#nav.scrolled{border-bottom-color:var(--border-color);box-shadow:var(--shadow-sm)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
#nav .logo{display:inline-flex;align-items:center;flex:none}
#nav .logo img{width:170px;height:auto}
#navlinks{display:flex;align-items:center;gap:4px;margin-left:auto}
#navlinks a{font-weight:500;font-size:.95rem;color:#4b5d80;text-decoration:none;padding:8px 11px;border-radius:10px;white-space:nowrap;transition:color .2s,background .2s}
#navlinks a:hover{color:var(--brand-navy);background:var(--bg-alt)}
#navlinks a[aria-current="page"]{color:var(--brand-primary)}
#navlinks a i{font-style:normal;font-size:.7rem;font-weight:700;color:var(--brand-bright);margin-right:6px;display:none}
#navlinks .nav-cta{color:#fff;white-space:nowrap;margin-left:8px}
#navlinks .nav-cta:hover{color:#fff;background-position:100% 0}
#menubtn{display:none;margin-left:auto;background:none;border:1px solid var(--border-color);border-radius:10px;padding:10px;cursor:pointer}
#menubtn span{display:block;width:20px;height:2px;background:var(--brand-navy);margin:4px 0;border-radius:2px;transition:transform .2s}

/* ---------------- buttons ---------------- */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:2px;font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.2;padding:14px 26px;border-radius:14px;text-decoration:none;cursor:pointer;border:0;transition:transform .18s,box-shadow .18s,background-color .18s}
.btn-primary{color:#fff;background-image:linear-gradient(120deg,#E08A12,#B36E0E);box-shadow:0 6px 18px rgba(224,138,18,.28)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(224,138,18,.34)}
.btn-secondary{color:var(--brand-navy);background:#fff;border:1px solid var(--border-color);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{color:var(--brand-primary-deep);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cta-link{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:.95rem;color:var(--brand-primary);text-decoration:none}
.cta-link:hover{color:var(--brand-primary-deep);text-decoration:underline}

/* ---------------- layout primitives ---------------- */
main{position:relative;z-index:1}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{position:relative;padding:84px 0}
.section.alt{background:var(--bg-alt);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 48px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-primary);margin-bottom:14px}
.ey-line{width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-cyan),var(--brand-gold))}
h2.st{margin-bottom:.35em}
p.ss{color:var(--text-secondary);font-size:1.06rem;max-width:640px;margin:0 auto}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:clip;text-align:center;padding:96px 24px 80px;background:radial-gradient(1100px 500px at 50% -160px,rgba(255,194,75,.10),transparent 65%),var(--bg-page)}
.hero-inner{position:relative;max-width:860px;margin:0 auto;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border-color);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:500;color:var(--text-secondary);box-shadow:var(--shadow-sm);margin-bottom:26px}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-gold);flex:none;box-shadow:0 0 0 4px rgba(255,194,75,.18)}
.hero .sub{font-size:1.13rem;color:var(--text-secondary);max-width:640px;margin:18px auto 30px}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:44px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px;margin:0 auto}
.kpi{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 10px;box-shadow:var(--shadow-sm)}
.kpi-v{font-family:var(--font-head);font-weight:800;font-size:1.45rem;color:var(--brand-primary);letter-spacing:-.01em}
.kpi-l{font-size:.78rem;font-weight:500;color:var(--text-muted);margin-top:2px}

/* ---------------- page hero (subpages) ---------------- */
.pagehero{position:relative;padding:72px 0 40px;background:radial-gradient(900px 380px at 50% -140px,rgba(255,194,75,.10),transparent 65%),var(--bg-page)}
.pagehero .wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.crumb{font-size:.85rem;color:var(--text-muted);margin-bottom:14px}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--brand-primary)}
.crumb .sep{margin:0 6px;color:var(--border-color)}
.pagehero h1{max-width:760px}
.pagehero .lead{font-size:1.12rem;color:var(--text-secondary);max-width:660px}

/* ---------------- coverage cards ---------------- */
.cov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cov-card{display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:transform .2s,box-shadow .2s;overflow:hidden}
.cov-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cov-main{padding:26px 26px 18px;flex:1}
.cov-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,rgba(224,138,18,.10),rgba(255,194,75,.14));color:var(--brand-primary);margin-bottom:14px}
.cov-icon svg{width:24px;height:24px}
.cov-card h3{font-size:1.22rem;margin-bottom:.35em}
.cov-sub{color:var(--text-secondary);font-size:.97rem;margin-bottom:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{flex:none;white-space:nowrap;font-size:.76rem;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border-color);color:var(--text-secondary)}
.pill.req{background:rgba(224,138,18,.08);border-color:rgba(224,138,18,.25);color:var(--brand-primary)}
.pill.cond{background:rgba(255,194,75,.14);border-color:rgba(176,117,20,.35);color:var(--warn-text)}
.cov-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;border-top:1px solid var(--border-light);background:linear-gradient(180deg,rgba(243,248,252,.4),rgba(243,248,252,.9))}

/* ---------------- why cards ---------------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 22px;transition:transform .2s,box-shadow .2s}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.why-bg-num{position:absolute;top:2px;right:12px;font-family:var(--font-head);font-weight:800;font-size:4.2rem;line-height:1;color:rgba(224,138,18,.06);user-select:none}
.why-bg-num::before{content:attr(data-n)}
.why-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(224,138,18,.10),rgba(255,194,75,.14));color:var(--brand-primary);margin-bottom:14px}
.why-icon-wrap svg{width:22px;height:22px}
.why-card p{font-size:.94rem;color:var(--text-secondary);margin:0}

/* ---------------- process rail ---------------- */
.proc-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.proc-wrap::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--border-color) 0 8px,transparent 8px 16px)}
.proc-step{position:relative;text-align:center;padding:0 6px}
.proc-circle{position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:#fff;border:2px solid rgba(224,138,18,.25);box-shadow:var(--shadow-sm);margin-bottom:14px}
.proc-icon{color:var(--brand-primary);display:inline-flex}
.proc-icon svg{width:22px;height:22px}
.proc-n{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-bright);margin-top:2px}
.proc-step h3{font-size:1.05rem}
.proc-step p{font-size:.92rem;color:var(--text-secondary);margin:0}

/* ---------------- checklist / fact table / callouts ---------------- */
.checklist{list-style:none;margin:0 0 1.2em;padding:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:9px 0}
.checklist li svg{flex:none;margin-top:3px;color:var(--brand-primary)}
.checklist li span{color:var(--text-secondary)}
.fact-table{width:100%;border-collapse:collapse;margin:0 0 1.4em;background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}
.fact-table th,.fact-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border-light);font-size:.95rem;vertical-align:top}
.fact-table th{font-family:var(--font-head);font-weight:700;background:var(--bg-alt);color:var(--brand-navy);white-space:nowrap}
.fact-table tr:last-child th,.fact-table tr:last-child td{border-bottom:0}
.callout{border:1px solid var(--border-color);border-left:4px solid var(--brand-primary);background:#fff;border-radius:var(--radius-md);padding:18px 20px;margin:0 0 1.4em;box-shadow:var(--shadow-sm)}
.callout.warn{border-left-color:var(--brand-gold)}
.callout p:last-child{margin-bottom:0}
.disclaimer{font-size:.83rem;color:var(--text-muted);border-top:1px solid var(--border-light);padding-top:14px;margin-top:26px}

/* ---------------- FAQ ---------------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;background:none;border:0;font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--text-primary);text-align:left;padding:18px 20px;cursor:pointer}
.faq-q::after{content:"+";font-size:1.3rem;color:var(--brand-primary);flex:none;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{display:none;padding:0 20px 18px;color:var(--text-secondary)}
.faq-item.open .faq-a{display:block}

/* ---------------- final CTA band (dark) ---------------- */
.finalcta{position:relative;overflow:hidden;isolation:isolate;background-color:var(--brand-navy);background-image:var(--bg-gradient);color:#fff;text-align:center;padding:84px 24px;margin-top:84px}
.finalcta::before{content:"";position:absolute;inset:auto -140px -260px auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,75,.28),transparent 65%);z-index:-1}
.finalcta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;z-index:-1}
.finalcta h2{color:#fff;max-width:640px;margin:0 auto .4em}
.finalcta .grad-warm{background:linear-gradient(100deg,#FFC24B 5%,#FFC24B 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FFC24B}
.finalcta p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 30px}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.finalcta .btn-primary{background-image:none;background-color:#fff;color:var(--brand-navy);box-shadow:0 8px 26px rgba(0,0,0,.28)}
.finalcta .btn-primary:hover{color:var(--brand-primary-deep)}
.finalcta .btn-ghost{display:inline-flex;align-items:center;font-weight:700;padding:14px 26px;border-radius:14px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.35);transition:background-color .18s,transform .18s}
.finalcta .btn-ghost:hover{background-color:rgba(255,255,255,.1);transform:translateY(-2px)}
.finalcta .micro{font-size:.8rem;color:rgba(255,255,255,.6);margin:22px auto 0}

/* ---------------- calculator widget ---------------- */
.calc{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border-light);background:linear-gradient(180deg,#fff,var(--bg-alt))}
.calc-title{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--brand-navy)}
.calc-progress{display:flex;gap:6px}
.calc-progress i{width:26px;height:5px;border-radius:3px;background:var(--border-color);transition:background .3s}
.calc-progress i.on{background:linear-gradient(90deg,var(--brand-primary),var(--brand-cyan))}
.calc-body{padding:30px 28px 26px;min-height:300px}
.calc-q{font-family:var(--font-head);font-weight:700;font-size:1.3rem;margin-bottom:6px}
.calc-hint{color:var(--text-muted);font-size:.92rem;margin-bottom:20px}
.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt-grid.cols-1{grid-template-columns:1fr}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--bg-alt);border:1.5px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 18px;font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--brand-navy);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.opt small{font-weight:500;font-size:.82rem;color:var(--text-muted)}
.opt:hover{border-color:var(--brand-bright);background:#fff;transform:translateY(-1px)}
.opt.sel{border-color:var(--brand-primary);background:#fff;box-shadow:0 0 0 3px rgba(224,138,18,.12)}
.calc-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:24px}
.calc-back{background:none;border:0;color:var(--text-muted);font-weight:500;cursor:pointer;padding:8px 10px;border-radius:8px}
.calc-back:hover{color:var(--brand-primary);background:var(--bg-alt)}
.calc-skip{background:none;border:0;color:var(--text-muted);font-weight:500;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:8px 10px}
.calc-foot{padding:12px 24px;border-top:1px solid var(--border-light);background:var(--bg-alt);font-size:.76rem;color:var(--text-muted);text-align:center}

/* verdict + result cards */
.verdicts{display:grid;gap:12px;margin:18px 0}
.verdict{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 18px;background:#fff}
.verdict .v-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;margin-top:2px}
.verdict.req{border-left:4px solid var(--brand-primary)}
.verdict.req .v-ico{background:rgba(224,138,18,.1);color:var(--brand-primary)}
.verdict.cond{border-left:4px solid var(--brand-gold)}
.verdict.cond .v-ico{background:rgba(255,194,75,.16);color:var(--warn)}
.verdict.na{border-left:4px solid var(--border-color);opacity:.75}
.verdict.na .v-ico{background:var(--bg-alt);color:var(--text-muted)}
.verdict h3{font-size:1.02rem;margin:0 0 2px}
.verdict p{font-size:.9rem;color:var(--text-secondary);margin:0}
a.verdict{text-decoration:none;color:inherit}
.verdict .v-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;margin-bottom:6px}
.verdict.req .v-tag{background:rgba(224,138,18,.1);color:var(--brand-primary)}
.verdict.cond .v-tag{background:rgba(255,194,75,.16);color:var(--warn-text)}
.verdict.na .v-tag{background:var(--bg-alt);color:var(--text-muted)}

.bench-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,var(--bg-alt));padding:22px 24px;margin:16px 0}
.bench-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-bright);margin-bottom:6px}
.bench-range{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--brand-navy);letter-spacing:-.01em}
.bench-note{font-size:.86rem;color:var(--text-secondary);margin-top:8px}
.bench-fallback{border:1.5px dashed var(--border-color);border-radius:var(--radius-lg);background:var(--bg-alt);padding:22px 24px;margin:16px 0}
.bench-fallback .calc-q{font-size:1.05rem;margin-bottom:6px}
.bench-fallback p{font-size:.92rem;color:var(--text-secondary);margin:0}

/* ---------------- forms ---------------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--brand-navy)}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);background:#fff;border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(224,138,18,.12)}
.field .req-star{color:var(--bad)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--text-secondary);margin:14px 0}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--brand-primary)}
.form-note{font-size:.82rem;color:var(--text-muted)}
#form-success{display:none;border:1px solid rgba(14,122,75,.35);background:rgba(14,122,75,.06);color:var(--ok);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:16px}
#form-success.show{display:block}
/* shown only when the submit endpoint could not be reached and the message
   falls back to the visitor's own mail app — amber, not green: at that point
   nothing has been delivered yet */
#form-fallback{display:none;border:1px solid rgba(176,106,20,.4);background:rgba(176,106,20,.07);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:16px}
#form-fallback.show{display:block}
/* honeypot: reachable by a bot that fills every field, invisible and
   unfocusable for a person, and hidden from screen readers by aria-hidden */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- footer ---------------- */
footer{background-color:var(--brand-navy);color:rgba(255,255,255,.8);margin-top:0;padding:64px 0 28px}
.finalcta+footer{margin-top:0}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-about .logo img{width:170px;height:auto;margin-bottom:14px}
.fb-p{font-size:.9rem;color:rgba(255,255,255,.66);max-width:560px}
.fb-p a{color:rgba(255,255,255,.85)}
.foot-h{font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.fc ul{list-style:none;margin:0;padding:0}
.fc li{margin-bottom:10px}
.fc a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.93rem}
.fc a:hover{color:var(--brand-cyan)}
.foot-btm{display:flex;flex-direction:column;gap:6px;padding-top:22px}
.foot-btm p{margin:0;font-size:.82rem;color:rgba(255,255,255,.6)}
.foot-disc{max-width:720px}
/* Ins. Code 1726: the licensee's name, the word "Insurance" and the license
   number must not be set smaller than the other contact information shown.
   .fb-p (address/phone/email) is .9rem, so the license line matches it rather
   than inheriting .foot-btm p's .82rem. The disclaimer below stays .82rem. */
.foot-btm .foot-license{font-size:.9rem;color:rgba(255,255,255,.75)}
.foot-btm a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-btm a:hover{color:var(--brand-cyan)}
/* Selector is .foot-btm .foot-license, not .foot-license: the existing
   `.foot-btm p` rule is (0,1,1) and would otherwise out-specify a bare
   single-class selector, silently leaving the license line at .82rem. */

/* ---------------- motion helper states ---------------- */
.js-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal{opacity:1;transform:none;transition:none}}

/* shimmer on hero gradient span */
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.grad.shimmer{background-image:linear-gradient(100deg,#E08A12 20%,#FFC24B 40%,#E08A12 60%);background-size:200% 100%;animation:shimmer 6s linear infinite}
@media (prefers-reduced-motion:reduce){.grad.shimmer{animation:none}}

/* ---------------- responsive ---------------- */
/* nav fit tiers: 7 numbered links + tel + CTA cannot fit below ~1280 at full
   size. Tighten progressively, drop the tel on narrow desktops (it stays in
   the mobile menu, footer, and contact page), and hand off to the hamburger
   at 1020 — the width where the row genuinely stops fitting. */
@media (max-width:1439.98px){
  #navlinks a{font-size:.9rem;padding:8px 9px}
}
@media (max-width:1279.98px){
  #navlinks a{font-size:.88rem;padding:7px 8px}
  .nav-tel{display:none}
}
.proc-wrap.cols-3{grid-template-columns:repeat(3,1fr);max-width:960px;margin-left:auto;margin-right:auto}
@media (max-width:980px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .proc-wrap,.proc-wrap.cols-3{grid-template-columns:repeat(2,1fr);gap:30px 22px}
  .proc-wrap::before{display:none}
}
@media (max-width:1020px){
  #menubtn{display:block}
  #navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:8px;background:#fff;border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-lg);padding:16px 20px 20px;margin:0}
  #navlinks.mobile-open{display:flex}
  #navlinks a{background:var(--bg-alt);border:1px solid var(--border-light);border-radius:14px;padding:14px 16px;font-weight:700;font-size:1rem;white-space:normal;color:var(--brand-navy)}
  #navlinks a i{display:inline}
  #navlinks .nav-tel{display:block}
  #navlinks .nav-cta{margin-left:0;text-align:center;justify-content:center;background-image:linear-gradient(120deg,#E08A12,#B36E0E);color:#fff;border:0}
}
@media (max-width:760px){
  .section{padding:64px 0}
  .cov-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .foot-about{grid-column:1 / -1}
  .opt-grid{grid-template-columns:1fr}
  .calc-body{padding:24px 20px 22px}
  .hero{padding:72px 20px 60px}
}
@media (max-width:600px){
  /* stacked fact-table: the nowrap header column forces overflow below 600px */
  .fact-table,.fact-table tbody,.fact-table tr,.fact-table th,.fact-table td{display:block;width:100%}
  .fact-table th{white-space:normal;border-bottom:0;padding-bottom:4px}
  .fact-table td{padding-top:0}
}
@media (max-width:480px){
  .why-grid{grid-template-columns:1fr}
  .proc-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-btns .btn-primary,.cta-btns .btn-ghost,.hero-cta .btn-primary,.hero-cta .btn-secondary,.calc-nav .btn-primary{width:100%}
  .calc-progress i{width:14px}
  .bench-range{font-size:1.6rem}
}

/* ---------------- print ---------------- */
@media print{
  #nav,.finalcta,.glow,footer .fc,#menubtn{display:none!important}
  body{background:#fff;color:#000}
  .finalcta,.section.alt{background:#fff!important}
  .grad,.grad.shimmer,.finalcta .grad-warm{background:none!important;-webkit-text-fill-color:currentColor!important;color:#000}
  footer{background:#fff;color:#000;padding:20px 0}
  .foot-btm p{color:#000}
}

/* ============================================================================
   ==== scroll-film layer (home, html[data-film] only) ====
   Finishing law: white-not-cream chrome, text-shadow + scrims over footage,
   grain+vignette fade at the handoff. The stage is sticky (no GSAP pins), so
   ScrollTrigger ordering is trivially safe. All decoration aria-hidden.
   ============================================================================ */
#film{display:none}
html[data-film] #film{display:block;position:relative;height:560vh;background:#0B0B0D}
.film-stage{position:sticky;top:0;height:100vh;overflow:hidden}
#film-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-grain{position:absolute;inset:-60px;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.film-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(2,8,20,.55) 100%)}
.film-open{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;color:#fff}
.film-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.85);text-shadow:0 1px 22px rgba(0,0,0,.55);margin:0 0 18px}
.film-title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,4.8vw,4.4rem);line-height:1.06;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.6);margin:0}
.film-title em{font-style:normal;background:linear-gradient(100deg,#FFC24B 10%,#FFC24B 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.film-scrollcue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0}
.film-scrollcue::after{content:"";position:absolute;left:50%;top:calc(100% + 8px);width:1px;height:26px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:film-cue 1.8s ease-in-out infinite}
@keyframes film-cue{0%{transform:scaleY(.2);transform-origin:top}55%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}
.film-beat{position:absolute;left:clamp(24px,8vw,120px);top:50%;transform:translateY(-50%);max-width:520px;opacity:0;pointer-events:none}
.film-beat::before{content:"";position:absolute;z-index:-1;inset:-70% -24% -70% -14%;background:radial-gradient(60% 58% at 22% 50%,rgba(4,10,24,.72),rgba(4,10,24,.42) 45%,transparent 78%)}
.film-beat p{font-family:var(--font-head);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.2;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 26px rgba(0,0,0,.55);margin:0}
.film-beat .film-cta{margin-top:22px;pointer-events:auto}
.film-rail{position:absolute;right:clamp(18px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.film-ch{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);text-shadow:0 1px 14px rgba(0,0,0,.5);transition:color .3s}
.film-ch.on{color:#FFC24B}
.film-progress{position:absolute;right:-14px;top:0;width:2px;height:100%;background:rgba(255,255,255,.14);overflow:hidden}
.film-progress::after{content:"";position:absolute;top:0;left:0;width:100%;height:calc(var(--film-p,0)*100%);background:linear-gradient(#FFC24B,#FFC24B)}
/* nav over dark footage */
html[data-film] #nav.on-dark{background:rgba(4,16,36,.42);border-bottom-color:transparent}
html[data-film] #nav.on-dark::before{content:"";position:absolute;inset:0 0 auto 0;height:180%;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(3,10,24,.62),rgba(3,10,24,0))}
html[data-film] #nav.on-dark #navlinks a{color:rgba(255,255,255,.88);text-shadow:0 1px 18px rgba(0,0,0,.55)}
html[data-film] #nav.on-dark #navlinks a:hover{color:#fff;background:rgba(255,255,255,.08)}
html[data-film] #nav.on-dark .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.5))}
/* film-mode hero becomes the warm handoff landing (seam hex set by film.js) */
html[data-film] .hero{background:linear-gradient(180deg,var(--seam-hex,#e8d9b8) 0%,var(--bg-page) 34%),var(--bg-page);padding-top:72px}
html[data-film] .hero .glow{display:none}
/* lite fallback below 1024 keeps today's exact experience (flag never set there) */
@media (prefers-reduced-motion:reduce){.film-scrollcue::after{animation:none}}

/* ==== finishing-law polish (v2 skill: sections below the film must keep the
   film's confidence — vertical presence, scale contrast; dark bands get a
   noise overlay to kill gradient banding). Film-mode-scoped where layout
   changes; banding fix is global (visual only). ==== */
html[data-film] .section{min-height:min(88vh,860px);display:flex;align-items:center}
html[data-film] .section>.container{width:100%}
html[data-film] h2.st{font-size:clamp(1.9rem,3.4vw,2.9rem)}
html[data-film] .hero{min-height:56vh;display:flex;align-items:center;justify-content:center}
.finalcta::after{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:44px 44px,44px 44px,160px 160px}

/* perf: while the nav sits over the animating film, backdrop blur would
   re-blur footage every frame — solid background instead; blur returns
   after the film. Canvas gets its own compositor layer. */
html[data-film] #nav.over-film{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.95)}
html[data-film] #nav.over-film.on-dark{background:rgba(4,16,36,.55)}
#film-canvas{will-change:transform;transform:translateZ(0)}

/* finishing law: the primary CTA is the most confident element on the page —
   resting depth (existing shadow/gradient) + a light sweep on hover */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:44%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.btn-primary:hover::after{left:130%}
@media (prefers-reduced-motion:reduce){.btn-primary::after{display:none}}

/* ==== conversion layer: sticky rate-check dock (business-site pattern) ==== */
#cta-dock{position:fixed;right:18px;bottom:18px;z-index:90;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
#cta-dock.show{transform:none}
#cta-dock .btn-primary{box-shadow:0 10px 30px rgba(11,11,13,.35);padding:13px 22px;font-size:.95rem}
@media (max-width:600px){#cta-dock{right:12px;bottom:12px;left:12px}#cta-dock .btn-primary{width:100%}}
@media print{#cta-dock{display:none}}
/* nav phone link */
.nav-inner>.nav-tel{margin-left:auto}
.nav-tel{font-weight:700;font-size:.95rem;color:var(--brand-navy);text-decoration:none;white-space:nowrap;padding:8px 10px;border-radius:10px}
.nav-tel:hover{color:var(--brand-primary);background:var(--bg-alt)}
html[data-film] #nav.on-dark .nav-tel{color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(0,0,0,.55)}
/* hero trust strip */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px auto 0}
.trust-strip .pill{background:#fff}
/* ==== insight engine ==== */
.why-ask{font-size:.82rem;color:var(--text-muted);margin:-12px 0 18px;padding-left:14px;border-left:3px solid rgba(224,138,18,.25)}
.insight{border:1px solid var(--border-color);border-left:4px solid var(--brand-gold);border-radius:var(--radius-md);background:linear-gradient(180deg,#fffdf7,#fff);padding:14px 16px;margin:10px 0;font-size:.92rem;color:var(--text-secondary)}
.insight strong{color:var(--brand-navy)}
.verdict .v-skip{display:block;font-size:.84rem;color:var(--warn-text);margin-top:6px}
.brief-head{border:1px solid var(--border-color);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(224,138,18,.05),rgba(255,194,75,.08));padding:16px 20px;margin-bottom:14px}
.brief-head h3{margin:0 0 4px;font-size:1.05rem}
.brief-head p{margin:0;font-size:.9rem;color:var(--text-secondary)}
.next-steps{border-top:1px solid var(--border-light);margin-top:16px;padding-top:14px}
.next-steps ol{margin:8px 0 0;padding-left:20px;color:var(--text-secondary);font-size:.93rem}
.next-steps li{margin-bottom:6px}
/* ask-a-producer box (AI concierge plug point; dark until endpoint set) */
.ask-box{margin-top:16px;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:#fff;padding:16px 18px}
.ask-box p{font-size:.9rem;color:var(--text-secondary);margin:0 0 10px}
.ask-row{display:flex;gap:10px}
.ask-row input{flex:1;font-family:var(--font-body);font-size:.95rem;border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:10px 12px}
.ask-row input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(224,138,18,.12)}
.ask-row .btn-primary{padding:10px 18px;font-size:.9rem}
.ask-a{margin-top:10px;font-size:.92rem;color:var(--text-secondary);border-left:3px solid var(--brand-cyan);padding-left:12px;display:none}
.ask-a.show{display:block}

/* ==== coverage browser (digestible card-system pattern) ==== */
.cov-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 20px;margin-bottom:20px}
.cov-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cov-chips-label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
.cov-chip{font-family:var(--font-body);font-weight:700;font-size:.88rem;color:var(--brand-navy);background:var(--bg-alt);border:1.5px solid var(--border-color);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.cov-chip:hover{border-color:var(--brand-bright)}
.cov-chip.on{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.cov-count{margin:0;font-size:.85rem;font-weight:500;color:var(--text-muted)}
.cov-card{transition:transform .2s,box-shadow .2s,opacity .3s,filter .3s}
.cov-card.dim{opacity:.55;filter:saturate(.45)}
.cov-card.dim:hover{transform:none;box-shadow:var(--shadow-md)}
.cov-meta{text-align:center;font-size:.88rem;color:var(--text-muted);margin:18px 0 0}
@media (max-width:600px){.cov-toolbar{justify-content:center}.cov-count{width:100%;text-align:center}}

/* image-led coverage cards: picture -> plain line -> CTA */
.cov-img{margin:0;aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--border-light)}
.cov-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.cov-card:hover .cov-img img{transform:scale(1.04)}
.cov-card.dim .cov-img img{transform:none}
@media (prefers-reduced-motion:reduce){.cov-img img{transition:none}.cov-card:hover .cov-img img{transform:none}}

/* ==== coverage configurator rig ==== */
.cov-rig{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:22px}
.rig-sentence{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.rig-line{font-family:var(--font-head);font-weight:700;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:2;color:var(--brand-navy);margin:0}
.rig-seg{display:inline-flex;background:var(--bg-alt);border:1.5px solid var(--border-color);border-radius:999px;padding:3px;margin:0 6px;vertical-align:middle}
.rig-opt{font-family:var(--font-body);font-weight:700;font-size:.78em;line-height:1.2;color:var(--text-secondary);background:none;border:0;border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.rig-opt:hover{color:var(--brand-navy)}
.rig-opt.on{background:var(--brand-primary);color:#fff}
.rig-note{font-size:.85rem;color:var(--text-muted);margin:14px 0 0}
.rig-stack{background:linear-gradient(160deg,#fff, var(--bg-alt));border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:20px 22px}
.rig-stack-h{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-bright);margin:0 0 12px}
.rig-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.rig-slot{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1.5px dashed var(--border-color);border-radius:var(--radius-md);padding:12px 6px;opacity:.42;transition:opacity .3s,border-color .3s,background .3s}
.rig-slot.on{opacity:1;border-style:solid;border-color:rgba(224,138,18,.35);background:#fff}
.rig-slot-ico{display:inline-flex;color:var(--brand-primary)}
.rig-slot-ico svg{width:22px;height:22px}
.rig-slot-t{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--brand-navy)}
.rig-slot-s{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.rig-slot.on .rig-slot-s{color:var(--brand-primary)}
@keyframes rig-stamp{0%{transform:scale(.82) rotate(-3deg)}55%{transform:scale(1.06) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
.rig-slot.stamp{animation:rig-stamp .38s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.rig-slot.stamp{animation:none}}
.rig-verdict{font-size:.92rem;color:var(--text-secondary);border-left:3px solid var(--brand-gold);padding-left:12px;margin:0 0 16px;min-height:3.2em}
.rig-cta{width:100%;text-align:center}
@media (max-width:900px){.cov-rig{grid-template-columns:1fr}.rig-line{line-height:2.2}}
@media (max-width:480px){.rig-slots{grid-template-columns:repeat(2,1fr)}}

/* red-team fixes: conditional slot state, coarse-pointer targets */
.rig-slot.cond{border-style:dashed;border-color:rgba(176,117,20,.45)}
.rig-slot.cond .rig-slot-s{color:var(--warn-text)}
@media (pointer:coarse){.rig-opt{min-height:44px;padding:10px 16px}.rig-seg{gap:3px}}
.calc-body:focus{outline:none}


/* ---- Guides: long-form article prose -------------------------------------
   Added 2026-08-19 for /guides/. Long-form needed paragraph rhythm that no
   existing class provided; everything here inherits the tokens above rather
   than introducing new colors or fonts. Scoped to .guide so no other page
   can be affected. */
.guide{max-width:47rem;margin:0}   /* left-aligned to match .pagehero, not centered */
.guide p{font-size:1.0625rem;line-height:1.75;color:var(--text-secondary);margin:0 0 1.15rem}
.guide h2{font-family:var(--font-head);font-size:1.5rem;line-height:1.3;color:var(--text-primary);
  margin:2.6rem 0 .9rem;letter-spacing:-.01em}
.guide h3{font-family:var(--font-head);font-size:1.15rem;color:var(--text-primary);margin:1.9rem 0 .6rem}
.guide h2:first-child,.guide h3:first-child{margin-top:0}
.guide strong{color:var(--text-primary);font-weight:600}
.guide a{color:var(--brand-primary);text-decoration:underline;text-underline-offset:2px}
.guide a:hover{color:var(--brand-primary-deep)}
.guide ul,.guide ol{margin:0 0 1.15rem;padding-left:1.25rem}
.guide li{font-size:1.0625rem;line-height:1.7;color:var(--text-secondary);margin-bottom:.4rem}
.guide blockquote{margin:1.5rem 0;padding:.9rem 1.15rem;border-left:3px solid var(--brand-primary);
  background:var(--bg-alt);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.guide blockquote p{margin:0;color:var(--text-primary)}
.guide-related{margin-top:2.4rem;padding:1.15rem 1.3rem;background:var(--bg-alt);border:1px solid var(--border-color);border-radius:var(--radius-lg)}
.guide-related h2{font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 .6rem}
.guide-related ul{margin:0;padding-left:1.1rem}
.guide-related li{font-size:1rem;margin-bottom:.3rem}
.guide-sources{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--border-color)}
.guide-sources h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);margin:0 0 .75rem}
.guide-sources li{font-size:.875rem;line-height:1.6;word-break:break-word}
/* Guide index cards */
.guide-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:2rem}
.guide-card{display:block;padding:1.4rem;background:var(--bg-surface);border:1px solid var(--border-color);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-decoration:none;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.guide-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--brand-bright)}
.guide-card h3,.guide-card h2{font-family:var(--font-head);font-size:1.0625rem;line-height:1.4;
  color:var(--text-primary);margin:0 0 .5rem}
.guide-card p{font-size:.9375rem;line-height:1.6;color:var(--text-secondary);margin:0}
.guide-card .cta-link{margin-top:.85rem;display:inline-block}

/* ==== Luma chrome (2026-09-08) — amber accent, dark nav/footer, warm-neutral content ==== */
.btn-primary{color:var(--on-accent);background-image:linear-gradient(120deg,#F7941E,#E08A12);box-shadow:0 6px 18px rgba(224,138,18,.28)}
.btn-primary:hover{color:var(--on-accent);box-shadow:0 10px 24px rgba(224,138,18,.34)}
.btn-primary::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent)}
.btn-primary:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn-secondary{color:var(--brand-primary)}
#nav{background:rgba(11,11,13,.92);border-bottom:1px solid rgba(255,255,255,.06)}
#nav.scrolled{border-bottom-color:rgba(255,255,255,.1);box-shadow:0 4px 24px rgba(0,0,0,.35)}
.lq-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#F3F2F0}
.lq-mark{width:34px;height:34px;flex:none}
.lq-word{font-family:var(--font-head);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:#F3F2F0;line-height:1}
.nav-tel{color:#F3F2F0}
.nav-tel:hover{color:#FFC24B;background:rgba(255,255,255,.06)}
.skip{background:#F7941E;color:#150D02}
footer{background-color:#0B0B0D}
footer .lq-brand{margin-bottom:14px}
footer .lq-mark{width:40px;height:40px}
footer .lq-word{font-size:1.6rem}
.finalcta .btn-primary{background-image:none;background-color:#F7941E;color:#150D02}
.finalcta .btn-primary:hover{color:#150D02}
.grad.shimmer{background-image:linear-gradient(100deg,#E08A12 20%,#FFC24B 40%,#E08A12 60%)}
:focus-visible{outline-color:var(--accent-text)}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,138,18,.18)}

/* ==== photo hero + the license field (owner: "put that picture of the roof back in front") ==== */
.hero-photo{color:#fff;padding:112px 24px 88px;background:#0B0B0D url(/assets/img/hero-roof.webp) center 40%/cover no-repeat}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.66) 0%,rgba(11,11,13,.42) 45%,rgba(11,11,13,.84) 100%)}
.hero-photo .hero-inner{position:relative;z-index:1}
.hero-photo h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero-photo .grad.shimmer{background-image:linear-gradient(100deg,#FFC24B 15%,#F7941E 50%,#FFC24B 85%);color:#FFC24B}
.hero-photo .sub{color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.35);margin-bottom:26px}
.hero-photo .hero-badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#fff;box-shadow:none}
.hero-photo .badge-dot{background:#FFC24B;box-shadow:0 0 0 4px rgba(255,194,75,.22)}
.lq-form{display:flex;gap:10px;justify-content:center;width:100%;max-width:620px;margin:0 auto}
.lq-form input{flex:1;min-width:0;font-family:var(--font-body);font-size:1.1rem;padding:15px 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.97);color:var(--text-primary)}
.lq-form input::placeholder{color:#6b6f78}
.lq-form input:focus{outline:none;border-color:#FFC24B;box-shadow:0 0 0 3px rgba(255,194,75,.4)}
.lq-form .btn-primary{white-space:nowrap;flex:none;font-size:1.05rem}
.lq-err{margin:12px auto 0;max-width:620px;font-size:.92rem;font-weight:600;color:#FFC24B}
.lq-err a{color:#fff}
.hero-legal{margin:22px 0 0;font-size:.78rem;color:rgba(255,255,255,.7)}
/* mascot slot — add `background-image:url(/assets/img/luma-mascot.webp)` here when the file lands */
.hero-mascot{position:absolute;right:max(24px,calc((100% - var(--container))/2));bottom:0;width:min(30vw,380px);height:92%;z-index:1;pointer-events:none;background:no-repeat bottom center/contain}
@media (max-width:1100px){.hero-mascot{display:none}}
@media (max-width:600px){.lq-form{flex-direction:column}.lq-form .btn-primary{width:100%}.hero-photo{padding:88px 20px 64px}}

/* ==== the page extends: quote stages ==== */
#lq-flow:empty{display:none}
.lq-stage{padding:28px 24px 0}
.lq-stage:last-child{padding-bottom:72px}
.lq-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:28px 28px 26px}
.lq-h{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 .35em;color:var(--brand-navy)}
.lq-h:focus{outline:none}
.lq-for{display:block;font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--text-secondary);margin-top:4px}
.lq-hint{color:var(--text-secondary);margin:0 0 18px}
.lq-q{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--brand-navy);margin:18px 0 4px}
.lq-stage[data-done] .lq-card{opacity:.78}
.lq-stage[data-done] .btn-primary,.lq-stage[data-done] .opt,.lq-stage[data-done] .calc-back{opacity:.5;cursor:default;transform:none;box-shadow:none}
.lq-stage[data-done] .opt.sel{opacity:.9}
.lq-figures{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 6px}
.lq-figures .bench-card{margin:0}
.lq-down .bench-range{color:var(--accent-text)}
.lq-sub{font-size:.85rem;color:var(--text-secondary);margin-top:4px}
.lq-fine{margin-top:22px;padding-top:16px;border-top:1px solid var(--border-light);font-size:.82rem;line-height:1.55;color:var(--text-muted)}
.lq-fine p{margin:0 0 8px}
.lq-fine-t{font-family:var(--font-head);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--text-secondary)}
.lq-legal{font-weight:600;color:var(--text-secondary)}
.lq-plan{margin:2px 0 14px;font-size:.95rem;color:var(--text-secondary)}
.lq-plan-l{font-weight:700;color:var(--brand-navy)}
.lq-purchase-sub{margin:12px 0 0;font-size:.88rem}
.gq-card{margin:0 0 4px}
.gq-card th{white-space:normal;width:34%}
.pill.bad{background:rgba(192,38,38,.08);border-color:rgba(192,38,38,.3);color:var(--bad)}
.gq-assume{margin:6px 0 10px;padding-left:18px}
.gq-assume li{margin-bottom:3px}
.calc-nav .calc-skip{text-align:left}
@media (max-width:600px){.lq-figures{grid-template-columns:1fr}.lq-card{padding:22px 18px}.lq-stage{padding:18px 14px 0}}

/* ==== brand overlay: luma-chrome (kit) ==== */
/* ============================================================================
   Luma chrome overlay — measured from "LUMA high res.jpg" (7040x2560), 2026-09-09
   Concatenate AFTER shared/assets/css/site.css. Wins by source order at equal
   specificity; no !important anywhere.

   Measured source palette (k-means over 5.36M glyph pixels + luminance bands):
     ground          #F9FFFF   deepest azure  #125890
     deep azure      #1F64A0   core azure     #3E8AD1  (largest cluster, 26.8%)
     body azure      #43A2EA   bright azure   #4DC3F0
     hot cyan fleck  #65ECF7   pale highlight #A4DAF5
     rake highlight  #C0E5F8   rim keyline    #D2F5FC
   Glyph hue is 195-215 deg (azure) with a cyan lobe at 180-195. There are no
   violet flecks in the source: 15 px out of 5.36M fall in H225-300.

   Scope: colour only. No layout, spacing, radius, font or animation token is
   touched, and the prefers-reduced-motion guards in site.css are left intact.
   ============================================================================ */

/* ---------------- tokens ---------------- */
:root{
  /* text-safe azure: 6.97:1 on #fff, 6.47:1 on --bg-page (was #8A5307 @ 6.32:1) */
  --brand-primary:#0F5C99;
  --brand-primary-deep:#0A4576;      /* 9.88:1 on #fff — link/cta hover */
  --brand-bright:#1476C2;            /* fills, focus ring, hover borders — 4.77:1 */
  --brand-cyan:#63E7F8;              /* measured hot-cyan fleck — dark-band accent, 13.22:1 on navy */
  --brand-gold:#1789BE;              /* light-ground decoration: dots, left borders — 3.72:1 */
  --brand-navy:#050E19;              /* deep blue-black (hue 209, matching the mark) */
  --brand-navy-mid:#0B1B2B;
  --bg-page:#F2F7FB;                 /* the logo's cool near-white, held off #fff for card separation */
  --bg-surface:#fff;
  --bg-alt:#E8F0F7;
  --bg-gradient:linear-gradient(135deg,#050E19 0%,#0B1B2B 55%,#0E2E4A 100%);
  /* chrome sweep: deep azure -> azure -> narrow white-blue rake -> azure -> deep */
  --grad-text:linear-gradient(100deg,#0D5490 0%,#1476C2 22%,#2E9AE0 38%,#7FD4F4 44%,#2E9AE0 50%,#1476C2 68%,#0B4A80 100%);
  --text-primary:#101A26;
  --text-secondary:#46535F;
  --text-muted:#566372;
  --border-color:#D3E1EC;
  --border-light:#E8F0F7;
  --accent:#1476C2; --accent-hi:#4FC4EE; --accent-text:#0F5C99; --on-accent:#F4FBFF;
  /* --ok / --warn / --warn-text / --bad stay amber/green/red: they are semantic,
     not brand, and now read as genuine contrast against a blue system. */
  --shadow-sm:0 1px 3px rgba(5,14,25,.07);
  --shadow-md:0 4px 24px rgba(15,92,153,.10);
  --shadow-lg:0 14px 40px rgba(5,14,25,.14);
}

/* ============================================================================
   Hard-coded colour rules in site.css that no token reaches. Selectors are
   repeated verbatim so they win on source order at identical specificity.
   ============================================================================ */

/* ---- ambient glow orbs (site.css L74-76) — amber bloom to blue bloom ---- */
.g1{background:rgba(99,231,248,.16)}
.g2{background:rgba(20,118,194,.14)}
.g3{background:rgba(111,197,236,.12)}

/* ---- nav (site.css L84, L571): #navlinks a was #4b5d80 on a near-black nav
        = 2.97:1, a live contrast failure. Cooled AND fixed to 11.35:1. ---- */
#nav{background:rgba(5,14,25,.92);border-bottom:1px solid rgba(159,227,248,.08)}
#nav.scrolled{border-bottom-color:rgba(159,227,248,.14);box-shadow:0 4px 24px rgba(0,0,0,.4)}
#navlinks a{color:rgba(226,241,252,.82)}
#navlinks a:hover{color:var(--brand-navy);background:#E8F0F7}
#navlinks a[aria-current="page"]{color:var(--brand-cyan)}
#navlinks a i{color:var(--brand-cyan)}
#menubtn{border-color:rgba(159,227,248,.28)}
#menubtn span{background:#E8F4FD}
.lq-brand{color:#E8F4FD}
.lq-word{color:#E8F4FD}
.nav-tel{color:#E8F4FD}
.nav-tel:hover{color:var(--brand-cyan);background:rgba(159,227,248,.10)}
.skip{background:var(--accent-hi);color:#04121F}
.skip:focus{color:#04121F}

/* ---- primary button (site.css L96-97, L528, L568-570) ------------------
   Deep azure chrome. Gradient is dark enough end-to-end that --on-accent
   clears 4.5:1 on both stops (4.53 / 8.20). ---- */
.btn-primary{color:var(--on-accent);background-image:linear-gradient(120deg,#1B76C4,#0C4E86);box-shadow:0 6px 18px rgba(15,92,153,.30)}
.btn-primary:hover{color:var(--on-accent);box-shadow:0 10px 26px rgba(15,92,153,.38)}
.btn-primary::after{background:linear-gradient(100deg,transparent,rgba(207,243,253,.40),transparent);transform:skewX(-18deg)}
@media (prefers-reduced-motion:reduce){.btn-primary::after{display:none}}
.btn-secondary{color:var(--brand-primary)}
.btn-secondary:hover{color:var(--brand-primary-deep)}
#navlinks .nav-cta{color:#fff}
#navlinks .nav-cta:hover{color:#fff}
@media (max-width:1020px){
  #navlinks a{color:var(--brand-navy)}
  #navlinks .nav-cta{background-image:linear-gradient(120deg,#1B76C4,#0C4E86);color:#fff;border:0}
}

/* ---- focus ring (site.css L64, L590) ---- */
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

/* ---- hero + page hero radial washes (site.css L115, L127) ---- */
.hero{background:radial-gradient(1100px 500px at 50% -160px,rgba(99,231,248,.16),transparent 65%),var(--bg-page)}
.pagehero{background:radial-gradient(900px 380px at 50% -140px,rgba(99,231,248,.16),transparent 65%),var(--bg-page)}
.badge-dot{background:var(--brand-gold);box-shadow:0 0 0 4px rgba(23,137,190,.20)}

/* ---- icon tiles + soft brand tints (site.css L141, L147-148, L155, L157, L165) ---- */
.cov-icon{background:linear-gradient(135deg,rgba(20,118,194,.10),rgba(99,231,248,.16))}
.why-icon-wrap{background:linear-gradient(135deg,rgba(20,118,194,.10),rgba(99,231,248,.16))}
.why-bg-num{color:rgba(15,92,153,.07)}
.proc-circle{border:2px solid rgba(20,118,194,.26)}
.pill.req{background:rgba(20,118,194,.08);border-color:rgba(20,118,194,.28);color:var(--brand-primary)}
/* .pill.cond / .verdict.cond keep the semantic amber: with the brand now blue,
   pairing amber text with a blue tint would have read as a colour collision. */
.pill.cond{background:rgba(176,117,20,.12);border-color:rgba(176,117,20,.35);color:var(--warn-text)}
.cov-foot{background:linear-gradient(180deg,rgba(232,240,247,.4),rgba(232,240,247,.9))}

/* ---- final CTA dark band (site.css L197, L200, L585-586) ---- */
.finalcta::before{background:radial-gradient(circle,rgba(99,231,248,.24),transparent 65%)}
.finalcta .grad-warm{background:linear-gradient(100deg,#63E7F8 5%,#9FE3F8 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#63E7F8}
.finalcta .btn-primary{background-image:none;background-color:var(--accent-hi);color:#04121F;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.finalcta .btn-primary:hover{color:#04121F}
.finalcta .btn-ghost{border-color:rgba(159,227,248,.38)}
.finalcta .btn-ghost:hover{background-color:rgba(159,227,248,.12)}

/* ---- forms (site.css L224, L261, L469, L589) ---- */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(15,92,153,.16)}
.ask-row input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(15,92,153,.16)}
.opt.sel{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(15,92,153,.16)}
.consent input{accent-color:var(--brand-primary)}
#form-success{border-color:rgba(14,122,75,.35);background:rgba(14,122,75,.06)}
/* #form-fallback stays amber on purpose — it fires when nothing was delivered. */

/* ---- verdict cards (site.css L236, L238, L245-246) ---- */
.verdict.req .v-ico{background:rgba(20,118,194,.12);color:var(--brand-primary)}
.verdict.req .v-tag{background:rgba(20,118,194,.12);color:var(--brand-primary)}
.verdict.cond .v-ico{background:rgba(176,117,20,.14);color:var(--warn)}
.verdict.cond .v-tag{background:rgba(176,117,20,.14);color:var(--warn-text)}

/* ---- footer (site.css L578-584) ---- */
footer{background-color:var(--brand-navy)}
.footer-grid{border-bottom-color:rgba(159,227,248,.14)}

/* ---- H1 gradient + shimmer (site.css L310, L587) ------------------------
   The rake peak (#8FDDF6) dips under 3:1 on the page ground across roughly
   one fifth of the sweep — that is the chrome. Today's amber sweep is under
   3:1 across its entire width, so this is a net gain. Reduced-motion guard
   from site.css L311 is re-stated so it cannot be lost in concatenation. ---- */
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-primary)}
.grad.shimmer{background-image:linear-gradient(100deg,#0D5490 12%,#1B7ACB 30%,#3AA6E6 39%,#8FDDF6 43%,#3AA6E6 47%,#1B7ACB 56%,#0D5490 74%);background-size:200% 100%}
@media (prefers-reduced-motion:reduce){.grad.shimmer{animation:none}}

/* ---- insight / brief / rig (site.css L454-455, L458, L508) ---- */
.why-ask{border-left-color:rgba(20,118,194,.28)}
.insight{border-left-color:var(--brand-gold);background:linear-gradient(180deg,#F4FAFE,#fff)}
.brief-head{background:linear-gradient(135deg,rgba(20,118,194,.05),rgba(99,231,248,.10))}
.rig-slot.on{border-color:rgba(20,118,194,.38)}
/* .rig-slot.cond keeps the semantic amber border */

/* ---- scroll-film layer (site.css L390, L400, L402, L410) ---- */
html[data-film] #film{background:var(--brand-navy)}
.film-title em{background:linear-gradient(100deg,#63E7F8 10%,#BFEEFC 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.film-ch.on{color:var(--brand-cyan)}
.film-progress::after{background:linear-gradient(#63E7F8,#2E9AE0)}
html[data-film] .hero{background:linear-gradient(180deg,var(--seam-hex,#c9dfee) 0%,var(--bg-page) 34%),var(--bg-page)}
html[data-film] #nav.over-film{background:rgba(5,14,25,.95)}
html[data-film] #nav.over-film.on-dark{background:rgba(5,14,25,.6)}

/* ---- photo hero (site.css L596-605) ---- */
.hero-photo{background:#050E19 url(/assets/img/hero-roof.webp) center 40%/cover no-repeat}
.hero-photo::before{background:linear-gradient(180deg,rgba(5,14,25,.68) 0%,rgba(5,14,25,.44) 45%,rgba(5,14,25,.86) 100%)}
.hero-photo .grad.shimmer{background-image:linear-gradient(100deg,#63E7F8 15%,#BFEEFC 40%,#4FB4E8 62%,#63E7F8 85%);color:#63E7F8}
.hero-photo .badge-dot{background:var(--brand-cyan);box-shadow:0 0 0 4px rgba(99,231,248,.24)}
.lq-form input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(99,231,248,.4)}
.lq-err{color:var(--brand-cyan)}

/* ---- print: keep the existing flatten, restated so concatenation order
        cannot leave a blue gradient printing as transparent text ---- */
@media print{
  .grad,.grad.shimmer,.finalcta .grad-warm,.film-title em{background:none;-webkit-text-fill-color:currentColor;color:#000}
}
/* Integration addendum — rules the overlay had not re-declared, caught by
   `verify`'s legacy-literal check. Concatenated after tokens.css. */

/* site.css L442: the floating CTA dock's shadow is the amber skin's neutral near-black.
   Every other shadow in this palette is blue-tinted (--shadow-md), so this one follows. */
#cta-dock .btn-primary{box-shadow:0 10px 30px rgba(5,14,25,.38);padding:13px 22px;font-size:.95rem}

/* --- the owner's wordmark artwork replaces the mark+word lockup ---------------
   .lq-brand is a flex row; with the pair collapsed into one <img> the gap is dead
   space. Heights match what the old lockup occupied: 34px nav, 40px footer. */
.lq-brand{gap:0}
.lq-logo{height:30px;width:auto;display:block;flex:none}
footer .lq-logo{height:38px}
@media (max-width:600px){.lq-logo{height:26px}}
/* Hero for a site with no trade photograph yet (gate L-K2). The chrome gradient rather than
   another trade's roof: a plumber must never land on a roofing photograph.
   site.css paints the hero as `#0B0B0D url(hero-roof.webp)` and lays a near-black scrim over it
   with ::before. Both are re-declared here: the photo is dropped, and the scrim moves from the
   amber skin's near-black to this palette's navy so the H1 shadow and the badge still sit right.

   Six of the eight sites use this hero, so it is the largest single area of colour in the system —
   every stop below is a value tokens.css already DECLARES — `--brand-navy` #050E19,
   `--brand-primary-deep` #0A4576, `--brand-primary` #0F5C99, and the `--brand-cyan` #63E7F8 fleck in the
   glow — not merely one the header documents. It previously carried #0B3A6B / #0F6DBB /
   rgba(53,198,244) — approximated blues from before the wordmark file existed, none of them in the
   palette, which is what made the photo-less sites read as a different brand from the roofing pair.

   White text over the composite never drops below 6.60:1 (worst point: the gradient's light end
   under the scrim's 0.34 band with the glow at full strength). Re-check with the same arithmetic
   bin/check-contrast.py uses if any stop or alpha moves. */
.hero-photo{background-image:none;background-color:#050E19;background:linear-gradient(135deg,#050E19 0%,#0A4576 45%,#0F5C99 100%)}
.hero-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,25,.62) 0%,rgba(5,14,25,.34) 45%,rgba(5,14,25,.82) 100%)}
/* ::after does not exist in site.css, so it needs its own content and box */
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 70% 20%,rgba(99,231,248,.20),transparent 60%)}