/* ==========================================================================
   Liberty Christmas Lights - Cincinnati and Northern Kentucky
   Design system from the contractor-site-build skill (McQuistion-derived,
   translated to Christmas). Vanilla CSS, no framework. Fonts: Barlow Condensed
   (headings/buttons/eyebrows/stats, always uppercase) + Libre Franklin
   (body), self-hosted woff2 latin subsets (2026-09-02 perf pass).
   ========================================================================== */

/* Self-hosted fonts (latin subsets, 2026-09-02 perf pass). Libre Franklin is variable: one file covers 400-600. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/barlow-condensed-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/libre-franklin-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand tokens (build-plan §2, exact) */
  --ink: #1C2128;
  --navy: #0E2A47;
  --red: #C42A31;
  --red-dark: #A31621;
  --cream: #F4F6F9;         /* frost light gray (was candlelight cream #FFF4E3; Jason 2026-08-20 -- peachy read on the old value, this harmonizes with --navy instead) */
  --gold: #F5B02E;
  --green: #1F4D2E;
  --muted: #4A525E;
  --white: #FFFFFF;
  --line: #E2E7EE;          /* cool hairline (was warm beige #E7DCC8 derived from the old cream; swapped to match, 2026-08-20) */
  --navy-2: #163A5E;       /* lighter navy for gradients / hover states */

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Libre Franklin", -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --shadow: 0 10px 30px rgba(14, 42, 71, 0.16);
  --glow: 0 8px 30px rgba(245, 176, 46, 0.25);
  --glow-strong: 0 10px 36px rgba(245, 176, 46, 0.4);
  --glow-deep: 0 14px 44px rgba(245, 176, 46, 0.5);
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* Mobile overflow guards */
.hero-inner > *, .split-grid > *, .footer-grid > *, .stat-bar-inner > * { min-width: 0; }
select, input, textarea { max-width: 100%; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 0.95; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
a { color: inherit; }

.accent-red { color: var(--red); }
.accent-gold { color: var(--gold); }

/* Eyebrow: 24px rule + 15px/700/2.7px-tracked uppercase red label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2.7px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--red); flex-shrink: 0; }
.band-navy .eyebrow, .band-crimson .eyebrow { color: var(--gold); }
.band-navy .eyebrow::before, .band-crimson .eyebrow::before { background: var(--gold); }

.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  padding: 15px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-red { background: var(--red); color: var(--white); border-color: var(--red-dark); box-shadow: var(--glow); }
.btn-red:hover { background: var(--red-dark); box-shadow: var(--glow-deep); transform: scale(1.03); }

.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }

.btn-outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-dark:hover { background: var(--navy); color: var(--white); }

.btn-gold { background: var(--gold); color: var(--ink); border-color: #d6941e; box-shadow: var(--glow); }
.btn-gold:hover { background: #e3a527; box-shadow: var(--glow-deep); transform: scale(1.03); }

.btn-block { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   Utility bar + header
   -------------------------------------------------------------------------- */
.util-bar { background: var(--navy); color: rgba(255,255,255,0.92); font-size: 0.82rem; }
.util-bar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 8px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.util-bar a { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; }
.util-bar a:hover { color: var(--gold); }
.util-links { display: flex; gap: 18px; }
.util-links span { opacity: 0.45; }

.site-header { position: sticky; top: 0; z-index: 60; background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 22px; max-width: var(--maxw); margin: 0 auto; }
.logo-link { flex-shrink: 0; display: block; }
.logo-lockup { display: inline-flex; align-items: center; gap: 12px; }
.logo-badge { display: block; height: 58px; width: auto; }
/* Logo lockup: DJ's real logo badge. 84px tall on desktop so the script
   lettering stays readable, 60px under 720px, 52px under 480px. The text name
   (LIBERTY / CHRISTMAS LIGHTS) sits beside it at 720px and up and always in
   the footer. Rules for the small sizes are repeated after the 749px block. */
.logo-lockup { display: flex; gap: 12px; }
.logo-lockup picture { display: flex; flex-shrink: 0; }
.logo-badge { height: 84px; width: auto; border-radius: 6px; }
.logo-name { display: none; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.logo-t1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.7rem; line-height: 0.9; color: var(--red); }
.logo-t2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.17em; font-size: 0.86rem; line-height: 1; color: var(--navy); }
@media (min-width: 720px) { .logo-name { display: flex; } }
.footer-logo .logo-name { display: flex; }
.footer-logo .logo-t1 { font-size: 2rem; color: var(--white); }
.footer-logo .logo-t2 { font-size: 0.95rem; color: var(--gold); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 2px solid var(--navy);
  border-radius: 8px; color: var(--navy); font-size: 1.3rem; line-height: 1;
  padding: 6px 12px; cursor: pointer;
}

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.94rem;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.main-nav a:hover { color: var(--red); border-color: var(--red); }

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: 18px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--navy); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.88rem; letter-spacing: 0.02em; white-space: nowrap; }
.header-phone svg { flex-shrink: 0; }
.header-phone .phone-num { color: var(--red); font-size: 1rem; }
.header-phone:hover .phone-num { color: var(--red-dark); }

/* Header CTA short-text variant: hidden by default, shown only at very
   narrow widths (see @media max-width:480px) so the button never has to
   render "Book My Quote" in a space that only fits "Quote". nowrap: two
   words with one space between them will wrap at that space by default
   whenever the button is even slightly tight, producing a 2-line button
   (visual-QA fix, 2026-08-20) -- force it to stay on one line instead. */
.header-cta .cta-short { display: none; white-space: nowrap; }
.header-cta { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Light-string SVG divider (gold C9 bulbs). Max 2 per page, per build-plan.
   -------------------------------------------------------------------------- */
.lights-divider { display: block; width: 100%; height: auto; margin: 0; }
.lights-divider.on-dark { opacity: 0.9; }

/* --------------------------------------------------------------------------
   Hero (homepage + interior pages)
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; color: var(--white); background: var(--navy); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(14,42,71,0.94) 0%, rgba(14,42,71,0.78) 34%, rgba(14,42,71,0.42) 68%, rgba(14,42,71,0.30) 100%),
    linear-gradient(180deg, rgba(9,25,44,0.35) 0%, transparent 22%, transparent 70%, rgba(9,25,44,0.55) 100%);
}
/* Homepage-only: the red/white alternating roofline (2026-08-20 photo
   swap) is busier than the previous stone-roofline shot, so the text-side
   stops go a touch deeper for H1 contrast. Same diagonal shape, same
   right-side brightness -- only the left (text) stops move. */
.hero-overlay.overlay-home {
  background:
    linear-gradient(100deg, rgba(14,42,71,0.96) 0%, rgba(14,42,71,0.85) 34%, rgba(14,42,71,0.46) 68%, rgba(14,42,71,0.32) 100%),
    linear-gradient(180deg, rgba(9,25,44,0.4) 0%, transparent 22%, transparent 70%, rgba(9,25,44,0.58) 100%);
}
@media (max-width: 749px) {
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(14,42,71,0.92) 0%, rgba(14,42,71,0.72) 46%, rgba(14,42,71,0.5) 100%);
  }
  .hero-overlay.overlay-home {
    background:
      linear-gradient(180deg, rgba(14,42,71,0.94) 0%, rgba(14,42,71,0.78) 46%, rgba(14,42,71,0.56) 100%);
  }
}

/* Strong/uniform overlay modifier: for center-aligned text over a photo
   (e.g. the mid-page CTA band), the diagonal .hero-overlay above is wrong
   - it's tuned for left-aligned hero copy and leaves the CENTER of the
   image too bright (coordinator visual-QA fix: headline nearly invisible
   there). This is flat and uniform at ~.8 opacity everywhere so contrast
   holds no matter where the text sits over the photo. */
.hero-overlay.overlay-strong {
  background: linear-gradient(180deg, rgba(9,25,44,0.82) 0%, rgba(14,42,71,0.8) 100%);
}
.hero-inner { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: 64px 22px 60px; }
.hero-inner.hero-home { padding: 76px 22px 56px; }

.badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(245,176,46,0.14); border: 1px solid rgba(245,176,46,0.55);
  color: var(--gold); font-family: var(--font-display); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.badge-pill::before { content: "\2605"; font-size: 0.9em; }

.hero h1 { color: var(--white); max-width: 760px; }
.hero h1 span.line { display: block; }

/* Homepage hero: the 3 authored lines must each render as ONE visual line
   at common desktop widths (coordinator visual-QA fix, 2026-08-19). Root
   cause: 760px max-width + 3.5rem clamp max was too narrow/large for the
   longest line ("Lights, Install, Takedown, Storage. All Included.") to
   fit without wrapping mid-line. Fix: widen the container to the hero's
   actual available width and use a flat, conservatively-sized font-size
   above 1024px (hero-inner is capped at --maxw=1200px regardless of
   viewport, so a fluid vw-based size is not needed above that point -
   a flat value is correct and predictable). Mobile keeps the original
   fluid clamp() on the base .hero h1 rule and wraps naturally. */
.hero-home h1 { max-width: 100%; }
@media (min-width: 1024px) {
  .hero-home h1 { font-size: 1.8rem; }
  .hero-home h1 .line { white-space: nowrap; }
}
@media (min-width: 1280px) {
  .hero-home h1 { font-size: 2.1rem; }
}
.hero-sub { font-size: 1.12rem; color: rgba(255,255,255,0.92); max-width: 640px; margin: 18px 0 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-ctas .btn-outline .call-label { opacity: 0.85; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; display: block; }

/* Guarantee card, hero (red) */
.guarantee-card {
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  border-radius: var(--radius); padding: 22px 26px; max-width: 480px;
  box-shadow: 0 16px 40px rgba(163,22,33,0.4);
}
.guarantee-card h2 { color: var(--white); font-size: 1.15rem; margin-bottom: 6px; }
.guarantee-card p { color: rgba(255,255,255,0.94); font-size: 0.95rem; margin: 0; font-family: var(--font-body); }

/* --------------------------------------------------------------------------
   Interior page hero (single column, shorter)
   -------------------------------------------------------------------------- */
.page-hero .hero-inner { max-width: 900px; padding: 56px 22px 48px; }
.page-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.page-hero.no-photo { background: linear-gradient(135deg, var(--navy) 0%, #0a1e35 100%); }
.page-hero.no-photo .hero-overlay { display: none; }

/* --------------------------------------------------------------------------
   Stat bar - 5 stats, vertical rules
   -------------------------------------------------------------------------- */
.stat-bar { background: var(--navy); }
.stat-bar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 26px 22px;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.stat-item {
  text-align: center; padding: 6px 14px; border-left: 1px solid rgba(255,255,255,0.16);
}
.stat-item:first-child { border-left: none; }
.stat-num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--gold); text-transform: uppercase;
  line-height: 1.1; margin-bottom: 2px;
}
.stat-label {
  display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(255,255,255,0.82);
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.band { padding: 74px 0; }
.band-white { background: var(--white); }
.band-cream { background: var(--cream); }
.band-navy { background: var(--navy); color: var(--white); }
.band-navy h2, .band-navy h3 { color: var(--white); }
.band-navy p, .band-navy li { color: rgba(255,255,255,0.88); }
.band-crimson { background: linear-gradient(120deg, var(--red-dark) 0%, var(--red) 100%); color: var(--white); }
.band-crimson h2, .band-crimson h3 { color: var(--white); }
.band-crimson p { color: rgba(255,255,255,0.92); }

/* --------------------------------------------------------------------------
   Service cards grid (6-up): photo top, navy title bar, one-liner
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Process-step lists: column count comes from --cols on the element, so the
   mobile 1fr rule on .check-grid below still wins (2026-09-14). */
.step-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); list-style: none; padding: 0; margin-top: 36px; }
.svc-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
}
/* Hover lift now owned by .dz-lift (motion pass, see bottom of file) -
   every .svc-card carries that class in the markup. */
.svc-card-photo { aspect-ratio: 3 / 2; position: relative; background: var(--navy); }
.svc-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-card-title {
  background: var(--navy); padding: 12px 18px;
}
.svc-card-title h3 { color: var(--white); font-size: 1.05rem; margin: 0; }
.svc-card-body { padding: 16px 18px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.svc-card-body p { font-size: 0.93rem; color: var(--muted); margin-bottom: 12px; flex-grow: 1; }
.svc-card-link { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--red); }

/* --------------------------------------------------------------------------
   Guarantee band (crimson gradient) - 4 white check-cards
   -------------------------------------------------------------------------- */
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.check-card { background: var(--white); border-radius: var(--radius); padding: 22px 20px; color: var(--ink); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
.check-card .check-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--green); color: var(--white); font-weight: 800; margin-bottom: 12px;
}
.check-card p { font-size: 0.93rem; margin: 0; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Tabs - "Know Before You Book" (ARIA tabs, keyboard nav, vanilla JS)
   -------------------------------------------------------------------------- */
.tabs-wrap { max-width: 980px; margin: 0 auto; }
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid var(--line); margin-bottom: 0; list-style: none; padding: 0; }
.tab-btn {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 0.88rem; background: none; border: none; padding: 12px 16px; cursor: pointer;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--red); }
.tab-btn[aria-selected="true"] { color: var(--red); border-color: var(--red); }
.tab-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tab-panels { padding-top: 32px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: center; }
.tab-panel-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--glow); aspect-ratio: 3/2; }
.tab-panel-photo img { width: 100%; height: 100%; object-fit: cover; }
.tab-panel-copy h3 { margin-bottom: 10px; }
.tab-panel-copy .tab-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   About split (offset photo card, corner badge)
   -------------------------------------------------------------------------- */
.split-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.split-grid.reverse { grid-template-columns: 0.85fr 1.15fr; }
.split-grid.reverse .split-photo { order: -1; }
.split-photo { position: relative; }
.split-photo-card {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transform: rotate(-1.2deg); max-width: 420px; margin: 0 auto; border: 6px solid var(--white);
}
.split-photo-card img { width: 100%; height: auto; display: block; }
.corner-badge {
  position: absolute; bottom: -16px; right: 6px; background: var(--gold); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.78rem;
  letter-spacing: 0.03em; padding: 10px 16px; border-radius: 8px; box-shadow: var(--glow-strong);
  transform: rotate(2deg); text-align: center; line-height: 1.3;
}
.intro-links { margin-top: 6px; }
.intro-links a, .body-link { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Rebook strip (cream)
   -------------------------------------------------------------------------- */
.rebook-strip { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rebook-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 40px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.rebook-inner h2 { margin: 0 0 4px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.rebook-inner p { margin: 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   CTA band (navy, centered)
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { color: var(--white); max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-band .hero-ctas { justify-content: center; margin-top: 26px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Long-form SEO blocks (red arrow lists)
   -------------------------------------------------------------------------- */
.seo-block { max-width: 880px; margin: 0 auto 64px; }
.seo-block:last-child { margin-bottom: 0; }
.seo-block h2 { margin-bottom: 16px; }
.arrow-list { list-style: none; margin: 20px 0; padding: 0; }
.arrow-list li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); font-weight: 600; }
.arrow-list li:last-child { border-bottom: none; }
.arrow-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--red); font-weight: 800; }
.seo-block-cta { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.92rem; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.seo-block-cta:hover { color: var(--red-dark); }

/* --------------------------------------------------------------------------
   Checklist + stat row ("Why Families Choose Liberty")
   -------------------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.why-list { list-style: none; margin: 0 0 24px; padding: 0; }
.why-list li { position: relative; padding: 10px 0 10px 32px; font-weight: 600; border-bottom: 1px solid var(--line); }
.why-list li::before { content: "\2713"; position: absolute; left: 2px; color: var(--green); font-weight: 800; }
.why-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why-stat { background: var(--cream); border-radius: var(--radius); padding: 20px 14px; text-align: center; }
.why-stat .num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--red); }
.why-stat .label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }

/* --------------------------------------------------------------------------
   Urgency band (red, solid)
   -------------------------------------------------------------------------- */
.urgency-band { background: var(--red); color: var(--white); text-align: center; }
.urgency-band h2 { color: var(--white); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 8px; }
.urgency-band p { color: rgba(255,255,255,0.94); max-width: 620px; margin: 0 auto 22px; font-size: 1.02rem; }

/* --------------------------------------------------------------------------
   Reviews (5 gold stars)
   -------------------------------------------------------------------------- */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { background: var(--white); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; border: 1px solid var(--line); }
.review-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 12px; }
.review-card blockquote { margin: 0 0 16px; font-size: 0.96rem; flex-grow: 1; }
.review-card blockquote p { margin: 0 0 0.8em; }
.review-card blockquote p:last-child { margin-bottom: 0; }
.review-meta { font-weight: 700; font-size: 0.85rem; color: var(--muted); margin: 0; }
.review-source { text-align: center; margin-top: 30px; font-size: 0.92rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   City chip grid
   -------------------------------------------------------------------------- */
.city-chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.city-chip {
  display: block; background: rgba(255,255,255,0.06); border: 1px solid rgba(245,176,46,0.35);
  border-radius: 10px; padding: 16px 18px; color: var(--white); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-transform: uppercase;
  letter-spacing: 0.01em; transition: background 0.15s, border-color 0.15s;
}
.city-chip:hover { background: rgba(245,176,46,0.14); border-color: var(--gold); }
.band-white .city-chip, .band-cream .city-chip { background: var(--white); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.band-white .city-chip:hover, .band-cream .city-chip:hover { border-color: var(--red); }
.city-chip .tier { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: 0.78rem; opacity: 0.7; margin-top: 3px; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   FAQ accordion - native <details>/<summary>, grouped
   -------------------------------------------------------------------------- */
.faq-groups { max-width: 840px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Map embed + price-anchor cards -- city-page thinness fix, Jason
   2026-08-21. Map iframe src is injected by JS (IntersectionObserver) not
   loaded here -- this container only reserves a fixed aspect-ratio box so
   the page never shifts (CLS) whether or not the iframe has loaded yet.
   -------------------------------------------------------------------------- */
.map-embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--cream); box-shadow: var(--shadow);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.price-anchor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px; }
.price-anchor-card { background: var(--cream); border-radius: var(--radius); padding: 16px 22px; min-width: 160px; }
.price-anchor-range { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--red); }
.price-anchor-name { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 2px; }
.faq-group-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; color: var(--red); margin: 40px 0 16px; }
.faq-group-title:first-child { margin-top: 0; }
.faq-list { list-style: none; margin: 0; padding: 0; }
details.faq-item { border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: 12px; background: var(--white); overflow: hidden; }
details.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; text-transform: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; color: var(--ink);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--red); flex-shrink: 0; transition: transform 0.2s; line-height: 1; }
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item .faq-a { padding: 0 20px 18px; font-size: 0.96rem; color: var(--muted); }
details.faq-item .faq-a p { margin: 0; }

/* --------------------------------------------------------------------------
   Before/after slider - component ready, not instantiated on any live page
   yet (no "before" photos exist). Dusk-unlit vs night-lit comparison.
   Vanilla JS clip-path, no library. See js/site.js initBeforeAfterSliders().
   -------------------------------------------------------------------------- */
.ba-slider {
  position: relative; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); max-width: 720px; margin: 0 auto; touch-action: pan-y;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ba-slider .ba-after { clip-path: inset(0 0 0 50%); }
.ba-slider .ba-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold);
  box-shadow: 0 0 10px rgba(245,176,46,0.8); transform: translateX(-50%); pointer-events: none;
}
.ba-slider .ba-handle {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); transform: translate(-50%, -50%); box-shadow: var(--glow-strong);
  display: flex; align-items: center; justify-content: center; cursor: ew-resize;
}
.ba-slider .ba-handle::before { content: "\2194"; color: var(--ink); font-weight: 800; }
.ba-slider input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.ba-slider .ba-label { position: absolute; bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); background: rgba(14,42,71,0.7); padding: 4px 10px; border-radius: 6px; }
.ba-slider .ba-label.before-label { left: 12px; }
.ba-slider .ba-label.after-label { right: 12px; }

/* --------------------------------------------------------------------------
   Project cards (town-tagged, gallery + city pages)
   -------------------------------------------------------------------------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.project-photo { position: relative; aspect-ratio: 3/2; background: var(--navy); }
.project-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-photo.portrait { aspect-ratio: 3/4; }
.project-town-tag {
  position: absolute; top: 10px; left: 10px; background: var(--red); color: var(--white);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.72rem;
  letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px;
}
.project-body { padding: 14px 18px 18px; }
.project-body p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Pricing package cards (cost page)
   -------------------------------------------------------------------------- */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; align-items: stretch; }
.pkg-card { position: relative; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 24px 24px; display: flex; flex-direction: column; }
.pkg-card.featured { border: 2px solid var(--red); box-shadow: var(--glow-strong), var(--shadow); }
.pkg-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--red);
  color: var(--white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.72rem; padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.pkg-name { font-size: 1.15rem; margin-bottom: 2px; }
.pkg-price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--red); margin: 0 0 8px; }
.pkg-tagline { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; min-height: 44px; font-family: var(--font-body); text-transform: none; }
.pkg-list { list-style: none; margin: 0 0 22px; padding: 0; flex-grow: 1; }
.pkg-list li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.pkg-list li:last-child { border-bottom: none; }
.pkg-list li::before { content: "\2713"; position: absolute; left: 2px; color: var(--green); font-weight: 800; }

.price-table-scroll { overflow-x: auto; margin-top: 20px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.price-table th, .price-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.price-table thead th { background: var(--navy); color: var(--white); font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.price-table tbody tr:nth-child(even) { background: var(--cream); }
.price-table td:first-child { font-weight: 700; }

/* --------------------------------------------------------------------------
   Quote form (used on hero-adjacent bands and the dedicated /quote/ page)
   -------------------------------------------------------------------------- */
.quote-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px 26px; color: var(--ink); max-width: 560px; margin: 0 auto; }
.quote-card h2 { font-size: 1.4rem; margin-bottom: 4px; }
.quote-card .quote-sub { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; font-weight: 400; }
.quote-card label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 14px 0 5px; }
.quote-card input, .quote-card select, .quote-card textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 0.95rem; border: 1.5px solid var(--line);
  border-radius: 8px; background: #F9FAFC; font-family: var(--font-body); /* cool off-white (was warm #fffdf8; matches the frost swap, 2026-08-20) */
}
.quote-card textarea { resize: vertical; min-height: 64px; }
.quote-card input:focus, .quote-card select:focus, .quote-card textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.quote-card .btn { margin-top: 20px; }

.consent-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--red); }
.consent-label { font-weight: 400; font-size: 0.78rem; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--muted); cursor: pointer; margin: 0; font-family: var(--font-body); }
.consent-fine { font-size: 0.7rem; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.consent-fine a { color: var(--muted); text-decoration: underline; }

/* Quote-form failure fallback (2026-08-22, lead-email wiring). Shown only
   if the /api/quote POST fails or returns ok:false -- never hidden by
   redirecting anyway, since a failed lead must surface, not be swallowed.
   Same red as the rest of the error/urgency language on this site. */
.quote-form-error {
  font-size: 0.85rem; font-weight: 600; color: var(--red); background: rgba(163,22,33,0.08);
  border: 1px solid rgba(163,22,33,0.25); border-radius: 8px; padding: 12px 14px; margin: 12px 0 0;
}
.quote-form-error a { color: var(--red); font-weight: 700; }

.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.quote-band { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   Legal pages (privacy / terms)
   -------------------------------------------------------------------------- */
.legal-copy { max-width: 800px; margin: 0 auto; }
.legal-copy h2 { font-size: 1.2rem; margin-top: 1.6em; }
.legal-copy .updated { color: var(--muted); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.82); padding: 56px 0 40px; font-size: 0.92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; }
.site-footer h2 { color: var(--white); font-size: 0.88rem; letter-spacing: 0.04em; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-logo .logo-lockup { margin-bottom: 14px; }
.footer-logo .logo-badge { height: 96px; }
.footer-nap p { margin: 0 0 6px; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 40px; padding-top: 22px; }
.footer-legal-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.footer-legal p { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0 0 10px; }
.footer-legal a { text-decoration: underline; color: rgba(255,255,255,0.6); }
.footer-consent { font-size: 0.72rem; line-height: 1.6; color: rgba(255,255,255,0.45); max-width: 900px; }

/* --------------------------------------------------------------------------
   Sticky mobile call button
   -------------------------------------------------------------------------- */
.sticky-call {
  display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 70;
  background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; text-transform: uppercase; text-align: center; text-decoration: none;
  padding: 15px 10px calc(15px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,0.3);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .svc-grid, .review-grid, .project-grid { grid-template-columns: 1fr 1fr; }
  .check-grid { grid-template-columns: 1fr 1fr; }
  .city-chip-grid { grid-template-columns: 1fr 1fr 1fr; }
  .split-grid, .split-grid.reverse, .why-grid, .tab-panel-inner { grid-template-columns: 1fr; }
  .split-grid.reverse .split-photo { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-bar-inner { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .stat-item:nth-child(4) { border-left: none; }
  .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .rebook-inner { justify-content: center; text-align: center; }

  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--white);
    border-bottom: 1px solid var(--line); padding: 10px 22px 20px; box-shadow: var(--shadow);
  }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .main-nav a { display: block; padding: 10px 0; font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .header-actions { margin-left: auto; }
  /* Flexbox safety net: default min-width:auto on flex items refuses to
     shrink below content size, which is what let the phone block push
     past the viewport edge. This lets every header-inner child shrink as
     needed instead of forcing overflow (coordinator visual-QA fix). */
  .header-inner > * { min-width: 0; }
}

@media (max-width: 640px) {
  .svc-grid, .review-grid, .project-grid, .check-grid, .city-chip-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-bar-inner { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(3) { border-left: none; }
  /* Bug fix, Jason mobile QA 2026-08-21 (measured 375px): 5 stat-items in
     a 2-column grid leaves the 5th stat alone in a half-width cell, reads
     like a layout mistake. statBar is a single hardcoded 5-item constant
     used once (homepage only, never a shared component with a different
     item count elsewhere), so this last-child rule is safe unscoped --
     confirmed via source before adding it. */
  .stat-bar-inner > *:last-child { grid-column: 1 / -1; }
  /* Bug fix, Jason mobile QA 2026-08-21 (measured 375px): .why-stats had
     NO mobile override anywhere, so its base repeat(3, 1fr) stayed active
     all the way down to phone width. Measured 99.65px per column at
     375px -- "10 / ZIP Codes Covered", "Same-Day / Design & Price", and
     "0 / Ladders You Climb" wrapped into unreadable slivers. Stack to one
     full-width column per stat; the existing .why-stat card (number over
     label, centered) already reads fine full-width, so no inner layout
     change was needed, just the container going 3-col -> 1-col. */
  .why-stats { grid-template-columns: 1fr; }
  .band { padding: 52px 0; }
  .sticky-call { display: block; }
  .util-links { gap: 10px; font-size: 0.76rem; }
  .hero-inner { padding-top: 44px; padding-bottom: 44px; }
  body { padding-bottom: 0; }
  main { display: block; }

  /* Mobile header overflow fix (coordinator visual-QA, 2026-08-19): the
     "Call Us Today (513) 466-1749" text block was wide enough to push
     the header past 375px. The bottom sticky-call bar already carries the
     full "Tap to Call" affordance on mobile, so the header's phone link
     collapses to a round icon-only tel: button next to the hamburger. */
  .header-inner { gap: 10px; padding: 10px 14px; }
  .logo-lockup { gap: 8px; }
  .nav-toggle { padding: 5px 10px; font-size: 1.15rem; }
  .header-actions { gap: 8px; }
  .header-phone {
    width: 38px; height: 38px; padding: 0; flex-shrink: 0;
    justify-content: center; border-radius: 50%;
    background: var(--navy); color: var(--white);
  }
  .header-phone .phone-label-text { display: none; }
}

@media (max-width: 480px) {
  /* Utility bar: drop the tagline so "Booking now for the 2026 season"
     plus the Pricing/Takedown/Commercial links fit in one or two rows
     instead of three (coordinator visual-QA fix). */
  .util-tagline { display: none; }
  /* Header CTA: swap to short text so it never has to fight the logo +
     icon-only call button for space at very narrow widths. Padding
     stepped down one notch (16px -> 14px horizontal) to pair with the
     .cta-short nowrap fix above -- extra margin against overflow now
     that "Light It" can't wrap to a second line. */
  .header-cta .cta-full { display: none; }
  .header-cta .cta-short { display: inline; }
  .header-cta { padding: 12px 14px; }
}

/* Header nav collapses at 1199px (was 980px) because the 84px badge plus the
   text name leave no room for the inline nav between 981px and ~1150px. */
@media (max-width: 1199px) {
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--white);
    border-bottom: 1px solid var(--line); padding: 10px 22px 20px; box-shadow: var(--shadow);
  }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .main-nav a { display: block; padding: 10px 0; font-size: 1.05rem; }
  .nav-toggle { display: block; }
  .header-actions { margin-left: auto; }
  .header-inner > * { min-width: 0; }
}

/* Header badge sizes by breakpoint (must come after the 749px block). */
@media (max-width: 719px) {
  .logo-badge { height: 60px; }
  .logo-name { display: none; }
  .footer-logo .logo-name { display: flex; }
}
@media (max-width: 479px) {
  .logo-badge { height: 52px; }
  .footer-logo .logo-badge { height: 96px; }
}

/* ==========================================================================
   Motion pass (web-dazzle) - Jason-approved 2026-08-20. dz- prefix on every
   effect class. Only transform / opacity / box-shadow / background-color
   are ever animated - never layout properties (width, height, top, left,
   margin, padding). Every block below has its own reduced-motion guard;
   the global catch-all further down is a backstop, not a substitute.
   ========================================================================== */

/* --- Scroll reveal (site-wide) ---
   Applied via JS (js/site.js dzObserver) to elements carrying .dz-reveal:
   opacity/translateY fade-up on first scroll into view, once, never loops.
   --dz-delay staggers grid items; section headers use the default (0s). */
.dz-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--dz-delay, 0s);
}
.dz-reveal.dz-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .dz-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- 3D card lift (hover): service cards, review cards, gallery/project
   cards. --- */
.dz-lift {
  position: relative;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  z-index: 0;
}
.dz-lift:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.10), 0 32px 56px rgba(0, 0, 0, 0.14);
  z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
  .dz-lift, .dz-lift:hover { transform: none; }
}

/* Dark-band lift variant: box-shadow doesn't read against navy, so city
   chips get a background lighten instead. Layered alongside the existing
   .city-chip:hover (gold border/tint) rather than replacing it - this rule
   sits later in the cascade so its background-color wins on hover, while
   .city-chip:hover's border-color: var(--gold) still applies underneath. */
.dz-lift-dark {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.dz-lift-dark:hover { transform: translateY(-10px) scale(1.02); background-color: rgba(255, 255, 255, 0.06); }
@media (prefers-reduced-motion: reduce) {
  .dz-lift-dark, .dz-lift-dark:hover { transform: none; }
}

/* --- Micro-polish: underline slide (nav + footer text links, never
   buttons) --- */
.dz-underline { position: relative; text-decoration: none; }
.dz-underline::after {
  content: "";
  position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dz-underline:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .dz-underline::after { transition: none; }
}

/* --- Micro-polish: Ken Burns, city-page hero photos only (not homepage,
   which gets the bespoke bloom instead - one motion per element). Hero
   section already has overflow:hidden (see .hero above), so the 1.08x
   scale never bleeds past the hero bounds. --- */
.dz-kenburns { animation: dz-kenburns 24s ease-out both; will-change: transform; }
@keyframes dz-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-kenburns { animation: none; }
}

/* --- Bespoke: pulse ring, HOMEPAGE HERO PRIMARY CTA ONLY (coordinator,
   2026-08-20). animation-delay: 2.2s is deliberate - the hero bloom
   finishes fading at ~1.4s after load (250ms JS delay + 1.1s opacity
   transition), so the ring starts after: two attention moments,
   sequential, never simultaneous. Warm gold, tuned for the dark hero. No
   other button anywhere gets this - one attention-drawer per viewport. */
.dz-pulse { position: relative; }
.dz-pulse::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--dz-pulse-color, rgba(245, 176, 46, 0.45));
  animation: dz-pulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 2.2s;
  pointer-events: none;
}
@keyframes dz-pulse {
  0% { box-shadow: 0 0 0 0 var(--dz-pulse-color, rgba(245, 176, 46, 0.45)); }
  55% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-pulse::after { animation: none; }
}

/* --- Bespoke: homepage hero bloom, "the lights-on moment" ---
   Stacking (all explicit, no reliance on DOM-order tie-breaking):
   .hero-bg (z:0) < .hero-overlay (z:1) < .dz-bloom (z:2) < .hero-inner
   (z:3, bumped from 2 - see rule above). Bloom only ever darkens the
   photo/overlay layers; text sits above it and is never dimmed. */
.dz-bloom {
  position: absolute; inset: 0; z-index: 2;
  background: #0A1F35;
  opacity: 0.45;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.dz-bloom.dz-lit { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .dz-bloom { display: none; }
}

/* --- Bespoke: realistic C9 string-divider ignition (redesigned 2026-08-20
   - the original circles-on-a-line read cheesy per Jason's live preview).
   Sagging wire + hanging teardrop bulbs with pigtail + socket, two glow
   layers per bulb (opacity only, no blur/filters). Unlit until the shared
   scroll observer marks .lights-divider.dz-in, then bulbs light up
   left-to-right on a per-bulb --i stagger. Fires once, never loops.
   Default (no .on-dark) = light/frost background, the only variant in use
   today; .on-dark is ready for a dark-band placement later. Light-variant
   cord/socket/unlit-bulb colors swapped cool 2026-08-20 to match the
   cream->frost token swap (were warm beige, would clash on cool gray).
   Lit bulbs stay warm gold on purpose -- warm lights on cool frost is
   the point. --- */
.lights-divider svg { display: block; }
.lights-divider .wire { stroke: #C4CBD4; stroke-width: 1.6; fill: none; }
.lights-divider.on-dark .wire { stroke: #223C5C; }
.lights-divider .pigtail { stroke: #C4CBD4; stroke-width: 1.2; }
.lights-divider.on-dark .pigtail { stroke: #223C5C; }
.lights-divider .socket { fill: #9AA4B0; }
.lights-divider.on-dark .socket { fill: #3A5578; }

.lights-divider .bulb-body {
  fill: #C9CFD8;
  transition: fill 0.3s ease;
  transition-delay: calc(var(--i) * 65ms);
}
.lights-divider.on-dark .bulb-body { fill: #6A5F45; }
.lights-divider .bulb-red .bulb-body { fill: #7A3038; }

.lights-divider .glow-inner,
.lights-divider .glow-outer {
  opacity: 0;
  transition: opacity 0.3s ease;
  transition-delay: calc(var(--i) * 65ms);
}
.lights-divider .glow-inner { fill: #F8C65E; }
.lights-divider .glow-outer { fill: #F5B02E; }
.lights-divider .bulb-red .glow-inner { fill: #E06A70; }
.lights-divider .bulb-red .glow-outer { fill: #D8474F; }

.lights-divider.dz-in .bulb-body { fill: #FFE9B8; }
.lights-divider.dz-in .bulb-red .bulb-body { fill: #FF6B72; }
/* Light/frost background: halve the glow opacities so they do not smear
   against a bright band (coordinator spec). Dark background keeps the
   full-strength glow. */
.lights-divider.dz-in .glow-inner { opacity: 0.25; }
.lights-divider.dz-in .glow-outer { opacity: 0.08; }
.lights-divider.on-dark.dz-in .glow-inner { opacity: 0.5; }
.lights-divider.on-dark.dz-in .glow-outer { opacity: 0.16; }

@media (prefers-reduced-motion: reduce) {
  .lights-divider .bulb-body { transition: none; fill: #FFE9B8; }
  .lights-divider .bulb-red .bulb-body { fill: #FF6B72; }
  .lights-divider .glow-inner, .lights-divider .glow-outer { transition: none; opacity: 0.25; }
  .lights-divider .glow-outer { opacity: 0.08; }
  .lights-divider.on-dark .glow-inner { opacity: 0.5; }
  .lights-divider.on-dark .glow-outer { opacity: 0.16; }
}

/* Reduced motion: kill all non-essential transitions/animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}


/* --------------------------------------------------------------------------
   Google Ads landing page hero (2026-10-18): offer + checks + form in the
   first screen, lead-gen layout. Nav and footer stay. Only used by the three
   ad landing pages via lpOfferHero().
   -------------------------------------------------------------------------- */
.lp-hero .hero-inner.lp-hero-grid { max-width: var(--maxw); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "head form" "details form"; column-gap: 36px; row-gap: 0; align-items: start; padding: 48px 22px 52px; }
.lp-hero-head { grid-area: head; }
.lp-hero-details { grid-area: details; }
.lp-hero-form { grid-area: form; }
.lp-hero-call .call-label { display: block; opacity: 0.85; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
.lp-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.lp-offer { display: inline-block; margin: 14px 0 0; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: var(--navy); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.lp-offer strong { font-weight: 900; }
.lp-hero .hero-sub { margin: 16px 0 14px; }
.lp-checks { list-style: none; margin: 0 0 22px; padding: 0; }
.lp-checks li { position: relative; padding: 5px 0 5px 30px; font-weight: 600; color: var(--white); }
.lp-checks li::before { content: "\2713"; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 900; font-size: 0.8rem; line-height: 20px; text-align: center; }
.lp-hero-form .quote-card { margin: 0; max-width: none; }
.lp-hero-form .quote-card h2 { font-size: 1.3rem; }
.lp-form-offer { margin: 14px 0 0; font-weight: 700; color: var(--red); font-size: 0.95rem; }
.sticky-duo { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 70; box-shadow: 0 -6px 20px rgba(0,0,0,0.3); }
.sticky-duo a { flex: 1 1 50%; text-align: center; text-decoration: none; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.98rem; padding: 15px 8px calc(15px + env(safe-area-inset-bottom)); color: var(--white); }
.sticky-duo-call { background: var(--navy); }
.sticky-duo-quote { background: var(--red); }
@media (max-width: 749px) { .sticky-duo { display: flex; } }
@media (max-width: 980px) {
  .lp-hero .hero-inner.lp-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "details"; row-gap: 22px; padding: 30px 16px 40px; }
  .lp-hero-details .hero-sub { display: none; }
  .lp-hero-call { display: none; }
}
@media (max-width: 640px) {
  .sticky-duo { display: flex; }
  .lp-checks li { font-size: 0.95rem; padding-top: 4px; padding-bottom: 4px; }
  .lp-offer { font-size: 0.98rem; }
}


/* --------------------------------------------------------------------------
   Ad landing pages, My Christmas Light Guy layout (2026-10-26). Centered hero,
   2x2 fast-quote form with no labels or fine print, specialist vs DIY table.
   -------------------------------------------------------------------------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fast-hero .hero-inner.fast-hero-inner { max-width: 760px; text-align: center; padding: 64px 18px 58px; }
.fast-hero h1 { max-width: none; font-size: clamp(2rem, 6.4vw, 3.1rem); line-height: 1.05; margin: 0 auto; }
.fast-sub { color: rgba(255,255,255,0.9); font-size: 1rem; max-width: 600px; margin: 14px auto 22px; }
.fast-card { max-width: 620px; margin: 0 auto; }
.fast-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fast-form input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; background: #fff; border: 2px solid #fff; border-radius: 10px; padding: 16px 16px; font-size: 1rem; color: var(--ink); font-family: inherit; }
.fast-form input:focus { outline: none; border-color: var(--gold); }
.fast-form input::placeholder { color: #6b7280; }
.fast-form .fast-btn { grid-column: 1 / -1; margin: 2px 0 0; padding: 18px 12px; font-size: 1.15rem; letter-spacing: .04em; border: 2px solid #fff; }
.fast-form .quote-form-error { grid-column: 1 / -1; color: #fff; margin: 8px 0 0; }
/* Sitewide four-field form (2026-10-26): same grid as the ad pages, on the white quote card. */
.site-fast .fast-form input:not([type="checkbox"]) { border-color: var(--line); }
.site-fast .fast-form input:focus { border-color: var(--red); }
.site-fast .fast-form .quote-form-error { color: var(--red); }
.site-fast .consent-fine { grid-column: 1 / -1; font-size: 0.74rem; color: var(--muted); line-height: 1.5; margin: 6px 0 0; }
.site-fast .consent-fine a { color: var(--muted); }
.site-fast .fast-btn { border-color: var(--red); }
@media (max-width: 480px) { .site-fast .fast-form { grid-template-columns: 1fr; } }
.fast-form .quote-form-error a { color: var(--gold); }
.fast-offer { margin: 16px auto 0; color: var(--gold); font-weight: 700; font-size: .98rem; max-width: 560px; }
.fast-offer strong { color: #fff; }
.band-red { background: var(--red); color: #fff; }
.band-red h2 { color: #fff; }
.btn-white { background: #fff; color: var(--red); border: 2px solid #fff; }
.fast-band { padding: 52px 0; text-align: center; }
.cmp-wrap { max-width: 760px; margin: 0 auto; overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.cmp-table th, .cmp-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp-table thead th { background: var(--navy); color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; }
.cmp-table tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; }
.cmp-yes { color: #15803d; font-weight: 900; font-size: 1.25rem; }
.cmp-no { color: var(--red); font-weight: 900; font-size: 1.1rem; }
.band-navy .review-card, .band-navy .review-card p, .band-navy .review-card li, .band-navy .review-card h3, .band-navy .review-card cite { color: var(--ink); }
@media (max-width: 640px) {
  .fast-hero .hero-inner.fast-hero-inner { padding: 40px 14px 44px; }
  .fast-form { gap: 10px; }
  .fast-form input:not([type="checkbox"]) { padding: 15px 12px; font-size: 16px; }
  .cmp-table th, .cmp-table td { padding: 11px 6px; font-size: .9rem; }
}

/* Sitewide mobile header fix (2026-10-26): at 375-424px the logo + menu +
   call icon + red header button measured 424px wide, so every page scrolled
   sideways on most iPhones. Under 480px the bottom sticky bar already shows
   Call and Quote, so the header button steps aside there. */
@media (max-width: 480px) {
  .header-cta { display: none; }
}

/* Owner photos (About, homepage about strip, insured page). */
.owner-id { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }
.owner-id-photo { flex: 0 0 128px; }
.owner-id-photo img { display: block; width: 128px; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.owner-id-name { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1; color: var(--navy); }
.owner-id-role { display: block; color: var(--muted); font-weight: 600; margin-top: 4px; }
.photo-caption { margin: 10px 0 0; font-size: 0.92rem; color: var(--muted); font-weight: 600; text-align: center; }
.owner-figure { margin: 26px auto; max-width: 340px; }
.owner-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.owner-float { float: right; width: 220px; margin: 4px 0 14px 22px; }
.owner-float img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 600px) { .owner-float { float: none; width: 60%; max-width: 240px; margin: 6px auto 16px; } }
.owner-figure-wide { margin: 34px auto 0; max-width: 720px; }
.owner-figure-wide img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Hero: give the house room (Jason 2026-10-26) */
.hero-inner.hero-home { min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-home h1 { margin-top: 0; }
@media (max-width: 719px) { .hero-inner.hero-home { min-height: 68vh; } }

/* Homepage owner guarantee (red band): photo left, copy right. White text on the
   brand red (#C42A31) is about 5.6:1, above the 4.5:1 AA bar. */
.owner-guarantee { padding: 64px 0; }
.owner-guarantee-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: center; }
.owner-guarantee-photo img { display: block; width: 220px; height: auto; border-radius: 18px; border: 4px solid rgba(255,255,255,0.9); box-shadow: 0 10px 30px rgba(0,0,0,0.28); }
.owner-guarantee .eyebrow { color: #fff; opacity: 0.92; }
.owner-guarantee .eyebrow::before { background: #fff; }
.owner-guarantee h2 { color: #fff; margin-bottom: 14px; }
.owner-guarantee p { color: #fff; max-width: 640px; }
.owner-guarantee-checks { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; max-width: 640px; }
.owner-guarantee-checks li { position: relative; padding-left: 28px; color: #fff; font-weight: 600; }
.owner-guarantee-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--red); font-weight: 900; font-size: 0.78rem; line-height: 20px; text-align: center; }
.owner-guarantee-sign { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.25rem; margin: 10px 0 18px; }
.owner-guarantee .hero-ctas { margin-top: 6px; }
@media (max-width: 640px) {
  .owner-guarantee { padding: 48px 0; }
  .owner-guarantee-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: stretch; }
  .owner-guarantee-photo { justify-self: center; }
  .owner-guarantee-photo img { width: 160px; }
  .owner-guarantee-checks { grid-template-columns: 1fr; }
}