/* Light and dark mode (Direction B, Nashville Drywall Repair brand board tokens). Round 2: 2026-10-30.
   Default follows the device setting; a saved choice wins. theme-init (inline in <head>) sets html[data-theme] before first paint.
   Light: white page with a pale grey herringbone through the whole page, surface #F4F6F9, text #1A1A1A, muted #6B7280 (#4B5563 on cards), CTA #0B3D91.
   Dark: charcoal #1A1A1A page with the brand herringbone through the whole page, surface #23272E, text #FFFFFF, muted #C7CCD3, CTA #0B3D91 with a 40% slate edge.
   The herringbone is one fixed layer (body::before); section fills are transparent so it never stops at a section edge. */

/* Toggle button (all pages) */
.top-cta{align-items:center}
@media (max-width:420px){.top-cta .btn{padding-left:12px;padding-right:12px}.top-cta{gap:5px}}
@media (max-width:359px){.top-cta .top-link{display:none}}
.quote-brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.est-theme{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:40}
.estimator-body .est-header{padding-right:52px}
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:background-color .3s,color .3s,border-color .3s!important}
@media (prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle .ti{transition:none}}

/* ===== Light mode base layer (brand tokens) ===== */
html[data-theme="light"]{color-scheme:light;background:#FFFFFF;
  --ink:#FFFFFF;--ink-2:#ffffff;--white:#1A1A1A;--light:#4B5563;--slate:#4B5563;--steel:#4B5563;--warm:#0B3D91;--warm-fill:#0B3D91;
  --glass:rgba(255,255,255,.74);--line:rgba(26,26,26,.14)}
html[data-theme="light"] body{background:var(--ink);color:var(--white)}

/* header */
html[data-theme="light"] .top{background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.6));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-theme="light"] .top-solid{background:rgba(255,255,255,.9);border-bottom-color:rgba(26,26,26,.1)}
html[data-theme="light"] .brand img[src*="mark.svg"]{filter:brightness(0) saturate(100%) invert(10%) sepia(40%) saturate(2000%) hue-rotate(205deg) brightness(.6)}
html[data-theme="light"] .top-link{color:#1A1A1A;text-decoration-color:rgba(11,61,145,.6)}
html[data-theme="light"] .top-link:hover{color:var(--warm)}

/* buttons */
html[data-theme="light"] .btn-solid{background:#0B3D91;color:#fff;box-shadow:0 8px 20px -10px rgba(11,61,145,.6)}
html[data-theme="light"] .btn-solid:hover{background:#072557}
html[data-theme="light"] .btn-ghost{color:#1A1A1A;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.65));border:1px solid rgba(26,26,26,.22);box-shadow:inset 0 1px 0 #fff,0 4px 12px -6px rgba(26,26,26,.25)}
html[data-theme="light"] .btn-ghost::before{display:none}
html[data-theme="light"] .btn-ghost:hover{border-color:rgba(26,26,26,.45);background:#fff}
html[data-theme="light"] .sec-lede a.btn-solid,html[data-theme="light"] .prose a.btn-solid,html[data-theme="light"] .how-copy a.btn-solid,html[data-theme="light"] .prose button.btn-solid{color:#fff}

/* text */
html[data-theme="light"] .lede{color:#1A1A1A}
html[data-theme="light"] #walkthrough .lede{color:#e5e9f0}
html[data-theme="light"] .sec-lede a,html[data-theme="light"] .prose a,html[data-theme="light"] .how-copy a,html[data-theme="light"] .callout a{color:#0B3D91;text-decoration-color:rgba(11,61,145,.6)}
html[data-theme="light"] .rev figcaption strong,html[data-theme="light"] body.home .how-more a{color:#1A1A1A}

/* section backgrounds: soft brand tints instead of deep navy */
html[data-theme="light"] .quote,html[data-theme="light"] .sub-hero,html[data-theme="light"] .intro,html[data-theme="light"] body.home .intro{background:radial-gradient(110% 80% at 85% 0%,rgba(11,61,145,.12),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(11,61,145,.08),transparent 65%),var(--ink)}
html[data-theme="light"] .reviews,html[data-theme="light"] .svc{background:radial-gradient(110% 70% at 15% 0%,rgba(11,61,145,.09),transparent 60%),var(--ink)}
html[data-theme="light"] .areas{background:radial-gradient(100% 70% at 10% 10%,rgba(11,61,145,.08),transparent 60%),#F4F6F9}
html[data-theme="light"] body.home{--glow-warm:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(11,61,145,.11),transparent 60%);--glow-cool:radial-gradient(ellipse 70% 50% at 15% 80%,rgba(11,61,145,.10),transparent 70%)}
html[data-theme="light"] body.home .living-backdrop::after{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.93) 45%,rgba(255,255,255,.97) 100%)}
html[data-theme="light"] .motion-bg-drift{opacity:.05;filter:invert(1)}

/* glass cards (cards, reviews, forms, FAQ) */
html[data-theme="light"] .card,html[data-theme="light"] .rev,html[data-theme="light"] .form{color:#1A1A1A;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.78))!important;border:1px solid rgba(26,26,26,.12)!important;box-shadow:inset 0 1px 0 #fff,0 14px 34px -18px rgba(26,26,26,.35),0 2px 6px -2px rgba(26,26,26,.10)!important}
html[data-theme="light"] .card::before,html[data-theme="light"] .rev::before,html[data-theme="light"] .form::before{opacity:.35}
html[data-theme="light"] .rev::after,html[data-theme="light"] .form::after,html[data-theme="light"] .card::after{opacity:.5}
html[data-theme="light"] a.card:hover{border-color:rgba(11,61,145,.35)!important}
html[data-theme="light"] .rev-sample{border-color:rgba(26,26,26,.2)!important}
html[data-theme="light"] .step-list li{background:#fff;border-color:rgba(26,26,26,.12)}
html[data-theme="light"] .tilt-sheen::after,html[data-theme="light"] body.home .tilt-card::after{background:radial-gradient(260px circle at var(--sheen-x) var(--sheen-y),rgba(11,61,145,.08),transparent 55%)}
html[data-theme="light"] .card.motion-lift.is-in{box-shadow:0 22px 50px -20px rgba(26,26,26,.35)!important}
html[data-theme="light"] body.home .area-chips a{background:#fff;color:#1A1A1A;box-shadow:0 2px 8px -4px rgba(26,26,26,.25);border-color:rgba(26,26,26,.14)}
html[data-theme="light"] body.home .area-chips li.lit a{border-color:rgba(11,61,145,.5);box-shadow:0 0 18px rgba(11,61,145,.17)}
html[data-theme="light"] body.home .faq-acc details[open]{box-shadow:0 0 24px rgba(11,61,145,.12);border-color:rgba(11,61,145,.35)}
html[data-theme="light"] .living-prop img,html[data-theme="light"] .motion-svg-prop{filter:drop-shadow(0 12px 18px rgba(26,26,26,.28))}

/* forms */
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{color:#1A1A1A;background:#fff;border-color:rgba(26,26,26,.32)}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#6B7280}
html[data-theme="light"] select{background-image:linear-gradient(45deg,transparent 50%,#4B5563 50%),linear-gradient(135deg,#4B5563 50%,transparent 50%)}
html[data-theme="light"] .comment-form input,html[data-theme="light"] .comment-form textarea{background:#fff}

/* reviews page */
html[data-theme="light"] .rv-hero{background:radial-gradient(90% 60% at 80% 0%,rgba(11,61,145,.12),transparent 65%),radial-gradient(70% 60% at 0% 100%,rgba(11,61,145,.09),transparent 65%),var(--ink)}
html[data-theme="light"] .rv-card{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.75));border-color:rgba(26,26,26,.12);box-shadow:inset 0 1px 0 #fff,0 24px 60px -28px rgba(26,26,26,.4)}
html[data-theme="light"] .rv-btn{border-color:rgba(26,26,26,.16);box-shadow:0 12px 28px -14px rgba(26,26,26,.35),0 2px 6px rgba(26,26,26,.08)}
html[data-theme="light"] .rv-share{color:#1A1A1A;border-color:rgba(26,26,26,.22);background:#fff;box-shadow:0 4px 12px -6px rgba(26,26,26,.25)}
html[data-theme="light"] .rv-empty{border-color:rgba(11,61,145,.45);background:rgba(11,61,145,.06)}
html[data-theme="light"] .rv-empty-title{color:#1A1A1A}

/* ===== Dark zone: the 3D walkthrough stays cinematic in both modes ===== */
html[data-theme="light"] #walkthrough{--ink:#1A1A1A;--ink-2:#23272E;--white:#fff;--light:#C7CCD3;--slate:#CBD5E1;--steel:#64748B;--warm:#CBD5E1;--glass:rgba(35,39,46,.82);--line:rgba(203,213,225,.22);color:#fff;background:#1A1A1A}
html[data-theme="light"] #walkthrough .btn-solid{background:#fff;color:#1A1A1A;box-shadow:none}
html[data-theme="light"] #walkthrough .btn-ghost{color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08) 45%,rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme="light"] #walkthrough .btn-ghost::before{display:block}

/* ===== Estimator (Liquid Glass, light) ===== */
html[data-theme="light"] .estimator-body{--g-fill:linear-gradient(160deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.8) 55%,rgba(255,255,255,.72) 100%);--g-edge:rgba(26,26,26,.12);
  --g-hi:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(26,26,26,.04);--g-shadow:0 18px 44px -22px rgba(26,26,26,.4),0 2px 8px rgba(26,26,26,.08);
  --g-sel:linear-gradient(160deg,rgba(11,61,145,.16),rgba(11,61,145,.07));
  background:radial-gradient(110% 70% at 85% 0%,rgba(11,61,145,.12),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(11,61,145,.09),transparent 65%),#FFFFFF;color:#1A1A1A}
html[data-theme="light"] .estimator-body .est-progress{background:rgba(26,26,26,.05);border-color:rgba(26,26,26,.08)}
html[data-theme="light"] .estimator-body .est-progress span,html[data-theme="light"] .estimator-body .est-progress span.on{background:rgba(26,26,26,.14)}
html[data-theme="light"] .estimator-body .est-progress span::before{background:linear-gradient(90deg,#0B3D91,#0B3D91)}
html[data-theme="light"] .estimator-body .est-hero-illus{border-color:rgba(26,26,26,.1)}
html[data-theme="light"] .estimator-body .btn-solid{color:#fff;border-color:#0B3D91;background:linear-gradient(180deg,#0B3D91,#0B3D91);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -12px rgba(11,61,145,.7)}
html[data-theme="light"] .estimator-body .btn-ghost{color:#1A1A1A;border-color:rgba(26,26,26,.2);background:linear-gradient(160deg,#fff,rgba(255,255,255,.8));text-shadow:none;box-shadow:inset 0 1px 0 #fff,0 4px 12px -6px rgba(26,26,26,.25)}
html[data-theme="light"] .estimator-body .est-ref-card,html[data-theme="light"] .estimator-body .est-tex-card,html[data-theme="light"] .estimator-body .est-time-tile,html[data-theme="light"] .estimator-body .est-q-card,html[data-theme="light"] .estimator-body .est-type-card{color:#1A1A1A;border-color:rgba(26,26,26,.14);background:linear-gradient(160deg,#fff,rgba(255,255,255,.82));box-shadow:inset 0 1px 0 #fff,0 4px 14px -8px rgba(26,26,26,.3)}
html[data-theme="light"] .estimator-body .est-ref-card.on,html[data-theme="light"] .estimator-body .est-tex-card.on,html[data-theme="light"] .estimator-body .est-time-tile.on,html[data-theme="light"] .estimator-body .est-q-grid .est-q-card.on,html[data-theme="light"] .estimator-body .est-type-card.on{color:#1A1A1A;border-color:#0B3D91;background:var(--g-sel);box-shadow:0 0 0 3px rgba(11,61,145,.22)}
html[data-theme="light"] .estimator-body .est-type-card svg,html[data-theme="light"] .estimator-body .est-ref-card svg{filter:drop-shadow(0 3px 6px rgba(26,26,26,.2))}
html[data-theme="light"] .estimator-body .est-field input,html[data-theme="light"] .estimator-body .est-field textarea,html[data-theme="light"] .estimator-body .est-field select{color:#1A1A1A;border-color:rgba(26,26,26,.3);background:#fff;box-shadow:inset 0 1px 2px rgba(26,26,26,.08)}
html[data-theme="light"] .estimator-body .est-field input:focus,html[data-theme="light"] .estimator-body .est-field textarea:focus{border-color:#0B3D91;box-shadow:0 0 0 3px rgba(11,61,145,.2)}
html[data-theme="light"] .estimator-body .est-picked-pill{background:#fff;color:#1A1A1A;box-shadow:0 2px 8px -4px rgba(26,26,26,.3)}
html[data-theme="light"] .estimator-body .est-thumb{border-color:rgba(26,26,26,.16);box-shadow:0 8px 20px -12px rgba(26,26,26,.45)}
html[data-theme="light"] .estimator-body .est-bar{border-color:rgba(26,26,26,.12);background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(244,246,249,.86));box-shadow:inset 0 1px 0 #fff,0 18px 40px -14px rgba(26,26,26,.4)}
html[data-theme="light"] .estimator-body .est-sheet{border-color:rgba(26,26,26,.12);background:linear-gradient(170deg,rgba(255,255,255,.99),rgba(244,246,249,.99));color:#1A1A1A;box-shadow:0 -18px 50px -10px rgba(26,26,26,.35)}
html[data-theme="light"] .estimator-body .est-sheet-head::before{background:rgba(26,26,26,.25)}
html[data-theme="light"] .estimator-body .est-sheet.open .est-sheet-head{background:linear-gradient(#fff,rgba(255,255,255,.92))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="light"] .estimator-body .est-glass-card{background:#fff}
  html[data-theme="light"] .estimator-body .est-bar{background:rgba(255,255,255,.98)}
  html[data-theme="light"] .estimator-body .est-sheet{background:#fff}
  html[data-theme="light"] .estimator-body .btn-ghost{background:#fff}
  html[data-theme="light"] .book-cal-req{background:#fff}
}

/* ===== Quote page /q/ and booking picker (light) ===== */
html[data-theme="light"] .book-cal-req{border-color:rgba(26,26,26,.12);background:linear-gradient(160deg,#fff,rgba(255,255,255,.82));box-shadow:inset 0 1px 0 #fff,0 10px 26px -16px rgba(26,26,26,.35)}
html[data-theme="light"] .book-cal-req-label strong{color:#1A1A1A}
html[data-theme="light"] .book-cal-req-btn{color:#1A1A1A;border-color:rgba(26,26,26,.22);background:#fff;box-shadow:0 3px 10px -6px rgba(26,26,26,.3)}
html[data-theme="light"] .quote-page{background:radial-gradient(120% 80% at 50% 0%,#F4F6F9 0%,var(--ink) 60%)}
html[data-theme="light"] .quote-card{color:#1A1A1A}
html[data-theme="light"] .quote-brand img[src*="lockup"],html[data-theme="light"] .foot img[src*="lockup"]{filter:brightness(0) saturate(100%) invert(14%) sepia(52%) saturate(2400%) hue-rotate(208deg) brightness(88%)}
html[data-theme="light"] .quote-call{color:#fff!important;border-color:transparent}
html[data-theme="light"] .est-tex-card,html[data-theme="light"] .quote-slot,html[data-theme="light"] .book-dchip,html[data-theme="light"] .book-slot{color:#1A1A1A;background:#fff;border-color:rgba(26,26,26,.22)}
html[data-theme="light"] .book-slot.is-off{border-color:rgba(26,26,26,.12);background:rgba(255,255,255,.5)}
html[data-theme="light"] .est-tex-card.on,html[data-theme="light"] .book-dchip.is-on,html[data-theme="light"] .book-slot.is-sel,html[data-theme="light"] .book-slot:has(input:checked){background:rgba(11,61,145,.14);border-color:#0B3D91}
html[data-theme="light"] .book-slot-sel{color:#fff;background:#0B3D91}
html[data-theme="light"] .quote-cal-btn{border-color:rgba(11,61,145,.55);background:rgba(11,61,145,.09);color:#1A1A1A}
html[data-theme="light"] .est-flag-box{background:linear-gradient(145deg,rgba(254,226,226,.9),rgba(254,242,242,.9));border-color:rgba(185,28,28,.4)}
html[data-theme="light"] .est-flag-box p{color:#7f1d1d}
html[data-theme="light"] .book-note{background:rgba(11,61,145,.08);border-color:rgba(11,61,145,.25);color:#1A1A1A}
html[data-theme="light"] .book-notice,html[data-theme="light"] .quote-next{background:rgba(11,61,145,.09);border-color:rgba(11,61,145,.45);color:#1A1A1A}
html[data-theme="light"] .book-deposit,html[data-theme="light"] .book-picked,html[data-theme="light"] .book-day legend,html[data-theme="light"] .book-paybar-pick strong,html[data-theme="light"] .book-range,html[data-theme="light"] .quote-pin{color:#1A1A1A}
html[data-theme="light"] .book-day{background:rgba(255,255,255,.6);border-color:rgba(26,26,26,.12)}
html[data-theme="light"] .book-refund{color:#1A1A1A;border-color:rgba(26,26,26,.16);background:#fff}
html[data-theme="light"] .book-paybar.book-js{background:rgba(255,255,255,.96);border-top-color:rgba(11,61,145,.45);box-shadow:0 -12px 30px -8px rgba(26,26,26,.25);color:#1A1A1A}
/* The estimator's photo analysis animation is a dark "render": keep it dark in both modes */
html[data-theme="light"] .qp{--ink:#1A1A1A;--ink-2:#23272E;--white:#fff;--light:#C7CCD3;--slate:#CBD5E1;--warm:#CBD5E1;--line:rgba(203,213,225,.22);color:#fff}
html[data-theme="light"] .estimator-body .est-swipe-hint{color:#4B5563;opacity:1}
/* Contrast fixes found in the 2026-10-29 mockup audit (both modes) */
html[data-theme="light"] .estimator-body .est-swipe-hint{color:#1A1A1A;opacity:1}
html[data-theme="light"] .rev figcaption span{color:#4B5563}
html:not([data-theme="light"]) .rev figcaption span{color:#C7CCD3}
html[data-theme="dark"] .estimator-body .est-swipe-hint{color:#C7CCD3;opacity:1}
html .rev-sample{opacity:.85!important}
html[data-theme="light"] .rev-sample{color:#4B5563}
body.home .area-chips li:not(.lit){opacity:.62}


/* ===== Brand layer ===== */
html:root{--b-navy:#0B3D91;--b-navy-hover:#072557;
  /* dark band: brushed steel sheen, charcoal fade behind the copy column, chevron showing at about 55% at the edges */
  --b-dark-band:linear-gradient(112deg,transparent 18%,rgba(203,213,225,.07) 38%,rgba(255,255,255,.025) 46%,transparent 60%),radial-gradient(115% 80% at 32% 48%,rgba(26,26,26,.95) 0%,rgba(26,26,26,.8) 42%,rgba(26,26,26,.45) 100%),url(/img/brand/ndr-texture-dark-chevron-tile.svg) 0 0/320px 320px,#1A1A1A}
html:root[data-theme="light"]{background:#fff;
  --ink:#FFFFFF;--ink-2:#F4F6F9;--white:#1A1A1A;--light:#1A1A1A;--slate:#4B5563;--steel:#6B7280;--warm:#0B3D91;--warm-fill:#0B3D91;
  --glass:rgba(244,246,249,.92);--line:#C7CCD3}
html:root:not([data-theme="light"]){background:#1A1A1A;
  --ink:#1A1A1A;--ink-2:#23272E;--white:#FFFFFF;--light:#C7CCD3;--slate:#C7CCD3;--steel:#C7CCD3;--warm:#CBD5E1;
  --glass:rgba(35,39,46,.88);--line:rgba(100,116,139,.5);--b-navy-hover:#0E4BB0}

/* Logos: swap files only (never recolor) */
html:root[data-theme="light"] .brand img[src*="mark.svg"]{content:url(/img/brand/ndr-mark-navy.svg);filter:none}
html:root:not([data-theme="light"]) .brand img[src*="mark.svg"]{content:url(/img/brand/ndr-mark-white.svg)}
html:root[data-theme="light"] .quote-brand img[src*="lockup"],html:root[data-theme="light"] .foot img[src*="lockup"]{content:url(/img/brand/ndr-lockup-horizontal-light-bg.svg);filter:none}
html:root:not([data-theme="light"]) .quote-brand img[src*="lockup"],html:root:not([data-theme="light"]) .foot img[src*="lockup"]{content:url(/img/brand/ndr-lockup-horizontal-dark-bg.svg)}

/* Header */
html:root[data-theme="light"] .top{background:linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.7));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html:root[data-theme="light"] .top-solid{background:rgba(255,255,255,.94);border-bottom:1px solid #C7CCD3}
html:root:not([data-theme="light"]) .top{background:linear-gradient(rgba(26,26,26,.9),rgba(26,26,26,0))}
html:root:not([data-theme="light"]) .top-solid{background:rgba(26,26,26,.92);border-bottom:1px solid rgba(100,116,139,.5)}
html:root .top-link{text-decoration-color:rgba(100,116,139,.8)}
html:root[data-theme="light"] .top-link{color:#1A1A1A}
html:root[data-theme="light"] .top-link:hover{color:#0B3D91}

/* Toggle: a clear sun/moon chip in both modes */

/* Buttons: navy CTA with white text in both modes */
html:root .btn-solid,html:root .estimator-body .btn-solid,html:root #walkthrough .btn-solid{background:#0B3D91!important;color:#FFFFFF!important;border:1px solid #0B3D91;box-shadow:0 8px 20px -12px rgba(11,61,145,.7)}
html:root:not([data-theme="light"]) .btn-solid,html:root:not([data-theme="light"]) .estimator-body .btn-solid,html:root #walkthrough .btn-solid{border:1px solid rgba(203,213,225,.4)}
html:root .btn-solid:hover{background:var(--b-navy-hover)!important}
html:root .sec-lede a.btn-solid,html:root .prose a.btn-solid,html:root .how-copy a.btn-solid,html:root .prose button.btn-solid{color:#fff}
html:root[data-theme="light"] .btn-ghost,html:root[data-theme="light"] .estimator-body .btn-ghost{color:#1A1A1A;background:#FFFFFF;border:1px solid #CBD5E1;box-shadow:none;text-shadow:none}
html:root[data-theme="light"] .btn-ghost:hover{border-color:#0B3D91}
html:root:not([data-theme="light"]) .btn-ghost,html:root:not([data-theme="light"]) .estimator-body .btn-ghost{color:#FFFFFF;background:#23272E;border:1px solid rgba(203,213,225,.4);box-shadow:none}
html:root .btn-ghost::before{display:none}

/* Text */
html:root[data-theme="light"] .lede{color:#1A1A1A}
html:root:not([data-theme="light"]) .lede{color:#FFFFFF}
html:root .kicker{color:var(--warm)}
html:root[data-theme="light"] .sec-lede a,html:root[data-theme="light"] .prose a,html:root[data-theme="light"] .how-copy a,html:root[data-theme="light"] .callout a{color:#0B3D91;text-decoration-color:#0B3D91}
html:root:not([data-theme="light"]) .sec-lede a,html:root:not([data-theme="light"]) .prose a,html:root:not([data-theme="light"]) .how-copy a,html:root:not([data-theme="light"]) .callout a{color:#CBD5E1;text-decoration:underline;text-decoration-color:#CBD5E1}
html:root[data-theme="light"] .rev figcaption strong,html:root[data-theme="light"] body.home .how-more a{color:#1A1A1A}
html:root:not([data-theme="light"]) h1,html:root:not([data-theme="light"]) h2{color:#FFFFFF}
html:root .motion-headline::after{background:linear-gradient(90deg,#0B3D91,rgba(100,116,139,.3))}
html:root:not([data-theme="light"]) .motion-headline::after{background:linear-gradient(90deg,#CBD5E1,rgba(100,116,139,.3))}

/* Section bands: brand textures instead of glows */
html:root[data-theme="light"] .quote,html:root[data-theme="light"] .sub-hero,html:root[data-theme="light"] .intro,html:root[data-theme="light"] body.home .intro,html:root[data-theme="light"] .rv-hero{background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),url(/img/brand/ndr-texture-light-plaster-tile.svg) 0 0/512px 512px,#FFFFFF}
html:root[data-theme="light"] .reviews,html:root[data-theme="light"] .svc{background:#FFFFFF}
html:root[data-theme="light"] .areas{background:#F4F6F9}
html:root:not([data-theme="light"]) .quote,html:root:not([data-theme="light"]) .sub-hero,html:root:not([data-theme="light"]) .intro,html:root:not([data-theme="light"]) body.home .intro,html:root:not([data-theme="light"]) .rv-hero{background:var(--b-dark-band)}
html:root:not([data-theme="light"]) .reviews,html:root:not([data-theme="light"]) .svc{background:#1A1A1A}
html:root:not([data-theme="light"]) .areas{background:#23272E}
html:root body.home{--glow-warm:none;--glow-cool:none}
html:root[data-theme="light"] body.home .living-backdrop::after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.96) 45%,#FFFFFF)}
html:root:not([data-theme="light"]) body.home .living-backdrop::after{background:linear-gradient(180deg,rgba(26,26,26,.82),rgba(26,26,26,.92) 45%,rgba(26,26,26,.97))}

/* Cards and forms */
html:root[data-theme="light"] .card,html:root[data-theme="light"] .rev,html:root[data-theme="light"] .form,html:root[data-theme="light"] .rv-card{color:#1A1A1A;background:#F4F6F9!important;border:1px solid #CBD5E1!important;box-shadow:0 10px 28px -20px rgba(26,26,26,.35)!important}
html:root:not([data-theme="light"]) .card,html:root:not([data-theme="light"]) .rev,html:root:not([data-theme="light"]) .form,html:root:not([data-theme="light"]) .rv-card{color:#FFFFFF;background:#23272E!important;border:1px solid rgba(100,116,139,.5)!important;box-shadow:0 14px 34px -22px rgba(0,0,0,.7)!important}
html:root .card::before,html:root .rev::before,html:root .form::before,html:root .card::after,html:root .rev::after,html:root .form::after{opacity:0}
html:root[data-theme="light"] .card p,html:root[data-theme="light"] .rev blockquote{color:#1A1A1A}
html:root[data-theme="light"] .step-list li{background:#F4F6F9;border-color:#CBD5E1}
html:root:not([data-theme="light"]) .step-list li{background:#23272E;border-color:rgba(100,116,139,.5)}
html:root[data-theme="light"] body.home .area-chips a{background:#F4F6F9;color:#1A1A1A;border-color:#CBD5E1;box-shadow:none}
html:root:not([data-theme="light"]) body.home .area-chips a{background:#23272E;color:#FFFFFF;border-color:rgba(100,116,139,.5)}
html:root body.home .area-chips li.lit a{border-color:#0B3D91;box-shadow:0 0 0 2px rgba(11,61,145,.25)}
html:root:not([data-theme="light"]) body.home .area-chips li.lit a{border-color:#CBD5E1}
html:root body.home .faq-acc details[open]{box-shadow:none;border-color:#0B3D91}
html:root:not([data-theme="light"]) body.home .faq-acc details[open]{border-color:#CBD5E1}
html:root body.home .area-glow-line,html:root body.home .door-wipe{background:linear-gradient(90deg,transparent,#64748B,transparent)}
html:root .rev-stars{color:var(--warm)}
html:root[data-theme="light"] input,html:root[data-theme="light"] select,html:root[data-theme="light"] textarea{color:#1A1A1A;background:#FFFFFF;border-color:#64748B}
html:root:not([data-theme="light"]) input,html:root:not([data-theme="light"]) select,html:root:not([data-theme="light"]) textarea{color:#FFFFFF;background:#1A1A1A;border-color:rgba(203,213,225,.55)}
html:root[data-theme="light"] input::placeholder,html:root[data-theme="light"] textarea::placeholder{color:#6B7280}
html:root:not([data-theme="light"]) input::placeholder,html:root:not([data-theme="light"]) textarea::placeholder{color:#C7CCD3}
html:root input:focus,html:root select:focus,html:root textarea:focus{border-color:#0B3D91;box-shadow:0 0 0 3px rgba(11,61,145,.3)}
html:root:not([data-theme="light"]) input:focus,html:root:not([data-theme="light"]) textarea:focus{border-color:#CBD5E1}
html:root[data-theme="light"] .rv-share{color:#1A1A1A;background:#FFFFFF;border-color:#CBD5E1}
html:root[data-theme="light"] .rv-empty{border-color:#CBD5E1;background:#F4F6F9}
html:root[data-theme="light"] .rv-empty-title{color:#1A1A1A}
html:root .loadbar span{background:#64748B}

/* 3D walkthrough: a charcoal cinematic zone in both modes */
html:root #walkthrough{--ink:#1A1A1A;--ink-2:#23272E;--white:#FFFFFF;--light:#C7CCD3;--slate:#C7CCD3;--steel:#C7CCD3;--warm:#CBD5E1;--glass:rgba(35,39,46,.82);--line:rgba(100,116,139,.5);color:#fff;background:#1A1A1A}
html:root #walkthrough .lede{color:#FFFFFF}
html:root #walkthrough .btn-ghost{color:#FFFFFF;background:rgba(35,39,46,.7);border:1px solid rgba(203,213,225,.4)}

/* ===== Estimator Liquid Glass (B) ===== */
html:root[data-theme="light"] .estimator-body{--g-fill:linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,246,249,.96));--g-edge:#CBD5E1;--g-hi:inset 0 1px 0 #fff;--g-shadow:0 16px 40px -24px rgba(26,26,26,.4);--g-sel:rgba(11,61,145,.08);
  background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),url(/img/brand/ndr-texture-light-plaster-tile.svg) 0 0/512px 512px,#FFFFFF;color:#1A1A1A}
html:root:not([data-theme="light"]) .estimator-body{--g-fill:linear-gradient(160deg,rgba(43,48,56,.9),rgba(35,39,46,.86));--g-edge:rgba(100,116,139,.55);--g-hi:inset 0 1px 0 rgba(255,255,255,.08);--g-shadow:0 18px 44px -22px rgba(0,0,0,.75);--g-sel:rgba(203,213,225,.12);
  background:var(--b-dark-band);color:#FFFFFF}
html:root .estimator-body .est-progress span::before{background:#0B3D91}
html:root:not([data-theme="light"]) .estimator-body .est-progress span::before{background:#CBD5E1}
html:root[data-theme="light"] .estimator-body .est-ref-card,html:root[data-theme="light"] .estimator-body .est-tex-card,html:root[data-theme="light"] .estimator-body .est-time-tile,html:root[data-theme="light"] .estimator-body .est-q-card,html:root[data-theme="light"] .estimator-body .est-type-card{color:#1A1A1A;background:#FFFFFF;border-color:#CBD5E1;box-shadow:none}
html:root:not([data-theme="light"]) .estimator-body .est-ref-card,html:root:not([data-theme="light"]) .estimator-body .est-tex-card,html:root:not([data-theme="light"]) .estimator-body .est-time-tile,html:root:not([data-theme="light"]) .estimator-body .est-q-card,html:root:not([data-theme="light"]) .estimator-body .est-type-card{color:#FFFFFF;background:#23272E;border-color:rgba(100,116,139,.55);box-shadow:none}
html:root .estimator-body .est-ref-card.on,html:root .estimator-body .est-tex-card.on,html:root .estimator-body .est-time-tile.on,html:root .estimator-body .est-q-grid .est-q-card.on,html:root .estimator-body .est-type-card.on{border-color:#0B3D91;background:var(--g-sel);box-shadow:0 0 0 3px rgba(11,61,145,.25)}
html:root:not([data-theme="light"]) .estimator-body .est-ref-card.on,html:root:not([data-theme="light"]) .estimator-body .est-tex-card.on,html:root:not([data-theme="light"]) .estimator-body .est-time-tile.on,html:root:not([data-theme="light"]) .estimator-body .est-q-grid .est-q-card.on,html:root:not([data-theme="light"]) .estimator-body .est-type-card.on{border-color:#CBD5E1;box-shadow:0 0 0 3px rgba(203,213,225,.2)}
html:root[data-theme="light"] .estimator-body .est-field input,html:root[data-theme="light"] .estimator-body .est-field textarea,html:root[data-theme="light"] .estimator-body .est-field select{color:#1A1A1A;background:#FFFFFF;border-color:#64748B}
html:root:not([data-theme="light"]) .estimator-body .est-field input,html:root:not([data-theme="light"]) .estimator-body .est-field textarea,html:root:not([data-theme="light"]) .estimator-body .est-field select{color:#FFFFFF;background:#1A1A1A;border-color:rgba(203,213,225,.55)}
html:root[data-theme="light"] .estimator-body .est-bar{background:rgba(255,255,255,.95);border-color:#CBD5E1;box-shadow:0 12px 30px -16px rgba(26,26,26,.35)}
html:root:not([data-theme="light"]) .estimator-body .est-bar{background:rgba(35,39,46,.94);border-color:rgba(100,116,139,.55);box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
html:root[data-theme="light"] .estimator-body .est-sheet{background:#FFFFFF;color:#1A1A1A;border-color:#CBD5E1}
html:root:not([data-theme="light"]) .estimator-body .est-sheet{background:#23272E;color:#FFFFFF;border-color:rgba(100,116,139,.55)}
html:root[data-theme="light"] .estimator-body .est-swipe-hint{color:#4B5563}
html:root:not([data-theme="light"]) .estimator-body .est-swipe-hint{color:#C7CCD3}

/* ===== Quote page /q/ and booking picker (B) ===== */
html:root[data-theme="light"] .quote-page{background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),url(/img/brand/ndr-texture-light-plaster-tile.svg) 0 0/512px 512px,#FFFFFF}
html:root:not([data-theme="light"]) .quote-page{background:var(--b-dark-band)}
html:root[data-theme="light"] .quote-card{color:#1A1A1A;background:#FFFFFF;border:1px solid #CBD5E1}
html:root:not([data-theme="light"]) .quote-card{color:#FFFFFF;background:#23272E;border:1px solid rgba(100,116,139,.5)}
html:root[data-theme="light"] .quote-slot,html:root[data-theme="light"] .book-dchip,html:root[data-theme="light"] .book-slot,html:root[data-theme="light"] .book-refund,html:root[data-theme="light"] .book-cal-req-btn{color:#1A1A1A;background:#FFFFFF;border-color:#CBD5E1}
html:root:not([data-theme="light"]) .quote-slot,html:root:not([data-theme="light"]) .book-dchip,html:root:not([data-theme="light"]) .book-slot,html:root:not([data-theme="light"]) .book-refund,html:root:not([data-theme="light"]) .book-cal-req-btn{color:#FFFFFF;background:#1A1A1A;border-color:rgba(203,213,225,.45)}
html:root .book-dchip.is-on,html:root .book-slot.is-sel,html:root .book-slot:has(input:checked){background:rgba(11,61,145,.1);border-color:#0B3D91}
html:root:not([data-theme="light"]) .book-dchip.is-on,html:root:not([data-theme="light"]) .book-slot.is-sel,html:root:not([data-theme="light"]) .book-slot:has(input:checked){background:rgba(203,213,225,.14);border-color:#CBD5E1}
html:root .book-slot-sel{color:#fff;background:#0B3D91}
html:root[data-theme="light"] .book-day{background:#F4F6F9;border-color:#CBD5E1}
html:root:not([data-theme="light"]) .book-day{background:rgba(26,26,26,.6);border-color:rgba(100,116,139,.5)}
html:root[data-theme="light"] .book-notice,html:root[data-theme="light"] .quote-next,html:root[data-theme="light"] .book-note,html:root[data-theme="light"] .book-cal-req{color:#1A1A1A;background:#F4F6F9;border-color:#CBD5E1}
html:root:not([data-theme="light"]) .book-notice,html:root:not([data-theme="light"]) .quote-next,html:root:not([data-theme="light"]) .book-note,html:root:not([data-theme="light"]) .book-cal-req{color:#FFFFFF;background:#1A1A1A;border-color:rgba(100,116,139,.5)}
html:root[data-theme="light"] .book-paybar.book-js{background:rgba(255,255,255,.97);border-top-color:#CBD5E1;color:#1A1A1A}
html:root:not([data-theme="light"]) .book-paybar.book-js{background:rgba(35,39,46,.97);border-top-color:rgba(100,116,139,.5);color:#FFFFFF}
html:root[data-theme="light"] .quote-cal-btn{color:#1A1A1A;background:#F4F6F9;border-color:#0B3D91}
html:root:not([data-theme="light"]) .quote-cal-btn{color:#FFFFFF;background:#1A1A1A;border-color:#CBD5E1}
html:root .qp{--ink:#1A1A1A;--ink-2:#23272E;--white:#fff;--light:#C7CCD3;--slate:#C7CCD3;--warm:#CBD5E1;--line:rgba(100,116,139,.5)}

/* ===== CD review 2026-10-29 ===== */
/* 1. Desktop nav uses the real lockup file; phones keep the mark alone. Live text stays in the HTML for screen readers. */
@media (min-width:561px){
  html:root .top .brand img[src*="mark.svg"]{width:auto;height:30px}
  html:root[data-theme="light"] .top .brand img[src*="mark.svg"]{content:url(/img/brand/ndr-lockup-horizontal-light-bg.svg)}
  html:root:not([data-theme="light"]) .top .brand img[src*="mark.svg"]{content:url(/img/brand/ndr-lockup-horizontal-dark-bg.svg)}
  html:root .top .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 2. Muted text on dark is #C7CCD3, full opacity */
html:root:not([data-theme="light"]) .fine,html:root:not([data-theme="light"]) .form-note,html:root:not([data-theme="light"]) .price-note,html:root:not([data-theme="light"]) .rev figcaption span,html:root:not([data-theme="light"]) .rev-sample,html:root:not([data-theme="light"]) .estimator-body .est-swipe-hint,html:root:not([data-theme="light"]) .eyebrow{color:#C7CCD3!important;opacity:1!important}
html:root[data-theme="light"] .rev figcaption span,html:root[data-theme="light"] .fine{color:#4B5563}
html:root[data-theme="light"] .estimator-body .est-swipe-hint{color:#1A1A1A;opacity:1}
/* 3. Depth on dark bands */
html:root:not([data-theme="light"]) .intro,html:root:not([data-theme="light"]) .sub-hero,html:root:not([data-theme="light"]) .quote{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 -80px 90px -70px rgba(0,0,0,.65)}
/* 4. Light cards always separated from white */
html:root[data-theme="light"] body.home .svc-card,html:root[data-theme="light"] .card{background:#F4F6F9!important;border:1px solid #CBD5E1!important;box-shadow:0 8px 22px -16px rgba(26,26,26,.35)!important}
html:root:not([data-theme="light"]) body.home .svc-card{background:#23272E!important;border:1px solid rgba(100,116,139,.5)!important}
/* 5. Slate edge on navy CTAs in dark */
html:root:not([data-theme="light"]) .btn-solid,html:root:not([data-theme="light"]) .book-go,html:root:not([data-theme="light"]) .estimator-body .btn-solid,html:root #walkthrough .btn-solid{border:1px solid rgba(203,213,225,.4)!important}
/* Walkthrough stays a dark zone in both modes: muted text back to #C7CCD3 */
html:root #walkthrough .fine,html:root #walkthrough .eyebrow{color:#C7CCD3!important;opacity:1!important}
html:root[data-theme="light"] .rev-sample{color:#1A1A1A;border-color:#CBD5E1!important}
html:root:not([data-theme="light"]) .rev-sample{color:#C7CCD3}
/* Sub page props: never over a card on phones and tablets */
@media (max-width:820px){html:root body:not(.home) .living-prop,html:root body:not(.home) .motion-svg-prop{display:none!important}}
/* Photo pin numbers stay white on the navy dot in both modes */
html:root[data-theme="light"] .quote-pin{color:#FFFFFF}


/* ===== Round 2 (Will 2026-10-30): one continuous herringbone, quiet toggle, opaque header ===== */
/* Round 4: the herringbone is a pre-rendered 2x raster tile (CD kit board size and 45 degree angle): softly bevelled raised boards,
   one light direction (upper left), faint board-to-board tone, fine plaster grain, soft joints. No SVG filters at render time.
   --hb-fall adds the large-scale light falloff across the page: steel sheen on charcoal, warm light on white plaster. */
html:root{--hb-tile:url(/img/brand/ndr-herringbone-dark-b.webp);--hb-size:320px 320px;--hb-veil:transparent;--hb-head:rgba(203,213,225,.045);--hb-base:#1D1F22;
  --hb-fall:radial-gradient(120% 70% at 18% 0%,rgba(203,213,225,.11),rgba(203,213,225,0) 62%),linear-gradient(112deg,rgba(255,255,255,0) 24%,rgba(203,213,225,.055) 42%,rgba(255,255,255,.025) 49%,rgba(255,255,255,0) 62%),radial-gradient(150% 110% at 50% 40%,rgba(10,11,13,0) 50%,rgba(10,11,13,.34) 100%)}
html:root[data-theme="light"]{--hb-tile:url(/img/brand/ndr-herringbone-light-b.webp);--hb-veil:transparent;--hb-head:rgba(255,253,248,.4);--hb-base:#F7F5F2;
  --hb-fall:radial-gradient(120% 70% at 18% 0%,rgba(255,253,248,.7),rgba(255,253,248,0) 62%),radial-gradient(150% 110% at 50% 40%,rgba(120,110,96,0) 55%,rgba(120,110,96,.07) 100%)}
html:root body,html:root body.home,html:root body.estimator-body,html:root body.quote-page{background:transparent!important}
html:root body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--hb-fall),var(--hb-tile) 0 0/var(--hb-size) repeat,var(--hb-base)}
/* Sections let the herringbone through (cards keep their solid surface) */
html:root .intro,html:root body.home .intro,html:root .sub-hero,html:root .rv-hero,html:root .post-hero,html:root .quote,html:root .reviews,html:root .svc,html:root .areas,
html:root .living-section,html:root .how,html:root .faq,html:root .home-blog,html:root .foot,html:root main,html:root #walkthrough,html:root .stage,html:root .quote-shell{background:transparent!important;box-shadow:none!important}
html:root .motion-bg-drift,html:root body.home .living-backdrop{display:none!important}
/* Walkthrough (round 3): the herringbone is strictly BEHIND the render. Stack, bottom to top:
   fixed page texture (body::before, z-index -1) < solid page color backing (.stage::before) < the render (#film / poster).
   The render fades in and out with one symmetric, eased fade (same length and curve at top and bottom) into the solid
   page color, never into the lines; the backing then eases into the pattern outside the render's frame. */
html:root .stage{isolation:isolate}
html:root .stage #film,html:root .stage .poster img{position:absolute;z-index:1}
html:root .stage .cap{z-index:2}
/* Tool props are fully opaque so the pattern never shows through an image */
html:root .motion-svg-prop{opacity:1}
html:root .stage .shade{display:none!important}
@media (max-width:820px),(max-aspect-ratio:4/5){
  html:root .stage::before{content:"";position:absolute;left:0;right:0;z-index:0;pointer-events:none;background:var(--hb-base);
    top:calc(64px + var(--tb,0px) - 56px);height:calc(var(--fh) + 112px);
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.1) 12px,rgba(0,0,0,.35) 24px,rgba(0,0,0,.7) 36px,rgba(0,0,0,.92) 46px,#000 56px,#000 calc(100% - 56px),rgba(0,0,0,.92) calc(100% - 46px),rgba(0,0,0,.7) calc(100% - 36px),rgba(0,0,0,.35) calc(100% - 24px),rgba(0,0,0,.1) calc(100% - 12px),rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.1) 12px,rgba(0,0,0,.35) 24px,rgba(0,0,0,.7) 36px,rgba(0,0,0,.92) 46px,#000 56px,#000 calc(100% - 56px),rgba(0,0,0,.92) calc(100% - 46px),rgba(0,0,0,.7) calc(100% - 36px),rgba(0,0,0,.35) calc(100% - 24px),rgba(0,0,0,.1) calc(100% - 12px),rgba(0,0,0,0) 100%)}
  html:root .stage #film,html:root .stage .poster img{
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.028) 3%,rgba(0,0,0,0.104) 6%,rgba(0,0,0,0.216) 9%,rgba(0,0,0,0.352) 12%,rgba(0,0,0,0.500) 15%,rgba(0,0,0,0.648) 18%,rgba(0,0,0,0.784) 21%,rgba(0,0,0,0.896) 24%,rgba(0,0,0,0.972) 27%,#000 30%,#000 70%,rgba(0,0,0,0.972) 73%,rgba(0,0,0,0.896) 76%,rgba(0,0,0,0.784) 79%,rgba(0,0,0,0.648) 82%,rgba(0,0,0,0.500) 85%,rgba(0,0,0,0.352) 88%,rgba(0,0,0,0.216) 91%,rgba(0,0,0,0.104) 94%,rgba(0,0,0,0.028) 97%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.028) 3%,rgba(0,0,0,0.104) 6%,rgba(0,0,0,0.216) 9%,rgba(0,0,0,0.352) 12%,rgba(0,0,0,0.500) 15%,rgba(0,0,0,0.648) 18%,rgba(0,0,0,0.784) 21%,rgba(0,0,0,0.896) 24%,rgba(0,0,0,0.972) 27%,#000 30%,#000 70%,rgba(0,0,0,0.972) 73%,rgba(0,0,0,0.896) 76%,rgba(0,0,0,0.784) 79%,rgba(0,0,0,0.648) 82%,rgba(0,0,0,0.500) 85%,rgba(0,0,0,0.352) 88%,rgba(0,0,0,0.216) 91%,rgba(0,0,0,0.104) 94%,rgba(0,0,0,0.028) 97%,rgba(0,0,0,0) 100%)}
}
@media (min-width:821px) and (min-aspect-ratio:4/5){html:root .stage #film,html:root .stage .poster img{-webkit-mask-image:none;mask-image:none}}
/* Local scrim only under the walkthrough hero and result copy so it stays crisp where it meets the film */
html:root #walkthrough .cap-hero,html:root #walkthrough .cap-result{background:linear-gradient(180deg,rgba(26,26,26,0),rgba(26,26,26,.55) 18%,rgba(26,26,26,.55));border-radius:18px}
/* Phones in light mode: the copy around the film sits on the white herringbone, so it uses the light tokens */
@media (max-width:820px),(max-aspect-ratio:4/5){
  html:root[data-theme="light"] #walkthrough{color:#1A1A1A}
  /* Both modes (round 4): no boxed backing. A full-width veil in the page color eases in above the copy and eases out below it, so it reads as the
     render's own fade continuing; no side or top edge. */
  html:root #walkthrough .cap-hero,html:root #walkthrough .cap-result{background:none!important;border-radius:0}
  html:root #walkthrough .cap-hero::before,html:root #walkthrough .cap-result::before{content:"";position:absolute;z-index:-1;pointer-events:none;
    top:-72px;bottom:-48px;left:calc(-1 * var(--pad));width:100vw;
    background:linear-gradient(180deg,rgba(var(--cap-veil),0.000) 0px,rgba(var(--cap-veil),0.040) 9px,rgba(var(--cap-veil),0.144) 18px,rgba(var(--cap-veil),0.291) 27px,rgba(var(--cap-veil),0.460) 36px,rgba(var(--cap-veil),0.629) 45px,rgba(var(--cap-veil),0.776) 54px,rgba(var(--cap-veil),0.880) 63px,rgba(var(--cap-veil),0.920) 72px,rgba(var(--cap-veil),0.920) calc(100% - 48px),rgba(var(--cap-veil),0.852) calc(100% - 40px),rgba(var(--cap-veil),0.681) calc(100% - 32px),rgba(var(--cap-veil),0.460) calc(100% - 24px),rgba(var(--cap-veil),0.239) calc(100% - 16px),rgba(var(--cap-veil),0.068) calc(100% - 8px),rgba(var(--cap-veil),0.000) calc(100% - 0px))}
  html:root #walkthrough{--cap-veil:29,31,34}
  html:root[data-theme="light"] #walkthrough{--cap-veil:247,245,242}
  html:root[data-theme="light"] #walkthrough .cap :not(.btn-solid):not(.btn-solid *){color:inherit}
  html:root[data-theme="light"] #walkthrough .cap{color:#1A1A1A}
  html:root[data-theme="light"] #walkthrough .cap:not(.cap-hero):not(.cap-result){background:rgba(255,255,255,.92);border:1px solid #CBD5E1;box-shadow:0 10px 30px -18px rgba(26,26,26,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
  html:root[data-theme="light"] #walkthrough .lede{color:#1A1A1A}
  html:root[data-theme="light"] #walkthrough .fine,html:root[data-theme="light"] #walkthrough .eyebrow,html:root[data-theme="light"] #walkthrough .kicker{color:#4B5563!important}
  html:root[data-theme="light"] #walkthrough .btn-ghost{color:#1A1A1A;background:#FFFFFF;border:1px solid #CBD5E1;box-shadow:none}
  html:root[data-theme="light"] #walkthrough .btn-ghost::before{display:none}
  html:root[data-theme="light"] #walkthrough .step-arrow{color:#1A1A1A;background:rgba(255,255,255,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  html:root[data-theme="light"] #walkthrough .step-arrow:focus-visible{outline-color:#0B3D91}
  html:root[data-theme="light"] #walkthrough .swipe-hint{color:#4B5563}
  html:root[data-theme="light"] #walkthrough .rail button[data-go]{color:#4B5563}
  html:root[data-theme="light"] #walkthrough .rail button[data-go]::after{border-color:#6B7280}
  html:root[data-theme="light"] #walkthrough .rail button[data-go].on::after{background:#0B3D91;border-color:#0B3D91}
}
/* Header: opaque, the same herringbone lined up with the page layer, so nothing scrolls through it */
html:root .top,html:root .top-solid{background:linear-gradient(var(--hb-head),var(--hb-head)),var(--hb-tile) 0 0/var(--hb-size) repeat,var(--hb-base)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(100,116,139,.35)}
html:root[data-theme="light"] .top,html:root[data-theme="light"] .top-solid{border-bottom-color:#E2E6EB}

/* Toggle: a quiet 20px glyph in a 44px tap area. No box; a soft ring on hover, a clear ring on keyboard focus. */
.theme-toggle{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;
  color:#C7CCD3;font:inherit;line-height:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .2s,box-shadow .2s}
.theme-toggle .ti{grid-area:1/1;display:block;width:20px;height:20px;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.theme-toggle .ti-sun{opacity:1;transform:none}
.theme-toggle .ti-moon{opacity:0;transform:rotate(-40deg) scale(.6)}
html[data-theme="light"] .theme-toggle .ti-sun{opacity:0;transform:rotate(40deg) scale(.6)}
html[data-theme="light"] .theme-toggle .ti-moon{opacity:1;transform:none}
.theme-toggle:hover{color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(203,213,225,.35)}
.theme-toggle:active .ti{transform:scale(.9)}
.theme-toggle:focus{outline:none}
.theme-toggle:focus-visible{outline:2px solid #CBD5E1;outline-offset:0}
html[data-theme="light"] .theme-toggle{color:#4B5563}
html[data-theme="light"] .theme-toggle:hover{color:#0B3D91;box-shadow:inset 0 0 0 1px rgba(26,26,26,.16)}
html[data-theme="light"] .theme-toggle:focus-visible{outline-color:#0B3D91}
/* Placement: last item in the nav on desktop; on phones it sits quietly beside the logo so Blog, Call and Get a quote keep their room */
.top-cta .theme-toggle{order:99;margin-left:2px}
@media (max-width:560px){
  .top .top-cta .theme-toggle{position:absolute;top:max(14px,env(safe-area-inset-top));left:calc(max(var(--pad),env(safe-area-inset-left)) + 44px);margin:0}
}
@media (max-width:359px){.top .top-cta .theme-toggle{left:calc(var(--pad) + 36px)}}
.est-theme .theme-toggle,.quote-brand .theme-toggle{margin-right:-10px}
@media (prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle .ti{transition:none}}