/* ============================================================
   LUCENT EXTERIOR WINDOW CARE
   A conventional, fast-scrolling site with three scroll-scrubbed
   film moments. Design language: navy, gold, cream.
   ============================================================ */

:root {
  --navy: #0B2540;
  --navy-2: #0e2c4c;
  --ink: #050f1b;
  --gold: #d8a93c;
  --gold-bright: #e8c25c;
  --green: #2f9e6f;
  --green-bright: #46bd86;
  --cream: #F9F7F2;
  --cream-dim: rgba(249, 247, 242, 0.74);
  --hairline: rgba(216, 169, 60, 0.34);
  --display: Impact, "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --nav-h: 64px;
  --wrap: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--navy); }
body {
  background: var(--navy) url("assets/lwc-pattern.svg?v=137") repeat;
  background-size: 960px 560px;
  color: var(--cream); font-family: var(--sans);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* anchored sections clear the fixed bar */
section[id], main > section { scroll-margin-top: calc(var(--nav-h) + 12px); }

.sr { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 18px;
  background: var(--gold); color: var(--navy); font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ============ Type ============ */
h1, h2, h3, .h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.01em; }
em { font-style: normal; color: var(--gold-bright); }
.kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 12px; }
.h2 { font-size: clamp(1.9rem, 4.6vw, 3.3rem); color: var(--cream); margin-bottom: 14px; }
.lede { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--cream-dim); max-width: 62ch; }
.center { text-align: center; }
.center.lede, .lede.center { margin-left: auto; margin-right: auto; }
.muted { color: var(--cream-dim); font-size: 0.94rem; }
.muted a { color: var(--gold-bright); }

/* ============ Layout ============ */
.band { padding: clamp(56px, 9vw, 110px) 5vw; }
.band-tight { padding: clamp(40px, 6vw, 72px) 5vw; }
/* translucent ink: darkens the section while the body's guilloche pattern
   runs through uninterrupted, so the texture never cuts off at a seam */
.band-alt { background: rgba(7,22,39,0.6); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.wrap-narrow { max-width: 760px; }
.center-cta { display: flex; justify-content: center; margin-top: 30px; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn-gold { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); border-color: rgba(249,247,242,0.35); box-shadow: 0 12px 30px rgba(216,169,60,0.32); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(216,169,60,0.45); }
.btn-ghost { border-color: var(--gold); color: var(--gold-bright); background: transparent; }
.btn-ghost:hover { background: rgba(216,169,60,0.14); transform: translateY(-2px); }

/* ============ Fixed nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(14px, 4vw, 34px);
  background: transparent; transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.nav.is-stuck {
  background: rgba(7,22,39,0.92); box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nav-brand { flex: 0 0 auto; display: block; }
.nav-brand img { height: 38px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 9px 13px; border-radius: 9px; font-size: 0.82rem; font-weight: 600;
  color: var(--cream-dim); text-decoration: none; white-space: nowrap; transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--cream); background: rgba(216,169,60,0.14); }
.nav-cta {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy) !important;
  font-weight: 700 !important; margin-left: 6px;
}
.nav-cta:hover { background: linear-gradient(160deg, var(--gold-bright), var(--gold)) !important; transform: translateY(-1px); }
.nav-toggle { display: none; width: 44px; height: 40px; background: none; border: 0; cursor: pointer; padding: 9px 8px; }
.nav-toggle span { display: block; height: 2px; background: var(--cream); border-radius: 2px; margin: 4px 0; transition: transform 0.25s, opacity 0.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============ Hero ============ */
.hero {
  position: relative; min-height: 92svh; display: grid; align-items: center;
  padding: calc(var(--nav-h) + 6vh) 5vw 8vh; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,22,39,0.82) 0%, rgba(7,22,39,0.62) 40%, rgba(7,22,39,0.92) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; }
.hero-eyebrow { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.6rem, 7.6vw, 5.4rem); color: var(--cream); text-shadow: 0 4px 40px rgba(7,22,39,0.8); }
.hero-lede { margin: 20px auto 0; max-width: 60ch; font-size: clamp(1rem, 1.7vw, 1.16rem); color: var(--cream-dim); }
.hero-lede strong { color: var(--cream); }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 26px; }
.badge {
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--hairline);
  background: rgba(7,22,39,0.55); font-size: 0.8rem; color: var(--cream-dim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.badge b { color: var(--gold-bright); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 16px; font-size: 0.84rem; color: var(--cream-dim); }

/* ============ Who we are ============ */
.promise { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.promise li {
  padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(216,169,60,0.22);
  background: rgba(216,169,60,0.05); color: var(--cream-dim); font-size: 0.98rem;
}
.promise b { color: var(--cream); }

/* ============ Scrub sections ============ */
.scrub { position: relative; height: var(--scrub-h, 300vh); }
.scrub-stage {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: grid; place-items: center; padding: 3vh 5vw;
}
.scrub-grid {
  display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(26px, 4vw, 60px);
  align-items: center; width: 100%; max-width: var(--wrap);
}
.scrub-grid--flip .scrub-copy { order: 2; }
.scrub-copy .h2 { margin-bottom: 12px; }
.scrub-copy p { color: var(--cream-dim); max-width: 52ch; }
.scrub-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--navy);
  box-shadow: 0 26px 70px rgba(0,0,0,0.5);
}
.scrub-media video, .scrub-media canvas { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--navy); }
.scrub-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(249,247,242,0.16); }
.scrub-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.scrub--static .scrub-bar { display: none; }

.ticks { list-style: none; margin-top: 18px; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; color: var(--cream); font-size: 0.97rem; }
.ticks li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold-bright); font-size: 0.82em; }
.ticks b { color: var(--gold-bright); }

.stages { list-style: none; margin-top: 20px; display: grid; gap: 8px; }
.stages li {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 15px; border-radius: 12px;
  border: 1px solid rgba(216,169,60,0.2); background: rgba(9,26,46,0.5);
  opacity: 0.42; transform: translateX(-6px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.45s, background 0.45s;
}
.stages li.live {
  opacity: 1; transform: none; border-color: var(--gold);
  background: linear-gradient(160deg, rgba(216,169,60,0.2), rgba(9,26,46,0.55));
}
.stages b { color: var(--cream); font-size: 0.98rem; }
.stages span { color: var(--cream-dim); font-size: 0.86rem; }
.pull { margin-top: 18px; font-size: 1.02rem; color: var(--cream); }
.pull b { color: var(--gold-bright); }

/* ============ Before / after ============ */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 34px; }
.ba { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 16px 44px rgba(0,0,0,0.42); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 3; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 48px; }
.ba-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(180deg, rgba(249,247,242,0.9), var(--gold-bright), rgba(249,247,242,0.9)); box-shadow: 0 0 12px rgba(0,0,0,0.5); }
.ba-grip { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 20px; height: 60px; border-radius: 10px; background: linear-gradient(160deg, var(--gold-bright), var(--gold)); border: 1px solid rgba(249,247,242,0.5); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.ba-tag { position: absolute; left: 12px; bottom: 12px; z-index: 4; padding: 6px 14px; border-radius: 999px; background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* ============ Rewards ============ */
.reward {
  margin: 14px auto 0; min-height: 1.2em; text-align: center;
  font-size: 0.9rem; font-weight: 600; color: var(--gold-bright);
  opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease;
}
.reward.show { opacity: 1; transform: none; }

/* ============ Reviews ============ */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 34px; }
.rev { display: flex; flex-direction: column; padding: 22px; border-radius: 16px; border: 1px solid var(--hairline); background: rgba(11,37,64,0.6); }
.rev-stars { color: var(--gold-bright); letter-spacing: 0.2em; font-size: 0.95rem; margin-bottom: 10px; }
.rev blockquote { font-size: 0.99rem; color: var(--cream); flex: 1 1 auto; }
.rev cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright); }
.rev-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.soc { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(9,30,52,0.6); text-decoration: none; color: var(--cream); font-size: 0.88rem; font-weight: 600; transition: border-color 0.2s, transform 0.2s; }
.soc:hover { border-color: var(--gold); transform: translateY(-2px); }
.soc svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ============ Areas ============ */
.area-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 32px 0 24px; }
.area-grid li { padding: 15px 17px; border-radius: 13px; border: 1px solid rgba(216,169,60,0.2); background: rgba(216,169,60,0.05); }
.area-grid b { display: block; color: var(--cream); font-size: 1rem; }
.area-grid span { color: var(--cream-dim); font-size: 0.86rem; }

/* ============ Segmented control (home / business) ============ */
.seg { display: inline-flex; padding: 5px; border-radius: 999px; border: 1px solid var(--hairline); background: rgba(7,22,39,0.6); margin: 28px auto 26px; }
.band .seg, .quote .seg { display: flex; justify-content: center; width: fit-content; margin-left: auto; margin-right: auto; }
.seg-wide { width: 100%; }
.seg-btn {
  flex: 1 1 auto; min-height: 42px; padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--cream-dim); font-family: var(--sans); font-size: 0.88rem; font-weight: 700;
  transition: background 0.25s, color 0.25s;
}
.seg-btn.is-on { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); }

/* ============ Services list ============ */
.svc-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.svc-list li { padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(216,169,60,0.22); background: rgba(11,37,64,0.5); }
.svc-list b { display: block; color: var(--cream); font-size: 1.02rem; margin-bottom: 4px; }
.svc-list span { color: var(--cream-dim); font-size: 0.9rem; }
.svc-list .svc-star { border-color: var(--gold); background: linear-gradient(160deg, rgba(216,169,60,0.16), rgba(11,37,64,0.5)); }
.svc-list .svc-star b { color: var(--gold-bright); }

/* ============ Loyalty ============ */
.loyal { padding: clamp(26px, 4vw, 44px); border-radius: 20px; border: 1px solid var(--gold); background: linear-gradient(165deg, rgba(11,37,64,0.9), rgba(16,49,80,0.8)); }
.loyal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 26px; }
.loyal-fig { text-align: center; padding: 18px 12px; border-radius: 14px; background: rgba(216,169,60,0.09); border: 1px solid rgba(216,169,60,0.24); }
.loyal-fig b { display: block; font-family: var(--display); font-size: 2rem; color: var(--gold-bright); line-height: 1; }
.loyal-fig span { display: block; margin-top: 7px; font-size: 0.84rem; color: var(--cream-dim); }

/* ============ Quote form ============ */
.quote { margin-top: 30px; }
.q-step { border: 0; margin-bottom: 26px; }
.q-step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.q-step legend i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); font-style: normal; font-size: 0.78rem; font-weight: 800; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.opt {
  min-height: 46px; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: center;
  border: 1px solid rgba(249,247,242,0.2); background: rgba(249,247,242,0.05);
  color: var(--cream); font-family: var(--sans); font-size: 0.86rem; font-weight: 600; line-height: 1.2;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.opt:hover { border-color: var(--gold); }
.opt-star { border-color: rgba(216,169,60,0.5); background: rgba(216,169,60,0.1); color: var(--gold-bright); font-weight: 700; }
.opt.is-on { border-color: var(--gold-bright); background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { margin-bottom: 10px; }
.quote input, .quote textarea {
  width: 100%; min-height: 48px; padding: 13px 15px; border-radius: 12px;
  border: 1px solid rgba(249,247,242,0.2); background: rgba(249,247,242,0.06);
  color: var(--cream); font-family: var(--sans); font-size: 16px; transition: border-color 0.2s, background 0.2s;
}
.quote textarea { min-height: 0; resize: vertical; }
.quote input::placeholder, .quote textarea::placeholder { color: rgba(249,247,242,0.5); }
.quote input:focus, .quote textarea:focus { outline: none; border-color: var(--gold); background: rgba(249,247,242,0.09); }
.privacy { margin-top: 6px; font-size: 0.78rem; color: var(--cream-dim); text-align: center; }
.form-err { margin: 4px 0 10px; text-align: center; font-size: 0.9rem; color: var(--gold-bright); }
.form-err:empty { display: none; }
.btn-submit { width: 100%; }
.quote-call { margin-top: 18px; text-align: center; font-size: 0.92rem; color: var(--cream-dim); }
.quote-call a { color: var(--gold-bright); font-weight: 700; text-decoration: none; }
.thanks { margin-top: 30px; text-align: center; padding: 30px 18px; border-radius: 18px; border: 1px solid var(--gold); background: rgba(11,37,64,0.6); }
.thanks-check { width: 62px; height: 62px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-bright); font-size: 28px; }
.thanks h3 { font-size: 1.5rem; color: var(--cream); margin-bottom: 10px; }
.thanks p { color: var(--cream-dim); max-width: 44ch; margin: 0 auto; }
.thanks a { color: var(--gold-bright); font-weight: 700; text-decoration: none; }

/* ============ Floating pill ============ */
.pill {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; min-height: 46px; padding: 12px 22px; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 1px solid rgba(249,247,242,0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform 0.25s, opacity 0.25s;
}
.pill:hover { transform: translateY(-2px); }
.pill.gone { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* ============ Footer ============ */
.foot { background: rgba(7,22,39,0.6); border-top: 1px solid var(--hairline); padding: clamp(44px, 6vw, 70px) 5vw 34px; }
.foot-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 32px; }
.foot-grid > div { display: flex; flex-direction: column; gap: 9px; }
.foot-grid b { color: var(--gold-bright); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-grid a { color: var(--cream-dim); text-decoration: none; font-size: 0.93rem; }
.foot-grid a:hover { color: var(--gold-bright); }
.foot-grid p { color: var(--cream-dim); font-size: 0.93rem; }
/* align-self:flex-start stops the flex column from stretching it wide (which
   squashed the wordmark); aspect-ratio matches lucent-logo-wc.png (1400x434) */
.foot-logo { height: 52px; width: auto; aspect-ratio: 1400 / 434; align-self: flex-start; margin-bottom: 4px; }
.foot-legal { max-width: var(--wrap); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(216,169,60,0.16); text-align: center; color: var(--cream-dim); font-size: 0.82rem; }
.foot-legal a { color: var(--gold-bright); }

/* ============ Reveal ============ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   SUBPAGES (about · loyalty · mission · gallery · faq · areas)
   ============================================================ */
.subpage { padding-top: var(--nav-h); }
.sub-hero { min-height: 46vh; display: grid; place-items: center; text-align: center; padding: 12vh 6vw 7vh; background: radial-gradient(120% 100% at 50% 0%, rgba(25,47,76,0.5) 0%, rgba(25,47,76,0) 62%); }
.sub-hero h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); color: var(--cream); }
.sub-hero p { margin-top: 14px; color: var(--cream-dim); font-size: 1.06rem; max-width: 60ch; }
.sub-wrap { max-width: 860px; margin: 0 auto; padding: 4vh 6vw 10vh; }
.sub-wrap h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); color: var(--cream); margin: 38px 0 14px; }
.sub-wrap h3 { font-size: 1.2rem; color: var(--gold-bright); margin: 26px 0 8px; }
.sub-wrap p, .sub-wrap li { color: var(--cream-dim); font-size: 1.04rem; line-height: 1.8; }
.sub-wrap ul { margin: 10px 0 10px 22px; }
.sub-wrap a { color: var(--gold-bright); }
.sub-cta { display: flex; justify-content: center; margin-top: 36px; }
.panel { padding: 6vh 5vw; display: grid; justify-items: center; }
.bare { width: 100%; max-width: var(--wrap); text-align: center; }
.veil { width: 100%; max-width: 1000px; padding: clamp(24px, 4vw, 44px); border-radius: 20px; border: 1px solid var(--hairline); background: rgba(11,37,64,0.6); }
.veil-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 12px; }
.veil-kicker.center { text-align: center; }
.sec-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 3.2rem); color: var(--cream); text-align: center; margin-bottom: 14px; }
.mission-sub { margin-top: 16px; color: var(--cream-dim); font-size: 1.04rem; max-width: 62ch; }
.mission-hero { min-height: 70vh; display: grid; place-items: center; align-content: center; text-align: center; padding: 16vh 8vw 8vh; background: radial-gradient(120% 100% at 50% 0%, rgba(25,47,76,0.5) 0%, rgba(25,47,76,0) 60%); }
.mission-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 5.6vw, 4rem); color: var(--cream); }
.spec-list { list-style: none; margin: 16px 0; display: grid; gap: 9px; }
.spec-list li { position: relative; padding-left: 24px; color: var(--cream); font-size: 0.98rem; }
.spec-list li::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--gold-bright); font-size: 0.8em; }
.spec-list b { color: var(--gold-bright); }
.btn-how {
  display: inline-flex; align-items: center; min-height: 50px; padding: 15px 32px; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-family: var(--display); font-size: clamp(1rem, 2.2vw, 1.2rem); letter-spacing: 0.05em;
  text-decoration: none; border: 1px solid rgba(249,247,242,0.35); box-shadow: 0 12px 34px rgba(216,169,60,0.32);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-how:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(216,169,60,0.45); }

/* How-we-clean banners */
.how-band { max-width: 1100px; margin: 0 auto; padding: 4vh 5vw 10vh; display: grid; gap: 22px; }
.how-banner {
  position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--hairline);
  min-height: 340px; display: grid; align-items: end; padding: clamp(22px, 4vw, 40px);
  background-image: linear-gradient(180deg, rgba(7,22,39,0.35) 0%, rgba(7,22,39,0.9) 78%), var(--img);
  background-size: cover; background-position: center;
}
.how-banner-tx { position: relative; z-index: 1; max-width: 62ch; }
.how-banner-tx h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--cream); margin: 6px 0 12px; }
.how-banner-tx p { color: var(--cream-dim); }

/* Loyalty page */
.loyal-hero { min-height: 62vh; display: grid; place-items: center; align-content: center; text-align: center; padding: 16vh 6vw 8vh; background: radial-gradient(90% 70% at 50% 10%, rgba(216,169,60,0.16) 0%, transparent 55%), radial-gradient(120% 100% at 50% 0%, rgba(33,58,94,0.5) 0%, rgba(33,58,94,0) 62%); }
.loyal-hero h1 { font-size: clamp(2.4rem, 6.6vw, 4.6rem); color: var(--cream); }
.loyal-wrap { position: relative; width: 100%; max-width: 900px; padding: clamp(26px, 4vw, 48px); border-radius: 20px; border: 1px solid var(--gold); background: linear-gradient(165deg, rgba(11,37,64,0.92), rgba(16,49,80,0.86)); text-align: center; }
.loyal-perks { grid-template-columns: 1fr 1fr; max-width: 820px; }
.perks { list-style: none; margin: 28px auto 0; max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.perks li { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; border: 1px solid rgba(216,169,60,0.3); background: linear-gradient(160deg, rgba(216,169,60,0.12), rgba(11,37,64,0.2)); }
.perk-big { flex: 0 0 auto; min-width: 56px; height: 56px; display: grid; place-items: center; padding: 0 8px; border-radius: 14px; background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); font-weight: 800; font-size: 1.4rem; }
.perk-tx { display: flex; flex-direction: column; gap: 3px; }
.perk-tx b { color: var(--cream); font-size: 1rem; }
.perk-tx span { color: var(--cream-dim); font-size: 0.85rem; line-height: 1.45; }
.receipts { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 30px 0 16px; }
.receipt { flex: 1 1 0; max-width: 320px; text-align: left; padding: 20px; border-radius: 14px; }
.receipt.r-first { background: #F9F7F2; color: #12233b; }
.receipt.r-loyal { background: linear-gradient(165deg, #0d2846, #0a1f38); color: var(--cream); border: 1px solid var(--gold); }
.r-badge { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; background: rgba(18,35,59,0.1); color: #12233b; }
.r-badge.gold { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); }
.r-head { font-size: 1rem; font-weight: 700; padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid currentColor; opacity: 0.9; }
.r-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; padding: 6px 0; }
.r-line.reward { color: var(--gold-bright); font-weight: 600; opacity: 1; transform: none; margin: 0; min-height: 0; text-align: left; }
.r-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 11px; padding-top: 11px; border-top: 1px solid currentColor; font-weight: 800; }
.r-total b { font-size: 1.4rem; }
.gold-total { color: var(--gold-bright); }
.r-arrow { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--gold-bright); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.receipts-cap { margin: 8px auto 0; max-width: 56ch; font-size: 0.94rem; color: var(--cream-dim); }

/* Gallery */
.gal-wrap { max-width: 1180px; margin: 0 auto; padding: 4vh 4vw 10vh; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gal-item { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline); cursor: zoom-in; }
.gal-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.5s ease; }
.gal-item:hover img { transform: scale(1.05); }
.gal-tag { position: absolute; left: 10px; top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(7,22,39,0.82); color: var(--gold-bright); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; }
.lightbox { position: fixed; inset: 0; z-index: 150; display: none; place-items: center; padding: 5vh 4vw; background: rgba(4,10,19,0.94); }
.lightbox.open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 78vh; border-radius: 14px; }
.lb-cap { margin-top: 14px; color: var(--cream); font-weight: 600; text-align: center; }
.lb-close { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(9,30,52,0.8); color: var(--cream); font-size: 26px; cursor: pointer; }

/* FAQ */
.faq-item { border: 1px solid var(--hairline); border-radius: 14px; padding: 20px 24px; margin-top: 14px; background: rgba(9,30,52,0.5); }
.faq-item h3 { margin: 0 0 8px; color: var(--cream); font-size: 1.1rem; }
.faq-item p { margin: 0; }

/* Legacy footer used by subpages */
.site-foot { background: rgba(7,22,39,0.6); border-top: 1px solid var(--hairline); padding: 44px 6vw 34px; text-align: center; }

/* Legacy decorative hooks (kept inert so subpage markup stays valid) */
.gleam, .tilt, .magnet, .shiny, .loyal-lite, .loyal-page { }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .scrub-grid { gap: 24px; }
}

@media (max-width: 820px) {
  /* --- nav collapses to a sheet --- */
  .nav-toggle { display: block; order: 3; }
  .nav-links {
    order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
  }
  .nav-links.is-open { max-height: 70svh; opacity: 1; margin-top: 10px; }
  .nav-links a { padding: 13px 14px; font-size: 0.95rem; border-radius: 10px; }
  .nav-cta { margin-left: 0; text-align: center; justify-content: center; }
  .nav { flex-wrap: wrap; background: rgba(5,15,27,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .nav-brand img { height: 32px; }

  .hero { min-height: 88svh; padding-top: calc(var(--nav-h) + 5vh); }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); }

  /* --- scrub sections stack: copy first, then the footage --- */
  .scrub { height: var(--scrub-h, 260vh); }
  .scrub-stage { padding: 2vh 5vw; align-content: center; }
  .scrub-grid, .scrub-grid--flip { grid-template-columns: 1fr; gap: 16px; }
  .scrub-grid--flip .scrub-copy { order: 0; }
  .scrub-media { aspect-ratio: 16 / 10; }
  .scrub-copy .h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .scrub-copy p { font-size: 0.94rem; }
  .ticks { margin-top: 12px; gap: 6px; }
  .ticks li { font-size: 0.9rem; }
  .stages { margin-top: 12px; gap: 6px; }
  .stages li { padding: 9px 12px; }
  .stages b { font-size: 0.9rem; }
  .stages span { font-size: 0.8rem; }
  .pull { margin-top: 12px; font-size: 0.94rem; }

  .perks, .loyal-perks { grid-template-columns: 1fr; }
  .receipts { flex-direction: column; }
  .receipt { max-width: 100%; }
  .r-arrow svg { transform: rotate(90deg); }
}

@media (max-width: 620px) {
  .band { padding: 52px 5vw; }
  .foot-grid { grid-template-columns: 1fr; text-align: center; }
  .foot-grid > div { align-items: center; }
  .foot-logo { align-self: center; }
  .row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opts { grid-template-columns: 1fr 1fr; }
  .hero-badges { gap: 7px; }
  .badge { font-size: 0.74rem; padding: 7px 12px; }
  .btn { min-height: 48px; padding: 13px 22px; font-size: 0.78rem; }
  .pill { right: 12px; bottom: 12px; padding: 11px 18px; font-size: 0.72rem; }
  .scrub-media { aspect-ratio: 4 / 3; }
}

/* Hard guard against horizontal scroll */
html, body { max-width: 100%; overflow-x: clip; }

/* ============================================================
   v53 · PREMIUM ANIMATION LAYER
   Shining words · animated nav + mobile sheet · animated controls
   · horizontal parallax scrub · 3-step quote wizard · gold stamps
   ============================================================ */

/* ---- Important words shine (the gold accents catch light) ---- */
@keyframes lux-shine {
  0% { background-position: 100% center; }
  15% { background-position: -100% center; }   /* one quick sweep (one gradient period) */
  100% { background-position: -100% center; }  /* then hold — a long pause before the next */
}
em, .hi {
  background: linear-gradient(100deg, var(--gold) 0%, #fff6d8 18%, var(--gold-bright) 34%, var(--gold) 52%, var(--gold-bright) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lux-shine 6s linear infinite;
}
.hi { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { em, .hi { animation: none; } }
/* keep labels that sit ON gold legible */
.seg-btn em, .opt em, .btn em, .nav-cta em, .choice em, .choice b em { -webkit-text-fill-color: currentColor; color: currentColor; background: none; animation: none; }

/* ---- Buttons: gold sheen sweep + press ---- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-gold { background-size: 140% 140%; }
.btn-gold:hover { background-position: 100% 0; }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

/* ---- Nav: animated underline, shimmer CTA, brand lift ---- */
.nav-brand img { transition: transform 0.3s ease, filter 0.3s ease; }
.nav-brand:hover img { transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 4px 14px rgba(216,169,60,0.45)); }
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(216,169,60,0.34); }
.nav-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-18deg); animation: cta-sheen 4.5s ease-in-out infinite;
}
@keyframes cta-sheen { 0%, 62% { left: -60%; } 82%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .nav-cta::after { display: none; } }

/* ---- Segmented control feel ---- */
.seg-btn { position: relative; z-index: 1; transition: color 0.25s, transform 0.2s; }
.seg-btn.is-on { box-shadow: 0 8px 22px rgba(216,169,60,0.35); }
.seg-btn:not(.is-on):hover { color: var(--cream); }

/* ============ Premium mobile sheet ============ */
@media (max-width: 820px) {
  .nav.menu-open { background: rgba(5,15,27,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .nav-links {
    gap: 6px; padding: 6px 4px 10px;
    border-top: 1px solid rgba(216,169,60,0.18); margin-top: 8px;
  }
  .nav-links.is-open { max-height: 78svh; }
  .nav-links a {
    padding: 15px 16px; font-size: 1.02rem; border-radius: 12px;
    border: 1px solid transparent; background: rgba(216,169,60,0.04);
    opacity: 0; transform: translateY(10px);
  }
  .nav-links a::after { display: none; }
  .nav-links.is-open a { animation: sheet-in 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
  .nav-links.is-open a:nth-child(1) { animation-delay: 0.04s; }
  .nav-links.is-open a:nth-child(2) { animation-delay: 0.09s; }
  .nav-links.is-open a:nth-child(3) { animation-delay: 0.14s; }
  .nav-links.is-open a:nth-child(4) { animation-delay: 0.19s; }
  .nav-links.is-open a:nth-child(5) { animation-delay: 0.24s; }
  .nav-links.is-open a:nth-child(6) { animation-delay: 0.29s; }
  .nav-links a:not(.nav-cta):active { background: rgba(216,169,60,0.14); border-color: rgba(216,169,60,0.4); }
  .nav-cta { margin-top: 4px; min-height: 52px; font-size: 0.92rem !important; }
  @keyframes sheet-in { to { opacity: 1; transform: none; } }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .nav-links.is-open a { animation: none; opacity: 1; transform: none; }
}

/* ============ Horizontal-rectangle scrub + parallax copy ============ */
.scrub-grid { grid-template-columns: 0.86fr 1.28fr; }
.scrub-media { aspect-ratio: 16 / 9; box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(216,169,60,0.12); }
.scrub-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(7,22,39,0.5);
}
.scrub-copy { transform: translate3d(0, var(--plx, 0px), 0); will-change: transform; }
.scrub-bar { height: 4px; }
.scrub-bar i { box-shadow: 0 0 12px rgba(216,169,60,0.7); }
@media (min-width: 821px) {
  .scrub-stage { padding: 3vh 4vw; }
  .scrub-grid { max-width: 1240px; }
}
@media (prefers-reduced-motion: reduce) { .scrub-copy { transform: none; } }

/* ============ Quote wizard ============ */
.wizard { margin-top: 26px; }
.wiz-progress { list-style: none; display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 0 auto 28px; max-width: 420px; }
.wiz-dot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wiz-dot:not(:last-child) { flex: 1 1 auto; }
.wiz-dot:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px;
  background: rgba(216,169,60,0.24); border-radius: 2px;
}
.wiz-dot:not(:last-child).is-done::after { background: linear-gradient(90deg, var(--gold-bright), var(--gold)); }
.wiz-dot i {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(216,169,60,0.4); background: rgba(7,22,39,0.7);
  color: var(--cream-dim); font-style: normal; font-weight: 800; font-size: 0.86rem;
  transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.wiz-dot span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); transition: color 0.3s; }
.wiz-dot.is-on i { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); border-color: var(--gold-bright); transform: scale(1.08); box-shadow: 0 8px 22px rgba(216,169,60,0.4); }
.wiz-dot.is-on span { color: var(--gold-bright); }
.wiz-dot.is-done i { background: rgba(216,169,60,0.16); color: var(--gold-bright); border-color: var(--gold); }

.wiz-track { position: relative; }
.wiz-step { display: none; }
.wiz-step.is-active { display: block; animation: wiz-in 0.5s cubic-bezier(0.22,1,0.36,1); }
.wiz-step.is-active.is-back { animation: wiz-in-back 0.5s cubic-bezier(0.22,1,0.36,1); }
@keyframes wiz-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes wiz-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wiz-step.is-active, .wiz-step.is-active.is-back { animation: none; } }
.wiz-q { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 4.4vw, 2.3rem); color: var(--cream); text-align: center; margin-bottom: 20px; }
.wiz-hint { margin-top: 16px; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--gold-bright); }
.wiz-hint span { opacity: 0.8; display: inline-block; animation: hint-bob 1.7s ease-in-out infinite; }
@keyframes hint-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .wiz-hint span { animation: none; } }
.wiz-nav { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.wiz-nav .wiz-hint { margin-top: 0; flex: 1 1 auto; text-align: left; }
.wiz-nav--end { justify-content: flex-start; margin-top: 6px; }
.wiz-back {
  flex: 0 0 auto; min-height: 42px; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline); background: rgba(7,22,39,0.5); color: var(--cream-dim);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.wiz-back:hover { border-color: var(--gold); color: var(--cream); transform: translateX(-2px); }

/* Step 1 · big choice cards */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 30px 18px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(216,169,60,0.28); background: rgba(11,37,64,0.55); color: var(--cream);
  font-family: var(--sans); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.choice:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(216,169,60,0.1); box-shadow: 0 20px 44px rgba(0,0,0,0.4); }
.choice:active { transform: translateY(-1px) scale(0.99); }
.choice.is-on { border-color: var(--gold-bright); background: linear-gradient(160deg, rgba(216,169,60,0.22), rgba(11,37,64,0.5)); box-shadow: 0 16px 40px rgba(216,169,60,0.22); }
.choice-ic { width: 46px; height: 46px; color: var(--gold-bright); }
.choice-ic svg { width: 100%; height: 100%; }
.choice b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; color: var(--cream); letter-spacing: 0.02em; }
.choice-sub { font-size: 0.84rem; color: var(--cream-dim); }

/* Step 2 · options animate in */
.wiz-step[data-step="2"] .opts { gap: 10px; }
.opt { position: relative; overflow: hidden; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.25s; }
.opt::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg); transition: left 0.5s ease; pointer-events: none;
}
.opt:hover { transform: translateY(-2px); }
.opt:hover::after { left: 130%; }
.opt.is-on { box-shadow: 0 12px 30px rgba(216,169,60,0.3); animation: opt-pop 0.3s ease; }
@keyframes opt-pop { 0% { transform: scale(0.97); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .opt::after { display: none; } .opt.is-on { animation: none; } }

/* Step 3 · coach line + field stamps */
.coach {
  text-align: center; margin: -6px auto 18px; font-size: 0.95rem; font-weight: 700; color: var(--gold-bright);
  min-height: 1.3em;
}
.coach.pulse { animation: coach-pop 0.5s cubic-bezier(0.22,1,0.36,1); }
@keyframes coach-pop { 0% { transform: scale(0.9); opacity: 0.4; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .coach.pulse { animation: none; } }
.field { position: relative; }
.field input, .field textarea { transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, padding 0.2s; }
.field .stamp {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%) scale(0) rotate(-30deg);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-size: 0.82rem; box-shadow: 0 4px 12px rgba(216,169,60,0.5); pointer-events: none;
  opacity: 0; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
}
.field.has-area .stamp { top: 22px; transform: translateY(0) scale(0) rotate(-30deg); }
.field.is-done .stamp { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
.field.has-area.is-done .stamp { transform: translateY(0) scale(1) rotate(0); }
.field.is-done input, .field.is-done textarea {
  border-color: var(--gold-bright); background: rgba(216,169,60,0.1);
  box-shadow: 0 0 0 1px rgba(232,194,92,0.4), 0 0 18px rgba(216,169,60,0.18); padding-right: 44px;
}
.field.is-error input { border-color: #e88; background: rgba(230,120,120,0.08); }

/* ============ Wizard responsive ============ */
@media (max-width: 620px) {
  .choice-grid { grid-template-columns: 1fr; }
  .choice { flex-direction: row; justify-content: center; gap: 14px; padding: 20px 16px; }
  .choice-ic { width: 34px; height: 34px; }
  .wiz-dot span { font-size: 0.58rem; }
  .scrub-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v54 · hero de-blur + shine fix · full-width video cards
   · fish-hook headline · cleaner quote options
   ============================================================ */

/* ---- Hero: lose the heavy navy wash; blend photo bottom-to-top ---- */
.hero-bg::after {
  background: linear-gradient(180deg,
    rgba(7,22,39,0.42) 0%,
    rgba(7,22,39,0.12) 24%,
    rgba(7,22,39,0.06) 46%,
    rgba(7,22,39,0.50) 76%,
    var(--navy) 100%);
}
.hero h1 { text-shadow: 0 3px 30px rgba(4,11,20,0.9), 0 1px 4px rgba(0,0,0,0.6); }
.hero-eyebrow { text-shadow: 0 2px 12px rgba(4,11,20,0.75); }
.hero-lede { text-shadow: 0 2px 16px rgba(4,11,20,0.85); }
.hero-lede strong { color: #fff; }
.hero-note { text-shadow: 0 1px 10px rgba(4,11,20,0.7); }
.hero h1 { will-change: transform; }

/* ---- Shine: brighter stops so it never muddies on navy, + soft depth ---- */
em, .hi {
  background: linear-gradient(100deg, #e9c15a 0%, #fff4cf 22%, #f2ce74 44%, #ffe7a0 64%, #e9c15a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* transparent-fill glyphs let any inherited text-shadow bleed through and tint the gold */
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  animation: lux-shine 6s linear infinite;
}
.hero h1 em { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)); }
.seg-btn em, .opt em, .btn em, .nav-cta em, .choice em, .choice b em { filter: none; }

/* ============ Full-width video cards, copy fitted inside ============ */
.scrub-stage { padding: 2.5vh clamp(12px, 3vw, 34px); }
.scrub-grid, .scrub-grid--flip { display: block; grid-template-columns: none; width: 100%; max-width: 1400px; margin: 0 auto; }
.scrub-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--nav-h) - 6vh); margin: 0 auto;
  border-radius: 22px; overflow: hidden;
}
.scrub-media video { width: 100%; height: 100%; object-fit: cover; }
/* readability scrim toward the text side (left, or right when flipped) */
.scrub-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(4,11,20,0.94) 0%, rgba(4,11,20,0.78) 26%, rgba(4,11,20,0.30) 52%, transparent 74%),
    linear-gradient(0deg, rgba(4,11,20,0.5) 0%, transparent 32%);
}
.scrub-grid--flip .scrub-media::before {
  background:
    linear-gradient(270deg, rgba(4,11,20,0.94) 0%, rgba(4,11,20,0.78) 26%, rgba(4,11,20,0.30) 52%, transparent 74%),
    linear-gradient(0deg, rgba(4,11,20,0.5) 0%, transparent 32%);
}
.scrub-copy {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; transform: none;
  width: min(58%, 640px); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3.4vw, 52px);
}
.scrub-grid--flip .scrub-copy { left: auto; right: 0; }
.scrub-copy .h2 { font-size: clamp(1.6rem, 3.6vw, 2.9rem); text-shadow: 0 2px 16px rgba(0,0,0,0.7); }
.scrub-copy > p { color: #eef2f6; font-size: clamp(0.9rem, 1.3vw, 1.02rem); text-shadow: 0 2px 12px rgba(0,0,0,0.75); }
.scrub-copy .ticks li, .scrub-copy .pull, .scrub-copy .stages b, .scrub-copy .stages span { text-shadow: 0 1px 9px rgba(0,0,0,0.7); }
.scrub-copy .ticks li { color: #f4f7fa; }
.scrub-copy .stages li { background: rgba(6,16,28,0.5); }
.scrub-bar { z-index: 3; }

@media (max-width: 820px) {
  .scrub-grid, .scrub-grid--flip { grid-template-columns: none; }
  .scrub-media { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--nav-h) - 4vh); }
  .scrub-media::before, .scrub-grid--flip .scrub-media::before {
    background: linear-gradient(0deg, rgba(4,11,20,0.96) 0%, rgba(4,11,20,0.72) 34%, transparent 66%);
  }
  .scrub-copy, .scrub-grid--flip .scrub-copy {
    position: absolute; inset: auto 0 0 0; top: auto; width: 100%;
    justify-content: flex-end; padding: 16px 18px 22px;
  }
  .scrub-copy .h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .scrub-copy .stages { gap: 5px; margin-top: 10px; }
  .scrub-copy .stages li { padding: 8px 11px; }
}

/* ============ Quote step 2: three stacked tier cards ============ */
.wiz-step[data-step="2"] .opts { grid-template-columns: 1fr; gap: 12px; max-width: 560px; margin: 0 auto; }
.wiz-step[data-step="2"] .opt {
  min-height: 64px; display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  text-align: left; padding: 15px 18px; font-size: 0.95rem; line-height: 1.25;
}
.wiz-step[data-step="2"] .opt::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gold-bright); background: transparent;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.wiz-step[data-step="2"] .opt.is-on::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px var(--gold-bright); }
.opt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opt-main b { font-size: 1.02rem; letter-spacing: 0.01em; }
.opt-sub { font-size: 0.8rem; font-weight: 500; opacity: 0.72; line-height: 1.4; }
.opt.is-on .opt-sub { opacity: 0.85; }
.opt-flag {
  flex: 0 0 auto; margin-left: auto; align-self: center; padding: 4px 11px; border-radius: 999px;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--hairline); background: rgba(11,37,64,0.7); color: var(--cream-dim);
}
.opt-flag--gold {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  border-color: rgba(249,247,242,0.35); box-shadow: 0 6px 18px rgba(216,169,60,0.35);
}
.opt.is-on .opt-flag { background: rgba(7,22,39,0.85); color: var(--gold-bright); border-color: rgba(7,22,39,0.4); }
/* badge + price tier stacked on the card's right edge */
.opt-tail { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.opt-tail .opt-flag { margin-left: 0; }
.opt-price {
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.22em; padding-left: 0.22em;
  color: var(--gold-bright); text-shadow: 0 1px 8px rgba(216,169,60,0.35);
}
.opt.is-on .opt-price { color: var(--navy); text-shadow: none; }
@media (max-width: 520px) {
  .opt-tail .opt-flag { font-size: 0.52rem; padding: 3px 8px; letter-spacing: 0.1em; }
  .opt-price { font-size: 0.95rem; }
}
/* reel encore: after the first full play the clip keeps looping under a soft navy tint */
.reel-slide .scrub-media::after { background: rgba(7,22,39,0); transition: background 1.8s ease; }
.reel-slide.is-encore .scrub-media::after { background: rgba(7,22,39,0.26); }

/* recap banner on the last step: celebrate the pick, loud and clear */
.wiz-recap {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 14px; padding: 11px 24px;
  border-radius: 999px; border: 1px solid var(--gold); background: rgba(216,169,60,0.14);
  color: var(--cream); font-size: 1.02rem; font-weight: 600;
  box-shadow: 0 10px 28px rgba(216,169,60,0.2);
  animation: recap-pop 0.5s cubic-bezier(0.22,1.3,0.36,1);
}
.wiz-recap b { color: var(--gold-bright); font-weight: 800; }
@keyframes recap-pop { 0% { transform: scale(0.86); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wiz-recap { animation: none; } }

/* short praise line tucked under a correctly filled field */
.oknote {
  display: block; overflow: hidden; max-height: 0; opacity: 0; margin: 0;
  padding: 0 4px; text-align: left; font-style: normal; font-size: 0.74rem; font-weight: 600;
  color: var(--gold-bright); transition: max-height 0.35s ease, opacity 0.4s ease 0.05s, margin 0.35s ease;
}
.field.is-done .oknote { max-height: 1.5em; opacity: 1; margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .oknote { transition: none; } }
.wiz-step[data-step="3"] { text-align: center; }
.wiz-step[data-step="3"] .row, .wiz-step[data-step="3"] .field { text-align: left; }

/* ============================================================
   v55 · shine fix (uniform gold + sweep) · Learn Lucent badge
   · scroll letter-reveal
   ============================================================ */

/* Uniform bright gold with a narrow white highlight that sweeps across —
   no gradient stop is ever dark, so a letter can never look muddy on navy. */
em, .hi {
  background: linear-gradient(100deg,
    var(--gold-bright) 0%, var(--gold-bright) 40%,
    #fff7e0 47%, #ffffff 50%, #fff7e0 53%,
    var(--gold-bright) 60%, var(--gold-bright) 100%);
  background-size: 260% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* neutral shadow only — navy shadows (and any inherited text-shadow) tint the gold blue */
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  animation: lux-shine 5s linear infinite;
}
.hero h1 em { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)); }

/* ---- Learn Lucent badge (the "we're teaching you" cue) ---- */
.learn-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  padding: 8px 16px 8px 13px; border-radius: 999px;
  border: 1px solid var(--gold-bright);
  background: linear-gradient(120deg, rgba(216,169,60,0.24), rgba(232,194,92,0.09));
  box-shadow: 0 6px 20px rgba(216,169,60,0.3), inset 0 0 0 1px rgba(232,194,92,0.22);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-bright); text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.learn-badge .learn-star { font-size: 0.95em; line-height: 1; animation: learn-spin 5.5s linear infinite; }
@keyframes learn-spin { to { transform: rotate(360deg); } }
.learn-text { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .learn-badge .learn-star { animation: none; } }

/* ---- Scroll letter-reveal: each letter rises + untilts in a stagger ---- */
.ltr, .ltr-unit {
  display: inline-block; will-change: transform, opacity;
  opacity: 0; transform: translateY(0.5em) rotate(5deg);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2,1,0.36,1);
  transition-delay: calc(var(--i, 0) * 26ms);
}
.lit .ltr, .lit .ltr-unit { opacity: 1; transform: none; }
.ltr-unit { transform-origin: 50% 100%; }   /* keep the shine word intact, animate as one */
@media (prefers-reduced-motion: reduce) {
  .ltr, .ltr-unit { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   v56 · Learn Lucent = gold card, shining-navy label, description inside
   ============================================================ */
.learn-card {
  max-width: 500px; margin: 4px 0 18px; padding: 15px 18px 16px; border-radius: 16px;
  background: linear-gradient(155deg, #fbeecb 0%, #f1d488 46%, #e3b955 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.35), inset 0 1px 2px rgba(255,255,255,0.55);
}
/* the badge is now just the label row inside the gold card (no pill) */
.learn-card .learn-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 7px; padding: 0;
  border: 0; background: none; box-shadow: none; text-shadow: none;
}
.learn-card .learn-star { color: #0B2540; font-size: 0.95em; line-height: 1; animation: learn-spin 5.5s linear infinite; }
/* shining navy-blue "LEARN LUCENT" */
.learn-card .learn-text {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 1rem;
  background: linear-gradient(100deg,
    #0a2036 0%, #0a2036 40%, #34659c 47%, #cfe6ff 50%, #34659c 53%, #0a2036 60%, #0a2036 100%);
  background-size: 260% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lux-shine 4.5s linear infinite;
}
.learn-card .learn-desc { color: #10273f; font-size: 0.93rem; line-height: 1.55; font-weight: 500; text-shadow: none; }
.learn-card .learn-desc b { color: #0B2540; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .learn-card .learn-star { animation: none; }
  .learn-card .learn-text { animation: none; }
}
@media (max-width: 820px) {
  .learn-card { max-width: 100%; padding: 12px 14px 13px; margin: 4px 0 12px; }
  .learn-card .learn-desc { font-size: 0.88rem; line-height: 1.5; }
  .learn-card .learn-text { font-size: 0.9rem; }
}

/* ============================================================
   v58 · How-we-clean REEL — one pinned stage, three clips panned,
   active clip bigger + playing, unique 3-segment progress bar.
   ============================================================ */
.reel { position: relative; height: var(--reel-h, 300vh); }
.reel-stage {
  position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h));
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.6vh, 30px); padding: 2vh 0;
}
/* ONE wide frame holding all three clips at once. The active panel opens up,
   plays, and brings its copy in; the other two sit back — paused and dimmed —
   so you always see the whole process but only ever watch one step. */
.reel-window {
  position: relative;
  width: min(1240px, 94vw);
  height: min(640px, calc(100svh - var(--nav-h) - 140px));
  overflow: hidden; border-radius: 22px; border: 1px solid var(--hairline);
  background: var(--navy);
  box-shadow: 0 34px 90px rgba(0,0,0,0.66), 0 0 0 1px rgba(232,194,92,0.2), 0 0 46px rgba(216,169,60,0.14);
}
.reel-track { display: flex; flex-direction: row; gap: 6px; width: 100%; height: 100%; }
.reel-slide {
  position: relative; overflow: hidden; cursor: pointer;
  flex: 1 1 0; min-width: 0; flex-grow: 0.34;           /* flex-grow animates cleanly */
  opacity: 0.62; filter: saturate(0.45) brightness(0.58);
  transition: flex-grow 0.75s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease, filter 0.5s ease;
}
.reel-slide.is-active { flex-grow: 2.7; opacity: 1; filter: none; cursor: default; }
.reel-slide .scrub-media {
  width: 100%; height: 100%; margin: 0; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; max-height: none;
}
/* a resting panel wears its step name so you know what's queued up */
.reel-slide::after {
  content: attr(data-label);
  position: absolute; left: 50%; bottom: 20px; z-index: 4;
  transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  transition: opacity 0.35s ease; pointer-events: none;
}
.reel-slide.is-active::after { opacity: 0; }
/* the detail text arrives just after the panel finishes opening */
.reel-slide .scrub-copy { transition: opacity 0.5s ease 0.18s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.18s; }
.reel-slide:not(.is-active) .scrub-copy { opacity: 0; transform: translateY(18px); pointer-events: none; }

/* Unique progress bar: three gold segments with step labels (clickable) */
.reel-bar { display: flex; gap: clamp(8px, 1.6vw, 18px); justify-content: center; z-index: 5; }
.reel-seg {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: clamp(80px, 13vw, 140px); padding: 6px 0 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reel-seg::before { content: ""; width: 100%; height: 4px; border-radius: 4px; background: rgba(249,247,242,0.16); }
.reel-seg i {
  position: absolute; top: 6px; left: 0; height: 4px; width: var(--f, 0%); border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 10px rgba(216,169,60,0.65); transition: width 0.12s linear;
}
.reel-seg b {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.3s, transform 0.3s;
}
.reel-seg.is-active b { color: var(--gold-bright); transform: translateY(-1px); }
.reel-seg:hover b { color: var(--cream); }

/* ---- Learn Lucent: small + transparent (frosted), less distracting ---- */
.learn-card {
  max-width: 400px; margin: 2px 0 12px; padding: 9px 13px 10px; border-radius: 12px;
  background: rgba(7,18,32,0.4); border: 1px solid rgba(232,194,92,0.5);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); box-shadow: none;
}
.learn-card .learn-badge { margin-bottom: 5px; }
.learn-card .learn-star { color: var(--gold-bright); }
.learn-card .learn-text {
  font-size: 0.8rem; letter-spacing: 0.14em;
  background: linear-gradient(100deg, var(--gold-bright) 0%, var(--gold-bright) 40%, #fff7e0 47%, #ffffff 50%, #fff7e0 53%, var(--gold-bright) 60%, var(--gold-bright) 100%);
  background-size: 260% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.learn-card .learn-desc { color: #e9eff6; font-size: 0.84rem; line-height: 1.5; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.learn-card .learn-desc b { color: #fff; }

@media (max-width: 820px) {
  /* Phones: the three panels stack, so the open one grows downward instead of sideways */
  .reel-window { width: 94vw; height: min(640px, calc(100svh - var(--nav-h) - 120px)); }
  .reel-track { flex-direction: column; gap: 5px; }
  /* resting strips keep enough height to read as video, not just a bar */
  .reel-slide { flex-grow: 0.5; }
  .reel-slide.is-active { flex-grow: 2.8; }
  .reel-slide::after {
    writing-mode: horizontal-tb; transform: translateX(-50%); bottom: 9px;
    font-size: 0.64rem; letter-spacing: 0.16em;
  }
  .reel-seg { width: clamp(70px, 26vw, 120px); }
  .reel-seg b { font-size: 0.56rem; letter-spacing: 0.06em; }
  .learn-card { max-width: 100%; }
}

/* ============================================================
   v90 · permanent header · larger logo & menu
   · hero: pattern blend, video framing, lede contrast
   ============================================================ */

/* ---- Header is always present, not just once you scroll ---- */
.nav {
  background: rgba(5,15,27,0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216,169,60,0.16);
  padding: 12px clamp(14px, 4vw, 34px);
}
.nav.is-stuck { background: rgba(5,15,27,0.97); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }

/* ---- Bigger brand mark ---- */
.nav-brand img { height: 56px; }
.foot-logo { height: 58px; }

/* ---- Roomier open menu ---- */
@media (max-width: 820px) {
  .nav { padding: 10px 16px; }
  .nav-brand img { height: 46px; }
  .nav-toggle { width: 50px; height: 46px; padding: 10px 8px; }
  .nav-toggle span { height: 2.5px; margin: 5px 0; }
  .nav-links { gap: 9px; padding: 10px 4px 16px; margin-top: 12px; }
  .nav-links.is-open { max-height: 88svh; }
  .nav-links a { padding: 19px 20px; font-size: 1.12rem; border-radius: 14px; }
  .nav-cta { min-height: 60px; font-size: 1rem !important; }
}

/* ---- Hero: the guilloche fades up out of the footage, so the page
        background and the film become one continuous surface ---- */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/lwc-pattern.svg?v=137") repeat;
  background-size: 960px 560px;
  -webkit-mask-image: linear-gradient(180deg, transparent 46%, #000 88%);
  mask-image: linear-gradient(180deg, transparent 46%, #000 88%);
}

/* ---- Hero footage sits lower so the valley plane reads ---- */
.hero-bg video, .hero-bg img { object-position: center 18%; }

/* ---- Hero lede: brighter, so it holds against the footage ---- */
.hero-lede {
  color: #eef3f9; font-weight: 500;
  text-shadow: 0 2px 10px rgba(4,11,20,0.95), 0 1px 26px rgba(4,11,20,0.8);
}
.hero-lede strong { color: #fff; font-weight: 700; }
.hero-note { color: rgba(249,247,242,0.86); }
.hero-eyebrow {
  color: #f5d98a;
  text-shadow: 0 2px 10px rgba(4,11,20,0.95), 0 1px 22px rgba(4,11,20,0.85);
}

/* closed sheet must take no room — max-height:0 alone still leaks its
   padding/margin, which left a dead strip under the permanent bar */
@media (max-width: 820px) {
  .nav-links:not(.is-open) { padding: 0; margin-top: 0; border-top: 0; }
}
@media (max-width: 820px) { .nav { column-gap: 16px; row-gap: 0; } }

/* ============================================================
   v94 · footer: solid deep navy, pattern stops at the hairline
   ============================================================ */
.foot, .site-foot {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
}
/* on short pages the canvas below the body box was still the lighter navy,
   leaving a mismatched strip under the footer — match it to the footer */
html { background: var(--ink); }

/* ============================================================
   v96 · pattern presence · fixed backdrop · hero fade lower
   ============================================================ */

/* The guilloche stays put while the page moves over it — the reel and the
   long bands no longer drag the backdrop past you. */
body { background-attachment: fixed; }
.hero::after { background-attachment: fixed; }

/* the fade was starting too high up the hero — hold the footage longer */
.hero::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 68%, #000 97%);
  mask-image: linear-gradient(180deg, transparent 68%, #000 97%);
}

/* dark bands were smothering the pattern — let more of it through */
.band-alt { background: rgba(7,22,39,0.42); }

/* ============================================================
   v97 · three-tier header: utility strip / brand row / nav row
   ============================================================ */
.nav {
  display: block; padding: 0;
  background: rgba(7,22,39,0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* --- tier 1: utility strip --- */
.nav-util {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0 14px; padding: 7px clamp(14px, 4vw, 34px);
  background: linear-gradient(90deg, #071a2e, #0d2a49 50%, #071a2e);
  border-bottom: 1px solid rgba(216,169,60,0.16);
  font-size: 0.78rem; color: var(--cream-dim); letter-spacing: 0.02em;
}
.nav-util-item { display: inline-flex; align-items: center; gap: 7px; }
.nav-util-item b { color: var(--cream); font-weight: 700; }
.nav-util svg { width: 15px; height: 15px; color: var(--gold-bright); flex: 0 0 auto; }
.nav-util-sep { width: 1px; height: 13px; background: rgba(216,169,60,0.34); }

/* --- tier 2: brand + phone + quote --- */
.nav-main {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px clamp(14px, 4vw, 34px);
}
.nav-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--cream); text-decoration: none; font-size: 1.16rem; font-weight: 700;
  letter-spacing: 0.01em; white-space: nowrap; transition: color 0.2s;
}
.nav-phone svg { width: 19px; height: 19px; color: var(--gold-bright); }
.nav-phone:hover { color: var(--gold-bright); }
.btn-quote {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 14px 24px; border-radius: 10px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--navy); text-decoration: none;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(216,169,60,0.34);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-quote:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(216,169,60,0.5); }

/* --- tier 3: primary nav row --- */
.nav-links {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 clamp(14px, 4vw, 34px) 10px;
  border-top: 1px solid rgba(216,169,60,0.1);
  padding-top: 10px;
}
.nav-links a {
  padding: 10px 15px; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream-dim);
}
.nav-links a:hover { color: var(--gold-bright); background: rgba(216,169,60,0.1); }
.nav-links .nav-cta { display: none; }   /* the quote button lives in tier 2 on desktop */

@media (max-width: 1080px) {
  .nav-links a { padding: 10px 11px; font-size: 0.76rem; letter-spacing: 0.04em; }
  .nav-phone { font-size: 1rem; }
  .btn-quote { padding: 12px 18px; font-size: 0.76rem; }
}

/* --- mobile: strip condenses, sheet carries everything --- */
@media (max-width: 820px) {
  .nav-util { gap: 0 10px; font-size: 0.7rem; padding: 6px 14px; }
  .nav-util-ins, .nav-util-sep:last-of-type { display: none; }
  .nav-main { padding: 9px 16px; gap: 12px; }
  .nav-actions { gap: 10px; }
  .btn-quote { display: none; }             /* CTA moves into the sheet */
  .nav-phone { font-size: 0; gap: 0; padding: 9px; border-radius: 10px; border: 1px solid var(--hairline); }
  .nav-phone svg { width: 21px; height: 21px; }
  .nav-links {
    justify-content: stretch; flex-direction: column; border-top: 0; padding-bottom: 0; padding-top: 0;
  }
  .nav-links.is-open { padding-top: 10px; }
  .nav-links a { text-transform: none; letter-spacing: 0.01em; }
  .nav-links .nav-cta { display: flex; justify-content: center; }
}

/* ============================================================
   v98 · services photo cards · solar band
   ============================================================ */
.svc-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 880px; margin: 30px auto 26px;
}
.svc-card {
  display: flex; flex-direction: column; padding: 0; cursor: pointer; text-align: left;
  border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden;
  background: rgba(11,37,64,0.6); color: var(--cream); font-family: var(--sans);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
.svc-card-img { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, filter 0.3s; filter: saturate(0.92) brightness(0.86); }
.svc-card:hover .svc-card-img img { transform: scale(1.05); filter: saturate(1) brightness(0.98); }
.svc-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,22,39,0.85) 100%);
}
.svc-card-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.svc-card-body b { font-size: 1.18rem; letter-spacing: 0.01em; }
.svc-card-sub { font-size: 0.9rem; color: var(--cream-dim); }
.svc-card-cue {
  margin-top: 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-bright);
}
.svc-card.is-on { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright), 0 18px 44px rgba(216,169,60,0.22); }
.svc-card.is-on .svc-card-img img { filter: saturate(1) brightness(1); }
@media (max-width: 700px) { .svc-cards { grid-template-columns: 1fr; } }

/* ---- solar band ---- */
.solar-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 30px; }
.solar-media { border-radius: 20px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.solar-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.solar-copy .learn-card { max-width: 100%; }
.solar-copy .ticks { margin-top: 16px; }
@media (max-width: 820px) { .solar-grid { grid-template-columns: 1fr; } }

/* ---- Valley map ---- */
.valley-map {
  margin: 32px auto 26px; max-width: 1000px;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 26px 70px rgba(0,0,0,0.5);
}
.valley-map img { width: 100%; height: auto; display: block; }

/* ============================================================
   v100 · Learn Lucent: roomier card, readable points
   ============================================================ */
.learn-card {
  padding: 16px 18px; border-radius: 16px;
  background: rgba(7,22,39,0.72);
  border: 1px solid rgba(216,169,60,0.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.learn-desc {
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  line-height: 1.68; color: #e9eff6; letter-spacing: 0.004em;
}
.learn-points {
  list-style: none; margin: 13px 0 0; display: flex; flex-direction: column; gap: 10px;
}
.learn-points li {
  position: relative; padding-left: 22px;
  font-size: clamp(0.86rem, 1.05vw, 0.95rem); line-height: 1.62;
  color: #dfe7f0; text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.learn-points li::before {
  content: "✦"; position: absolute; left: 0; top: 0.05em;
  color: var(--gold-bright); font-size: 0.82em;
}
.learn-points b { color: #fff; font-weight: 700; }
.learn-points em { font-style: italic; }
@media (max-width: 820px) {
  .learn-points li { font-size: 0.84rem; line-height: 1.55; }
  .learn-card { padding: 13px 14px; }
}

/* ============================================================
   v102 · home page service doors
   ============================================================ */
.svc-doors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  max-width: 1040px; margin: 34px auto 0;
}
.svc-door {
  display: flex; flex-direction: column; text-decoration: none; color: var(--cream);
  border: 1px solid var(--hairline); border-radius: 20px; overflow: hidden;
  background: rgba(11,37,64,0.55);
  transition: transform 0.28s, box-shadow 0.28s, border-color 0.28s;
}
.svc-door:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.svc-door-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-door-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) saturate(0.95); transition: transform 0.6s, filter 0.35s; }
.svc-door:hover .svc-door-img img { transform: scale(1.06); filter: brightness(1) saturate(1.02); }
.svc-door-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(7,22,39,0.9) 100%); }
.svc-door-body { display: flex; flex-direction: column; gap: 9px; padding: 22px 24px 26px; }
.svc-door-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); }
.svc-door-body b { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; }
.svc-door-sub { font-size: 0.95rem; line-height: 1.6; color: var(--cream-dim); }
.svc-door-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.svc-door-list span { position: relative; padding-left: 20px; font-size: 0.88rem; color: #dfe7f0; }
.svc-door-list span::before { content: "✦"; position: absolute; left: 0; color: var(--gold-bright); font-size: 0.8em; }
.svc-door-cue {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright);
}
.svc-door:hover .svc-door-cue { gap: 13px; }
@media (max-width: 760px) { .svc-doors { grid-template-columns: 1fr; } }

/* ============================================================
   v104 · wizard: toast transitions · solar step · clean progress
   ============================================================ */

/* --- praise toast: pops over the track while the next step arrives --- */
.wiz-track { position: relative; }
.wiz-toast {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  pointer-events: none; opacity: 0; padding: 20px;
}
.wiz-toast-star { font-size: 2rem; color: var(--gold-bright); filter: drop-shadow(0 0 18px rgba(216,169,60,0.8)); }
.wiz-toast-msg {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 800; color: var(--cream);
  letter-spacing: 0.01em; text-shadow: 0 2px 18px rgba(4,11,20,0.9); max-width: 30ch;
}
.wiz-toast.show { animation: toast-run 1.5s cubic-bezier(0.22,1,0.36,1) forwards; }
.wiz-toast.show .wiz-toast-star { animation: toast-star 1.5s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes toast-run {
  0% { opacity: 0; transform: scale(0.92); }
  14% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes toast-star {
  0% { transform: rotate(-90deg) scale(0.4); }
  20% { transform: rotate(12deg) scale(1.25); }
  38% { transform: rotate(0) scale(1); }
  100% { transform: rotate(0) scale(1); }
}
/* while the toast runs, soften the incoming step underneath it */
.wiz-toast.show ~ .wiz-step.is-active { animation: step-under 1.5s ease forwards; }
/* the toast lays an opaque cream-pattern panel over the step, so the step just
   fully disappears behind it — no blur, nothing peeking through */
@keyframes step-under { 0%, 62% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wiz-toast.show, .wiz-toast.show .wiz-toast-star { animation: none; opacity: 0; }
  .wiz-toast.show ~ .wiz-step.is-active { animation: none; }
}

/* --- solar step --- */
.wiz-solar-sub { text-align: center; color: var(--cream-dim); font-size: 0.95rem; max-width: 46ch; margin: -6px auto 22px; }
.choice-solar { border-color: rgba(216,169,60,0.5); }
.choice-solar .choice-ic { color: var(--gold-bright); }

/* --- progress: one centered rail, numbered coins, tidy labels --- */
.wiz-progress {
  list-style: none; display: flex; align-items: flex-start; justify-content: center;
  gap: 0; margin: 26px auto 30px; padding: 0; max-width: 460px; position: relative;
}
.wiz-progress::before {
  content: ""; position: absolute; top: 15px; left: 12%; right: 12%;
  height: 2px; background: rgba(216,169,60,0.22); border-radius: 2px;
}
.wiz-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.wiz-dot i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-style: normal; font-size: 0.8rem; font-weight: 800;
  background: var(--navy); border: 2px solid rgba(216,169,60,0.35); color: var(--cream-dim);
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.wiz-dot span {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.3s;
}
.wiz-dot.is-on i {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright); color: var(--navy); transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(216,169,60,0.16), 0 6px 18px rgba(216,169,60,0.4);
}
.wiz-dot.is-on span { color: var(--gold-bright); }
.wiz-dot.is-done i { background: rgba(216,169,60,0.16); border-color: var(--gold); color: var(--gold-bright); }
.wiz-dot.is-done i::before { content: "✓"; }
.wiz-dot.is-done i { font-size: 0; }
.wiz-dot.is-done i::before { font-size: 0.85rem; }

/* ============================================================
   v105 · Lucent Loyal — the gold card treatment
   ============================================================ */
.loyal-lux {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(165deg, rgba(11,37,64,0.95), rgba(16,49,80,0.88)) padding-box,
    linear-gradient(120deg, rgba(216,169,60,0.9), rgba(255,244,207,0.9) 25%, rgba(216,169,60,0.45) 50%, rgba(255,231,160,0.9) 75%, rgba(216,169,60,0.9)) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: loyal-border 7s linear infinite;
  box-shadow: 0 24px 70px rgba(216,169,60,0.14), 0 10px 32px rgba(0,0,0,0.4);
}
@keyframes loyal-border { to { background-position: 0 0, 300% 0; } }

/* a soft sheen sweeps the whole card like light across glass */
.loyal-lux::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(232,194,92,0.09) 45%, rgba(255,255,255,0.05) 50%, transparent);
  transform: skewX(-16deg);
  animation: loyal-sheen 5.4s ease-in-out infinite;
}
@keyframes loyal-sheen { 0%, 55% { left: -70%; } 85%, 100% { left: 140%; } }

/* drifting brand sparkles */
.loyal-spark {
  position: absolute; z-index: -1; color: var(--gold-bright); pointer-events: none;
  animation: loyal-float 9s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(216,169,60,0.65);
}
.loyal-spark:nth-child(1) { left: 7%;  top: 74%; font-size: 1rem;    animation-delay: 0s; }
.loyal-spark:nth-child(2) { left: 21%; top: 16%; font-size: 0.7rem;  animation-delay: -2.2s; }
.loyal-spark:nth-child(3) { left: 55%; top: 8%;  font-size: 0.85rem; animation-delay: -4.4s; }
.loyal-spark:nth-child(4) { left: 82%; top: 66%; font-size: 1.15rem; animation-delay: -6.1s; }
.loyal-spark:nth-child(5) { left: 93%; top: 24%; font-size: 0.65rem; animation-delay: -7.6s; }
@keyframes loyal-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  50% { transform: translateY(-16px) scale(1.25); opacity: 0.9; }
}

/* the 10% figure breathes */
.loyal-fig { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.loyal-fig:hover { transform: translateY(-4px); border-color: var(--gold-bright); box-shadow: 0 14px 34px rgba(216,169,60,0.2); }
.loyal-fig-star b { animation: loyal-pulse 2.8s ease-in-out infinite; display: block; }
@keyframes loyal-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(232,194,92,0); }
  50% { transform: scale(1.08); text-shadow: 0 0 26px rgba(232,194,92,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .loyal-lux, .loyal-lux::after, .loyal-spark, .loyal-fig-star b { animation: none; }
  .loyal-lux { border-color: var(--gold); }
}

/* ============================================================
   v106 · mobile: shorter images, less scrolling
   ============================================================ */
@media (max-width: 700px) {
  .svc-door-img, .svc-card-img { aspect-ratio: 16 / 8; }
  .svc-door-img img, .svc-card-img img { height: 100%; }
  .solar-media img { aspect-ratio: 16 / 9; max-height: 220px; }
  .valley-map-wrap img, .valley-map { max-height: 300px; object-fit: cover; }
  .sub-hero { min-height: 34vh; padding-top: 9vh; padding-bottom: 5vh; }
  .mission-hero { min-height: 52vh; }
  .loyal-hero { min-height: 46vh; }
  .hero { min-height: 78svh; }
  .ba { aspect-ratio: 16 / 10; }
  .gal-item img { aspect-ratio: 4 / 3; }
  .band { padding-top: clamp(40px, 8vw, 64px); padding-bottom: clamp(40px, 8vw, 64px); }
}

/* ============================================================
   v107 · sub-page hero photos
   ============================================================ */
.sub-hero, .mission-hero, .loyal-hero { position: relative; isolation: isolate; overflow: hidden; }
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(7,22,39,0.78) 0%, rgba(9,28,50,0.62) 45%, var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover; background-position: center 30%, center 30%;
}
.sub-hero h1, .mission-hero h1, .loyal-hero h1 { text-shadow: 0 3px 26px rgba(4,11,20,0.9); }

/* ============================================================
   v108 · satellite map framing + area chips
   ============================================================ */
.valley-sat {
  position: relative; margin: 34px auto 22px; max-width: 1020px;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(216,169,60,0.55);
  box-shadow: 0 0 0 1px rgba(216,169,60,0.16), 0 30px 80px rgba(0,0,0,0.55), 0 12px 30px rgba(216,169,60,0.08);
}
.valley-sat img { display: block; width: 100%; height: auto; }
.valley-sat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,22,39,0.34) 0%, transparent 24%, transparent 62%, rgba(7,22,39,0.72) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(7,22,39,0.4) 100%);
}
.valley-sat-tags {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 9px;
}
.sat-tag {
  padding: 8px 16px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--cream);
  background: rgba(7,22,39,0.78); border: 1px solid var(--hairline);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sat-tag--main { color: var(--navy); background: linear-gradient(160deg, var(--gold-bright), var(--gold)); border-color: rgba(249,247,242,0.4); }
.area-chips {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 860px; margin: 0 auto 20px; padding: 0;
}
.area-chips li {
  padding: 7px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: var(--cream-dim); background: rgba(11,37,64,0.6); border: 1px solid rgba(216,169,60,0.2);
}
.area-chips .chip-more { color: var(--gold-bright); border-color: var(--gold); }
@media (max-width: 700px) {
  .valley-sat { border-radius: 16px; }
  .valley-sat img { max-height: 260px; object-fit: cover; }
  .area-chips li { font-size: 0.72rem; padding: 6px 11px; }
}

/* narrow phones: strip keeps only the serving line, CTAs stack full-width */
@media (max-width: 480px) {
  .nav-util { justify-content: center; }
  .nav-util-sep, .nav-util-item:not(:first-child) { display: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* ============================================================
   v110 · split seam · toast type · hero blend · simpler lists
   · mobile Learn Lucent · rebuilt dropdown
   ============================================================ */

/* ---- 1. the half-home/half-business join gets a real seam ---- */
.svc-door-img { position: relative; }
.svc-door-img::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* a soft gold light-line exactly along the diagonal where the two photos meet */
  background: linear-gradient(107deg,
    transparent 46%,
    rgba(216,169,60,0.16) 49%,
    rgba(255,244,207,0.75) 50%,
    rgba(216,169,60,0.16) 51%,
    transparent 54%);
  mix-blend-mode: screen;
}
.svc-door-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* haze either side of the seam so the two exposures meet gently */
  background: linear-gradient(107deg,
    transparent 38%, rgba(7,22,39,0.34) 50%, transparent 62%);
}

/* ---- 2. transition toast: display face, held longer ---- */
.wiz-toast-msg {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.6vw, 2.6rem); line-height: 1.05; letter-spacing: 0.015em;
  max-width: 16ch;
}
.wiz-toast.show { animation-duration: 2.3s; }
.wiz-toast.show .wiz-toast-star { animation-duration: 2.3s; }
.wiz-toast.show ~ .wiz-step.is-active { animation-duration: 2.3s; }
@keyframes toast-run {
  0% { opacity: 0; transform: scale(0.94); }
  10% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}
@keyframes step-under { 0%, 40% { opacity: 0.22; filter: blur(2px); } 100% { opacity: 1; filter: blur(0); } }

/* the wizard holds its height so steps can't shove the page around */
.wiz-track { min-height: 430px; }
@media (max-width: 700px) { .wiz-track { min-height: 500px; } }

/* ---- 3. the guilloche breathes through every hero image ---- */
.sub-hero::after, .mission-hero::after, .loyal-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/lwc-pattern.svg?v=137") repeat;
  background-size: 960px 560px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 55%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 55%, #000 100%);
}

/* ---- 4. long stacked boxes become quiet text rows ---- */
.svc-list { display: block; max-width: 720px; margin: 26px auto 0; }
.svc-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  padding: 14px 0; border: 0; background: none; border-radius: 0;
  border-bottom: 1px solid rgba(216,169,60,0.14);
}
.svc-list li::before {
  content: "✦"; grid-row: 1 / span 2; align-self: start;
  color: var(--gold-bright); font-size: 0.9rem; line-height: 1.5;
}
.svc-list li b { font-size: 1rem; color: var(--cream); }
.svc-list li span { font-size: 0.92rem; color: var(--cream-dim); line-height: 1.55; }
.svc-list .svc-star { border-bottom: 0; }
.svc-list .svc-star b { color: var(--gold-bright); }

/* the service doors lose their inner boxed list too */
.svc-door-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.svc-door-list span {
  padding: 0; border: 0; background: none; font-size: 0.84rem; color: var(--cream-dim);
}
.svc-door-list span::before { content: "✦ "; color: var(--gold-bright); }

/* ---- 5. Learn Lucent gets out of the way on phones ---- */
@media (max-width: 820px) {
  .learn-card { padding: 12px 14px; border-radius: 12px; }
  .learn-badge { font-size: 0.58rem; padding: 5px 11px 5px 9px; margin-bottom: 8px; }
  .learn-desc { font-size: 0.82rem; line-height: 1.45; }
  .learn-points { margin-top: 8px; gap: 5px; }
  .learn-points li { font-size: 0.78rem; line-height: 1.4; padding-left: 16px; }
  .scrub-copy .h2 { font-size: clamp(1.3rem, 5.6vw, 1.8rem); }
  .scrub-copy .kicker { font-size: 0.6rem; margin-bottom: 6px; }
}

/* ---- 6. the dropdown, rebuilt ---- */
@media (max-width: 820px) {
  .nav.menu-open { background: rgba(5,17,31,0.99); }
  .nav-links {
    display: flex; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    margin: 0; padding: 0 14px; border-top: 0;
    transition: max-height 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease, padding 0.42s ease;
  }
  .nav-links.is-open {
    max-height: min(76svh, 620px); opacity: 1; overflow-y: auto;
    padding: 8px 14px 18px; margin-top: 4px;
    border-top: 1px solid rgba(216,169,60,0.18);
  }
  .nav-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 6px; margin: 0; border-radius: 0; background: none; border: 0;
    border-bottom: 1px solid rgba(216,169,60,0.1);
    font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
    color: var(--cream); opacity: 0; transform: translateY(8px);
  }
  .nav-links a::after {
    content: "›"; display: block; color: var(--gold-bright);
    font-size: 1.3rem; line-height: 1; opacity: 0.6;
    position: static; width: auto; height: auto; background: none; transform: none;
  }
  .nav-links a:active { background: rgba(216,169,60,0.08); }
  .nav-links.is-open a { animation: sheet-in 0.42s cubic-bezier(0.22,1,0.36,1) forwards; }
  .nav-links.is-open a:nth-child(1) { animation-delay: 0.03s; }
  .nav-links.is-open a:nth-child(2) { animation-delay: 0.07s; }
  .nav-links.is-open a:nth-child(3) { animation-delay: 0.11s; }
  .nav-links.is-open a:nth-child(4) { animation-delay: 0.15s; }
  .nav-links.is-open a:nth-child(5) { animation-delay: 0.19s; }
  .nav-links.is-open a:nth-child(6) { animation-delay: 0.23s; }
  .nav-links.is-open a:nth-child(7) { animation-delay: 0.27s; }

  /* the quote button: a proper full-width CTA, not a list row */
  .nav-links .nav-cta {
    display: flex; justify-content: center; margin: 16px 0 0;
    padding: 17px 20px; border-radius: 12px; border: 1px solid rgba(249,247,242,0.32);
    background: linear-gradient(160deg, var(--gold-bright), var(--gold));
    color: var(--navy) !important; font-weight: 800; font-size: 0.92rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(216,169,60,0.36);
    overflow: hidden;
  }
  .nav-links .nav-cta::after { content: none; }   /* no chevron, no stray sheen box */
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .nav-links.is-open a { animation: none; opacity: 1; transform: none; }
}

/* phones: hero carries only the essentials */
@media (max-width: 700px) {
  .hero-lede { font-size: 0.98rem; max-width: 32ch; }
  .badge-extra { display: none; }
  .hero-badges { gap: 7px; margin-top: 18px; }
  .badge { font-size: 0.74rem; padding: 6px 12px; }
  .hero-note { font-size: 0.76rem; }
  .hero-eyebrow { font-size: 0.64rem; letter-spacing: 0.18em; margin-bottom: 12px; }
  .sub-hero .lede, .mission-sub { font-size: 0.92rem; max-width: 34ch; margin-left: auto; margin-right: auto; }
  .svc-door-sub { font-size: 0.86rem; }
}

/* the base bar sets align-items:center; in the stacked sheet that shrink-wraps
   every row (and the CTA) to its text width — stretch them full width */
@media (max-width: 820px) {
  .nav-links { align-items: stretch; }
  .nav-links a { width: 100%; }
}

/* the underline rule uses a:not(.nav-cta)::after, which outranks a plain
   .nav-links a::after — match its specificity so the chevron actually shows */
@media (max-width: 820px) {
  .nav-links a:not(.nav-cta)::after {
    content: "›"; display: block; position: static;
    width: auto; height: auto; background: none; transform: none;
    color: var(--gold-bright); font-size: 1.3rem; line-height: 1; opacity: 0.55;
  }
}

/* ============================================================
   v114 · smooth scrolling: the backdrop gets its own layer
   ============================================================ */
/* Parallax background restored: the guilloche rides the body with a fixed
   attachment, so it stays put and the page parallaxes over it (reverted the
   position:fixed backdrop layer). */
body {
  background: var(--navy) url("assets/lwc-pattern.svg?v=137") repeat;
  background-size: 960px 560px;
  background-attachment: fixed;
}
/* the hero's fade-in copy of the pattern rides the same viewport anchor */
.hero::after { will-change: opacity; }

/* the fixed nav and the reel stage get their own layers too, so they don't
   force the page to re-rasterise while it moves */
.nav { will-change: transform; }
.reel-stage { will-change: transform; }

/* the seam is baked into valley-split.jpg now — the CSS overlay was drawing a
   diagonal streak across every door image, including Solar Care */
.svc-door-img::before, .svc-door-img::after { content: none; }

/* bullet marks need their own column, not an inline prefix that crowds the text */
.svc-door-list span { display: inline-flex; align-items: baseline; gap: 7px; }
.svc-door-list span::before { content: "✦"; color: var(--gold-bright); font-size: 0.74rem; }

/* ============================================================
   v116 · lean heros · pattern-blended heros · text-based lists
   · smaller mobile Learn Lucent · rebuilt dropdown + fixed CTA
   · calmer scrolling (no headline glitch)
   ============================================================ */

/* ---- 1. the guilloche blends across the WHOLE hero image, not just its
        base — a faint, even presence up top rising to solid at the fold ---- */
.hero::after {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.13) 0%, rgba(0,0,0,0.16) 52%, #000 96%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.13) 0%, rgba(0,0,0,0.16) 52%, #000 96%);
}
/* sub-page heros: a touch more pattern so it reads through the photo too */
.sub-hero::after, .mission-hero::after, .loyal-hero::after { opacity: 0.55; }

/* ---- 2. first-screen hero: fewer things competing on phones ---- */
@media (max-width: 700px) {
  .hero-eyebrow { display: none; }          /* the util strip already says where we serve */
  .hero-note { display: none; }             /* the button copy already says "free" */
  .hero h1 { font-size: clamp(2.1rem, 9.4vw, 3rem); }
  .hero-lede { margin-top: 14px; }
  .hero-badges { margin-top: 16px; }
  .hero-cta { margin-top: 22px; }
}

/* ---- 3. section heros on subpages: quieter, less stacked copy ---- */
@media (max-width: 700px) {
  .sub-hero { min-height: 30vh; padding-top: 8vh; padding-bottom: 4vh; }
  .sub-hero .kicker { margin-bottom: 8px; }
  .sub-hero h1, .sub-hero .h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .sub-hero p, .sub-hero .lede { font-size: 0.9rem; max-width: 30ch; margin-left: auto; margin-right: auto; }
}

/* ---- 4. "Your home" & co: no more tall stacked boxes — quiet text rows ---- */
.promise { display: block; margin-top: 22px; max-width: 680px; }
.promise li {
  padding: 14px 0 14px 30px; position: relative;
  border: 0; border-radius: 0; background: none;
  border-bottom: 1px solid rgba(216,169,60,0.14);
  font-size: 1rem; color: var(--cream-dim);
}
.promise li:last-child { border-bottom: 0; }
.promise li::before {
  content: "✦"; position: absolute; left: 4px; top: 15px;
  color: var(--gold-bright); font-size: 0.92rem;
}

/* ---- 5. Learn Lucent on phones: compact, bullets only (drop the paragraph) ---- */
@media (max-width: 820px) {
  .learn-card { padding: 10px 12px; border-radius: 11px; margin: 2px 0 10px; }
  .learn-card .learn-desc { display: none; }           /* keep it to tight bullet points */
  .learn-badge { font-size: 0.56rem; margin-bottom: 6px; }
  .learn-points { margin-top: 0; gap: 5px; }
  .learn-points li { font-size: 0.8rem; line-height: 1.4; padding-left: 15px; }
  /* the step-03 bullet is a paragraph in disguise — trim its weight */
  .learn-points li b { font-weight: 700; }
}

/* ---- 6. transition toast: display face (Impact), held a beat longer ---- */
.wiz-toast-msg { font-family: var(--display); }
.wiz-toast.show,
.wiz-toast.show .wiz-toast-star,
.wiz-toast.show ~ .wiz-step.is-active { animation-duration: 1.9s; }

/* ---- 7. the mobile dropdown, rebuilt clean — and a glitch-free CTA ---- */
@media (max-width: 820px) {
  .nav.menu-open { background: rgba(5,16,30,0.99); box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
  .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0 16px;
    border-top: 0;
    transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.26s ease, padding 0.4s ease;
  }
  .nav-links.is-open {
    max-height: min(80svh, 640px); overflow-y: auto; opacity: 1;
    padding: 6px 16px 20px; margin-top: 4px;
    border-top: 1px solid rgba(216,169,60,0.16);
  }
  .nav-links a {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 17px 4px; margin: 0; border: 0; border-radius: 0; background: none;
    border-bottom: 1px solid rgba(216,169,60,0.12);
    font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
    color: var(--cream); opacity: 0; transform: translateY(8px);
  }
  .nav-links a:not(.nav-cta)::after {
    content: "›"; display: block; position: static; width: auto; height: auto;
    background: none; transform: none;
    color: var(--gold-bright); font-size: 1.35rem; line-height: 1; opacity: 0.5;
  }
  .nav-links a:not(.nav-cta):active { background: rgba(216,169,60,0.08); }
  .nav-links.is-open a { animation: sheet-in 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
  .nav-links.is-open a:nth-child(1) { animation-delay: 0.03s; }
  .nav-links.is-open a:nth-child(2) { animation-delay: 0.07s; }
  .nav-links.is-open a:nth-child(3) { animation-delay: 0.11s; }
  .nav-links.is-open a:nth-child(4) { animation-delay: 0.15s; }
  .nav-links.is-open a:nth-child(5) { animation-delay: 0.19s; }
  .nav-links.is-open a:nth-child(6) { animation-delay: 0.23s; }
  .nav-links.is-open a:nth-child(7) { animation-delay: 0.27s; }

  /* the Free Quote CTA: one clean gold button — no chevron, no sheen streak,
     no double-height. This is what was glitching. */
  .nav-links .nav-cta,
  .nav-links a.nav-cta {
    display: flex; justify-content: center; align-items: center;
    margin: 18px 0 2px; padding: 16px 20px; min-height: 0;
    border: 1px solid rgba(249,247,242,0.32); border-radius: 12px; border-bottom: 1px solid rgba(249,247,242,0.32);
    background: linear-gradient(160deg, var(--gold-bright), var(--gold));
    color: var(--navy) !important; font-weight: 800; font-size: 0.95rem !important;
    letter-spacing: 0.1em; text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(216,169,60,0.34); overflow: hidden;
    opacity: 0; transform: translateY(8px);
  }
  .nav-links .nav-cta::after,
  .nav-links a.nav-cta::after { content: none !important; display: none !important; }
  .nav-links .nav-cta:active { transform: translateY(0) scale(0.99); }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .nav-links.is-open a, .nav-links .nav-cta { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   v118 · darker navy ground · lighter navy surfaces · lower hero
   fade · smaller quote pill · Sparkle AI assistant
   ============================================================ */
:root { --navy-deep: #050f1b; --navy-light: #17385e; }

/* ---- 1. the page reads as a proper dark navy ---- */
html, body { background-color: var(--navy-deep); }

/* ---- 2. the "light navy" surfaces sit a shade UP from the ground so they
        actually read as raised panels, not blend into it ---- */
.band-alt { background: rgba(23,56,94,0.34); }
.rev, .svc-card, .svc-door, .veil, .faq-item, .thanks, .loyal-fig,
.gal-item, .valley-sat, .area-chips li, .badge {
  background-color: var(--navy-light);
}
.badge { background: rgba(23,56,94,0.7); }
.area-chips li { background: rgba(23,56,94,0.65); }
.rev { background: rgba(23,56,94,0.72); }
.svc-card, .svc-door { background: rgba(23,56,94,0.6); }
.veil, .faq-item { background: rgba(23,56,94,0.55); }
/* form controls: a hair lighter so fields read against the dark ground */
.quote input, .quote textarea { background: rgba(23,56,94,0.4); }
.opt { background: rgba(23,56,94,0.34); }

/* ---- 3. keep the guilloche out of the hero until near its base ---- */
.hero::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 66%, #000 98%);
  mask-image: linear-gradient(180deg, transparent 66%, #000 98%);
}

/* ---- 4. the bottom-right "free quote" pill, smaller (Sparkle sits below it) ---- */
.pill {
  min-height: 0; padding: 8px 15px; font-size: 0.64rem; letter-spacing: 0.06em;
  right: 18px; bottom: 84px;
}
@media (max-width: 620px) { .pill { right: 14px; bottom: 80px; padding: 7px 13px; font-size: 0.6rem; } }
/* while Sparkle is open, the pill steps aside */
body.spark-open .pill { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* ============ Sparkle — the AI assistant ============ */
.spark-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 95;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px 11px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(249,247,242,0.32);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--navy); font-family: var(--sans); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.04em;
  box-shadow: 0 12px 30px rgba(216,169,60,0.4);
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.spark-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(216,169,60,0.5); }
.spark-launch .spark-star {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(7,22,39,0.9); color: var(--gold-bright); font-size: 0.95rem;
  animation: learn-spin 5.5s linear infinite;
}
.spark-launch .spark-dot {
  position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%;
  background: #2ec16b; border: 2px solid var(--navy);
}
body.spark-open .spark-launch { opacity: 0; transform: translateY(20px) scale(0.9); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .spark-launch .spark-star { animation: none; } }

.spark-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 96;
  width: min(378px, calc(100vw - 28px));
  height: min(560px, calc(100svh - 96px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; border: 1px solid rgba(216,169,60,0.4);
  background: var(--navy-deep);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,194,92,0.14), 0 0 50px rgba(216,169,60,0.12);
  opacity: 0; transform: translateY(24px) scale(0.96); pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
body.spark-open .spark-panel { opacity: 1; transform: none; pointer-events: auto; }

.spark-head {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: linear-gradient(120deg, rgba(216,169,60,0.22), rgba(23,56,94,0.5));
  border-bottom: 1px solid rgba(216,169,60,0.24);
}
.spark-avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-size: 1.25rem; box-shadow: 0 6px 18px rgba(216,169,60,0.4);
}
.spark-avatar span { animation: learn-spin 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .spark-avatar span { animation: none; } }
.spark-id { display: flex; flex-direction: column; line-height: 1.2; }
.spark-id b { font-size: 1rem; color: var(--cream); font-weight: 800; letter-spacing: 0.01em; }
.spark-id small { font-size: 0.72rem; color: var(--gold-bright); display: flex; align-items: center; gap: 5px; }
.spark-id small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2ec16b; box-shadow: 0 0 8px #2ec16b; }
.spark-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(249,247,242,0.2); background: rgba(7,22,39,0.5); color: var(--cream);
  font-size: 20px; line-height: 1; display: grid; place-items: center; transition: background 0.2s, border-color 0.2s;
}
.spark-close:hover { background: rgba(216,169,60,0.18); border-color: var(--gold); }

.spark-log { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 10px; }
.spark-msg { max-width: 84%; padding: 11px 14px; border-radius: 15px; font-size: 0.9rem; line-height: 1.5; }
.spark-msg.bot {
  align-self: flex-start; background: var(--navy-light); color: var(--cream);
  border: 1px solid rgba(216,169,60,0.16); border-bottom-left-radius: 5px;
}
.spark-msg.user {
  align-self: flex-end; background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--navy); font-weight: 600; border-bottom-right-radius: 5px;
}
.spark-msg b { color: var(--gold-bright); }
.spark-msg.user b { color: var(--navy); }
.spark-msg a { color: var(--gold-bright); font-weight: 700; }
.spark-msg .spark-cta {
  display: inline-block; margin-top: 9px; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; box-shadow: 0 8px 20px rgba(216,169,60,0.34);
}
.spark-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 13px 15px; background: var(--navy-light); border-radius: 15px; border-bottom-left-radius: 5px; }
.spark-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); opacity: 0.5; animation: spark-bob 1.1s infinite; }
.spark-typing i:nth-child(2) { animation-delay: 0.15s; }
.spark-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes spark-bob { 0%,100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spark-typing i { animation: none; } }

.spark-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 14px 4px; }
.spark-chip {
  padding: 8px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(216,169,60,0.4); background: rgba(23,56,94,0.5); color: var(--gold-bright);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; transition: background 0.2s, transform 0.15s;
}
.spark-chip:hover { background: rgba(216,169,60,0.18); transform: translateY(-1px); }

.spark-foot { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(216,169,60,0.16); }
.spark-input {
  flex: 1 1 auto; min-height: 44px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(216,169,60,0.28); background: rgba(23,56,94,0.4); color: var(--cream);
  font-family: var(--sans); font-size: 16px;
}
.spark-input::placeholder { color: rgba(249,247,242,0.5); }
.spark-input:focus { outline: none; border-color: var(--gold); }
.spark-send {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; border: 0;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-size: 18px; display: grid; place-items: center; transition: transform 0.15s, box-shadow 0.2s;
}
.spark-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(216,169,60,0.4); }

@media (max-width: 620px) {
  .spark-panel { right: 10px; left: 10px; width: auto; bottom: 10px; height: min(76svh, 560px); }
  .spark-launch { right: 14px; bottom: 14px; }
}

/* ============================================================
   v119 · smaller media/reviews · plain city text · map detail
   · calmer premium loyalty · quote polish · Spark refinements
   ============================================================ */

/* ---- 1. photo / video cards take up less room ---- */
.svc-doors { max-width: 900px; gap: 18px; }
.svc-door-img { aspect-ratio: 16 / 9; }
.svc-cards { max-width: 720px; gap: 14px; }
.ba-grid { max-width: 920px; margin-left: auto; margin-right: auto; gap: 14px; }
.gal-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---- 2. reviews: smaller, tighter ---- */
.rev-grid { max-width: 980px; margin: 28px auto 0; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.rev { padding: 16px 17px; }
.rev blockquote { font-size: 0.9rem; }
.rev-stars { font-size: 0.86rem; margin-bottom: 8px; }
.rev cite { margin-top: 11px; font-size: 0.68rem; }

/* ---- 3. city names: quiet small text, no pills ---- */
.area-plain { gap: 4px 4px; margin-top: 20px; }
.area-plain li {
  padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--cream-dim); font-size: 0.82rem; font-weight: 500; position: relative;
}
.area-plain li:not(:last-child)::after { content: "·"; margin: 0 3px 0 6px; color: var(--gold); opacity: 0.7; }
.area-plain .chip-more { color: var(--gold-bright); font-weight: 700; }
.area-plain .chip-more::after { content: none; }

/* ---- 4. satellite map: zoom in, subtle logo + labels ---- */
.valley-sat-frame { display: block; position: relative; overflow: hidden; }
.valley-sat-frame img:first-child { width: 100%; height: auto; display: block; transform: scale(1.4); transform-origin: 46% 48%; }
.valley-sat-logo {
  position: absolute; right: 14px; bottom: 12px; width: clamp(96px, 15%, 150px); height: auto;
  opacity: 0.5; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7)); pointer-events: none; z-index: 3;
}
.sat-marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sat-mark {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
  color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.8);
}
.sat-mark::before {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 5px; vertical-align: middle;
  border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 6px rgba(232,194,92,0.9);
}
.sat-mark--faint { color: rgba(255,255,255,0.78); font-size: 0.6rem; }
.sat-mark--faint::before { background: rgba(255,255,255,0.7); box-shadow: none; }
.sat-mark--hq { color: var(--gold-bright); font-weight: 800; font-size: 0.72rem; }
/* labels sit on the dark satellite photo — keep them white even inside .band-cream (its span rule would force navy) */
.valley-sat .sat-mark { color: #fff; }
.valley-sat .sat-mark--faint { color: rgba(255,255,255,0.78); }
.valley-sat .sat-mark--hq { color: var(--gold-bright); }
.sat-mark--hq::before { content: none; }
.sat-pin { color: var(--gold-bright); animation: learn-spin 6s linear infinite; display: inline-block; }
@media (prefers-reduced-motion: reduce) { .sat-pin { animation: none; } }
@media (max-width: 700px) { .sat-mark { font-size: 0.56rem; } .sat-mark--hq { font-size: 0.62rem; } }

/* ---- 5. Lucent Loyal: premium, not a light show ---- */
.loyal-lux {
  animation: none; border: 1px solid var(--gold);
  background: linear-gradient(165deg, rgba(16,42,72,0.95), rgba(12,33,58,0.92));
  box-shadow: 0 20px 54px rgba(0,0,0,0.42), inset 0 1px 2px rgba(232,194,92,0.18);
}
.loyal-lux::after, .loyal-spark { display: none; }
.loyal-fig-star b { animation: none; }
.loyal-fig { transition: transform 0.25s, border-color 0.25s; }
/* the three figures: tidy, equal, never messy on small screens */
.loyal-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.loyal-fig { padding: 15px 8px; }
.loyal-fig b { font-size: 1.7rem; }
.loyal-fig span { font-size: 0.76rem; line-height: 1.35; margin-top: 5px; }
@media (max-width: 520px) {
  .loyal-fig { padding: 12px 6px; }
  .loyal-fig b { font-size: 1.4rem; }
  .loyal-fig span { font-size: 0.68rem; }
}

/* ---- 6. quote polish ---- */
/* no jarring re-render of the step when you pick something */
.wiz-toast.show ~ .wiz-step.is-active { animation: none !important; opacity: 1 !important; filter: none !important; }
/* drop the field stamp entirely */
.field .stamp { display: none !important; }
/* a filled field goes soft green (text + glow), not gold */
.field.is-done input, .field.is-done textarea {
  border-color: #86e0a0;
  background: rgba(134,224,160,0.10);
  color: #bff0cd;
  box-shadow: 0 0 0 1px rgba(134,224,160,0.4), 0 0 16px rgba(134,224,160,0.16);
  -webkit-text-fill-color: #bff0cd;
}
.field.is-done .oknote { color: #86e0a0; }
/* center the "Great choice" banner */
.wiz-recap { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }

/* ---- 7. no two buttons ever touch (mobile + desktop) ---- */
.hero-cta, .center-cta, .rev-links, .sub-cta, .wiz-nav, .choice-grid, .hero-badges, .spark-quick { gap: 12px; }
.wiz-nav { gap: 14px; }
.hero-cta .btn + .btn, .center-cta .btn + .btn { margin: 0; }

/* ---- 8. Spark: smaller, side-by-side with the quote pill, less glare ---- */
.spark-launch {
  right: 16px; bottom: 16px; padding: 8px 13px 8px 9px; font-size: 0.74rem; gap: 7px;
  box-shadow: 0 8px 20px rgba(216,169,60,0.32);
}
.spark-launch .spark-star { width: 22px; height: 22px; font-size: 0.82rem; }
.spark-launch .spark-dot { width: 8px; height: 8px; top: 4px; right: 6px; }
/* the free-quote pill sits just left of Spark, both small and in a row,
   with a clear gap so the two never touch */
.pill { right: 128px; bottom: 19px; }
@media (max-width: 620px) { .pill { right: 122px; bottom: 15px; } .spark-launch { right: 12px; bottom: 12px; } }
/* calmer panel — a clean shadow, no gold halo/glare */
.spark-panel { box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,194,92,0.14); }
.spark-head { background: linear-gradient(120deg, rgba(216,169,60,0.14), rgba(23,56,94,0.4)); }

/* Spark teaser bubble ("have a quick question?") */
.spark-teaser {
  position: fixed; z-index: 94; right: 16px; bottom: 62px; max-width: 210px;
  padding: 11px 14px; border-radius: 14px; border-bottom-right-radius: 4px;
  background: var(--navy-light); color: var(--cream); border: 1px solid rgba(216,169,60,0.34);
  font-size: 0.82rem; line-height: 1.4; box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.spark-teaser.show { opacity: 1; transform: none; }
.spark-teaser b { color: var(--gold-bright); }

/* Spark in-chat contact form */
.spark-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.spark-form input, .spark-form textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; font-family: var(--sans); font-size: 15px;
  border: 1px solid rgba(216,169,60,0.3); background: rgba(23,56,94,0.5); color: var(--cream);
}
.spark-form textarea { resize: vertical; min-height: 56px; }
.spark-form input::placeholder, .spark-form textarea::placeholder { color: rgba(249,247,242,0.5); }
.spark-form button {
  align-self: flex-start; margin-top: 2px; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
  font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
}

/* v119b · Learn Lucent as flowing copy (bullets removed) with gold key words */
.learn-flow { font-size: clamp(0.9rem, 1.15vw, 1.0rem); line-height: 1.62; color: #e9eff6; margin: 2px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.learn-flow b { color: var(--gold-bright); font-weight: 700; }
@media (max-width: 820px) { .learn-flow { font-size: 0.85rem; line-height: 1.5; } }

/* ============================================================
   v116 · map labels smaller · toast blur · darker page tops
   ============================================================ */
.valley-sat-logo { display: none; }
.sat-mark { font-size: 0.6rem; letter-spacing: 0.03em; font-weight: 600; }
.sat-mark--faint { font-size: 0.55rem; }
.sat-mark--hq { font-size: 0.66rem; }
@media (max-width: 700px) {
  .sat-mark { font-size: 0.46rem; }
  .sat-mark--faint { font-size: 0.42rem; }
  .sat-mark--hq { font-size: 0.52rem; }
}

/* quote toast: frost the step underneath while the message plays */
.wiz-toast {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(7,22,39,0);
  border-radius: 18px;
  transition: none;
}
.wiz-toast.show {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  background: rgba(7,22,39,0.58);
}

/* every page opens on the deep tone, not a lighter glow */
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg, rgba(4,13,24,0.9) 0%, rgba(6,18,33,0.68) 45%, var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
}
.sub-hero, .mission-hero, .loyal-hero { background: none; }

/* HQ pin reads as a badge, not another label */
.sat-mark--hq {
  background: rgba(7,22,39,0.75); padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(232,194,92,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* toast blur eases instead of popping */
.wiz-toast { transition: backdrop-filter 0.35s ease, background 0.35s ease; }

/* ============================================================
   v118 · service cards 2-up on mobile · heroes visible & blended
   ============================================================ */

/* the two care cards sit side by side even on phones */
@media (max-width: 700px) {
  .svc-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-card-img { aspect-ratio: 16 / 10; }
  .svc-card-body { padding: 10px 12px 12px; gap: 2px; }
  .svc-card-body b { font-size: 0.92rem; }
  .svc-card-sub { font-size: 0.68rem; }
  .svc-card-cue { font-size: 0.58rem; letter-spacing: 0.1em; margin-top: 4px; }
}

/* hero photos step forward: lighter mid-band, dark only at the very top */
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg, rgba(4,13,24,0.78) 0%, rgba(6,18,33,0.42) 42%, rgba(9,28,50,0.72) 78%, var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
}

/* the section after a hero fades its tint in instead of starting with a seam */
.sub-hero + .band-alt, .mission-hero + .band-alt, .loyal-hero + .band-alt {
  background: linear-gradient(180deg, rgba(7,22,39,0) 0%, rgba(7,22,39,0.42) 26%);
}
.sub-hero + .band, .mission-hero + .band, .loyal-hero + .band { background: transparent; }

/* ============================================================
   v119 · service doors 2-up on phones · heroes as visible as home
   ============================================================ */

/* the two care doors stay side by side on phones — compact, image-led */
@media (max-width: 760px) {
  .svc-doors { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-door-img { aspect-ratio: 4 / 3; }
  .svc-door-body { padding: 12px 12px 14px; gap: 5px; }
  .svc-door-kicker { font-size: 0.56rem; letter-spacing: 0.16em; }
  .svc-door-body b { font-size: 1.15rem; }
  .svc-door-sub { font-size: 0.74rem; line-height: 1.4; }
  .svc-door-list { display: none; }             /* detail lives on the service page */
  .svc-door-cue { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* sub-page hero photos show as clearly as the home video:
   dark only at the very top and bottom, wide clear window through the middle */
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.62) 0%,
      rgba(6,18,33,0.18) 26%,
      rgba(6,18,33,0.10) 50%,
      rgba(9,28,50,0.55) 82%,
      var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}
/* the photo brings its own brightness — let it read */
.sub-hero, .mission-hero, .loyal-hero { --hero-dim: 1; }

/* copy stays legible over the brighter photo with a heavier shadow */
.sub-hero h1, .mission-hero h1, .loyal-hero h1 { text-shadow: 0 3px 30px rgba(4,11,20,0.95), 0 1px 4px rgba(0,0,0,0.7); }
.sub-hero .lede, .sub-hero .kicker, .mission-sub, .veil-kicker,
.mission-hero .lede, .loyal-hero .lede {
  text-shadow: 0 2px 16px rgba(4,11,20,0.9);
}

/* ============================================================
   v120 · sub-page heros fade into the fixed parallax pattern,
          exactly like the start screen
   ============================================================ */

/* the pattern layer on every sub hero now behaves like the home hero's:
   invisible across the photo, then fading IN toward the fold — and pinned to
   the viewport so it holds still while the page scrolls (the parallax). */
.sub-hero::after, .mission-hero::after, .loyal-hero::after {
  background-attachment: fixed;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 95%);
  mask-image: linear-gradient(180deg, transparent 60%, #000 95%);
}

/* the photo itself dissolves toward the bottom so it melts into that pattern
   instead of ending on a hard navy band. Fixed body::before shows through. */
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0.15) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0.15) 100%);
}

/* the band right after a hero stays clear so the same fixed pattern flows
   straight through — no seam between hero and first section */
.sub-hero + .band, .sub-hero + .band-alt,
.mission-hero + .band, .mission-hero + .band-alt,
.loyal-hero + .band, .loyal-hero + .band-alt {
  background: transparent;
}

/* v120a · match the home hero's fade exactly, clear the photo fully at the
   fold so there's no tone seam where the section begins */
.sub-hero::after, .mission-hero::after, .loyal-hero::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 66%, #000 97%);
  mask-image: linear-gradient(180deg, transparent 66%, #000 97%);
}
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

/* v121 · no double-pattern seam: the photo darkens to solid navy at the fold
   (covering the body pattern) and ONLY the hero's own fixed pattern fades in
   over it — identical construction to the home hero, so it's seamless. */
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  -webkit-mask-image: none;
  mask-image: none;
}
.sub-hero::before, .mission-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.6) 0%,
      rgba(6,18,33,0.16) 27%,
      rgba(6,18,33,0.08) 48%,
      rgba(7,22,39,0.55) 78%,
      var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}

/* ============================================================
   v123 · taller sub heros · stepped How-We-Clean · benefits ·
          signs · schedule
   ============================================================ */

/* ---- 1. reveal more of the hero photo (home starter screen untouched) ---- */
.sub-hero { min-height: 62vh; padding: 15vh 6vw 9vh; }
.mission-hero { min-height: 78vh; }
.loyal-hero { min-height: 72vh; }
@media (max-width: 700px) {
  .sub-hero { min-height: 52vh; padding-top: 12vh; padding-bottom: 7vh; }
  .mission-hero { min-height: 64vh; }
  .loyal-hero { min-height: 60vh; }
}

/* ---- 2. How We Clean: a clean numbered flow, no floating cards ---- */
.steps-flow { margin-top: 44px; display: flex; flex-direction: column; gap: clamp(40px, 7vw, 84px); }
.step-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.step-row:nth-child(even) .step-media { order: 2; }
.step-media {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hairline); box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  aspect-ratio: 16 / 11;
}
.step-media video, .step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px rgba(7,22,39,0.4); pointer-events: none; }
.step-copy { position: relative; }
.step-num {
  font-family: var(--display); font-size: clamp(3.4rem, 7vw, 5.2rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px rgba(216,169,60,0.5); text-stroke: 1.5px rgba(216,169,60,0.5);
  display: block; margin-bottom: 10px;
}
.step-copy h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.04; color: var(--cream); margin-bottom: 12px;
}
.step-copy h3 em { color: var(--gold-bright); font-style: normal; }
.step-copy > p { color: var(--cream-dim); font-size: 1rem; line-height: 1.65; margin-bottom: 16px; }
.step-points { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; }
.step-points li { position: relative; padding-left: 26px; font-size: 0.94rem; line-height: 1.5; color: #dfe7f0; }
.step-points li::before {
  content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold-bright); font-size: 0.85em;
}
.step-points b { color: var(--cream); }
@media (max-width: 760px) {
  .step-row { grid-template-columns: 1fr; gap: 18px; }
  .step-row:nth-child(even) .step-media { order: 0; }
  .step-media { aspect-ratio: 16 / 10; }
  .step-num { margin-bottom: 4px; }
}

/* ---- 3. Benefits grid ---- */
.benefit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-top: 36px;
}
.benefit {
  padding: 24px 22px; border-radius: 16px;
  border: 1px solid var(--hairline); background: rgba(11,37,64,0.5);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.benefit:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.benefit-ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(160deg, rgba(216,169,60,0.2), rgba(11,37,64,0.4));
  border: 1px solid rgba(216,169,60,0.34);
}
.benefit-ic svg { width: 24px; height: 24px; color: var(--gold-bright); }
.benefit b { display: block; font-size: 1.06rem; color: var(--cream); margin-bottom: 6px; }
.benefit p { font-size: 0.9rem; line-height: 1.55; color: var(--cream-dim); }

/* ---- 4. Signs you need it ---- */
.signs-wrap { max-width: 760px; margin: 34px auto 0; }
.signs-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; }
.signs-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 18px 4px; border-bottom: 1px solid rgba(216,169,60,0.14);
}
.signs-list .sign-check {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(216,169,60,0.14); border: 1px solid var(--gold); color: var(--gold-bright);
  font-size: 0.9rem;
}
.signs-list b { color: var(--cream); font-size: 1rem; }
.signs-list span { display: block; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.55; margin-top: 3px; }
.signs-note { text-align: center; margin-top: 26px; color: var(--cream-dim); }
.signs-note b { color: var(--gold-bright); }

/* ---- 5. Schedule with us ---- */
.schedule-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 30px;
  counter-reset: sched;
}
.sched-step {
  position: relative; padding: 26px 22px 24px; border-radius: 16px; text-align: center;
  border: 1px solid var(--hairline); background: rgba(11,37,64,0.5);
}
.sched-step::before {
  counter-increment: sched; content: counter(sched);
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  font-family: var(--display); font-size: 1.3rem; color: var(--navy);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  box-shadow: 0 8px 20px rgba(216,169,60,0.35);
}
.sched-step b { display: block; font-size: 1.08rem; color: var(--cream); margin-bottom: 7px; }
.sched-step p { font-size: 0.9rem; line-height: 1.55; color: var(--cream-dim); }
@media (max-width: 720px) {
  .schedule-steps { grid-template-columns: 1fr; gap: 12px; }
  .sched-step { display: grid; grid-template-columns: auto 1fr; text-align: left; align-items: center; gap: 4px 16px; padding: 18px 20px; }
  .sched-step::before { margin: 0; grid-row: 1 / span 2; }
}

/* ============================================================
   v124 · How We Clean page: the pattern peels back to reveal
          the footage, with parallax depth
   ============================================================ */
.hw-intro { padding-bottom: 20px; }
.hw-reveal { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 48px); padding: 10px 5vw clamp(40px, 6vw, 72px); }

.hw-panel {
  position: relative; height: clamp(440px, 82vh, 820px);
  max-width: 1180px; width: 100%; margin: 0 auto;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  --rp: 0;                     /* reveal progress 0..1, set by JS */
  --plx: 0px;                  /* parallax offset, set by JS */
}

/* the footage sits behind, taller than the frame so it can parallax */
.hw-media { position: absolute; inset: -9% 0; z-index: 0; }
.hw-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translateY(var(--plx)) scale(calc(1 + (1 - var(--rp)) * 0.08));
  transition: transform 0.1s linear;
}

/* the guilloche veil that covers the footage, then dissolves as you scroll */
.hw-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--navy) url("assets/lwc-pattern.svg?v=137") repeat;
  background-size: 720px 420px;
  opacity: calc(1 - var(--rp));
  /* the pattern also wipes upward as it fades, so it reads as a curtain lifting */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) calc(100% - var(--rp) * 118%), rgba(0,0,0,0) calc(112% - var(--rp) * 118%));
}
/* a thin gold light-line rides the edge of the reveal */
.hw-panel::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 2px;
  top: calc((1 - var(--rp)) * 100%);
  background: linear-gradient(90deg, transparent, rgba(232,194,92,0.9) 50%, transparent);
  opacity: calc(var(--rp) * (1 - var(--rp)) * 4);
  pointer-events: none;
}

/* text panel: a legible scrim so copy reads over the footage */
.hw-tx {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: min(560px, 92%); padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(115deg, rgba(4,13,24,0.92) 0%, rgba(6,18,33,0.72) 62%, transparent 100%);
  opacity: calc(var(--rp) * var(--rp));       /* fades in as the photo reveals */
  transform: translateY(calc((1 - var(--rp)) * 24px));
}
.hw-step { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 10px; }
.hw-tx h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.02;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); color: var(--cream); margin-bottom: 12px;
  text-shadow: 0 2px 20px rgba(4,11,20,0.8);
}
.hw-tx h3 em { color: var(--gold-bright); font-style: normal; }
.hw-tx > p { color: #e6edf5; font-size: 1rem; line-height: 1.6; margin-bottom: 14px; text-shadow: 0 2px 14px rgba(4,11,20,0.7); }
.hw-points { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.hw-points li { position: relative; padding-left: 24px; font-size: 0.92rem; color: #dfe7f0; line-height: 1.45; }
.hw-points li::before { content: "✦"; position: absolute; left: 0; color: var(--gold-bright); font-size: 0.82em; }

@media (max-width: 700px) {
  .hw-panel { height: clamp(400px, 74vh, 620px); border-radius: 18px; }
  .hw-tx { width: 100%; }
  .hw-tx h3 { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* reduced motion: photos simply shown, no scroll animation */
@media (prefers-reduced-motion: reduce) {
  .hw-panel { --rp: 1; --plx: 0px; }
  .hw-media video { transform: none; }
  .hw-tx { opacity: 1; transform: none; }
}

/* ============================================================
   v125 · informative sections: professional, tighter, styled by type
   ============================================================ */

/* the three info sections sit closer and read as one flow, divided by hairlines */
#benefits, #signs, #schedule { padding-top: clamp(40px, 5.2vw, 66px); padding-bottom: clamp(40px, 5.2vw, 66px); }
#signs, #schedule { border-top: 1px solid rgba(216,169,60,0.12); }
/* tighter, calmer section intros for these */
#benefits > .wrap > .kicker, #signs > .wrap > .kicker, #schedule > .wrap > .kicker { margin-bottom: 9px; }
#benefits > .wrap > .h2, #signs > .wrap > .h2, #schedule > .wrap > .h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
#benefits > .wrap > .lede, #signs > .wrap > .lede, #schedule > .wrap > .lede { font-size: 1rem; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ---- BENEFITS · a crisp editorial card grid ---- */
.benefit-grid { gap: 1px; margin-top: 30px; background: rgba(216,169,60,0.12); border-radius: 16px; overflow: hidden; border: 1px solid rgba(216,169,60,0.16); }
.benefit {
  padding: 22px 22px 24px; border-radius: 0; border: 0;
  background: rgba(9,26,46,0.82); transition: background 0.25s;
}
.benefit:hover { transform: none; box-shadow: none; border: 0; background: rgba(16,40,68,0.9); }
.benefit-ic { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 13px; }
.benefit-ic svg { width: 20px; height: 20px; }
.benefit b {
  font-size: 0.98rem; font-weight: 700; letter-spacing: -0.01em; color: var(--cream);
  margin-bottom: 5px; line-height: 1.25;
}
.benefit p { font-size: 0.86rem; line-height: 1.5; color: var(--cream-dim); }
@media (max-width: 620px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ---- SIGNS · a diagnostic checklist, numbered and tight ---- */
.signs-wrap { max-width: 680px; margin-top: 28px; }
.signs-list { counter-reset: sign; }
.signs-list li {
  grid-template-columns: auto 1fr; gap: 14px; padding: 13px 2px;
  align-items: baseline;
}
.signs-list .sign-check {
  width: 24px; height: 24px; font-size: 0; background: none; border: 0;
  color: var(--gold-bright); position: relative;
}
.signs-list .sign-check::before {
  counter-increment: sign; content: counter(sign, decimal-leading-zero);
  font-family: var(--display); font-size: 1.05rem; font-weight: 400; color: rgba(216,169,60,0.7);
  letter-spacing: 0.02em;
}
.signs-list b { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.005em; }
.signs-list span { font-size: 0.87rem; line-height: 1.5; margin-top: 2px; color: var(--cream-dim); }
.signs-note { margin-top: 22px; font-size: 0.98rem; }

/* ---- SCHEDULE · a connected three-step process line ---- */
.schedule-steps { gap: 0; margin: 34px 0 28px; position: relative; }
.schedule-steps::before {
  content: ""; position: absolute; top: 46px; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(216,169,60,0.4) 0 8px, transparent 8px 15px);
  z-index: 0;
}
.sched-step {
  border: 0; background: none; padding: 0 18px; position: relative; z-index: 1;
}
.sched-step::before {
  width: 52px; height: 52px; font-size: 1.5rem; margin-bottom: 16px;
  border: 3px solid var(--navy);
}
.sched-step b { font-size: 1rem; letter-spacing: -0.005em; margin-bottom: 5px; }
.sched-step p { font-size: 0.86rem; line-height: 1.5; }
@media (max-width: 720px) {
  .schedule-steps::before { display: none; }
  .sched-step { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(11,37,64,0.4); }
}

/* ============================================================
   v126 · informative sections rebuilt as editorial text
          (no card/pill clutter) + hard-water before/after
   ============================================================ */

/* readable prose column, generous line height, zero boxes */
.info-body { max-width: 60ch; margin: 24px auto 0; }
.info-body p { font-size: 1.04rem; line-height: 1.75; color: #cfd8e4; margin: 0 0 20px; }
.info-body p:last-child { margin-bottom: 0; }
.info-body strong, .info-body b { color: var(--cream); font-weight: 700; }
.info-lead { font-size: 1.16rem !important; line-height: 1.6 !important; color: var(--cream) !important; }
#benefits, #hardwater, #schedule { padding-top: clamp(38px, 5vw, 62px); padding-bottom: clamp(38px, 5vw, 62px); }
#hardwater, #schedule { border-top: 1px solid rgba(216,169,60,0.12); }
#benefits > .wrap > .h2, #hardwater > .wrap > .h2, #schedule > .wrap > .h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* the hard-water before/after: one framed slider, centered */
.ba-solo { max-width: 700px; aspect-ratio: 4/3; margin: 32px auto 6px; }
.ba-tag { pointer-events: none; }
.ba-tag-after { left: auto; right: 12px; background: rgba(7,22,39,0.82); color: var(--cream); border: 1px solid var(--hairline); }
.ba-caption { text-align: center; font-size: 0.86rem; color: var(--cream-dim); margin-top: 12px; }
.ba-caption b { color: var(--gold-bright); }

/* schedule as clean numbered text, no boxes or connector line */
.sched-text { max-width: 600px; margin: 26px auto 28px; list-style: none; padding: 0; counter-reset: st; text-align: left; }
.sched-text li { position: relative; padding: 15px 0 15px 52px; border-bottom: 1px solid rgba(216,169,60,0.12); }
.sched-text li:last-child { border-bottom: 0; }
.sched-text li::before {
  counter-increment: st; content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 14px; font-family: var(--display); font-weight: 400;
  font-size: 1.5rem; color: rgba(216,169,60,0.7); letter-spacing: 0.02em;
}
.sched-text b { display: block; font-size: 1.02rem; color: var(--cream); margin-bottom: 3px; }
.sched-text span { font-size: 0.92rem; line-height: 1.55; color: var(--cream-dim); }

/* ============================================================
   v128 · the quote form is a cream sheet: dark ink on light,
          a deliberate change of gear when you start filling it out
   ============================================================ */
#quote-form.wizard {
  background: linear-gradient(180deg, #fbf9f3 0%, #f2ede2 100%);
  border: 1px solid rgba(11,37,64,0.14);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 42px) clamp(20px, 4vw, 40px) clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.6);
  color: var(--navy);
}
/* headings + copy go navy */
#quote-form .wiz-q { color: var(--navy); }
#quote-form em, #quote-form .wiz-q em { color: #b5862a; -webkit-text-fill-color: #b5862a; background: none; }
#quote-form .wiz-solar-sub { color: rgba(11,37,64,0.66); }

/* progress rail on cream */
#quote-form .wiz-progress::before { background: rgba(11,37,64,0.16); }
#quote-form .wiz-dot i { background: #fff; border-color: rgba(11,37,64,0.28); color: rgba(11,37,64,0.55); }
#quote-form .wiz-dot span { color: rgba(11,37,64,0.6); }
#quote-form .wiz-dot.is-on i { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); border-color: var(--gold); color: var(--navy); }
#quote-form .wiz-dot.is-on span { color: #c99a34; }
#quote-form .wiz-dot.is-done i { background: rgba(216,169,60,0.2); border-color: var(--gold); color: #c99a34; }

/* who/business choice cards */
#quote-form .choice { background: #fff; border-color: rgba(11,37,64,0.16); box-shadow: 0 6px 18px rgba(11,37,64,0.08); }
#quote-form .choice:hover { border-color: var(--gold); background: #fffdf8; box-shadow: 0 16px 36px rgba(11,37,64,0.14); }
#quote-form .choice.is-on { border-color: var(--gold); background: linear-gradient(160deg, rgba(216,169,60,0.18), rgba(255,255,255,0.9)); box-shadow: 0 14px 34px rgba(216,169,60,0.28); }
#quote-form .choice b { color: var(--navy); }
#quote-form .choice-sub { color: rgba(11,37,64,0.62); }
#quote-form .choice-ic { color: #c1922f; }

/* service tier options */
#quote-form .opt { background: #fff; border-color: rgba(11,37,64,0.16); color: var(--navy); }
#quote-form .opt:hover { border-color: var(--gold); }
#quote-form .opt .opt-sub { color: rgba(11,37,64,0.6); }
#quote-form .opt.is-on { color: var(--navy); }        /* is-on keeps the gold gradient bg */
#quote-form .opt-flag { background: rgba(11,37,64,0.08); color: rgba(11,37,64,0.66); border-color: rgba(11,37,64,0.18); }
#quote-form .opt.is-on .opt-flag { background: rgba(7,22,39,0.82); color: var(--gold-bright); border-color: transparent; }
#quote-form .wiz-step[data-step="2"] .opt::before { border-color: var(--gold); }
#quote-form .wiz-step[data-step="2"] .opt.is-on::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px var(--gold-bright); }

/* input fields */
#quote-form input, #quote-form textarea { background: #fff; border-color: rgba(11,37,64,0.22); color: var(--navy); }
#quote-form input::placeholder, #quote-form textarea::placeholder { color: rgba(11,37,64,0.44); }
#quote-form input:focus, #quote-form textarea:focus { border-color: var(--gold); background: #fffdf7; box-shadow: 0 0 0 3px rgba(216,169,60,0.18); }
#quote-form .field.is-done input, #quote-form .field.is-done textarea { border-color: var(--gold); background: rgba(216,169,60,0.08); }
#quote-form .field.is-error input { border-color: #c0392b; background: rgba(192,57,43,0.06); }

/* helper + secondary text */
#quote-form .coach { color: rgba(11,37,64,0.72); }
#quote-form .reward { color: #c99a34; }
#quote-form .wiz-hint { color: rgba(11,37,64,0.55); }
#quote-form .wiz-recap { background: rgba(216,169,60,0.16); color: #8f671a; border-color: rgba(216,169,60,0.4); }
#quote-form .wiz-recap b { color: var(--navy); }
#quote-form .privacy { color: rgba(11,37,64,0.6); }
#quote-form .oknote { color: #c99a34; }
#quote-form .form-err { color: #c0392b; }
#quote-form .wiz-back { color: rgba(11,37,64,0.66); }
#quote-form .wiz-back:hover { color: var(--navy); }

/* the praise toast plays over a cream form, so darken its scrim more so the
   cream message still pops */
#quote-form .wiz-toast.show { background: rgba(7,22,39,0.86); }

/* ============================================================
   v129 · the quote is a CREAM SECTION with the Lucent pattern
          showing through — not a card. Ink on cream.
   ============================================================ */
#quote {
  background: #d0d4d2 url("assets/lwc-pattern-cream.svg?v=153") repeat;
  background-size: 960px 560px;
  color: var(--navy);
  border-top: 1px solid rgba(11,37,64,0.12);
  border-bottom: 1px solid rgba(11,37,64,0.12);
}
/* the form is no longer a floating sheet — it sits straight on the section */
#quote-form.wizard { background: none; border: 0; box-shadow: none; padding: 0; }

/* section heading reads dark on cream */
#quote > .wrap > .kicker { color: #b0801f; }
#quote > .wrap > .h2 { color: var(--navy); }
#quote > .wrap > .h2 em { color: #b0801f; -webkit-text-fill-color: #b0801f; background: none; }
#quote > .wrap > .lede { color: rgba(11,37,64,0.72); }
#quote .quote-call { color: rgba(11,37,64,0.72); }
#quote .quote-call a { color: #c99a34; }

/* the white controls get a touch more lift so they read on the cream pattern */
#quote-form .choice, #quote-form .opt, #quote-form input, #quote-form textarea {
  box-shadow: 0 4px 14px rgba(11,37,64,0.07);
}

/* ============================================================
   v130 · quote polish:
     1. GOLD selections stay gold — only the input boxes change:
        dark-navy fields that highlight GREEN
     2. service tiers escalate in richness (Exterior → Lucent Finish)
     3. hint arrows point up · gold accent text runs lighter
     4. the praise toast is an opaque cream-pattern panel — no blur
     5. a longer, smoother fade blends cream into the navy pattern
   ============================================================ */

/* --- 1 · the ONLY green in the quote: the text boxes --- */
/* dark-navy fields sit as a deliberate contrast on the cream section */
#quote-form input, #quote-form textarea {
  background: var(--navy); border-color: rgba(11,37,64,0.55); color: var(--cream);
}
#quote-form input::placeholder, #quote-form textarea::placeholder { color: rgba(249,247,242,0.5); }
#quote-form input:focus, #quote-form textarea:focus {
  border-color: var(--green-bright); background: var(--navy-2);
  box-shadow: 0 0 0 3px rgba(70,189,134,0.35);
}
/* a completed field keeps its dark box with a green edge + green tick */
#quote-form .field.is-done input, #quote-form .field.is-done textarea {
  border-color: var(--green); background: var(--navy);
  box-shadow: 0 0 0 1px rgba(47,158,111,0.6), 0 0 18px rgba(47,158,111,0.18);
}
#quote-form .field.is-done .stamp {
  background: linear-gradient(160deg, var(--green-bright), var(--green));
  color: #fff; box-shadow: 0 4px 12px rgba(47,158,111,0.45);
}
#quote-form .field.is-error input {
  border-color: #e26b5e; background: rgba(226,107,94,0.16); color: var(--cream);
}

/* selected service tier: keep the gold highlight (v128 relied on the
   cascade, but the white base bg was actually winning — pin it here) */
#quote-form .opt.is-on {
  border-color: var(--gold-bright);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--navy);
  box-shadow: 0 12px 30px rgba(216,169,60,0.3);
}
#quote-form .opt.is-on .opt-sub { color: rgba(11,37,64,0.8); }
#quote-form .opt.is-on .opt-price { color: var(--navy); text-shadow: none; }

/* --- 2 · service tiers escalate in premium feel --- */
/* Exterior (tier 1): plain white card — the baseline */
/* Exterior & Interior (tier 2): a faint warm wash + gold-tinged edge */
#quote-form .opts .opt:nth-child(2):not(.is-on) {
  border-color: rgba(216,169,60,0.34);
  background: linear-gradient(180deg, #fffdf7 0%, #fbf3e2 100%);
}
/* Lucent Finish (tier 3): the richest — gilt border, warm gradient, inner sheen */
#quote-form .opts .opt:nth-child(3):not(.is-on),
#quote-form .opt.opt-star:not(.is-on) {
  border-color: rgba(216,169,60,0.6);
  background: linear-gradient(150deg, #fff8e6 0%, #f5e5bf 100%);
  box-shadow: 0 12px 30px rgba(216,169,60,0.22), inset 0 1px 2px rgba(255,255,255,0.85);
}
#quote-form .opt.opt-star:not(.is-on) .opt-main b { color: #96701a; }

/* --- 3 · praise toast: the message floats free — transparent, nothing
       behind it (the step under it is already hidden), sitting a little
       higher than centre. Ink message, gold star, no blur. --- */
#quote-form .wiz-toast { justify-content: center; padding-bottom: 76px; }
#quote-form .wiz-toast.show { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
#quote-form .wiz-toast-msg { color: var(--navy); text-shadow: none; }
#quote-form .wiz-toast-star {
  color: var(--gold); filter: drop-shadow(0 0 14px rgba(216,169,60,0.5));
}

/* --- 4 · lighter gold accent text across the quote --- */
#quote > .wrap > .kicker,
#quote .quote-call a,
#quote-form .reward,
#quote-form .oknote,
#quote-form .wiz-dot.is-on span { color: #d3a340; }
#quote > .wrap > .h2 em,
#quote-form em, #quote-form .wiz-q em {
  color: #d3a340; -webkit-text-fill-color: #d3a340;
}
#quote-form .choice-ic { color: #d9ac48; }
#quote-form .wiz-recap { color: #bd8c22; }

/* --- 5 · blend the cream pattern into the navy pattern, generously --- */
#quote {
  position: relative;
  background: transparent;   /* the pattern now lives on ::before so it can fade */
  border-top: 0; border-bottom: 0;
  /* extra vertical room so the long fade never reaches the heading/copy */
  padding-top: clamp(96px, 12vw, 150px);
  padding-bottom: clamp(96px, 12vw, 150px);
}
#quote::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #d0d4d2 url("assets/lwc-pattern-cream.svg?v=153") repeat;
  background-size: 960px 560px;
  /* lock the cream tile to the viewport just like the body's navy guilloche
     (also background-attachment: fixed) so the two patterns parallax together
     and register as ONE surface — the fade then reads as a real dissolve, not
     a separate layer sliding over the top */
  background-attachment: fixed;
  /* a long, eased fade at the TOP so cream dissolves out of the navy; the
     bottom stays solid (no fade) and meets the footer's gold hairline clean */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, rgba(0,0,0,0.08) 22px, rgba(0,0,0,0.35) 44px, rgba(0,0,0,0.72) 66px, #000 88px, #000 100%);
  mask-image: linear-gradient(180deg,
    transparent 0, rgba(0,0,0,0.08) 22px, rgba(0,0,0,0.35) 44px, rgba(0,0,0,0.72) 66px, #000 88px, #000 100%);
}
#quote > .wrap { position: relative; z-index: 1; }

/* ============================================================
   v131 · header: highlight the two services + a shiny Our Mission
   ============================================================ */
/* Window care & Solar care read as the featured services — a soft
   gold pill that stays lit so they stand out from the utility links */
.nav-links a.nav-svc {
  color: var(--gold-bright);
  background: rgba(216,169,60,0.12);
  border-radius: 8px;
}
.nav-links a.nav-svc:hover { color: #fff; background: rgba(216,169,60,0.22); }

/* Our Mission — "Our" is shiny, sweeping gold; "Mission" is clean white */
.nav-links a.nav-mission { color: #fff; font-weight: 800; }
.nav-links a.nav-mission:hover { background: rgba(216,169,60,0.12); }
.nav-links a.nav-mission .nm-shine {
  background: linear-gradient(100deg,
    #c99a34 0%, #e8c25c 28%, #fff6da 50%, #e8c25c 72%, #c99a34 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nm-shine 3.4s linear infinite;
}
@keyframes nm-shine { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .nav-links a.nav-mission .nm-shine { animation: none; background-position: 50% 0; }
}

/* ============================================================
   v132 · cream-top — every sub-page opens into the Lucent cream
          pattern right beneath its photo hero. The pattern fades
          IN at the top (blends down out of the dark hero) and stays
          solid to the bottom (no bottom fade), parallax-locked to
          the body's navy guilloche so the two read as one surface.
   ============================================================ */
.cream-top {
  position: relative; z-index: 0; background: transparent; color: var(--navy);
  padding-top: clamp(90px, 11vw, 140px);
}
.cream-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #d0d4d2 url("assets/lwc-pattern-cream.svg?v=153") repeat;
  background-size: 960px 560px; background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.08) 22px, rgba(0,0,0,0.35) 44px, rgba(0,0,0,0.72) 66px, #000 88px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.08) 22px, rgba(0,0,0,0.35) 44px, rgba(0,0,0,0.72) 66px, #000 88px, #000 100%);
}
/* editorial text turns ink on the cream */
.cream-top .kicker, .cream-top .veil-kicker { color: #c99a34; }
.cream-top h1, .cream-top h2, .cream-top h3, .cream-top .h2, .cream-top .sec-title { color: var(--navy); }
.cream-top em, .cream-top .h2 em, .cream-top h1 em, .cream-top h2 em {
  color: #c99a34; -webkit-text-fill-color: #c99a34; background: none;
}
.cream-top .lede, .cream-top .mission-sub { color: rgba(11,37,64,0.74); }
.cream-top p, .cream-top li { color: rgba(11,37,64,0.78); }
.cream-top .muted { color: rgba(11,37,64,0.58); }
.cream-top strong { color: var(--navy); }
.cream-top a { color: #c99a34; }
.cream-top a:hover { color: #7f5c15; }
.cream-top .svc-list li b { color: var(--navy); }
.cream-top .svc-list li span { color: rgba(11,37,64,0.68); }

/* self-contained dark cards keep their own dark styling on the cream */
.cream-top .loyal-wrap .veil-kicker { color: var(--gold-bright); }
.cream-top .loyal-wrap .sec-title, .cream-top .loyal-wrap p { color: var(--cream); }
.cream-top .loyal-wrap .sec-title em { color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright); }

/* ============================================================
   v133 · sub-page heroes melt into CREAM at the fold — cream is now
          the starter colour under every sub-hero, so the photo and the
          guilloche that fade in at the bottom are CREAM, not navy.
          (Mission is excluded: its hero drops to the footer, not a
          cream section, so it keeps the navy handoff.)
   ============================================================ */
/* the photo dissolves to cream at the fold instead of to navy */
.sub-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%,
      rgba(6,18,33,0.42) 42%,
      rgba(28,38,52,0.10) 66%,
      rgba(190,180,158,0.42) 84%,
      #d0d4d2 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}
/* the guilloche fading in at the fold is the CREAM tile (fixed + 960×560,
   so it lines up 1:1 with the cream section that follows) */
.sub-hero::after, .loyal-hero::after {
  background-image: url("assets/lwc-pattern-cream.svg?v=153");
}
/* the cream section no longer needs its own top fade — the hero already
   dissolves into cream above it, so keep it solid (no navy sliver) */
.cream-top::before { -webkit-mask-image: none; mask-image: none; }

/* ============================================================
   v134 · homepage hero ↔ guilloche: clean, glitch-free blend
   ============================================================ */

/* The footage must land on the SAME navy as the pattern tile's ground
   (#050f1b) — it was fading to --navy #0B2540, a different navy than the
   guilloche's, so the fade band composited two navies and bright footage
   (pools, rooftops) ghosted through the half-faded pattern as blotches.
   Darken sooner and finish exactly on the tile ground. */
.hero-bg::after {
  background: linear-gradient(180deg,
    rgba(7,22,39,0.42) 0%,
    rgba(7,22,39,0.12) 24%,
    rgba(7,22,39,0.06) 46%,
    rgba(7,22,39,0.55) 72%,
    rgba(7,22,39,0.90) 88%,
    #050f1b 100%);
}

/* Eased multi-stop mask: the old two-stop ramp switched on at 66% with a
   visible start-line (Mach band) and the crest emblems popped in over
   still-bright footage. */
.hero::after {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 58%,
    rgba(0,0,0,0.14) 74%,
    rgba(0,0,0,0.48) 86%,
    rgba(0,0,0,0.82) 94%,
    #000 99%);
  mask-image: linear-gradient(180deg,
    transparent 58%,
    rgba(0,0,0,0.14) 74%,
    rgba(0,0,0,0.48) 86%,
    rgba(0,0,0,0.82) 94%,
    #000 99%);
}

/* A promoted layer with a fixed-attachment background re-rasterises on
   every scroll frame — that was the pattern shimmer. Nothing animates
   this pseudo-element's opacity, so drop the promotion. */
.hero::after { will-change: auto; }

/* ============================================================
   v135 · every hero holds its photo longer — the background
          (guilloche / cream) starts ~10% lower on all hero pages
   ============================================================ */

/* sub-pages + loyalty: the cream flood was claiming over half the hero;
   photo now stays clear until ~74% and cream only saturates at the fold */
.sub-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%,
      rgba(6,18,33,0.42) 42%,
      rgba(28,38,52,0.10) 74%,
      rgba(190,180,158,0.42) 91%,
      #d0d4d2 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}

/* the pattern layer on all sub-page heroes rides down with it */
.sub-hero::after, .mission-hero::after, .loyal-hero::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 76%, #000 98%);
  mask-image: linear-gradient(180deg, transparent 76%, #000 98%);
}

/* mission keeps its navy handoff — same construction, navy arrives later */
.mission-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.6) 0%,
      rgba(6,18,33,0.16) 27%,
      rgba(6,18,33,0.08) 56%,
      rgba(7,22,39,0.55) 84%,
      var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}

/* homepage: same treatment — footage holds ~8% longer before the
   guilloche rises (stops shifted down from the v134 curve) */
.hero-bg::after {
  background: linear-gradient(180deg,
    rgba(7,22,39,0.42) 0%,
    rgba(7,22,39,0.12) 24%,
    rgba(7,22,39,0.06) 50%,
    rgba(7,22,39,0.55) 78%,
    rgba(7,22,39,0.90) 92%,
    #050f1b 100%);
}
.hero::after {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 66%,
    rgba(0,0,0,0.14) 80%,
    rgba(0,0,0,0.48) 89%,
    rgba(0,0,0,0.82) 95%,
    #000 99%);
  mask-image: linear-gradient(180deg,
    transparent 66%,
    rgba(0,0,0,0.14) 80%,
    rgba(0,0,0,0.48) 89%,
    rgba(0,0,0,0.82) 95%,
    #000 99%);
}

/* ============================================================
   v136 · fades pushed to the fold — the hero photo owns the frame
          — and hero copy goes SOLID so the photo can't wash it out
   ============================================================ */

/* sub-pages + loyalty: photo clear until ~82%, cream only in the last sliver */
.sub-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%,
      rgba(6,18,33,0.42) 42%,
      rgba(28,38,52,0.10) 82%,
      rgba(190,180,158,0.42) 94%,
      #d0d4d2 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}
.sub-hero::after, .mission-hero::after, .loyal-hero::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 84%, #000 99%);
  mask-image: linear-gradient(180deg, transparent 84%, #000 99%);
}
.mission-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.6) 0%,
      rgba(6,18,33,0.16) 27%,
      rgba(6,18,33,0.08) 62%,
      rgba(7,22,39,0.55) 88%,
      var(--navy) 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}

/* homepage: footage rides almost to the fold before the guilloche takes over */
.hero-bg::after {
  background: linear-gradient(180deg,
    rgba(7,22,39,0.42) 0%,
    rgba(7,22,39,0.12) 24%,
    rgba(7,22,39,0.06) 56%,
    rgba(7,22,39,0.55) 82%,
    rgba(7,22,39,0.90) 94%,
    #050f1b 100%);
}
.hero::after {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 72%,
    rgba(0,0,0,0.14) 84%,
    rgba(0,0,0,0.48) 91%,
    rgba(0,0,0,0.82) 96%,
    #000 99%);
  mask-image: linear-gradient(180deg,
    transparent 72%,
    rgba(0,0,0,0.14) 84%,
    rgba(0,0,0,0.48) 91%,
    rgba(0,0,0,0.82) 96%,
    #000 99%);
}

/* ---- hero copy: no more translucent cream-dim — solid faces with a
        tight dark edge plus a wide soft halo, so bright sky can't
        wash the text out now that the photo shows more ---- */
.sub-hero p, .sub-hero .lede,
.mission-hero p, .mission-hero .lede, .mission-sub,
.loyal-hero p, .loyal-hero .lede {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 2px 10px rgba(4,11,20,0.95), 0 4px 28px rgba(4,11,20,0.85);
}
.sub-hero h1, .mission-hero h1, .loyal-hero h1 {
  text-shadow: 0 2px 5px rgba(0,0,0,0.75), 0 4px 36px rgba(4,11,20,0.95);
}
.sub-hero .kicker, .mission-hero .kicker, .loyal-hero .kicker,
.mission-hero .veil-kicker {
  color: var(--gold-bright);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(4,11,20,0.95);
}
/* homepage: same treatment for the two translucent lines */
.hero-lede { color: #f4f7fb; }
.hero-note { color: var(--cream); text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 1px 12px rgba(4,11,20,0.85); }

/* ============================================================
   v137 · sub-page heroes ease into cream the way the homepage
          eases into navy — same gentle 5-stop curves, no abrupt
          cream flood
   ============================================================ */

/* photo lightens into cream progressively (mirrors the home dimmer curve) */
.sub-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%,
      rgba(6,18,33,0.42) 42%,
      rgba(28,38,52,0.10) 70%,
      rgba(222,224,218,0.16) 82%,
      rgba(222,224,218,0.52) 90%,
      rgba(222,224,218,0.85) 96%,
      #d0d4d2 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}

/* guilloche feathers in on the same eased ramp the homepage uses */
.sub-hero::after, .mission-hero::after, .loyal-hero::after {
  -webkit-mask-image: linear-gradient(180deg,
    transparent 74%,
    rgba(0,0,0,0.14) 84%,
    rgba(0,0,0,0.48) 91%,
    rgba(0,0,0,0.82) 96%,
    #000 99%);
  mask-image: linear-gradient(180deg,
    transparent 74%,
    rgba(0,0,0,0.14) 84%,
    rgba(0,0,0,0.48) 91%,
    rgba(0,0,0,0.82) 96%,
    #000 99%);
}

/* mission's navy handoff gets the same easing */
.mission-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.6) 0%,
      rgba(6,18,33,0.16) 27%,
      rgba(6,18,33,0.08) 62%,
      rgba(7,22,39,0.30) 78%,
      rgba(7,22,39,0.60) 88%,
      rgba(7,22,39,0.88) 95%,
      #050f1b 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover;
  background-position: center 28%, center 28%;
}

/* ============================================================
   v138 · wizard flow + quieter quote colors · Sparkle chat-bubble
          launcher · alternating navy tiles · one-row header
   ============================================================ */

/* --- wizard: the praise message plays out fully before the next step --- */
.wiz-toast.show,
.wiz-toast.show .wiz-toast-star { animation-duration: 1.6s; }

/* --- hint sits centred under the option buttons; Back below it --- */
.wiz-hint { text-align: center; }
.wiz-nav { justify-content: center; margin-top: 18px; }
.wiz-nav .wiz-hint { text-align: center; flex: 0 1 auto; }
.wiz-nav--end { justify-content: center; margin: 10px 0 20px; }

/* --- Back: quiet outline pill on the cream sheet, no dark scrim --- */
.wiz-back {
  background: transparent; border: 1px solid rgba(11,37,64,0.25); color: rgba(11,37,64,0.7);
  min-height: 40px; padding: 8px 18px;
}
.wiz-back:hover {
  background: rgba(11,37,64,0.06); border-color: rgba(11,37,64,0.5);
  color: var(--navy); transform: none;
}

/* --- service tiers: softer washes, easier on the eyes --- */
#quote-form .opts .opt:nth-child(2):not(.is-on) {
  border-color: rgba(216,169,60,0.26);
  background: linear-gradient(180deg, #fffefb 0%, #faf5ea 100%);
}
#quote-form .opts .opt:nth-child(3):not(.is-on),
#quote-form .opt.opt-star:not(.is-on) {
  border-color: rgba(216,169,60,0.4);
  background: linear-gradient(150deg, #fffbf1 0%, #f8efd9 100%);
  box-shadow: 0 8px 20px rgba(216,169,60,0.13), inset 0 1px 2px rgba(255,255,255,0.85);
}
#quote-form .opt.opt-star:not(.is-on) .opt-main b { color: #8a6a1f; }
/* selected tier: still clearly gold, but a soft wash instead of full-strength */
#quote-form .opt.is-on {
  border-color: var(--gold);
  background: linear-gradient(160deg, #f6e3ac 0%, #eed993 100%);
  box-shadow: 0 8px 22px rgba(216,169,60,0.22);
}

/* --- fields: GOLD while you're in them, GREEN only once complete --- */
#quote-form input:focus, #quote-form textarea:focus {
  border-color: var(--gold-bright); background: var(--navy-2);
  box-shadow: 0 0 0 3px rgba(216,169,60,0.3);
}
#quote-form .field.is-done input, #quote-form .field.is-done textarea,
#quote-form .field.is-done input:focus, #quote-form .field.is-done textarea:focus {
  border-color: var(--green); background: var(--navy);
  box-shadow: 0 0 0 1px rgba(47,158,111,0.6), 0 0 18px rgba(47,158,111,0.18);
}

/* --- Sparkle launcher: the logo in a chat bubble --- */
.spark-launch {
  width: 62px; height: 62px; padding: 0;
  display: grid; place-items: center;
  border-radius: 20px 20px 5px 20px;   /* the clipped corner is the bubble tail */
  border: 1px solid rgba(232,194,92,0.6);
  background: var(--navy-deep, #050f1b);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 0 1px rgba(232,194,92,0.14), 0 0 26px rgba(216,169,60,0.18);
}
.spark-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(216,169,60,0.3); }
.spark-launch .spark-logo { width: 42px; height: 42px; display: block; border-radius: 12px; }
.spark-launch .spark-dot {
  top: -4px; right: -4px; width: 13px; height: 13px;
  border: 2px solid var(--navy-deep, #050f1b);
}
.spark-teaser { bottom: 92px; }

/* --- every ✦ spins about its own centre — no orbiting --- */
.learn-badge .learn-star, .learn-card .learn-star, .sat-pin, .spark-avatar span {
  display: inline-grid; place-items: center;
  width: 1.15em; height: 1.15em; line-height: 1;
}

/* --- alternating section tiles: dark navy (body) · lighter navy · cream.
       Same geometry + fixed attachment, so the pattern registers 1:1
       across every seam and reads as one surface changing colour --- */
.band-alt {
  background: #102e50 url("assets/lwc-pattern-navy2.svg?v=143") repeat;
  background-size: 960px 560px;
  background-attachment: fixed;
}

/* --- header: one organized row — brand · links · actions — under the
       utility strip --- */
@media (min-width: 821px) {
  .nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .nav-util { grid-column: 1 / -1; }
  .nav-main { display: contents; }
  .nav-brand { grid-row: 2; grid-column: 1; margin-left: clamp(16px, 3vw, 36px); padding: 10px 0; }
  .nav-links {
    grid-row: 2; grid-column: 2;
    border-top: 0; padding: 0 10px; flex-wrap: wrap;
  }
  .nav-actions { grid-row: 2; grid-column: 3; margin-right: clamp(16px, 3vw, 36px); }
  .nav-brand img { height: 46px; }
  /* links: compact caps with a gold underline that draws itself on hover */
  .nav-links { gap: 2px; flex-wrap: nowrap; }
  .nav-links a {
    position: relative; padding: 9px 9px;
    font-size: 0.77rem; letter-spacing: 0.04em; white-space: nowrap;
  }
  .nav-phone { font-size: 1.02rem; }
  .btn-quote { padding: 12px 18px; font-size: 0.78rem; }
  .nav-actions { gap: 14px; }
  .nav-links a:not(.nav-svc):hover { background: transparent; color: var(--gold-bright); }
  .nav-links a:not(.nav-svc)::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px;
    height: 2px; border-radius: 2px; background: var(--gold-bright);
    transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
  }
  .nav-links a:not(.nav-svc):hover::after { transform: scaleX(1); }
  .nav { border-bottom: 1px solid rgba(216,169,60,0.22); }
}
@media (min-width: 821px) and (max-width: 1180px) {
  .nav-links a { padding: 9px 7px; font-size: 0.72rem; letter-spacing: 0.03em; }
  .nav-brand img { height: 40px; }
}

/* ============================================================
   v139 · readable cream accents · dissolving section seams ·
          header ads carousel + bigger bar · Spark glyph bubble ·
          smarter free-quote pill · calmer hero copy
   ============================================================ */

/* --- 1 · text on cream was too faint — darker golds, darker green --- */
#quote-form .oknote { color: #8a6413; }
#quote-form .reward { color: #8a6413; }
#quote-form .field.is-done .oknote { color: #1e7a52; }
#quote > .wrap > .kicker,
#quote .quote-call a,
#quote-form .wiz-dot.is-on span { color: #c99a34; }
#quote > .wrap > .h2 em,
#quote-form em, #quote-form .wiz-q em { color: #c99a34; -webkit-text-fill-color: #c99a34; }
#quote-form .wiz-hint { color: rgba(11,37,64,0.68); }

/* --- 2 · section tiles DISSOLVE into each other, no hard seams.
       The tile moves to a masked ::before so its edges feather out
       and the deep-navy body pattern re-emerges underneath --- */
.band-alt { position: relative; background: none; }
.band-alt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #102e50 url("assets/lwc-pattern-navy2.svg?v=143") repeat;
  background-size: 960px 560px;
  background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 130px, #000 calc(100% - 130px), transparent 100%);
}
.band-alt > * { position: relative; z-index: 1; }
/* the cream blocks fade out at their base the same way */
.cream-top::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 130px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 130px), transparent 100%);
}

/* --- 3 · header: a bit bigger, with the rotating Lucent ads strip --- */
:root { --nav-h: 84px; }
.nav-ads {
  display: block; text-align: center; overflow: hidden;
  background: linear-gradient(90deg, rgba(216,169,60,0.04), rgba(216,169,60,0.12) 50%, rgba(216,169,60,0.04));
  border-bottom: 1px solid rgba(216,169,60,0.18);
}
.nav-ad {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 7px 16px;
  font-size: 0.8rem; color: var(--cream-dim); text-decoration: none;
  opacity: 1; transition: opacity 0.45s ease;
}
.nav-ad b {
  color: var(--gold-bright); font-weight: 800; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.nav-ad i { font-style: normal; color: var(--gold-bright); opacity: 0.7; transition: transform 0.2s; }
.nav-ad:hover span { color: var(--cream); }
.nav-ad:hover i { transform: translateX(3px); }
.nav-ad.is-fading { opacity: 0; }
@media (min-width: 821px) {
  .nav-ads { grid-column: 1 / -1; grid-row: 2; }
  .nav-brand { grid-row: 3; }
  .nav-links { grid-row: 3; }
  .nav-actions { grid-row: 3; }
  .nav-brand img { height: 52px; }
  .nav-brand { padding: 12px 0; }
  .nav-links a { font-size: 0.8rem; padding: 10px 11px; }
}
@media (max-width: 820px) {
  .nav-ad { font-size: 0.7rem; padding: 6px 10px; gap: 7px; }
  .nav-ad span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
}

/* --- 4 · Spark launcher: the ✦ itself, still and perfectly centred,
       in a shape that clearly reads as a chat bubble --- */
.spark-launch {
  width: 66px; height: 62px;
  border-radius: 22px;
  display: grid; place-items: center;
}
.spark-launch::after {
  content: ""; position: absolute; right: 9px; bottom: -6px;
  width: 15px; height: 15px;
  background: inherit; border: inherit; border-top: 0; border-left: 0;
  transform: rotate(45deg);
  border-bottom-right-radius: 4px;
}
.spark-launch .spark-glyph {
  display: grid; place-items: center; width: 1em; height: 1em; line-height: 1;
  font-size: 2rem; color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(232,194,92,0.55);
}
.spark-launch .spark-dot { top: -4px; right: -4px; }

/* --- 5 · free-quote pill lives just above Spark --- */
.pill { right: 18px; bottom: 98px; }
@media (max-width: 620px) { .pill { right: 12px; bottom: 92px; } }

/* ============================================================
   v140 · "Ask Lucent" launcher (hello wiggle → chat icon) ·
          smaller, calmer hero headline
   ============================================================ */

/* the launcher opens as a labelled chat bubble saying ASK LUCENT… */
.spark-launch {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; height: 60px; min-width: 60px; padding: 0 20px;
  border-radius: 999px 999px 8px 999px;
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s, padding 0.4s ease, gap 0.4s ease;
  animation: lucent-hello 1s ease-in-out 1.2s 2;
}
.spark-launch .spark-ic { width: 26px; height: 26px; color: var(--gold-bright); flex: 0 0 auto; display: block; }
.spark-launch .spark-label {
  font-family: var(--sans); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.03em;
  color: var(--cream); white-space: nowrap; overflow: hidden;
  max-width: 130px; opacity: 1;
  transition: max-width 0.45s ease, opacity 0.3s ease;
}
/* …then settles into just the chat icon */
.spark-launch.is-compact { padding: 0; width: 60px; gap: 0; }
.spark-launch.is-compact .spark-label { max-width: 0; opacity: 0; }
/* the little hello: two gentle bounces to catch the eye, then still */
@keyframes lucent-hello {
  0%, 100% { transform: none; }
  15% { transform: translateY(-5px) rotate(-2deg); }
  32% { transform: translateY(0) rotate(1.6deg); }
  48% { transform: translateY(-3px); }
  64% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .spark-launch { animation: none; } }
/* panel avatar holds still too */
.spark-avatar span { animation: none; }

/* hero headline: smaller, short 3–4 word lines */
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

/* ============================================================
   v141 · launcher glitch/shake · Our Mission shimmer · reviews &
          before-after 2×2 · ads merged into one top bar
   ============================================================ */

/* --- 1 · Ask Lucent launcher: kill the stray tail wedge (the "glitch"),
       drop the icon + status dot, and shake now-and-then to catch the eye --- */
.spark-launch::after { content: none !important; }
.spark-launch {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; min-width: 0; gap: 0;
  padding: 13px 22px;
  border-radius: 16px 16px 16px 5px;   /* one clean chat-bubble corner */
  border: 1px solid rgba(232,194,92,0.55);
  background: var(--navy-deep, #050f1b);
  box-shadow: 0 12px 30px rgba(0,0,0,0.42), 0 0 24px rgba(216,169,60,0.16);
  animation: lucent-shake 6s ease-in-out 2s infinite;
}
.spark-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(216,169,60,0.3); }
.spark-launch .spark-label {
  max-width: none; opacity: 1;
  font-family: var(--sans); font-weight: 800; font-size: 0.92rem; letter-spacing: 0.03em;
  color: var(--gold-bright);
}
.spark-launch .spark-dot { display: none; }
/* neutralise the old collapse state in case the class lingers */
.spark-launch.is-compact { width: auto; padding: 13px 22px; gap: 0; }
.spark-launch.is-compact .spark-label { max-width: none; opacity: 1; }
@keyframes lucent-shake {
  0% { transform: none; }
  2%  { transform: translateX(-3px) rotate(-1.6deg); }
  5%  { transform: translateX(3px)  rotate(1.6deg); }
  8%  { transform: translateX(-2px) rotate(-1deg); }
  11% { transform: translateX(2px)  rotate(1deg); }
  14%, 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .spark-launch { animation: none; } }

/* --- 2 · Our Mission nav link: white + glow at rest, a gold shine sweeps
       across every few seconds, then back to white --- */
/* desktop only — the clipped-gradient shimmer needs the narrow header cell;
   in the full-width mobile sheet the mission link stays plain white */
@media (min-width: 821px) {
  .nav-links a.nav-mission {
    color: #fff; font-weight: 800;
    background-image: linear-gradient(100deg,
      #fff 0%, #fff 44%, #f6e0a2 48%, #e8c25c 50%, #f6e0a2 52%, #fff 56%, #fff 100%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.4));
    animation: mission-shimmer 6.5s ease-in-out infinite;
  }
  .nav-links a.nav-mission .nm-shine {
    background: none; -webkit-text-fill-color: inherit; color: inherit;
  }
}
@keyframes mission-shimmer {
  0%, 60% { background-position: 130% 0; }
  86%, 100% { background-position: -30% 0; }
}
@media (min-width: 821px) and (prefers-reduced-motion: reduce) {
  .nav-links a.nav-mission { animation: none; background-position: 130% 0; }
}

/* --- 3 · reviews and before/after both sit 2 × 2 --- */
.rev-grid, .ba-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .rev-grid, .ba-grid { grid-template-columns: 1fr; } }

/* --- 4 · the rotating ad now lives INSIDE the utility strip, on the right,
       so the top of the header reads as one cohesive bar --- */
@media (min-width: 821px) {
  .nav-brand  { grid-row: 2; }
  .nav-links  { grid-row: 2; }
  .nav-actions{ grid-row: 2; }
  .nav-util { justify-content: flex-start; flex-wrap: nowrap; }
}
.nav-ad {
  margin-left: auto; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 0.78rem; color: var(--cream-dim);
}
.nav-ad b { color: var(--gold-bright); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-ad span { color: var(--cream-dim); }
.nav-ad i { font-style: normal; color: var(--gold-bright); opacity: 0.75; transition: transform 0.2s; }
.nav-ad:hover span { color: var(--cream); }
.nav-ad:hover i { transform: translateX(3px); }
@media (max-width: 820px) {
  .nav-util { flex-wrap: wrap; justify-content: center; }
  .nav-ad { order: 9; flex-basis: 100%; margin-left: 0; justify-content: center; padding-top: 5px; }
  .nav-ad span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
}

/* --- Our Mission in the mobile sheet: plain white (the clipped-gradient
       shimmer doesn't paint reliably across the full-width row), normal
       spacing so the letters aren't stretched --- */
@media (max-width: 820px) {
  .nav-links a.nav-mission {
    background: none; background-image: none;
    -webkit-text-fill-color: #fff; color: #fff;
    filter: none; letter-spacing: 0.01em;
    /* keep the sheet-in reveal that every other link uses — don't null animation */
  }
  /* the sheet link is a flex row (label + chevron); the "Our" span was a
     second flex item, so "Our" and "Mission" got pushed apart. display:contents
     drops the span box so the label is one run again. */
  .nav-links a.nav-mission .nm-shine { display: contents; -webkit-text-fill-color: #fff; color: #fff; }
}

/* ============================================================
   v142 · logo collapse fix + bigger · lighter quote gold ·
          "Ask LUCENT" collapse-to-chat-icon · cream mid-page
          sections · gallery cream-only · premium navy mission
          hero · nicer quote buttons + smooth transition
   ============================================================ */

/* --- 1 · LOGO: img max-width:100% + auto grid column = circular sizing that
       collapsed the logo to 0. Give it an intrinsic width and stop the column
       from shrinking. Bigger, too. --- */
.nav-brand img { max-width: none; width: auto; height: 56px; }
@media (min-width: 821px) {
  .nav-brand { min-width: max-content; }
  .nav-brand img { height: 60px; }
}
@media (min-width: 821px) and (max-width: 1120px) {
  .nav-brand img { height: 50px; }
  .nav-links a { padding: 9px 8px; font-size: 0.74rem; }
}

/* --- 2 · lighter gold on the quote headings (still readable on cream) --- */
#quote > .wrap > .h2 em,
#quote-form em, #quote-form .wiz-q em {
  color: #dcae46; -webkit-text-fill-color: #dcae46;
}
#quote > .wrap > .kicker,
#quote-form .wiz-dot.is-on span,
#quote-form .choice-ic { color: #cf9f34; }

/* --- 3 · Ask LUCENT launcher: square corner bottom-RIGHT, "LUCENT" in caps
       gold, and it collapses to a chat-box icon after a few seconds --- */
.spark-launch { border-radius: 16px 16px 4px 16px; }   /* square-ish bottom-right */
.spark-launch .spark-label { color: var(--cream); font-weight: 700; }
.spark-launch .spark-label b {
  color: var(--gold-bright); font-weight: 800; letter-spacing: 0.06em;
}
.spark-launch .spark-chatico { display: none; width: 28px; height: 28px; color: var(--gold-bright); }
.spark-launch.is-compact {
  width: 58px; height: 58px; padding: 0; gap: 0;
}
.spark-launch.is-compact .spark-label { display: none; }
.spark-launch.is-compact .spark-chatico { display: block; }
/* free-quote pill tucked just above the launcher */
.pill { right: 18px; bottom: 86px; }
@media (max-width: 620px) { .pill { right: 14px; bottom: 82px; } }

/* --- 4 · cream mid-page sections (3-tone rhythm: navy / light-navy / cream).
       Opaque cream tile that dissolves at both edges into the navy body. --- */
/* direct cream background (the masked ::before layer composited wrong with
   fixed-attachment — this paints reliably); soft gradient strips at the top
   and bottom dissolve it into the navy sections above and below */
.band-cream {
  position: relative;
  background: #d0d4d2 url("assets/lwc-pattern-cream.svg?v=153");
  background-size: 960px 560px; background-attachment: fixed;
  color: var(--navy);
}
.band-cream::before, .band-cream::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; z-index: 1; pointer-events: none;
}
.band-cream::before { top: 0;   background: linear-gradient(180deg, var(--navy) 0%, rgba(11,37,64,0) 100%); }
.band-cream::after  { bottom: 0; background: linear-gradient(0deg,  var(--navy) 0%, rgba(11,37,64,0) 100%); }
.band-cream > * { position: relative; z-index: 2; }
.band-cream .kicker, .band-cream .veil-kicker { color: #c99a34; }
.band-cream h1, .band-cream h2, .band-cream h3, .band-cream .h2, .band-cream .sec-title { color: var(--navy); }
.band-cream em, .band-cream .h2 em, .band-cream h2 em {
  color: #cf9f34; -webkit-text-fill-color: #cf9f34; background: none;
}
.band-cream .lede { color: rgba(11,37,64,0.76); }
.band-cream p, .band-cream li { color: rgba(11,37,64,0.8); }
.band-cream strong, .band-cream .promise li b { color: var(--navy); }
.band-cream .muted { color: rgba(11,37,64,0.58); }
.band-cream a { color: #c99a34; }
.band-cream .promise li { color: rgba(11,37,64,0.8); }
.band-cream .promise li::before { color: #cf9f34; }

/* --- 5 · GALLERY: background is ONLY cream (the fixed-attachment masked
       overlay was misaligning against the body navy — that was the glitch) --- */
.gallery-page {
  background: #d0d4d2 url("assets/lwc-pattern-cream.svg?v=153") repeat;
  background-size: 960px 560px; background-attachment: fixed;
}
.gallery-page .gal-wrap.cream-top { padding-top: clamp(40px, 6vw, 70px); }
.gallery-page .gal-wrap.cream-top::before { display: none; }   /* kill the glitchy layer */
.gallery-page .site-foot { position: relative; z-index: 1; }

/* --- 6 · MISSION hero: no photo — a premium navy guilloche field with a warm
       gold glow and a soft vignette --- */
.mission-hero-navy { background: var(--navy); }
.mission-hero-navy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(232,194,92,0.16), rgba(232,194,92,0.04) 42%, transparent 66%),
    radial-gradient(140% 120% at 50% 120%, rgba(4,11,20,0.85), transparent 60%),
    var(--navy) url("assets/lwc-pattern.svg?v=137") repeat;
  background-size: auto, auto, 960px 560px;
  background-attachment: scroll, scroll, fixed;
  -webkit-mask-image: none; mask-image: none;
}
.mission-hero-navy::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 -60px 90px -40px rgba(4,11,20,0.9), inset 0 0 160px rgba(4,11,20,0.5);
  background: none;
}
.mission-hero-navy .veil-kicker { color: var(--gold-bright); }
.mission-hero-navy h1, .mission-hero-navy .mission-sub { position: relative; z-index: 1; }

/* --- 7 · quote buttons: a touch more premium --- */
#quote-form .choice {
  border-radius: 16px; transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s, background 0.2s;
}
#quote-form .choice:hover { transform: translateY(-3px); }
#quote-form .opt { border-radius: 14px; transition: transform 0.16s, box-shadow 0.22s, border-color 0.2s; }
#quote-form .opt:hover { transform: translateY(-2px); }
.btn-submit {
  border-radius: 14px; letter-spacing: 0.04em;
  box-shadow: 0 14px 34px rgba(216,169,60,0.34);
  transition: transform 0.2s, box-shadow 0.25s;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(216,169,60,0.46); }
.wiz-back { border-radius: 999px; }

/* --- 8 · step transition: the praise message is an opaque cover over the
       track, so the step swap happens behind it — nothing overlaps, and it
       fades smoothly in and out --- */
#quote-form .wiz-toast {
  animation: none !important;
  opacity: 0; transition: opacity 0.42s ease;
  background: rgba(222,224,218,0.94);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-radius: 18px; padding: 20px;
}
#quote-form .wiz-toast.show { opacity: 1; background: rgba(222,224,218,0.94); }
#quote-form .wiz-toast.show .wiz-toast-star { animation: none; }
#quote-form .wiz-toast-msg { color: var(--navy); text-shadow: none; }
#quote-form .wiz-toast-star { color: #cf9f34; filter: drop-shadow(0 0 12px rgba(216,169,60,0.4)); }
/* while the message is up, the step underneath stays hidden (belt & braces) */
#quote-form .wiz-toast.show ~ .wiz-step.is-active { animation: none !important; }

/* ============================================================
   v146 · navy-blue washed cream that reveals from under the navy ·
          darker (more visible) ink text · subtler pattern ·
          two-bubble chat icon
   ============================================================ */

/* --- text on the cream reads darker so it stands off the toned ground --- */
.cream-top .lede, .cream-top .mission-sub,
.band-cream .lede { color: rgba(11,37,64,0.9); }
.cream-top p, .cream-top li,
.band-cream p, .band-cream li { color: rgba(11,37,64,0.92); }
.cream-top .muted, .band-cream .muted { color: rgba(11,37,64,0.66); }
/* gold accents go a touch deeper so they don't wash out on the light blue */
.cream-top .kicker, .cream-top .veil-kicker,
.band-cream .kicker, .band-cream .veil-kicker { color: #c99a34; }
.cream-top em, .cream-top .h2 em, .cream-top h1 em, .cream-top h2 em,
.band-cream em, .band-cream .h2 em, .band-cream h2 em {
  color: #c99a34; -webkit-text-fill-color: #c99a34;
}

/* --- the cream reveals from UNDER the navy: taller, fuller navy dissolve at
       both edges so it emerges out of the dark sections like the navy switch --- */
.band-cream::before, .band-cream::after { height: 130px; }
.band-cream::before {
  background: linear-gradient(180deg, var(--navy) 0%, rgba(11,37,64,0.6) 42%, rgba(11,37,64,0) 100%);
}
.band-cream::after {
  background: linear-gradient(0deg, var(--navy) 0%, rgba(11,37,64,0.6) 42%, rgba(11,37,64,0) 100%);
}

/* --- two-bubble chat icon sits a hair bigger and centred --- */
.spark-launch .spark-chatico { width: 30px; height: 30px; }

/* ============================================================
   v147 · pages start dark · cream reveals from under the navy with
          the guilloche flowing continuously across the colour switch ·
          seam lines gone · bigger ads · logo chat avatar · Google
          badge · simple text transition · simpler quote
   ============================================================ */

/* --- cream sections: a masked layer so the navy body pattern shows through
       the faded edges — same geometry + fixed attachment = one continuous
       flowing guilloche that just changes colour (no covering navy strip,
       so no seam line) --- */
.band-cream { position: relative; background: none; color: var(--navy); }
.band-cream::after { content: none; }
.band-cream::before {
  content: ""; position: absolute; inset: 0; top: 0; height: auto; z-index: 0; pointer-events: none;
  background: #d0d4d2 url("assets/lwc-pattern-cream.svg?v=153");
  background-size: 960px 560px; background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.band-cream > * { position: relative; z-index: 1; }

/* cream-top dissolves IN from the navy at its top too (guilloche keeps flowing) */
.cream-top::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 100%);
}

/* --- sub-page heroes hand off to NAVY (not cream) so every page opens dark,
       like the homepage; cream arrives deeper down --- */
.sub-hero::before, .loyal-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.8) 0%, rgba(6,18,33,0.42) 42%,
      rgba(7,22,39,0.4) 72%, rgba(7,22,39,0.88) 90%, #050f1b 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover; background-position: center 28%, center 28%;
}
.sub-hero::after, .loyal-hero::after { background-image: url("assets/lwc-pattern.svg?v=137"); }
/* gallery stays cream to the fold (its content is a cream-only page) */
.gallery-page .sub-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%, rgba(6,18,33,0.42) 42%,
      rgba(28,38,52,0.10) 66%, rgba(150,168,186,0.42) 84%, #d0d4d2 100%),
    var(--hero-img, linear-gradient(transparent, transparent));
  background-size: cover, cover; background-position: center 28%, center 28%;
}
.gallery-page .sub-hero::after { background-image: url("assets/lwc-pattern-cream.svg?v=153"); }

/* --- chat panel avatar is the Lucent mark, not the star --- */
.spark-avatar { background: #f4f1ea; overflow: hidden; padding: 0; }
.spark-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.spark-id b { font-size: 1rem; }
.spark-id small { text-transform: none; }

/* --- coloured Google icon on the 5.0 badge --- */
.badge-google { display: inline-flex; align-items: center; gap: 6px; }
.badge-google .g-icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- header ads: bigger + a soft gold chip so they read as a highlight --- */
.nav-ad {
  font-size: 0.86rem; background: rgba(216,169,60,0.12);
  border: 1px solid rgba(216,169,60,0.24); border-radius: 999px; padding: 4px 15px;
}
.nav-ad b { font-size: 0.72rem; }
.nav-ad span { color: var(--cream); }
@media (max-width: 820px) {
  /* full ad on its own centred line — nothing truncated with dots */
  .nav-ad { white-space: normal; text-align: center; line-height: 1.3; padding: 5px 14px; }
  .nav-ad span { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
}

/* --- step transition: JUST the message text — no cover, no blur, no star.
       The step stays hidden underneath while the line shows, so nothing
       overlaps. --- */
#quote-form .wiz-toast {
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
#quote-form .wiz-toast .wiz-toast-star { display: none !important; }
#quote-form .wiz-toast-msg {
  color: var(--navy); text-shadow: none; font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}
#quote-form .wiz-toast.show ~ .wiz-step.is-active { opacity: 0 !important; }

/* --- simpler quote visuals: flat white tier cards, one clean gold selected
       state, calmer progress --- */
#quote-form .opts .opt:not(.is-on),
#quote-form .opts .opt:nth-child(2):not(.is-on),
#quote-form .opts .opt:nth-child(3):not(.is-on),
#quote-form .opt.opt-star:not(.is-on) {
  background: #fff; border-color: rgba(11,37,64,0.16);
  box-shadow: 0 3px 10px rgba(11,37,64,0.06);
}
#quote-form .opt.opt-star:not(.is-on) .opt-main b { color: var(--navy); }
#quote-form .opt.is-on {
  background: linear-gradient(160deg, #f1dea6, #ecd693);
  border-color: var(--gold); box-shadow: 0 6px 16px rgba(216,169,60,0.22);
}
#quote-form .choice { background: #fff; box-shadow: 0 3px 10px rgba(11,37,64,0.06); }
#quote-form .wiz-dot i { box-shadow: none; }

/* ============================================================
   v148 · whiter cream · cream gold matches the hero's bright gold ·
          mobile keeps reviews + before/after 2-up
   ============================================================ */

/* cream section gold accents = the SAME bright shimmering gold as the hero
   "SHINES." (was a darker bronze) */
.cream-top em, .cream-top .h2 em, .cream-top h1 em, .cream-top h2 em,
.band-cream em, .band-cream .h2 em, .band-cream h2 em {
  background: linear-gradient(100deg, var(--gold) 0%, #fff6d8 18%, var(--gold-bright) 34%, var(--gold) 52%, var(--gold-bright) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cream-top .kicker, .cream-top .veil-kicker,
.band-cream .kicker, .band-cream .veil-kicker { color: var(--gold-bright); }

/* --- mobile: reviews and before/after stay 2 across (2 rows), squeezed to
       free up vertical space --- */
@media (max-width: 640px) {
  .rev-grid, .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .rev { padding: 13px 13px; }
  .rev blockquote { font-size: 0.82rem; line-height: 1.4; }
  .rev cite { font-size: 0.66rem; }
  .rev-stars { font-size: 0.78rem; }
  .ba-tag { font-size: 0.6rem; padding: 4px 9px; }
}

/* ============================================================
   v149 · thinner mobile ad · hero 2 lines on phones · no white
          text on cream + bolder navy + subtle shiny gold ·
          calmer gold shimmer · clean logo avatar
   ============================================================ */

/* --- gold shimmer plays less often (longer cycle; the keyframe now holds) --- */
em, .hi { animation-duration: 9s; }

/* --- mobile header ad: thin single line (short heading, no wrap) --- */
@media (max-width: 820px) {
  .nav-ad { padding: 3px 12px; line-height: 1.25; gap: 6px; }
  .nav-ad span { display: none; }        /* drop the long description so it's one thin line */
  .nav-ad b { font-size: 0.7rem; }
  .nav-ad i { font-size: 0.72rem; }
}

/* --- hero headline never more than 2 lines on phones --- */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(1.45rem, 6.8vw, 2.4rem); line-height: 1.06; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 6.4vw; }
}

/* --- cream sections: NO white text — body a little bolder + navy, and
       highlights are a subtle shiny gold (not the bright hero gold) --- */
.cream-top p, .cream-top li, .cream-top .lede, .cream-top .mission-sub,
.band-cream p, .band-cream li, .band-cream .lede {
  color: rgba(11,37,64,0.94); font-weight: 500;
}
.cream-top b, .cream-top strong, .cream-top span, .cream-top cite,
.cream-top blockquote, .cream-top small, .cream-top .sched-text b,
.band-cream b, .band-cream strong, .band-cream span, .band-cream cite,
.band-cream blockquote, .band-cream small, .band-cream .sched-text b {
  color: var(--navy);
}
.cream-top .sched-text span, .band-cream .sched-text span { color: rgba(11,37,64,0.74); }
.cream-top .promise li b, .band-cream .promise li b { color: var(--navy); }

/* subtle shiny gold for highlighted words on cream */
.cream-top em, .cream-top .h2 em, .cream-top h1 em, .cream-top h2 em,
.band-cream em, .band-cream .h2 em, .band-cream h2 em {
  background: linear-gradient(100deg, #c99a34 0%, #e0b64c 34%, #c99331 60%, #e6bd52 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lux-shine 10s linear infinite;
}
.cream-top .kicker, .cream-top .veil-kicker,
.band-cream .kicker, .band-cream .veil-kicker { color: #c99a34; }

/* dark cards that live inside a cream section keep their own light text */
.cream-top .loyal-wrap b, .cream-top .loyal-wrap span, .cream-top .loyal-wrap p, .cream-top .loyal-wrap strong,
.band-cream .loyal-wrap b, .band-cream .loyal-wrap span, .band-cream .loyal-wrap p, .band-cream .loyal-wrap strong,
.cream-top .svc-card b, .cream-top .svc-card span, .band-cream .svc-card b, .band-cream .svc-card span {
  color: var(--cream);
}

/* --- chat avatar: the Lucent app-mark, filling a clean rounded square --- */
.spark-avatar { background: none; border-radius: 11px; overflow: hidden; padding: 0; }
.spark-avatar img { width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* ============================================================
   v150 · quote overhaul · chat panel logo header + chip carousel ·
          ads with description + stable height · 5-star badge ·
          map declutter + carousel · readable cream gold · misc
   ============================================================ */

/* ---------- QUOTE FORM ---------- */
#quote-form input, #quote-form textarea {
  background: #fff; border-color: rgba(11,37,64,0.2); color: var(--navy);
}
#quote-form input::placeholder, #quote-form textarea::placeholder { color: rgba(11,37,64,0.44); }
#quote-form input:focus, #quote-form textarea:focus {
  border-color: var(--gold-bright); background: #fffdf6;
  box-shadow: 0 0 0 3px rgba(216,169,60,0.26);
}
#quote-form .field.is-done input, #quote-form .field.is-done textarea,
#quote-form .field.is-done input:focus, #quote-form .field.is-done textarea:focus {
  border-color: #2a9d5c; background: #f1fbf5;
  box-shadow: 0 0 0 3px rgba(42,157,92,0.22);
}
#quote-form .field.is-done .stamp {
  background: #2a9d5c; color: #fff; box-shadow: 0 3px 10px rgba(42,157,92,0.4);
}
#quote-form .oknote { color: #218a4e; }
#quote-form .field.is-done .oknote { color: #1c7a45; }
#quote-form .coach { color: #218a4e; }

#quote-form .opt-price { color: rgba(11,37,64,0.42); font-weight: 500; letter-spacing: 1.5px; }
#quote-form .opt.is-on .opt-price { color: rgba(11,37,64,0.6); }

#quote-form .opt-flag {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: #b0801f; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
#quote-form .opt-flag--gold { color: #c99a34; }
#quote-form .opt.is-on .opt-flag { color: rgba(11,37,64,0.8); }
#quote-form .opt-tail { flex-direction: column; align-items: flex-end; gap: 4px; }

#quote-form .wiz-recap {
  background: linear-gradient(160deg, #fffdf7, #f4e8cf);
  border: 1px solid rgba(216,169,60,0.55); color: var(--navy);
  box-shadow: 0 8px 20px rgba(11,37,64,0.1); font-weight: 600;
}
#quote-form .wiz-recap b { color: var(--navy); }

.btn-submit { font-weight: 900; letter-spacing: 0.03em; }
.wiz-nav--end { justify-content: center; margin: 12px 0 4px; }

#quote-form .wiz-toast-msg { font-size: clamp(1.35rem, 3.6vw, 2.05rem); font-weight: 800; }
#quote-form .wiz-toast .wiz-toast-star {
  display: block !important; font-size: 1.7rem; color: var(--gold-bright);
  filter: drop-shadow(0 0 12px rgba(232,194,92,0.6));
  animation: spark-pop 1.1s cubic-bezier(0.22,1,0.36,1);
}
@keyframes spark-pop {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  55% { transform: scale(1.25) rotate(12deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #quote-form .wiz-toast .wiz-toast-star { animation: none; } }

/* ---------- CHAT PANEL ---------- */
.spark-head {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; position: relative; padding: 16px 44px;
}
.spark-brand { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.spark-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 600; color: var(--gold-bright); letter-spacing: 0.02em;
}
.spark-live { width: 8px; height: 8px; border-radius: 50%; background: #2ec16b; box-shadow: 0 0 8px #2ec16b; }
.spark-close { position: absolute; top: 10px; right: 12px; margin: 0; }

.spark-quick {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 10px 12px; gap: 8px; scrollbar-width: thin;
}
.spark-quick::-webkit-scrollbar { height: 5px; }
.spark-quick::-webkit-scrollbar-thumb { background: rgba(216,169,60,0.4); border-radius: 3px; }
.spark-chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

/* ---------- HEADER ADS ---------- */
.nav-ad i { font-style: normal; }
@media (max-width: 820px) {
  .nav-ad {
    flex-direction: column; align-items: center; justify-content: center;
    height: 34px; gap: 1px; padding: 0 14px; line-height: 1.12; overflow: hidden; text-align: center;
  }
  .nav-ad b { font-size: 0.6rem; }
  .nav-ad span {
    display: block !important; font-size: 0.62rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 86vw;
  }
  .nav-ad i { display: none; }
}

/* ---------- 5-star badge ---------- */
.b-star { color: var(--gold-bright); font-size: 0.92em; }
.badge-google { gap: 5px; }

/* ---------- readable gold on cream ---------- */
.band-cream a, .cream-top a,
.band-cream .chip-more, .cream-top .chip-more { color: #c99a34; font-weight: 700; }
.band-cream a:hover, .cream-top a:hover { color: #e0b04a; }

/* ---------- MAP declutter + chips carousel + tags ---------- */
.valley-sat .sat-marks { display: none; }
.valley-sat-tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.sat-tag {
  background: rgba(7,22,39,0.78); color: var(--cream); border: 1px solid rgba(232,194,92,0.5);
  padding: 5px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 600;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); white-space: nowrap;
}
.sat-tag--main { background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy); border-color: transparent; }
.area-chips.area-plain {
  display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
  gap: 8px; padding: 4px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.area-chips.area-plain li {
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  background: rgba(11,37,64,0.06); border: 1px solid rgba(11,37,64,0.14);
  padding: 7px 14px; border-radius: 999px; color: var(--navy); font-weight: 600; font-size: 0.86rem;
}
.area-chips.area-plain li.chip-more { background: rgba(216,169,60,0.16); border-color: rgba(216,169,60,0.5); color: #c99a34; }

/* ---------- MISSION CTA + gold buttons carry navy text ---------- */
.mission-hero .btn-how, .mission-hero-navy .btn-how {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)) !important;
  color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important;
  border: 0; position: relative; z-index: 2;
}
.btn-gold, .btn-how, .btn-quote { color: var(--navy) !important; }
.btn-gold span, .btn-how span { color: var(--navy); }

/* ---------- before/after tags smaller ---------- */
.ba-tag { font-size: 0.58rem; padding: 3px 9px; letter-spacing: 0.08em; }

/* ---------- mobile dropdown Our Mission keeps a gold shine ----------
   the shine goes on the WHOLE link (nm-shine is display:contents on mobile,
   so it can't carry its own clipped gradient — the link clips both words) */
@media (max-width: 820px) {
  /* clipped-gradient text is unreliable on the full-width row, so use a solid
     bright gold with a soft glow — reads clearly as the gold shine, always visible */
  .nav-links a.nav-mission {
    background: none;
    color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(232,194,92,0.45);
    /* do NOT set animation here — it would kill the shared sheet-in reveal
       (opacity stays 0 and the link goes invisible) */
  }
  .nav-links a.nav-mission .nm-shine { display: contents; color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright); }
}

/* ============================================================
   v154 · chat header logo-left · quote text navy · cream
          highlight glowing-white + gold shine (7s) · recap stack
   ============================================================ */

/* chat header: logo pinned LEFT, "Assistant Online" under it */
.spark-head { align-items: flex-start; text-align: left; padding: 15px 46px 14px 18px; gap: 5px; }
.spark-brand { height: 27px; }
.spark-status { justify-content: flex-start; }

/* quote: typed text is NAVY (never green); nice messages navy blue */
#quote-form input, #quote-form textarea { color: var(--navy) !important; -webkit-text-fill-color: var(--navy); }
#quote-form input::placeholder, #quote-form textarea::placeholder { -webkit-text-fill-color: rgba(11,37,64,0.44); }
#quote-form .oknote, #quote-form .field.is-done .oknote { color: var(--navy); }
#quote-form .coach { color: var(--navy); }

/* cream highlights: glowing white text with a golden shine sweeping every 7s */
.cream-top em, .cream-top .h2 em, .cream-top h1 em, .cream-top h2 em,
.band-cream em, .band-cream .h2 em, .band-cream h2 em,
#quote > .wrap > .h2 em, #quote-form .wiz-q em {
  background: linear-gradient(100deg, #ffffff 0%, #fffdf6 38%, #e8c25c 50%, #fffdf6 62%, #ffffff 100%);
  background-size: 300% 100%; background-position: 160% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 1px rgba(11,37,64,0.65)) drop-shadow(0 1px 2px rgba(11,37,64,0.35));
  animation: cream-shine 7s ease-in-out infinite;
}
@keyframes cream-shine {
  0%, 68% { background-position: 160% 0; }
  84% { background-position: 40% 0; }
  100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cream-top em, .band-cream em, #quote-form .wiz-q em { animation: none; background-position: 40% 0; }
}

/* recap: "+ Solar Care" stacks under the service on narrow screens */
@media (max-width: 560px) {
  #quote-form .wiz-recap .recap-add { display: block; }
}

/* ============================================================
   v155 · service photos dissolved into the tier buttons
   ============================================================ */
#quote-form .opt {
  position: relative; overflow: hidden;
  background-repeat: no-repeat; background-position: right center; background-size: auto 100%;
}
#quote-form .opts .opt:nth-child(1) { background-image: url("assets/svc/exterior.png?v=3") !important; }
#quote-form .opts .opt:nth-child(2) { background-image: url("assets/svc/ext-int.png?v=3") !important; }
#quote-form .opt-star            { background-image: url("assets/svc/finish.png?v=3") !important; }
#quote-form .opt-solar-only      { background-image: url("assets/svc/solar.png?v=3") !important; }
/* selected tier keeps the gold highlight (photo hidden by the gold bg) */
#quote-form .opt.is-on { background-image: none !important; }
/* text stays on the card side; tail gets a soft frosted chip to read over the photo */
#quote-form .opt-main { position: relative; z-index: 1; max-width: 60%; }
#quote-form .opt-tail {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.62); border-radius: 9px; padding: 5px 9px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#quote-form .opt.is-on .opt-tail { background: rgba(255,255,255,0.35); }

/* ============================================================
   v157 · tier buttons: flag top-right, $ bottom-right corner,
          high-contrast wording, photos squeezed in on the right
   ============================================================ */
#quote-form .opt { min-height: 80px; background-position: right center; background-size: auto 100%; }
/* keep the wording on the clear left half, bold + high contrast (a white
   halo lifts it off the photo where they meet) */
#quote-form .opt-main { max-width: 54%; position: relative; z-index: 2; }
#quote-form .opt-main b {
  font-weight: 800; color: var(--navy);
  text-shadow: 0 0 7px #fff, 0 0 4px #fff, 0 0 2px #fff;
}
#quote-form .opt-main .opt-sub {
  color: var(--navy); font-weight: 500;
  text-shadow: 0 0 6px #fff, 0 0 3px #fff, 0 0 1px #fff;
}
/* flag pinned top-right, price pinned bottom-right — both readable over the photo */
#quote-form .opt-tail {
  position: absolute; top: 0; right: 0; height: 100%; width: auto;
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 9px 11px; background: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: 3;
}
#quote-form .opt-flag {
  background: rgba(7,22,39,0.76) !important; color: var(--gold-bright) !important;
  border: 0 !important; padding: 3px 9px !important; border-radius: 999px !important;
  font-size: 0.52rem !important; letter-spacing: 0.1em !important;
}
#quote-form .opt-flag--gold { color: var(--gold-bright) !important; }
#quote-form .opt-price {
  margin-top: auto; background: rgba(7,22,39,0.72); color: #fff;
  padding: 2px 10px; border-radius: 999px; font-weight: 700; letter-spacing: 2px; font-size: 0.84rem;
}
#quote-form .opt.is-on .opt-flag, #quote-form .opt.is-on .opt-price { background: rgba(7,22,39,0.88) !important; color: #fff !important; }
#quote-form .opt.is-on .opt-flag { color: var(--gold-bright) !important; }

/* ============================================================
   v160 · force the tier photo to the right (a tier background:#fff
          shorthand kept resetting position/size to top-left) + stronger
          text legibility
   ============================================================ */
#quote-form .opts .opt,
#quote-form .opt-star,
#quote-form .opt-solar-only {
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: auto 100% !important;
}
/* a soft white veil under the wording so the title + small text always read */
#quote-form .opt-main {
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.82) 62%, rgba(255,255,255,0) 100%);
  padding: 4px 16px 4px 2px; border-radius: 6px; max-width: 56%;
}
#quote-form .opt-main b { text-shadow: none; }
#quote-form .opt-main .opt-sub { text-shadow: none; color: rgba(11,37,64,0.8); }

/* ============================================================
   v161 · step-3 photo choices · selected = gold outline (keep photo)
          · 2-line tier text · thin oknote · map cities + auto-carousel
   ============================================================ */

/* --- selected tier: keep the photo, just outline it in gold (no gold fill) --- */
#quote-form .opt.is-on {
  background-color: #fff !important;
  border-color: var(--gold-bright) !important;
  box-shadow: inset 0 0 0 2px var(--gold-bright), 0 8px 20px rgba(216,169,60,0.24) !important;
  color: var(--navy) !important;
}
#quote-form .opts .opt:nth-child(1).is-on { background-image: url("assets/svc/exterior.png?v=3") !important; }
#quote-form .opts .opt:nth-child(2).is-on { background-image: url("assets/svc/ext-int.png?v=3") !important; }
#quote-form .opt-star.is-on { background-image: url("assets/svc/finish.png?v=3") !important; }
#quote-form .opt-solar-only.is-on { background-image: url("assets/svc/solar.png?v=3") !important; }

/* --- tier description crammed to 2 lines --- */
#quote-form .opt-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.25;
}

/* --- nice messages: thinner font --- */
#quote-form .oknote { font-weight: 300; letter-spacing: 0.01em; }

/* --- step-3 choices: photo-row cards (Solar Care / Continue with …) --- */
.svc-choice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 560px; margin: 4px auto 0; }
.svc-choice {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  min-height: 82px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(11,37,64,0.16); background-color: #fff;
  background-repeat: no-repeat; background-position: right center; background-size: auto 100%;
  box-shadow: 0 3px 10px rgba(11,37,64,0.06);
  display: flex; align-items: center; font-family: var(--sans);
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}
.svc-choice:hover { transform: translateY(-2px); border-color: var(--gold); }
.svc-choice-tx {
  position: relative; z-index: 2; max-width: 60%;
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.82) 60%, rgba(255,255,255,0) 100%);
  padding: 4px 14px 4px 2px; border-radius: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.svc-choice-tx b { color: var(--navy); font-size: 1.02rem; font-weight: 800; }
.svc-choice-tx .choice-sub { color: rgba(11,37,64,0.74); font-size: 0.82rem; line-height: 1.25; }
.svc-choice.is-on { border-color: var(--gold-bright); box-shadow: inset 0 0 0 2px var(--gold-bright), 0 8px 20px rgba(216,169,60,0.22); }

/* --- MAP: cities back on the map --- */
.valley-sat .sat-marks { display: block; }

/* --- fix the "Los Angeles" pill (was reading as a plain navy blob) --- */
.valley-sat-tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 3; }
.valley-sat-tags .sat-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(7,22,39,0.86); color: var(--cream);
  border: 1px solid rgba(232,194,92,0.6); padding: 6px 14px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.valley-sat-tags .sat-tag, .valley-sat-tags .sat-tag span, .valley-sat-tags .sat-tag b { color: var(--cream) !important; }
.valley-sat-tags .sat-tag--main, .valley-sat-tags .sat-tag--main span { color: var(--navy) !important; }
.valley-sat-tags .sat-tag--main {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--navy); border-color: transparent;
}

/* --- city chips: a premium AUTO-scrolling marquee under the map --- */
.area-marquee {
  margin-top: 20px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.area-chips.area-plain {
  display: flex; flex-wrap: nowrap; width: max-content; max-width: none; overflow: visible;
  gap: 0; padding: 6px 0 14px; margin: 0;
}
/* JS doubles the chips, then flips this on — so a single (undoubled) set never animates */
.area-chips.area-plain[data-marquee="on"] { animation: area-scroll 60s linear infinite; }
/* carousel keeps moving even under the cursor — never pause on hover */
.area-chips.area-plain li {
  flex: 0 0 auto; white-space: nowrap; margin-right: 9px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(11,37,64,0.05); border: 1px solid rgba(216,169,60,0.6);
  padding: 8px 15px; border-radius: 999px; color: var(--navy); font-weight: 600; font-size: 0.86rem;
}
.area-chips.area-plain li.chip-more { background: rgba(216,169,60,0.18); border-color: rgba(216,169,60,0.75); color: #c99a34; }
@keyframes area-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .area-chips.area-plain { width: auto; flex-wrap: wrap; justify-content: center; gap: 4px; animation: none; }
  .area-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   Batch tweaks (2026-07-21) — bullets, buttons, cream gold, panels
   ============================================================ */

/* 1 · Homepage service-card bullets: the ✦ no longer sits on the first letter */
.svc-door-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.svc-door-list span {
  display: flex; align-items: baseline; gap: 8px;
  position: static; padding-left: 0; white-space: normal;
  font-size: 0.88rem; color: #dfe7f0;
}
.svc-door-list span::before {
  content: "✦"; position: static; left: auto; flex: 0 0 auto;
  color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright);
  font-size: 0.72rem; line-height: 1.5;
}
/* line the two EXPLORE cues up by pinning them to the card bottom */
.svc-door-body { flex: 1 1 auto; }
.svc-door-cue { margin-top: auto; padding-top: 8px; }

/* 2 · Home / Business choice photos (quote step 1) — square, same button style */
.choice-photo {
  width: 78px; height: 78px; border-radius: 14px; overflow: hidden; flex: 0 0 auto;
  border: 1px solid rgba(11,37,64,0.12); box-shadow: 0 6px 16px rgba(11,37,64,0.14);
}
.choice-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3 · Recap: the picked home/business photo sits next to "Great choice" */
.recap-pic {
  width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
  vertical-align: middle; margin-right: 9px; border: 1px solid rgba(11,37,64,0.18);
}

/* 4 · Final-stage field note → navy (was a washed green) */
#quote-form .oknote,
#quote-form .field.is-done .oknote {
  color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; background: none;
}

/* 5 · Gold accent words on cream stay solid gold — never transparent/white */
.cream-top em, .cream-top .h2 em, .cream-top h1 em, .cream-top h2 em,
.band-cream em, .band-cream .h2 em, .band-cream h2 em,
#quote > .wrap > .h2 em, #quote-form .wiz-q em {
  background: none !important; background-image: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: #c99a34 !important; color: #c99a34 !important;
  animation: none !important; filter: none !important;
}
/* bold "important" words on cream — heavier + full-strength navy so they pop */
.band-cream b, .band-cream strong, .cream-top b, .cream-top strong,
.band-cream .info-body b, .cream-top .info-body b {
  color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; font-weight: 800;
}
/* the lead line on a cream section must be navy, not cream-on-cream */
.band-cream .info-lead, .cream-top .info-lead { color: var(--navy) !important; }

/* 6 · Gallery BEFORE/AFTER tag: brand gold instead of a flat navy pill */
.gal-tag {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)) !important;
  color: var(--navy) !important; border: none !important;
}
/* the before/after "After Lucent" tag on service pages: gold, not navy */
.ba-tag-after {
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)) !important;
  color: var(--navy) !important; border: none !important;
}

/* 7 · Translucent buttons → noticeably less translucent */
.choice { background: rgba(11,37,64,0.85); }
.opt { background: rgba(249,247,242,0.12); }
.soc { background: rgba(9,30,52,0.92); }
.svc-card { background: rgba(23,56,94,0.92); }
.svc-door { background: rgba(23,56,94,0.92); }
.btn-ghost { background: rgba(216,169,60,0.12); }
.btn-ghost:hover { background: rgba(216,169,60,0.24); }

/* 8 · Window-care service list: crammed rows + a clear which-is-it label */
.svc-panel-label {
  text-align: center; margin: 22px auto 2px; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright);
}
.svc-panel-label b { color: var(--gold-bright); font-weight: 800; }
.band-cream .svc-panel-label, .cream-top .svc-panel-label { color: #c99a34; }
.band-cream .svc-panel-label b, .cream-top .svc-panel-label b { color: var(--navy) !important; }
.svc-list { margin-top: 12px; }
.svc-list li { padding: 8px 0; gap: 2px 12px; }
.svc-list li b { margin-bottom: 1px; }

/* ============================================================
   Batch tweaks (2026-07-21b) — cream reel, kicker visibility,
   section blend, Lucent Finish, patterned receipts
   ============================================================ */

/* A · The 3-step reel runs on the SAME cream as "How we clean" above it,
       so the two connect as one continuous surface (fixed-attachment +
       same guilloche geometry = one flowing pattern that just changes colour) */
.reel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #f8f4ea url("assets/lwc-pattern-cream.svg?v=153");
  background-size: 960px 560px; background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 170px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 170px), transparent 100%);
}
.reel-stage { z-index: 1; }
/* #method holds solid cream at its bottom edge so it flows straight into the reel
   (the blend at each seam matches the neighbour: navy above, cream below) */
.band-cream.cream-connect-down::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 100%);
}
/* drop the "How we clean" heading below the navy→cream dissolve so the gold
   kicker lands on solid cream and reads clearly */
.band-cream.cream-connect-down { padding-top: clamp(124px, 15vw, 160px); }
/* the reel progress bar + labels now sit on cream, so they read as ink */
.reel-seg::before { background: rgba(11,37,64,0.18); }
.reel-seg b { color: rgba(11,37,64,0.6); }
.reel-seg.is-active b { color: var(--navy); }
.reel-seg:hover b { color: var(--navy); }

/* B · Small gold text is far more visible — bolder, tracked, edge-defined —
       fixing faint kickers like "HOW WE CLEAN" (kept brand gold, not brown) */
.kicker, .veil-kicker { font-weight: 800; }
.band-cream .kicker, .cream-top .kicker,
.band-cream .veil-kicker, .cream-top .veil-kicker {
  color: #c99a34 !important; -webkit-text-fill-color: #c99a34 !important;
  font-weight: 800; font-size: 0.84rem; letter-spacing: 0.22em;
  text-shadow: 0 1px 1px rgba(11,37,64,0.22);
}

/* C · Business "Lucent Finish" reads as the premium row, boxed and gold-lit */
.svc-list .svc-star {
  margin-top: 12px; padding: 16px 18px; border-radius: 14px; border-bottom: 0;
  background: linear-gradient(155deg, rgba(216,169,60,0.2), rgba(11,37,64,0.35));
  border: 1px solid rgba(216,169,60,0.55);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(232,194,92,0.12);
}
.svc-list .svc-star b { color: var(--gold-bright); font-size: 1.06rem; }
.svc-list .svc-star::before { color: var(--gold-bright); }

/* E · Receipts (website + brand kit): patterned cream + patterned navy */
.receipt.r-first {
  background: #f8f4ea url("assets/lwc-pattern-cream.svg?v=153");
  background-size: 540px 315px; background-position: center;
  color: #12233b; border: 1px solid rgba(11,37,64,0.16);
}
.receipt.r-loyal {
  background: #0a1c31 url("assets/lwc-pattern-receipt.svg?v=3");
  background-size: 540px 315px; background-position: center;
  color: var(--cream); border: 1px solid var(--gold);
}
/* keep the receipt rows readable over the pattern */
.receipt.r-first .r-head, .receipt.r-first .r-line, .receipt.r-first .r-total { position: relative; z-index: 1; }

/* ============================================================
   Batch tweaks (2026-07-21c) — quote choice photos (top-half,
   fade-to-white) + recap as a rectangle with service photos
   ============================================================ */

/* Step 1: the photo fills the TOP HALF of the button and dissolves to white
   so "My Home / My Business" reads clearly beneath it */
#quote-form .choice {
  flex-direction: column; align-items: stretch; text-align: center;
  padding: 0; gap: 0; overflow: hidden;
}
.choice-photo {
  position: relative; width: 100%; height: 130px; flex: 0 0 auto;
  border: 0; border-radius: 0; box-shadow: none; overflow: hidden; margin: 0;
}
.choice-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* one smooth white dissolve over the whole photo — solid white for the last
   stretch so the photo blends seamlessly into the label with no visible line */
.choice-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,0.5) 58%,
    rgba(255,255,255,0.9) 82%,
    #fff 94%, #fff 100%);
}
#quote-form .choice b { margin-top: 12px; padding: 0 16px; }
#quote-form .choice-sub { padding: 4px 16px 22px; }
/* keep the label area white even when the card is selected, so the fade lands cleanly */
#quote-form .choice.is-on { background: #fff; }

/* Recap reads exactly like a tier button: "Great choice" + the service name on
   the left, the SAME service photo(s) dissolving in on the right, a bit bigger
   so the images read clearly */
#quote-form .wiz-recap {
  position: relative; display: flex; align-items: stretch; justify-content: flex-start;
  width: 100%; max-width: 460px; min-height: 96px; margin: 0 auto 16px;
  padding: 0; border-radius: 14px; overflow: hidden;
  background: #fff !important; border: 1px solid rgba(216,169,60,0.6) !important;
  box-shadow: 0 10px 26px rgba(11,37,64,0.12); color: var(--navy) !important; font-weight: 600;
}
.recap-tx {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 14px 16px; max-width: 46%; text-align: left;
  /* a white backing keeps every word on white, dissolving into the photo strip */
  background: linear-gradient(90deg, #fff 0, #fff 82%, rgba(255,255,255,0) 100%);
  border-radius: 14px 0 0 14px;
}
.recap-lead {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: #c99a34; text-shadow: 0 0 6px #fff, 0 0 3px #fff;
}
#quote-form .wiz-recap b {
  font-size: 1.2rem; font-weight: 800; color: var(--navy); line-height: 1.14;
  text-shadow: 0 0 7px #fff, 0 0 4px #fff, 0 0 2px #fff;
}
/* "+ Solar Care" drops to its own row under the service name */
.recap-add { display: block; color: #c99a34; margin-top: 2px; }
.recap-pics {
  position: absolute; right: 0; top: 0; height: 100%; width: 60%; z-index: 1;
  display: flex; align-items: stretch; gap: 3px;   /* the gap shows the white card → a divider between split photos */
  /* the strip's own mask is THE dissolve — same spot whether 1 or 2 photos */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 100%);
}
/* each photo squeezes into an equal share of the strip; anchored right so the
   baked-in white fade on each source png is cropped away and every photo
   reads as a full, even image */
.recap-pic {
  flex: 1 1 0; min-width: 0; height: 100%; width: 100%;
  object-fit: cover; object-position: right center;
  margin: 0; border: 0; border-radius: 0; display: block;
}

/* Back button on the cream quote: less transparent, a solid tappable button */
#quote-form .wiz-back {
  background: #fff; border: 1px solid rgba(11,37,64,0.32); color: var(--navy);
  box-shadow: 0 3px 10px rgba(11,37,64,0.08);
}
#quote-form .wiz-back:hover {
  background: #fbf6ea; border-color: var(--gold); color: var(--navy);
}

/* Between-step "coach" toast: skinnier (light sans, not the heavy display) but larger */
#quote-form .wiz-toast-msg {
  font-family: var(--sans); font-weight: 300; letter-spacing: 0.005em;
  font-size: clamp(1.6rem, 4.4vw, 2.45rem);
}

/* Field notes ("Nice to meet you ✦"): a tad bigger, softer navy (less glow) */
#quote-form .oknote,
#quote-form .field.is-done .oknote {
  font-size: 0.84rem; font-weight: 300;
  color: rgba(11,37,64,0.72) !important; -webkit-text-fill-color: rgba(11,37,64,0.72) !important;
  text-shadow: none;
}

/* ============================================================
   Batch tweaks (2026-07-21d) — tier-card text always on white
   ============================================================ */
/* a white wash sits over the LEFT of each tier photo so the wording never
   overlaps the image — the photo shows cleanly on the right */
#quote-form .wiz-step[data-step="2"] .opts .opt,
#quote-form .wiz-step[data-step="2"] .opt-star,
#quote-form .wiz-step[data-step="2"] .opt-solar-only {
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  background-size: 100% 101%, auto 100% !important;
}
#quote-form .opts .opt:nth-child(1) { background-image: linear-gradient(90deg,#fff 0,#fff 53%,rgba(255,255,255,0) 70%), url("assets/svc/exterior.png?v=3") !important; }
#quote-form .opts .opt:nth-child(2) { background-image: linear-gradient(90deg,#fff 0,#fff 53%,rgba(255,255,255,0) 70%), url("assets/svc/ext-int.png?v=3") !important; }
#quote-form .opt-star            { background-image: linear-gradient(90deg,#fff 0,#fff 53%,rgba(255,255,255,0) 70%), url("assets/svc/finish.png?v=3") !important; }
#quote-form .opt-solar-only      { background-image: linear-gradient(90deg,#fff 0,#fff 53%,rgba(255,255,255,0) 70%), url("assets/svc/solar.png?v=3") !important; }
#quote-form .opt.is-on { background-image: none !important; }
/* keep the wording inside the white zone */
#quote-form .wiz-step[data-step="2"] .opt-main { max-width: 50%; }

/* --- Quote recap + choice photos on mobile --- */
@media (max-width: 560px) {
  #quote-form .wiz-recap { max-width: 100%; min-height: 84px; }
  .recap-tx { max-width: 46%; padding: 12px 14px; }
  #quote-form .wiz-recap b { font-size: 1.05rem; }
  .choice-photo { height: 108px; }
  /* a touch more white room on small screens */
  #quote-form .opts .opt:nth-child(1) { background-image: linear-gradient(90deg,#fff 0,#fff 56%,rgba(255,255,255,0) 72%), url("assets/svc/exterior.png?v=3") !important; }
  #quote-form .opts .opt:nth-child(2) { background-image: linear-gradient(90deg,#fff 0,#fff 56%,rgba(255,255,255,0) 72%), url("assets/svc/ext-int.png?v=3") !important; }
  #quote-form .opt-star            { background-image: linear-gradient(90deg,#fff 0,#fff 56%,rgba(255,255,255,0) 72%), url("assets/svc/finish.png?v=3") !important; }
  #quote-form .opt-solar-only      { background-image: linear-gradient(90deg,#fff 0,#fff 56%,rgba(255,255,255,0) 72%), url("assets/svc/solar.png?v=3") !important; }
}

/* ============================================================
   Desktop: sub-page hero pattern starts LOWER — the photo owns
   more of the frame before the guilloche + navy dissolve arrive
   ============================================================ */
@media (min-width: 761px) {
  /* pattern feathers in on the HOMEPAGE hero's exact ramp (72→99%) */
  .sub-hero::after, .mission-hero::after, .loyal-hero::after {
    -webkit-mask-image: linear-gradient(180deg,
      transparent 72%,
      rgba(0,0,0,0.14) 84%,
      rgba(0,0,0,0.48) 91%,
      rgba(0,0,0,0.82) 96%,
      #000 99%);
    mask-image: linear-gradient(180deg,
      transparent 72%,
      rgba(0,0,0,0.14) 84%,
      rgba(0,0,0,0.48) 91%,
      rgba(0,0,0,0.82) 96%,
      #000 99%);
  }
  /* the photo dims on the HOMEPAGE hero's exact curve, ending on the same
     #050f1b tile ground */
  .sub-hero::before, .loyal-hero::before, .mission-hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(7,22,39,0.42) 0%,
        rgba(7,22,39,0.12) 24%,
        rgba(7,22,39,0.06) 56%,
        rgba(7,22,39,0.55) 82%,
        rgba(7,22,39,0.90) 94%,
        #050f1b 100%),
      var(--hero-img, linear-gradient(transparent, transparent));
  }
  /* gallery keeps its cream handoff, on the same stop positions */
  .gallery-page .sub-hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(7,22,39,0.42) 0%,
        rgba(7,22,39,0.12) 24%,
        rgba(28,38,52,0.10) 56%,
        rgba(150,168,186,0.42) 82%,
        rgba(208,212,210,0.90) 94%,
        #d0d4d2 100%),
      var(--hero-img, linear-gradient(transparent, transparent));
  }
}

/* ============================================================
   Gold seam sections — heroes keep their dissolve, but every
   OTHER background-colour switch is a clean cut on a thin gold
   line with depth (an engraved seam, not a fade)
   ============================================================ */

/* cream sections: pattern runs solid to both edges — no more fading */
.band-cream::before { -webkit-mask-image: none !important; mask-image: none !important; }
/* the seam overlay: 2px gold shimmer line at each colour edge, with a soft
   navy shadow bleeding into the cream for depth (engraved, not flat) */
.band-cream::after {
  content: "" !important; position: absolute; inset: 0; height: auto; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) top left / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left top 3px / 100% 34px no-repeat,
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) bottom left / 100% 3px no-repeat,
    linear-gradient(0deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left bottom 3px / 100% 34px no-repeat;
}
/* cream flowing into the cream reel below: top seam only — no line between creams */
.band-cream.cream-connect-down::before { -webkit-mask-image: none; mask-image: none; }
.band-cream.cream-connect-down::after {
  background:
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) top left / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left top 3px / 100% 34px no-repeat;
}
/* the fade padding isn't needed on a hard seam */
.band-cream.cream-connect-down { padding-top: clamp(64px, 8vw, 96px); }

/* the cream reel: solid to its bottom edge, then a gold seam into the navy */
.reel::before { -webkit-mask-image: none; mask-image: none; }
.reel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) bottom left / 100% 3px no-repeat,
    linear-gradient(0deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left bottom 3px / 100% 34px no-repeat;
}
.reel-stage { z-index: 2; }

/* homepage quote: cream cuts in on the seam (its bottom already meets the
   footer's gold hairline) — heroes elsewhere keep their dissolve via .cream-top */
#quote::before { -webkit-mask-image: none; mask-image: none; }
#quote::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) top left / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left top 3px / 100% 34px no-repeat;
}
#quote { padding-top: clamp(64px, 8vw, 100px); }

/* ============================================================
   Lucent scrollbar — navy channel, gold-gradient thumb
   ============================================================ */
html { scrollbar-color: #c99a34 #050f1b; }  /* Firefox: thumb / track */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #050f1b; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #e8c25c 0%, #c99a34 45%, #a97f24 100%);
  border-radius: 999px;
  border: 2px solid #050f1b;      /* inset the thumb so the gold reads as a slim bar */
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f6dc8e 0%, #e8c25c 45%, #c99a34 100%);
}
::-webkit-scrollbar-corner { background: #050f1b; }

/* ============================================================
   Desktop: every sub-page hero matches the HOMEPAGE hero height —
   its background handoff lands at the same ~92% of the viewport
   (homepage hero bottom ≈ 92svh; header above sub-heroes ≈ 148px)
   ============================================================ */
@media (min-width: 761px) {
  .sub-hero, .loyal-hero, .mission-hero {
    min-height: calc(92svh - 148px);
  }
}

/* ============================================================
   Chat assistant panel — navy-pattern background, bigger logo,
   no gold "glare" gradient in the header
   ============================================================ */
.spark-panel {
  background: #050f1b url("assets/lwc-pattern.svg?v=137") !important;
  background-size: 720px 420px !important;
}
/* flat translucent header — the gold diagonal sheen is gone */
.spark-head {
  background: rgba(7,22,39,0.5) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* logo clearly larger than the "Assistant Online" status line */
.spark-brand { height: 48px !important; width: auto; max-width: 80%; object-fit: contain; }
.spark-status { font-size: 0.72rem !important; }
/* let the navy pattern read through the messages area */
.spark-log { background: transparent !important; }

/* ============================================================
   Impact-heading accents — drop the gold: every <em> now inherits
   its heading colour. Only ".em-gold" (save 10%) stays gold with a
   frequent, text-clipped shine; ".em-lucent" gets a glowing-white
   look with a thin gold outline.
   ============================================================ */
em, .hi {
  background: none !important; background-image: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: inherit !important;
  animation: none !important; filter: none !important;
}

/* the gold exception — shine repeats often and stays clipped to the letters */
.em-gold {
  background: linear-gradient(100deg,
    #c99a34 0%, #e8c25c 24%, #fff3c8 50%, #e8c25c 76%, #c99a34 100%) !important;
  background-size: 230% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: em-shine 3.2s ease-in-out infinite !important;
}
@keyframes em-shine {
  0%   { background-position: 135% center; }
  50%  { background-position: -35% center; }
  100% { background-position: -35% center; }   /* short hold, then sweeps again */
}
@media (prefers-reduced-motion: reduce) {
  .em-gold { animation: none !important; background-position: 50% center !important; }
}

/* "CHOOSE LUCENT" — subtle glowing white with a thin gold outline
   (high specificity so it beats #quote > .wrap > .h2 em) */
#quote .wrap .h2 .em-lucent, .em-lucent {
  background: none !important; background-image: none !important;
  -webkit-text-fill-color: #ffffff !important; color: #ffffff !important;
  -webkit-text-stroke: 0.7px #d8a93c; text-stroke: 0.7px #d8a93c;
  text-shadow:
    0 0 9px rgba(255,255,255,0.6),
    0 0 20px rgba(255,255,255,0.35),
    0 1px 3px rgba(11,37,64,0.3);
}

/* de-gold the higher-specificity em contexts too (cream sections + the
   quote wizard), still exempting .em-gold and .em-lucent */
.band-cream em:not(.em-gold):not(.em-lucent),
.band-cream .h2 em:not(.em-gold):not(.em-lucent),
.band-cream h2 em:not(.em-gold):not(.em-lucent),
.cream-top em:not(.em-gold):not(.em-lucent),
.cream-top .h2 em:not(.em-gold):not(.em-lucent),
.cream-top h1 em:not(.em-gold):not(.em-lucent),
.cream-top h2 em:not(.em-gold):not(.em-lucent),
#quote-form em:not(.em-gold):not(.em-lucent),
#quote-form .wiz-q em:not(.em-gold):not(.em-lucent),
#quote > .wrap > .h2 em:not(.em-gold):not(.em-lucent) {
  background: none !important; background-image: none !important;
  -webkit-text-fill-color: currentColor !important; color: inherit !important;
  animation: none !important; filter: none !important;
}

/* remove the white sheen sweep on the header CTA button (site-wide) */
.nav-cta::after { display: none !important; animation: none !important; }

/* ============================================================
   Hero impact headings — extruded 3D letters (same on every hero)
   ============================================================ */
.hero h1, .sub-hero h1, .sub-hero .h2,
.mission-hero h1, .loyal-hero h1,
.hero h1 em, .sub-hero h1 em, .sub-hero .h2 em,
.mission-hero h1 em, .loyal-hero h1 em {
  text-shadow:
    1px 1px 2px rgba(5,12,22,0.5),
    2px 2px 3px rgba(5,12,22,0.45),
    3px 3px 4px rgba(5,12,22,0.4),
    4px 4px 5px rgba(5,12,22,0.34),
    5px 5px 1px rgba(5,12,22,0.3),
    6px 9px 18px rgba(4,11,20,0.6) !important;
}

/* ============================================================
   Every hero photo: a slight navy wash + more contrast
   (inset overlay tints without hue-shifting the navy dissolve)
   ============================================================ */
.hero-bg,
.sub-hero::before, .loyal-hero::before, .mission-hero::before {
  box-shadow: inset 0 0 0 100vmax rgba(12,26,44,0.16) !important;
  filter: contrast(1.11) saturate(0.9) brightness(0.98) !important;
}

/* ============================================================
   Mission page only — a cinematic vignette across the whole screen
   ============================================================ */
/* dark frame around the screen edges, fully clear over the middle/text */
.mission-page::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: radial-gradient(ellipse 135% 118% at 50% 46%,
    transparent 58%, rgba(3,10,20,0.34) 82%, rgba(3,10,20,0.62) 100%);
}
/* mission hero "#1 choice": bright metallic gold with a strong moving shine
   (the navy-graded board was muting it) */
.mission-hero h1 .em-gold {
  -webkit-text-stroke: 0;
  /* vivid gold at both ends so it NEVER reads muted; a white core sweeps across */
  background-image: linear-gradient(100deg,
    #f0b90b 0%, #ffd23f 32%, #fff6c8 46%, #ffffff 50%, #fff6c8 54%, #ffd23f 68%, #f0b90b 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: mission-shine 3s linear infinite !important;   /* continuous, no dark hold */
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
@keyframes mission-shine { from { background-position: 175% center; } to { background-position: -75% center; } }

/* ============================================================
   Chat panel fixes + Our Mission hover + stronger hero grade
   ============================================================ */
/* the message log must scroll INSIDE its flex slot (min-height:0) so growing
   messages never push the preset chips + input out of view */
.spark-log { min-height: 0 !important; }
.spark-quick, .spark-foot { flex: 0 0 auto; }           /* pinned, always visible */
/* minimal chip scroller — hide the bar to save space (still drag/swipe-able) */
/* very minimal scrollbar on the preset chips */
.spark-quick { scrollbar-width: thin; scrollbar-color: rgba(216,169,60,0.4) transparent; }
.spark-quick::-webkit-scrollbar { height: 3px !important; width: 3px !important; display: block !important; }
.spark-quick::-webkit-scrollbar-thumb { background: rgba(216,169,60,0.45) !important; border-radius: 3px !important; }
.spark-quick::-webkit-scrollbar-track { background: transparent !important; }

/* "Learn Lucent" badge: on mobile the clipped-gradient text renders blank, so
   fall back to solid gold (fixes the "pill with no text") */
@media (max-width: 760px) {
  .learn-card .learn-text {
    background: none !important; background-image: none !important;
    -webkit-text-fill-color: var(--gold-bright) !important; color: var(--gold-bright) !important;
    animation: none !important;
  }
  /* on the solar page, keep the (now-shortened) description visible on mobile
     — it was hidden globally, leaving just an empty pill */
  .solar-copy .learn-card .learn-desc { display: block !important; }
}
/* drop the tiny gold divider line above "Ask Lucent anything…" */
.spark-foot { border-top: none !important; }

/* "Our Mission" nav link: hover was replacing the gradient with a flat wash,
   which clipped to near-invisible text — re-assert the shimmer gradient on hover */
@media (min-width: 821px) {
  .nav-links a.nav-mission:hover {
    background-image: linear-gradient(100deg,
      #fff 0%, #fff 44%, #f6e0a2 48%, #e8c25c 50%, #f6e0a2 52%, #fff 56%, #fff 100%) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* heroes: more contrast + a touch of saturation (keeps the navy wash) */
.hero-bg, .sub-hero::before, .loyal-hero::before, .mission-hero::before {
  filter: contrast(1.2) saturate(1.12) brightness(0.98) !important;
}

/* ============================================================
   Batch tweaks (2026-07-21e) — quote wizard polish, gold accents,
   sub-hero vignette, seam depth, header Lucent Loyal
   ============================================================ */

/* --- 1 · Mission "#1 choice": drop the heavy navy 3-D extrude and return to
         the site's ORIGINAL clean gold shine (the em-gold sweep) --- */
.mission-hero h1 .em-gold {
  -webkit-text-stroke: 0 !important;
  background-image: linear-gradient(100deg,
    #c99a34 0%, #e8c25c 24%, #fff3c8 50%, #e8c25c 76%, #c99a34 100%) !important;
  background-size: 230% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: em-shine 3.2s ease-in-out infinite !important;
  /* subtle legibility shadow only — no navy board */
  text-shadow: 0 1px 2px rgba(4,11,20,0.5) !important;
}

/* --- 3 · Wizard "nice messages" (between-step praise + field notes): the
         Impact display face --- */
#quote-form .wiz-toast-msg {
  font-family: var(--display) !important; font-weight: 400 !important;
  text-transform: uppercase !important; letter-spacing: 0.02em !important;
  font-size: clamp(1.55rem, 4.8vw, 2.55rem) !important; line-height: 1.02 !important;
  color: var(--cream) !important;
}
#quote-form .oknote,
#quote-form .field.is-done .oknote {
  font-family: var(--display) !important; font-weight: 400 !important;
  text-transform: uppercase !important; letter-spacing: 0.05em !important;
  font-size: 1rem !important;
}

/* --- 4 + 10 · Simpler, lighter message: a plain opacity fade — no scale, no
         backdrop-blur (blur was the lag). The near-opaque navy panel still
         covers the step while it swaps behind it, and the text stays put. --- */
#quote-form .wiz-toast {
  animation: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: rgba(7,22,39,0) !important;
  transition: opacity 0.3s ease, background 0.3s ease !important;
  opacity: 0;
}
#quote-form .wiz-toast.show {
  opacity: 1; background: rgba(7,22,39,0.95) !important; animation: none !important;
}
#quote-form .wiz-toast.show .wiz-toast-star,
#quote-form .wiz-toast-star { animation: none !important; color: var(--gold-bright); }

/* --- 5 · Step-2 options reveal top → bottom (opacity only, so the heading and
         the surrounding layout never shift while they arrive) --- */
@media (prefers-reduced-motion: no-preference) {
  #quote-form .wiz-step[data-step="2"].is-active .opts:not([hidden]) .opt {
    opacity: 0; animation: opt-in 0.4s ease forwards;
  }
  #quote-form .wiz-step[data-step="2"].is-active .opts:not([hidden]) .opt:nth-child(1) { animation-delay: 0.05s; }
  #quote-form .wiz-step[data-step="2"].is-active .opts:not([hidden]) .opt:nth-child(2) { animation-delay: 0.16s; }
  #quote-form .wiz-step[data-step="2"].is-active .opts:not([hidden]) .opt:nth-child(3) { animation-delay: 0.27s; }
  #quote-form .wiz-step[data-step="2"].is-active .opts:not([hidden]) .opt:nth-child(4) { animation-delay: 0.38s; }
}
@keyframes opt-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* --- 6 + 7 · Step-2 tier cards: text never clipped with "…" (it wraps), and
         every card shows the SAME photo slice so the images read as equal --- */
#quote-form .opt-sub {
  -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important;
}
@media (max-width: 560px) {
  /* give the wording a touch more room + a smaller face so it fits without a
     "…", and push the white wash to match so text never lands on the photo */
  #quote-form .wiz-step[data-step="2"] .opt-main { max-width: 58% !important; }
  #quote-form .opt-sub { font-size: 0.72rem !important; line-height: 1.22 !important; }
  #quote-form .opt-main b { font-size: 1.02rem !important; }
  #quote-form .opts .opt { min-height: 96px; }
  #quote-form .opts .opt:nth-child(1) { background-image: linear-gradient(90deg,#fff 0,#fff 60%,rgba(255,255,255,0) 76%), url("assets/svc/exterior.png?v=3") !important; }
  #quote-form .opts .opt:nth-child(2) { background-image: linear-gradient(90deg,#fff 0,#fff 60%,rgba(255,255,255,0) 76%), url("assets/svc/ext-int.png?v=3") !important; }
  #quote-form .opt-star            { background-image: linear-gradient(90deg,#fff 0,#fff 60%,rgba(255,255,255,0) 76%), url("assets/svc/finish.png?v=3") !important; }
  #quote-form .opt-solar-only      { background-image: linear-gradient(90deg,#fff 0,#fff 60%,rgba(255,255,255,0) 76%), url("assets/svc/solar.png?v=3") !important; }
}

/* --- 9 · Recap pill: the LEFT photo was hidden under the strip's dissolve, so
         you couldn't see the exterior/interior shots. Widen the strip, shrink
         the dissolve to just the seam, so BOTH photos read equally. --- */
#quote-form .wiz-recap { max-width: 500px; }
#quote-form .recap-tx { max-width: 42%; }
#quote-form .recap-pics {
  width: 63%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 100%) !important;
}
#quote-form .recap-pic { object-position: right center; }
@media (max-width: 560px) {
  #quote-form .recap-tx { max-width: 40%; }
  #quote-form .recap-pics { width: 64%; }
}

/* --- 11 · Valley map smaller on desktop so the section title stays in view --- */
@media (min-width: 761px) { .valley-sat { max-width: 680px; } }

/* --- 13 · "Our Mission" (and the new "Lucent Loyal") hover: the WHOLE label
         goes gold together — every letter, both i's — instead of a thin sweep
         that lit only one letter at a time --- */
@media (min-width: 821px) {
  .nav-links a.nav-mission:hover {
    background-image: linear-gradient(100deg, #e8c25c 0%, #fff3c8 50%, #e8c25c 100%) !important;
    background-color: transparent !important;
    background-size: 100% 100% !important; background-position: 0 0 !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    animation: none !important;
    filter: drop-shadow(0 0 5px rgba(232,194,92,0.4)) !important;
  }
  .nav-links a.nav-mission:hover .nm-shine {
    -webkit-text-fill-color: inherit !important; color: inherit !important; animation: none !important;
  }
}

/* --- 14 (redo) · Sub-page hero vignette made ONLY from the hero's own navy
         (#050f1b, already its ground tone). z-index:-1 puts it above the photo
         (::before) but below the guilloche (::after) and the headline, so the
         pattern and every background colour stay exactly as they were — this is
         purely an added edge shade from the background that's already there. --- */
.hero-vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* guilloche lines over a navy edge-darkening, revealed only at the frame by a
     radial mask. The pattern is FIXED-attached (same 960×560 tile + origin as
     the hero ::after and the body), so it locks to the page's parallax guilloche
     and scrolls with it — the vignette's lines flow straight out of the bg. */
  background:
    url("assets/lwc-pattern.svg?v=137") repeat,
    radial-gradient(ellipse 76% 82% at 50% 42%, rgba(5,15,27,0) 38%, rgba(6,18,32,0.88) 100%);
  background-size: 960px 560px, cover;
  background-attachment: fixed, scroll;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 50% 44%, transparent 30%, #000 80%);
  mask-image: radial-gradient(ellipse 85% 90% at 50% 44%, transparent 30%, #000 80%);
}

/* --- 15/29 · Step-3 Solar Care / "Continue with…" cards: identical in design to
         the step-2 tier cards — a gold radio dot, the wording block, then the
         photo bleeding in on the right behind a white wash (set in JS). --- */
#quote-form .svc-choice-grid { max-width: 560px; gap: 12px; }
#quote-form .svc-choice {
  min-height: 64px; display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  text-align: left; padding: 15px 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(11,37,64,0.16); background-color: #fff;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  background-size: 100% 101%, auto 100% !important;
  box-shadow: 0 3px 10px rgba(11,37,64,0.06);
}
#quote-form .svc-choice::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gold-bright); background: transparent;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
#quote-form .svc-choice.is-on::before { border-color: var(--navy); background: var(--navy); box-shadow: inset 0 0 0 3px var(--gold-bright); }
#quote-form .svc-choice-tx {
  position: static; max-width: 58%; background: none; padding: 0; border-radius: 0; z-index: auto;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
#quote-form .svc-choice-tx b { font-family: var(--sans); font-size: 1.02rem; font-weight: 800; color: var(--navy); }
#quote-form .svc-choice-tx .choice-sub { color: rgba(11,37,64,0.72); font-size: 0.8rem; line-height: 1.4; }

/* --- 16 · Small gold labels on cream (e.g. "FREE QUOTE") were too brown —
         a richer, brighter gold, closer to the Mission gold, still legible --- */
.band-cream .kicker, .cream-top .kicker,
.band-cream .veil-kicker, .cream-top .veil-kicker,
#quote > .wrap > .kicker {
  color: #cf9d1c !important; -webkit-text-fill-color: #cf9d1c !important;
  text-shadow: 0 1px 1px rgba(11,37,64,0.28) !important;
}

/* --- 17 · "CHOOSE LUCENT" — the gold-outlined white word gets real depth: a
         carved gold extrude drops beneath the white face --- */
#quote .wrap .h2 .em-lucent, .em-lucent {
  -webkit-text-stroke: 0.8px #cf9d1c; text-stroke: 0.8px #cf9d1c;
  text-shadow:
    0 1px 2px #b0801f,
    0 2px 3px #9c7018,
    0 3px 4px #866013,
    0 4px 7px rgba(11,37,64,0.5),
    0 0 10px rgba(255,255,255,0.55),
    0 0 22px rgba(255,255,255,0.3) !important;
}

/* --- 18 · The navy⇄cream gold seam: sharper, heavier, a lot more depth —
         a crisp bright bevel over a thin dark edge, then a deep navy shadow
         bleeding down. Applied to every seam (cream bands, reel, quote). --- */
.band-cream::after {
  background:
    linear-gradient(90deg, #7a5713 0%, #e8c25c 16%, #fff6cf 50%, #e8c25c 84%, #7a5713 100%) top left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(3,9,17,0.28), rgba(3,9,17,0)) left top 4px / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(5,14,26,0.8), rgba(5,14,26,0)) left top 4px / 100% 56px no-repeat,
    linear-gradient(90deg, #7a5713 0%, #e8c25c 16%, #fff6cf 50%, #e8c25c 84%, #7a5713 100%) bottom left / 100% 4px no-repeat,
    linear-gradient(0deg, rgba(5,14,26,0.8), rgba(5,14,26,0)) left bottom 4px / 100% 56px no-repeat !important;
}
.band-cream.cream-connect-down::after {
  background:
    linear-gradient(90deg, #7a5713 0%, #e8c25c 16%, #fff6cf 50%, #e8c25c 84%, #7a5713 100%) top left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(5,14,26,0.8), rgba(5,14,26,0)) left top 4px / 100% 56px no-repeat !important;
}
.reel::after {
  background:
    linear-gradient(90deg, #7a5713 0%, #e8c25c 16%, #fff6cf 50%, #e8c25c 84%, #7a5713 100%) bottom left / 100% 4px no-repeat,
    linear-gradient(0deg, rgba(5,14,26,0.8), rgba(5,14,26,0)) left bottom 4px / 100% 56px no-repeat !important;
}
#quote::after {
  background:
    linear-gradient(90deg, #7a5713 0%, #e8c25c 16%, #fff6cf 50%, #e8c25c 84%, #7a5713 100%) top left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(5,14,26,0.8), rgba(5,14,26,0)) left top 4px / 100% 56px no-repeat !important;
}

/* ============================================================
   Batch tweaks (2026-07-21f) — round 2: light-gold shine, seam
   overlap-depth, chat + receipts + reviews navy, transparent-navy
   wizard messages, 3-D impact headings, mobile nav shimmer
   ============================================================ */

/* --- Light-gold shiny text: one smooth continuous sweep (no hold / jump that
       read as a "glitch"), with a subtle carved depth like the LUCENT word.
       Powers "save 10%", "#1 choice", "you're golden". --- */
.em-gold {
  /* the "old" shiny gold: a vertical metallic gold (bright top → deep bottom)
     with a WHITE glint sweeping across, and a warm 3-D extrude for depth —
     matches the "WINDOW CARE." gold in the reference photo */
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 43%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 57%),
    linear-gradient(180deg, #fbe7ad 0%, #f3d074 26%, #e8bc51 50%, #d5a237 74%, #bb8a23 100%) !important;
  background-size: 250% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: em-shine-smooth 3.6s linear infinite !important;
  text-shadow: 0 1px 2px #7a5510, 0 2px 3px #5e3f0b, 0 3px 5px rgba(20,12,2,0.42) !important;
}
/* legacy alias — same metallic gold */
.em-gold-lite {
  background-image:
    linear-gradient(105deg, rgba(255,255,255,0) 43%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 57%),
    linear-gradient(180deg, #fbe7ad 0%, #f3d074 26%, #e8bc51 50%, #d5a237 74%, #bb8a23 100%) !important;
  background-size: 250% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
}
@keyframes em-shine-smooth { from { background-position: 200% center; } to { background-position: -60% center; } }
@media (prefers-reduced-motion: reduce) {
  .em-gold { animation: none !important; background-position: 50% center !important; }
}
/* hero golds ("#1 choice", "you're golden"): the light smooth shine + a light
   carved depth — NOT the heavy navy hero extrude (that's what looked glitched) */
.mission-hero h1 .em-gold, .loyal-hero h1 .em-gold {
  -webkit-text-stroke: 0 !important;
  /* same metallic gold (inherited from .em-gold) with a heavier warm 3-D extrude
     for the big hero letters — beats the navy hero extrude */
  text-shadow: 0 1px 2px #7a5510, 0 2px 3px #5e3f0b, 0 3px 4px #472f08, 0 4px 9px rgba(10,7,1,0.5) !important;
}

/* --- 19 · Gold seam: WAY smaller navy bleed. A crisp dark hairline under the
       gold + a short soft shadow reads as one panel overlapping the next
       (depth), not a long navy gradient. --- */
/* Thick gold lines WITH a soft drop shadow beneath for depth */
.band-cream::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 6px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 6px / 100% 16px no-repeat,
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 6px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 6px / 100% 16px no-repeat !important;
}
.band-cream.cream-connect-down::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 6px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 6px / 100% 16px no-repeat !important;
}
.reel::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 6px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 6px / 100% 16px no-repeat !important;
}
#quote::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 6px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 6px / 100% 16px no-repeat !important;
}

/* --- 23 · Lucent Loyal receipt: the DARK navy (not the lighter one) --- */
.receipt.r-loyal {
  background-color: #050f1b !important;
  background-image: url("assets/lwc-pattern-receipt.svg?v=3") !important;
  background-size: 540px 315px !important; background-position: center !important;
}

/* --- 24 · Chat: LIGHT navy panel + noticeably smaller message bubbles.
       The default pattern SVG has an opaque #050f1b rect baked in, so we use a
       light-navy variant of the guilloche (matches the 3rd screenshot). --- */
.spark-panel {
  background-color: #17385e !important;
  background-image: url("assets/lwc-pattern-light.svg?v=2") !important;
  background-size: 720px 420px !important;
}
.spark-log { gap: 8px; padding: 14px 12px 6px; }
.spark-msg { max-width: 80%; padding: 8px 11px; font-size: 0.82rem; line-height: 1.42; border-radius: 13px; }
/* bot bubble goes deep navy so it still reads against the lighter panel */
.spark-msg.bot { background: rgba(5,15,27,0.62); border-bottom-left-radius: 4px; }
.spark-typing { padding: 9px 12px; background: rgba(5,15,27,0.62); }

/* --- 27 · Reviews: each card on the darker navy guilloche --- */
.rev {
  background-color: #050f1b !important;
  background-image: url("assets/lwc-pattern.svg?v=137") !important;
  background-size: 460px 268px !important;
}

/* --- 28 · Quote "nice messages": transparent, navy, and 3-D. The step behind
       just dims while the message is up, so there's no navy cover. --- */
#quote-form .wiz-toast, #quote-form .wiz-toast.show { background: transparent !important; }
#quote-form .wiz-toast-msg {
  color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.7),
    0 2px 3px rgba(11,37,64,0.4),
    0 3px 4px rgba(11,37,64,0.26),
    0 4px 9px rgba(11,37,64,0.32) !important;
}
#quote-form .oknote, #quote-form .field.is-done .oknote {
  color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.65), 0 2px 3px rgba(11,37,64,0.28) !important;
}
#quote-form .wiz-step.is-active { transition: opacity 0.3s ease; }
#quote-form .wiz-toast.show ~ .wiz-step.is-active { opacity: 0.2 !important; }

/* --- 30 · Mobile drop-down: Lucent Loyal + Our Mission keep the white base and
       the desktop gold shimmer sweep (was disabled on mobile) --- */
@media (max-width: 820px) {
  .nav-links a.nav-mission {
    background-image: linear-gradient(100deg,
      #fff 0%, #fff 44%, #f6e0a2 48%, #e8c25c 50%, #f6e0a2 52%, #fff 56%, #fff 100%) !important;
    background-color: transparent !important;
    background-size: 260% 100% !important; background-position: 130% 0 !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.35)) !important;
    animation: mission-shimmer 6.5s ease-in-out infinite !important;
    letter-spacing: 0.01em !important;
  }
  .nav-links a.nav-mission .nm-shine {
    display: contents !important; -webkit-text-fill-color: inherit !important; color: inherit !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-links a.nav-mission { animation: none !important; background-position: 130% 0 !important; }
  }
}

/* --- 26 · 3-D depth on the impact/display headings (the LUCENT look, dialed to
       work on cream and navy alike). Heroes keep their own heavier extrude. --- */
h2, h3, .h2, .sec-title, .wiz-q, .svc-door-body b {
  text-shadow:
    0 1px 2px rgba(4,11,20,0.22),
    0 2px 3px rgba(4,11,20,0.15),
    0 3px 6px rgba(4,11,20,0.26);
}
/* on cream sections the navy heading gets a lighter, tighter carve (a top
   highlight + short shadow) so it lifts without going muddy */
.band-cream h2, .band-cream .h2, .band-cream .sec-title,
.cream-top h2, .cream-top .h2, #quote > .wrap > .h2, #quote-form .wiz-q {
  text-shadow:
    0 1px 2px rgba(255,255,255,0.55),
    0 2px 3px rgba(11,37,64,0.18),
    0 3px 6px rgba(11,37,64,0.22);
}

/* ============================================================
   Batch tweaks (2026-07-21g) — round 3: green price badges,
   recap solar shrink, address-protected shield, clean messages
   ============================================================ */

/* --- 32 · Quote money signs ($/$$/$$$): a dark, slightly glowing green pill --- */
#quote-form .opt-price {
  background: rgba(9,44,28,0.85) !important;
  color: #5fe6a6 !important;
  text-shadow: 0 0 7px rgba(70,205,135,0.75) !important;
  box-shadow: 0 0 10px rgba(46,158,111,0.32), inset 0 0 0 1px rgba(80,210,140,0.3) !important;
}
#quote-form .opt.is-on .opt-price {
  background: rgba(9,44,28,0.95) !important; color: #7ef0b8 !important;
  text-shadow: 0 0 8px rgba(70,205,135,0.85) !important;
}

/* --- 33 · Recap: the bundled SOLAR photo shrinks to a slim strip so a 2- or
       3-scene tier photo (Ext & Int, Lucent Finish) has room to show every
       scene. object-fit: contain guarantees no scene is cropped away. --- */
#quote-form .recap-pics {
  width: 66%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 100%) !important;
}
/* Each cell's width tracks how many scenes its photo holds (JS sets flex-grow:
   exterior 1, ext-int 2, finish 3, solar 1). So every SCENE — and the solar
   photo — ends up the same width, filling top-to-bottom (cover), with the wide
   solar image cropped to that same skinny width. */
#quote-form .recap-pic {
  flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-width: 0; height: 100%;
  object-fit: cover !important; object-position: center !important;
  background: #fff;
}
@media (max-width: 560px) {
  #quote-form .recap-pics { width: 64%; }
}

/* --- 34 · "Your Address is Protected" — a subtle premium shield note --- */
/* a navy pill with a green outline and white text */
#quote-form .privacy {
  display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%; margin: 12px auto 2px;
  padding: 9px 18px 9px 13px; border-radius: 999px; text-align: left;
  background: #0a1c31; border: 1px solid #46bd86;
  box-shadow: 0 4px 16px rgba(11,37,64,0.22), 0 0 12px rgba(70,189,134,0.16);
}
.privacy-shield {
  flex: 0 0 auto; width: 24px; height: 24px; color: #5fe6a6;
  filter: drop-shadow(0 0 5px rgba(70,205,135,0.5));
}
.privacy-tx { display: flex; flex-direction: column; line-height: 1.25; }
.privacy-tx b { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.privacy-tx > span { font-size: 0.72rem; color: rgba(255,255,255,0.72); }

/* --- 35 · Nice messages: NOTHING behind them. While a message is up the step
       is fully hidden, so the transparent message floats on the bare section. --- */
#quote-form .wiz-toast.show ~ .wiz-step.is-active { opacity: 0 !important; }

/* ============================================================
   Batch tweaks (2026-07-21h) — round 5: seam depth, recap navy 3-D,
   skinnier address pill
   ============================================================ */

/* Recap: "+ Solar Care" is navy like the tier name; both get a subtle 3-D lift */
#quote-form .recap-add {
  color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important;
}
#quote-form .wiz-recap b, #quote-form .recap-add {
  text-shadow: 0 1px 2px rgba(255,255,255,0.75), 0 2px 3px rgba(11,37,64,0.32) !important;
}

/* Address-protected pill: no subtext, skinnier */
#quote-form .privacy { padding: 7px 16px 7px 12px; gap: 9px; }
.privacy-shield { width: 22px; height: 22px; }

/* ============================================================
   Legal pages (Terms / Privacy) + first-party cookie notice
   ============================================================ */
.legal-page { max-width: 760px; }
.legal-updated {
  font-size: 0.72rem; color: rgba(11,37,64,0.55); text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 800; margin-bottom: 18px;
}
.legal-page h2 {
  font-family: var(--sans); font-weight: 800; text-transform: none; letter-spacing: 0;
  font-size: clamp(1.12rem, 2.2vw, 1.4rem); color: var(--navy);
  margin: 26px 0 8px; text-shadow: none;
}
.legal-page p { margin-bottom: 12px; line-height: 1.7; color: rgba(11,37,64,0.86); }
.legal-page p b { color: var(--navy); }
.legal-page a { color: #c08a12; font-weight: 700; }
.legal-list { list-style: none; margin: 4px 0 14px; padding: 0; }
.legal-list li { position: relative; padding-left: 20px; margin-bottom: 6px; line-height: 1.6; color: rgba(11,37,64,0.86); }
.legal-list li::before { content: "✦"; position: absolute; left: 0; color: #c99a34; font-size: 0.78rem; top: 2px; }

/* footer Terms / Privacy links */
.foot-legal a { color: var(--gold-bright); text-decoration: none; font-weight: 700; }
.foot-legal a:hover { text-decoration: underline; }

/* the quiet, dismissible first-party cookie notice */
.cookie-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 95; max-width: 344px;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(7,22,39,0.94); color: var(--cream); border: 1px solid rgba(216,169,60,0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); font-size: 0.8rem; line-height: 1.42;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease;
}
.cookie-note.show { opacity: 1; transform: none; }
.cookie-note a { color: var(--gold-bright); font-weight: 700; }
.cookie-note .cookie-ok {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 999px; padding: 8px 15px;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold)); color: var(--navy);
}
@media (max-width: 560px) {
  .cookie-note { left: 10px; right: 10px; bottom: 74px; max-width: none; }
}

/* ============================================================
   Gold — REAL solid gold (never clipped, so never distorted). The shine
   is a WHITE copy of the word laid exactly on top, revealed only in a
   diagonal band by a mask that sweeps across — so ONLY the letters shine.
   ============================================================ */
.em-gold, .em-gold-lite,
.mission-hero h1 .em-gold, .loyal-hero h1 .em-gold,
#quote .wrap .h2 .em-gold {
  position: relative; display: inline-block;
  background: none !important; background-image: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: #e8c25c !important; color: #e8c25c !important;
  animation: none !important;
  /* 3-D: a stacked gold→bronze extrude drops beneath the letters */
  text-shadow:
    0 1px 2px #b0821f,
    0 2px 3px #8a6416,
    0 3px 4px #664a10,
    0 4px 6px rgba(8,5,1,0.5) !important;
}
.em-gold::after, .em-gold-lite::after,
.mission-hero h1 .em-gold::after, .loyal-hero h1 .em-gold::after,
#quote .wrap .h2 .em-gold::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  -webkit-mask-image: linear-gradient(100deg, transparent 43%, #000 50%, transparent 57%);
  mask-image: linear-gradient(100deg, transparent 43%, #000 50%, transparent 57%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
  animation: em-gold-sheen 3.8s linear infinite;
}
/* left → right: band starts off the left edge, exits off the right; off-screen at
   both ends so the loop reset is invisible (no glitch) */
@keyframes em-gold-sheen {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .em-gold::after, .em-gold-lite::after,
  .mission-hero h1 .em-gold::after, .loyal-hero h1 .em-gold::after,
  #quote .wrap .h2 .em-gold::after { display: none !important; }
}

/* "LUCENT LOYAL" hero kicker → the same gold as the "OUR MISSION" kicker
   (the mission kicker was golded but the loyal one was left white) */
.loyal-hero .veil-kicker {
  color: var(--gold-bright) !important;
  -webkit-text-fill-color: var(--gold-bright) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(4,11,20,0.95) !important;
}

/* ============================================================
   Legal pages as a cream+gold "paper" — the pattern runs right up to
   the title so it reads as one sheet you scroll down. The fixed nav
   gets a navy fill so the logo/links read over the cream.
   ============================================================ */
.legal-body .nav {
  background: rgba(7,22,39,0.94) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.legal-paper.cream-top { padding-top: calc(var(--nav-h, 120px) + 30px); }
/* solid cream to the very top edge (no dark hero above to fade from) */
.legal-paper.cream-top::before { -webkit-mask-image: none !important; mask-image: none !important; }
.legal-title { color: var(--navy) !important; margin-top: 2px; }
.legal-paper .legal-lede {
  font-size: 1.05rem; color: rgba(11,37,64,0.66); margin: 4px auto 10px; max-width: 48ch; text-align: center;
}
.legal-paper .legal-updated { text-align: center; margin-top: 4px; }
/* a gold "paper edge" where the sheet meets the footer */
.legal-paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%);
}

/* ============================================================
   Lucent Loyal — perks on the lighter navy pattern, The Honest Math
   on cream (the cream + navy sections swap places)
   ============================================================ */
/* perks band: the lighter-navy pattern is now parallax-locked and fades in/out
   at its edges, so it blends into the panels above ("why we do it") and below */
.loyal-navy { background: none; position: relative; }
.loyal-navy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #17385e url("assets/lwc-pattern-light.svg?v=2");
  background-size: 860px 500px; background-attachment: fixed;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}
.loyal-navy > * { position: relative; z-index: 1; }
.loyal-honest-cream .veil {
  background: transparent !important; border-color: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.loyal-honest-cream .mission-sub { color: rgba(11,37,64,0.82) !important; }

/* The Honest Math closes the page on cream — solid cream + a gold seam line at
   the top, exactly like every other page's cream section */
.loyal-end { position: relative; }
.loyal-end::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #f8f4ea url("assets/lwc-pattern-cream.svg?v=153");
  background-size: 960px 560px; background-attachment: fixed;
}
.loyal-end::after {           /* thick gold seam + navy depth bleed at BOTH edges — identical to every other cream section */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) top left / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left top 3px / 100% 34px no-repeat,
    linear-gradient(90deg, #b08428 0%, #e8c25c 18%, #ffedb8 50%, #e8c25c 82%, #b08428 100%) bottom left / 100% 3px no-repeat,
    linear-gradient(0deg, rgba(7,22,39,0.58), rgba(7,22,39,0)) left bottom 3px / 100% 34px no-repeat;
}
.loyal-end > * { position: relative; z-index: 1; }
.loyal-end-card {
  margin: 0 auto;
  background: rgba(252,249,242,0.9);
  border: 1px solid rgba(11,37,64,0.14);
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(9,20,36,0.1);
  padding: clamp(30px, 4.4vw, 52px) clamp(24px, 4vw, 46px);
}
/* gold kicker — exact same gold as the "How we clean" cream kicker, no halo */
.loyal-end .veil-kicker { color: #cf9d1c !important; text-shadow: none !important; }
/* solid dark navy, display font on the heading, NO glow/shadow on any of it,
   and never break a word mid-letters inside the card */
.loyal-end .h2 {
  color: var(--navy) !important; text-shadow: none !important; margin: 4px auto 12px;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.06;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.loyal-end-card .mission-sub {
  color: var(--navy) !important;
  text-shadow: none !important;
}

/* ============================================================
   FAQ: keep the photo hero but only half the screen, so the Q&A
   starts halfway and flows down on the navy parallax pattern
   (the cream panel is gone; the fixed guilloche shows through)
   ============================================================ */
.faq-page .sub-hero { min-height: 50svh !important; }
.faq-page .faq-wrap { padding-top: clamp(28px, 5vw, 52px); }

/* ============================================================
   v237 — one shared layout for FAQ / Terms / Privacy:
   a real photo hero with the cream "paper" sliding up over its
   lower half; premium flip cards for "what we do"; gilded reel
   divider lines on the cream reel.
   ============================================================ */

/* --- Photo hero + cream paper that overlaps up into the hero --- */
.legal-hero,
.faq-page .sub-hero { min-height: 64svh !important; }

.overlap-paper {
  position: relative;
  z-index: 4;
  margin-top: -33svh;               /* same on every width so mobile matches desktop */
  padding-top: clamp(30px, 4vw, 46px) !important;
  border-radius: 0;
}
/* the title block now lives INSIDE the cream, centred near mid-screen */
.overlap-paper > .kicker { margin-bottom: 4px; }
.overlap-paper > .legal-title { margin: 0 auto 6px; }
.overlap-paper > .legal-lede { margin: 0 auto 18px; max-width: 60ch; }
/* the cream+gold guilloche fill runs square to the top edge (no top fade) */
.overlap-paper::before {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-radius: 0;
}
/* a thin machined-gold line runs flush along the paper's square top edge */
.overlap-paper::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  z-index: 3;
  pointer-events: none;
  border-radius: 0;
  background: linear-gradient(90deg, #9c6f16 0%, #e8c25c 18%, #fff3bf 50%, #e8c25c 82%, #9c6f16 100%);
  box-shadow: 0 1px 2px rgba(255,255,255,.55), 0 7px 20px rgba(9,6,1,.18);
}
/* the legal/faq hero is now a photo-only band; its title lives in the cream */
.legal-hero--photo > * { display: none; }

/* FAQ Q&A cards now read as ink on the cream paper */
.faq-paper .faq-item {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(11,37,64,.12);
  box-shadow: 0 12px 34px rgba(9,20,36,.07);
}
.faq-paper .faq-item h3 { color: var(--navy); }
.faq-paper .faq-item p { color: rgba(11,37,64,.82); }
.faq-paper .faq-item a { color: #a9781a; }

/* --- Premium flip cards: "what we do" (window care) --- */
.svc-flip-hint {
  margin-top: 14px !important;
  letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; font-weight: 800;
  color: var(--gold-bright) !important; opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(9,6,1,.35);
}
.svc-flips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  margin: clamp(18px, 2.6vw, 30px) auto 0;
  max-width: 900px;
}
/* stay side-by-side on mobile (just smaller) */
@media (max-width: 620px) {
  .svc-flips { gap: 10px; max-width: 100%; }
  .flip-inner { min-height: 366px; }
  .flip-face { border-radius: 16px; }
  .flip-front .flip-front-body { padding: 12px 12px 14px; }
  .flip-front-body b { font-size: 1.12rem; }
  .flip-front-body .svc-card-sub { font-size: 0.72rem; }
  .flip-cue { font-size: 0.6rem; padding: 4px 8px; gap: 4px; margin-top: 7px; }
  .flip-back { padding: 14px 12px; }
  .flip-back .svc-panel-label { font-size: 0.6rem; margin-bottom: 8px; }
  .flip-back .svc-list { gap: 7px; }
  .flip-back .svc-list b { font-size: 0.73rem; }
  .flip-back .svc-list span { font-size: 0.65rem; }
}
.flip-card { perspective: 1800px; cursor: pointer; outline: none; }
.flip-inner {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 50vw, 520px);
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2,.75,.2,1);
  will-change: transform;
}
/* click / tap only — no hover flip */
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(232,194,92,.34);
  box-shadow: 0 26px 60px rgba(6,15,27,.42);
}
/* FRONT — full-bleed photo with a dark title plate at the bottom */
.flip-front { background: #0b2540; }
.flip-front .svc-card-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; display: block; border-radius: 0; }
.flip-front .svc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-front .flip-front-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 22px 24px 24px; text-align: left;
  background: linear-gradient(to top, rgba(6,17,31,.95) 8%, rgba(6,17,31,.6) 55%, transparent);
}
.flip-front-body b {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem); letter-spacing: .01em;
  color: #fff; line-height: 1.02;
}
.flip-front-body .svc-card-sub { color: rgba(233,241,248,.82); font-size: .92rem; }
.flip-cue {
  margin-top: 11px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(232,194,92,.16); border: 1px solid rgba(232,194,92,.5);
  color: #f0d489; font-weight: 700; font-size: .78rem; letter-spacing: .04em;
}
.flip-cue-ic { font-size: 1.05rem; line-height: 1; }
/* BACK — navy card, gold accents, the coverage list */
.flip-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,194,92,.12), transparent 60%),
    linear-gradient(158deg, #14406a 0%, #0b2540 64%);
  padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 24px);
  display: flex; flex-direction: column; justify-content: center; text-align: left;
}
.flip-back .svc-panel-label {
  margin: 0 0 12px; color: var(--gold-bright);
  text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; font-weight: 800;
}
.flip-back .svc-panel-label b { color: #fff; }
.flip-back .svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.flip-back .svc-list li { display: block; padding: 0 0 0 18px; position: relative; }
.flip-back .svc-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, #f6dd93, #cf9f38);
}
/* title on its own line, description under it — no run-together clutter */
.flip-back .svc-list b { display: block; color: #f4f8fc; font-size: .88rem; line-height: 1.2; margin-bottom: 2px; }
.flip-back .svc-list span { display: block; color: rgba(215,227,240,.7); font-size: .76rem; line-height: 1.32; }
/* the Lucent Finish sits apart under a hairline, and drops its bullet (it has a ★) */
.flip-back .svc-list .svc-star {
  margin-top: 8px; padding: 10px 0 0 0;
  border-top: 1px solid rgba(232,194,92,.28);
}
.flip-back .svc-list .svc-star::before { display: none; }
.flip-back .svc-list .svc-star b { color: var(--gold-bright); }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }

/* --- Reel on cream: gild the divider gaps between the panels --- */
.reel-window {
  background: linear-gradient(180deg, #f2d891 0%, #e8c25c 46%, #cf9f38 100%) !important;
}

/* ============================================================
   v238 — square legal/faq paper, click-only flips, address
   chip beside the field, stronger hero pattern, no navy seam line
   ============================================================ */

/* the glitchy gold hairline at the navy→navy section change (solar #hardwater
   sits on band-alt, so there's no colour change to mark) */
#hardwater { border-top: 0 !important; }

/* the hero's guilloche stays clear through the centre (behind the headline) and
   runs SOLID to the bottom edge, so the photo hands off into the body's fixed
   parallax with no hard hue line — same smooth dissolve as the homepage hero */
.sub-hero::after, .mission-hero::after, .loyal-hero::after,
.legal-hero::after, .faq-page .sub-hero::after {
  opacity: 0.85 !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 48%, #000 80%, #000 100%) !important;
          mask-image: linear-gradient(180deg, transparent 48%, #000 80%, #000 100%) !important;
}

/* the starting (homepage) hero photo, a touch less saturated */
.hero-bg img, .hero-bg video { filter: saturate(0.82); }

/* --- Quote wizard: an "Address Protected" mark pinned INSIDE the street-address
       box; the box only highlights green once it's been filled in --- */
.field-addr .addr-inwrap { position: relative; display: block; }
.field-addr .addr-inwrap input { width: 100%; padding-right: 158px !important; }
/* green highlight appears only after it's filled (not on an empty field) */
.field-addr.is-done .addr-inwrap input {
  border-color: rgba(58,178,120,0.8) !important;
  box-shadow: 0 0 0 3px rgba(58,178,120,0.16) !important;
}
/* an unmistakable red still wins if they submit it empty */
.field-addr.is-error .addr-inwrap input {
  border-color: #e88 !important;
  box-shadow: 0 0 0 3px rgba(230,120,120,0.15) !important;
}
/* pinned to the input box itself, so it never drifts when the note expands */
.addr-guard {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px; pointer-events: none; z-index: 2;
  padding: 5px 10px; border-radius: 9px;
  background: rgba(58,178,120,0.15); border: 1px solid rgba(58,178,120,0.5);
  color: #1f8f57; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap;
}
.addr-guard svg { width: 13px; height: 13px; color: #2bb673; flex: 0 0 auto; }

/* mobile flip cards: side-by-side, more SQUARE, titles-only on the back so
   everything fits the narrow card with no cut-off (placed last so it wins) */
@media (max-width: 620px) {
  .svc-flips .flip-inner { min-height: 300px; }
  .svc-flips .flip-front-body { padding: 12px 12px 14px; }
  .svc-flips .flip-front-body b { font-size: 1.08rem; }
  .svc-flips .flip-front-body .svc-card-sub { font-size: 0.7rem; }
  .svc-flips .flip-cue { font-size: 0.58rem; padding: 4px 8px; gap: 4px; margin-top: 7px; }
  .svc-flips .flip-back { padding: 14px 12px; }
  .svc-flips .flip-back .svc-panel-label { font-size: 0.6rem; margin-bottom: 9px; }
  .svc-flips .flip-back .svc-list { gap: 9px; }
  .svc-flips .flip-back .svc-list b { font-size: 0.76rem; margin-bottom: 0; }
  .svc-flips .flip-back .svc-list span { display: none; }        /* descriptions hidden on the small card */
  .svc-flips .flip-back .svc-list .svc-star { margin-top: 9px; padding-top: 10px; }
}

/* ============================================================
   v241 — mobile sub-page heroes read as bright as desktop:
   a lighter photo overlay + a lighter guilloche so the picture
   shows through the same as the full-size layout
   ============================================================ */
@media (max-width: 760px) {
  .sub-hero::before, .mission-hero::before, .loyal-hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(4,13,24,0.40) 0%,
        rgba(6,18,33,0.05) 32%,
        rgba(6,18,33,0.03) 56%,
        rgba(7,22,39,0.5) 86%,
        var(--navy) 100%),
      var(--hero-img, linear-gradient(transparent, transparent));
  }
  .sub-hero::after, .mission-hero::after, .loyal-hero::after,
  .legal-hero::after, .faq-page .sub-hero::after {
    opacity: 0.6 !important;
    -webkit-mask-image: linear-gradient(180deg, transparent 58%, #000 88%, #000 100%) !important;
            mask-image: linear-gradient(180deg, transparent 58%, #000 88%, #000 100%) !important;
  }
}

/* ============================================================
   v242 — FAQ / Terms / Privacy photo heroes get the SAME subtle
   vignette + smooth pattern continuation as the service pages:
   the photo dissolves into the fixed guilloche at the bottom so
   there's no hard dark cut, and the pattern reads straight through
   ============================================================ */
.legal-hero::before, .faq-page .sub-hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0.28) 84%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,0.28) 84%, transparent 100%) !important;
}
/* keep the guilloche gently present through the dissolve on these pages */
.legal-hero::after, .faq-page .sub-hero::after {
  opacity: 0.7 !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 46%, #000 78%, #000 100%) !important;
          mask-image: linear-gradient(180deg, transparent 46%, #000 78%, #000 100%) !important;
}

/* ============================================================
   v248 — mobile dropdown: Lucent Loyal + Our Mission were invisible
   because the shimmer clipped the text fill to transparent. Force a
   solid, readable fill (gold first word, cream rest) so they show.
   ============================================================ */
@media (max-width: 820px) {
  .nav-links a.nav-mission {
    background: none !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: #f9f7f2 !important; color: #f9f7f2 !important;
    animation: none !important; filter: none !important;
  }
  .nav-links a.nav-mission .nm-shine {
    display: inline !important; background: none !important;
    -webkit-text-fill-color: var(--gold-bright) !important; color: var(--gold-bright) !important;
  }
}

/* ============================================================
   v-fix · mobile nav-mission visibility · badges side-by-side
   · Lucent-Loyal-style vignette on the home hero (subtler)
   ============================================================ */

/* 1. Lucent Loyal + Our Mission were stuck at opacity:0 in the mobile sheet —
   an earlier `animation:none !important` on .nav-mission killed the fade-in
   that reveals them. Force them visible when the sheet is open. */
@media (max-width: 820px) {
  .nav-links.is-open a.nav-mission {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2. Keep the "5 Stars" and "2,500+ Windows Cleaned" badges on ONE row,
   even on the narrowest phones. */
@media (max-width: 700px) {
  .hero-badges { flex-wrap: nowrap; justify-content: center; gap: 8px; }
  .hero-badges .badge {
    white-space: nowrap; flex: 0 1 auto; min-width: 0;
    padding: 6px 11px; font-size: 0.72rem;
  }
  .hero-badges .badge .g-icon { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
  .hero-badges .badge { padding: 6px 9px; font-size: 0.68rem; }
}

/* 3. The Lucent Loyal hero's edge-darkening vignette, a little subtler, over
   the home hero video — dark navy at the frame, clear through the middle. */
.hero-vig {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 86% at 50% 42%,
    rgba(5,15,27,0) 44%, rgba(6,18,32,0.55) 100%);
  /* fade the vignette out before the hero's base, so it frames the video edges
     but never tints the guilloche where it flows into the page background —
     the pattern then reads as evenly as the sub-pages' parallax backdrop */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 78%);
}

/* v-fix2 · mobile dropdown: keep the two words of "Lucent Loyal" / "Our Mission"
   together on the left (space-between was flinging them to opposite ends). */
@media (max-width: 820px) {
  .nav-links a.nav-mission { justify-content: flex-start; column-gap: 0.3em; }
  .nav-links a.nav-mission::after { margin-left: auto; }
}


/* ============================================================
   v-fix4 · add the missing gold seam lines, at the ORIGINAL 6px thickness
   · home-page quote (cream) had a top line only — add the bottom one
   · Lucent Loyal's closing cream card line was 3px — bring it to 6px
   ============================================================ */
#quote::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 6px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 6px / 100% 16px no-repeat,
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 6px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 6px / 100% 16px no-repeat !important;
}
.loyal-end::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 6px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 6px / 100% 16px no-repeat,
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 6px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 6px / 100% 16px no-repeat !important;
}

/* ============================================================
   v-fix5 · quote money signs ($/$$/$$$): minimal, no glow
   ============================================================ */
#quote-form .opt-price {
  background: rgba(9,40,26,0.5) !important;
  color: #74d9a4 !important;
  text-shadow: none !important;
  box-shadow: inset 0 0 0 1px rgba(80,180,130,0.28) !important;
}
#quote-form .opt.is-on .opt-price {
  background: rgba(7,22,39,0.9) !important;
  color: #8fe6bd !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ============================================================
   v-fix6 · GALLERY: the hero dissolves into CREAM, not grey

   The page ground was #d0d4d2 — a cool grey, not the site's cream —
   and the hero reached it through rgba(150,168,186,…), a blue-grey
   haze. Together they made the top of the page read as overcast.
   Ground and dissolve now both run on the cream the rest of the site
   uses (#f8f4ea, same as .reel), on the same stop positions as the
   other sub-page heroes so the handoff lands at the same height.
   ============================================================ */
.gallery-page { background-color: #f8f4ea !important; }

.gallery-page .sub-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%,
      rgba(6,18,33,0.42) 42%,
      rgba(28,38,52,0.10) 66%,
      rgba(248,244,234,0.46) 84%,
      #f8f4ea 100%),
    var(--hero-img, linear-gradient(transparent, transparent)) !important;
}

@media (min-width: 761px) {
  .gallery-page .sub-hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(7,22,39,0.42) 0%,
        rgba(7,22,39,0.12) 24%,
        rgba(28,38,52,0.10) 56%,
        rgba(248,244,234,0.46) 82%,
        rgba(248,244,234,0.92) 94%,
        #f8f4ea 100%),
      var(--hero-img, linear-gradient(transparent, transparent)) !important;
  }
}

/* ============================================================
   v-fix7 · mobile nav wordmarks · thinner gold seam ·
            gallery hero lands on cream before its edge
   ============================================================ */

/* 1 · "Lucent Loyal" / "Our Mission" in the mobile sheet were gold on the
       first word, cream on the second. Both words are the glowing white now. */
@media (max-width: 820px) {
  .nav-links a.nav-mission .nm-shine {
    -webkit-text-fill-color: #f9f7f2 !important;
    color: #f9f7f2 !important;
  }
}

/* 2 · Gold seam bar 6px -> 4px. The depth shadow is offset by the bar's own
       height, so it moves with it or a gap opens under the line. */
.band-cream::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 5px / 100% 16px no-repeat,
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 5px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 5px / 100% 16px no-repeat !important;
}
.band-cream.cream-connect-down::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 5px / 100% 16px no-repeat !important;
}
.reel::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 5px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 5px / 100% 16px no-repeat !important;
}
#quote::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 5px / 100% 16px no-repeat,
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 5px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 5px / 100% 16px no-repeat !important;
}
.loyal-end::after {
  background:
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) top left / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left top 5px / 100% 16px no-repeat,
    linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%) bottom left / 100% 5px no-repeat,
    linear-gradient(0deg, rgba(4,11,20,0.45), rgba(4,11,20,0)) left bottom 5px / 100% 16px no-repeat !important;
}

/* 3 · The gallery hero met the page's cream on a hard step. The cause was
       compositing, not colour: the hero's pattern layer runs at opacity 0.6
       over a graded photo, while the page below paints the SAME tile at full
       strength on solid cream — so the two surfaces could never land on the
       same value no matter how the gradient was tuned.

       Now the pattern layer alone does the landing: full opacity, opaque
       cream under it, masked so it dissolves in over the photo and is
       completely solid well before the hero's bottom edge. The last stretch
       of the hero then IS the page ground, pixel for pixel, and ::before goes
       back to being only a scrim over the photo. */
.gallery-page .sub-hero::after {
  opacity: 1 !important;
  background-color: #f8f4ea !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 46%, #000 84%, #000 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0%, transparent 46%, #000 84%, #000 100%) !important;
}
.gallery-page .sub-hero::before {
  background-image:
    linear-gradient(180deg,
      rgba(4,13,24,0.78) 0%,
      rgba(6,18,33,0.40) 42%,
      rgba(28,38,52,0.12) 72%,
      rgba(28,38,52,0.06) 100%),
    var(--hero-img, linear-gradient(transparent, transparent)) !important;
}
@media (min-width: 761px) {
  .gallery-page .sub-hero::before {
    background-image:
      linear-gradient(180deg,
        rgba(7,22,39,0.42) 0%,
        rgba(7,22,39,0.12) 26%,
        rgba(28,38,52,0.10) 64%,
        rgba(28,38,52,0.06) 100%),
      var(--hero-img, linear-gradient(transparent, transparent)) !important;
  }
}

/* ============================================================
   v-fix8 · flip cards line up, and nothing touches the border
   ============================================================ */
/* The backs were centred, so two lists of unequal height started at
   different y — the cards read as misaligned side by side. Top-align both
   and the labels and bullets sit on the same lines. */
.svc-flips .flip-back { justify-content: flex-start; }

/* The face is a fixed box (the 3D flip needs both faces the same size), so
   content taller than it gets clipped by overflow:hidden — the longer list
   was running 6px past the border in the 620-900px range, where the columns
   are narrowest but the descriptions still show. Enough headroom for the
   longest list at its most-wrapped. */
.svc-flips .flip-inner { min-height: clamp(474px, 52vw, 545px); }

/* mobile keeps its own compact height (descriptions are hidden there) */
@media (max-width: 620px) {
  .svc-flips .flip-inner { min-height: 300px; }
}

/* "A business visit covers" wraps to two lines on a narrow card while "A home
   visit covers" stays on one, which pushed the two bullet lists onto different
   lines. Reserve two lines for the label on both cards so the lists always
   start level, at any width. */
.svc-flips .flip-back .svc-panel-label {
  line-height: 1.25;        /* pinned: the inherited value made "two lines" an
                               unknown height, so the reserve never matched */
  min-height: 2.5em;        /* exactly two lines at that line-height */
  /* NOT display:flex — that makes the text node and the <b> separate flex
     items and eats the space between them ("A Home Visit canCover"). */
  display: block;
}

/* ============================================================
   v-fix9 · the how-we-clean reel stacks on DESKTOP too

   Desktop used to pan the three panels side by side while mobile stacked
   them and grew the open one downward. Same top-to-bottom logic everywhere
   now — the scroll-driven JS is already shared, only the flex axis differed.
   The frame is narrowed from 1240px so a stacked panel keeps a sensible
   picture shape instead of a very wide letterbox.
   ============================================================ */
@media (min-width: 821px) {
  .reel-window { width: min(940px, 92vw); }
  .reel-track { flex-direction: column; gap: 5px; }
  .reel-slide { flex-grow: 0.5; }
  .reel-slide.is-active { flex-grow: 2.8; }
  /* the resting panel's step name reads across, not sideways */
  .reel-slide::after {
    writing-mode: horizontal-tb;
    transform: translateX(-50%);
    bottom: 12px;
    font-size: 0.7rem; letter-spacing: 0.18em;
  }
}

/* ============================================================
   v-fix10 · solar hero framed on the panels
   The shared sub-hero crop is `center 28%`, which on valley-solar.jpg
   fills the frame with sky and hillside and pushes the array to the
   bottom edge. The panels sit around the middle of that photo.
   ============================================================ */
.solar-page .sub-hero::before {
  background-position: center 52%, center 52% !important;
}

/* ============================================================
   v-fix11 · stray hairline removed · gallery hero goes fully cream
   ============================================================ */

/* 1 · A leftover `border-top: 1px rgba(216,169,60,0.12)` on the cream bands
       drew a faint line straight across the guilloche. Those seams are the
       5px gold bar now, so the hairline is redundant — and on cream it read
       as a stray scratch rather than a divider. */
#benefits, #hardwater, #schedule, .band-cream { border-top: 0 !important; }

/* 2 · The hero vignette is an element (JS-injected) that paints the NAVY tile
       plus a navy edge-darkening. On the gallery — whose whole surface is the
       cream-and-gold guilloche — that put navy lines over the top of the photo.
       Same layer, cream tile, and the edge darkening becomes a soft cream
       so the frame still reads without going blue. */
.gallery-page .hero-vignette {
  background:
    url("assets/lwc-pattern-cream.svg?v=153") repeat,
    radial-gradient(ellipse 76% 82% at 50% 42%, rgba(248,244,234,0) 40%, rgba(248,244,234,0.62) 100%) !important;
  background-size: 960px 560px, cover !important;
  background-attachment: fixed, scroll !important;
}

/* ============================================================
   v263 · gallery hero copy goes navy · Lucent Finish stops
          touching its pill · header is one dark value at every
          scroll position · chat launcher yields to the footer
   ============================================================ */

/* 1 · Gallery hero: the aerial is a pale hazy sky and the shared sub-hero
       treatment put cream letters with a dark extruded shadow on it — the
       heading all but vanished. Navy letters with a cream glow instead. The
       extruded 3D shadow (set with !important on every hero h1) has to be
       replaced here, not just recoloured, or the dark relief muddies the
       navy face. */
.gallery-page .sub-hero h1,
.gallery-page .sub-hero h1 em,
.gallery-page .sub-hero p {
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  background: none !important;
}
.gallery-page .sub-hero h1,
.gallery-page .sub-hero h1 em {
  text-shadow:
    0 1px 2px rgba(255,255,255,0.55),
    0 2px 16px rgba(248,244,234,0.9),
    0 0 44px rgba(248,244,234,0.75) !important;
}
.gallery-page .sub-hero p {
  color: rgba(11,37,64,0.9) !important;
  -webkit-text-fill-color: rgba(11,37,64,0.9) !important;
  font-weight: 600;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.6),
    0 2px 12px rgba(248,244,234,0.85) !important;
}

/* 2 · "★ The Lucent Finish" on the flip-card backs sat flush against its own
       gold outline. Cause: the premium row is styled twice — an earlier block
       gives it the rounded gold-lit box (border + radius + background), a
       later one re-cut its padding to `10px 0 0 0` for a hairline-divider
       look that never landed. The box survived, the side and bottom padding
       did not, so the title and its description touched the outline.
       One coherent treatment now: an evenly padded gold-lit card. */
.flip-back .svc-list .svc-star {
  margin-top: 13px;
  padding: 12px 15px 13px;
  border: 1px solid rgba(232,194,92,0.5);
  border-top: 1px solid rgba(232,194,92,0.5);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(216,169,60,0.2), rgba(11,37,64,0.34));
  box-shadow: 0 8px 22px rgba(0,0,0,0.24), inset 0 0 0 1px rgba(232,194,92,0.1);
}
/* the small mobile card keeps the same breathing room, just tighter */
@media (max-width: 620px) {
  .svc-flips .flip-back .svc-list .svc-star {
    margin-top: 11px;
    padding: 10px 11px 11px;
  }
}

/* 3 · The bar changed colour on scroll: unstuck it painted rgba(7,22,39,.96),
       stuck it swapped to rgba(5,15,27,.97) — two different navies, so the
       header visibly darkened as you left the hero. One dark value in both
       states now, still a touch transparent so the blur reads. The stuck
       shadow stays: that's depth, not colour. */
.nav,
.nav.is-stuck {
  background: rgba(5,14,25,0.96);
}

/* 4 · Near the end of the page the floating chat launcher covers the footer's
       own contact details. It gets out of the way, same motion the panel-open
       state already uses, and comes back as soon as you scroll up. */
body.at-page-end .spark-launch {
  opacity: 0;
  transform: translateY(20px) scale(0.94);
  pointer-events: none;
  animation: none;          /* the periodic shake owns transform — release it */
}

/* ============================================================
   v264 · navy titles carry the 3-D across the whole heading ·
          gallery title is bold 3-D navy with no shine ·
          gold frame all round the legal/FAQ sheet ·
          refined utility strip · 4-across mobile gallery ·
          gold seam closing the gallery
   ============================================================ */

/* 1 · The <em> word in a heading was the only flat word on the page. Cause is
       the base `em, .hi` rule: it fills the glyphs with a clipped gradient and
       kills text-shadow so the fill can't be tinted. The gold fill was removed
       from headings long ago, but the `text-shadow: none` stayed behind — so
       "asked." sat flat next to an embossed "Frequently".
       `inherit` picks up whatever relief the heading itself carries, so the two
       halves always match, whatever a given heading's treatment is. */
.band-cream h2 em:not(.em-gold):not(.em-lucent),
.band-cream .h2 em:not(.em-gold):not(.em-lucent),
.band-cream .sec-title em:not(.em-gold):not(.em-lucent),
.cream-top h1 em:not(.em-gold):not(.em-lucent),
.cream-top h2 em:not(.em-gold):not(.em-lucent),
.cream-top .h2 em:not(.em-gold):not(.em-lucent),
.legal-title em:not(.em-gold):not(.em-lucent),
#quote > .wrap > .h2 em:not(.em-gold):not(.em-lucent) {
  text-shadow: inherit !important;
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* 2 · Gallery hero: bold 3-D navy, nothing else. The cream halo that made it
       legible in v263 read as glare over the pale aerial, so the depth is all
       navy now — no white highlight layer, no glow. */
.gallery-page .sub-hero h1,
.gallery-page .sub-hero h1 em {
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  background: none !important;
  text-shadow:
    0 1px 2px rgba(11,37,64,0.32),
    0 2px 4px rgba(11,37,64,0.26),
    0 4px 10px rgba(11,37,64,0.22) !important;
}
.gallery-page .sub-hero p {
  color: rgba(11,37,64,0.9) !important;
  -webkit-text-fill-color: rgba(11,37,64,0.9) !important;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(11,37,64,0.18) !important;
}

/* 3 · The FAQ / Terms / Privacy sheet is a bounded 860px rectangle, but only
       its top edge was gilded — the other three sides just stopped. One gold
       frame right round it now: each edge gets its own sweep so the corners
       meet on the deep tone rather than a hard butt joint. */
.overlap-paper::after {
  top: 0; right: 0; bottom: 0; left: 0;
  height: auto;
  background:
    linear-gradient(90deg, #9c6f16 0%, #e8c25c 18%, #fff3bf 50%, #e8c25c 82%, #9c6f16 100%) top left / 100% 4px no-repeat,
    linear-gradient(90deg, #9c6f16 0%, #e8c25c 18%, #fff3bf 50%, #e8c25c 82%, #9c6f16 100%) bottom left / 100% 4px no-repeat,
    linear-gradient(180deg, #9c6f16 0%, #e8c25c 18%, #fff3bf 50%, #e8c25c 82%, #9c6f16 100%) top left / 4px 100% no-repeat,
    linear-gradient(180deg, #9c6f16 0%, #e8c25c 18%, #fff3bf 50%, #e8c25c 82%, #9c6f16 100%) top right / 4px 100% no-repeat;
  box-shadow: 0 12px 34px rgba(9,6,1,0.13);
}

/* 4 · Utility strip: it was a distinctly lighter, bluer band sitting on top of
       the header, so it read as a separate bar bolted on rather than the top
       tier of one. Same dark family as the bar now, with the gold doing the
       separating, and the type set as small caps to match the nav links.
       Scoped to .nav-util-item so the rotating ad keeps its own sizing. */
.nav-util {
  background:
    linear-gradient(90deg, rgba(216,169,60,0) 0%, rgba(216,169,60,0.055) 50%, rgba(216,169,60,0) 100%),
    linear-gradient(90deg, #060f1c 0%, #0e2340 50%, #060f1c 100%);
  border-bottom: 1px solid rgba(216,169,60,0.15);
  padding: 8px clamp(14px, 4vw, 34px);
}
.nav-util-item {
  gap: 8px;
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226,236,246,0.74);
}
.nav-util-item b {
  color: var(--cream);
  font-weight: 800;
  letter-spacing: 0.075em;
}
.nav-util svg { width: 13px; height: 13px; color: rgba(224,180,74,0.9); }
.nav-util-sep { height: 11px; background: rgba(216,169,60,0.24); }

/* 5 · Mobile gallery: one photo per row meant scrolling forever to see the
       work. Four across turns it into a contact sheet. The city tag is dropped
       at that size — it can't be read on an 80px tile and only covers the photo
       (tapping still opens the lightbox, which names the job). */
@media (max-width: 620px) {
  .gal-wrap { padding-left: 10px; padding-right: 10px; }
  .gal-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
  .gal-item { border-radius: 8px; }
  .gal-tag { display: none; }
}

/* 6 · The gallery's cream ran straight into the navy footer on a bare edge —
       every other cream section on the site closes on the 5px gold seam. The
       bar goes on the footer because the footer is full-bleed, while .gal-wrap
       is capped at 1180px and would have left the line floating short. */
.gallery-page .foot { position: relative; border-top: 0; }
.gallery-page .foot::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, #a87718 0%, #e8c25c 15%, #fff3bf 50%, #e8c25c 85%, #a87718 100%);
  box-shadow: 0 -14px 28px -10px rgba(4,11,20,0.34);
}

/* ============================================================
   v265 · receipts stay side by side at every width ·
          gallery hero drops its photo and becomes cream
   ============================================================ */

/* 1 · The before/after receipts are the whole point of the Lucent Loyal page —
       the $199 and the $179 have to be readable against each other. Stacking
       them under 820px put a screen-height of scrolling between the two prices,
       which loses the comparison. They stay in a row now and just scale down;
       equal height so the two totals line up, and the arrow keeps pointing
       across rather than rotating down. */
@media (max-width: 820px) {
  .receipts { flex-direction: row; align-items: stretch; gap: 10px; }
  .receipt { max-width: none; padding: 15px 13px; }
  .r-arrow { align-self: center; }
  .r-arrow svg { transform: none; }
}
@media (max-width: 620px) {
  .receipts { gap: 6px; margin: 22px 0 14px; }
  .receipt { padding: 11px 9px; border-radius: 11px; }
  .r-badge {
    font-size: 0.46rem; letter-spacing: 0.08em;
    padding: 3px 7px; margin-bottom: 8px;
  }
  .r-head { font-size: 0.7rem; padding-bottom: 7px; margin-bottom: 7px; }
  .r-line { font-size: 0.6rem; gap: 4px; padding: 3px 0; line-height: 1.25; }
  .r-total { margin-top: 7px; padding-top: 7px; font-size: 0.66rem; }
  .r-total b { font-size: 0.95rem; }
  .r-arrow span { display: none; }              /* "come back" won't fit — the arrow says it */
  .r-arrow svg { width: 17px; height: 17px; }
  .receipts-cap { font-size: 0.84rem; }
}

/* 2 · Gallery hero: the aerial photo is gone. Both hero layers are dropped
       rather than recoloured, so the section is simply transparent and the
       page's own cream + guilloche shows through — that way the hero and the
       grid below it are literally the same surface and there is no seam or
       tonal step between them to tune. The injected .hero-vignette goes too:
       it repaints the same tile at its own offset, which moirés against the
       body's copy once the photo isn't covering it. */
.gallery-page .sub-hero::before,
.gallery-page .sub-hero::after,
.gallery-page .hero-vignette { display: none !important; }

/* without a photo to fill, the band only needs to clear the nav and frame the
   title — the old height was sized for the picture */
.gallery-page .sub-hero {
  min-height: 34svh !important;
  padding-top: calc(var(--nav-h, 120px) + 5vh);
  padding-bottom: 4vh;
}

/* 3 · Title takes the exact relief the other cream sections use — the white
       top highlight over the navy carve — so the gallery reads as one of them
       instead of having its own treatment. */
.gallery-page .sub-hero h1,
.gallery-page .sub-hero h1 em {
  color: var(--navy) !important;
  -webkit-text-fill-color: var(--navy) !important;
  background: none !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.55),
    0 2px 3px rgba(11,37,64,0.18),
    0 3px 6px rgba(11,37,64,0.22) !important;
}
.gallery-page .sub-hero p {
  color: rgba(11,37,64,0.9) !important;
  -webkit-text-fill-color: rgba(11,37,64,0.9) !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5) !important;
}

/* ============================================================
   v266 · headings never split a word · −$20 stays whole ·
          honest-math heading fits one row · mobile footer
          laid out like the desktop one
   ============================================================ */

/* 1 · The letter-reveal wraps every character in its own inline-block, which
       gives the browser a line-break opportunity between any two letters —
       that's what split "LOWER" into "LOWE / R". site.js now groups each word
       in .ltr-word; nowrap on that box removes the break opportunities inside
       it, so wrapping can only happen at real spaces. Applies to every heading
       the reveal touches, not just this one. */
.ltr-word { white-space: nowrap; }

/* 2 · The reward amount was breaking between the minus and the figure, leaving
       a stray "−" on its own line above "$20". Amounts stay whole. */
.r-line b, .r-total b, .r-line.reward b { white-space: nowrap; }

/* 3 · "Cleaner windows, lower price." needs to land on one line. Its floor was
       1.7rem, which needs ~370px for one row inside a ~290px card, so it always
       wrapped. Sized off the viewport instead, with a floor low enough that even
       a 320px screen keeps it on one row. */
@media (max-width: 620px) {
  .loyal-end .h2 { font-size: clamp(0.95rem, 5.2vw, 1.45rem) !important; }
}

/* 4 · Footer on mobile was one centred column, which read nothing like the
       three-column desktop footer and buried Explore under a wall of contact
       text. The brand block keeps the full width, then Explore and Serving sit
       side by side, left-aligned — same reading order and same left edge as
       desktop, just folded once. */
@media (max-width: 620px) {
  .foot { padding: 36px 6vw 26px; }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
    gap: 26px 20px;
  }
  .foot-grid > div { align-items: flex-start; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .foot-logo { align-self: flex-start; height: 46px; }
  .foot-grid b { font-size: 0.72rem; letter-spacing: 0.12em; }
  .foot-grid a, .foot-grid p { font-size: 0.86rem; }
  /* the Serving list is a long run of city names — tighten it so the two
     columns end up roughly the same depth */
  .foot-grid > div:last-child p { font-size: 0.78rem; line-height: 1.5; }
  .foot-legal { text-align: left; font-size: 0.74rem; margin-top: 24px; padding-top: 16px; }
}

/* ============================================================
   v267 · the example prices say so
   ============================================================ */

/* The $199 / $179 receipts illustrate how the 10% lands — they aren't a rate
   card, so a quiet gold line under the caption says so rather than letting a
   visitor arrive expecting that number. */
.price-note {
  margin: 7px auto 0;
  max-width: 56ch;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(224,180,74,0.82);
}
@media (max-width: 620px) {
  .price-note { font-size: 0.64rem; letter-spacing: 0.03em; }
}

/* v268 · the price note stays on one line — the 56ch cap was narrower than the
   sentence at that font size, so it wrapped no matter how much room the card
   had. Cap removed, size tied to the viewport, and nowrap to hold it. */
.price-note {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.55rem, 2.5vw, 0.7rem);
}
@media (max-width: 620px) {
  .price-note { font-size: clamp(0.52rem, 2.5vw, 0.66rem); }
}

/* ============================================================
   v269 · quote form: one photo/text split for every step
   ============================================================ */

/* The overlap and the missing photo came from the same place: the wording cap
   and the white wash that protects it were separate hard-coded percentages
   (58% text over a 56% wash on mobile), and the photos were assigned by
   :nth-child — which numbered Lucent Finish as "1", handed it the Exterior
   photo, and left Exterior Care (child 3) matching no rule at all, so it got
   no photo. Both are now derived: one pair of variables drives the wash, the
   cap and the photo band on every step, and each tier names its own photo. */
#quote-form {
  --q-text: 52%;   /* wash stays solid white this far — wording lives inside it */
  --q-fade: 64%;   /* fully transparent by here — the photo takes over */
}
@media (max-width: 560px) {
  #quote-form { --q-text: 57%; --q-fade: 70%; }
}

/* each tier names its photo — position in the list is irrelevant now */
#quote-form .opts .opt.opt-star       { --opt-photo: url("assets/svc/finish.png?v=3"); }
#quote-form .opts .opt.opt-extint     { --opt-photo: url("assets/svc/ext-int.png?v=3"); }
#quote-form .opts .opt.opt-ext        { --opt-photo: url("assets/svc/exterior.png?v=3"); }
#quote-form .opts .opt.opt-solar-only { --opt-photo: url("assets/svc/solar.png?v=3"); }

/* Step 2 tiers. Selectors carry a tier class so they outrank the older
   :nth-child rules; the .is-on pair matches the old selected-state weight. */
#quote-form .opts .opt.opt-star,
#quote-form .opts .opt.opt-extint,
#quote-form .opts .opt.opt-ext,
#quote-form .opts .opt.opt-solar-only,
#quote-form .opts .opt.opt-star.is-on,
#quote-form .opts .opt.opt-extint.is-on,
#quote-form .opts .opt.opt-ext.is-on,
#quote-form .opts .opt.opt-solar-only.is-on {
  background-image:
    linear-gradient(90deg, #fff 0, #fff var(--q-text), rgba(255,255,255,0) var(--q-fade)),
    var(--opt-photo) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  /* auto 100% keeps the photo at its own proportions — never squashed */
  background-size: 100% 101%, auto 100% !important;
}

/* Step 3 solar choice — same split, photo injected by site.js as --opt-photo */
#quote-form .svc-choice {
  background-image:
    linear-gradient(90deg, #fff 0, #fff var(--q-text), rgba(255,255,255,0) var(--q-fade)),
    var(--opt-photo, none) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  background-size: 100% 101%, auto 100% !important;
}

/* wording sits inside the solid part of the wash on every step, so it can
   never land on the photo */
#quote-form .wiz-step[data-step="2"] .opt-main,
#quote-form .opt-main { max-width: calc(var(--q-text) - 3%) !important; }
#quote-form .svc-choice-tx { max-width: calc(var(--q-text) - 6%) !important; }

/* Step 4 recap — text was capped at 46% while the photo strip started at 40%
   from the right, so they overlapped by 6% and the wording needed a white glow
   to stay legible. They now meet exactly, and the glow comes off. */
.recap-tx { max-width: calc(var(--q-text) - 2%); }
.recap-pics { width: calc(100% - var(--q-text) + 2%); }
#quote-form .wiz-recap b { text-shadow: none; }
.recap-lead { text-shadow: none; }

/* v270 · reserve the photo band with padding instead of capping the text box.
   A % max-width resolves against the CONTENT box, so the button's 18px side
   padding pushed the wording's right edge past the wash no matter what number
   went in — "Exterior Care" landed exactly on the boundary. Reserving the band
   as padding-right makes the geometry exact at any width, and .opt-tail is
   absolutely positioned so the flag and price still sit over the photo. */
#quote-form .opts .opt,
#quote-form .svc-choice {
  padding-right: calc(104% - var(--q-text)) !important;
}
#quote-form .wiz-step[data-step="2"] .opt-main,
#quote-form .opt-main,
#quote-form .svc-choice-tx { max-width: 100% !important; }

/* v271 · on a phone the wording matters more than the photo — "Every frame,
   pane, track, sill & screen" was wrapping to four lines against a 57% cap.
   Text takes about two thirds there; the band still reads as a photo. */
@media (max-width: 560px) {
  #quote-form { --q-text: 66%; --q-fade: 80%; }
}

/* ============================================================
   v272 · a ladder of photo bands · recap split actually applied
   ============================================================ */

/* The fade now derives from the wash, so overriding --q-text per tier moves the
   wash, the fade, the text cap and the band together as one unit. */
#quote-form { --q-fade: calc(var(--q-text) + 12%); }

/* Photo band steps down the list, so the more a tier includes the more picture
   it gets — the four rows read as a ladder rather than four identical bands.
   Exterior Care's photo is a single scene (~2.67:1); at this band width the
   whole scene fits without being clipped, so it reads like the recap strip. */
#quote-form .opts .opt.opt-star       { --q-text: 45%; }
#quote-form .opts .opt.opt-extint     { --q-text: 51%; }
#quote-form .opts .opt.opt-ext        { --q-text: 57%; }
#quote-form .opts .opt.opt-solar-only { --q-text: 51%; }
@media (max-width: 560px) {
  #quote-form .opts .opt.opt-star       { --q-text: 60%; }
  #quote-form .opts .opt.opt-extint     { --q-text: 64%; }
  #quote-form .opts .opt.opt-ext        { --q-text: 68%; }
  #quote-form .opts .opt.opt-solar-only { --q-text: 64%; }
}

/* Recap: the earlier attempt lost to an existing !important pair, so the strip
   still started at 34% while the wording ran to 29% — close, but the card was
   mostly photo. Its own split, applied with the weight to stick. */
#quote-form .wiz-recap { --q-text: 48%; }
#quote-form .wiz-recap .recap-tx {
  max-width: var(--q-text) !important;
  background: linear-gradient(90deg, #fff 0, #fff 88%, rgba(255,255,255,0) 100%) !important;
}
#quote-form .wiz-recap .recap-pics { width: calc(100% - var(--q-text)) !important; }
/* the white glow existed to keep the wording legible ON the photos — it has its
   own clear space now, so it comes off (it read as a smudge on white) */
#quote-form .wiz-recap b,
#quote-form .wiz-recap .recap-add,
#quote-form .wiz-recap .recap-lead { text-shadow: none !important; }

/* ============================================================
   v273 · Lucent Loyal runs one dark tone · photo heroes show
          more picture · the wizard's <em> stops sitting flat
   ============================================================ */

/* 1 · The perks section painted a LIGHTER navy panel (#17385e) over the page's
       dark ground, which broke the page into a pale stripe halfway down. The
       dark simply continues now — the panel's own mask/pattern layer goes with
       it, so nothing else has to be retuned. */
.loyal-navy::before { display: none !important; }

/* 2 · Photo heroes: the title block sat high enough that the picture was mostly
       cropped away above it. More top padding drops the wording and reveals
       more of the photo before the dissolve begins. The gallery is excluded —
       it has no photo any more and sets its own height. */
body:not(.gallery-page) .sub-hero {
  min-height: 72vh;
  padding-top: 24vh;
}
@media (max-width: 900px) {
  body:not(.gallery-page) .sub-hero { min-height: 62vh; padding-top: 20vh; }
}
@media (max-width: 620px) {
  body:not(.gallery-page) .sub-hero { min-height: 52vh; padding-top: 17vh; }
}
/* faq/terms/privacy heroes are a photo band with the title in the cream sheet
   below, so they keep their own heights */
.faq-page .sub-hero, .legal-hero { padding-top: 15vh; }

/* 3 · "WHO IS THIS FOR?" — the wizard question is a heading too, but .wiz-q
       wasn't in the list that re-inherits the relief, so "for?" rendered flat
       next to embossed letters. Same treatment as every other heading em. */
#quote-form .wiz-q em:not(.em-gold):not(.em-lucent),
.wiz-q em:not(.em-gold):not(.em-lucent) {
  text-shadow: inherit !important;
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* ============================================================
   v-fix12 · step-3 choice cards use the step-2 tier logic
   ============================================================ */

/* 1 · THE BUG. `#quote-form .choice-sub { padding: 4px 16px 22px }` gave the
       sub-line a 16px left padding that `.opt-sub` does not have, so on every
       step-3 card the description started 16px to the RIGHT of its own title.
       The boxes lined up, the text did not — which is what read as "broken".
       The 22px bottom padding also made these cards taller than the tiers. */
#quote-form .svc-choice-tx .choice-sub {
  padding: 4px 0 2px !important;
}

/* 2 · Same text/photo split as the tier buttons, but the photo band is
       skinnier here: "Continue with Lucent Finish" is the longest label in the
       wizard, and it was wrapping against the band on a narrow phone. */
@media (max-width: 560px) {
  #quote-form .svc-choice { --q-text: 70%; }
}
@media (max-width: 400px) {
  #quote-form .svc-choice { --q-text: 75%; }
}

/* ============================================================
   v-fix13 · tier + step-3 cards show their photo the way the
             "Great choice" recap pill does
   ============================================================ */

/* The recap pill has always looked right because its photo is a real <img> in
   its own flex cell, sized with object-fit:cover against a band whose shape is
   close to the art's (480x176 = 2.7:1). The buttons instead painted the same
   file as a CSS background at `auto 100%`, which scales it to the CARD's
   height — a 99px-tall card blows the art up to ~270px wide, and the ~119px
   band then shows only its right-hand third. That's why one button showed half
   a garage door while the recap showed the whole scene.

   Same mechanism as the recap now: drop the background photo, give each card a
   photo cell, and let object-fit do the work. */
#quote-form .opts .opt,
#quote-form .opts .opt.is-on,
#quote-form .opts .opt.opt-star,
#quote-form .opts .opt.opt-extint,
#quote-form .opts .opt.opt-ext,
#quote-form .opts .opt.opt-solar-only,
#quote-form .opts .opt.opt-star.is-on,
#quote-form .opts .opt.opt-extint.is-on,
#quote-form .opts .opt.opt-ext.is-on,
#quote-form .opts .opt.opt-solar-only.is-on,
#quote-form .svc-choice {
  background-image: none !important;
  background-color: #fff !important;
}

#quote-form .opt-pics {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: calc(100% - var(--q-text));
  display: flex; overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* the same soft left edge the recap strip uses, so the photo eases out of
     the white instead of butting against it */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
}
#quote-form .opt-pic {
  flex: 1 1 0; min-width: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: #fff; display: block;
}

/* wording rides above the photo cell */
#quote-form .opt-main,
#quote-form .svc-choice-tx { position: relative; z-index: 1; }
/* .opt-tail is ALREADY absolutely positioned over the photo — it only needs a
   stacking order. Giving it `position: relative` drops it back into the flex
   flow and crushes the wording into a narrow column. */
#quote-form .opt-tail { z-index: 2; }

/* ============================================================
   v-fix14 · every card's photo band is the SAME width
   ============================================================ */

/* v272 gave each tier its own --q-text (45/51/57/51 desktop, 60/64/68/64
   mobile) so the band "stepped down the list like a ladder". In practice that
   just made four different photo sizes down one column, which is what read as
   uneven. One value for every card — tiers, the step-3 pair, and the recap —
   so all the photos are the same size and line up down the page. The wording
   was shortened to suit the narrower text column. */
#quote-form .opts .opt.opt-star,
#quote-form .opts .opt.opt-extint,
#quote-form .opts .opt.opt-ext,
#quote-form .opts .opt.opt-solar-only,
#quote-form .svc-choice {
  --q-text: 54% !important;
}
@media (max-width: 560px) {
  #quote-form .opts .opt.opt-star,
  #quote-form .opts .opt.opt-extint,
  #quote-form .opts .opt.opt-ext,
  #quote-form .opts .opt.opt-solar-only,
  #quote-form .svc-choice {
    --q-text: 62% !important;
  }
}

/* the cards also stop being different heights: a fixed photo band only reads as
   even if the rows it sits in are even too */
#quote-form .opts .opt { min-height: 108px; }
@media (max-width: 560px) {
  #quote-form .opts .opt { min-height: 96px; }
}

/* ============================================================
   v-fix15 · every wizard button is one control · gold pick glow
   ============================================================ */

/* The step-3 pair was a different control to the step-2 tiers: 64px tall
   against 96/108, and it never changed appearance when you picked one. The
   recap chip was a third size again (84px). All three are the service-option
   control now — same height, same idle colours, same radius. */
#quote-form .svc-choice,
#quote-form .wiz-recap {
  min-height: 108px !important;
  border-radius: 14px !important;
}
@media (max-width: 560px) {
  #quote-form .svc-choice,
  #quote-form .wiz-recap { min-height: 96px !important; }
}

/* idle = an unpicked service option: white, navy hairline, soft lift */
#quote-form .svc-choice {
  background-color: #fff !important;
  border: 1px solid rgba(11,37,64,0.16) !important;
  box-shadow: 0 3px 10px rgba(11,37,64,0.06) !important;
}

/* Picked = a soft gold glow all the way AROUND. The old selected state only
   dropped light downward (0 8px 20px), so it read as a shadow rather than a
   highlight; the 0-offset rings are what make it glow. Same on every step. */
#quote-form .opts .opt.is-on,
#quote-form .svc-choice.is-on,
#quote-form .wiz-recap {
  border-color: #e8c25c !important;
  box-shadow:
    inset 0 0 0 2px #e8c25c,
    0 0 0 4px rgba(216,169,60,0.15),
    0 0 20px rgba(216,169,60,0.40),
    0 6px 18px rgba(216,169,60,0.18) !important;
}

/* the glow arrives with the pick rather than snapping on */
#quote-form .opts .opt,
#quote-form .svc-choice {
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
}

/* ============================================================
   v-fix16 · recap is not a "picked" control · bigger photos on
             mobile · every recap photo the same width
   ============================================================ */

/* 1 · Step 4 is a summary, not something you choose, so it drops the gold pick
       glow and goes back to the plain card treatment. */
#quote-form .wiz-recap {
  border-color: rgba(11,37,64,0.16) !important;
  box-shadow: 0 3px 10px rgba(11,37,64,0.06) !important;
}

/* 2 · On a phone the photo now runs closer to the wording, so more of each
       picture shows. Desktop keeps its wider text column. */
@media (max-width: 560px) {
  #quote-form .opts .opt.opt-star,
  #quote-form .opts .opt.opt-extint,
  #quote-form .opts .opt.opt-ext,
  #quote-form .opts .opt.opt-solar-only,
  #quote-form .svc-choice {
    --q-text: 58% !important;
  }
  /* the narrower column lets "Exterior and Interior" run to two lines, so every
     card is sized for the tallest one — otherwise the photos stop matching */
  #quote-form .opts .opt,
  #quote-form .svc-choice { min-height: 100px !important; }
}

/* 3 · exterior.png holds TWO scenes and `object-position: center` landed the
       band on the dark one, so Exterior Care looked nothing like Lucent Finish
       (whose centre happens to be the bright white-framed window). Aim this
       band at its bright scene instead. */
#quote-form .opts .opt.opt-ext .opt-pic { object-position: 75% center !important; }

/* 4 · Recap: site.js weights each cell by how many scenes its file holds
       (finish 3, solar 1), which made the cells different widths. Every photo
       gets an equal cell instead. */
#quote-form .recap-pic { flex-grow: 1 !important; }

/* the floor has to clear the TALLEST card ("Exterior and Interior" runs to two
   title lines on a phone), or the shorter cards sit at their content height and
   the photos stop matching again */
@media (max-width: 560px) {
  #quote-form .opts .opt,
  #quote-form .svc-choice { min-height: 112px !important; }
}

/* ============================================================
   v-fix17 · the white seam between the recap photos
   ============================================================ */

/* `.recap-pics` is a flex row carrying `gap: 3px`. With one photo that never
   showed; as soon as a bundled pick puts two in there (clean + solar), the gap
   let the card's white ground through as a hard vertical line between them.
   The photos butt together now. */
#quote-form .recap-pics {
  gap: 0 !important;
  align-items: stretch !important;
}
#quote-form .recap-pic { height: 100% !important; }

/* ============================================================
   v-fix18 · the bundled solar photo takes a smaller share
   ============================================================ */

/* Solar is the add-on, so its picture reads as the smaller half when it sits
   next to the clean you actually booked. `:only-child` is what keeps the
   Solar-Care-only recap full width — there the panels ARE the service. */
#quote-form .recap-pic--solar:not(:only-child) { flex-grow: 0.55 !important; }

/* ============================================================
   v-fix19 · Lucent Finish shows the garage, not a sliver of it
   ============================================================ */

/* finish.png was a THREE-scene strip (window / garden window / front door +
   garage) in a 480x176 canvas. Every cell it lands in is narrower than that
   proportionally, so `object-fit: cover` only ever showed the middle ~58% —
   the garage, which is the whole point of the Lucent Finish tier ("plus garage
   & front door"), was squeezed to an unreadable sliver at the edge.

   The file is now JUST that scene (160x176), so the cell shows it whole across
   its width at close to native resolution instead of scaling a wide strip down.
   The scene is portrait-ish against landscape cells, so the crop is vertical —
   biased below centre to keep the door and garage door in frame rather than
   the roofline. */
#quote-form .opts .opt.opt-star .opt-pic,
#quote-form .recap-pic[src*="finish"] {
  object-position: center 60% !important;
}

/* ============================================================
   v-fix20 · photos FIT the cell (nothing cropped) · white split
             line back between the recap photos
   ============================================================ */

/* All four service photos are the full 480x176 strip again, so they share one
   aspect — with `contain` they render at exactly the same size as each other
   and no part of any of them is cut off. `cover` was cropping to fill, which is
   what clipped scenes at the edges. */
#quote-form .opt-pic,
#quote-form .recap-pic {
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
}

/* the per-photo aiming existed only to steer a CROP — with nothing cropped
   there is nothing left to aim */
#quote-form .opts .opt.opt-ext .opt-pic,
#quote-form .opts .opt.opt-star .opt-pic,
#quote-form .recap-pic[src*="finish"] {
  object-position: center !important;
}

/* the photo cell no longer needs to bleed to the card edge, and the soft left
   mask was there to ease a full-bleed crop into the white — neither applies */
#quote-form .opt-pics {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* Recap: a white split line between the photos. This is the gap removed in
   v-fix17 — the seam then was the card's ground showing through a flush row,
   which read as a glitch; as a deliberate divider between two distinct
   pictures it's the intent. */
#quote-form .recap-pics { gap: 3px !important; }