:root {
      /* ============================================================
         GCJ DARK PREMIUM TOKEN SPINE (single source of truth)
         Direction = DARK, matches the approved GCJ flyer + brand bible:
         deep charcoal near-black #111418 base, clean white text, red
         #cf202b as the ONLY accent used scarcely. This same block is
         mirrored verbatim into the inline <style> of gcj-home.html and
         roof-v13.html so all 12 pages share ONE palette (no drift).
         Token ROLES are kept stable so the 450 existing var() uses keep
         working: surface tokens (--white/--cream/--paper/--surface*) are
         dark; text tokens (--ink/--muted) are light; --pure-* are the
         few elements that must stay literally white/dark in any theme.
         ============================================================ */
      --red: #cf202b;             /* raw brand red — LARGE headlines/fills ONLY (3.17:1 on charcoal, fails AA for small text) */
      --red-dark: #a31a23;
      --red-light: #fde8ea;       /* faint red wash on dark (was light pink) */
      --red-on-dark: #ff6b73;     /* AA-safe red for SMALL text/eyebrows/inline em on dark (>=4.5:1) */
      --red-glow: rgba(207, 32, 43, 0.18);
      /* --- TEXT (light, on the dark base) --- */
      --ink: #111827;             /* primary text */
      --ink-soft: #1f2937;        /* slightly dimmer headings/strong */
      --muted: #646b78;           /* secondary text — AA on #111418 (~6.0:1) */
      --muted-soft: #9ca3af;      /* tertiary text/icons — AA on dark (fix #4) */
      /* --- DEEP BASES (the flyer charcoal family) --- */
      --black: #0a0a0b;           /* deepest band (hero/footer/ribbon/cta) */
      --black-2: #151516;
      --black-3: #1f1f21;
      /* --- SURFACES (dark, replace the old light card/section fills) --- */
      --bg: #fafafa;              /* page background — the flyer charcoal */
      --surface: #ffffff;         /* default card/panel on the page */
      --surface-2: #f3f4f6;       /* raised / hover / nested card */
      --invert: #111827;          /* "inverted" chip (old dark-on-light button) */
      --cream: #f7f3ea;           /* alt section band (was warm off-white) */
      --cream-warm: #faf5e8;
      --paper: #fafafa;           /* hover surface */
      /* --- LINES / HAIRLINES (light-on-dark now) --- */
      --line: #e5e7eb;
      --line-soft: #f3f4f6;
      --line-dark: rgba(255,255,255,0.08);
      --line-dark-strong: rgba(255,255,255,0.16);
      /* --- ABSOLUTES (never theme-flip) --- */
      --white: #ffffff;           /* reverse text / borders / fills only */
      --pure-white: #ffffff;
      --pure-dark: #0a0a0b;
      --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-bold: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      /* Vertical rhythm, every section uses these so the page has a single, intentional cadence */
      --space-section: clamp(56px, 8vw, 120px);
      --space-section-sm: clamp(40px, 6vw, 80px);
      --space-section-lg: clamp(72px, 10vw, 140px);
      --space-head: clamp(24px, 4vw, 48px);
      --shell-x: clamp(20px, 5vw, 48px);
      /* Radius scale, deliberate, never random */
      --r-xs: 4px;
      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 22px;
      --r-xl: 32px;
      --r-pill: 999px;
      /* Layered shadow system — deep on the dark base (black-based, never grey-on-grey) */
      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
      --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.08);
      --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
      --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
      --shadow-red: 0 4px 8px rgba(207, 32, 43, 0.18), 0 12px 24px rgba(207, 32, 43, 0.22);
      --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
    body { margin: 0; max-width: 100%; overflow-x: hidden; color: var(--ink); background: var(--bg); font-family: var(--font); line-height: 1.62; -webkit-font-smoothing: antialiased; }
    img { max-width: 100%; display: block; }
    a { color: inherit; }
    button, input, textarea { font: inherit; }
    @supports (overflow: clip) { html, body { overflow-x: clip; } }

    .shell { width: min(1180px, calc(100% - var(--shell-x) * 2)); max-width: calc(100vw - var(--shell-x) * 2); margin: 0 auto; }
    .section { padding: var(--space-section) 0; }
    .section--sm { padding: var(--space-section-sm) 0; }
    .section.white { background: var(--bg); }
    .section.cream { background: var(--cream); }
    .section.dark { background: var(--black); color: var(--white); }
    .section-head { display: grid; gap: clamp(12px, 1.5vw, 18px); max-width: 760px; margin-bottom: var(--space-head); }
    .section-head--center { margin: 0 auto var(--space-head); text-align: center; max-width: 720px; }
    /* Mobile premium consistency: centre all section heads + tighten their max-width so wrap is predictable */
    @media (max-width: 720px) {
      .section-head, .section-head--center { text-align: center; margin-left: auto; margin-right: auto; max-width: 100%; justify-items: center; }
      .section-head .eyebrow { margin-left: auto; margin-right: auto; justify-self: center; }
      .section-head h2 { margin-left: auto; margin-right: auto; max-width: 18ch; }
      .section-head .lead, .section-head p { margin-left: auto; margin-right: auto; max-width: 30ch; }
    }
    .section-head--center .eyebrow { margin: 0 auto; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; width: fit-content; }
    h1, h2, h3, h4, p { margin: 0; }
    h2 { font-size: clamp(26px, 5.6vw, 56px); line-height: 1.08; letter-spacing: -0.005em; font-weight: 900; max-width: 880px; }
    h1 em, h2 em, h3 em, h4 em, p em, li em, button em, a em, summary em, blockquote em { font-style: italic; font-weight: 900; color: var(--red); }
    /* small inline emphasis (body copy) must clear AA — only large headline em keeps raw --red */
    p em, li em, button em, a em, summary em, blockquote em { color: var(--red); }
    h1 em, h2 em, h3 em, h4 em { letter-spacing: -0.015em; padding: 0 1px; }
    @property --bezel-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
    .lead { color: var(--muted); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 720px; }
    .dark .lead { color: rgba(255,255,255,0.72); }
    a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
    input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 3px;
    }
    :where(.stat-num, .kinetic-num, .tab-panel-meta strong, .hero-eyebrow, .hero-ticker strong, .trust-row-inner, .process-num, .spotless-stat-num, .ba-meta, .footer-bottom, .nav-phone, .sticky-cta) {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }

    /* ========== MOTION primitives ========== */
    /* FOUC-safe: every "from" (hidden) state is gated behind body.js-ready so content
       renders fully visible without JS. Animations only ENHANCE from the final state.
       A JS failsafe force-reveals everything if observers never fire. */
    .reveal { transition: opacity 1100ms var(--ease-bold), transform 1100ms var(--ease-bold); }
    body.js-ready .reveal { opacity: 0; transform: translateY(28px); }
    body.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .reveal-stagger > * { transition: opacity 700ms var(--ease-bold), transform 700ms var(--ease-bold); }
    body.js-ready .reveal-stagger > * { opacity: 0; transform: translateY(20px); }
    body.js-ready .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
    .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
    .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
    .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
    .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
    .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
    .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
    .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
    .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
    .reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 640ms; }
    .reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 720ms; }
    .reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 800ms; }
    .reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 880ms; }

    /* ========== TEXT-MASK REVEAL (Divi Essential dnxt-text-reveal pattern) ========== */
    /* Wraps inline text in overflow:hidden + slides each line/word up from below with mask.
       Progressive enhancement: text is visible by default. Body.js-ready (set immediately by
       inline script) hides text for the entrance animation; observer + scroll fallback reveals it. */
    .text-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; line-height: 1.12; }
    .text-mask > .inner { display: inline-block; transition: transform 1350ms var(--ease-bold); }
    body.js-ready .text-mask > .inner { transform: translateY(110%); }
    body.js-ready .text-mask.is-visible > .inner { transform: translateY(0); }
    .text-mask.delay-1 > .inner { transition-delay: 100ms; }
    .text-mask.delay-2 > .inner { transition-delay: 200ms; }
    .text-mask.delay-3 > .inner { transition-delay: 300ms; }

    /* ========== ANIMATED EM HIGHLIGHT (Divi Essential dnxt-text-highlight-animated pattern) ========== */
    /* Red underline that draws left-to-right under <em> emphasis words when scrolled into view. */
    h1 em, h2 em, h3 em { position: relative; display: inline-block; }
    h2 em.em-draw::after, h3 em.em-draw::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -0.05em;
      height: 0.14em;
      background: var(--red);
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 1200ms var(--ease-bold) 500ms;
      border-radius: 2px;
      opacity: 0.7;
    }
    h2 em.em-draw.is-visible::after, h3 em.em-draw.is-visible::after { transform: scaleX(1); }
    /* Em underline visible when JS hasn't loaded (no .js-ready on body) */
    body:not(.js-ready) h2 em.em-draw::after, body:not(.js-ready) h3 em.em-draw::after { transform: scaleX(1); transition: none; }
    .dark h2 em.em-draw::after, .dark h3 em.em-draw::after { background: var(--red); opacity: 0.85; }

    /* ========== STICKY IMAGE (Divi Essential et_pb_image_sticky pattern) ========== */
    /* Image pins to viewport while paired text column scrolls past. */
    .sticky-img-wrap { position: sticky; top: 100px; align-self: start; }

    /* ========== EM HIGHLIGHT VARIANTS (variations on the slide-draw pattern Matt loves) ========== */

    /* VARIANT A, em-box: red box draws around the word (4-stroke sequence) */
    h2 em.em-box, h3 em.em-box { padding: 0 0.15em; }
    h2 em.em-box::before, h2 em.em-box::after,
    h3 em.em-box::before, h3 em.em-box::after {
      content: "";
      position: absolute;
      background: var(--red);
      opacity: 0.85;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 700ms var(--ease-bold);
    }
    h2 em.em-box::before, h3 em.em-box::before {
      left: 0; right: 0; top: -0.04em; height: 0.08em;
    }
    h2 em.em-box::after, h3 em.em-box::after {
      left: 0; right: 0; bottom: -0.04em; height: 0.08em;
      transition-delay: 200ms;
    }
    h2 em.em-box.is-visible::before, h2 em.em-box.is-visible::after,
    h3 em.em-box.is-visible::before, h3 em.em-box.is-visible::after { transform: scaleX(1); }

    /* VARIANT B, em-marker: yellow→red highlighter sweep behind the word */
    h2 em.em-marker, h3 em.em-marker { padding: 0 0.1em; background-image: linear-gradient(120deg, var(--red) 0, var(--red) 100%); background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 90%; transition: background-size 900ms var(--ease-bold) 500ms; color: var(--ink); font-style: italic; }
    h2 em.em-marker.is-visible, h3 em.em-marker.is-visible { background-size: 100% 90%; color: var(--white); }
    .dark h2 em.em-marker, .dark h3 em.em-marker { color: var(--white); }

    /* VARIANT C, em-strike: line draws through the word (for crossing out the wrong way) */
    h2 em.em-strike, h3 em.em-strike { position: relative; font-style: normal; color: var(--muted); }
    h2 em.em-strike::after, h3 em.em-strike::after {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 50%;
      height: 0.08em;
      background: var(--red);
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 700ms var(--ease-bold) 300ms;
    }
    h2 em.em-strike.is-visible::after, h3 em.em-strike.is-visible::after { transform: scaleX(1); }

    /* VARIANT D, em-glow: red glow blooms behind the word */
    h2 em.em-glow, h3 em.em-glow { padding: 0 0.1em; }
    h2 em.em-glow::before, h3 em.em-glow::before {
      content: "";
      position: absolute;
      inset: -0.1em -0.15em;
      background: radial-gradient(closest-side, rgba(207,32,43,0.32), transparent 70%);
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 800ms var(--ease-bold) 200ms, transform 800ms var(--ease-bold) 200ms;
      z-index: -1;
    }
    h2 em.em-glow.is-visible::before, h3 em.em-glow.is-visible::before { opacity: 1; transform: scale(1); }

    /* ========== WORD-BY-WORD STAGGER (for hero h1, each word slides up independently) ========== */
    .word-stagger > .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; line-height: 1.05; }
    .word-stagger > .word > .w-inner { display: inline-block; transition: transform 800ms var(--ease-bold); }
    body.js-ready .word-stagger > .word > .w-inner { transform: translateY(110%); }
    body.js-ready .word-stagger.is-visible > .word > .w-inner { transform: translateY(0); }
    .word-stagger > .word:nth-child(2) > .w-inner { transition-delay: 60ms; }
    .word-stagger > .word:nth-child(3) > .w-inner { transition-delay: 120ms; }
    .word-stagger > .word:nth-child(4) > .w-inner { transition-delay: 180ms; }
    .word-stagger > .word:nth-child(5) > .w-inner { transition-delay: 240ms; }
    .word-stagger > .word:nth-child(6) > .w-inner { transition-delay: 300ms; }
    .word-stagger > .word:nth-child(7) > .w-inner { transition-delay: 360ms; }
    .word-stagger > .word:nth-child(8) > .w-inner { transition-delay: 420ms; }
    .word-stagger > .word:nth-child(9) > .w-inner { transition-delay: 480ms; }
    .word-stagger > .word:nth-child(10) > .w-inner { transition-delay: 540ms; }
    .word-stagger > .word:nth-child(11) > .w-inner { transition-delay: 600ms; }
    .word-stagger > .word:nth-child(12) > .w-inner { transition-delay: 660ms; }

    /* ========== KINETIC RIBBON (horizontal scrolling service marquee) ========== */
    .ribbon { background: var(--black); color: var(--white); padding: 32px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
    .ribbon-track { display: flex; gap: 64px; animation: ribbonScroll 32s linear infinite; width: max-content; }
    .ribbon:hover .ribbon-track { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }
    .ribbon-item { display: inline-flex; align-items: center; gap: 64px; font-size: clamp(34px, 5vw, 64px); font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; line-height: 1; }
    .ribbon-item em { font-style: italic; color: var(--red); font-weight: 900; padding: 0 0.05em; }
    .ribbon-item .dot { width: 12px; height: 12px; border-radius: 999px; background: var(--red); display: inline-block; flex-shrink: 0; }
    @keyframes ribbonScroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    /* ========== PROCESS TIMELINE (4 steps with drawing line between) ========== */
    .process { padding: var(--space-section) 0; background: var(--surface); position: relative; }
    .process-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; }
    .process-line { position: absolute; top: 28px; left: 8%; right: 8%; height: 2px; background: var(--line); z-index: 0; }
    .process-line::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); width: 0; transition: width 2400ms var(--ease-bold) 300ms; }
    .process.is-visible .process-line::after { width: 100%; }
    .process-step { position: relative; z-index: 1; text-align: center; }
    .process-num { width: 56px; height: 56px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; margin: 0 auto 24px; transition: border-color 240ms ease, background 240ms ease, color 240ms ease, transform 320ms var(--ease-bold); }
    /* nth-child counts from `.process-line` which is the parent's 1st child, steps are nth-child(2..5) */
    .process.is-visible .process-step:nth-child(2) .process-num { border-color: var(--red); background: var(--red); color: var(--white); transition-delay: 400ms; }
    .process.is-visible .process-step:nth-child(3) .process-num { border-color: var(--red); background: var(--red); color: var(--white); transition-delay: 900ms; }
    .process.is-visible .process-step:nth-child(4) .process-num { border-color: var(--red); background: var(--red); color: var(--white); transition-delay: 1400ms; }
    .process.is-visible .process-step:nth-child(5) .process-num { border-color: var(--red); background: var(--red); color: var(--white); transition-delay: 1900ms; }
    .process-step h3 { font-size: 19px; font-weight: 900; letter-spacing: -0.015em; margin: 0 0 8px; }
    .process-step p { font-size: 14.5px; color: var(--muted); font-weight: 600; line-height: 1.55; margin: 0; }
    @media (max-width: 860px) { .process-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .process-line { display: none; } }
    @media (max-width: 640px) {
      .process-grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
      .process-line { display: block; top: 28px; bottom: 34px; left: 27px; right: auto; width: 2px; height: auto; }
      .process-line::after { width: 100%; height: 0; transition: height 1800ms var(--ease-bold) 180ms; }
      .process.is-visible .process-line::after { width: 100%; height: 100%; }
      .process-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: left; padding-bottom: 30px; }
      .process-step:last-child { padding-bottom: 0; }
      .process-num { grid-row: 1 / span 2; margin: 0; }
      .process-step h3, .process-step p { grid-column: 2; }
      .process-step h3 { margin-top: 3px; }
    }

    /* ========== SERVICE TABS (crossfade nav) ========== */
    .service-tabs { padding: var(--space-section) 0; background: var(--cream); }
    .tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 40px 0 0; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
    .tabs-nav::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 18px 22px; background: transparent; border: 0; font-family: var(--font); font-size: 15px; font-weight: 800; letter-spacing: -0.005em; color: var(--muted); cursor: pointer; position: relative; white-space: nowrap; transition: color 200ms ease; min-height: 52px; flex: 0 0 auto; }
    .tab-btn::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--ease-bold); }
    @media (max-width: 720px) {
      .tabs-nav { display: flex; gap: 8px; border-bottom: 0; margin: 28px 0 18px; overflow-x: auto; padding: 0 var(--shell-x); margin-left: calc(var(--shell-x) * -1); margin-right: calc(var(--shell-x) * -1); scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
      .tab-btn { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px; font-size: 13px; text-align: center; min-height: 40px; scroll-snap-align: start; box-shadow: var(--shadow-sm); }
      .tab-btn::after { display: none; }
      .tab-btn.is-active { background: var(--red); color: var(--white) !important; border-color: var(--red); box-shadow: var(--shadow-red); }
      .tab-btn.is-active em { color: rgba(255,255,255,0.92); }
    }
    .tab-btn.is-active { color: var(--ink); background: rgba(207,32,43,0.06); }
    .tab-btn.is-active::after { transform: scaleX(1); }
    .tab-btn em { font-style: italic; color: var(--red); font-weight: 900; }
    .tabs-panels { position: relative; margin-top: 56px; min-height: 480px; }
    .tab-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-bold), transform 500ms var(--ease-bold); pointer-events: none; }
    .tab-panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
    /* Mobile, convert to swipe-able card carousel, all panels stacked horizontally */
    @media (max-width: 720px) {
      .tabs-panels { position: static; min-height: 0; margin-top: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x pan-y; padding: 0 var(--shell-x) 16px; margin: 0 calc(var(--shell-x) * -1); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .tabs-panels::-webkit-scrollbar { display: none; }
      .tab-panel { position: static; inset: auto; display: block; flex: 0 0 84%; min-width: 0; max-width: 320px; opacity: 1 !important; transform: none !important; pointer-events: auto !important; scroll-snap-align: center; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); padding: 14px; box-shadow: var(--shadow-md); }
      .tab-panel-img-wrap { aspect-ratio: 16/10; border-radius: var(--r-md); margin-bottom: 14px; }
      .tab-panel-text { padding: 0 4px 4px; }
      .tab-panel-meta { gap: 12px; }
    }
    .tab-panel-img-wrap { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
    .tab-panel-img { width: 100%; height: 100%; object-fit: cover; }
    .tab-panel-text h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 16px; }
    .tab-panel-text h3 em { font-style: italic; color: var(--red); font-weight: 900; }
    .tab-panel-text p { font-size: 15.5px; color: var(--ink); line-height: 1.6; font-weight: 500; margin: 0 0 20px; }
    @media (max-width: 720px) { .tab-panel-text p { font-size: 14.5px; line-height: 1.55; } .tab-panel-text h3 { font-size: clamp(22px, 6vw, 30px); } }
    .tab-panel-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
    .tab-panel-meta strong { color: var(--ink); font-weight: 900; display: block; font-size: 22px; letter-spacing: -0.015em; margin-bottom: 2px; }
    @media (max-width: 860px) { .tab-panel { grid-template-columns: 1fr; gap: 32px; } .tabs-panels { min-height: 720px; } }

    /* ========== KINETIC NUMBER (counter with sliding digits) ========== */
    .kinetic-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

    /* ========== MAGNETIC CTA (button subtly tracks cursor) ========== */
    .btn-magnetic { transition: transform 240ms var(--ease-bold); will-change: transform; }

    /* ========== MOUSE-SPOTLIGHT CARDS (radial glow follows cursor) ========== */
    .spot-card { position: relative; isolation: isolate; transition: transform 400ms var(--ease-bold), border-color 280ms ease, box-shadow 400ms var(--ease-bold); }
    .spot-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(207,32,43,0.5), rgba(207,32,43,0) 55%);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      opacity: 0;
      transition: opacity 360ms ease;
      pointer-events: none;
      z-index: 1;
    }
    .spot-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(207,32,43,0.08), transparent 55%);
      opacity: 0;
      transition: opacity 360ms ease;
      pointer-events: none;
      z-index: 0;
    }
    .spot-card:hover::before, .spot-card:hover::after { opacity: 1; }
    .spot-card > * { position: relative; z-index: 2; }
    /* On touch devices, kill the red glow pop-up, tap = navigate, not visual fireworks */
    @media (pointer: coarse) {
      .spot-card::before, .spot-card::after { display: none; }
      .spot-card:hover::before, .spot-card:hover::after { opacity: 0; }
    }
    @media (pointer: coarse) {
      .about-card:active, .feature-card:active, .bento > *:active, .spotless-stat:active, .gallery-item:active, details:active,
      .btn-primary:active, .btn-secondary:active, .nav-cta:active, .sticky-cta:active, .tab-btn:active {
        transform: scale(0.97);
        transition-duration: 120ms;
      }
    }

    /* ========== TILT-3D CARDS (subtle perspective tilt on cursor) ========== */
    .tilt-card { transform-style: preserve-3d; transition: transform 380ms var(--ease-bold); will-change: transform; }
    .tilt-card.is-tilting { transition: transform 80ms linear; }
    @media (prefers-reduced-motion: reduce) { .tilt-card { transform: none !important; } }

    /* ========== LETTER-BY-LETTER REVEAL (per-letter slide-up, sharpest motion) ========== */
    .letter-reveal { display: inline-block; }
    .letter-reveal .ltr { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; line-height: 1.12; }
    .letter-reveal .ltr > span { display: inline-block; transition: transform 700ms var(--ease-bold); }
    body.js-ready .letter-reveal .ltr > span { transform: translateY(110%); }
    body.js-ready .letter-reveal.is-visible .ltr > span { transform: translateY(0); }

    /* ========== IMAGE-MASK REVEAL (clip-path wipe on viewport entry) ========== */
    .img-reveal { overflow: hidden; position: relative; }
    .img-reveal img, .img-reveal > .img { transition: transform 1200ms var(--ease-bold), clip-path 1100ms var(--ease-bold); will-change: transform, clip-path; }
    body.js-ready .img-reveal img, body.js-ready .img-reveal > .img { clip-path: inset(0 100% 0 0); transform: scale(1.06); }
    body.js-ready .img-reveal.is-visible img, body.js-ready .img-reveal.is-visible > .img { clip-path: inset(0 0% 0 0); transform: scale(1); }

    /* ========== STAGGER REVEAL (children animate in sequence) ========== */
    .stagger > * { transition: opacity 700ms var(--ease-bold), transform 700ms var(--ease-bold); }
    body.js-ready .stagger > * { opacity: 0; transform: translateY(24px); }
    body.js-ready .stagger.is-visible > * { opacity: 1; transform: translateY(0); }
    .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
    .stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
    .stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
    .stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
    .stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
    .stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
    .stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
    .stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
    @media (prefers-reduced-motion: reduce) { .stagger > * { opacity: 1 !important; transform: none !important; } }

    /* ========== BENTO GRID (asymmetric, premium layout) ========== */
    .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: clamp(14px, 1.8vw, 24px); }
    .bento > * { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; transition: transform 380ms var(--ease-bold), border-color 280ms ease, box-shadow 400ms var(--ease-bold); }
    .bento > *:hover { transform: translateY(-3px); border-color: rgba(17, 24, 39, 0.16); box-shadow: var(--shadow-lg); }
    .bento .b-wide-2 { grid-column: span 2; }
    .bento .b-wide-3 { grid-column: span 3; }
    .bento .b-wide-4 { grid-column: span 4; }
    .bento .b-wide-6 { grid-column: span 6; }
    .bento .b-tall-2 { grid-row: span 2; }
    .bento .b-tall-3 { grid-row: span 3; }
    .bento .b-dark { background: var(--black); color: var(--white); border-color: var(--line-dark); }
    .bento .b-dark:hover { border-color: var(--line-dark-strong); }
    .bento .b-red { background: var(--red); color: var(--white); border-color: transparent; box-shadow: var(--shadow-red); }
    .bento .b-red:hover { background: var(--red-dark); transform: translateY(-5px); box-shadow: var(--shadow-red), 0 22px 44px rgba(207,32,43,0.22); }
    .bento .b-photo { padding: 0; background-size: cover; background-position: center; min-height: 280px; }
    .bento .b-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,11,0.78) 0%, rgba(10,10,11,0.32) 38%, transparent 70%); pointer-events: none; }
    .bento .b-photo > .b-photo-body { position: absolute; inset: 0; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); z-index: 2; }
    @media (max-width: 880px) {
      .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
      .bento > * { padding: 20px 18px; border-radius: var(--r-md); }
      .bento .b-wide-2, .bento .b-wide-3, .bento .b-wide-4 { grid-column: 1; }
      .bento .b-tall-2, .bento .b-tall-3 { grid-row: auto; }
      .bento .b-photo { min-height: 180px; aspect-ratio: 16/10; padding: 0; }
      .bento .b-photo > .b-photo-body { padding: 16px; }
      /* Tighter dark "promise" card on mobile, drop the embedded CTAs since user has hero CTAs + final-cta below */
      .bento .b-dark { padding: 22px 18px; }
      .bento .b-dark h3 { font-size: 22px !important; }
      .bento .b-dark p { font-size: 14px !important; line-height: 1.5 !important; }
      .bento .b-dark .section-marker { margin-bottom: 14px !important; }
      /* Stat cards (red + white) get a 2-col row on narrow mobile, then back to full-width below */
      .bento .b-red, .bento .b-wide-2:not(.b-red) { padding: 18px 16px; }
    }
    @media (max-width: 480px) {
      .bento .b-dark h3 { font-size: 20px !important; }
      .bento .b-photo { min-height: 160px; aspect-ratio: 16/10; }
    }

    /* ========== PREMIUM SCROLL-SNAP CARD CARRIER (mobile-first horizontal scroll) ========== */
    .snap-carrier { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x pan-y; padding: 4px var(--shell-x) 24px; margin: 0 calc(var(--shell-x) * -1); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .snap-carrier::-webkit-scrollbar { display: none; }
    .snap-carrier > * { scroll-snap-align: start; flex: 0 0 78%; min-width: 240px; max-width: 320px; }
    @media (min-width: 880px) { .snap-carrier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0; margin: 0; overflow: visible; } .snap-carrier > * { flex: none; min-width: 0; max-width: none; } }

    /* ========== STICKY SECTION HEADING (heading pins while content scrolls) ========== */
    .sticky-head { position: sticky; top: 96px; align-self: start; }
    @media (max-width: 880px) { .sticky-head { position: static; } }
    @media (max-width: 860px) { .sticky-img-wrap { position: relative; top: auto; } }

    /* ========== HAIRLINE DIVIDER (draws on scroll) ========== */
    .hairline { height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform 1000ms var(--ease-bold); }
    .hairline.is-visible { transform: scaleX(1); }
    .hairline.center { transform-origin: center; }
    .hairline.dark { background: var(--line-dark); }

    /* ========== SECTION MARKER (premium 01 · About style) ========== */
    .section-marker { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
    .section-marker .marker-num { display: none; } /* taste-skill 9.F: section-number eyebrows banned */
    .section-marker::before { content: ""; width: 32px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease-bold); }
    .section-marker.is-visible::before { transform: scaleX(1); }

    /* ========== MORPHING GRADIENT BLOB BACKGROUND (21st.dev pattern, GCJ palette) ========== */
    /* 4 blobs in opposing corners, each with its own organic-radius morph + position drift loop.
       Mix-blend-overlay against a dark base layer makes them feel like molten brand colour beneath the surface. */
    .morph-blob-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: lighten; }
    .morph-blob-bg > span { position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; mix-blend-mode: overlay; filter: blur(1.6rem); will-change: border-radius, transform; opacity: 0.85; }
    .morph-blob-bg > .blob-1 { top: -25%; left: 0;       background: hsl(355 73% 47%); animation: morph-edge 8s ease-in-out infinite, morph-pos-1 16s ease-in-out infinite alternate; }
    .morph-blob-bg > .blob-2 { top: -25%; right: 0;      background: hsl(355 73% 30%); animation: morph-edge 8s ease-in-out 1s infinite, morph-pos-2 16s ease-in-out infinite alternate; }
    .morph-blob-bg > .blob-3 { bottom: -25%; left: 0;    background: hsl(355 84% 18%); animation: morph-edge 8s ease-in-out 2s infinite, morph-pos-3 16s ease-in-out infinite alternate; }
    .morph-blob-bg > .blob-4 { bottom: -25%; right: 0;   background: hsl(0 0% 6%);     animation: morph-edge 8s ease-in-out 3s infinite, morph-pos-4 16s ease-in-out infinite alternate; }
    @keyframes morph-edge {
      0%, 100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; transform: rotate(0deg); }
      25%      { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; transform: rotate(2deg); }
      50%      { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; transform: rotate(-1deg); }
      75%      { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; transform: rotate(3deg); }
    }
    @keyframes morph-pos-1 { 0%, 100% { top: -25%; left: 0; } 50% { top: 30%; left: 18%; } 75% { top: 8%; left: 38%; } }
    @keyframes morph-pos-2 { 0%, 100% { top: -25%; right: 0; } 60% { top: 48%; right: 18%; } 85% { top: 22%; right: 42%; } }
    @keyframes morph-pos-3 { 0%, 100% { bottom: -25%; left: 0; } 40% { bottom: 30%; left: 22%; } 65% { bottom: 8%; left: 44%; } }
    @keyframes morph-pos-4 { 0%, 100% { bottom: -25%; right: 0; } 50% { bottom: 8%; right: 32%; } 90% { bottom: 32%; right: 14%; } }
    @media (prefers-reduced-motion: reduce) { .morph-blob-bg > span { animation: none !important; } }
    /* Smaller word-emphasis version, use behind a single inline emphasis span */
    .morph-word { position: relative; display: inline-flex; padding: 0 0.15em; color: var(--white); font-style: italic; font-weight: 900; isolation: isolate; }
    .morph-word::before { content: ""; position: absolute; inset: -0.2em -0.1em; border-radius: 22% 78% 35% 65% / 60% 40% 60% 40%; background: linear-gradient(135deg, hsl(355 73% 47%), hsl(355 73% 30%) 60%, hsl(0 0% 8%)); z-index: -1; animation: morph-edge 7s ease-in-out infinite; filter: blur(2px); opacity: 0.92; }

    /* ========== ASYMMETRIC EDITORIAL LAYOUT (premium magazine pattern) ========== */
    .editorial-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
    .editorial-grid--flip { grid-template-columns: 7fr 5fr; }
    @media (max-width: 880px) { .editorial-grid, .editorial-grid--flip { grid-template-columns: 1fr; gap: 32px; } }

    /* ========== IMMERSIVE SECTION (mouse-tracked light + grain, premium dark-section treatment) ========== */
    .immersive { position: relative; isolation: isolate; overflow: hidden; }
    .immersive > .imm-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(640px circle at var(--ix, 50%) var(--iy, 30%), rgba(207,32,43,0.14), transparent 52%); opacity: 0.58; transition: opacity 400ms ease; }
    .immersive > .imm-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"); }
    .immersive > .imm-glow { position: absolute; pointer-events: none; z-index: 0; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(207,32,43,0.22), transparent 60%); filter: blur(40px); animation: imGlowDrift 14s ease-in-out infinite; }
    .immersive > .imm-glow.imm-glow-1 { top: -160px; left: -120px; }
    .immersive > .imm-glow.imm-glow-2 { bottom: -180px; right: -100px; width: 600px; height: 600px; animation-delay: -7s; background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 60%); }
    @keyframes imGlowDrift {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(40px, -32px); }
    }
    .immersive > .shell { position: relative; z-index: 2; }
    .immersive > * { position: relative; }

    /* ========== AMBIENT DRIFT (subtle continuous floating motion on small elements) ========== */
    .drift { animation: ambientFloat 7s ease-in-out infinite; }
    .drift-slow { animation: ambientFloat 11s ease-in-out infinite; animation-delay: -3s; }
    @keyframes ambientFloat {
      0%, 100% { transform: translateY(0) translateX(0); }
      50% { transform: translateY(-4px) translateX(2px); }
    }
    @media (prefers-reduced-motion: reduce) { .drift, .drift-slow, .immersive > .imm-glow { animation: none; } }

    /* ========== PROOF CINEMA v2, minimal noise, dominant video, cinematic spotlight ==========
       Strip pills + lede paragraph. Video is the protagonist. Vertical light beam descends onto it.
       Particles drift. One headline. One CTA. Suburb ribbon as ambient floor. */
    .full-bleed { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: hsl(0 0% 4%); isolation: isolate; padding: clamp(60px, 9vw, 130px) 0 clamp(36px, 6vw, 72px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
    /* SHADER-STYLE MESH BACKGROUND, adapted from 21st.dev Paper Shaders (vanilla CSS, GCJ red palette) */
    .full-bleed > .pc-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .full-bleed > .pc-mesh::before, .full-bleed > .pc-mesh::after { content: ""; position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
    .full-bleed > .pc-mesh::before { top: -10%; left: -5%; width: 80%; aspect-ratio: 1; background: radial-gradient(circle, hsl(355 80% 38%) 0%, hsl(355 80% 18%) 40%, transparent 70%); opacity: 0.9; animation: pcMeshDriftA 24s ease-in-out infinite; }
    .full-bleed > .pc-mesh::after { bottom: -15%; right: -10%; width: 90%; aspect-ratio: 1; background: radial-gradient(circle, hsl(0 0% 12%) 0%, hsl(355 60% 14%) 50%, transparent 80%); opacity: 0.85; animation: pcMeshDriftB 30s ease-in-out infinite; }
    .full-bleed > .pc-mesh-2 { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .full-bleed > .pc-mesh-2::before, .full-bleed > .pc-mesh-2::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
    .full-bleed > .pc-mesh-2::before { top: 30%; left: 45%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, hsl(355 90% 50%) 0%, transparent 60%); opacity: 0.42; animation: pcMeshDriftC 18s ease-in-out infinite; }
    .full-bleed > .pc-mesh-2::after { top: 5%; right: 25%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle, hsl(355 50% 10%) 0%, transparent 65%); opacity: 0.6; animation: pcMeshDriftD 26s ease-in-out infinite; }
    @keyframes pcMeshDriftA { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(16%, 24%); } 66% { transform: translate(-12%, 18%); } }
    @keyframes pcMeshDriftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-22%, -16%); } }
    @keyframes pcMeshDriftC { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-28%, -22%); } }
    @keyframes pcMeshDriftD { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18%, 32%); } }
    @media (prefers-reduced-motion: reduce) { .full-bleed > .pc-mesh::before, .full-bleed > .pc-mesh::after, .full-bleed > .pc-mesh-2::before, .full-bleed > .pc-mesh-2::after { animation: none; } }
    .full-bleed > * { position: relative; z-index: 2; }
    /* Ambient mouse light layer */
    .full-bleed > .imm-light { z-index: 1; background: radial-gradient(640px circle at var(--ix, 50%) var(--iy, 40%), rgba(207,32,43,0.22), transparent 55%); opacity: 0.7; }
    .full-bleed > .imm-grain { z-index: 0; opacity: 0.05; }

    /* CINEMATIC STAGE, the video is the protagonist */
    .pc-stage { position: relative; display: grid; place-items: center; padding: clamp(40px, 6vw, 96px) 0 clamp(20px, 3vw, 36px); width: 100%; max-width: 980px; }
    /* Light beam descending from top onto the video, cone of light feel */
    .pc-beam { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: clamp(280px, 56vw, 600px); height: 100%; background: linear-gradient(180deg, rgba(207,32,43,0.32) 0%, rgba(207,32,43,0.18) 30%, rgba(207,32,43,0.04) 70%, transparent 100%); filter: blur(28px); opacity: 0; transition: opacity 1400ms var(--ease-bold) 200ms; clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); pointer-events: none; z-index: 0; }
    .full-bleed.is-on .pc-beam { opacity: 0.85; }
    /* Halo ring behind the video, pulsing red bloom */
    .pc-halo { position: absolute; top: 50%; left: 50%; width: clamp(360px, 60vw, 700px); height: clamp(360px, 60vw, 700px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(207,32,43,0.42), rgba(207,32,43,0.08) 50%, transparent 75%); filter: blur(60px); opacity: 0; transition: opacity 1400ms var(--ease-bold); animation: pcHaloBreathe 7s ease-in-out infinite; z-index: 0; pointer-events: none; }
    .full-bleed.is-on .pc-halo { opacity: 1; }
    @keyframes pcHaloBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }
    /* Floating red particle dust, purely atmospheric */
    .pc-dust { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
    .pc-dust span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--red); opacity: 0; box-shadow: 0 0 8px rgba(207,32,43,0.6); animation: pcDustFloat var(--dur, 14s) linear infinite var(--delay, 0s); }
    @keyframes pcDustFloat {
      0%   { opacity: 0; transform: translate3d(0, 100vh, 0) scale(0.6); }
      8%   { opacity: 0.6; }
      85%  { opacity: 0.6; }
      100% { opacity: 0; transform: translate3d(var(--drift, 30px), -10vh, 0) scale(1); }
    }
    .pc-dust span:nth-child(1)  { left: 12%; --dur: 16s; --delay: -2s;  --drift: 20px; }
    .pc-dust span:nth-child(2)  { left: 26%; --dur: 21s; --delay: -5s;  --drift: -40px; width: 3px; height: 3px; }
    .pc-dust span:nth-child(3)  { left: 38%; --dur: 18s; --delay: -8s;  --drift: 15px; }
    .pc-dust span:nth-child(4)  { left: 48%; --dur: 24s; --delay: -1s;  --drift: -20px; width: 5px; height: 5px; }
    .pc-dust span:nth-child(5)  { left: 58%; --dur: 17s; --delay: -11s; --drift: 35px; }
    .pc-dust span:nth-child(6)  { left: 68%; --dur: 22s; --delay: -3s;  --drift: -25px; width: 3px; height: 3px; }
    .pc-dust span:nth-child(7)  { left: 78%; --dur: 19s; --delay: -7s;  --drift: 18px; }
    .pc-dust span:nth-child(8)  { left: 88%; --dur: 23s; --delay: -10s; --drift: -32px; }
    .pc-dust span:nth-child(9)  { left: 8%;  --dur: 25s; --delay: -14s; --drift: 28px; width: 3px; height: 3px; }
    .pc-dust span:nth-child(10) { left: 92%; --dur: 20s; --delay: -6s;  --drift: -18px; }

    /* THE VIDEO, massive, dominant */
    .full-bleed-video { position: relative; width: clamp(260px, 50vw, 540px); aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; background: var(--black); box-shadow: 0 20px 50px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.14), 0 0 0 10px rgba(207,32,43,0.05), 0 0 140px rgba(207,32,43,0.42); opacity: 0; transform: scale(0.86) translateY(20px); transition: opacity 1400ms var(--ease-bold), transform 1600ms var(--ease-bold); cursor: pointer; z-index: 3; }
    .full-bleed-video.is-visible { opacity: 1; transform: scale(1) translateY(0); }
    .full-bleed-video::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.18); pointer-events: none; }
    .full-bleed-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
    /* Quote-CTA badge, sits on bottom-right of video, invites tap */
    .full-bleed-video .pc-tap-cta { position: absolute; right: 14px; bottom: 14px; padding: 8px 14px 8px 11px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 8px 20px rgba(207,32,43,0.5); opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--ease-bold) 1.4s, transform 700ms var(--ease-bold) 1.4s; pointer-events: none; }
    .full-bleed.is-on .full-bleed-video .pc-tap-cta { opacity: 1; transform: translateY(0); }
    .full-bleed-video .pc-tap-cta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .full-bleed-video .pc-tap-cta .pc-tap-pulse { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--white); box-shadow: 0 0 0 0 rgba(255,255,255,0.6); animation: pcTapPulse 1.8s ease-out infinite; }
    @keyframes pcTapPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); } 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }

    /* Single-line headline, sits below the video */
    .full-bleed-content { text-align: center; padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 48px) 0; max-width: 880px; margin: 0 auto; opacity: 0; transform: translateY(20px); transition: opacity 1100ms var(--ease-bold) 700ms, transform 1100ms var(--ease-bold) 700ms; }
    .full-bleed.is-on .full-bleed-content { opacity: 1; transform: translateY(0); }
    .full-bleed-content h2 { color: var(--white); font-size: clamp(28px, 5.6vw, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; margin: 0 auto; max-width: 18ch; text-shadow: 0 4px 24px rgba(0,0,0,0.55); }
    .full-bleed-content h2 em { color: var(--red); font-style: italic; font-weight: 900; }

    /* CTA, single primary, no secondary noise */
    .pc-ctas { display: inline-flex; gap: 0; justify-content: center; margin-top: clamp(24px, 3.6vw, 36px); }
    .pc-cta-primary { display: inline-flex; align-items: center; gap: 10px; padding: 19px 34px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 900; font-size: 14.5px; letter-spacing: 0.6px; border-radius: var(--r-pill); box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset, 0 16px 40px rgba(0,0,0,0.18), 0 6px 16px rgba(207,32,43,0.24); transition: transform 280ms var(--ease-bold), box-shadow 320ms var(--ease-bold); position: relative; }
    .pc-cta-primary::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: rgba(255,255,255,0.18); filter: blur(14px); z-index: -1; opacity: 0; transition: opacity 320ms ease; }
    .pc-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset, 0 20px 48px rgba(0,0,0,0.18), 0 6px 20px rgba(207,32,43,0.38); }
    .pc-cta-primary:hover::before { opacity: 1; }
    .pc-cta-primary svg { width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 280ms var(--ease-bold); }
    .pc-cta-primary:hover svg { transform: translateX(4px); }

    /* Suburb ribbon, atmospheric floor */
    .pc-suburbs { width: 100vw; margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid rgba(255,255,255,0.07); overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
    .pc-suburbs-track { display: flex; gap: 36px; width: max-content; animation: pcRibbon 42s linear infinite; align-items: center; padding: 4px 0 8px; }
    .pc-suburbs-item { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.55); font-size: clamp(14px, 1.6vw, 19px); font-weight: 800; letter-spacing: -0.005em; white-space: nowrap; }
    .pc-suburbs-item .sep { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--red); opacity: 0.7; flex-shrink: 0; }
    @keyframes pcRibbon { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    @media (prefers-reduced-motion: reduce) {
      .pc-halo, .pc-dust span, .pc-suburbs-track, .full-bleed-video .pc-tap-cta .pc-tap-pulse { animation: none !important; }
      .full-bleed-video, .full-bleed-content, .pc-beam, .pc-halo { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    @media (max-width: 720px) {
      .full-bleed { padding: clamp(48px, 8vw, 88px) 0 clamp(28px, 5vw, 56px); }
      .pc-stage { padding: clamp(28px, 5vw, 56px) var(--shell-x) clamp(12px, 2vw, 24px); }
      .full-bleed-video { width: min(320px, 78vw); border-radius: var(--r-lg); box-shadow: 0 16px 36px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.14), 0 0 100px rgba(207,32,43,0.38); }
      .full-bleed-content h2 { font-size: clamp(26px, 7.5vw, 40px); max-width: 14ch; }
      .pc-beam { width: 90%; }
      .pc-halo { width: 90vw; height: 90vw; }
    }

    /* ========== TRUST ROW, better mobile (chip-grid instead of dot-wrap) ========== */

    /* ========== SCROLLING WORD REVEAL (each word fades from 0.15 → 1 as it crosses center) ========== */
    .word-reveal-section { position: relative; isolation: isolate; padding: var(--space-section-lg) 0; overflow: hidden; background: var(--black); }
    .word-reveal-section .wr-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) saturate(0.8); }
    .word-reveal-section .wr-overlay { position: absolute; inset: 0; z-index: -1; background:
      linear-gradient(180deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.5) 35%, rgba(10,10,11,0.72) 100%),
      radial-gradient(70% 60% at 50% 50%, rgba(207,32,43,0.16), transparent 70%); }
    .word-reveal { font-size: clamp(28px, 4vw, 56px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.14; max-width: 18ch; margin: 0 auto; text-align: center; color: var(--white); text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
    .word-reveal .wr { display: inline-block; opacity: 0.32; transition: opacity 1100ms var(--ease-bold); padding: 0 0.05em; }
    .word-reveal .wr.is-lit { opacity: 1; }
    .word-reveal em { font-style: italic; color: var(--red); font-weight: 900; }
    /* v6: word-reveal CTA — bold standalone button beneath the brand statement */
    .word-reveal-section .wr-cta { display: inline-flex; align-items: center; gap: 14px; margin: clamp(32px, 5vw, 48px) auto 0; padding: 20px 36px; background: var(--red); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 16px 36px rgba(207,32,43,0.5), 0 6px 12px rgba(0,0,0,0.18); transition: transform 240ms var(--ease-bold), box-shadow 320ms var(--ease-bold), background 200ms ease; position: relative; isolation: isolate; }
    .word-reveal-section .wr-cta::before { content: ""; position: absolute; inset: -1px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.32); pointer-events: none; }
    .word-reveal-section .wr-cta svg { transition: transform 280ms var(--ease-bold); flex-shrink: 0; }
    .word-reveal-section .wr-cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 20px 44px rgba(207,32,43,0.55), 0 8px 16px rgba(0,0,0,0.18); }
    .word-reveal-section .wr-cta:hover svg { transform: translateX(4px); }
    .word-reveal-section .shell { display: flex; flex-direction: column; align-items: center; text-align: center; }
    @media (prefers-reduced-motion: reduce) {
      .word-reveal-section .wr-video { display: none; }
      .word-reveal-section { background-image: url('/images/gcj/gcj-10-roof-sji.jpg'); background-size: cover; background-position: center; }
    }

    /* ========== STAT COUNTER WITH ANIMATED BAR ========== */
    .stat-row { padding: var(--space-section-sm) 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .stat-cell { padding: 24px 8px; }
    .stat-num { font-size: clamp(56px, 10vw, 120px); font-weight: 900; font-style: italic; color: var(--ink); letter-spacing: -0.05em; line-height: 0.92; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; margin: 0; }
    .stat-num em { color: var(--red); font-style: italic; display: inline-flex; align-items: baseline; }
    .stat-num .suffix { font-size: 0.5em; font-weight: 900; font-style: italic; color: var(--red); margin-left: 0.05em; letter-spacing: -0.02em; }
    .stat-sub { color: var(--muted); font-weight: 600; font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; max-width: 28ch; }
    .stat-bar { height: 2px; background: var(--line); position: relative; margin: 18px 0 12px; overflow: hidden; }
    .stat-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--red); transition: width 2200ms var(--ease-bold) 200ms; }
    .stat-cell.is-visible .stat-bar::after { width: 100%; }
    .stat-cell.is-visible:nth-child(2) .stat-bar::after { transition-delay: 600ms; }
    .stat-cell.is-visible:nth-child(3) .stat-bar::after { transition-delay: 1000ms; }
    .stat-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); margin: 0; }
    @media (max-width: 720px) {
      .stat-grid { grid-template-columns: 1fr; gap: 0; }
      .stat-cell { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; align-items: center; }
      .stat-cell:last-child { border-bottom: 0; }
      .stat-cell .stat-num { font-size: 48px; grid-row: 1 / 4; align-self: center; line-height: 0.9; text-align: right; }
      .stat-cell .stat-bar { grid-column: 2; margin: 0; height: 2px; }
      .stat-cell .stat-label { grid-column: 2; font-size: 11.5px; letter-spacing: 1.2px; margin-top: 4px; }
      .stat-cell .stat-sub { grid-column: 2; font-size: 11px; margin-top: 2px; max-width: 22ch; }
    }
    @media (max-width: 400px) {
      .stat-cell { grid-template-columns: 78px 1fr; column-gap: 12px; }
      .stat-cell .stat-num { font-size: 42px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal, .reveal-stagger > *, .text-mask > .inner, h2 em.em-draw::after, .word-reveal .wr, .letter-reveal .ltr > span, .img-reveal img, .img-reveal > .img, .hero-title .word > span, .hero-ticker, .hero-eyebrow, .hero-body p, .hero-ctas, .hero-meta {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .hero-bg-slide, .tab-panel { transition: none !important; }
      .hero-bg-slide img { transform: none !important; }
      .full-bleed-video, .full-bleed-content { opacity: 1 !important; transform: none !important; transition: none !important; }
      .stat-bar::after { width: 100% !important; transition: none !important; }
      .ribbon-track { transform: none !important; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }

    /* ========== BUTTONS ========== */
    /* Buttons, UNIFIED 2026-05-27: sentence case (no uppercase) + arrow icon on both primary + secondary for visual parity. Apple/Linear/Stripe register. */
    .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: var(--white); text-decoration: none; font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; padding: 16px 26px; border-radius: var(--r-sm); box-shadow: var(--shadow-red); transition: background 220ms ease, transform 220ms ease, box-shadow 360ms var(--ease-bold); border: 0; cursor: pointer; position: relative; overflow: hidden; }
    .btn-primary::after { content: " →"; display: inline-block; margin-left: 2px; transition: transform 280ms var(--ease-bold); font-weight: 800; }
    .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(207,32,43,0.18), 0 18px 32px rgba(207,32,43,0.28); }
    .btn-primary:hover::after { transform: translateX(4px); }
    .btn-secondary { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; padding: 15px 24px; border-radius: var(--r-sm); border: 1.5px solid rgba(255,255,255,0.32); transition: background 220ms ease, color 220ms ease, transform 220ms ease, border-color 220ms ease; cursor: pointer; }
    .btn-secondary::after { content: " →"; display: inline-block; margin-left: 2px; transition: transform 280ms var(--ease-bold); font-weight: 800; opacity: 0.85; }
    .btn-secondary:hover { background: var(--white); color: var(--pure-dark); border-color: var(--white); transform: translateY(-2px); }
    .btn-secondary:hover::after { transform: translateX(4px); opacity: 1; }

    /* ========== NAVBAR (sticky after hero) ========== */
    .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 16px 0; transition: background 360ms var(--ease), padding 360ms var(--ease), box-shadow 360ms var(--ease); }
    .navbar.is-transparent { padding: 22px 0; }
    .navbar.is-solid { background: rgba(10,10,11,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
    .navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .nav-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-weight: 900; font-size: 15px; letter-spacing: -0.005em; text-shadow: 0 1px 8px rgba(0,0,0,0.55); text-decoration: none; }
    .nav-brand-logo { width: 44px; height: 44px; border-radius: 999px; background: var(--white); padding: 4px; transition: transform 240ms var(--ease); }
    .nav-brand:hover .nav-brand-logo { transform: scale(1.05) rotate(-3deg); }
    .nav-brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 999px; }
    .nav-links { display: flex; gap: 28px; font-weight: 700; font-size: 13px; letter-spacing: 0.4px; }
    .nav-links a { color: rgba(255,255,255,0.88); text-decoration: none; transition: color 200ms ease; position: relative; }
    .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--red); transition: width 280ms var(--ease); }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { width: 100%; }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .nav-phone { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: 0.3px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); transition: background 200ms ease; }
    .nav-phone:hover { background: rgba(255,255,255,0.14); }
    .nav-cta { background: var(--red); color: var(--white); text-decoration: none; font-weight: 700; font-size: 13.5px; letter-spacing: -0.005em; padding: 11px 18px; border-radius: var(--r-sm); transition: background 200ms ease, transform 200ms ease; }
    .nav-cta:hover { background: var(--red-dark); transform: translateY(-1px); }
    /* Mobile hamburger drawer */
    .nav-burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 10px; margin-left: 4px; }
    .nav-burger-icon, .nav-burger-icon::before, .nav-burger-icon::after { content: ""; display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 240ms var(--ease-bold), opacity 200ms ease; }
    .nav-burger-icon { position: relative; }
    .nav-burger-icon::before { position: absolute; top: -7px; }
    .nav-burger-icon::after { position: absolute; top: 7px; }
    body.nav-open .nav-burger-icon { background: transparent; }
    body.nav-open .nav-burger-icon::before { transform: translateY(7px) rotate(45deg); }
    body.nav-open .nav-burger-icon::after { transform: translateY(-7px) rotate(-45deg); }
    .nav-drawer { position: fixed; inset: 0; background: rgba(10,10,11,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 49; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease), visibility 320ms; }
    body.nav-open .nav-drawer { opacity: 1; visibility: visible; }
    .nav-drawer a { color: var(--white); font-size: 28px; font-weight: 900; letter-spacing: -0.01em; text-decoration: none; padding: 8px 12px; transition: color 200ms ease; }
    .nav-drawer a em { color: var(--red); font-style: italic; }
    .nav-drawer a:hover { color: var(--red); }
    .nav-drawer .nav-drawer-meta { margin-top: 24px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.4px; }
    @media (max-width: 880px) {
      .nav-links, .nav-phone, .nav-actions .nav-cta { display: none; }
      .nav-burger { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    }
    /* When the page has scrolled past hero, show a compact phone-icon button instead of "Free quote" CTA in nav */
    .nav-call-icon { display: none; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--red); color: var(--white); align-items: center; justify-content: center; text-decoration: none; border: 0; box-shadow: var(--shadow-red); transition: transform 220ms var(--ease-bold), background 220ms ease; }
    .nav-call-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .nav-call-icon:hover { background: var(--red-dark); transform: translateY(-1px); }
    @media (max-width: 880px) { .nav-call-icon { display: inline-flex; } }

    /* ========== HERO, cinematic, full-bleed, mouse-spotlit, multi-image cross-fade ========== */
    .hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--black); isolation: isolate; }
    .hero-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
    .hero-bg-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1800ms var(--ease); }
    .hero-bg-slide.is-active { opacity: 1; }
    .hero-bg-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 24s linear; will-change: transform; }
    body.is-loaded .hero-bg-slide.is-active img { transform: scale(1.2); }
    .hero-bg-slide.hero-bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); will-change: transform; }
    body.is-loaded .hero-bg-slide.hero-bg-video.is-active video { transform: scale(1.05); transition: transform 18s linear; }
    /* Heavy atmospheric gradient, biased dark to make text always readable but with a dramatic red bloom */
    .hero-overlay { position: absolute; inset: 0; z-index: -2; background:
      radial-gradient(120% 80% at 8% 100%, rgba(207,32,43,0.32), transparent 60%),
      radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,0.06), transparent 70%),
      linear-gradient(180deg, rgba(10,10,11,0.62) 0%, rgba(10,10,11,0.34) 30%, rgba(10,10,11,0.72) 70%, rgba(10,10,11,0.9) 100%); }
    /* Mouse-tracked light spotlight, softer than spot-card, larger, atmospheric */
    .hero-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 800ms var(--ease); background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,0.08), transparent 50%); }
    body.is-loaded .hero-light { opacity: 1; }
    @media (pointer: coarse) { .hero-light { background: radial-gradient(620px circle at 50% 30%, rgba(255,255,255,0.06), transparent 55%); } }
    /* Grain overlay, analog film noise, very subtle, only on dark hero */
    .hero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }
    .hero-body { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: clamp(104px, 14vw, 150px) 0 clamp(44px, 6vw, 70px); gap: clamp(18px, 3vw, 30px); }
    .hero-body > .hero-content { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 1.8vw, 20px); }
    /* Activity ticker, Hormozi-style real-time booking pulse, sits top-of-hero like a status bar */
    .hero-ticker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: rgba(0,0,0,0.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; border-radius: var(--r-pill); width: fit-content; transition: opacity 600ms var(--ease) 200ms, transform 600ms var(--ease) 200ms; box-shadow: 0 8px 18px rgba(0,0,0,0.26), 0 18px 44px rgba(0,0,0,0.22); max-width: calc(100vw - var(--shell-x) * 2 - 4px); }
    body.js-ready .hero-ticker { opacity: 0; transform: translateY(12px); }
    body.is-loaded .hero-ticker { opacity: 1; transform: translateY(0); }
    .hero-ticker .pulse { width: 8px; height: 8px; border-radius: var(--r-pill); background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: pulseDot 2.2s ease-out infinite; flex: 0 0 8px; }
    .hero-ticker .ticker-date { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: rgba(255,255,255,0.7); padding: 2px 6px; background: rgba(255,255,255,0.08); border-radius: 4px; flex-shrink: 0; font-feature-settings: "tnum" 1; }
    @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
    .hero-ticker .ticker-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
    .hero-ticker .ticker-text span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .hero-ticker .ticker-text > * { white-space: nowrap; }
    .hero-ticker .ticker-text .sep { opacity: 0.5; }
    .hero-ticker .ticker-text em { font-style: italic; color: var(--red); font-weight: 900; }
    .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px; background: rgba(10,10,11,0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.2); color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; border-radius: var(--r-pill); width: fit-content; transition: opacity 700ms var(--ease) 360ms, transform 700ms var(--ease) 360ms; box-shadow: 0 6px 16px rgba(0,0,0,0.18), 0 16px 36px rgba(0,0,0,0.22); animation: ambientDrift 9s ease-in-out infinite; animation-play-state: paused; }
    body.js-ready .hero-eyebrow { opacity: 0; transform: translateY(20px); }
    body.is-loaded .hero-eyebrow { opacity: 1; transform: translateY(0); animation-play-state: running; }
    @keyframes ambientDrift { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-3px) translateX(2px); } }
    .hero-title { color: var(--white); font-weight: 900; font-size: clamp(44px, 9.5vw, 112px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 14ch; text-shadow: 0 4px 24px rgba(0,0,0,0.3); }
    @media (min-width: 720px) { .hero-title { max-width: 18ch; } }
    .hero-title .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.14em; line-height: 0.98; }
    .hero-title .word > span { display: inline-block; transition: transform 1300ms var(--ease-bold); }
    body.js-ready .hero-title .word > span { transform: translateY(110%); }
    body.is-loaded .hero-title .word > span { transform: translateY(0); }
    .hero-title .word:nth-child(1) > span { transition-delay: 500ms; }
    .hero-title .word:nth-child(2) > span { transition-delay: 720ms; }
    .hero-title .word:nth-child(3) > span { transition-delay: 940ms; }
    /* Subtitle merged into bottom-meta row, no separate red Granite City Jetters label */
    .hero-body p { color: rgba(255,255,255,0.92); font-size: clamp(16px, 1.8vw, 21px); line-height: 1.55; max-width: 540px; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.5); transition: opacity 700ms var(--ease) 1.4s, transform 700ms var(--ease) 1.4s; font-weight: 500; }
    body.js-ready .hero-body p { opacity: 0; transform: translateY(20px); }
    body.is-loaded .hero-body p { opacity: 1; transform: translateY(0); }
    .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; transition: opacity 900ms var(--ease) 1.6s, transform 900ms var(--ease) 1.6s; }
    body.js-ready .hero-ctas { opacity: 0; transform: translateY(20px); }
    body.is-loaded .hero-ctas { opacity: 1; transform: translateY(0); }
    /* Hero primary, solid red pill, layered shadow + breathing glow halo (no conic spinner) */
    .hero-ctas .btn-primary { position: relative; padding: 19px 32px; font-size: 14.5px; letter-spacing: 0.6px; background: var(--red); color: var(--white); border-radius: var(--r-pill); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 28px rgba(207,32,43,0.42), 0 4px 8px rgba(207,32,43,0.18); transition: transform 280ms var(--ease-bold), box-shadow 320ms var(--ease-bold), background 220ms ease; display: inline-flex; align-items: center; gap: 8px; }
    .hero-ctas .btn-primary::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--red); opacity: 0; z-index: -1; filter: blur(14px); animation: heroBtnHalo 3.6s ease-in-out infinite; }
    .hero-ctas .btn-primary::after { content: ""; width: 16px; height: 12px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>') center / contain no-repeat; transition: transform 320ms var(--ease-bold); }
    .hero-ctas .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 16px 36px rgba(207,32,43,0.5), 0 4px 8px rgba(207,32,43,0.22); }
    .hero-ctas .btn-primary:hover::after { transform: translateX(4px); }
    @keyframes heroBtnHalo { 0%, 100% { opacity: 0.22; transform: scale(1); } 50% { opacity: 0.42; transform: scale(1.06); } }
    @media (prefers-reduced-motion: reduce) { .hero-ctas .btn-primary::before { animation: none; opacity: 0.32; } }
    /* Hero secondary, restrained outlined ghost on glass, no decoration, just confidence */
    .hero-ctas .btn-secondary { position: relative; color: var(--white); border: 1.5px solid rgba(255,255,255,0.48); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,0.06); padding: 17.5px 28px; font-size: 14.5px; letter-spacing: 0.6px; border-radius: var(--r-pill); transition: background 280ms ease, color 280ms ease, border-color 280ms ease, transform 220ms var(--ease-bold); }
    .hero-ctas .btn-secondary:hover { background: var(--white); color: var(--pure-dark); border-color: var(--white); transform: translateY(-2px); }
    /* Hero meta bar, bottom row with operator credit + image-slide indicator */
    .hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: clamp(16px, 2.4vw, 28px); border-top: 1px solid rgba(255,255,255,0.12); transition: opacity 700ms var(--ease) 1.8s, transform 700ms var(--ease) 1.8s; }
    body.js-ready .hero-meta { opacity: 0; transform: translateY(12px); }
    body.is-loaded .hero-meta { opacity: 1; transform: translateY(0); }
    .hero-meta-operator { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.86); font-size: 13px; font-weight: 700; }
    .hero-meta-operator strong { color: var(--white); font-weight: 900; }
    .hero-meta-operator em { color: var(--red); font-style: italic; font-weight: 900; }
    .hero-meta-operator .avatar { width: 36px; height: 36px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--red), var(--red-dark)); display: flex; align-items: center; justify-content: center; font-style: italic; font-weight: 900; color: var(--white); font-size: 14px; box-shadow: 0 4px 12px rgba(207,32,43,0.32), 0 0 0 3px rgba(255,255,255,0.08); }
    .hero-slide-dots { display: inline-flex; align-items: center; gap: 0; margin: -14px; }
    .hero-slide-dot { width: 44px; height: 44px; background: transparent; border-radius: var(--r-sm); transition: background 260ms ease; cursor: pointer; border: 0; padding: 0; position: relative; }
    .hero-slide-dot::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; transform: translateY(-50%); background: rgba(255,255,255,0.24); border-radius: var(--r-xs); transition: background 360ms ease, left 360ms var(--ease-bold), right 360ms var(--ease-bold); }
    .hero-slide-dot.is-active::before { background: var(--red); left: 4px; right: 4px; }
    /* Scroll cue */
    .hero-scroll { position: absolute; bottom: clamp(16px, 3vw, 32px); left: 50%; transform: translateX(-50%); z-index: 5; color: rgba(255,255,255,0.92); text-align: center; pointer-events: none; transition: opacity 700ms var(--ease) 2.2s; }
    body.js-ready .hero-scroll { opacity: 0; }
    body.is-loaded .hero-scroll { opacity: 1; }
    .hero-scroll-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 10px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
    .hero-scroll-line { width: 1px; height: 32px; background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent); margin: 0 auto; position: relative; overflow: hidden; }
    .hero-scroll-line::after { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 12px; background: linear-gradient(180deg, transparent, rgba(255,255,255,1)); animation: scrollLine 2.4s ease-in-out infinite; }
    @keyframes scrollLine { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(48px); opacity: 0; } }
    @media (max-width: 640px) { .hero-scroll { display: none; } }
    /* Mobile-specific hero refinements, CENTRED composition + bigger value-prop credibility row */
    @media (max-width: 720px) {
      .hero-body { min-height: 100svh; padding: clamp(78px, 19vw, 100px) 0 clamp(22px, 5vw, 36px); gap: 14px; text-align: center; min-width: 0; overflow: hidden; }
      .hero-body > .hero-content { justify-content: center; align-items: center; gap: 14px; text-align: center; width: 100%; min-width: 0; max-width: 100%; }
      .hero-body > .hero-content > * { min-width: 0; max-width: 100%; }
      .hero-title { font-size: clamp(36px, 10.8vw, 50px); line-height: 1.02; max-width: min(100%, 16ch); margin-left: auto; margin-right: auto; width: auto; }
      /* Force each H1 word onto its own line so the fixed-width rotating word doesn't pull layout off-centre */
      .hero-title .word { display: block; text-align: center; margin-left: auto; margin-right: auto; overflow: visible; padding-bottom: 0.18em; }
      .hero-title .word > span { display: inline-block; }
      /* Drop fixed width on mobile, let rot-word size naturally to the current word so "Driveway" doesn't clip */
      .hero-title .rot-word { width: auto !important; max-width: 100%; }
      .hero-body p { font-size: 15px; line-height: 1.5; max-width: 32ch; margin-left: auto; margin-right: auto; }
      .hero-ticker { font-size: 11.5px; padding: 7px 11px 7px 9px; margin-left: auto; margin-right: auto; }
      .hero-eyebrow { display: none; }
      .hero-ctas { gap: 10px; justify-content: center; width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap; box-sizing: border-box; }
      .hero-ctas .btn-primary, .hero-ctas .btn-secondary { padding: 14px 14px; font-size: 12.5px; flex: 1 1 0; min-width: 0; max-width: calc(50% - 5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.3px; }
      .hero-ctas .btn-primary { gap: 6px; }
      .hero-ctas .btn-primary::after { width: 13px; height: 10px; }
      .hero-ctas .btn-primary::before { display: none; }
      .hero-meta { justify-content: center; gap: 12px; padding-top: 14px; }
      .hero-meta-operator { display: none; }
      .hero-slide-dots { margin: 0; }
    }
    @media (max-width: 380px) {
      .hero-title { font-size: clamp(34px, 10vw, 38px); max-width: 12ch; }
      .hero-body p { font-size: 14.5px; }
    }

    /* ========== TRUST PILL ========== */
    /* ========== TRUST STRIP, icon-led value props, premium card row ========== */
    .trust-row { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(20px, 2.4vw, 32px) 0; }
    .trust-row .shell { padding: 0; }
    .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 18px); }
    .trust-cell { display: flex; align-items: center; gap: 12px; padding: clamp(10px, 1.4vw, 16px) clamp(8px, 1.4vw, 16px); border-radius: var(--r-md); transition: background 240ms ease, transform 280ms var(--ease-bold); }
    .trust-cell:hover { background: var(--paper); transform: translateY(-2px); }
    .trust-cell-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--red-light); color: var(--red); display: grid; place-items: center; font-style: italic; font-weight: 900; font-size: 15px; line-height: 1; font-feature-settings: "tnum"; }
    .trust-cell-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .trust-cell-body { min-width: 0; }
    .trust-cell-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
    .trust-cell-value { display: block; font-size: 14px; font-weight: 900; color: var(--ink); letter-spacing: -0.005em; line-height: 1.2; margin-top: 2px; }
    .trust-cell-value em { color: var(--red); font-style: italic; font-weight: 900; }
    @media (max-width: 720px) {
      .trust-row { padding: 16px 0; }
      .trust-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
      .trust-cell { padding: 8px 6px; gap: 10px; }
      .trust-cell-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 13px; }
      .trust-cell-icon svg { width: 16px; height: 16px; }
      .trust-cell-label { font-size: 9.5px; letter-spacing: 1.1px; }
      .trust-cell-value { font-size: 12.5px; }
    }
    /* trust-row-inner legacy rules retained, overridden by .trust-grid above */

    /* ========== ABOUT US ========== */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 32px; }
    .about-text p { color: var(--ink); font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.7; margin: 0 0 18px; }
    .about-img-wrap { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
    @media (max-width: 720px) { .about-img-wrap { aspect-ratio: 16/10; border-radius: var(--r-md); } }
    .about-img-wrap:not(.sticky-img-wrap) { position: relative; }
    .about-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); display: block; }
    .about-img-wrap:hover .about-img { transform: scale(1.02); }
    .about-video { transform: scale(1.02); }
    .about-video-wrap.is-playing .about-video { transform: scale(1.06); transition: transform 14s linear; }
    @media (prefers-reduced-motion: reduce) {
      .about-video-wrap.is-playing .about-video { transform: scale(1.02); transition: none; }
    }
    .about-img-tag { position: absolute; bottom: 16px; left: 16px; padding: 8px 14px; background: rgba(10,10,11,0.78); backdrop-filter: blur(8px); color: var(--white); font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; }
    .about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(40px, 5vw, 64px); }
    .about-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.4vw, 32px); box-shadow: var(--shadow-sm); transition: transform 380ms var(--ease-bold), border-color 280ms ease, box-shadow 400ms var(--ease-bold); display: flex; flex-direction: column; gap: 14px; }
    .about-card:hover { transform: translateY(-2px); border-color: rgba(17, 24, 39, 0.16); box-shadow: var(--shadow-md); }
    .about-card-num { font-size: 12px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--red); }
    .about-card h3 { font-size: 22px; font-weight: 900; letter-spacing: -0.015em; }
    .about-card p { color: var(--muted); font-weight: 600; font-size: 14.5px; line-height: 1.6; }
    .about-card-cta { margin-top: auto; font-size: 13px; font-weight: 800; letter-spacing: -0.005em; color: var(--red); text-decoration: none; padding-top: 8px; transition: gap 200ms var(--ease); }
    .about-card-cta::after { content: " →"; display: inline-block; transition: transform 240ms var(--ease-bold); margin-left: 2px; }
    .about-card-cta:hover::after { transform: translateX(3px); }
    .about-card-cta::after { content: " →"; display: inline-block; transition: transform 200ms var(--ease); }
    .about-card:hover .about-card-cta::after { transform: translateX(4px); }
    @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } }
    /* About cards hidden on mobile, same content surfaces in the Services snap-carousel + Bento sections below */
    @media (max-width: 720px) { .about-cards { display: none; } }

    /* ========== SOLUTIONS (dark) ========== */
    .solutions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 32px; }
    .solutions-img-wrap { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.24), 0 24px 48px rgba(0,0,0,0.18); position: relative; }
    @media (max-width: 720px) { .solutions-img-wrap { aspect-ratio: 16/10; border-radius: var(--r-md); } .solutions-item { padding: 16px 18px; } .solutions-item h4 { font-size: 15px; } .solutions-item p { font-size: 13px; line-height: 1.5; } }
    .solutions-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
    .solutions-img-wrap:hover .solutions-img { transform: scale(1.04); }
    .solutions-list { display: grid; gap: 14px; }
    .solutions-item { position: relative; padding: 20px 22px 20px 70px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md); transition: background 240ms ease, transform 300ms var(--ease-bold), border-color 240ms ease; }
    .solutions-item:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); transform: translateY(-2px); }
    .solutions-item:hover .solutions-item-icon { background: var(--red); color: var(--white); border-color: var(--red); }
    .solutions-item h4 { color: var(--white); font-weight: 900; font-size: 17px; margin: 0 0 6px; letter-spacing: -0.005em; }
    .solutions-item h4 em { color: var(--red); font-style: italic; font-weight: 900; }
    .solutions-item p { color: rgba(255,255,255,0.72); font-weight: 600; font-size: 14.5px; line-height: 1.55; margin: 0; }
    .solutions-item-icon { position: absolute; top: 18px; left: 18px; width: 38px; height: 38px; border-radius: var(--r-pill); background: rgba(207,32,43,0.18); border: 1px solid rgba(207,32,43,0.32); color: var(--red); display: grid; place-items: center; transition: background 240ms ease, color 240ms ease, border-color 240ms ease; }
    .solutions-item-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    @media (max-width: 720px) { .solutions-item { padding: 14px 16px 14px 60px; } .solutions-item-icon { width: 34px; height: 34px; top: 14px; left: 14px; } .solutions-item-icon svg { width: 16px; height: 16px; } }
    @media (max-width: 860px) { .solutions-grid { grid-template-columns: 1fr; } }

    /* ========== SERVICES with photo hover-zoom ========== */
    .services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 56px); }
    @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px) {
      .services-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: visible;
        /* PROXIMITY (not mandatory), softer snap so taps near the boundary don't fight the scroll engine */
        scroll-snap-type: x proximity;
        padding: 8px var(--shell-x) 32px;
        margin: clamp(28px, 4vw, 40px) calc(var(--shell-x) * -1) 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
      }
      .services-grid::-webkit-scrollbar { display: none; }
      .services-grid > * {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        scroll-margin-inline-start: var(--shell-x);
        flex: 0 0 84%;
        min-width: 240px;
        max-width: 320px;
        /* Lighter tap-press feedback, no full 0.97 scale that fights scroll-snap recalculation */
        transition: transform 200ms var(--ease-bold), border-color 280ms ease, box-shadow 400ms var(--ease-bold);
      }
      .services-grid > .service-card:active { transform: scale(0.99); transition-duration: 100ms; }
      /* Last card needs trailing space so it can scroll fully into the snap zone */
      .services-grid > *:last-child { margin-right: var(--shell-x); }
    }
    .service-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 380ms var(--ease-bold), border-color 280ms ease, box-shadow 400ms var(--ease-bold); display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
    .service-card:hover { transform: translateY(-2px); border-color: rgba(17, 24, 39, 0.16); box-shadow: var(--shadow-md); }
    .service-card-img-wrap { aspect-ratio: 4/3; overflow: hidden; position: relative; }
    .service-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--ease); }
    .service-card:hover .service-card-img { transform: scale(1.03); }
    .service-card-img-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,10,11,0.5)); pointer-events: none; }
    /* Ensure service-card anchor receives clicks reliably, defensively raise it above any decorative pseudo */
    a.service-card { position: relative; z-index: 1; }
    a.service-card * { pointer-events: none; }
    a.service-card { -webkit-tap-highlight-color: rgba(207,32,43,0.2); }
    a.service-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
    .service-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .service-card-body h3 { font-size: 18px; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
    .service-card-body p { color: var(--muted); font-weight: 600; font-size: 13.5px; line-height: 1.55; flex: 1; }
    .service-card-label { font-size: 11.5px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: var(--red); }
    .service-card-link { font-size: 12px; font-weight: 900; letter-spacing: 0.4px; color: var(--ink); padding-top: 10px; border-top: 1px solid var(--line); transition: color 200ms ease; }
    .service-card-link::after { content: " →"; color: var(--red); display: inline-block; transition: transform 200ms var(--ease); }
    .service-card:hover .service-card-link::after { transform: translateX(4px); }
    @media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 720px) { .services-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .services-grid { grid-template-columns: 1fr; } }

    /* ========== BEFORE/AFTER SLIDER (drag) ========== */
    /* Pass 5: removed background: var(--black) override so .section.white wins. BA section is now white per the page rhythm spec. */
    .ba-section { padding: clamp(56px, 8vw, 96px) 0; }
    .ba-section.section.dark { background: linear-gradient(rgba(6,7,9,0.62), rgba(6,7,9,0.74)), url(/images/gcj/tex/spray-red-v1.webp) center/cover no-repeat, var(--black); }
    .ba-section .ba-slider { background: var(--black); }
    .ba-slider { position: relative; max-width: 100%; aspect-ratio: 16/9; background: var(--black); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.16); touch-action: none; isolation: isolate; contain: layout paint; user-select: none; margin-top: 36px; cursor: ew-resize; }
    .ba-slider.is-smoothing { transition: none; }
    .ba-slider.is-smoothing .ba-line, .ba-slider.is-smoothing .ba-handle, .ba-slider.is-smoothing .ba-after { transition: left 700ms cubic-bezier(0.16, 1, 0.3, 1), clip-path 700ms cubic-bezier(0.16, 1, 0.3, 1); }
    .ba-panel { position: absolute; inset: 0; }
    .ba-panel img { width: 100%; height: 100%; object-fit: cover; }
    .ba-after { clip-path: inset(0 0 0 var(--split, 60%)); }
    .ba-line { position: absolute; top: 0; bottom: 0; left: var(--split, 60%); width: 2px; background: var(--white); transform: translateX(-1px); z-index: 5; pointer-events: none; box-shadow: 0 0 16px rgba(255,255,255,0.4); }
    .ba-handle { position: absolute; top: 50%; left: var(--split, 60%); transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 999px; border: 2px solid var(--white); background: var(--red); color: var(--white); cursor: ew-resize; z-index: 6; display: grid; place-items: center; box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 0 0 8px rgba(207,32,43,0.18); transition: transform 240ms var(--ease-bold), box-shadow 240ms var(--ease); }
    .ba-handle:hover, .ba-handle.is-dragging { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 14px 36px rgba(0,0,0,0.18), 0 0 0 12px rgba(207,32,43,0.22); }
    .ba-handle svg { width: 22px; height: 22px; fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .ba-label { position: absolute; top: 16px; z-index: 4; padding: 8px 14px; background: rgba(10,10,11,0.85); border: 1px solid rgba(255,255,255,0.28); color: var(--white); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.4px; border-radius: 999px; pointer-events: none; }
    .ba-label.before { left: 16px; }
    .ba-label.after { right: 16px; }
    .ba-meta { display: flex; justify-content: space-between; margin-top: 18px; color: rgba(255,255,255,0.7); font-size: 13.5px; font-weight: 700; flex-wrap: wrap; gap: 14px; }
    .ba-meta strong { color: var(--white); }

    /* ========== SPOTLESS ========== */
    .spotless-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(20px, 3vw, 32px); }
    .spotless-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .spotless-stat { position: relative; padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: transform 280ms var(--ease-bold), box-shadow 320ms var(--ease-bold), border-color 240ms ease; display: flex; flex-direction: column; gap: 4px; }
    .spotless-stat:hover { transform: translateY(-3px); border-color: rgba(207,32,43,0.24); box-shadow: var(--shadow-md); }
    .spotless-stat-icon { width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--red-light); color: var(--red); display: grid; place-items: center; margin-bottom: 12px; transition: background 240ms ease, color 240ms ease; }
    .spotless-stat-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .spotless-stat:hover .spotless-stat-icon { background: var(--red); color: var(--white); }
    .spotless-stat-num { font-size: clamp(40px, 5vw, 64px); font-weight: 900; color: var(--red); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; font-style: italic; }
    .spotless-stat-num .suffix { color: var(--ink); font-size: 0.7em; margin-left: 2px; font-style: italic; }
    .spotless-stat-label { color: var(--ink); font-weight: 900; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 10px; }
    .spotless-stat-desc { color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 4px; line-height: 1.5; }
    @media (max-width: 720px) { .spotless-stat { padding: 16px; } .spotless-stat-icon { width: 32px; height: 32px; margin-bottom: 8px; } .spotless-stat-icon svg { width: 16px; height: 16px; } .spotless-stat-num { font-size: 38px; } .spotless-stat-label { font-size: 11px; margin-top: 8px; } .spotless-stat-desc { font-size: 12px; } }
    .spotless-img-wrap { aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
    @media (max-width: 720px) { .spotless-img-wrap { aspect-ratio: 16/10; border-radius: var(--r-md); } }
    .spotless-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
    .spotless-img-wrap:hover .spotless-img { transform: scale(1.02); }
    @media (max-width: 860px) { .spotless-grid { grid-template-columns: 1fr; } .spotless-stats { grid-template-columns: 1fr 1fr; } }

    /* ========== CTA BANNER ========== */
    .cta-banner { background: linear-gradient(135deg, hsl(355 73% 22%) 0%, hsl(0 0% 6%) 100%); color: var(--white); padding: clamp(56px, 8vw, 112px) 0; text-align: center; position: relative; overflow: hidden; isolation: isolate; }
    .cta-banner .morph-blob-bg { z-index: 0; }
    .cta-banner > .shell { position: relative; z-index: 2; }
    .cta-banner::before { content: ""; position: absolute; top: -50px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 65%); pointer-events: none; }
    .cta-banner::after { content: ""; position: absolute; bottom: -100px; left: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 65%); pointer-events: none; }
    .cta-banner h2 { color: var(--white); margin: 0 auto 18px; max-width: 18ch; position: relative; z-index: 2; text-shadow: 0 4px 24px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.45); }
    .cta-banner h2 em { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.65); text-underline-offset: 8px; text-decoration-thickness: 3px; font-style: italic; }
    .cta-banner p { color: rgba(255,255,255,0.95); font-size: clamp(15px, 1.7vw, 18px); font-weight: 600; max-width: 32ch; margin: 0 auto 28px; line-height: 1.55; position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
    .cta-banner .btn-primary { background: var(--surface); color: var(--ink); box-shadow: 0 8px 16px rgba(0,0,0,0.24), 0 18px 38px rgba(0,0,0,0.18); position: relative; z-index: 2; }
    .cta-banner .btn-primary:hover { background: var(--cream); transform: translateY(-2px); box-shadow: 0 10px 18px rgba(0,0,0,0.28), 0 22px 44px rgba(0,0,0,0.18); }

    /* ========== GALLERY with lightbox ========== */
    .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px; }
    .gallery-item { aspect-ratio: 1; border-radius: var(--r-sm); cursor: pointer; position: relative; overflow: hidden; transition: transform 320ms var(--ease); background: var(--black-2); }
    .gallery-item:hover { transform: translateY(-3px); }
    .gallery-img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
    .gallery-item:hover .gallery-img { transform: scale(1.03); }
    .gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,10,11,0.78)); opacity: 0; transition: opacity 320ms var(--ease); pointer-events: none; }
    .gallery-item:hover::after { opacity: 1; }
    .gallery-tag { position: absolute; bottom: 12px; left: 12px; color: var(--white); font-size: 11px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease) 80ms, transform 320ms var(--ease) 80ms; z-index: 2; pointer-events: none; }
    .gallery-item:hover .gallery-tag { opacity: 1; transform: translateY(0); }
    .gallery-zoom { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px; background: rgba(10,10,11,0.7); backdrop-filter: blur(8px); display: grid; place-items: center; opacity: 0; transition: opacity 320ms var(--ease); z-index: 2; pointer-events: none; }
    .gallery-zoom svg { width: 14px; height: 14px; stroke: var(--white); fill: none; stroke-width: 2; stroke-linecap: round; }
    .gallery-item:hover .gallery-zoom { opacity: 1; }
    .gallery-actions { margin-top: clamp(28px, 4vw, 48px); text-align: center; }
    .gallery-cta { padding: 18px 32px; font-size: 14.5px; }
    @media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

    .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 300ms var(--ease); }
    .lightbox.is-open { display: flex; opacity: 1; }
    .lightbox-img-wrap { max-width: 96vw; max-height: 86vh; border-radius: var(--r-md); overflow: hidden; }
    .lightbox-img { max-width: 96vw; max-height: 86vh; object-fit: contain; display: block; }
    .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); color: var(--white); border-radius: 999px; cursor: pointer; display: grid; place-items: center; transition: background 200ms ease, transform 200ms ease; }
    .lightbox-close { top: 24px; right: 24px; width: 48px; height: 48px; font-size: 20px; font-weight: 900; }
    .lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 24px; font-weight: 900; }
    .lightbox-prev { left: 24px; }
    .lightbox-next { right: 24px; }
    .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--red); border-color: var(--red); }
    .lightbox-caption { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.85); font-weight: 700; font-size: 13.5px; letter-spacing: 0.6px; }
    @media (max-width: 760px) { .lightbox-prev, .lightbox-next { width: 44px; height: 44px; } .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; } }

    /* ========== FEATURES ========== */
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
    .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-sm); transition: transform 380ms var(--ease-bold), border-color 280ms ease, box-shadow 400ms var(--ease-bold); }
    .feature-card:hover { transform: translateY(-2px); border-color: rgba(17, 24, 39, 0.16); box-shadow: var(--shadow-md); }
    .feature-icon { width: 56px; height: 56px; background: var(--red-light); color: var(--red); border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 18px; }
    .feature-card h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.015em; line-height: 1.15; }
    .feature-card p { color: var(--muted); font-weight: 600; font-size: 14.5px; line-height: 1.6; flex: 1; }
    .feature-card-link { font-size: 12px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: var(--red); text-decoration: none; }
    .feature-card-link::after { content: " →"; display: inline-block; transition: transform 200ms var(--ease); }
    .feature-card:hover .feature-card-link::after { transform: translateX(4px); }
    @media (max-width: 860px) { .features-grid { grid-template-columns: 1fr; } }

    /* ========== FAQ, premium accordion (replaces browser <details>) ========== */
    .faq-list { display: grid; gap: 10px; margin-top: clamp(28px, 4vw, 48px); }
    .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color 220ms ease, box-shadow 280ms var(--ease-bold); overflow: hidden; }
    .faq-item.is-open { border-color: rgba(207,32,43,0.32); box-shadow: var(--shadow-md); }
    .faq-q { width: 100%; background: transparent; border: 0; padding: 18px 22px; cursor: pointer; font-family: var(--font); font-weight: 900; font-size: clamp(15px, 1.6vw, 17px); letter-spacing: -0.005em; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; line-height: 1.4; }
    .faq-q em { color: var(--red); font-style: italic; font-weight: 900; }
    .faq-q-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--red-light); color: var(--red); display: grid; place-items: center; position: relative; transition: background 240ms ease, color 240ms ease, transform 320ms var(--ease-bold); }
    .faq-q-icon::before, .faq-q-icon::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; transition: transform 320ms var(--ease-bold), opacity 200ms ease; }
    .faq-q-icon::before { width: 12px; height: 2px; }
    .faq-q-icon::after { width: 2px; height: 12px; }
    .faq-item.is-open .faq-q-icon { background: var(--red); color: var(--white); transform: rotate(90deg); }
    .faq-item.is-open .faq-q-icon::after { transform: scaleY(0); opacity: 0; }
    /* Modern accordion pattern, grid-template-rows interpolation, no JS height measurement needed */
    .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-bold); }
    .faq-a > .faq-a-inner { overflow: hidden; min-height: 0; padding: 0 22px; color: var(--muted); font-weight: 600; font-size: clamp(13.5px, 1.5vw, 15px); line-height: 1.65; transition: padding 420ms var(--ease-bold); }
    .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
    .faq-item.is-open .faq-a > .faq-a-inner { padding: 0 22px 22px; }
    .faq-a-inner em { color: var(--red); font-style: italic; font-weight: 900; }
    /* Fallback for browsers without grid-template-rows interpolation (Safari <17, Chrome <117) */
    @supports not (grid-template-rows: 0fr) {
      .faq-a { display: block; max-height: 0; overflow: hidden; transition: max-height 420ms var(--ease-bold); }
      .faq-item.is-open .faq-a { max-height: 600px; }
    }
    @media (max-width: 720px) { .faq-q { padding: 14px 16px; font-size: 14px; gap: 12px; } .faq-q-icon { width: 28px; height: 28px; flex-basis: 28px; } .faq-q-icon::before { width: 10px; } .faq-q-icon::after { height: 10px; } .faq-a-inner { padding: 0 16px 16px; } }

    /* ========== FINAL CTA ========== */
    /* ========== FINAL CTA, full-bleed roof image background + embedded quiz form ========== */
    .final-cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); text-align: center; background: linear-gradient(rgba(6,7,9,0.7), rgba(6,7,9,0.8)), url(/images/gcj/tex/droplets-red-v1.webp) center/cover no-repeat, var(--black); }
    .final-cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: url('/images/gcj/gcj-roof-4.jpg'); background-size: cover; background-position: center 30%; transform: scale(1.04); }
    .final-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
      linear-gradient(180deg, rgba(10,10,11,0.78) 0%, rgba(10,10,11,0.62) 30%, rgba(10,10,11,0.82) 80%, rgba(10,10,11,0.94) 100%),
      radial-gradient(60% 50% at 50% 30%, rgba(207,32,43,0.18), transparent 70%); }
    .final-cta .shell { position: relative; z-index: 2; }
    .final-cta .eyebrow { color: var(--white); margin: 0 auto 14px; padding: 7px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-pill); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; letter-spacing: 1.4px; }
    .final-cta h2 { color: var(--white); margin: 0 auto 14px; max-width: 18ch; text-shadow: 0 4px 24px rgba(0,0,0,0.5); }
    .final-cta h2 em { color: var(--red); }
    .final-cta > .shell > p { color: rgba(255,255,255,0.85); font-size: clamp(15px, 1.7vw, 18px); margin: 0 auto clamp(28px, 4vw, 40px); max-width: 32ch; text-shadow: 0 1px 6px rgba(0,0,0,0.4); font-weight: 500; }
    /* The split-grid final CTA nests its lede <p> under .fcta-copy, so the direct-child rule above misses it; force light-on-dark here too. */
    .final-cta .fcta-copy > p { color: rgba(255,255,255,0.85); font-size: clamp(15px, 1.7vw, 18px); margin: 0 auto clamp(20px, 3vw, 28px); max-width: 40ch; text-shadow: 0 1px 6px rgba(0,0,0,0.4); font-weight: 500; }
    .final-cta-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: clamp(36px, 5vw, 56px); }
    .final-cta-actions .btn-secondary { color: var(--white); border-color: rgba(255,255,255,0.42); background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .final-cta-actions .btn-secondary:hover { background: var(--white); color: var(--pure-dark); border-color: var(--white); }
    /* Quiz form embed card, premium framed container with the live qualifier inside */
    .quiz-embed { position: relative; max-width: 720px; margin: 0 auto; background: var(--surface); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(207,32,43,0.18); }
    .quiz-embed .quiz-frame-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--black); color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .quiz-embed .quiz-frame-label .pulse { width: 8px; height: 8px; border-radius: var(--r-pill); background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: pulseDot 2.2s ease-out infinite; }
    .quiz-embed .quiz-frame-label .frame-trail { display: inline-flex; align-items: center; gap: 8px; }
    .quiz-embed .quiz-frame-label .frame-trail em { color: var(--red); font-style: italic; font-weight: 900; }
    .quiz-embed .quiz-frame-label .meta { color: rgba(255,255,255,0.5); font-weight: 700; letter-spacing: 0.4px; text-transform: none; font-size: 11.5px; }
    .quiz-embed iframe { display: block; width: 100%; height: clamp(560px, 70vh, 720px); border: 0; background: var(--surface); }
    .quiz-embed-or { display: flex; align-items: center; gap: 14px; margin: clamp(28px, 4vw, 40px) auto 0; max-width: 320px; color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
    .quiz-embed-or::before, .quiz-embed-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.18); }

    /* ========== QZIN, inline 4-step Hormozi-style quote form ========== */
    .qzin { position: relative; max-width: 640px; margin: 0 auto; background: var(--surface); color: var(--ink); border-radius: var(--r-xl); padding: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(207,32,43,0.16); text-align: left; overflow: hidden; }
    .qzin-progress { height: 3px; background: rgba(17,24,39,0.06); }
    .qzin-progress-bar { height: 100%; width: 25%; background: var(--red); transition: width 420ms var(--ease-bold); }
    .qzin-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 0; gap: 12px; }
    .qzin-step-label { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
    .qzin-time { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
    .qzin-time .pulse { width: 6px; height: 6px; border-radius: 999px; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: pulseDot 2.2s ease-out infinite; }
    .qzin-step { padding: 18px 22px 22px; }
    .qzin-step[hidden] { display: none; }
    .qzin-q { font-size: clamp(20px, 3vw, 26px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.18; margin: 6px 0 6px; color: var(--ink); }
    .qzin-q em { color: var(--red); font-style: italic; font-weight: 900; }
    .qzin-help { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; font-weight: 500; line-height: 1.5; }
    .qzin-choices { display: flex; flex-direction: column; gap: 8px; }
    .qzin-choices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    @media (max-width: 560px) { .qzin-choices-row { grid-template-columns: 1fr; } }
    .qzin-choice { display: flex; align-items: center; gap: 12px; background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; text-align: left; cursor: pointer; font-family: var(--font); transition: border-color 220ms ease, background 220ms ease, transform 220ms var(--ease-bold), box-shadow 320ms var(--ease-bold); width: 100%; -webkit-tap-highlight-color: rgba(207,32,43,0.18); }
    .qzin-choice:hover, .qzin-choice:focus-visible { border-color: var(--red); background: var(--red-light); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(207,32,43,0.12); outline: none; }
    .qzin-choice:active { transform: translateY(0); }
    .qzin-choice.is-selected { border-color: var(--red); background: var(--red-light); box-shadow: 0 4px 14px rgba(207,32,43,0.18); }
    .qzin-choice-icon { flex: 0 0 40px; width: 40px; height: 40px; background: var(--surface); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--red); border: 1px solid var(--line); }
    .qzin-choice.is-selected .qzin-choice-icon { background: var(--red); color: var(--white); border-color: var(--red); }
    .qzin-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .qzin-choice-text strong { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
    .qzin-choice-text span { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.4; }
    .qzin-back { background: transparent; border: 0; padding: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: var(--font); transition: color 200ms ease; }
    .qzin-back:hover { color: var(--ink); }
    .qzin-step-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
    .qzin-step-actions .qzin-back { padding: 12px 14px 12px 0; }
    .qzin-step-actions .btn-primary { font-size: 14px; padding: 14px 22px; }
    .qzin-uploader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 18px; background: var(--cream); border: 2px dashed var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 220ms ease, background 220ms ease; text-align: center; }
    .qzin-uploader:hover { border-color: var(--red); background: var(--red-light); }
    .qzin-uploader-icon { color: var(--red); }
    .qzin-uploader-prompt { display: flex; flex-direction: column; gap: 2px; }
    .qzin-uploader-prompt strong { font-size: 14.5px; font-weight: 800; color: var(--ink); }
    .qzin-uploader-prompt span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
    .qzin-uploader-preview { width: 100%; max-height: 220px; overflow: hidden; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--surface); }
    .qzin-uploader-preview img { max-width: 100%; max-height: 220px; object-fit: contain; display: block; }
    .qzin-uploader.has-photo { padding: 12px; }
    .qzin-uploader.has-photo .qzin-uploader-icon, .qzin-uploader.has-photo .qzin-uploader-prompt { display: none; }
    .qzin-form { display: flex; flex-direction: column; gap: 14px; }
    .qzin-field { display: flex; flex-direction: column; gap: 6px; }
    .qzin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 480px) { .qzin-field-row { grid-template-columns: 1fr; } }
    .qzin-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
    .qzin-input { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ink); transition: border-color 200ms ease, box-shadow 220ms ease; }
    .qzin-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(207,32,43,0.12); }
    .qzin-input::placeholder { color: var(--muted); opacity: 0.5; font-weight: 500; }
    .qzin-summary { background: var(--red-light); padding: 10px 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 4px; border-radius: var(--r-sm); }
    .qzin-summary:empty { display: none; }
    .qzin-summary strong { color: var(--ink); font-weight: 800; }
    .qzin-fine { font-size: 11px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
    .qzin-success { padding: 36px 22px; text-align: center; }
    .qzin-success-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 999px; background: var(--red-light); color: var(--red); margin: 0 auto 14px; }
    @media (max-width: 720px) {
      .qzin-q { font-size: 20px; }
      .qzin-choice { padding: 12px 14px; gap: 10px; }
      .qzin-choice-icon { width: 36px; height: 36px; flex-basis: 36px; }
      .qzin-choice-text strong { font-size: 14px; }
      .qzin-choice-text span { font-size: 12px; }
    }
    @media (max-width: 720px) {
      .final-cta { padding: clamp(56px, 8vw, 88px) 0 clamp(40px, 6vw, 72px); }
      .quiz-embed { border-radius: var(--r-lg); margin: 0 calc(var(--shell-x) * -0.25); }
      .quiz-embed iframe { height: 640px; }
      .quiz-embed .quiz-frame-label { padding: 10px 14px; font-size: 10.5px; letter-spacing: 1px; }
    }

    /* ========== WWLT, "Want a website like this" Apple-light Aurora strip ========== */
    .wwlt { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 11vw, 140px) 0 clamp(64px, 9vw, 120px); background: #f8fafc; color: #0f172a; }
    .wwlt-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
    .wwlt-aurora-blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.42; mix-blend-mode: multiply; }
    .wwlt-aurora-blob-1 { width: 64vw; height: 64vw; top: -22vw; left: -10vw; background: radial-gradient(circle, hsl(355 80% 65%), hsl(355 70% 55%) 40%, transparent 70%); animation: wwltDrift1 28s ease-in-out infinite; }
    .wwlt-aurora-blob-2 { width: 52vw; height: 52vw; top: 12vw; right: -16vw; background: radial-gradient(circle, hsl(0 0% 90%), hsl(355 50% 78%) 50%, transparent 80%); animation: wwltDrift2 36s ease-in-out infinite; }
    .wwlt-aurora-blob-3 { width: 48vw; height: 48vw; bottom: -18vw; left: 30%; background: radial-gradient(circle, hsl(355 60% 70%), hsl(0 0% 95%) 50%, transparent 80%); animation: wwltDrift3 32s ease-in-out infinite; }
    .wwlt-aurora-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); }
    @keyframes wwltDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.05); } }
    @keyframes wwltDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8%, -4%) scale(1.08); } }
    @keyframes wwltDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -6%) scale(1.06); } }
    @media (prefers-reduced-motion: reduce) { .wwlt-aurora-blob-1, .wwlt-aurora-blob-2, .wwlt-aurora-blob-3 { animation: none; } }
    .wwlt-shell { position: relative; z-index: 2; max-width: 1080px; }
    .wwlt-head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 44px); }
    .wwlt-eyebrow { display: inline-block; padding: 6px 12px; background: rgba(15,23,42,0.06); border: 1px solid rgba(15,23,42,0.1); border-radius: var(--r-pill); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #475569; margin-bottom: 18px; }
    .wwlt-h2 { font-size: clamp(32px, 5.6vw, 56px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; color: #0f172a; margin: 0 0 14px; }
    .wwlt-h2 em { font-style: italic; color: var(--red); font-weight: 900; }
    .wwlt-lede { font-size: clamp(15.5px, 1.8vw, 18px); line-height: 1.55; color: #475569; max-width: 52ch; margin: 0 auto; font-weight: 500; }
    .wwlt-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); background: rgba(255,255,255,0.84); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 14px; border-radius: 18px; border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 28px rgba(15,23,42,0.08), 0 24px 60px rgba(15,23,42,0.1); }
    @media (max-width: 720px) { .wwlt-form { grid-template-columns: 1fr; gap: 8px; } }
    .wwlt-field { display: flex; flex-direction: column; gap: 4px; }
    .wwlt-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #64748b; }
    .wwlt-input { background: var(--surface); border: 1px solid rgba(15,23,42,0.1); border-radius: 12px; padding: 12px 14px; font-family: var(--font); font-size: 14.5px; font-weight: 600; color: #0f172a; transition: border-color 200ms ease, box-shadow 220ms ease; }
    .wwlt-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(207,32,43,0.14); }
    .wwlt-input::placeholder { color: #94a3b8; font-weight: 500; }
    .wwlt-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: #0f172a; color: var(--white); border: 0; border-radius: 12px; font-family: var(--font); font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; cursor: pointer; transition: background 220ms ease, transform 220ms var(--ease-bold), box-shadow 320ms var(--ease-bold); box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 4px 14px rgba(15,23,42,0.24); white-space: nowrap; height: 44px; align-self: end; }
    .wwlt-cta:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 18px rgba(15,23,42,0.3); }
    .wwlt-cta:active { transform: translateY(0); }
    @media (max-width: 720px) { .wwlt-cta { height: auto; padding: 13px 16px; justify-content: center; } }
    .wwlt-fine { grid-column: 1 / -1; margin: 4px 0 0; font-size: 11.5px; color: #64748b; text-align: center; font-weight: 500; }
    .wwlt-success { grid-column: 1 / -1; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.32); border-radius: 10px; color: #166534; font-size: 13.5px; font-weight: 700; margin-top: 8px; display: none; }
    .wwlt-success:not([hidden]) { display: inline-flex; }
    .wwlt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 860px) { .wwlt-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .wwlt-grid { grid-template-columns: 1fr; } }
    .wwlt-card { background: rgba(255,255,255,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(15,23,42,0.08); border-radius: 18px; padding: 22px; transition: transform 280ms var(--ease-bold), border-color 220ms ease, box-shadow 320ms var(--ease-bold); }
    .wwlt-card:hover { transform: translateY(-3px); border-color: rgba(15,23,42,0.16); box-shadow: 0 12px 28px rgba(15,23,42,0.1), 0 24px 60px rgba(15,23,42,0.08); }
    .wwlt-card-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(207,32,43,0.1); color: var(--red); margin-bottom: 12px; }
    .wwlt-card h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 6px; color: #0f172a; }
    .wwlt-card p { font-size: 13.5px; line-height: 1.55; color: #475569; margin: 0; font-weight: 500; }

    /* ========== STICKY CTA ========== */
    /* ========== FAB, bottom-right slide-up assistant + actions (replaces old sticky-cta) ========== */
    .fab { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 300ms var(--ease); transform: translateY(8px); }
    .fab.is-revealed { opacity: 1; pointer-events: auto; transform: translateY(0); }
    /* NO-JS / FOUC SAFETY: if gcj.js fails to load (never sets body.js-ready), the contact FAB must
       still be visible + usable rather than left invisible at opacity:0. */
    body:not(.js-ready) .fab { opacity: 1; transform: none; pointer-events: auto; }
    .fab-stack { position: absolute; right: 0; bottom: 70px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: transform 360ms var(--ease-bold), opacity 280ms ease, visibility 0s linear 360ms; transform: translateY(8px) scale(0.92); transform-origin: bottom right; opacity: 0; visibility: hidden; pointer-events: none; max-width: calc(100vw - 32px); }
    .fab.is-open .fab-stack { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 360ms var(--ease-bold), opacity 280ms ease, visibility 0s; }
    .fab-action { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font); font-weight: 800; font-size: 13px; letter-spacing: -0.005em; text-decoration: none; box-shadow: var(--shadow-md); transition: background 200ms ease, color 200ms ease, transform 200ms var(--ease-bold), border-color 200ms ease; transform: translateY(8px); opacity: 0; }
    .fab.is-open .fab-action { transform: translateY(0); opacity: 1; }
    .fab.is-open .fab-action:nth-child(2) { transition-delay: 60ms; }
    .fab.is-open .fab-action:nth-child(3) { transition-delay: 120ms; }
    .fab.is-open .fab-action:nth-child(4) { transition-delay: 180ms; }
    .fab-action:hover { background: var(--invert); color: var(--white); border-color: var(--ink); transform: translateY(-1px); }
    .fab-action.is-primary { background: var(--red); color: var(--white); border-color: var(--red); }
    .fab-action.is-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
    .fab-action-icon { flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--red-light); color: var(--red); display: grid; place-items: center; transition: background 220ms ease, color 220ms ease; }
    .fab-action.is-primary .fab-action-icon { background: rgba(255,255,255,0.18); color: var(--white); }
    .fab-action:hover .fab-action-icon { background: rgba(255,255,255,0.18); color: var(--white); }
    .fab-action-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    /* FAB intro panel, REAL info, not a fake chatbot. Shows 3 honest actions below. */
    .fab-intro { width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(15,23,42,0.18), 0 2px 8px rgba(15,23,42,0.08); overflow: hidden; transform: translateY(8px); opacity: 0; transition: transform 360ms var(--ease-bold), opacity 280ms ease; }
    .fab.is-open .fab-intro { transform: translateY(0); opacity: 1; transition-delay: 200ms; }
    .fab-intro-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--black); color: var(--white); }
    .fab-intro-avatar { width: 32px; height: 32px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--red), var(--red-dark)); display: grid; place-items: center; color: var(--white); font-weight: 900; font-style: italic; font-size: 13px; box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
    .fab-intro-name { font-weight: 800; font-size: 13.5px; letter-spacing: -0.005em; }
    .fab-intro-name em { color: var(--red); font-style: italic; font-weight: 900; }
    .fab-intro-status { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.62); display: flex; align-items: center; gap: 6px; }
    .fab-intro-status .pulse { width: 7px; height: 7px; border-radius: var(--r-pill); background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: fabPulse 2.2s ease-out infinite; flex-shrink: 0; }
    @keyframes fabPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } 70% { box-shadow: 0 0 0 6px rgba(74,222,128,0); } }
    .fab-intro-body { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 500; }
    .fab-intro-body em { color: var(--red); font-style: italic; font-weight: 800; }
    .fab-toggle { width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--red); color: var(--white); border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(207,32,43,0.42), 0 0 0 4px rgba(255,255,255,0.08); transition: transform 280ms var(--ease-bold), background 200ms ease; position: relative; }
    .fab-toggle:hover { background: var(--red-dark); transform: scale(1.05); }
    .fab-toggle:active { transform: scale(0.95); }
    .fab-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 280ms var(--ease-bold), opacity 200ms ease; }
    .fab-toggle .fab-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
    .fab.is-open .fab-toggle { background: var(--invert); transform: rotate(90deg); }
    .fab.is-open .fab-toggle .fab-icon-open { opacity: 0; transform: rotate(90deg); }
    .fab.is-open .fab-toggle .fab-icon-close { opacity: 1; transform: rotate(0); }
    .fab-toggle-pulse { position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--red); animation: fabRingPulse 2.4s ease-out infinite; opacity: 0; pointer-events: none; }
    @keyframes fabRingPulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
    .fab.is-open .fab-toggle-pulse,
    .fab.is-seen .fab-toggle-pulse { animation: none; opacity: 0; }
    @media (prefers-reduced-motion: reduce) { .fab-toggle-pulse, .fab-chat-status::before { animation: none; } }
    /* Hide the FAB while user is inside the final-cta section (the quote form section), avoids overlap */
    .fab.is-near-form { opacity: 0; pointer-events: none; }

    /* ========== FOOTER ========== */
    footer { background: var(--black); color: var(--white); padding: 56px 0 28px; }
    footer > .shell { display: flex; flex-direction: column; }
    .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .footer-brand-row { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 17px; margin-bottom: 14px; letter-spacing: -0.01em; }
    .footer-brand-row .mark { width: 44px; height: 44px; border-radius: 999px; background: var(--white); padding: 4px; }
    .footer-brand-row .mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 999px; }
    .footer-tagline { color: rgba(255,255,255,0.62); font-weight: 600; font-size: 13.5px; max-width: 340px; line-height: 1.55; }
    .footer-socials { display: flex; gap: 10px; margin-top: 18px; }
    .footer-social { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: var(--white); font-weight: 900; font-size: 13px; text-decoration: none; transition: background 200ms ease, border-color 200ms ease; }
    .footer-social:hover { background: var(--red); border-color: var(--red); }
    .footer-col h4 { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 14px; font-weight: 900; }
    .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .footer-col li { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.82); }
    .footer-col a { color: inherit; text-decoration: none; transition: color 200ms ease; }
    .footer-col a:hover { color: var(--red); }
    .footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); letter-spacing: 0.3px; }
    .footer-bottom strong { color: rgba(255,255,255,0.7); }

    /* Animated footer button, opens /preview/want-website.html in new tab */
    .footer-wwlt { display: inline-flex; align-items: center; gap: 10px; margin: 24px auto 0; padding: 11px 18px 11px 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; color: rgba(255,255,255,0.92); text-decoration: none; font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: -0.005em; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: border-color 280ms ease, transform 280ms var(--ease-bold), background 320ms ease; align-self: center; width: fit-content; }
    .footer-wwlt em { font-style: italic; color: var(--red); font-weight: 800; }
    .footer-wwlt:hover { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.08); transform: translateY(-1px); }
    .footer-wwlt:active { transform: translateY(0); }
    .footer-wwlt-text { position: relative; z-index: 2; }
    .footer-wwlt-arrow { position: relative; z-index: 2; display: inline-grid; place-items: center; transition: transform 280ms var(--ease-bold); color: rgba(255,255,255,0.7); }
    .footer-wwlt:hover .footer-wwlt-arrow { transform: translateX(3px); color: var(--white); }
    .footer-wwlt-shimmer { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(207,32,43,0.32) 50%, transparent 65%); background-size: 220% 100%; background-position: 100% 50%; animation: footerWwltShimmer 4.2s var(--ease) infinite; z-index: 1; }
    @keyframes footerWwltShimmer { 0% { background-position: 100% 50%; } 65% { background-position: -50% 50%; } 100% { background-position: -50% 50%; } }
    @media (prefers-reduced-motion: reduce) { .footer-wwlt-shimmer { animation: none; opacity: 0.15; background-position: 50% 50%; } }
    @media (max-width: 720px) { .footer-wwlt { font-size: 12.5px; padding: 10px 16px 10px 18px; } }
    @media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 540px) { .footer-top { grid-template-columns: 1fr; } }

    /* ============================================================
       ROOF PAGE V3, service-page-specific layouts
       NEW SHAPES not on the homepage. Inherits homepage tokens + motion vocab.
       ============================================================ */

    /* ===== RREVIEWS — 3-card review carousel (Pass 3 per Gemini priority #2) ===== */
    .rreviews { background: var(--cream); }
    .rreviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1080px; margin: clamp(28px, 4vw, 44px) auto 0; }
    @media (max-width: 880px) { .rreviews-grid { grid-template-columns: 1fr; max-width: 540px; } }
    .rreview { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); transition: transform 280ms var(--ease-bold), box-shadow 320ms var(--ease-bold); }
    .rreview:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .rreview-stars { display: inline-flex; gap: 2px; color: var(--red); }
    .rreview-stars svg { width: 16px; height: 16px; }
    .rreview-body { font-size: 15px; color: var(--ink); line-height: 1.6; font-weight: 500; margin: 0; flex: 1; }
    .rreview-body em { color: var(--red); font-style: italic; font-weight: 800; }
    .rreview-attr { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 12px; }
    .rreview-attr strong { font-size: 14px; font-weight: 800; color: var(--ink); }
    .rreview-attr span { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.2px; }
    .rreviews-foot { margin-top: clamp(20px, 3vw, 28px); text-align: center; font-size: 14px; color: var(--muted); font-weight: 500; }
    .rreviews-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,0.18); padding-bottom: 1px; transition: border-color 200ms ease; }
    .rreviews-foot a:hover { border-bottom-color: var(--red); }
    .rreviews-foot strong { color: var(--ink); font-weight: 800; }

    /* ===== RSTICKYBAR — mobile-only sticky bottom Call/Text/Quote (Pass 2) ===== */
    .rstickybar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(10,10,11,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.12); gap: 8px; }
    @media (max-width: 720px) { .rstickybar { display: flex; } }
    .rstickybar-action { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 8px; background: rgba(255,255,255,0.08); color: var(--white); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: -0.005em; text-decoration: none; transition: background 200ms ease, transform 200ms var(--ease-bold); -webkit-tap-highlight-color: rgba(255,255,255,0.18); }
    .rstickybar-action:active { transform: scale(0.97); background: rgba(255,255,255,0.14); }
    .rstickybar-action svg { color: var(--red); flex-shrink: 0; }
    .rstickybar-action.is-primary { background: var(--red); border-color: var(--red); box-shadow: 0 4px 14px rgba(207,32,43,0.42); }
    .rstickybar-action.is-primary svg { color: var(--white); }
    .rstickybar-action.is-primary:active { background: var(--red-dark); }
    /* Pass 5: foldable + iPhone SE 1st gen fallback */
    @media (max-width: 360px) {
      .rstickybar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
      .rstickybar-action { font-size: 12px; min-height: 44px; padding: 0 4px; gap: 6px; }
      .rstickybar-action svg { width: 16px; height: 16px; }
    }
    /* When sticky bar visible, pad the page bottom so QZIN form does not overlap, and HIDE the FAB on mobile (sticky bar is the mobile CTA) */
    @media (max-width: 720px) {
      body { padding-bottom: 76px; }
      .fab { display: none; }
    }
    /* Sticky bar fade-in past the hero (avoids double-CTA on initial load) */
    .rstickybar { transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform 360ms var(--ease-bold), opacity 280ms ease; }
    .rstickybar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) { .rstickybar { transition: none; } }

    /* ===== RHERO v5 (Pass 2) — full-bleed cinematic dark, matches homepage scale ===== */
    .rhero { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; min-height: 100vh; display: flex; align-items: center; padding: clamp(72px, 11.5vw, 116px) 0 clamp(44px, 6vw, 72px); background: var(--black); color: var(--white); }
    .rhero-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
    .rhero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); pointer-events: none; }
    /* v7: hide native video controls/play overlay during load + when autoplay is delayed by browser policy */
    .rhero-bg-video::-webkit-media-controls,
    .rhero-bg-video::-webkit-media-controls-enclosure,
    .rhero-bg-video::-webkit-media-controls-panel,
    .rhero-bg-video::-webkit-media-controls-start-playback-button,
    .rhero-bg-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }
    .rhero-bg-video::-internal-media-controls-overlay-cast-button { display: none !important; }
    .rhero-bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.62) 0%, rgba(10,10,11,0.42) 30%, rgba(10,10,11,0.72) 80%, rgba(10,10,11,0.94) 100%), radial-gradient(60% 60% at 20% 35%, rgba(207,32,43,0.16), transparent 70%); }
    .rhero-bg-grain { position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); pointer-events: none; }

    .rhero-shell { position: relative; z-index: 2; width: min(1180px, calc(100% - var(--shell-x) * 2)); margin: 0 auto; }
    .rhero-content { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); max-width: 740px; }

    .rhero-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.62); width: fit-content; }
    .rhero-crumb a { color: rgba(255,255,255,0.62); text-decoration: none; transition: color 200ms ease; }
    .rhero-crumb a:hover { color: var(--white); }
    .rhero-crumb svg { color: rgba(255,255,255,0.32); }
    .rhero-crumb span { color: var(--white); }

    .rhero-ticker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: rgba(0,0,0,0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; border-radius: var(--r-pill); width: fit-content; box-shadow: 0 8px 18px rgba(0,0,0,0.18); max-width: calc(100% - 4px); }
    .rhero-ticker-pulse { width: 8px; height: 8px; border-radius: var(--r-pill); background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.6); animation: rheroPulse 2.2s ease-out infinite; flex: 0 0 8px; }
    @keyframes rheroPulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
    @media (prefers-reduced-motion: reduce) { .rhero-ticker-pulse { animation: none; } }
    .rhero-ticker-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
    .rhero-ticker-text > * { white-space: nowrap; }
    .rhero-ticker-text span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .rhero-ticker-sep { opacity: 0.5; }
    .rhero-ticker-text em { font-style: italic; color: var(--red); font-weight: 800; }

    .rhero-title { font-size: clamp(44px, 9.5vw, 112px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; margin: 0; color: var(--white); }
    .rhero-title em { font-style: italic; color: var(--red); font-weight: 900; }
    .rhero-title-line { display: block; }
    @media (max-width: 720px) { .rhero-title { line-height: 1; } }

    .rhero-lede { font-size: clamp(16px, 1.9vw, 20px); color: rgba(255,255,255,0.86); margin: 0; line-height: 1.55; font-weight: 500; max-width: 56ch; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
    .rhero-lede em { color: var(--red); font-style: italic; font-weight: 800; }

    .rhero-pricepill { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.86); width: fit-content; max-width: 100%; white-space: nowrap; overflow: hidden; }
    @media (max-width: 480px) { .rhero-pricepill { font-size: 11.5px; gap: 7px; padding: 10px 14px 10px 11px; } .rhero-pricepill-num { font-size: 16px; } .rhero-pricepill-tag { font-size: 9.5px; letter-spacing: 1.1px; } }
    @media (max-width: 360px) { .rhero-pricepill { font-size: 10.5px; } }
    .rhero-pricepill-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
    .rhero-pricepill-num { font-size: 18px; font-weight: 900; color: var(--white); font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.01em; }
    .rhero-pricepill strong { color: var(--white); font-weight: 800; }
    .rhero-pricepill-sep { display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.32); flex-shrink: 0; }

    .rhero-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
    .rhero-cta-primary { display: inline-flex; align-items: center; gap: 12px; padding: 20px 36px; background: var(--red); color: var(--white); border-radius: var(--r-pill); font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: background 220ms ease, transform 220ms var(--ease-bold), box-shadow 320ms var(--ease-bold); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 28px rgba(207,32,43,0.45), 0 4px 8px rgba(207,32,43,0.22); position: relative; }
    .rhero-cta-primary::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; background: var(--red); opacity: 0; z-index: -1; filter: blur(14px); animation: rheroCtaHalo 3.6s ease-in-out infinite; }
    @keyframes rheroCtaHalo { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.42; } }
    @media (prefers-reduced-motion: reduce) { .rhero-cta-primary::before { animation: none; opacity: 0.32; } }
    .rhero-cta-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 16px 36px rgba(207,32,43,0.5); }
    .rhero-cta-primary svg { transition: transform 280ms var(--ease-bold); }
    .rhero-cta-primary:hover svg { transform: translateX(3px); }
    .rhero-cta-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--white); border: 1.5px solid rgba(255,255,255,0.48); border-radius: var(--r-pill); font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: -0.005em; text-decoration: none; transition: background 280ms ease, color 280ms ease, border-color 280ms ease, transform 220ms var(--ease-bold); }
    .rhero-cta-secondary:hover { background: var(--white); color: var(--pure-dark); border-color: var(--white); transform: translateY(-2px); }
    .rhero-cta-secondary svg { color: currentColor; }
    @media (max-width: 480px) {
      .rhero-ctas { width: 100%; gap: 10px; }
      .rhero-cta-primary, .rhero-cta-secondary { flex: 1 1 0; justify-content: center; padding: 16px 18px; font-size: 14.5px; min-height: 52px; }
    }

    .rhero-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); margin-top: 4px; }
    .rhero-meta svg { color: rgba(255,255,255,0.5); }
    .rhero-meta em { font-style: italic; color: var(--red); font-weight: 700; }

    .rhero-scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3; pointer-events: none; }
    @media (max-width: 720px) { .rhero-scroll { display: none; } }
    .rhero-scroll-label { font-size: 10.5px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
    .rhero-scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent); position: relative; overflow: hidden; }
    .rhero-scroll-line::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; background: var(--surface); animation: rheroScroll 2.2s ease-in-out infinite; }
    @keyframes rheroScroll { 0% { top: -16px; } 100% { top: 100%; } }
    @media (prefers-reduced-motion: reduce) { .rhero-scroll-line::after { animation: none; } }

    /* ----- RTRUSTLINE: ONE understated typographic line (replaces v4 stat wall) ----- */
    .rtrustline { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(22px, 3vw, 32px) 0; }
    .rtrustline-text { font-size: clamp(15px, 1.8vw, 18px); font-weight: 500; color: var(--muted); line-height: 1.55; max-width: 64ch; margin: 0 auto; text-align: center; }
    .rtrustline-num { color: var(--ink); font-weight: 800; }
    .rtrustline-num em { color: var(--red); font-style: italic; font-weight: 900; font-feature-settings: "tnum" 1; }
    .rtrustline-dot { display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: rgba(15,23,42,0.32); vertical-align: middle; margin: 0 10px; }
    .rtrustline-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(15,23,42,0.18); padding-bottom: 1px; transition: border-color 200ms ease; font-weight: 600; }
    .rtrustline-link:hover { border-bottom-color: var(--red); }
    .rtrustline-link strong { color: var(--ink); font-weight: 800; }

    /* ----- RBADGES: credentials wall (icons + text) ----- */
    .rbadges { background: var(--surface); padding: clamp(36px, 5vw, 60px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .rbadges-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 32px); }
    @media (max-width: 720px) { .rbadges-row { justify-content: center; gap: 18px; } }
    .rbadge { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
    .rbadge-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--red-light); color: var(--red); display: inline-grid; place-items: center; flex-shrink: 0; line-height: 0; }
    .rbadge-icon svg { width: 20px; height: 20px; display: block; }
    /* v6: global icon-container alignment safety — forces SVG block display + neutralises baseline shift */
    .rbadge-icon svg, .rtreatments-note-icon svg, .qzin-choice-icon svg, .faq-q-icon svg,
    .gallery-zoom svg, .rcompare-cell--us svg, .rcompare-cell--them svg, .fab-action-icon svg,
    .fab-intro-avatar svg, .rhero-cta-primary svg, .rhero-cta-secondary svg,
    .rhero-meta svg, .word-reveal-section .wr-cta svg, .rprice-row-cta span { display: inline-block; vertical-align: middle; }
    .rbadge-icon svg, .rtreatments-note-icon svg, .qzin-choice-icon svg, .faq-q-icon svg,
    .gallery-zoom svg, .rcompare-cell--us svg, .rcompare-cell--them svg, .fab-action-icon svg,
    .fab-intro-avatar svg { display: block; }
    .rbadge-icon, .rtreatments-note-icon, .qzin-choice-icon, .faq-q-icon,
    .gallery-zoom, .rcompare-cell--us, .rcompare-cell--them, .fab-action-icon { line-height: 0; }
    .rbadge-text { display: flex; flex-direction: column; line-height: 1.15; }
    .rbadge-text strong { font-size: 14px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); }
    .rbadge-text span { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); }

    /* ----- REDITORIAL: text + image split with pull quote ----- */
    .reditorial { background: var(--surface); }
    .reditorial-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
    @media (max-width: 940px) { .reditorial-grid { grid-template-columns: 1fr; gap: 32px; } }
    .reditorial-img { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-xl); }
    @media (max-width: 940px) { .reditorial-img { aspect-ratio: 5/4; } }
    .reditorial-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
    .reditorial-img:hover img { transform: scale(1.04); }
    .reditorial-img-tag { position: absolute; bottom: 16px; left: 16px; padding: 8px 14px; background: rgba(10,10,11,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; }
    .reditorial-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 18px); }
    .reditorial-eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); }
    .reditorial-eyebrow em { font-style: italic; font-weight: 900; }
    .reditorial-h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; margin: 0; color: var(--ink); }
    .reditorial-h2 em { font-style: italic; color: var(--red); font-weight: 900; }
    .reditorial-copy p { color: var(--muted); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.7; font-weight: 500; margin: 0; }
    .reditorial-copy p em { color: var(--red); font-style: italic; font-weight: 800; }
    /* On the dark editorial variant the heading must not keep the light-mode ink colour (dark-on-dark); copy lightens too. */
    .section.dark .reditorial-h2 { color: var(--white); }
    .section.dark .reditorial-copy p { color: rgba(255,255,255,0.78); }
    .reditorial-cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: var(--invert); color: var(--white); border-radius: var(--r-pill); font-family: var(--font); font-weight: 700; font-size: 14.5px; letter-spacing: -0.005em; text-decoration: none; transition: background 220ms ease, transform 220ms var(--ease-bold), box-shadow 320ms var(--ease-bold); align-self: flex-start; width: fit-content; box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 18px rgba(15,23,42,0.24); margin-top: 6px; }
    .reditorial-cta:hover { background: var(--red); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 8px 22px rgba(207,32,43,0.32); }

    /* ----- RSURFACES: tabbed surface guide (Slate/Concrete/Clay/Heritage) ----- */
    .rsurfaces { padding: clamp(72px, 10vw, 140px) 0; background: linear-gradient(180deg, var(--bg) 0%, var(--cream) 16%); }
    .rsurface-tabs { display: flex; gap: 8px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); width: fit-content; margin: clamp(28px, 4vw, 40px) auto; box-shadow: var(--shadow-md); }
    @media (max-width: 540px) { .rsurface-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; overflow: visible; } .rsurface-tab { white-space: normal; min-width: 0; text-align: center; line-height: 1.18; flex: none; } }
    .rsurface-tab { padding: 10px 22px; background: transparent; border: 0; border-radius: var(--r-pill); font-family: var(--font); font-weight: 800; font-size: 14px; letter-spacing: -0.005em; color: var(--muted); cursor: pointer; transition: background 240ms ease, color 240ms ease, transform 220ms var(--ease-bold); white-space: nowrap; flex-shrink: 0; }
    .rsurface-tab:hover { color: var(--ink); }
    .rsurface-tab.is-active { background: var(--invert); color: var(--white); box-shadow: var(--shadow-md); }
    .rsurface-panels { position: relative; max-width: 980px; margin: 0 auto; }
    .rsurface-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-md); }
    @media (max-width: 860px) { .rsurface-panel { grid-template-columns: 1fr; gap: 22px; } }
    .rsurface-panel[hidden] { display: none; }
    .rsurface-panel-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; }
    .rsurface-panel-img img { width: 100%; height: 100%; object-fit: cover; }
    .rsurface-panel-copy { display: flex; flex-direction: column; gap: 10px; }
    .rsurface-panel-label { font-size: 10.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); }
    .rsurface-panel-copy h3 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 900; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
    .rsurface-panel-copy h3 em { font-style: italic; color: var(--red); font-weight: 900; }
    .rsurface-panel-copy p { font-size: 14.5px; color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; }
    .rsurface-panel-copy p em { color: var(--red); font-style: italic; font-weight: 800; }
    .rsurface-panel-list { list-style: none; padding: 12px 0 0; margin: 0; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); margin-top: 8px; }
    .rsurface-panel-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
    .rsurface-panel-list li span { color: var(--muted); font-weight: 600; }
    .rsurface-panel-list li strong { color: var(--ink); font-weight: 800; text-align: right; }
    .rtreatments-note { display: flex; align-items: flex-start; gap: 14px; max-width: 720px; margin: clamp(24px, 3.5vw, 36px) auto 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
    .rtreatments-note-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--red-light); color: var(--red); display: inline-grid; place-items: center; flex-shrink: 0; }
    .rtreatments-note-body { font-size: 14px; color: var(--muted); line-height: 1.55; font-weight: 500; }
    .rtreatments-note-body strong { color: var(--ink); font-weight: 800; }
    .rtreatments-note-body em { color: var(--red); font-style: italic; font-weight: 800; }

    /* ----- RHOWTO: vertical hour-by-hour timeline ----- */
    /* v6 mobile rebuild — desktop keeps the timeline; mobile drops the line + dot
       and stacks the cards centred with a red time-pill above each card. */
    .rhowto { background: var(--surface); }
    .rhowto-line { list-style: none; padding: 0; margin: clamp(32px, 4vw, 48px) auto 0; max-width: 760px; position: relative; counter-reset: rhowto; }
    .rhowto-line::before { content: ""; position: absolute; left: 78px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(to bottom, var(--line) 0%, var(--red) 8%, var(--red) 92%, var(--line) 100%); opacity: 0.4; }
    .rhowto-step { display: grid; grid-template-columns: 64px 28px 1fr; gap: 16px; align-items: flex-start; padding: 14px 0; position: relative; }
    .rhowto-time { font-family: var(--font); font-feature-settings: "tnum" 1; font-size: 14px; font-weight: 900; letter-spacing: -0.005em; color: var(--ink); padding-top: 14px; text-align: right; }
    .rhowto-dot { width: 28px; height: 28px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); margin-top: 12px; display: grid; place-items: center; position: relative; z-index: 2; flex-shrink: 0; }
    .rhowto-dot::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }
    .rhowto-step.is-key .rhowto-dot { background: var(--red-light); border-color: var(--red); }
    .rhowto-step.is-key .rhowto-dot::after { background: var(--red); }
    .rhowto-step.is-final .rhowto-dot { background: var(--red); border-color: var(--red); }
    .rhowto-step.is-final .rhowto-dot::after { background: var(--surface); }
    .rhowto-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); transition: border-color 240ms ease, transform 280ms var(--ease-bold), box-shadow 320ms var(--ease-bold); }
    .rhowto-card:hover { border-color: rgba(15,23,42,0.18); transform: translateX(2px); box-shadow: var(--shadow-md); }
    .rhowto-card h3 { font-size: 15.5px; font-weight: 900; letter-spacing: -0.015em; margin: 0 0 4px; color: var(--ink); }
    .rhowto-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; font-weight: 500; margin: 0; }
    .rhowto-card p em { color: var(--red); font-style: italic; font-weight: 800; }

    /* v6 mobile (≤640px) — abandon the timeline; use centred stacked cards with red time pill */
    @media (max-width: 640px) {
      .rhowto-line { padding: 0; max-width: 100%; }
      .rhowto-line::before { display: none; }
      .rhowto-step { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 14px; margin: 0; }
      .rhowto-time { display: inline-flex; align-self: flex-start; align-items: center; padding: 6px 12px; background: rgba(207,32,43,0.08); border: 1px solid rgba(207,32,43,0.22); color: var(--red); border-radius: 999px; font-size: 11.5px; font-weight: 900; letter-spacing: 1.2px; margin: 0 0 8px; padding-top: 6px; text-align: left; }
      .rhowto-dot { display: none; }
      .rhowto-step.is-key .rhowto-time { background: var(--red); color: var(--white); border-color: var(--red); }
      .rhowto-step.is-final .rhowto-time { background: var(--invert); color: var(--white); border-color: var(--ink); }
      .rhowto-card { padding: 14px 16px; }
      .rhowto-card h3 { font-size: 15px; }
      .rhowto-card p { font-size: 13.5px; }
    }

    /* ----- RPRICES: property-type pricing (dark section) ----- */
    .rprices { background: var(--black); color: var(--white); position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 10vw, 140px) 0; }
    .rprices-glow { position: absolute; border-radius: 50%; filter: blur(96px); opacity: 0.32; z-index: -1; }
    .rprices-glow-1 { width: 50vw; height: 50vw; top: -20vw; right: -10vw; background: radial-gradient(circle, var(--red), transparent 70%); }
    .rprices-glow-2 { width: 36vw; height: 36vw; bottom: -16vw; left: -8vw; background: radial-gradient(circle, hsl(355 50% 30%), transparent 70%); }
    .rprices .section-head .eyebrow { background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); color: var(--red); }
    .rprices .section-head h2 { color: var(--white); }
    .rprices .section-head h2 em { color: var(--white); }
    .rprices .section-head .lead { color: rgba(255,255,255,0.72); }
    /* Elegant 4-line pricing list (replaces v4 4-card grid) */
    .rprice-list-wrap { max-width: 880px; margin: clamp(28px, 4vw, 44px) auto 0; }
    .rprice-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(20px, 2.6vw, 28px) 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .rprice-row:last-child { border-bottom: 0; }
    .rprice-row.is-featured .rprice-row-num em { color: var(--red); }
    .rprice-row-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .rprice-row-name { font-size: clamp(20px, 2.6vw, 26px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; color: var(--white); display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .rprice-row-tag { font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); background: var(--red); padding: 4px 10px; border-radius: 999px; font-style: normal; }
    .rprice-row-meta { font-size: 13.5px; color: rgba(255,255,255,0.7); line-height: 1.5; font-weight: 500; }
    /* v6: .rprice-row-num legacy (pre-pricing-strip), retained for cascade safety */
    .rprice-row-num { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
    .rprice-row-num span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.4px; text-transform: uppercase; }
    .rprice-row-num em { font-size: clamp(34px, 5vw, 44px); font-weight: 900; letter-spacing: -0.04em; color: var(--white); font-style: italic; font-feature-settings: "tnum" 1, "lnum" 1; }
    /* v6: .rprice-row-cta — replaces price column with a quote-prompt link */
    .rprice-row-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.04); color: var(--white); font-size: 14px; font-weight: 800; letter-spacing: -0.005em; text-decoration: none; transition: background 200ms ease, border-color 200ms ease, transform 240ms var(--ease-bold); white-space: nowrap; flex-shrink: 0; }
    .rprice-row-cta span { font-size: 18px; line-height: 1; transition: transform 240ms var(--ease-bold); }
    .rprice-row-cta:hover { background: var(--red); border-color: var(--red); transform: translateX(2px); }
    .rprice-row-cta:hover span { transform: translateX(3px); }
    .rprice-row.is-featured .rprice-row-cta { background: var(--red); border-color: var(--red); }
    .rprice-row.is-featured .rprice-row-cta:hover { background: #d92632; border-color: #d92632; }
    @media (max-width: 600px) {
      .rprice-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
      .rprice-row-num { justify-content: flex-start; align-items: baseline; gap: 8px; }
      .rprice-row-num em { font-size: 36px; }
      .rprice-row-name { font-size: 20px; }
      .rprice-row-cta { align-self: flex-start; padding: 11px 20px; font-size: 13.5px; }
    }
    @media (max-width: 480px) {
      .rprices { padding: clamp(56px, 8vw, 80px) 0; }
      .rprice-row { padding: 18px 0; gap: 6px; }
      .rprice-row.is-featured { padding: 22px 16px; margin: 0 -16px; background: linear-gradient(135deg, rgba(207,32,43,0.16), rgba(207,32,43,0.04)); border-radius: 14px; border: 1px solid var(--red); }
      .rprice-row-name { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
      .rprice-row-tag { align-self: flex-start; }
    }
    /* Mobile rhythm fixes for the editorial sections (Pass 2 per Gemini review) */
    @media (max-width: 480px) {
      .rcompare-head, .rcompare-row { grid-template-columns: 1fr 48px 48px; gap: 8px; padding: 12px 14px; }
      .rcompare-cell--label { font-size: 13.5px; }
      .rproblems-list-num { font-size: 11px; }
      .rproblems-list-body { font-size: 13.5px; line-height: 1.5; }
      /* v6: rhowto mobile overrides now live in ≤640px block above (stacked cards + time pill). */
      .rsurface-tabs { width: 100%; padding: 4px; }
      .rsurface-tab { padding: 11px 8px; font-size: 12.5px; white-space: normal; text-align: center; line-height: 1.18; }
      .rsurface-panel { padding: 16px; }
      .rsurface-panel-list li { font-size: 12.5px; }
      .reditorial-cta { width: 100%; justify-content: center; }
    }
    .rprices-foot { margin-top: clamp(28px, 4vw, 40px); text-align: center; font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 500; max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.6; }
    .rprices-foot a { color: var(--white); font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.32); transition: border-color 200ms ease; }
    .rprices-foot a:hover { border-bottom-color: var(--white); }
    .rprices-foot em { color: var(--red); font-style: italic; font-weight: 800; }

    /* ----- RCOMPARE: row-by-row comparison table ----- */
    .rcompare-wrap { max-width: 880px; margin: clamp(32px, 4vw, 48px) auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; }
    .rcompare-head, .rcompare-row { display: grid; grid-template-columns: 1fr 100px 100px; gap: 12px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); }
    @media (max-width: 600px) { .rcompare-head, .rcompare-row { grid-template-columns: 1fr 60px 60px; gap: 8px; padding: 14px 16px; } }
    .rcompare-row:last-child { border-bottom: 0; }
    .rcompare-head { background: var(--cream); }
    .rcompare-head .rcompare-cell { font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
    .rcompare-head .rcompare-cell--us { color: var(--red); text-align: center; }
    .rcompare-head .rcompare-cell--them { color: var(--muted); text-align: center; }
    .rcompare-cell--label { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
    .rcompare-cell--label em { color: var(--red); font-style: italic; font-weight: 800; }
    .rcompare-cell--us, .rcompare-cell--them { display: grid; place-items: center; }
    .rcompare-cell--us svg { width: 20px; height: 20px; color: var(--red); }
    .rcompare-cell--them svg { width: 18px; height: 18px; color: var(--muted-soft); opacity: 0.55; }

    /* ----- RAFTER: 0/6/12/24 month time-progression strip ----- */
    .rafter { background: var(--surface); }
    .rafter-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1140px; margin: clamp(28px, 4vw, 44px) auto 0; }
    @media (max-width: 860px) { .rafter-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
    @media (max-width: 480px) { .rafter-strip { grid-template-columns: 1fr; } }
    .rafter-frame { margin: 0; display: flex; flex-direction: column; gap: 8px; }
    .rafter-img { position: relative; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 380ms var(--ease-bold), box-shadow 320ms var(--ease-bold); }
    .rafter-frame:hover .rafter-img { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
    .rafter-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
    .rafter-frame:hover .rafter-img img { transform: scale(1.02); }
    .rafter-stamp { position: absolute; top: 12px; left: 12px; padding: 5px 11px; background: var(--invert); color: var(--white); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 6px; box-shadow: var(--shadow-sm); }
    .rafter-frame:nth-child(4) .rafter-stamp { background: var(--red); }
    .rafter-frame figcaption { font-size: 13px; color: var(--muted); line-height: 1.5; font-weight: 600; text-align: center; padding: 0 4px; }

    /* ----- RPULLQUOTE: magazine-style customer quote ----- */
    .rpullquote { background: var(--cream); }
    .rpullquote-shell { max-width: 880px; text-align: center; position: relative; padding: clamp(24px, 4vw, 48px) clamp(8px, 2vw, 24px); }
    .rpullquote-mark { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: clamp(96px, 14vw, 160px); line-height: 1; color: var(--red); font-weight: 900; opacity: 0.18; pointer-events: none; }
    .rpullquote-body { position: relative; font-size: clamp(22px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.32; color: var(--ink); margin: 0 auto; max-width: 22ch; }
    .rpullquote-body em { color: var(--red); font-style: italic; font-weight: 900; }
    .rpullquote-attr { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(24px, 4vw, 36px); padding: 10px 18px 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-md); }
    .rpullquote-avatar { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--white); display: grid; place-items: center; font-weight: 900; font-style: italic; }
    .rpullquote-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
    .rpullquote-meta strong { font-size: 13.5px; font-weight: 900; color: var(--ink); }
    .rpullquote-meta span { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }

    /* ----- RPROBLEMS: editorial 2-col split (text + single big photo) ----- */
    .rproblems { background: var(--surface); }
    .rproblems-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
    @media (max-width: 940px) { .rproblems-split { grid-template-columns: 1fr; gap: 28px; } }
    .rproblems-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 18px); }
    .rproblems-h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; margin: 0; color: var(--ink); }
    .rproblems-h2 em { font-style: italic; color: var(--red); font-weight: 900; }
    .rproblems-lede { font-size: clamp(15px, 1.7vw, 17px); color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; max-width: 42ch; }
    .rproblems-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 14px; }
    .rproblems-list li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
    .rproblems-list li:last-child { border-bottom: 0; }
    .rproblems-list-num { font-size: 12px; font-weight: 900; letter-spacing: 1.6px; color: var(--red); font-feature-settings: "tnum" 1; }
    .rproblems-list-body { font-size: 14.5px; color: var(--muted); line-height: 1.55; font-weight: 500; }
    .rproblems-list-body strong { color: var(--ink); font-weight: 800; }
    .rproblems-photo { position: sticky; top: 96px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-xl); }
    @media (max-width: 940px) { .rproblems-photo { position: static; max-width: 560px; margin: 0 auto; } }
    .rproblems-photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
    .rproblems-photo figcaption { padding: 14px 18px; background: var(--cream); font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.45; }

    /* ----- RSUBURBS: typographic sentence (replaces v4 14-tile grid) ----- */
    .rsuburbs { background: var(--cream); }
    .rsuburbs-shell { max-width: 760px; text-align: center; }
    .rsuburbs-h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; margin: clamp(10px, 1.5vw, 14px) 0 clamp(16px, 2.4vw, 24px); color: var(--ink); }
    .rsuburbs-h2 em { font-style: italic; color: var(--red); font-weight: 900; }
    .rsuburbs-body { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.65; color: var(--muted); font-weight: 500; margin: 0; }
    .rsuburbs-warm { color: var(--ink); font-weight: 600; }
    .rsuburbs-warm strong { color: var(--ink); font-weight: 800; }
    .rsuburbs-warm em { color: var(--red); font-style: italic; font-weight: 800; font-feature-settings: "tnum" 1; margin-left: 2px; }
    .rsuburbs-foot { margin-top: clamp(18px, 2.5vw, 24px); font-size: 14px; color: var(--muted); font-weight: 500; }
    .rsuburbs-foot em { color: var(--red); font-style: italic; font-weight: 800; }

    /* ----- RCASE: single magazine-style case study (replaces v4 work stack) ----- */
    .rcase { background: var(--surface); }
    .rcase-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
    @media (max-width: 940px) { .rcase-grid { grid-template-columns: 1fr; gap: 28px; } }
    .rcase-img { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 5/4; }
    .rcase-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
    .rcase-img:hover img { transform: scale(1.03); }
    .rcase-stamp { position: absolute; top: 18px; left: 18px; padding: 7px 14px; background: rgba(10,10,11,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 999px; }
    .rcase-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 18px); }
    .rcase-h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; margin: 0; color: var(--ink); }
    .rcase-h2 em { font-style: italic; color: var(--red); font-weight: 900; }
    .rcase-copy p { font-size: clamp(15px, 1.7vw, 17px); color: var(--muted); line-height: 1.7; font-weight: 500; margin: 0; }
    .rcase-copy p em { color: var(--red); font-style: italic; font-weight: 800; }
    .rcase-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 8px 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .rcase-stat { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
    .rcase-stat dt { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0; }
    .rcase-stat dd { font-size: 15.5px; font-weight: 800; letter-spacing: -0.005em; color: var(--ink); margin: 0; }
    .rcase-stat dd em { color: var(--red); font-style: italic; font-weight: 900; font-feature-settings: "tnum" 1; }
    .rcase-foot { font-size: 13.5px; color: var(--muted); font-weight: 500; margin-top: 4px; }

    /* ============================================================
       V7 EXPERIMENTAL SECTIONS — pending Matt approval (2026-05-28)
       Logo stamp · Aberdeen drone · Roof types SEO · DIY-fails · Seasonal timing
       ============================================================ */

    /* V7-A. LOGO BRAND-STAMP */
    .v7-logo-stamp { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; background: var(--black); color: var(--white); overflow: hidden; }
    .v7-logo-stamp-beam { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: clamp(420px, 60vw, 920px); height: 60%; background: radial-gradient(50% 100% at 50% 0%, rgba(207,32,43,0.22), transparent 70%); filter: blur(36px); z-index: -1; pointer-events: none; }
    .v7-logo-stamp-halo { position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); width: 80vw; height: 60vw; max-width: 1200px; background: radial-gradient(50% 60% at 50% 100%, rgba(207,32,43,0.16), transparent 70%); filter: blur(70px); z-index: -1; pointer-events: none; }
    .v7-logo-stamp-shell { text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); }
    .v7-logo-stamp .eyebrow { color: var(--red); background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); padding: 5px 12px; border-radius: 999px; }
    .v7-logo-stamp-h2 { font-size: clamp(28px, 5.4vw, 56px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.1; color: var(--white); margin: 0; max-width: 22ch; }
    .v7-logo-stamp-h2 em { font-style: italic; color: var(--red); font-weight: 900; }
    .v7-logo-stamp-stage { position: relative; width: clamp(260px, 46vw, 480px); aspect-ratio: 1 / 1; border-radius: clamp(20px, 3vw, 28px); overflow: hidden; background: var(--black-2); box-shadow: 0 20px 50px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.14), 0 0 0 10px rgba(207,32,43,0.06), 0 0 140px rgba(207,32,43,0.4); margin: clamp(8px, 2vw, 18px) auto 0; }
    .v7-logo-stamp-video, .v7-logo-stamp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }
    .v7-logo-stamp-img { transform: scale(1.02); transition: transform 14s linear; }
    .v7-logo-stamp-stage.is-visible .v7-logo-stamp-img { transform: scale(1.08); }
    .v7-logo-stamp-tag { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; background: rgba(10,10,11,0.78); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .v7-logo-stamp-video::-webkit-media-controls,
    .v7-logo-stamp-video::-webkit-media-controls-enclosure,
    .v7-logo-stamp-video::-webkit-media-controls-panel,
    .v7-logo-stamp-video::-webkit-media-controls-start-playback-button,
    .v7-logo-stamp-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }
    .v7-logo-stamp-corner { position: absolute; width: 28px; height: 28px; border: 2px solid var(--red); opacity: 0.7; pointer-events: none; }
    .v7-logo-stamp-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
    .v7-logo-stamp-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
    .v7-logo-stamp-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
    .v7-logo-stamp-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
    .v7-logo-stamp-foot { font-size: clamp(14px, 1.7vw, 17px); color: rgba(255,255,255,0.72); font-weight: 500; max-width: 56ch; margin: clamp(8px, 1.5vw, 14px) auto 0; line-height: 1.65; }
    .v7-logo-stamp-foot em { color: var(--red); font-style: italic; font-weight: 800; }

    /* V7-B. ABERDEEN DRONE FLY-OVER */
    .v7-aberdeen { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; overflow: hidden; background: var(--black); color: var(--white); }
    .v7-aberdeen-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; filter: brightness(0.52) saturate(0.9); transform: scale(1.04); }
    .v7-aberdeen-video::-webkit-media-controls,
    .v7-aberdeen-video::-webkit-media-controls-enclosure,
    .v7-aberdeen-video::-webkit-media-controls-panel,
    .v7-aberdeen-video::-webkit-media-controls-start-playback-button,
    .v7-aberdeen-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }
    .v7-aberdeen-overlay { position: absolute; inset: 0; z-index: -1; background:
      linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.32) 35%, rgba(10,10,11,0.78) 100%),
      radial-gradient(60% 60% at 12% 80%, rgba(207,32,43,0.22), transparent 60%); pointer-events: none; }
    .v7-aberdeen-shell { display: grid; gap: clamp(20px, 3vw, 36px); max-width: 900px; }
    .v7-aberdeen .v7-aberdeen-eyebrow { color: var(--red); background: rgba(207,32,43,0.18); border: 1px solid rgba(207,32,43,0.32); padding: 5px 12px; border-radius: 999px; width: fit-content; }
    .v7-aberdeen-h2 { font-size: clamp(32px, 6.4vw, 72px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; margin: 0; color: var(--white); max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
    .v7-aberdeen-body { font-size: clamp(16px, 1.9vw, 19px); color: rgba(255,255,255,0.86); line-height: 1.65; font-weight: 500; max-width: 60ch; text-shadow: 0 1px 14px rgba(0,0,0,0.5); margin: 0; }
    .v7-aberdeen-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); }
    @media (max-width: 720px) { .v7-aberdeen-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
    .v7-aberdeen-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .v7-aberdeen-stat-num { font-size: clamp(36px, 5.4vw, 56px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--white); font-feature-settings: "tnum" 1, "lnum" 1; }
    .v7-aberdeen-stat-num em { font-style: italic; color: var(--white); font-weight: 900; }
    .v7-aberdeen-stat-lab { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
    .v7-aberdeen-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; background: var(--red); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 16px; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 32px rgba(207,32,43,0.45), 0 4px 8px rgba(0,0,0,0.18); transition: transform 240ms var(--ease-bold), box-shadow 320ms var(--ease-bold), background 200ms ease; }
    .v7-aberdeen-cta svg { display: inline-block; vertical-align: middle; }
    .v7-aberdeen-cta:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 18px 38px rgba(207,32,43,0.55), 0 6px 12px rgba(0,0,0,0.18); }
    @media (prefers-reduced-motion: reduce) {
      .v7-aberdeen-video, .v7-logo-stamp-video { display: none; }
      .v7-aberdeen { background-image: url('/images/gcj/gcj-7-gallery.jpg'); background-size: cover; background-position: center; }
    }

    /* V7-C (Roof types) styles removed in v8 — section deleted (Matt: "not a fan"). */


    /* V8-D. DIY vs PRO — dark surface, cross-out h2, comparison table, brief copy, CTA */
    .v8-diy { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; background: var(--black); color: var(--white); overflow: hidden; }
    .v8-diy-glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.28; z-index: -1; pointer-events: none; }
    .v8-diy-glow-1 { width: 52vw; height: 52vw; top: -22vw; left: -14vw; background: radial-gradient(circle, var(--red), transparent 70%); }
    .v8-diy-glow-2 { width: 38vw; height: 38vw; bottom: -16vw; right: -10vw; background: radial-gradient(circle, hsl(355 50% 30%), transparent 70%); }
    .v8-diy .section-head .eyebrow { background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); color: var(--red); padding: 5px 12px; border-radius: 999px; }
    .v8-diy-h2 { font-size: clamp(30px, 5.6vw, 56px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--white); margin: 0; max-width: 22ch; }
    .v8-diy-h2 em.em-strike { color: rgba(255,255,255,0.5); font-style: italic; font-weight: 800; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 4px; text-decoration-skip-ink: none; }
    .v8-diy-h2 em.em-draw { color: var(--white); font-style: italic; font-weight: 900; }
    .v8-diy .section-head .lead { color: rgba(255,255,255,0.78); max-width: 56ch; }
    .v8-diy .section-head .lead em { color: var(--red); font-style: italic; font-weight: 800; }
    /* Comparison table — full-width 3-col grid with sticky-feeling header */
    .v8-diy-table { max-width: 880px; margin: clamp(28px, 4vw, 44px) auto 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; }
    .v8-diy-table-head, .v8-diy-table-row { display: grid; grid-template-columns: 1fr 120px 120px; gap: 12px; align-items: center; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    @media (max-width: 720px) { .v8-diy-table-head, .v8-diy-table-row { grid-template-columns: 1fr 76px 76px; gap: 8px; padding: 14px 18px; } }
    @media (max-width: 480px) { .v8-diy-table-head, .v8-diy-table-row { grid-template-columns: 1fr 58px 58px; gap: 6px; padding: 12px 14px; } }
    .v8-diy-table-row:last-child { border-bottom: 0; }
    .v8-diy-table-head { background: rgba(255,255,255,0.06); border-bottom-color: rgba(255,255,255,0.16); }
    .v8-diy-cell { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: rgba(255,255,255,0.85); }
    .v8-diy-cell em { color: var(--red); font-style: italic; font-weight: 800; }
    .v8-diy-table-head .v8-diy-cell { font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.65); }
    .v8-diy-cell--us, .v8-diy-cell--diy { display: grid; place-items: center; text-align: center; }
    .v8-diy-table-head .v8-diy-cell--us { color: var(--red); }
    .v8-diy-table-head .v8-diy-cell--diy { color: rgba(255,255,255,0.55); }
    .v8-diy-cell.is-yes { color: var(--red); }
    .v8-diy-cell.is-yes svg { width: 22px; height: 22px; display: block; }
    .v8-diy-cell.is-no { color: rgba(255,255,255,0.32); }
    .v8-diy-cell.is-no svg { width: 18px; height: 18px; display: block; opacity: 0.7; }
    .v8-diy-foot { text-align: center; margin: clamp(24px, 3vw, 32px) auto 0; max-width: 56ch; color: rgba(255,255,255,0.7); font-weight: 500; font-size: 14.5px; line-height: 1.65; }
    .v8-diy-foot em { color: var(--white); font-style: italic; font-weight: 800; }
    .v8-diy-cta-wrap { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 32px); }
    .v8-diy-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 32px; background: var(--red); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 16px; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 16px 36px rgba(207,32,43,0.5), 0 6px 12px rgba(0,0,0,0.18); transition: transform 240ms var(--ease-bold), background 220ms ease, box-shadow 320ms var(--ease-bold); }
    .v8-diy-cta svg { display: inline-block; vertical-align: middle; transition: transform 280ms var(--ease-bold); }
    .v8-diy-cta:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 22px 44px rgba(207,32,43,0.6), 0 8px 16px rgba(0,0,0,0.18); }
    .v8-diy-cta:hover svg { transform: translateX(4px); }

    /* V7-E. WHEN TO CLEAN — seasonal grid */
    .v7-when-h2 { font-size: clamp(28px, 5.4vw, 52px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin: 0; }
    .v7-when-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); margin: clamp(28px, 4vw, 44px) 0 0; }
    @media (max-width: 900px) { .v7-when-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 540px) { .v7-when-grid { grid-template-columns: 1fr; } }
    .v7-when-card { position: relative; padding: clamp(22px, 2.4vw, 28px) clamp(20px, 2.2vw, 24px); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; transition: border-color 240ms ease, transform 320ms var(--ease-bold), box-shadow 320ms var(--ease-bold); overflow: hidden; }
    .v7-when-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); opacity: 0.7; }
    .v7-when-card:hover { border-color: rgba(207,32,43,0.28); transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .v7-when-tag { display: inline-flex; align-self: flex-start; padding: 5px 11px; background: rgba(207,32,43,0.08); color: var(--red); font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; border-radius: 999px; border: 1px solid rgba(207,32,43,0.22); }
    .v7-when-card--summer .v7-when-tag { background: rgba(15,23,42,0.06); color: var(--ink); border-color: var(--line); }
    .v7-when-card--autumn::before { opacity: 1; }
    .v7-when-card--autumn .v7-when-tag { background: var(--red); color: var(--white); border-color: var(--red); }
    .v7-when-card h3 { font-size: clamp(17px, 1.9vw, 19px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0; }
    .v7-when-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; }
    .v7-when-card p em { color: var(--red); font-style: italic; font-weight: 800; }
    .v7-when-best { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); font-weight: 500; }
    .v7-when-best strong { color: var(--ink); font-weight: 900; }
    .v7-when-foot { text-align: center; margin-top: clamp(28px, 4vw, 40px); font-size: 14px; color: var(--muted); font-weight: 500; max-width: 56ch; margin-left: auto; margin-right: auto; }

    /* VX experimental sections appended for roof-cleaning visual exploration */
    .vx-marquee { position: relative; overflow: hidden; background: var(--black); color: var(--white); border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--white) 12%, transparent); }
    .vx-marquee-track { display: flex; width: max-content; animation: vx-marquee-loop 24s linear infinite; }
    .vx-marquee-row { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); padding: 18px clamp(22px, 5vw, 64px) 18px 0; white-space: nowrap; font-size: 13px; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--white) 84%, transparent); }
    .vx-marquee-row:first-child { padding-left: clamp(22px, 5vw, 64px); }
    .vx-marquee-row span[aria-hidden="true"] { color: var(--red); }
    @keyframes vx-marquee-loop { to { transform: translate3d(-50%, 0, 0); } }

    .vx-stats { position: relative; padding: var(--space-section) 0; background: var(--black-2); color: var(--white); overflow: hidden; }
    .vx-stats .eyebrow { color: var(--red); }
    .vx-stats .lead { color: color-mix(in srgb, var(--white) 74%, transparent); }
    .vx-stats em { color: var(--red); font-style: italic; }
    .vx-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); margin-top: clamp(30px, 4vw, 48px); }
    .vx-stat-card { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--white) 14%, transparent); background: color-mix(in srgb, var(--white) 5%, transparent); box-shadow: var(--shadow-sm); }
    .vx-stat-card:first-child { grid-column: span 2; background: color-mix(in srgb, var(--red) 14%, var(--black-2)); border-color: color-mix(in srgb, var(--red) 34%, transparent); }
    .vx-stat-value { display: flex; align-items: baseline; gap: 4px; font-size: 72px; font-weight: 900; line-height: 0.9; color: var(--white); font-feature-settings: "tnum" 1, "lnum" 1; }
    .vx-stat-suffix { color: var(--red); font-size: 0.46em; }
    .vx-stat-card h3 { margin: 0; color: var(--white); font-size: 18px; font-weight: 900; line-height: 1.15; }
    .vx-stat-card p { margin: 0; color: color-mix(in srgb, var(--white) 68%, transparent); font-size: 13px; font-weight: 600; line-height: 1.55; }

    .vx-spotlight { padding: var(--space-section-lg) 0; background: var(--surface); color: var(--ink); }
    .vx-spotlight-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
    .vx-spotlight .lead { max-width: 56ch; }
    .vx-spotlight em { color: var(--red); font-style: italic; }
    .vx-spotlight-stage { --vx-spot-x: 50%; --vx-spot-y: 50%; position: relative; aspect-ratio: 4 / 3; min-height: 360px; overflow: hidden; border-radius: var(--r-xl); background: var(--black); box-shadow: var(--shadow-lg); cursor: none; touch-action: none; }
    .vx-spotlight-img { width: 100%; height: 100%; display: block; object-fit: cover; }
    .vx-spotlight-img--after { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(circle 150px at var(--vx-spot-x) var(--vx-spot-y), var(--black) 98%, transparent 100%); mask-image: radial-gradient(circle 150px at var(--vx-spot-x) var(--vx-spot-y), var(--black) 98%, transparent 100%); }
    .vx-spotlight-ring { position: absolute; left: var(--vx-spot-x); top: var(--vx-spot-y); width: 166px; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--white) 82%, transparent); box-shadow: 0 0 0 999px color-mix(in srgb, var(--black) 18%, transparent); transform: translate(-50%, -50%); pointer-events: none; }
    .vx-spotlight-label { position: absolute; z-index: 2; bottom: 16px; display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--black) 72%, transparent); color: var(--white); font-size: 12px; font-weight: 900; line-height: 1; }
    .vx-spotlight-label--before { left: 16px; }
    .vx-spotlight-label--after { right: 16px; background: var(--red); }

    .vx-bento { padding: var(--space-section-lg) 0; background: var(--cream); color: var(--ink); }
    .vx-bento em { color: var(--red); font-style: italic; }
    .vx-bento-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); margin-top: clamp(30px, 4vw, 48px); }
    .vx-bento-tile { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 260ms var(--ease-bold), box-shadow 260ms var(--ease-bold), border-color 260ms var(--ease-bold); }
    .vx-bento-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--red) 34%, var(--line)); box-shadow: var(--shadow-md); }
    .vx-bento-photo { grid-column: span 3; grid-row: span 2; min-height: 420px; padding: 0; }
    .vx-bento-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
    .vx-bento-stat { grid-column: span 2; background: var(--black); color: var(--white); border-color: color-mix(in srgb, var(--white) 14%, transparent); }
    .vx-bento-stat strong { display: block; font-size: 64px; font-weight: 900; line-height: 0.9; color: var(--red); font-feature-settings: "tnum" 1, "lnum" 1; }
    .vx-bento-stat span, .vx-bento-quote cite, .vx-bento-process span { color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.45; }
    .vx-bento-stat span { color: color-mix(in srgb, var(--white) 68%, transparent); }
    .vx-bento-cta { grid-column: span 1; background: var(--red); color: var(--white); border-color: var(--red); }
    .vx-bento-cta-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--white); text-decoration: none; font-size: 20px; font-weight: 900; line-height: 1.15; }
    .vx-bento-cta-link svg { flex: 0 0 auto; transition: transform 240ms var(--ease-bold); }
    .vx-bento-cta-link:hover svg { transform: translateX(4px); }
    .vx-bento-quote { grid-column: span 3; }
    .vx-bento-quote blockquote { margin: 0; color: var(--ink); font-size: clamp(20px, 3vw, 34px); font-weight: 900; line-height: 1.08; }
    .vx-bento-quote cite { font-style: normal; }
    .vx-bento-process { grid-column: span 3; background: var(--black-3); color: var(--white); border-color: color-mix(in srgb, var(--white) 14%, transparent); }
    .vx-bento-process h3, .vx-bento-cta h3 { margin: 0; color: inherit; font-size: 24px; font-weight: 900; line-height: 1.1; }
    .vx-bento-process span { color: color-mix(in srgb, var(--white) 70%, transparent); }

    .vx-flip { padding: var(--space-section) 0; background: var(--cream); color: var(--ink); }
    .vx-flip em { color: var(--red); font-style: italic; }
    .vx-flip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 18px); margin-top: clamp(28px, 4vw, 44px); }
    .vx-flip-card { appearance: none; position: relative; min-height: 260px; padding: 0; border: 0; border-radius: var(--r-lg); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; perspective: 1100px; }
    .vx-flip-card:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
    .vx-flip-card-inner { position: relative; display: block; min-height: 260px; width: 100%; transform-style: preserve-3d; transition: transform 620ms var(--ease-bold); }
    .vx-flip-card:hover .vx-flip-card-inner, .vx-flip-card:focus-visible .vx-flip-card-inner, .vx-flip-card.is-flipped .vx-flip-card-inner { transform: rotateY(180deg); }
    .vx-flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
    .vx-flip-back { transform: rotateY(180deg); background: var(--black); color: var(--white); border-color: color-mix(in srgb, var(--white) 14%, transparent); }
    .vx-flip-num { color: var(--red); font-size: 15px; font-weight: 900; font-feature-settings: "tnum" 1, "lnum" 1; }
    .vx-flip-front strong { display: block; color: var(--ink); font-size: 30px; font-weight: 900; line-height: 1; }
    .vx-flip-front small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.45; }
    .vx-flip-back strong { display: block; color: var(--red); font-size: 20px; font-weight: 900; line-height: 1.1; }
    .vx-flip-back span { color: color-mix(in srgb, var(--white) 74%, transparent); font-size: 14px; font-weight: 650; line-height: 1.55; }

    .vx-pull-quote { padding: var(--space-section-lg) 0; background: var(--black); color: var(--white); overflow: hidden; }
    .vx-pull-quote-inner { max-width: 1120px; margin: 0; }
    .vx-pull-quote blockquote { margin: 0; color: var(--white); font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; line-height: 1.08; }
    .vx-pull-quote em { color: var(--red); font-style: italic; }
    .vx-pull-quote figcaption { margin-top: clamp(22px, 3vw, 34px); color: color-mix(in srgb, var(--white) 68%, transparent); font-size: 15px; font-weight: 800; }

    .vx-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 10px var(--shell-x); background: var(--black); color: var(--white); border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); box-shadow: var(--shadow-lg); transform: translateY(115%); opacity: 0; pointer-events: none; transition: transform 280ms var(--ease-bold), opacity 220ms var(--ease-bold); }
    .vx-sticky-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .vx-sticky-bar-inner { max-width: 1180px; min-height: 50px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; }
    .vx-sticky-bar-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 22px; border-radius: var(--r-pill); background: var(--red); color: var(--white); text-decoration: none; font-size: 15px; font-weight: 900; line-height: 1.15; box-shadow: var(--shadow-sm); }
    .vx-sticky-bar-link strong { font-weight: 900; font-feature-settings: "tnum" 1, "lnum" 1; }
    .vx-sticky-dismiss { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--white) 16%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; }
    .vx-sticky-dismiss:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

    @media (max-width: 900px) {
      .vx-stats-grid, .vx-flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .vx-stat-card:first-child { grid-column: span 2; }
      .vx-spotlight-layout { grid-template-columns: 1fr; }
      .vx-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .vx-bento-photo, .vx-bento-stat, .vx-bento-cta, .vx-bento-quote, .vx-bento-process { grid-column: auto; }
    }

    @media (max-width: 420px) {
      .vx-marquee { min-height: 46px; }
      .vx-marquee-row { gap: 16px; padding: 16px 22px 16px 0; font-size: 12px; }
      .vx-marquee-row:first-child { padding-left: 22px; }
      .vx-stats { padding: var(--space-section-sm) 0; }
      .vx-stats-grid { grid-template-columns: 1fr; gap: 12px; }
      .vx-stat-card, .vx-stat-card:first-child { grid-column: auto; min-height: 152px; padding: 22px; }
      .vx-stat-value { font-size: 52px; }
      .vx-spotlight { padding: var(--space-section-sm) 0; }
      .vx-spotlight-layout { grid-template-columns: 1fr; gap: 24px; }
      .vx-spotlight-stage { aspect-ratio: 3 / 4; min-height: 0; border-radius: var(--r-lg); cursor: default; }
      .vx-spotlight-img--after { -webkit-mask-image: radial-gradient(circle 112px at var(--vx-spot-x) var(--vx-spot-y), var(--black) 98%, transparent 100%); mask-image: radial-gradient(circle 112px at var(--vx-spot-x) var(--vx-spot-y), var(--black) 98%, transparent 100%); }
      .vx-spotlight-ring { width: 126px; }
      .vx-spotlight-label { bottom: 12px; min-height: 32px; font-size: 11px; }
      .vx-spotlight-label--before { left: 12px; }
      .vx-spotlight-label--after { right: 12px; }
      .vx-bento { padding: var(--space-section-sm) 0; }
      .vx-bento-grid { grid-template-columns: 1fr; gap: 12px; }
      .vx-bento-tile, .vx-bento-photo, .vx-bento-stat, .vx-bento-cta, .vx-bento-quote, .vx-bento-process { grid-column: auto; grid-row: auto; min-height: 170px; }
      .vx-bento-photo { aspect-ratio: 1; min-height: 0; }
      .vx-bento-stat strong { font-size: 52px; }
      .vx-bento-quote blockquote { font-size: 24px; line-height: 1.12; }
      .vx-flip { padding: var(--space-section-sm) 0; }
      .vx-flip-grid { grid-template-columns: 1fr; gap: 12px; }
      .vx-flip-card, .vx-flip-card-inner { min-height: 220px; }
      .vx-flip-front strong { font-size: 26px; }
      .vx-pull-quote { padding: var(--space-section-sm) 0; }
      .vx-pull-quote blockquote { font-size: 2rem; line-height: 1.12; }
      .vx-sticky-bar { padding: 8px 10px; }
      .vx-sticky-bar-inner { justify-content: space-between; gap: 8px; }
      .vx-sticky-bar-link { flex: 1 1 auto; min-height: 44px; padding: 10px 14px; flex-wrap: wrap; font-size: 13px; }
      .vx-sticky-dismiss { flex-basis: 44px; }
    }

    @media (hover: none) {
      .vx-flip-card:hover .vx-flip-card-inner { transform: none; }
      .vx-flip-card.is-flipped .vx-flip-card-inner, .vx-flip-card:focus-visible .vx-flip-card-inner { transform: rotateY(180deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .vx-marquee-track { animation: none; transform: none; }
      .vx-stat-card, .vx-spotlight-ring, .vx-bento-tile, .vx-bento-cta-link svg, .vx-flip-card-inner, .vx-sticky-bar { transition: none; }
    }

    /* ============================================================
       V10 VY SECTIONS — 10 additional test sections
       Namespace: vy-*. Complements Codex's vx-* set. Brand-safe.
       ============================================================ */

    /* VY-1. Typography hero */
    .vy-typography { padding: clamp(80px, 11vw, 160px) 0; background: var(--black); color: var(--white); position: relative; isolation: isolate; overflow: hidden; }
    .vy-typography::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(207,32,43,0.14), transparent 70%); z-index: -1; pointer-events: none; }
    .vy-typography-shell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(20px, 3vw, 32px); }
    .vy-typography .eyebrow { color: var(--red); background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); padding: 5px 12px; border-radius: 999px; }
    .vy-typography-h2 { font-size: clamp(48px, 11vw, 152px); font-weight: 900; letter-spacing: -0.045em; line-height: 0.92; color: var(--white); margin: 0; max-width: 18ch; }
    .vy-typography-line { display: block; }
    .vy-typography-line em { font-style: italic; font-weight: 900; color: var(--red); padding: 0 0.05em; }
    .vy-typography-foot { font-size: clamp(15px, 1.7vw, 18px); color: rgba(255,255,255,0.72); font-weight: 500; max-width: 50ch; line-height: 1.6; margin: 0; }
    .vy-typography-foot em { color: var(--red); font-style: italic; font-weight: 800; }

    /* VY-2. Split-scroll */
    .vy-split { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; overflow: hidden; color: var(--ink); transition: color 700ms var(--ease-bold); }
    .vy-split-bg { position: absolute; inset: 0; z-index: -1; background: var(--cream); transition: background 800ms var(--ease-bold); }
    .vy-split.is-darkened { color: var(--white); }
    .vy-split.is-darkened .vy-split-bg { background: var(--black); }
    .vy-split.is-darkened .vy-split-eyebrow { color: var(--red); background: rgba(207,32,43,0.16); border-color: rgba(207,32,43,0.32); }
    .vy-split.is-darkened .vy-split-step { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: var(--white); }
    .vy-split.is-darkened .vy-split-step strong { color: var(--white); }
    .vy-split.is-darkened .vy-split-step span { color: rgba(255,255,255,0.7); }
    .vy-split-shell { display: grid; gap: clamp(24px, 3vw, 36px); max-width: 880px; margin: 0 auto; }
    .vy-split-eyebrow { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; width: fit-content; transition: color 600ms ease, background 600ms ease, border-color 600ms ease; }
    .vy-split-h2 { font-size: clamp(32px, 6vw, 64px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 0; max-width: 14ch; }
    .vy-split-h2 em { color: var(--red); font-style: italic; font-weight: 900; }
    .vy-split.is-darkened .vy-split-h2 em { color: var(--red); }
    .vy-split-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(10px, 1.4vw, 14px); }
    .vy-split-step { padding: clamp(16px, 2vw, 22px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 4px; transition: background 600ms ease, border-color 600ms ease, color 600ms ease; }
    .vy-split-step strong { font-size: clamp(16px, 1.9vw, 19px); font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
    .vy-split-step span { font-size: 14px; color: var(--muted); font-weight: 500; }

    /* VY-3. Coverage map */
    .vy-map-wrap { position: relative; max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.6vw, 32px); box-shadow: var(--shadow-md); }
    .vy-map-svg { width: 100%; height: auto; display: block; }
    .vy-map-readout { margin-top: 16px; padding: 12px 16px; background: var(--cream); border-radius: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); border: 1px dashed var(--line); transition: color 200ms ease, background 200ms ease; }
    .vy-map-readout em { color: var(--red); font-style: italic; font-weight: 800; }
    .vy-map-readout strong { color: var(--ink); font-weight: 900; }
    .vy-map-readout.is-active { color: var(--ink); background: var(--surface); border-style: solid; }

    /* VY-4. Warranty card */ }

    /* VY-5. Cost anchor */
    .vy-cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 18px); margin: clamp(28px, 4vw, 44px) 0 0; max-width: 1040px; margin-left: auto; margin-right: auto; }
    @media (max-width: 820px) { .vy-cost-grid { grid-template-columns: 1fr; } }
    .vy-cost-col { padding: clamp(22px, 2.4vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
    .vy-cost-col.is-mid { border-color: rgba(207,32,43,0.32); background: linear-gradient(170deg, rgba(207,32,43,0.10), var(--surface) 70%); }
    .vy-cost-col.is-bad { background: var(--black); color: var(--white); border-color: var(--black); }
    .vy-cost-tag { display: inline-flex; align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; background: rgba(15,23,42,0.06); color: var(--ink); }
    .vy-cost-col.is-mid .vy-cost-tag { background: rgba(207,32,43,0.12); color: var(--red); }
    .vy-cost-col.is-bad .vy-cost-tag { background: var(--red); color: var(--white); }
    .vy-cost-col h3 { font-size: clamp(18px, 2.1vw, 22px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0; }
    .vy-cost-col.is-bad h3 { color: var(--white); }
    .vy-cost-col p { font-size: 14px; color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; }
    .vy-cost-col.is-bad p { color: rgba(255,255,255,0.78); }
    .vy-cost-list { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed rgba(15,23,42,0.18); font-size: 13px; color: var(--ink); font-weight: 600; }
    .vy-cost-col.is-bad .vy-cost-list { color: rgba(255,255,255,0.78); border-top-color: rgba(255,255,255,0.18); }
    .vy-cost-list li { padding-left: 16px; position: relative; }
    .vy-cost-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--red); }
    .vy-cost-foot { text-align: center; margin: clamp(24px, 3vw, 32px) auto 0; max-width: 60ch; font-size: 14.5px; color: var(--muted); font-weight: 500; line-height: 1.65; }
    .vy-cost-foot em { color: var(--ink); font-style: italic; font-weight: 800; }

    /* VY-6. Google card */
    .vy-google-shell { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
    @media (max-width: 820px) { .vy-google-shell { grid-template-columns: 1fr; } }
    .vy-google-copy h2 { font-size: clamp(28px, 4.6vw, 48px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); margin: 0 0 14px; max-width: 16ch; }
    .vy-google-copy h2 em { color: var(--red); font-style: italic; font-weight: 900; }
    .vy-google-copy p { font-size: clamp(15px, 1.7vw, 17px); color: var(--muted); line-height: 1.65; font-weight: 500; margin: 0 0 18px; max-width: 44ch; }
    .vy-google-link { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--invert); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; transition: background 200ms ease; }
    .vy-google-link:hover { background: var(--red); }
    .vy-google-card { background: var(--surface); border: 1px solid #dadce0; border-radius: 12px; box-shadow: 0 1px 2px rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); padding: 22px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, var(--font); max-width: 480px; margin: 0 auto; }
    .vy-google-card-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #e8eaed; margin-bottom: 16px; }
    .vy-google-card-avatar { width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, #4285f4, #1a73e8); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
    .vy-google-card-meta { display: flex; flex-direction: column; }
    .vy-google-card-meta strong { font-size: 16px; font-weight: 700; color: #202124; line-height: 1.25; }
    .vy-google-card-meta span { font-size: 13px; color: #5f6368; font-weight: 400; }
    .vy-google-card-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .vy-google-card-num { font-size: 32px; font-weight: 700; color: #202124; line-height: 1; }
    .vy-google-card-stars { display: inline-flex; gap: 2px; }
    .vy-google-card-stars svg { width: 18px; height: 18px; }
    .vy-google-card-count { font-size: 13px; color: #5f6368; font-weight: 400; }
    .vy-google-card-bars { display: grid; gap: 6px; margin-bottom: 16px; }
    .vy-google-card-bar { display: grid; grid-template-columns: 12px 1fr 24px; gap: 8px; align-items: center; font-size: 12px; color: #5f6368; }
    .vy-google-card-bar-track { display: block; background: #e8eaed; border-radius: 4px; overflow: hidden; height: 6px; }
    .vy-google-card-bar-track > span { display: block; height: 100%; background: #fbbc04; border-radius: 4px; }
    .vy-google-card-foot { display: flex; gap: 16px; padding-top: 14px; border-top: 1px solid #e8eaed; font-size: 13px; color: #5f6368; font-weight: 500; }
    .vy-google-card-foot span { display: inline-flex; align-items: center; gap: 6px; }
    .vy-google-card-foot svg { color: #5f6368; }

    /* VY-7. Timeline horizontal */
    .vy-timeline-scroll { display: flex; gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x proximity; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; padding: 8px 4px clamp(20px, 3vw, 32px); margin: clamp(20px, 3vw, 32px) calc(var(--shell-x) * -1) 0; padding-left: var(--shell-x); padding-right: var(--shell-x); }
    .vy-timeline-scroll::-webkit-scrollbar { height: 6px; }
    .vy-timeline-scroll::-webkit-scrollbar-track { background: rgba(15,23,42,0.06); border-radius: 3px; }
    .vy-timeline-scroll::-webkit-scrollbar-thumb { background: rgba(207,32,43,0.4); border-radius: 3px; }
    .vy-timeline-card { flex: 0 0 clamp(240px, 28vw, 320px); scroll-snap-align: start; padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
    .vy-timeline-year { font-size: clamp(32px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.04em; color: var(--ink); font-style: italic; font-feature-settings: "tnum" 1, "lnum" 1; line-height: 1; }
    .vy-timeline-card h3 { font-size: clamp(16px, 1.9vw, 19px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0; }
    .vy-timeline-card p { font-size: 14px; color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; }
    .vy-timeline-card p em { color: var(--red); font-style: italic; font-weight: 800; }
    .vy-timeline-card--key { border-color: var(--red); background: linear-gradient(170deg, rgba(207,32,43,0.10), var(--surface) 70%); }
    .vy-timeline-card--key .vy-timeline-year { color: var(--red); }
    .vy-timeline-card--now { background: var(--black); color: var(--white); border-color: var(--black); }
    .vy-timeline-card--now .vy-timeline-year { color: var(--red); }
    .vy-timeline-card--now h3 { color: var(--white); }
    .vy-timeline-card--now p { color: rgba(255,255,255,0.78); }
    .vy-timeline-card--now p em { color: var(--red); }
    .vy-timeline-hint { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.4px; text-align: center; }

    /* VY-8. Roof anatomy */
    .vy-anatomy-wrap { max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.6vw, 32px); box-shadow: var(--shadow-md); }
    .vy-anatomy-svg { width: 100%; height: auto; display: block; }
    .vy-anatomy-point { cursor: pointer; transition: transform 220ms var(--ease-bold); transform-origin: center; }
    .vy-anatomy-point:hover, .vy-anatomy-point:focus { transform: scale(1.15); }
    .vy-anatomy-point.is-active circle:first-child { fill: var(--red-dark); }
    .vy-anatomy-readout { margin-top: 16px; padding: 14px 18px; background: var(--surface); border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; border: 1px dashed var(--line); transition: color 200ms ease, background 200ms ease, border-style 200ms ease; }
    .vy-anatomy-readout em { color: var(--red); font-style: italic; font-weight: 800; }
    .vy-anatomy-readout strong { color: var(--ink); font-weight: 900; }
    .vy-anatomy-readout.is-active { color: var(--ink); background: var(--cream); border-style: solid; }

    /* VY-9. Toggle comparison */
    .vy-toggle { position: relative; padding: clamp(72px, 10vw, 140px) 0; background: var(--black); color: var(--white); isolation: isolate; overflow: hidden; }
    .vy-toggle-glow { position: absolute; inset: -10% -10% auto auto; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px; background: radial-gradient(circle, rgba(207,32,43,0.18), transparent 70%); filter: blur(80px); z-index: -1; pointer-events: none; }
    .vy-toggle .eyebrow { color: var(--red); background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); padding: 5px 12px; border-radius: 999px; }
    .vy-toggle .section-head h2 { color: var(--white); }
    .vy-toggle .section-head h2 em { color: var(--white); }
    .vy-toggle .section-head .lead { color: rgba(255,255,255,0.78); }
    .vy-toggle-tabs { display: inline-flex; gap: 6px; padding: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; margin: clamp(20px, 3vw, 32px) auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .vy-toggle-tab { padding: 9px 18px; background: transparent; border: 0; color: rgba(255,255,255,0.7); font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: -0.005em; border-radius: 999px; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
    .vy-toggle-tab:hover { color: var(--white); }
    .vy-toggle-tab.is-active { background: var(--red); color: var(--white); }
    .vy-toggle-table { max-width: 760px; margin: 0 auto; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .vy-toggle-row { display: grid; grid-template-columns: 1fr 90px 90px; gap: 8px; align-items: center; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    @media (max-width: 540px) { .vy-toggle-row { grid-template-columns: 1fr 58px 58px; gap: 6px; padding: 12px 14px; } }
    .vy-toggle-row:last-child { border-bottom: 0; }
    .vy-toggle-row--head { background: rgba(255,255,255,0.06); border-bottom-color: rgba(255,255,255,0.16); }
    .vy-toggle-row--head .vy-toggle-cell { font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,0.65); }
    .vy-toggle-row--head .vy-toggle-cell--us { color: var(--red); }
    .vy-toggle-cell { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.4; }
    .vy-toggle-cell--them, .vy-toggle-cell--us { display: grid; place-items: center; text-align: center; font-size: 20px; line-height: 1; font-weight: 900; }
    .vy-toggle-cell.is-yes { color: var(--red); }
    .vy-toggle-cell.is-no { color: rgba(255,255,255,0.35); }
    .vy-toggle-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; background: var(--red); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 12px 28px rgba(207,32,43,0.5); transition: transform 240ms var(--ease-bold), background 200ms ease; margin: clamp(24px, 3vw, 32px) auto 0; }
    .vy-toggle-cta:hover { background: var(--red-dark); transform: translateY(-2px); }

    /* VY-10. Text reveal on scroll */
    .vy-fill { padding: clamp(80px, 11vw, 160px) 0; background: var(--cream); }
    .vy-fill-shell { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vw, 32px); max-width: 920px; margin: 0 auto; }
    .vy-fill-text { font-size: clamp(40px, 8vw, 96px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.04; margin: 0; max-width: 14ch; }
    .vy-fill-word { display: inline; color: rgba(15,23,42,0.18); transition: color 700ms var(--ease-bold); }
    .vy-fill-word.is-lit { color: var(--red); }
    .vy-fill-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: var(--invert); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 16px; letter-spacing: -0.005em; text-decoration: none; transition: background 200ms ease, transform 240ms var(--ease-bold); }
    .vy-fill-cta:hover { background: var(--red); transform: translateY(-2px); }

    @media (prefers-reduced-motion: reduce) {
      .vy-split, .vy-split-bg, .vy-split-step, .vy-fill-word { transition: none !important; }
    }

    /* ============================================================
       V11 VZ SECTIONS — 10 more test sections. Velocity batch.
       ============================================================ */

    /* VZ-1. SMS thread */
    .vz-sms-shell { display: grid; grid-template-columns: 1fr 360px; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 1040px; margin: 0 auto; }
    @media (max-width: 860px) { .vz-sms-shell { grid-template-columns: 1fr; } .vz-sms-phone { margin: 0 auto; } }
    .vz-sms-copy h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); margin: 0 0 12px; max-width: 16ch; }
    .vz-sms-copy h2 em { color: var(--red); font-style: italic; font-weight: 900; }
    .vz-sms-copy p { font-size: 15.5px; color: var(--muted); line-height: 1.65; font-weight: 500; margin: 0 0 18px; max-width: 42ch; }
    .vz-sms-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--invert); color: var(--white); border-radius: 999px; font-family: var(--font); font-weight: 800; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; transition: background 200ms ease, transform 240ms var(--ease-bold); }
    .vz-sms-cta:hover { background: var(--red); transform: translateY(-2px); }
    .vz-sms-phone { position: relative; width: 320px; max-width: 100%; background: var(--black); border-radius: 38px; padding: 14px 12px 22px; box-shadow: 0 13px 30px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.18) inset; }
    .vz-sms-phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 100px; height: 22px; background: var(--black); border-radius: 999px; z-index: 2; }
    .vz-sms-thread { background: #f0f0f3; border-radius: 24px; padding: 36px 12px 18px; max-height: 460px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
    .vz-sms-head { display: flex; align-items: center; gap: 10px; padding: 0 6px 10px; border-bottom: 1px solid rgba(15,23,42,0.08); }
    .vz-sms-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--red); color: var(--white); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
    .vz-sms-who { display: flex; flex-direction: column; line-height: 1.15; }
    .vz-sms-who strong { font-size: 13px; font-weight: 800; color: #111418; }
    .vz-sms-who span { font-size: 11px; color: #5b626f; font-weight: 600; font-feature-settings: "tnum" 1; }
    .vz-sms-bubble { max-width: 78%; padding: 10px 12px; border-radius: 18px; font-size: 13px; line-height: 1.4; position: relative; display: flex; flex-direction: column; gap: 6px; }
    .vz-sms-bubble--out { align-self: flex-end; background: #007aff; color: var(--white); border-bottom-right-radius: 4px; }
    .vz-sms-bubble--in { align-self: flex-start; background: #e9e9eb; color: #111418; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
    .vz-sms-bubble--in em { color: var(--red); font-style: italic; font-weight: 800; }
    .vz-sms-attach { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; background: rgba(255,255,255,0.18); border-radius: 10px; }
    .vz-sms-attach svg { color: rgba(255,255,255,0.85); }
    .vz-sms-attach em { font-size: 10px; font-style: normal; font-weight: 700; opacity: 0.85; }
    .vz-sms-time { font-size: 10px; font-weight: 700; opacity: 0.92; align-self: flex-end; font-feature-settings: "tnum" 1; }
    .vz-sms-bubble--in .vz-sms-time { align-self: flex-start; color: #4b5563; }
    .vz-sms-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 14px; background: #e9e9eb; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
    .vz-sms-typing span { width: 6px; height: 6px; border-radius: 999px; background: #8a909c; animation: vzSmsBounce 1.4s ease-in-out infinite; }
    .vz-sms-typing span:nth-child(2) { animation-delay: 0.2s; }
    .vz-sms-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes vzSmsBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

    /* VZ-2. Activity feed */
    .vz-activity-feed { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) auto 0; max-width: 760px; display: grid; gap: 8px; }
    .vz-activity-row { display: grid; grid-template-columns: 12px 88px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
    @media (max-width: 560px) { .vz-activity-row { grid-template-columns: 8px 70px 1fr; padding: 12px 14px; gap: 10px; } .vz-activity-tag { display: none; } }
    .vz-activity-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 0 rgba(207,32,43,0.5); animation: vzActivityPulse 2.2s ease-out infinite; }
    .vz-activity-row:nth-child(n+3) .vz-activity-dot { animation: none; background: var(--muted); opacity: 0.5; box-shadow: none; }
    @keyframes vzActivityPulse { 0% { box-shadow: 0 0 0 0 rgba(207,32,43,0.45); } 100% { box-shadow: 0 0 0 14px rgba(207,32,43,0); } }
    .vz-activity-when { font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px; color: var(--muted); font-feature-settings: "tnum" 1; text-transform: uppercase; }
    .vz-activity-what { font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.4; min-width: 0; }
    .vz-activity-what strong { font-weight: 900; }
    .vz-activity-what em { color: var(--red); font-style: italic; font-weight: 800; }
    .vz-activity-tag { padding: 5px 11px; background: rgba(207,32,43,0.06); border: 1px solid rgba(207,32,43,0.2); border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--red); letter-spacing: 0.4px; }

    /* VZ-3. Animated process SVG */
    .vz-story-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 16px); margin: clamp(28px, 4vw, 44px) 0 0; }
    @media (max-width: 760px) { .vz-story-strip { grid-template-columns: repeat(2, 1fr); } }
    .vz-story-frame { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
    .vz-story-frame svg { width: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: clamp(8px, 1.2vw, 14px); }
    .vz-story-frame figcaption { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; color: var(--ink); text-align: center; }

    /* VZ-4. Button playground */
    .vz-buttons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin: clamp(28px, 4vw, 44px) 0 0; align-items: center; justify-items: center; }
    @media (max-width: 720px) { .vz-buttons-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .vz-buttons-grid { grid-template-columns: 1fr; } }
    .vz-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; font-family: var(--font); font-weight: 800; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: transform 240ms var(--ease-bold), background 220ms ease, box-shadow 280ms var(--ease-bold), color 200ms ease; }
    .vz-btn--solid { background: var(--red); color: var(--white); border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 24px rgba(207,32,43,0.32); }
    .vz-btn--solid:hover { background: var(--red-dark); transform: translateY(-2px); }
    .vz-btn--ghost { background: transparent; color: var(--ink); border-radius: 999px; border: 1.5px solid var(--ink); }
    .vz-btn--ghost:hover { background: var(--invert); color: var(--white); transform: translateY(-2px); }
    .vz-btn--outline { background: var(--surface); color: var(--red); border-radius: 999px; border: 1.5px solid var(--red); }
    .vz-btn--outline:hover { background: var(--red); color: var(--white); transform: translateY(-2px); }
    .vz-btn--glow { background: var(--red); color: var(--white); border-radius: 999px; box-shadow: 0 0 0 4px rgba(207,32,43,0.12), 0 0 32px rgba(207,32,43,0.5); position: relative; }
    .vz-btn--glow:hover { box-shadow: 0 0 0 6px rgba(207,32,43,0.16), 0 0 48px rgba(207,32,43,0.6); transform: translateY(-2px); }
    .vz-btn--brutalist { background: var(--invert); color: var(--white); border-radius: 0; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--red); }
    .vz-btn--brutalist:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--red); }
    .vz-btn--magnetic { background: linear-gradient(135deg, var(--ink), #1f2937); color: var(--white); border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); }
    .vz-btn--magnetic:hover { background: linear-gradient(135deg, var(--red), var(--red-dark)); transform: scale(1.05); }
    .vz-buttons-foot { text-align: center; margin-top: clamp(20px, 3vw, 28px); font-size: 13px; color: var(--muted); font-weight: 600; }

    /* VZ-5. Chat-bubble FAQ */
    .vz-chatfaq-thread { max-width: 720px; margin: clamp(28px, 4vw, 44px) auto 0; display: flex; flex-direction: column; gap: 10px; }
    .vz-chatfaq-row { display: flex; }
    .vz-chatfaq-row--ans { justify-content: flex-end; }
    .vz-chatfaq-bubble { max-width: 80%; padding: 14px 18px; border-radius: 18px; font-size: 15px; line-height: 1.55; font-weight: 500; }
    .vz-chatfaq-bubble--q { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
    .vz-chatfaq-bubble--a { background: var(--invert); color: var(--white); border-bottom-right-radius: 4px; }
    .vz-chatfaq-bubble--a em { color: var(--red); font-style: italic; font-weight: 800; }

    /* VZ-6. Heatmap */
    .vz-heatmap-wrap { max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.6vw, 32px); box-shadow: var(--shadow-md); }
    .vz-heatmap-svg { width: 100%; height: auto; display: block; border-radius: 12px; }
    .vz-heatmap-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
    .vz-heatmap-key { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink); }
    .vz-heatmap-swatch { width: 14px; height: 14px; border-radius: 999px; }
    .vz-heatmap-swatch.is-hot { background: rgba(207,32,43,0.7); }
    .vz-heatmap-swatch.is-warm { background: rgba(207,32,43,0.45); }
    .vz-heatmap-swatch.is-cool { background: rgba(207,32,43,0.22); }

    /* VZ-7. Scroll card stack */
    .vz-stack { padding: clamp(72px, 10vw, 140px) 0; background: var(--cream); position: relative; }
    .vz-stack-cards { max-width: 760px; margin: clamp(28px, 4vw, 44px) auto 0; display: grid; gap: 24px; }
    .vz-stack-card { position: sticky; padding: clamp(28px, 4vw, 44px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); display: grid; gap: 12px; }
    .vz-stack-card--1 { top: 100px; }
    .vz-stack-card--2 { top: 130px; background: linear-gradient(170deg, rgba(207,32,43,0.10), var(--surface) 70%); }
    .vz-stack-card--3 { top: 160px; background: var(--invert); color: var(--white); border-color: var(--ink); }
    .vz-stack-card--3 p em { color: var(--red); font-style: italic; font-weight: 800; }
    .vz-stack-num { font-size: clamp(32px, 4.4vw, 44px); font-weight: 900; letter-spacing: -0.04em; color: var(--red); font-style: italic; font-feature-settings: "tnum" 1; line-height: 1; }
    .vz-stack-card h3 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; margin: 0; }
    .vz-stack-card--3 h3 { color: var(--white); }
    .vz-stack-card p { font-size: clamp(15px, 1.7vw, 17px); color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; max-width: 56ch; }
    .vz-stack-card--3 p { color: rgba(255,255,255,0.78); }

    /* VZ-8. Typewriter */
    .vz-typer-shell { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 780px; margin: 0 auto; }
    .vz-typer-h2 { font-size: clamp(36px, 6.4vw, 72px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; color: var(--ink); margin: 0; }
    .vz-typer-em { display: inline-block; min-width: 6ch; color: var(--red); font-style: italic; font-weight: 900; position: relative; }
    .vz-typer-em::after { content: ""; display: inline-block; width: 4px; height: 0.9em; background: var(--red); margin-left: 4px; vertical-align: -0.06em; animation: vzTyperCaret 1s steps(2) infinite; }
    @keyframes vzTyperCaret { 50% { opacity: 0; } }
    .vz-typer-foot { font-size: 14.5px; color: var(--muted); font-weight: 500; margin: 0; }

    /* VZ-9. Before/after pairs grid */
    .vz-pairs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 18px); margin: clamp(28px, 4vw, 44px) 0 0; }
    @media (max-width: 900px) { .vz-pairs-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .vz-pairs-grid { grid-template-columns: 1fr; } }
    .vz-pair { margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .vz-pair-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); position: relative; }
    .vz-pair-shots img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
    .vz-pair-shots::before { content: "BEFORE"; position: absolute; top: 8px; left: 8px; padding: 3px 8px; background: rgba(10,10,11,0.78); color: var(--white); font-size: 9px; font-weight: 900; letter-spacing: 1px; border-radius: 999px; z-index: 2; }
    .vz-pair-shots::after { content: "AFTER"; position: absolute; top: 8px; right: 8px; padding: 3px 8px; background: var(--red); color: var(--white); font-size: 9px; font-weight: 900; letter-spacing: 1px; border-radius: 999px; z-index: 2; }
    .vz-pair figcaption { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px; }

    /* VZ-10. Progress rings */
    .vz-rings { padding: clamp(72px, 10vw, 140px) 0; background: var(--black); color: var(--white); position: relative; isolation: isolate; overflow: hidden; }
    .vz-rings::before { content: ""; position: absolute; inset: -10% auto auto -10%; width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(207,32,43,0.16), transparent 70%); filter: blur(80px); z-index: -1; pointer-events: none; }
    .vz-rings .eyebrow { color: var(--red); background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); padding: 5px 12px; border-radius: 999px; }
    .vz-rings .section-head h2 { color: var(--white); }
    .vz-rings .section-head h2 em { color: var(--white); }
    .vz-rings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); margin: clamp(28px, 4vw, 44px) 0 0; }
    @media (max-width: 720px) { .vz-rings-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; } }
    .vz-ring-card { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: clamp(20px, 2.6vw, 32px); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .vz-ring-svg { width: 140px; height: 140px; }
    .vz-ring-fill { transition: stroke-dashoffset 1600ms var(--ease-bold); }
    .vz-ring-card h3 { font-size: clamp(17px, 1.9vw, 20px); font-weight: 900; letter-spacing: -0.02em; color: var(--white); margin: 0; }
    .vz-ring-card p { font-size: 13.5px; color: rgba(255,255,255,0.7); font-weight: 500; margin: 0; }

    @media (prefers-reduced-motion: reduce) {
      .vz-sms-typing span, .vz-activity-dot, .vz-typer-em::after { animation: none !important; }
      .vz-btn, .vz-stack-card, .vz-ring-fill { transition: none !important; }
    }

    /* ============================================================
       V12 VW-1. ANIMATED GCJ VAN — driving across with spinning wheels.
       ============================================================ */
    .vw-van-section { position: relative; height: clamp(220px, 32vw, 320px); overflow: hidden; isolation: isolate; background: var(--cream); }
    .vw-van-sky { position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, #d4dde9 0%, #e8eef5 60%, #f5e9d4 100%); z-index: -3; }
    .vw-van-ground { position: absolute; inset: 62% 0 0 0; background: linear-gradient(180deg, #c8b89a 0%, #b8a888 100%); z-index: -3; }
    .vw-van-road { position: absolute; left: 0; right: 0; bottom: 32%; height: 4px; background: #5b6675; }
    .vw-van-road::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 2px; background-image: repeating-linear-gradient(90deg, #fff 0 20px, transparent 20px 50px); animation: vwRoadMove 0.7s linear infinite; }
    @keyframes vwRoadMove { from { background-position: 0 0; } to { background-position: -50px 0; } }
    .vw-van-clouds { position: absolute; inset: 0 0 50% 0; z-index: -2; pointer-events: none; }
    .vw-cloud { position: absolute; width: 80px; height: 26px; background: rgba(255,255,255,0.7); border-radius: 999px; filter: blur(0.5px); }
    .vw-cloud::before, .vw-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 999px; }
    .vw-cloud::before { width: 50px; height: 24px; top: -10px; left: 12px; }
    .vw-cloud::after { width: 36px; height: 18px; top: -6px; left: 42px; }
    .vw-cloud--1 { top: 12%; left: 4%; animation: vwCloudDrift 38s linear infinite; }
    .vw-cloud--2 { top: 28%; left: 38%; transform: scale(0.78); animation: vwCloudDrift 52s linear infinite reverse; opacity: 0.7; }
    .vw-cloud--3 { top: 8%; left: 68%; transform: scale(0.6); animation: vwCloudDrift 64s linear infinite; opacity: 0.55; }
    @keyframes vwCloudDrift { from { transform: translateX(-8vw) scale(var(--cloud-scale, 1)); } to { transform: translateX(8vw) scale(var(--cloud-scale, 1)); } }
    .vw-van-stage { position: absolute; left: 0; right: 0; bottom: 18%; height: clamp(120px, 18vw, 180px); display: flex; align-items: center; z-index: 1; pointer-events: none; }
    .vw-van-slide { width: 100%; height: 100%; display: flex; align-items: center; animation: vwVanDrive 14s linear infinite; will-change: transform; }
    .vw-van-bounce { animation: vwVanBounce 0.32s ease-in-out infinite; }
    .vw-van-svg { display: block; width: clamp(180px, 26vw, 280px); height: auto; }
    @keyframes vwVanDrive { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
    @keyframes vwVanBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
    .vw-van-puff { animation: vwPuffOut 0.9s ease-out infinite; transform-origin: 235px 90px; }
    @keyframes vwPuffOut { 0% { opacity: 0.7; transform: translateX(0) scale(0.6); } 100% { opacity: 0; transform: translateX(14px) scale(1.3); } }
    .vw-van-tag { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6%; z-index: 2; text-align: center; }
    .vw-van-tag p { font-family: var(--font); font-size: 13.5px; font-weight: 800; color: var(--ink); letter-spacing: 0.2px; background: rgba(255,255,255,0.85); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin: 0; }
    .vw-van-tag em { color: var(--red); font-style: italic; font-weight: 900; }

    @media (prefers-reduced-motion: reduce) {
      .vw-van-slide, .vw-van-bounce, .vw-van-puff, .vw-cloud, .vw-van-road::before { animation: none !important; }
      .vw-van-slide { transform: translateX(40vw); }
    }

    /* ============================================================
       V13 TEMPLATE — reusable service-page styles.
       Treatment "most popular" flag, 3-col comparison, process steps,
       final-CTA crew styling. Self-contained, clean class names.
       ============================================================ */

    /* Treatment "most popular" flag */
    .rsurface-tab.is-popular { position: relative; }
    .rsurface-tab-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 9.5px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; vertical-align: middle; }
    .rsurface-tab.is-active.is-popular .rsurface-tab-badge { background: var(--white); color: var(--red); }
    @media (max-width: 540px) { .rsurface-tab-badge { display: none; } }
    .rsurface-panel-img { position: relative; }
    .rsurface-panel-flag { position: absolute; top: 12px; left: 12px; padding: 6px 12px; background: var(--red); color: var(--white); font-size: 10.5px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; box-shadow: 0 6px 16px rgba(207,32,43,0.4); z-index: 2; }

    /* Aberdeen top-down CTA — centred + tightened (v13 fix) */
    .v7-aberdeen-cta { align-self: center; justify-content: center; padding: 15px 26px; font-size: 15px; }
    .v7-aberdeen-shell { text-align: left; }

    /* 3-COLUMN COMPARISON (.t-compare) */
    .t-compare { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; background: var(--black); color: var(--white); overflow: hidden; }
    .t-compare-glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.26; z-index: -1; pointer-events: none; }
    .t-compare-glow-1 { width: 52vw; height: 52vw; top: -22vw; right: -14vw; background: radial-gradient(circle, var(--red), transparent 70%); }
    .t-compare .eyebrow { color: var(--red); background: rgba(207,32,43,0.16); border: 1px solid rgba(207,32,43,0.32); padding: 5px 12px; border-radius: 999px; }
    .t-compare .section-head h2 { color: var(--white); }
    .t-compare .section-head h2 em { color: var(--white); }
    .t-compare .section-head .lead { color: rgba(255,255,255,0.78); }
    .t-compare-table { max-width: 820px; margin: clamp(28px, 4vw, 44px) auto 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
    .t-compare-head, .t-compare-row { display: grid; grid-template-columns: 1fr 86px 86px 100px; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    @media (max-width: 600px) { .t-compare-head, .t-compare-row { grid-template-columns: 1fr 48px 48px 56px; padding: 12px 12px; } }
    .t-compare-row:last-child { border-bottom: 0; }
    .t-compare-head { background: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.16); align-items: end; }
    .t-compare-cell--label { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.86); line-height: 1.35; padding-right: 10px; }
    @media (max-width: 600px) { .t-compare-cell--label { font-size: 12.5px; } }
    .t-compare-head .t-compare-cell--label { font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
    .t-compare-col { text-align: center; font-size: 11px; font-weight: 800; line-height: 1.15; color: rgba(255,255,255,0.6); }
    @media (max-width: 600px) { .t-compare-col { font-size: 9px; } }
    .t-compare-col--us { color: var(--red); }
    .t-compare-col--us em { font-style: italic; color: var(--red); font-weight: 900; }
    .t-compare-mark { display: grid; place-items: center; }
    .t-compare-mark::before { content: ""; display: block; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: contain; }
    @media (max-width: 600px) { .t-compare-mark::before { width: 18px; height: 18px; } }
    .t-compare-mark.is-yes::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cf202b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>"); }
    .t-compare-mark.is-yes.is-us::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff8087' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>"); }
    .t-compare-mark.is-no::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2.4' stroke-linecap='round'><line x1='4' y1='4' x2='12' y2='12'/><line x1='12' y1='4' x2='4' y2='12'/></svg>"); }
    .t-compare-mark.is-part::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.6' stroke-linecap='round'><line x1='4' y1='8' x2='12' y2='8'/></svg>"); }
    .t-compare-mark.is-us { background: rgba(207,32,43,0.1); }
    .t-compare-foot { text-align: center; margin: clamp(22px, 3vw, 30px) auto 0; max-width: 52ch; color: rgba(255,255,255,0.7); font-weight: 500; font-size: 14px; line-height: 1.6; }

    /* PROCESS STEPS (.t-process) — light to dark progression */
    .t-process-steps { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); counter-reset: tproc; }
    @media (max-width: 860px) { .t-process-steps { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .t-process-steps { grid-template-columns: 1fr; } }
    .t-process-step { position: relative; padding: clamp(22px, 2.6vw, 30px); border-radius: 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 320ms var(--ease-bold), box-shadow 320ms var(--ease-bold); }
    .t-process-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
    .t-process-step--1 { background: var(--surface); }
    .t-process-step--2 { background: var(--cream); }
    .t-process-step--3 { background: linear-gradient(160deg, rgba(207,32,43,0.1), var(--cream)); border-color: rgba(207,32,43,0.24); }
    .t-process-step--4 { background: var(--black); border-color: var(--black); }
    .t-process-num { font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; font-style: italic; letter-spacing: -0.04em; color: var(--red); line-height: 1; font-feature-settings: "tnum" 1; }
    .t-process-step--4 .t-process-num { color: var(--red); }
    .t-process-step h3 { font-size: clamp(16px, 1.9vw, 19px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0; }
    .t-process-step--4 h3 { color: var(--white); }
    .t-process-step p { font-size: 14px; color: var(--muted); line-height: 1.6; font-weight: 500; margin: 0; }
    .t-process-step--4 p { color: rgba(255,255,255,0.74); }

    /* Reviews placeholder — promise cards (no stars, no fake names) until real reviews land */
    .rreview-promise-h { font-size: clamp(17px, 2vw, 20px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0 0 8px; }

    /* FINAL CTA — crew-style halo + big highlighted pull-quote (v13 merge) */
    .final-cta-halo { position: absolute; inset: auto 0 -10% 0; height: 60%; z-index: -1; pointer-events: none; background: radial-gradient(50% 100% at 50% 100%, rgba(207,32,43,0.34), transparent 72%); filter: blur(50px); }
    .final-cta-quote { margin: 0 auto clamp(36px, 5vw, 56px); max-width: 34ch; }
    .final-cta-quote blockquote { margin: 0; font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.12; color: var(--white); text-shadow: 0 4px 24px rgba(0,0,0,0.5); }
    .final-cta-quote blockquote::before { content: "\201C"; color: var(--red); }
    .final-cta-quote blockquote::after { content: "\201D"; color: var(--red); }
    .final-cta-quote blockquote em { color: var(--red); font-style: italic; font-weight: 900; }
    .final-cta-quote figcaption { margin-top: 16px; font-size: 13px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.7); }
    .final-cta-quote figcaption span { color: var(--red); }

    /* ============================================================
       SITE-WIDE HEADER + FOOTER (injected by gcj.js) — Pass 19
       ============================================================ */
    /* Move navbar vertical padding onto the inner row so the topbar sits flush at the very top */
    .navbar, .navbar.is-transparent { padding: 0; }
    .navbar-inner { padding: 14px 0; transition: padding 360ms var(--ease); }
    .navbar.is-transparent .navbar-inner { padding: 17px 0; }

    /* Top utility strip — desktop only, collapses on scroll */
    .navbar-topbar { overflow: hidden; max-height: 60px; background: rgba(10,10,11,0.28); border-bottom: 1px solid rgba(255,255,255,0.1); transition: max-height 420ms var(--ease), opacity 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease); }
    .navbar.is-solid .navbar-topbar { background: transparent; }
    .navbar-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; }
    .navbar-topbar-trust { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.72); }
    .navbar-topbar-trust i { color: var(--red); font-style: normal; }
    .navbar-topbar-meta { display: inline-flex; align-items: center; gap: 18px; color: rgba(255,255,255,0.6); }
    .navbar-topbar-text { color: rgba(255,255,255,0.92); text-decoration: none; font-weight: 800; transition: color 200ms ease; }
    .navbar-topbar-text:hover { color: var(--red); }
    .navbar.is-solid .navbar-topbar { max-height: 0; opacity: 0; border-bottom-color: transparent; }
    @media (max-width: 1080px) { .navbar-topbar { display: none; } }

    /* Active-page indicator (reuses the hover-underline mechanism) */
    .nav-links a.is-active { color: var(--white); }
    .nav-links a.is-active::after { width: 100%; }

    /* Scroll-progress bar along the bottom edge of the nav (shows once solid) */
    .nav-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: opacity 300ms ease; will-change: transform; }
    .navbar.is-solid .nav-progress { opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .nav-progress { transition: none; } }

    /* Mobile drawer additions */
    .nav-drawer-quote { color: var(--red) !important; }
    .nav-drawer-foot { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .nav-drawer-foot a, .nav-drawer-foot span { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.3px; padding: 0; }
    .nav-drawer-foot a:hover { color: var(--red); }

    /* Footer: premium accent, brand column, areas line, contact CTA */
    .gcj-footer { position: relative; }
    .gcj-footer::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 3px; background: var(--red); }
    .footer-area { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.45); line-height: 1.7; letter-spacing: 0.2px; }
    .footer-contact { display: flex; flex-direction: column; }
    .footer-cta-primary { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 18px; background: var(--red); color: #fff; text-decoration: none; font-weight: 800; font-size: 13.5px; border-radius: var(--r-sm); width: fit-content; transition: background 200ms ease, transform 200ms var(--ease-bold); }
    .footer-cta-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
    .footer-cta-primary svg { width: 14px; height: 14px; }
    @media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

    /* Footer bottom row: copy left, want-website button right */
    .footer-bottom .footer-copy { max-width: 64ch; }
    .footer-bottom .footer-wwlt { margin: 0; align-self: auto; }

    /* "Want a website like this" button — full styles (was home-page-only inline) */
    .footer-wwlt-text { position: relative; z-index: 2; }
    .footer-wwlt-arrow { position: relative; z-index: 2; display: inline-grid; place-items: center; color: rgba(255,255,255,0.7); transition: transform 280ms var(--ease-bold), color 200ms ease; }
    .footer-wwlt:hover .footer-wwlt-arrow { transform: translateX(3px); color: var(--white); }
    .footer-wwlt-shimmer { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(110deg, transparent 35%, rgba(207,32,43,0.32) 50%, transparent 65%); background-size: 220% 100%; background-position: 100% 50%; animation: footerWwltShimmer 4.2s var(--ease) infinite; }
    @keyframes footerWwltShimmer { 0% { background-position: 100% 50%; } 65% { background-position: -50% 50%; } 100% { background-position: -50% 50%; } }
    @media (prefers-reduced-motion: reduce) { .footer-wwlt-shimmer { animation: none; opacity: 0.15; background-position: 50% 50%; } }

/* ===== Header / topbar QA fixes 2026-06-09 — desktop nav legibility over bright heroes ===== */
/* Dark top scrim behind the transparent navbar so the brand, nav links, phone + topbar strip
   stay readable over ANY hero (the home/roof heroes have a bright sky at the top). */
.navbar.is-transparent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 230px; background: linear-gradient(to bottom, rgba(10,10,11,0.66) 0%, rgba(10,10,11,0.40) 42%, rgba(10,10,11,0) 100%); z-index: -1; pointer-events: none; }
.navbar.is-solid::before { display: none; }
/* Topbar: fix the run-together separators (was inline-flex gap that collapsed) + brighten text. */
.navbar-topbar-trust { color: rgba(255,255,255,0.9); gap: 0; flex-wrap: wrap; }
.navbar-topbar-trust i { margin: 0 9px; color: var(--red); font-style: normal; }
.navbar-topbar-meta { color: rgba(255,255,255,0.9); gap: 16px; }
.navbar-topbar-inner { padding: 14px 0 10px; }

/* Refinement: give the topbar its own readable dark bar (the 28% one washed out over bright sky),
   strengthen the header scrim, and add top breathing room so the trust line never clips. */
.navbar-topbar { background: rgba(10,10,11,0.52); }
.navbar.is-transparent::before { background: linear-gradient(to bottom, rgba(10,10,11,0.74) 0%, rgba(10,10,11,0.44) 46%, rgba(10,10,11,0) 100%); height: 240px; }
.navbar-topbar-inner { padding: 16px 0 11px; }
.navbar-topbar-trust, .navbar-topbar-meta { color: #fff; }

/* Topbar = a clean SOLID dark utility bar (the translucent one washed out over the bright hero sky). */
.navbar.is-transparent .navbar-topbar { background: rgba(10,10,11,0.86); border-bottom-color: rgba(255,255,255,0.12); }

/* ============================================================
   AA contrast fix (mobile-qa 2026-06-22) — context-VERIFIED by rendered fg/bg.
   Dark bg -> lighten; light bg -> darken; iMessage bubble -> deepen blue.
   ============================================================ */
.vz-sms-bubble--out { background: #0a6dde; }                                   /* #fff on #007aff 4.02 -> 4.9 */
.section.dark .eyebrow, .section.dark .eyebrow em, .ba-section .eyebrow,
.reditorial.section.dark .reditorial-eyebrow,
.reditorial.section.dark .reditorial-eyebrow em { color: var(--red) !important; }  /* red on dark 3.67 */
.hero em { color: var(--red); }                                        /* hero red em on dark 3.67 */
.gform-or, .gform-or span { color: var(--muted) !important; }
.section.cream .lead, .rrepairs-lede { color: var(--muted) !important; }


/* ---------------------------------------------------------------------------
   GRID OVERFLOW GUARD (2026-07-26)
   A grid/flex child defaults to min-width:auto, so it refuses to shrink below its
   content. On Safari that let the contact form's single column compute to 750px
   inside a 390px screen (Matthew: "pixels of a huge image and 1/4 of the form").
   Chrome happened to hide it. This makes children shrinkable everywhere.
--------------------------------------------------------------------------- */
.co-form-grid > *, .co-info-grid > *, .co-actions > *, .co-steps-grid > *,
.gform-row > *, .solutions-grid > *, .services-grid > * { min-width: 0; }
.co-form-grid img, .co-info-grid img, .co-aside img { max-width: 100%; height: auto; }