/* ============================================================
   Happy House Exteriors — website
   Palette: bright, friendly blue + sunny gold accent on white
   ============================================================ */

:root {
  /* PREMIUM RESKIN (owner request): the Lustremar design language — midnight
     ink, champagne gold, warm ivory, Cormorant Garamond display. The var NAMES
     keep their blue-era spellings so 500+ downstream rules don't change; only
     the VALUES moved. Light theme = daylight luxe (ivory/ink/champagne),
     dark theme = Lustremar midnight. The friendly-blue original is preserved
     at versions/v17-friendly-blue/. */
  --blue-900: #0b0f16;   /* midnight ink — dark bands (hero/footer) */
  --blue-800: #6f5526;   /* deep gold — link hover on ivory */
  --blue-700: #8a6b33;   /* deep champagne — links/accents on ivory (AA) */
  --blue-600: #a5813f;
  --blue-500: #b8945a;
  --blue-300: #c9b27f;   /* light champagne — accent text on dark bands */
  --blue-100: #efe7d4;   /* warm sand tint — chips, soft backgrounds */
  --canvas:    #f6f1e7;  /* warm ivory */
  --canvas-2:  #eee7d8;  /* deeper ivory section bg */
  --ink:       #171a20;
  --muted:     #6f6c63;
  --gold:      #c6a15b;   /* champagne gold — stars, badges, CTAs */
  --gold-dark: #a98443;
  --white:     #f5f0e6;   /* text on dark bands — warm ivory, not clinical white */
  --surface:   #fcf9f2;   /* card/panel background — flips in dark mode */
  --heading:   #10141b;   /* heading TEXT — flips in dark mode */
  --on-gold:   #14181f;   /* text sitting on the gold accent — dark in BOTH themes */
  --line:      #ded4bd;
  --header-bg: rgba(246,241,231,.90);
  --shadow-sm: 0 2px 12px rgba(11,15,22,.08);
  --shadow-md: 0 24px 60px rgba(11,15,22,.16);
  --radius:    6px;      /* sharp corners read premium; pills read friendly */
  --radius-sm: 4px;
  --maxw:      1140px;
  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---------- Dark mode ----------
   Warm dark GREYS, not black — pure #000 on an OLED phone makes the brand blue
   look like a hole in the screen and crushes every shadow the layout relies on.
   Only surfaces/text flip; the gold accent and the navy hero/footer bands are
   already dark, so they carry straight over. */
:root[data-theme="dark"] {
  /* Lustremar midnight: ink #090d13, surfaces lifted from it, ivory text,
     champagne accents brightened one step for contrast on the dark ground. */
  --canvas:    #090d13;
  --canvas-2:  #0c111a;
  --surface:   #111823;
  --ink:       #f3ede2;
  --heading:   #f3ede2;
  --muted:     #97a0ae;
  --line:      rgba(198,161,91,.18);
  --header-bg: rgba(9,13,19,.88);
  --blue-700:  #d3b06c;   /* champagne links/accents on midnight */
  --blue-800:  #e0c084;
  --blue-600:  #c6a15b;
  --blue-500:  #b8945a;
  --blue-100:  #1a2230;
  --shadow-sm: 0 2px 14px rgba(0,0,0,.45);
  --shadow-md: 0 30px 80px rgba(0,0,0,.55);
}
/* Cards on the near-black sections need a touch more separation. */
:root[data-theme="dark"] .section-tint { background: var(--canvas-2); }
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .booking { border: 1px solid var(--line); }
/* The booking widget carries its own --bk-* layer. --bk-primary-darker maps to
   --blue-900 (near-black) and is used as TEXT in 8 places, so on the now-dark
   panel it would be invisible. Remap the two that are text-only. */
:root[data-theme="dark"] .booking {
  --bk-primary-darker: var(--heading);
  --bk-disabled: #6d7681;
}
:root[data-theme="dark"] .hero-illust-photo { background: transparent; }
:root[data-theme="dark"] .brand-logo-chip { background: var(--surface); }
/* Form controls don't inherit page colours on their own. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--canvas-2); color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted); }
/* The hero scrim already sits over video — deepen it so text stays legible. */
:root[data-theme="dark"] .hero-bg { filter: brightness(.78); }

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Tell the browser this page manages its own light/dark. WITHOUT THIS, Chrome's
   auto-dark-mode (on by default on many Android devices, and a flag on desktop)
   applies its OWN algorithmic inversion on top of our palette. On an already-dark
   design that produces a muddy grey wash that reads as a "film" over the whole
   page: midnight goes mid-grey, champagne goes pale beige, while photos stay
   correct because Chrome doesn't invert images. Declaring color-scheme opts out. */
html { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
/* DO NOT add `:root:not([data-theme=dark]) { color-scheme: light }` here.
   It looks like the symmetric counterpart to the rule above, and it is a trap:
   declaring `light` alone tells Chrome the page does NOT support dark, which is
   the exact condition that turns force-dark ON. Chrome then inverts the ivory
   palette and the whole site takes on a brown/olive cast. Claiming support for
   both schemes is what keeps force-dark off, and the site picks its own theme
   from the data-theme attribute regardless. */

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Accessibility helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { position: fixed; left: 16px; top: 12px; background: var(--blue-700); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible, .phone-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 4px; }
.hero .btn:focus-visible, .contact .btn:focus-visible, .site-footer a:focus-visible { outline-color: var(--blue-300); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--heading); }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.22rem; }

.kicker {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-600);
  margin-bottom: 14px;
}
.kicker-light { color: var(--blue-300); }

.stars { color: var(--gold); letter-spacing: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue-700); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-800); box-shadow: var(--shadow-md); }
/* Brand orange/gold. Dark navy text, not white — white on #ff8809 fails contrast. */
.btn-gold { background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: var(--gold-dark, #e57400); color: var(--on-gold); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; border-color: var(--blue-700); color: var(--blue-700); }
.btn-ghost:hover { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
.btn-lg { padding: 16px 30px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: .9rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 18px; height: 72px; }
/* The header has more to fit than a text column does, so it gets a wider
   container than --maxw. Without this the row is capped at ~1140px and the
   brand and phone number get squeezed into three lines at every width.
   1400 rather than 1280: at 1280 the row needed 1265px of a 1232px content box,
   so it was permanently 33px over its own container and looked crammed even on
   a large monitor. The extra 120px is what lets the brand sit left, the nav
   breathe, and the CTA sit right without the three clusters touching. */
.site-header .container { max-width: 1400px; }

/* flex:none + nowrap so these never shrink into a stack of wrapped fragments —
   they hold their size and the nav absorbs the pressure instead. */
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; color: var(--heading); white-space: nowrap; flex: none; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; display: block; flex: none; }
.brand-name span { color: var(--blue-700); font-weight: 700; }
.brand-light { color: var(--white); }
.brand-light .brand-name span { color: var(--blue-300); }
.brand-logo-chip { display: inline-flex; background: var(--surface); border-radius: 11px; padding: 5px; flex: none; box-shadow: var(--shadow-sm); }
.brand-logo-chip .brand-logo { width: 40px; height: 40px; }

.nav { display: flex; gap: 18px; margin-left: auto; flex: 0 1 auto; }
/* nowrap: without it, "Instant Quote" and "Service Area" break mid-label as the
   row tightens and the header goes ragged before the hamburger ever kicks in. */
.nav a { font-weight: 500; font-size: .88rem; color: var(--ink); position: relative; padding: 4px 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--blue-500); transition: width .2s ease; }
.nav a:hover::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.phone-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--blue-800); font-size: .95rem; white-space: nowrap; flex: none; }
.header-cta .btn { white-space: nowrap; }
.phone-link:hover { color: var(--blue-600); }

/* ---------- Theme toggle (moon / sun slider) ---------- */
.theme-toggle {
  background: none; border: 0; padding: 4px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
  justify-content: center;
}
.tt-track {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 58px; height: 30px; border-radius: 999px; padding: 0 7px;
  background: var(--blue-100); border: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease;
}
.tt-icon { display: inline-flex; width: 14px; height: 14px; z-index: 1; transition: color .25s ease, opacity .25s ease; }
.tt-icon svg { width: 100%; height: 100%; }
.tt-moon { color: var(--blue-700); opacity: 1; }
.tt-sun  { color: var(--muted); opacity: .55; }
.tt-thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .28s cubic-bezier(.4,0,.2,1), background .25s ease;
}
/* Thumb slides right and the sun takes over once dark is active. */
:root[data-theme="dark"] .tt-track { background: #33373f; border-color: #454a53; }
:root[data-theme="dark"] .tt-thumb { transform: translateX(28px); background: var(--gold); }
:root[data-theme="dark"] .tt-moon { color: var(--muted); opacity: .5; }
:root[data-theme="dark"] .tt-sun  { color: var(--gold); opacity: 1; }
.theme-toggle:hover .tt-track { border-color: var(--blue-500); }
@media (prefers-reduced-motion: reduce) { .tt-thumb { transition: none; } }

.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--blue-900); border-radius: 2px; transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--white); }
/* Background video — two stacked copies crossfade for a seamless loop (see script.js) */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  opacity: 1; transition: opacity 1000ms linear; will-change: opacity;
}
.hero-video:nth-of-type(2) { opacity: 0; }
/* Translucent blue scrim OVER the video — keeps the brand theme, lets the footage
   show through (darker on the left for headline contrast, lighter on the right) */
.hero-bg {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(255,136,9,.14), transparent 52%),
    radial-gradient(90% 90% at 0% 100%, rgba(0,16,168,.45), transparent 62%),
    linear-gradient(105deg, rgba(7,13,74,.90) 0%, rgba(11,20,136,.74) 44%, rgba(7,13,74,.52) 100%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.07) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 70%, rgba(255,255,255,.05) 0 2px, transparent 3px);
  background-size: 30px 30px, 40px 40px;
  opacity: .7;
}
.hero-inner { position: relative; z-index: 2; padding: 84px 24px 92px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero-copy { max-width: 640px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: var(--blue-300); margin-bottom: 20px; }
.hero h1 { color: var(--white); margin-bottom: 22px; }
.hero-sub { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: rgba(255,255,255,.88); max-width: 560px; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.6); }
.hero .btn-ghost:hover { background: var(--surface); color: var(--heading); border-color: var(--white); }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.hero-trust li { font-size: .92rem; color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: 7px; }
.hero-trust li::before { content: "✓"; color: var(--gold); font-weight: 800; }
.hero-trust .stars { font-size: .9rem; }

/* hero card */
.hero-card {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 26px 26px 28px; border: 1px solid rgba(255,255,255,.5);
}
.hero-illust { background: var(--canvas-2); border-radius: var(--radius-sm); padding: 22px; margin-bottom: 20px; display: flex; justify-content: center; }
.hero-logo { width: 190px; max-width: 78%; height: auto; display: block; }
.hero-illust-photo { padding: 20px 22px 6px; background: transparent; }
/* OVAL, not a circle: the photo has to carry the trailer (wide, high in frame)
   and Alex's face (low) at once, and a circle clipped the trailer's copy.

   TALLER THAN WIDE, deliberately. The first oval was wider than tall, and a
   short oval has to cut somewhere — the only thing directly below the face is
   the neck, so it cut him off at the chin. A portrait oval reaches past the
   collar AND shows more of the trailer at the same time, because the mask
   curves away less across the vehicles.

   The aspect ratio MUST match the exported image — build_owner_photo.py prints
   the exact line to paste. If they disagree, object-fit: cover silently crops
   away the framing the script worked to preserve. */
.hero-owner {
  width: 270px; max-width: 86%; aspect-ratio: 660 / 688; height: auto;
  object-fit: cover; object-position: 50% 50%;
  display: block; border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: 0 8px 26px rgba(11,15,22,.34);
}
.hero-owner-name {
  text-align: center; font-family: var(--font-head); font-weight: 600;
  font-size: 1.32rem; color: var(--heading); margin: -4px 0 16px;
}
.hero-owner-name span { color: var(--muted); font-weight: 500; font-size: .88em; }
.hero-card-title { font-size: 1.12rem; color: var(--heading); margin-bottom: 14px; }
.included-list { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.included-list li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--ink); }
.included-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700); font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Trust bar ---------- */
.trustbar { background: var(--blue-900); color: var(--white); }
.trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
/* Each item jumps to the section that actually backs the claim, so they read as
   affordances rather than decoration. */
.trust-item {
  padding: 22px 18px; display: flex; flex-direction: column; gap: 3px;
  text-align: center; position: relative; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.trust-item::after {
  content: ""; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--gold); transition: width .22s ease;
}
.trust-item:hover, .trust-item:focus-visible { background: rgba(255,255,255,.07); }
.trust-item:hover::after, .trust-item:focus-visible::after { width: 34px; }
.trust-item:active { transform: translateY(1px); }
.trust-item strong { font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; color: var(--white); }
.trust-item span { font-size: .85rem; color: rgba(255,255,255,.65); }
@media (prefers-reduced-motion: reduce) {
  .trust-item, .trust-item::after { transition: none; }
}

/* ---------- Sections ---------- */
.section { padding: 86px 0; }
.section-tint { background: var(--canvas-2); }
/* The heading gets a wider measure than the body copy so the long ones hold a
   single line ("Trusted by homeowners and property managers alike." wants
   ~900px). The lead paragraph stays at 700px, because a 1040px measure would
   be a genuinely worse read. */
.section-head { max-width: 1040px; margin: 0 auto 50px; text-align: center; }
.section-head .section-lead, .section-head > p:not(.kicker) { max-width: 720px; margin-left: auto; margin-right: auto; }
.section-lead { color: var(--muted); font-size: 1.08rem; margin-top: 14px; }
.section-lead a { color: var(--blue-700); font-weight: 600; }

/* ---------- Estimator ---------- */
.estimator {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 30px; max-width: 980px; margin: 0 auto;
}
.est-form { display: grid; gap: 26px; }
.est-step { border: 0; }
.est-step legend { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--heading); margin-bottom: 14px; padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg-btn {
  flex: 1 1 auto; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--canvas-2); color: var(--heading); font-family: var(--font-body);
  font-weight: 600; font-size: .95rem; cursor: pointer; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.seg-btn small { font-weight: 500; font-size: .76rem; color: var(--muted); }
.seg-btn:hover { border-color: var(--blue-300); background: var(--blue-100); }
.seg-btn:active { transform: scale(.97); }
/* Selected option. The label colour MUST follow the theme, because the fill
   (--blue-700) inverts between them: deep champagne #8a6b33 in light, pale
   champagne #d3b06c in dark. Measured:
       light fill + ink   3.59  (fails)      light fill + ivory  4.6
       dark  fill + ink   8.64               dark  fill + ivory  1.81 (fails)
   So light mode gets ivory, dark mode gets ink. Setting one colour for both -
   which is what an earlier pass did - is guaranteed to break one of them. */
.seg-btn.is-active {
  background: var(--seg-active-bg, var(--blue-700));
  border-color: var(--seg-active-bg, var(--blue-700));
  color: var(--white);
}
/* .85 alpha measured 4.13:1 against the fill - just under the minimum. */
.seg-btn.is-active small { color: rgba(245,240,230,.96); }
/* a shade deeper than --blue-700 so ivory clears 4.5:1 with room to spare */
:root { --seg-active-bg: #82612d; }
:root[data-theme="dark"] {
  --seg-active-bg: var(--blue-700);
}
:root[data-theme="dark"] .seg-btn.is-active { color: var(--on-gold); }
:root[data-theme="dark"] .seg-btn.is-active small { color: rgba(20,24,31,.78); }

.est-result {
  background: linear-gradient(160deg, var(--blue-800), var(--blue-900));
  color: var(--white); border-radius: var(--radius); padding: 26px 24px;
  display: flex; flex-direction: column; text-align: center;
}
.est-result-label { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 700; color: var(--blue-300); }
.est-price { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--white); margin: 8px 0 4px; line-height: 1.05; }
.est-for { font-size: .92rem; color: rgba(255,255,255,.8); margin-bottom: 18px; }
.est-points { list-style: none; display: grid; gap: 9px; text-align: left; margin: 0 auto 22px; }
.est-points li { position: relative; padding-left: 26px; font-size: .9rem; color: rgba(255,255,255,.9); }
.est-points li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.est-result .btn-primary { background: var(--gold); color: var(--on-gold); }
.est-result .btn-primary:hover { background: var(--gold-dark); color: var(--on-gold); }
.est-or { margin-top: 12px; font-size: .9rem; color: rgba(255,255,255,.78); }
.est-or a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.est-disclaimer { max-width: 720px; margin: 22px auto 0; text-align: center; font-size: .85rem; color: var(--muted); }

/* ---------- Process / steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow-sm); position: relative; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-700); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .97rem; }

/* ---------- Pricing plans ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.plan-featured { border-color: var(--blue-700); box-shadow: var(--shadow-md); }
.plan-featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); border: 2px solid var(--blue-700); pointer-events: none; }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-head { text-align: center; margin-bottom: 14px; }
.plan-emoji { font-size: 1.8rem; display: block; margin-bottom: 6px; }
.plan-head h3 { font-size: 1.3rem; }
.plan-tag { font-size: .86rem; color: var(--muted); margin-top: 2px; }
.plan-price { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--blue-700); line-height: 1; margin-bottom: 20px; }
.plan-from { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 2px; }
.plan-list { list-style: none; display: grid; gap: 11px; margin-bottom: 24px; flex: 1; }
.plan-list li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--ink); }
.plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--blue-100); color: var(--blue-700); font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.plan-featured .plan-list li::before { background: var(--blue-700); color: #fff; }
.plan-note { text-align: center; margin-top: 28px; font-size: .96rem; color: var(--muted); }
.plan-note a { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Services grid ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-300); }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--blue-100); color: var(--blue-700); margin-bottom: 18px;
}
.service-icon svg { width: 28px; height: 28px; }
.service h3 { margin-bottom: 8px; }
.service p { color: var(--muted); font-size: .96rem; }

/* ---------- Who we serve ---------- */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.who-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-sm); }
.who-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--blue-100); color: var(--blue-700); margin-bottom: 18px; }
.who-icon svg { width: 30px; height: 30px; }
.who-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.who-card > p { color: var(--muted); margin-bottom: 18px; }
.who-card .btn { margin-top: 6px; }

/* ---------- Check list ---------- */
.check-list { list-style: none; margin: 18px 0 24px; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 34px; color: var(--ink); }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Why ---------- */
.why-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); }
.stat-num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: var(--blue-700); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: .9rem; color: var(--muted); }

/* ---------- Reviews ---------- */
.reviews-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; color: var(--heading); }
.reviews-rating .stars { font-size: 1.3rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.review .stars { font-size: 1.1rem; margin-bottom: 14px; }
.review blockquote { font-size: 1rem; color: var(--ink); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.review blockquote::before { content: "“"; }
.review blockquote::after { content: "”"; }
.review figcaption { font-weight: 700; color: var(--blue-800); font-size: .92rem; }

/* ---------- Service area ---------- */
/* 1.3fr rather than 1.2fr: the heading needs ~646px to hold one line and 1.2fr
   left it 20px short. The right-hand contact card has room to spare. */
.area-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; }
.area-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; margin: 24px 0 18px; }
.area-list li { position: relative; padding-left: 18px; font-size: .95rem; color: var(--ink); }
.area-list li::before { content: "•"; position: absolute; left: 0; color: var(--blue-500); }
.area-foot { color: var(--muted); }
.area-foot a { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.area-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-md); }
.area-card h3 { margin-bottom: 18px; }
.area-line { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.area-line strong { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); }
.area-line a { color: var(--blue-700); font-weight: 700; font-size: 1.02rem; }
.area-card .btn { margin-top: 22px; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; }
.faq { display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--font-head);
  font-weight: 600; font-size: 1.04rem; color: var(--heading);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2.5px solid var(--blue-600); border-bottom: 2.5px solid var(--blue-600);
  transform: rotate(45deg); transition: transform .2s ease; margin-top: -4px;
}
.faq-item[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq-body { padding: 0 24px 20px; color: var(--muted); }
.faq-body a { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Contact ---------- */
.contact { background: var(--blue-900); color: var(--white); }
.contact-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.contact-copy h2 { color: var(--white); margin-bottom: 16px; }
.contact-copy p { color: rgba(255,255,255,.82); margin-bottom: 14px; max-width: 420px; }
.contact-call { font-size: 1.05rem; }
.contact-call a { color: var(--gold); font-weight: 700; }
.contact-social { display: flex; gap: 18px; margin-top: 6px; }
.contact-social a { color: var(--blue-300); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }
.contact-social a:hover { color: var(--white); }

.quote-form { background: var(--surface); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-md); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: .05em; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(0,16,168,.22);
}
.field textarea { resize: vertical; }
.form-note { margin-top: 12px; font-size: .9rem; text-align: center; min-height: 1.2em; }
.form-note.ok { color: var(--blue-700); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-900); color: rgba(255,255,255,.7); padding: 64px 0 28px; border-top: 4px solid var(--blue-600); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 40px; }
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { font-size: .95rem; max-width: 320px; margin-bottom: 14px; }
.footer-social { font-size: .92rem; }
.footer-social a { color: var(--blue-300); font-weight: 600; }
.footer-social a:hover { color: var(--white); }
.footer-col h3 { color: var(--white); font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.footer-col a { display: block; padding: 5px 0; font-size: .95rem; color: rgba(255,255,255,.72); transition: color .15s ease; }
.footer-col a:hover { color: var(--white); }
.footer-contact p { font-size: .95rem; margin: 6px 0 14px; }
.footer-contact p a { color: rgba(255,255,255,.72); }
.footer-contact > a:first-of-type { font-size: 1.15rem; font-weight: 700; color: var(--white); }
.footer-col .btn { display: inline-flex; width: auto; padding: 10px 20px; color: var(--white); margin-top: 4px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.footer-fine { color: rgba(255,255,255,.5); }

/* ---------- Floating call button (mobile) ---------- */
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue-600); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(7,13,74,.4);
}
.call-fab:hover { background: var(--blue-700); }

/* ---------- Reveal animation ----------
   Gated behind .js-anim, which the inline snippet in <head> adds only once JS
   is confirmed running. Unconditionally hiding these would make the animation a
   hard dependency: if script.js ever failed to load — network blip, blocker, a
   syntax error — all 41 .reveal elements would sit at opacity:0 and the entire
   page below the hero would render blank. Enhancement, not a requirement. */
.js-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .spark { animation: none !important; }
}
/* Never let a print job come out blank. */
@media print {
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Booking calendar (premium widget; inherits site brand vars) ---------- */
.booking {
  --bk-surface: var(--surface); --bk-bg: var(--canvas-2); --bk-line: var(--line);
  --bk-disabled: #9aa7b4; --bk-ink: var(--ink); --bk-muted: var(--muted);
  --bk-primary: var(--blue-700); --bk-primary-dark: var(--blue-800); --bk-primary-darker: var(--blue-900);
  --bk-accent-mid: var(--blue-500); --bk-accent: var(--blue-300); --bk-accent-soft: var(--blue-100);
  --bk-today: var(--gold-dark); --bk-error: #c0392b;
  --bk-radius: var(--radius); --bk-radius-sm: var(--radius-sm); --bk-shadow: var(--shadow-sm);
  --bk-font-head: var(--font-head); --bk-font-body: var(--font-body);

  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius); box-shadow: var(--bk-shadow);
  padding: 26px; max-width: 920px; margin: 0 auto;
  font-family: var(--bk-font-body); color: var(--bk-ink);
}
.booking-calendar { border-right: 1px solid var(--bk-line); padding-right: 28px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-title { font-family: var(--bk-font-head); font-weight: 600; font-size: 1.15rem; color: var(--bk-primary-darker); }
.cal-nav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bk-line);
  background: var(--bk-bg); color: var(--bk-primary-dark); font-size: 1.3rem; line-height: 1;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease;
}
.cal-nav:hover:not(:disabled) { background: var(--bk-accent-soft); border-color: var(--bk-accent); }
.cal-nav:active:not(:disabled) { transform: scale(.94); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow span { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bk-muted); padding-bottom: 6px; }
.cal-day {
  aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: var(--bk-radius-sm);
  background: var(--bk-bg); color: var(--bk-ink); font-family: var(--bk-font-body);
  font-size: .95rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.cal-day:hover:not(:disabled) { background: var(--bk-accent-soft); border-color: var(--bk-accent); }
.cal-day:active:not(:disabled) { transform: scale(.95); }
.cal-day:disabled { color: var(--bk-disabled); background: transparent; cursor: default; }
.cal-day.is-empty { background: transparent; border: 0; cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--bk-today); font-weight: 700; }
.cal-day.is-today:disabled { color: var(--bk-primary-darker); }
.cal-day.is-selected { background: var(--bk-primary); color: #fff; border-color: var(--bk-primary); box-shadow: none; }
.cal-day.is-selected:hover { background: var(--bk-primary-dark); }
.cal-legend { margin-top: 16px; font-size: .82rem; color: var(--bk-muted); }
.cal-empty { margin-top: 14px; font-size: .9rem; color: var(--bk-muted); text-align: center; }

.booking-panel { display: flex; flex-direction: column; }
.slots-empty { color: var(--bk-muted); font-size: .98rem; margin: auto 0; text-align: center; }
.slots-empty .empty-ico { display: block; width: 40px; height: 40px; margin: 0 auto 12px; color: var(--bk-accent); }
.slots-date { font-family: var(--bk-font-head); font-weight: 600; font-size: 1.08rem; color: var(--bk-primary-darker); margin-bottom: 4px; outline: none; }
.slots-hint { font-size: .85rem; color: var(--bk-muted); margin-bottom: 14px; }
.slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slots-none { grid-column: 1 / -1; color: var(--bk-muted); font-size: .92rem; text-align: center; padding: 8px 0; }
.slot {
  padding: 11px 12px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm);
  background: var(--bk-surface); color: var(--bk-primary-dark); font-family: var(--bk-font-body);
  font-size: .9rem; font-weight: 600; cursor: pointer; text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.slot:hover { border-color: var(--bk-accent-mid); background: var(--bk-accent-soft); }
.slot:active { transform: scale(.96); }
.slot.is-selected { background: var(--bk-primary); color: #fff; border-color: var(--bk-primary); }

/* The chosen-time box opens directly under the last row of time slots, and with
   no margin the two sat flush against each other — the box read as another row
   of the grid rather than a confirmation of it. This is the seam between
   "pick a time" and "confirm this one", so it gets real space: 3x the 8px gap
   between the slots themselves. */
.booking-form { margin-top: 24px; }
.booking-form .field { margin-bottom: 14px; }
.booking-form label { display: block; font-size: .85rem; font-weight: 600; color: var(--bk-primary-dark); margin-bottom: 6px; }
.booking-form input, .booking-form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm);
  font-family: var(--bk-font-body); font-size: 1rem; background: var(--bk-bg); color: var(--bk-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.booking-form input:focus, .booking-form select:focus { outline: 2px solid var(--bk-primary); outline-offset: 1px; border-color: var(--bk-primary); }
.booking-form .field-err { border-color: var(--bk-error); box-shadow: 0 0 0 1px var(--bk-error); }
.booking-when {
  display: flex; align-items: center; gap: 8px;
  background: var(--bk-accent-soft); border: 1px solid var(--bk-accent); color: var(--bk-primary-darker);
  border-radius: var(--bk-radius-sm); padding: 12px 14px; font-weight: 600; margin-bottom: 16px;
}
.booking-when .when-ico { flex: none; width: 18px; height: 18px; color: var(--bk-primary); }
.booking-reassure { font-size: .85rem; color: var(--bk-muted); margin: -6px 0 16px; }
.booking-back { background: none; border: 0; color: var(--bk-primary); font-family: var(--bk-font-body); font-weight: 600; font-size: .9rem; cursor: pointer; padding: 12px 0 0; text-align: center; }
.booking-back:hover { color: var(--bk-primary-darker); text-decoration: underline; }
.booking .form-note { margin-top: 12px; font-size: .92rem; color: var(--bk-muted); }
.booking .form-note.err { color: var(--bk-error); font-weight: 600; }

.booking-success { text-align: center; padding: 6px 4px; margin: auto 0; }
.success-check { width: 64px; height: 64px; border-radius: 50%; background: var(--bk-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.success-check svg { width: 32px; height: 32px; }
.success-head { font-family: var(--bk-font-head); font-weight: 600; font-size: 1.35rem; color: var(--bk-primary-darker); margin-bottom: 14px; }
.booking-success .booking-when { display: inline-flex; margin-bottom: 0; }
.success-sub { color: var(--bk-muted); margin: 14px auto 20px; font-size: .95rem; max-width: 36ch; }
.success-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.booking-noscript { background: var(--bk-accent-soft); border: 1px solid var(--bk-accent); border-radius: var(--bk-radius-sm); padding: 16px; text-align: center; color: var(--bk-primary-darker); font-weight: 600; }

.cal-day:focus-visible, .slot:focus-visible, .cal-nav:focus-visible,
.booking-back:focus-visible, .booking .btn:focus-visible {
  outline: 3px solid var(--bk-primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .booking *, .booking *::before, .booking *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   v2.0 additions — real service detail, recurring plans, FAQ groups
   ============================================================ */

/* Estimator: frequency step + savings callout */
.legend-note {
  display: block; margin-top: 4px; font-size: .78rem; font-weight: 500;
  color: var(--gold-dark, #d97006); text-transform: none; letter-spacing: 0;
}
.est-save {
  display: inline-block; margin: 0 auto 10px;
  background: var(--gold); color: var(--on-gold);
  font-size: .82rem; font-weight: 700; line-height: 1.35;
  padding: 8px 14px; border-radius: 999px; max-width: 100%;
}
.est-save[hidden] { display: none; }

/* Stories step when it can't affect the price (ground-level services).
   A control that silently does nothing reads as broken, so dim it and say why. */
.est-step.is-na .seg { opacity: .4; pointer-events: none; filter: grayscale(1); }
.est-na {
  margin-top: 10px; font-size: .82rem; font-style: italic; color: var(--muted);
}

/* Window-cleaning glass slider — lives on the dark estimate card */
.glass-slider { margin: 0 0 18px; text-align: left; }
.glass-label {
  font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.86); margin-bottom: 9px;
}
.glass-track {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 4px; isolation: isolate;
}
.glass-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: 999px; background: var(--gold);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.glass-track.is-both .glass-thumb { transform: translateX(100%); }
.glass-opt {
  position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
  padding: 10px 8px; border-radius: 999px; font: inherit; font-size: .9rem;
  font-weight: 700; color: rgba(255,255,255,.82); transition: color .2s ease;
  min-height: 44px;
}
.glass-opt.is-active { color: var(--on-gold); }
.glass-hint { margin-top: 9px; font-size: .8rem; color: rgba(255,255,255,.72); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .glass-thumb { transition: none; } }

/* ---------- Review carousel (3-up, rotating) ---------- */
.rev-carousel { position: relative; max-width: 1140px; margin: 0 auto; padding: 0 56px; }
.rev-viewport { overflow: hidden; padding: 6px 0; }
.rev-track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
/* Three across on desktop. JS reads the same breakpoints, so the step size
   always matches what's visible. */
.rev-slide { flex: 0 0 33.3333%; min-width: 0; padding: 0 9px; box-sizing: border-box; }
.rev-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.rev-photo { width: 100%; height: 190px; object-fit: cover; display: block; flex: none; }
.rev-body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.rev-body .stars { font-size: .98rem; margin-bottom: 10px; }
.rev-quote { font-size: .93rem; line-height: 1.6; color: var(--ink); margin-bottom: 14px; flex: 1 1 auto; }
.rev-quote::before { content: "“"; }
.rev-quote::after  { content: "”"; }
.rev-who { font-weight: 700; color: var(--heading); font-size: .95rem; }
.rev-meta { color: var(--muted); font-size: .84rem; margin-top: 3px; }

/* Chevrons — 44px targets, vertically centred on the card */
.rev-chev {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: background .18s ease, color .18s ease, transform .18s ease;
}
.rev-chev svg { width: 22px; height: 22px; }
.rev-chev:hover { background: var(--blue-700); color: var(--white); }
.rev-chev:active { transform: translateY(-50%) scale(.94); }
.rev-prev { left: 0; }
.rev-next { right: 0; }

.rev-dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.rev-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--blue-300); opacity: .5; transition: opacity .2s ease, transform .2s ease;
}
.rev-dot.is-active { opacity: 1; background: var(--gold); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) { .rev-track { transition: none; } }

/* Two across on tablets. Must stay in step with PER_VIEW in script.js. */
@media (max-width: 1000px) {
  .rev-slide { flex-basis: 50%; }
}
/* One across on phones, chevrons below so they never cover a photo. */
@media (max-width: 700px) {
  .rev-carousel { padding: 0 12px; }
  .rev-slide { flex-basis: 100%; padding: 0 4px; }
  .rev-photo { height: 210px; }
  .rev-body { padding: 22px 20px 20px; }
  .rev-quote { font-size: 1rem; }
  .rev-chev { top: auto; bottom: -60px; transform: none; }
  .rev-chev:active { transform: scale(.94); }
  .rev-prev { left: calc(50% - 62px); }
  .rev-next { right: calc(50% - 62px); }
  .rev-dots { margin-top: 74px; }
}

/* Service cards: "what's covered" detail bullets */
.svc-list { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.svc-list li {
  position: relative; padding-left: 20px;
  font-size: .88rem; color: var(--muted); line-height: 1.5;
}
.svc-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500);
}

/* Recurring-plan frequency strip under the packages */
.freq-strip {
  margin-top: 30px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.freq-title {
  font-family: var(--font-head); font-weight: 600; font-size: 1.08rem;
  color: var(--heading); margin-bottom: 16px;
}
.freq-list {
  list-style: none; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px; margin-bottom: 16px;
}
.freq-list li {
  background: var(--blue-100); color: var(--blue-700);
  font-size: .88rem; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
}
.freq-note { font-size: .92rem; color: var(--muted); }
.freq-note strong { color: var(--blue-700); }

/* FAQ category headings */
.faq-group {
  font-family: var(--font-head); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--blue-700); margin: 26px 0 2px; padding-left: 2px;
}
.faq-group:first-child { margin-top: 0; }

/* Service-area ZIP line */
.area-zips {
  font-size: .86rem; color: var(--muted); line-height: 1.65;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--canvas-2); border-radius: var(--radius-sm);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-card { max-width: 460px; }
  .estimator { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  .services-grid, .steps, .pricing-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-featured { order: -1; }
  .who-grid, .why-grid, .area-grid, .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .trustbar-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .booking { grid-template-columns: 1fr; gap: 24px; }
  .booking-calendar { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
}

/* ---------- Header: tighten before collapsing ----------
   One full row (brand + 7 links + phone + CTA) genuinely needs ~1300px of
   content box at full size. This tier buys back roughly 200px so the row still
   holds together below that, and at 1120 it becomes the hamburger.

   THE BOUNDARY IS THE WHOLE POINT. It used to sit at 1160px, which only covered
   1121–1160 — a 40px window. Everything from 1161 up to ~1330 got no tightening
   at all and simply overflowed: the theme toggle hung 24px past the right edge
   and the page scrolled sideways, on 1280x800 among others. Measure before
   moving it: the row must fit the content box (container width minus 48px of
   padding) at every width where the full nav is showing.

   STEP 1 — reclaim space from the CTA cluster, not from the nav. Collapsing the
   phone to its icon frees ~90px in one move, which is more than shrinking every
   link would, and it buys enough room to keep the nav links at full size with
   MORE space between them than the old cramped row had. */
@media (max-width: 1400px) {
  .nav { gap: 16px; }
  .phone-link span { display: none; }
  .phone-link { padding: 6px; }
  .header-cta .btn { padding-left: 14px; padding-right: 14px; font-size: .86rem; }
}

/* STEP 2 — only now start on the nav itself, in the last stretch before the
   hamburger takes over. Boundary is 1260 because step 1 measures 1182px wide
   and needs a 1230px client to hold it; below ~1245 it would overflow. */
@media (max-width: 1260px) {
  .header-inner { gap: 12px; }
  .nav { gap: 10px; }
  .nav a { font-size: .84rem; }
  .tt-track { width: 46px; height: 27px; padding: 0 5px; }
  .tt-thumb { width: 20px; height: 20px; }
  :root[data-theme="dark"] .tt-thumb { transform: translateX(20px); }
}

/* Hamburger. 1200 rather than 1120: below this the seven links only fit by
   being squeezed to the point that the row looks cramped, which is the thing
   we're trying to avoid. The stacked menu is the better layout down here. */
@media (max-width: 1200px) {
  .nav, .header-cta { display: none; }
  /* Theme toggle stays out in the open next to the hamburger. */
  .theme-toggle { margin-left: auto; }
  .nav-toggle { display: flex; margin-left: 4px; }
  .site-header.nav-open .header-inner { height: auto; flex-wrap: wrap; padding-bottom: 14px; }
  .site-header.nav-open .nav {
    display: flex; flex-direction: column; gap: 0; order: 3;
    flex-basis: 100%; width: 100%; margin-top: 8px;
    border-top: 1px solid var(--line);
    max-height: calc(100dvh - 150px); overflow-y: auto;
  }
  /* Reset the desktop tightening for the stacked menu — 44px tap targets. */
  .site-header.nav-open .nav a {
    padding: 13px 2px; border-bottom: 1px solid var(--line);
    font-size: 1rem; min-height: 44px; display: flex; align-items: center;
  }
  .site-header.nav-open .nav a:last-child { border-bottom: 0; }
  .site-header.nav-open .nav a::after { display: none; }
  .site-header.nav-open .header-cta {
    display: flex; flex-direction: column; gap: 10px; order: 4;
    flex-basis: 100%; width: 100%; padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .site-header.nav-open .header-cta .btn { padding: 13px 20px; font-size: .95rem; }
  .site-header.nav-open .phone-link {
    justify-content: center; padding: 11px; font-size: 1rem; min-height: 44px;
  }
  .site-header.nav-open .phone-link span { display: inline; }
  .call-fab { display: inline-flex; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .hero-inner { padding: 64px 24px 72px; }
  .services-grid, .steps, .pricing-grid, .reviews-grid, .area-list { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .estimator { padding: 22px; }
  .booking { padding: 14px; }
  .cal-nav { width: 44px; height: 44px; }
  .cal-grid { gap: 3px; }
  .cal-day { aspect-ratio: auto; min-height: 46px; }
  .slot { padding: 13px 12px; }
}

@media (max-width: 420px) {
  .trustbar-inner { grid-template-columns: 1fr; }
  .why-stats { grid-template-columns: 1fr; }
  .seg-btn { min-width: 0; }
  .container { padding-left: 18px; padding-right: 18px; }
  /* brand is nowrap now, so it has to shrink to clear the hamburger on small phones */
  .brand { font-size: .95rem; gap: 8px; }
  .brand-logo { width: 34px; height: 34px; }
  /* The theme toggle pushed the header past a 360px viewport. Tighten the row
     and the switch; the button keeps its 44px tap target. */
  .header-inner { gap: 8px; }
  .theme-toggle { padding: 2px; }
  .tt-track { width: 44px; height: 26px; padding: 0 5px; }
  .tt-icon { width: 12px; height: 12px; }
  .tt-thumb { width: 19px; height: 19px; top: 3px; left: 3px; }
  :root[data-theme="dark"] .tt-thumb { transform: translateX(19px); }
  /* Grid and flex children default to min-width:auto, so they refuse to shrink
     below their content's min-content width and push the page sideways on
     narrow phones. These are the containers that were doing it. */
  .who-card, .area-card, .plan, .service, .step, .review,
  .hero-copy, .hero-card, .est-form, .est-result, .contact-copy, .quote-form { min-width: 0; }
  .who-grid, .area-grid, .contact-inner, .hero-inner,
  .estimator, .why-grid, .booking { grid-template-columns: 1fr; }
  .area-list { grid-template-columns: 1fr; }
  /* The email address is the longest unbreakable token on the page. */
  .area-line a, .footer-contact a, .contact-copy a { overflow-wrap: anywhere; }
  /* Inputs carry a default intrinsic width (~size=20) that ignores the grid. */
  .field input, .field select, .field textarea { min-width: 0; width: 100%; max-width: 100%; }
  .field-row { grid-template-columns: 1fr; }
  /* "Call or Text 417-766-8666" is wider than a 320px column on its own. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .btn { white-space: normal; }
  .btn-lg { padding-left: 18px; padding-right: 18px; }
}

/* Sub-380px: the brand name is the only thing left with slack in the header. */
@media (max-width: 380px) {
  .brand { font-size: .86rem; gap: 6px; }
  .brand-logo { width: 30px; height: 30px; }
  .header-inner { gap: 6px; }
  .tt-track { width: 40px; height: 24px; padding: 0 4px; }
  .tt-thumb { width: 18px; height: 18px; }
  :root[data-theme="dark"] .tt-thumb { transform: translateX(16px); }
  .nav-toggle { min-width: 40px; padding: 6px; }
}

/* 320px-class screens need the last few pixels back from the gutters. */
@media (max-width: 340px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: .8rem; }
}

/* ---------- GoHighLevel booking widget ----------
   The iframe is another origin, so nothing in here can style its contents —
   only the frame around it. Give it a surface, a border and a radius matching
   the rest of the site so the widget reads as part of the page rather than as
   something bolted on.

   No fixed height: link.msgsndr.com/js/form_embed.js measures the widget and
   resizes the iframe. min-height is only there so the section doesn't collapse
   to nothing in the moment before that script runs. */
/* Our own calendar is kept in the page but switched off while the GoHighLevel
   widget is in use. `hidden` alone does NOT hide it: the attribute is just
   `display: none` in the browser's own stylesheet, and `.booking` sets a grid,
   which wins. Without this line the disabled calendar renders underneath the
   widget — which is exactly what it did.

   Same trap as `.bk-quote[hidden]` further down. Any styled element that also
   relies on the `hidden` attribute needs its own rule like this. */
.booking[hidden] { display: none; }

/* We cannot style the widget itself, so the job here is to make it look
   INTENTIONAL rather than embedded: a pale card, deliberately inset, sitting
   on the page the way a printed form sits on a desk. Full-bleed across 1140px
   it reads as a foreign rectangle; at ~880px inside a framed panel it reads as
   part of the design. That framing is the whole trick. */
.booking-embed {
  max-width: 880px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.booking-embed iframe {
  width: 100%; min-height: 700px; border: 0; display: block;
  border-radius: calc(var(--radius) - 14px);
  background: #fff;   /* the widget is light; stops a dark flash before it paints */
}
/* In dark mode a plain white rectangle on midnight is jarring. A warm gold
   hairline and a deeper shadow make it read as a lit panel instead of a hole
   punched in the page. */
:root[data-theme="dark"] .booking-embed {
  background: var(--canvas-2);
  border-color: rgba(198,161,91,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
@media (max-width: 720px) {
  .booking-embed { padding: 6px; border-radius: var(--radius-sm); }
  .booking-embed iframe { min-height: 860px; border-radius: 6px; }
}

/* ---------- Estimate -> booking continuity (the quote follows the visitor) ---------- */
.bk-quote {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--blue-100); border: 1px solid var(--blue-300);
  border-radius: 14px; padding: 14px 18px; margin: 0 0 18px;
}
/* The bar ships with the `hidden` attribute and is only revealed once the
   visitor has actually built a quote. `hidden` is just `display: none` in the
   browser's own stylesheet, so ANY author `display` beats it - the rule above
   was un-hiding the bar on every page load, showing an empty strip that read
   "YOUR INSTANT QUOTE ........ Adjust" with no quote in it.
   Same reason `.lightbox[hidden]` exists. Any styled element that also uses the
   `hidden` attribute needs this line. */
.bk-quote[hidden] { display: none; }
.bk-quote-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 220px; }
.bk-quote-label {
  font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--blue-700); white-space: nowrap;
}
.bk-quote-picks { color: var(--ink); font-size: .95rem; }
.bk-quote-price {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--blue-700); white-space: nowrap;
}
.bk-quote-edit { font-weight: 600; font-size: .85rem; color: var(--blue-700); text-decoration: underline; }
:root[data-theme="dark"] .bk-quote { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .bk-quote-label,
:root[data-theme="dark"] .bk-quote-price,
:root[data-theme="dark"] .bk-quote-edit { color: var(--blue-300); }
.booking-estnote {
  font-size: .82rem; color: var(--ink); background: var(--blue-100);
  border-radius: 8px; padding: 8px 11px; margin: 10px 0 0; line-height: 1.5;
}
:root[data-theme="dark"] .booking-estnote { background: var(--surface); color: var(--muted); }

/* ============================================================
   LUXE LAYER — Lustremar design language on top of the existing
   structure. Loaded last so it wins ties. The friendly-blue-era
   rules above keep the layout; this layer restyles the voice:
   Cormorant display, tracked-out micro-labels, sharp champagne
   buttons, midnight hero scrim, film grain.
   ============================================================ */

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .004em;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); }
/* Trimmed from 2.9rem so the longest section headings hold one line without
   needing an absurdly wide measure. See .section-head. */
h2 { font-size: clamp(1.95rem, 3.4vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
body { letter-spacing: .01em; }

/* Tracked-out uppercase micro-labels with a gold hairline lead-in */
.kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.kicker::before, .eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
}
.eyebrow, .kicker-light { color: var(--blue-300); }
:root[data-theme="dark"] .kicker { color: var(--blue-700); }

/* Buttons: sharp, uppercase micro-type, champagne gradient primary.
   A pill radius reads friendly; a 2px corner reads five-star. */
.btn {
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 16px 30px;
}
.btn-lg { padding: 18px 38px; font-size: .76rem; }
.btn-primary, .btn-gold {
  background: linear-gradient(115deg, var(--gold), #e8cd9a);
  color: var(--on-gold);
  border: 0;
}
.btn-primary:hover, .btn-gold:hover {
  background: linear-gradient(115deg, var(--gold-dark), var(--gold));
  color: var(--on-gold);
  transform: translateY(-2px);
}
.btn-ghost { border: 1px solid var(--line); color: var(--heading); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-dark); background: transparent; }
.hero .btn-ghost { border-color: rgba(245,240,230,.35); color: var(--white); }
.hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Hero: the royal-blue scrim becomes a midnight one */
.hero-bg {
  background:
    linear-gradient(105deg, rgba(9,13,19,.92) 0%, rgba(12,17,26,.72) 44%, rgba(9,13,19,.5) 100%);
}
.hero-video { filter: brightness(.72) saturate(.85); }

/* Header/nav: quiet, tracked, gold on hover */
.nav a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav a:hover { color: var(--gold-dark); }
:root[data-theme="dark"] .nav a:hover { color: var(--gold); }

/* Cards & panels: hairline borders + deep soft shadow, no puffy pills */
.hero-card, .booking, .pack, .review, .rev-card, .faq-item, .step, .service-card, .why-card {
  border: 1px solid var(--line);
}

/* Film grain — the Lustremar signature. Barely-there, but the eye feels it. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

::selection { background: var(--gold); color: #0b0f16; }

/* Forms: quiet fields, gold focus */
input, select, textarea { border-radius: var(--radius-sm); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,161,91,.18);
}

/* The estimate-continuity bar joins the luxe family */
.bk-quote { border-radius: var(--radius); }
.bk-quote-price { font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; }

/* Center the services grid's orphan last row (8 cards in 3 columns = 3+3+2,
   with the final pair hugging the left). A six-track grid with span-2 cards
   is the identical 3-up layout, but the last-row cards can start mid-track:
   a two-card orphan row starts at tracks 2 & 4 (centered), a lone orphan at
   track 3 (dead center). The :nth selectors self-adapt to any card count.
   Tablet (2-col) and mobile (1-col) split 8 evenly, so desktop-only. */
@media (min-width: 941px) {
  .services-grid { grid-template-columns: repeat(6, 1fr); }
  .services-grid > * { grid-column: span 2; }
  .services-grid > *:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .services-grid > *:nth-child(3n+1):nth-last-child(2) + * { grid-column: 4 / span 2; }
  .services-grid > *:nth-child(3n+1):nth-last-child(1) { grid-column: 3 / span 2; }
}

/* ---------- Social links + credibility badges ---------- */
.contact-follow { margin: 14px 0 8px; font-weight: 600; font-size: .92rem; }
.social-row { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.social-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  color: var(--white); background: rgba(255,255,255,.06);
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.social-btn svg { width: 19px; height: 19px; flex: none; }
.social-btn:hover, .social-btn:focus-visible {
  border-color: var(--gold); color: var(--gold); background: rgba(198,161,91,.10);
  transform: translateY(-1px);
}
/* Footer + contact sit on the dark navy band, so the light treatment above is
   correct there. On a light page section, flip to ink-on-ivory. */
.section:not(.contact) .social-btn { color: var(--heading); background: transparent; }
.social-row-sm .social-btn { padding: 9px; }
.social-row-sm .social-btn svg { width: 18px; height: 18px; }

.footer-bbb { margin-top: 12px; font-size: .86rem; }
.footer-bbb a { display: inline-flex; align-items: center; gap: 7px; color: var(--white); opacity: .85; }
.footer-bbb a:hover { opacity: 1; color: var(--gold); }
.footer-bbb strong {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid currentColor; border-radius: 3px;
  font-family: var(--font-head); font-size: .9rem; line-height: 1;
}

/* justify-content matters here: .section-head sets text-align:center, but this
   is a block-level flex container, so its items would still pack to the left. */
.reviews-cred { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: .9rem; }
.cred-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--heading); }
.cred-badge:hover { color: var(--gold-dark); }
.cred-grade {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  background: var(--gold); color: var(--on-gold); border-radius: 3px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1;
}
.cred-sep { color: var(--muted); }
.cred-link { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cred-link:hover { color: var(--gold-dark); }
:root[data-theme="dark"] .cred-badge:hover,
:root[data-theme="dark"] .cred-link:hover { color: var(--gold); }
@media (max-width: 520px) {
  .reviews-cred { gap: 8px; }
  .cred-sep { display: none; }
  .reviews-cred > * { flex-basis: 100%; }
}

/* ---------- Hero social row (bottom-centre, over the video) ---------- */
.hero-social {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 24px 40px;
  text-align: center;
}
.hero-social-row { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.hero-social-row a {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(245,240,230,.45);
  color: var(--white);
  transition: border-color .28s ease, color .28s ease, background .28s ease, transform .28s ease;
}
.hero-social-row svg { width: 19px; height: 19px; }
.hero-social-row a:hover, .hero-social-row a:focus-visible {
  border-color: var(--gold); color: var(--gold);
  background: rgba(198,161,91,.12); transform: translateY(-2px);
}
.hero-social-label {
  margin: 0; color: var(--white); opacity: .88;
  font-size: 1.02rem; font-weight: 500; letter-spacing: .01em;
}
@media (max-width: 720px) {
  .hero-social { padding-bottom: 30px; }
  .hero-social-row a { width: 38px; height: 38px; }
  .hero-social-label { font-size: .95rem; }
}

/* ---------- Dark mode: the estimate card ----------
   In dark mode --blue-800 lifts to light champagne, so the panel gradient ran
   champagne -> midnight and every label in its upper third (the price included)
   was light-on-light. Rather than chase a per-element threshold that breaks the
   moment the copy length changes, the card becomes a solid champagne highlight
   panel with dark ink throughout, and the CTA flips to midnight so it still
   reads as the action. Contrast is then uniform regardless of content. */
:root[data-theme="dark"] .est-result {
  background: linear-gradient(160deg, #e8cd9a, #c6a15b);
  color: var(--on-gold);
}
:root[data-theme="dark"] .est-result-label { color: #4a3a17; }
:root[data-theme="dark"] .est-price { color: #10141b; }
:root[data-theme="dark"] .est-for { color: rgba(16,20,27,.78); }
:root[data-theme="dark"] .est-points li { color: rgba(16,20,27,.9); }
:root[data-theme="dark"] .est-points li::before { color: #10141b; }
:root[data-theme="dark"] .est-save { color: #3f3113; }
/* Literal champagne, not var(--gold-bright): that variable is not defined in
   this stylesheet, so the declaration was invalid and the button kept dark text
   on a dark fill (1.04:1 - invisible). */
:root[data-theme="dark"] .est-result .btn-primary {
  background: #10141b; color: #e8cd9a;
}
:root[data-theme="dark"] .est-result .btn-primary:hover {
  background: #1c2430; color: #f2e0bb;
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.gal-tile {
  position: relative; padding: 0; margin: 0; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--canvas-2); aspect-ratio: 4 / 3;
  transition: transform .35s var(--ease, cubic-bezier(.4,0,.2,1)), border-color .35s ease, box-shadow .35s ease;
}
.gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.gal-tile:hover, .gal-tile:focus-visible { border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gal-tile:hover img, .gal-tile:focus-visible img { transform: scale(1.045); }
/* The final tile carries the "+N more" veil so the grid reads as a preview. */
.gal-more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,15,22,.62); color: var(--white);
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em;
}
.gallery-more { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
.gallery-more .btn { margin: 0; }
.gallery-google { font-size: .9rem; font-weight: 600; color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.gallery-google:hover { color: var(--gold-dark); }
:root[data-theme="dark"] .gallery-google:hover { color: var(--gold); }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gal-more { font-size: 1.1rem; } }

/* ---------- Lightbox ---------- */
/* The arrows are pinned to the overlay, NOT laid out next to the photo. The
   gallery mixes portrait phone shots with wide before-and-afters, and if the
   arrows are flex siblings of the image they slide inward and outward with
   every photo - and drift vertically whenever a caption wraps to two lines.
   The side padding here reserves their lane so a wide photo can't run under
   them: 18px offset + 52px button + 18px breathing room. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,14,.94); padding: 24px 88px;
}
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; max-width: min(1200px, 100%); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-stage img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-stage figcaption { color: rgba(245,240,230,.85); font-size: .9rem; text-align: center; max-width: 70ch; }
.lb-close, .lb-nav {
  background: rgba(245,240,230,.10); border: 1px solid rgba(245,240,230,.28);
  color: var(--white); border-radius: 50%; cursor: pointer; margin: 0; padding: 0;
  display: grid; place-items: center; flex: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-nav svg { width: 24px; height: 24px; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; }
.lb-close svg { width: 20px; height: 20px; }
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
.lb-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(245,240,230,.7); font-size: .84rem; font-variant-numeric: tabular-nums; margin: 0; }
@media (max-width: 700px) {
  .lightbox { padding: 12px 60px; }        /* 8px + 44px button + 8px */
  .lb-nav { width: 44px; height: 44px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-stage img { max-height: 66vh; }
  .lb-stage figcaption { font-size: .82rem; }
}