/* ==========================================================================
   Hammer Systems — design system
   Direction: "FORGED" (approved 2026-08-25). Dark ground, gold as the single
   accent, hairline rules used as structure, Archivo Black display set in
   uppercase over Archivo body, IBM Plex Mono for spec-sheet labels.
   Supersedes the "light SaaS" direction. See DESIGN-BRIEF.md.
   ========================================================================== */

/* Self-hosted fonts (latin subsets from Google Fonts).
   Archivo is variable (wght axis ONLY — do not re-subset with a wdth axis, it
   triples the file). Archivo Black and IBM Plex Mono are static; each declares
   a weight RANGE so the browser never synthesises a fake bold from them. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Archivo.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/ArchivoBlack.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/IBMPlexMono.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* --- Forged palette (source of truth) --- */
  --base:    #0C0D0E;   /* page ground */
  --raised:  #151719;   /* cards, raised surfaces */
  --raised-2:#1B1E21;   /* hover / nested surface */
  --sunk:    #08090A;   /* bands that need to sit BELOW the ground */
  --rule:    #26282B;   /* hairline structure. decorative only */
  --rule-lit:#3A3D42;   /* borders on real controls (needs 3:1) */
  --gold:    #E8B65C;   /* accent: headline highlight, stats, primary button */
  --gold-2:  #C8892B;   /* ambient wash + pressed states only */
  --gold-3:  #F4CE8A;   /* hover lift on gold text/links */
  --fg:      #F3F0EA;   /* body text on dark */
  --mute:    #8E8F94;   /* secondary text. 6.0:1 on base, 5.6:1 on raised */
  --on-gold: #161311;   /* text on a gold fill. 9.9:1 */

  /* GeoGrid rank ladder (see .geogrid-map). Read as a real audit reads:
     green is a top-3 placement, maroon is "not in the top 20 at all". */
  --geo-1:  #2E9E43;   /* 1-3   */
  --geo-2:  #5FB13E;   /* 4-5   */
  --geo-3:  #93C53C;   /* 6-7   */
  --geo-4:  #E8B93C;   /* 8-10  */
  --geo-5:  #E2872E;   /* 11-14 */
  --geo-6:  #D2402F;   /* 15-19 */
  --geo-20: #7B1610;   /* 20+   */

  --good: #5FCB8B;
  --bad:  #E9705F;
  --warn: #E8B65C;

  /* --- Legacy aliases -------------------------------------------------
     The stylesheet below still carries names from the light SaaS build.
     They are mapped onto Forged values so every component re-colours at
     once; they are retired component-by-component as the redesign lands.
     Do not add NEW rules against these — use the Forged names above. */
  --ink: var(--sunk);   --ink-2: var(--raised);  --ink-3: var(--raised-2);
  --paper: var(--base); --paper-2: var(--raised); --paper-3: var(--raised-2);
  --text: var(--fg);    --muted: var(--mute);    --muted-dark: var(--mute);
  --line: var(--rule);  --line-dark: var(--rule);
  --teal: var(--gold);  --teal-2: var(--gold-2); --teal-lift: var(--gold-3);
  --teal-soft: rgba(232,182,92,.12);
  --gold-lite: var(--gold); --gold-soft: rgba(232,182,92,.12);

  --font-display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 420ms;

  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 4px;          /* Forged squares the corners off */
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px #000;
  --shadow-lift: 0 1px 0 rgba(255,255,255,.05), 0 34px 70px -34px #000;
  --shadow-gold: 0 14px 30px -16px rgba(232,182,92,.45);

  --header-h: 84px;
  --z-dropdown: 30;
  --z-sticky: 40;
  --z-modal: 60;
  --z-toast: 70;

  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--base); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Display type. Archivo Black, uppercase, tight. This is the single biggest
   reason Forged reads as a sales page and not a magazine. */
h1, h2 {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: -.035em; line-height: .93;
  margin: 0 0 .42em; text-wrap: balance;
}
h1 { font-size: clamp(2.45rem, 5.6vw, 4.625rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); letter-spacing: -.03em; line-height: .96; }
/* h3 stays sentence case: many of them are full questions (FAQ) and uppercase
   Archivo Black on a sentence shouts. Short label h3s opt in with .disp. */
h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.42rem); }
.disp { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -.025em; line-height: 1; }

p { margin: 0 0 1em; text-wrap: pretty; }
p.lead { font-size: 1.2rem; line-height: 1.6; }
.measure { max-width: 68ch; }
strong { font-weight: 700; }
.gold, .on-dark .gold { color: var(--gold); }

/* Mono utility label: eyebrows, section numbers, stat captions. */
.mono { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: .69rem; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--on-gold); font-weight: 700; padding: .5rem 1rem; z-index: var(--z-toast); border-radius: var(--radius); }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(var(--wrap), 100% - 2.75rem); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Buttons ---------- */
/* Forged buttons are squared slabs, not pills. Gold is the only fill. */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .92rem 1.5rem; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: -.004em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.15;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
/* Primary. Name kept from the previous direction; in Forged it is the gold slab. */
.btn-gold, .on-dark .btn-gold, .cta-band .btn-gold, .numbers-band .btn-gold {
  background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-gold);
}
.btn-gold:hover, .on-dark .btn-gold:hover, .cta-band .btn-gold:hover, .numbers-band .btn-gold:hover { background: var(--gold-3); }
.btn-ink { background: var(--fg); color: var(--base); }
.btn-ink:hover { background: #fff; }
.btn-outline, .on-dark .btn-outline, .cta-band .btn-outline, .numbers-band .btn-outline {
  background: transparent; color: var(--fg); border-color: var(--rule-lit);
}
.btn-outline:hover, .on-dark .btn-outline:hover, .cta-band .btn-outline:hover, .numbers-band .btn-outline:hover {
  background: rgba(243,240,234,.06); border-color: var(--mute);
}
.btn-lg { padding: 1.08rem 1.9rem; font-size: 1.06rem; }
.btn-sm { padding: .58rem 1rem; font-size: .93rem; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; pointer-events: none; }
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--header-h);
  background: rgba(12, 13, 14, .72);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--fg);
  box-shadow: inset 0 -1px 0 var(--rule);
  transition: background-color .25s, box-shadow .25s;
}
.site-header.scrolled { background: rgba(12, 13, 14, .94); box-shadow: inset 0 -1px 0 var(--rule), 0 20px 40px -30px #000; }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
/* LOGO ON DARK: this is the BADGE (cream plaque, intact), not the lockup. The
   lockup's "Hammer" half is dark brown and vanishes on #0C0D0E. See HANDOFF. */
.brand { display: flex; align-items: center; height: 100%; text-decoration: none; margin-right: auto; }
.brand img { height: 48px; width: auto; }
.nav { display: none; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.nav a, .nav-trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem .75rem; border-radius: var(--radius);
  font-weight: 500; font-size: .95rem; text-decoration: none; background: none; border: 0; color: var(--mute); cursor: pointer;
  position: relative; transition: color .18s;
}
.nav a:hover, .nav-trigger:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-trigger .chev { width: .62em; height: .62em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(225deg) translateY(-2px); }
.has-drop { position: relative; }
.drop-menu {
  position: absolute; top: 100%; left: 0; margin: 0; padding: .5rem 0 0; list-style: none; z-index: var(--z-dropdown);
  min-width: 320px;
}
.drop-menu[hidden] { display: none; }
.drop-menu-inner { background: var(--raised); color: var(--fg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: .4rem; border: 1px solid var(--rule); }
.drop-menu a { display: block; padding: .7rem .8rem; border-radius: var(--radius); color: var(--fg); }
.drop-menu a::after { display: none; }
.drop-menu a:hover { background: var(--raised-2); }
.drop-menu a strong { display: block; font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.drop-menu a span { display: block; font-size: .87rem; color: var(--mute); font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .has-drop:hover .drop-menu { display: block; } }
:where(.nav-trigger, .nav a, .drop-menu a, .btn, .chip, .faq-q, .cmp-range, a, button, input, summary):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px;
}

.header-cta { display: none; align-items: center; gap: .6rem; }
.header-phone { display: none; align-items: center; gap: .45rem; text-decoration: none; font-family: var(--font-mono); font-weight: 500; font-size: .82rem; letter-spacing: .04em; padding: .5rem .7rem; border-radius: var(--radius); color: var(--mute); transition: color .18s, background-color .18s; }
.header-phone:hover { background: rgba(243,240,234,.06); color: var(--fg); }
.header-phone svg { width: 1.05em; height: 1.05em; }
.menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 0; padding: 8px; border-radius: var(--radius); cursor: pointer; color: var(--fg); }
.menu-btn span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: var(--header-h) 0 0; background: var(--base); color: var(--fg); z-index: var(--z-sticky); padding: 1.5rem; overflow: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--rule); }
.mobile-nav a { display: block; padding: 1rem .25rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.025em; font-size: 1.35rem; text-decoration: none; }
.mobile-nav .sub a { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 500; padding: .6rem .25rem .6rem 1.25rem; color: var(--mute); }
/* Group label so the three service pages read as peers, matching the desktop Services menu. */
.mobile-nav .group span { display: block; padding: 1rem .25rem .3rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.mobile-nav .group + .sub { border-top: 0; }
.mobile-nav .mobile-ctas { display: grid; gap: .75rem; margin-top: 1.5rem; }

@media (min-width: 980px) {
  .nav { display: block; }
  .header-cta, .header-phone { display: inline-flex; }
  .menu-btn, .mobile-nav { display: none !important; }
}

/* Mobile bottom bar */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem; font-family: var(--font-body); font-weight: 600; text-decoration: none; }
.mobile-bar a:first-child { background: var(--raised); color: var(--fg); }
.mobile-bar a:last-child { background: var(--gold); color: var(--on-gold); }
.mobile-bar svg { width: 1.1em; height: 1.1em; }
@media (min-width: 980px) { .mobile-bar { display: none; } }
@media (max-width: 979px) { body { padding-bottom: 64px; } }

/* ---------- Sections ---------- */
.strip-hero { overflow: hidden; }
.strip-hero .wrap { position: relative; z-index: 1; max-width: calc(var(--wrap) - 540px); margin-left: max(1.25rem, (100% - var(--wrap)) / 2); }
.strip-mascot { position: absolute; right: max(0px, (100% - var(--wrap)) / 2 - 2rem); bottom: -4%; width: clamp(300px, 34vw, 460px); height: auto; opacity: .95; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); pointer-events: none; }
@media (max-width: 899px) { .strip-mascot { display: none; } .strip-hero .wrap { max-width: none; margin-inline: auto; } }
section { position: relative; }
.on-dark { background: var(--ink); color: var(--fg); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark .muted { color: var(--muted-dark); }
.on-paper-2 { background: var(--paper-2); }
.muted { color: var(--muted); }
.section-head { max-width: 760px; margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: .6rem; }
.section-head p { font-size: 1.15rem; margin: 0; }
.pad-lg { padding-block: clamp(4.5rem, 9vw, 8rem); }
.pad-md { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.pad-sm { padding-block: clamp(2rem, 4vw, 3rem); }
.kicker {
  font-family: var(--font-body); font-weight: 600; color: var(--teal); font-size: .9rem;
  margin-bottom: .9rem; display: inline-block;
  background: var(--teal-soft); border-radius: var(--radius-pill); padding: .4rem 1rem;
}
.on-dark .kicker { color: var(--gold-lite); background: rgba(232,182,92,.13); }
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 6px 6px; }
.on-paper-2.grain::before, .hero.light-hero.grain::before { background-image: radial-gradient(rgba(22,19,17,.045) 1px, transparent 1px); }

/* ---------- Reveal / motion (JS-gated) ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.js .reveal-stagger.in > * { opacity: 1; transform: none; }
html.js .reveal-stagger.in > :nth-child(2) { transition-delay: 70ms; }
html.js .reveal-stagger.in > :nth-child(3) { transition-delay: 140ms; }
html.js .reveal-stagger.in > :nth-child(4) { transition-delay: 210ms; }
html.js .reveal-stagger.in > :nth-child(5) { transition-delay: 280ms; }
html.js .reveal-stagger.in > :nth-child(6) { transition-delay: 350ms; }
html.js .reveal-stagger.in > :nth-child(7) { transition-delay: 420ms; }
html.js .reveal-stagger.in > :nth-child(8) { transition-delay: 490ms; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .card, .doorway { transition: none !important; }
}

/* ---------- Hero (home) ----------------------------------------------------
   Forged hero: gold wash bleeding down from the top edge, oversized Archivo
   Black headline, and the drag-to-compare widget as the visual. */
.hero { background: var(--base); color: var(--fg); overflow: hidden; position: relative; border-bottom: 1px solid var(--rule); }
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 720px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 70% at 22% 0%, rgba(232,182,92,.16), transparent 66%),
    radial-gradient(40% 56% at 88% 6%, rgba(200,137,43,.10), transparent 70%);
}
.hero-grid { display: grid; gap: 2.75rem; align-items: center; padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(3rem, 6vw, 5rem); position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr 1.08fr; gap: 3rem; }
  /* The widget is the argument, so it gets the room: it bleeds past the
     column into the right margin (capped so it never runs off on ultrawide). */
  .hero-visual { margin-right: calc(-1 * min(150px, max(1.375rem, (100vw - var(--wrap)) / 2 - 8px))); }
}
.hero h1 { color: var(--fg); margin-bottom: 1.15rem; font-size: clamp(2.45rem, 4.6vw, 4.15rem); }
.hero h1 .gold { color: var(--gold); display: block; }
.hero .lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); color: var(--mute); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.7rem 0 1.6rem; }

/* Eyebrow: mono rule + label, replaces the old pill kicker on the hero. */
.hero .kicker {
  display: inline-flex; align-items: center; gap: .6rem; background: none; padding: 0; border-radius: 0;
  font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  font-size: .7rem; color: var(--gold); margin-bottom: 1.15rem;
}
.hero .kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; }

/* Spec-sheet trust row: hairline-divided stat cells. */
.hero-trust {
  display: grid; grid-template-columns: repeat(2, max-content); gap: .15rem 0; margin: 0; padding: 1rem 0 0; list-style: none;
  border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
}
.hero-trust li { display: block; padding: .35rem 1.15rem .35rem 0; margin-right: 1.15rem; border-right: 1px solid var(--rule); }
/* A 2x2 grid: the divider sits between the two cells of each row, never dangling. */
.hero-trust li:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-trust b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.24rem; line-height: 1.15; color: var(--gold); letter-spacing: -.02em; margin-bottom: .1rem; }
@media (max-width: 420px) { .hero-trust { grid-template-columns: 1fr; } .hero-trust li { border-right: 0; margin-right: 0; padding-right: 0; } }

.hero-visual { position: relative; padding-top: 0; }

/* ---------- Drag-to-compare -----------------------------------------------
   The signature element. Two absolutely-positioned CSS-drawn panes; the split
   is one custom property, --sp.

   ACCESSIBILITY / NO-JS CONTRACT
   - The control is a real <input type="range">, stretched over the whole
     widget. That buys native keyboard (arrows / Home / End / PageUp+Dn),
     native touch drag, native pointer capture, and a real AT role, with no
     custom pointer code at all. Clicking anywhere on it jumps AND starts a
     drag, exactly like the mockup's setPointerCapture version.
   - The panes are real <img>s with real alt text, so a screen reader gets
     "template site" then "Hammer Systems build" as two described images.
   - Without JS nothing sets --sp, so it stays at its 50% default and the
     widget renders as a static side-by-side. That is the intended fallback.
   - The one-time "nudge" lives in motion-fx.js and is skipped under
     prefers-reduced-motion. */
.cmp-wrap { position: relative; }
.cmp {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 1.935 / 1; border-radius: var(--radius-lg); border: 1px solid var(--rule);
  box-shadow: 0 40px 90px -40px #000, 0 0 0 1px rgba(255,255,255,.02) inset;
  background: var(--raised);
}
.cmp .side { position: absolute; inset: 0; }
.cmp .after  { clip-path: inset(0 0 0 var(--sp, 50%)); }
.cmp .before { clip-path: inset(0 calc(100% - var(--sp, 50%)) 0 0); }

/* The visible seam and knob are DRAWN, not the range thumb. WebKit aligns a
   slider thumb to the top of a full-height runnable track rather than its
   centre, and there is no way to centre it without hard-coding the height.
   So the input keeps the behaviour and loses its visuals; the seam owns the
   look and mirrors focus through the sibling combinator. */
.cmp-seam { position: absolute; top: 0; bottom: 0; left: var(--sp, 50%); width: 2px; background: #fff; z-index: 7; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(0,0,0,.3); pointer-events: none; }
.cmp-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff center / 20px 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

/* The range input is the control: native drag, touch, and keyboard, no visuals. */
.cmp-range {
  position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; border: 0;
  -webkit-appearance: none; appearance: none; cursor: ew-resize;
  /* pan-y, NOT none: the widget is a big target and 'none' would eat vertical
     page scroll on mobile. Horizontal drags still reach the slider. */
  touch-action: pan-y;
}
.cmp-range::-webkit-slider-runnable-track { background: transparent; border: 0; height: 100%; }
.cmp-range::-moz-range-track { background: transparent; border: 0; height: 100%; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: ew-resize; }
.cmp-range::-moz-range-thumb { width: 46px; height: 46px; border: 0; background: transparent; cursor: ew-resize; }
.cmp-range:focus { outline: none; }
.cmp-range:focus-visible { outline: none; }
.cmp-range:focus-visible + .cmp-seam .cmp-knob { box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 3px var(--base), 0 0 0 6px var(--gold); }

/* Legend sits ABOVE the frame: in-frame corner tags collided with the fake
   nav bar, and these stay readable at every split position. */
.cmp-legend { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; }
.cmp-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; padding: .4rem .6rem; border-radius: 3px;
}
.cmp-tag.l { background: var(--raised); color: var(--mute); border: 1px solid var(--rule); }
.cmp-tag.r { background: var(--gold); color: var(--on-gold); }

.cmp-cap { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: center; margin: .9rem 0 0; }
.cmp-cap kbd { font: inherit; background: var(--raised); border: 1px solid var(--rule-lit); border-radius: 3px; padding: .1rem .3rem; }

/* --- Panes: real screenshots. Each business is a .cmp-pair holding a
   before <picture> and an after <picture>. Only the selected pair is shown;
   the others are display:none so AT reads one before/after at a time and
   lazy images stay lazy. Selection works three ways, in order of preference:
   JS (.is-active), CSS :has() on the radio group (no JS), and the first pair
   as a hard default (no JS, no :has()). */
@media (max-width: 699px) { .cmp { aspect-ratio: 4 / 5; } }
.cmp-pair { position: absolute; inset: 0; display: none; }
.cmp-pair[data-pair="0"] { display: block; }
.cmp-wrap:has([name="cmp-biz"]:checked:not([value="0"])) .cmp-pair[data-pair="0"] { display: none; }
.cmp-wrap:has([name="cmp-biz"][value="1"]:checked) .cmp-pair[data-pair="1"],
.cmp-wrap:has([name="cmp-biz"][value="2"]:checked) .cmp-pair[data-pair="2"],
.cmp-wrap:has([name="cmp-biz"][value="3"]:checked) .cmp-pair[data-pair="3"] { display: block; }
.cmp-wrap.js-tabs .cmp-pair { display: none; }
.cmp-wrap.js-tabs .cmp-pair.is-active { display: block; animation: cmp-in .38s var(--ease) both; }
@keyframes cmp-in { from { opacity: 0; } to { opacity: 1; } }
html.fx-off .cmp-pair.is-active { animation: none; }
.cmp .side { display: block; background: var(--raised); }
.cmp .side img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

/* Business switcher: a radio group styled as spec-sheet tabs. */
.cmp-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .85rem 0 0; padding: 0; border: 0; min-width: 0; }
.cmp-tab {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .8rem; border: 1px solid var(--rule-lit); border-radius: 4px;
  background: var(--raised); color: var(--mute); cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.cmp-tab .n { color: var(--gold); }
.cmp-tab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cmp-tab:hover { border-color: var(--gold); color: var(--fg); }
.cmp-tab:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.cmp-tab:has(input:checked), .cmp-tab.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.cmp-tab:has(input:checked) .n, .cmp-tab.is-on .n { color: var(--on-gold); }

/* Caption: who this is, where, and the link to the live site. One per
   business; the active one shows, mirroring the pane rules above. */
.cmp-cap { margin: .8rem 0 0; font-size: .92rem; color: var(--mute); text-align: left; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.cmp-who { display: none; margin: 0; }
.cmp-who[data-who="0"] { display: block; }
.cmp-wrap:has([name="cmp-biz"]:checked:not([value="0"])) .cmp-who[data-who="0"] { display: none; }
.cmp-wrap:has([name="cmp-biz"][value="1"]:checked) .cmp-who[data-who="1"],
.cmp-wrap:has([name="cmp-biz"][value="2"]:checked) .cmp-who[data-who="2"],
.cmp-wrap:has([name="cmp-biz"][value="3"]:checked) .cmp-who[data-who="3"] { display: block; }
.cmp-wrap.js-tabs .cmp-who { display: none; }
.cmp-wrap.js-tabs .cmp-who.is-active { display: block; }
.cmp-who b { color: var(--fg); font-weight: 700; }
.cmp-who .sep { margin: 0 .15rem; }
.cmp-who a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; margin-left: .5rem; white-space: nowrap; }
.cmp-who a:hover { color: var(--gold-3); }
.cmp-hint { color: var(--mute); margin: .55rem 0 0; font-weight: 500; letter-spacing: .06em; font-size: .66rem; }

/* Motion takes over hover physics on these; drop the CSS transition so the two
   do not fight over transform. */
.fx-card { transition: box-shadow .25s var(--ease), border-color .25s !important; }
.fx-card:hover { transform: none; }
/* reveal-stagger managed by Motion: it sets opacity inline, so neutralise the CSS gate */
html.js .reveal-stagger.fx-managed > * { opacity: 1; transform: none; transition: none; }

/* ---------- Interaction layer (motion-fx.js) ---------- */
/* Geo-grid replay control */
.geo-replay { display: flex; justify-content: center; margin-top: .85rem; }
.geo-replay-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--paper); border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--radius-pill); padding: .45rem 1rem; font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: color .18s, border-color .18s, background-color .18s;
}
.geo-replay-btn svg { width: 1em; height: 1em; }
.geo-replay-btn:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); background: var(--teal-soft); }
.geo-replay-btn:disabled { opacity: .5; cursor: default; }
.geo-replay-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Phone thread: typing dots + replay */
.fx-phone { position: relative; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; align-items: center;
  background: var(--raised-2); border: 1px solid var(--rule-lit); border-radius: 12px 12px 12px 3px; padding: .55rem .7rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); display: block;
  animation: typing-dot 1.15s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing-dot { 0%,60%,100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.phone-replay {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px;
  background: var(--raised-2); color: var(--fg); border: 1px solid var(--rule-lit); border-radius: var(--radius-pill);
  padding: .4rem 1.1rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(20,15,10,.5);
}
.phone-replay:hover { border-color: var(--gold); color: var(--gold); }
.phone-replay:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }

/* Review projection calculator */
.calc { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.calc-input { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }
.calc-input label { display: block; font-weight: 600; font-size: .95rem; color: var(--muted); }
.calc-jobs { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; margin: .35rem 0 1rem; }
.calc-input input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; }
.calc-input input[type="range"]:active { cursor: grabbing; }
.calc-input input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--teal) var(--pct, 25%), var(--paper-3) var(--pct, 25%)); }
.calc-input input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--teal) var(--pct, 25%), var(--paper-3) var(--pct, 25%)); }
.calc-input input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--gold); border: 4px solid var(--raised); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.calc-input input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 4px solid var(--raised); box-shadow: 0 3px 10px rgba(20,15,10,.3); }
.calc-input input[type="range"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; border-radius: 999px; }
.calc-scale { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: .5rem; font-variant-numeric: tabular-nums; }
.calc-note { font-size: .92rem; color: var(--muted); margin: 1.25rem 0 0; }
.calc-out { background: var(--raised); color: var(--fg); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.25rem; }
.calc-big b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.4rem, 8vw, 5rem); line-height: 1; color: var(--gold-lite); font-variant-numeric: tabular-nums; }
.calc-big span { display: block; color: var(--muted-dark); font-size: 1rem; margin-top: .4rem; }
.calc-row { display: flex; gap: 2rem; border-top: 1px solid var(--line-dark); padding-top: 1.1rem; }
.calc-row b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: #fff; font-variant-numeric: tabular-nums; }
.calc-row span { display: block; color: var(--muted-dark); font-size: .86rem; }
.calc-bar { height: 8px; border-radius: 999px; background: rgba(233,240,238,.14); overflow: hidden; }
.calc-bar-fill { height: 100%; width: 25%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-lift), var(--gold-lite)); }
.calc-foot { font-size: .95rem; color: var(--muted-dark); margin: 0; min-height: 2.8em; }
.calc-out .btn { align-self: flex-start; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1.08fr; gap: 3.5rem; }
}
/* NOTE 2026-08-25: a 72-line duplicate of the interaction-layer block used to sit
   here, trapped inside an unclosed @media (max-width:899px). Removed; the live
   copy is the top-level one above. */
/* Hero entrance is CSS-only so it starts at first paint (JS-gated opacity delays LCP on slow connections) */
@keyframes hero-rise { from { transform: translateY(16px); } to { transform: none; } }
.rise-in { animation: hero-rise 600ms var(--ease) both; animation-delay: 120ms; }
.hero-in > * { animation: hero-rise 520ms var(--ease) both; }
.hero-in > :nth-child(1) { animation-delay: 30ms; }
.hero-in > :nth-child(2) { animation-delay: 110ms; }
.hero-in > :nth-child(3) { animation-delay: 190ms; }
.hero-in > :nth-child(4) { animation-delay: 270ms; }
.hero-in > :nth-child(5) { animation-delay: 350ms; }
@media (prefers-reduced-motion: reduce) { .hero-in > *, .rise-in { animation: none; } }

/* Geo-grid map (signature motif) */
.geogrid { position: relative; z-index: 1; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: var(--shadow-lift); position: relative; }
.geogrid-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: .88rem; margin-bottom: .8rem; color: var(--muted); }
.geogrid-head .tag { display: inline-flex; align-items: center; gap: .4rem; }
.geogrid-head .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--bad); }
.geogrid-head .dot.good { background: var(--good); }
.geogrid-map { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; aspect-ratio: 9 / 7; background:
  linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 14.28%,
  linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 11.11% 100%,
  var(--base);
  border-radius: var(--radius); padding: 4px; }
.geogrid-map i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-family: var(--font-body); font-weight: 700; font-size: clamp(.52rem, 1.15vw, .76rem); line-height: 1; color: #fff; background: var(--geo-20); transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); transform: scale(.9); }
.geogrid-map i.lit { transform: scale(1); }
/* Rank bands. Same ladder a real GeoGrid audit uses: deep green at 1-3,
   through yellow-green and amber, into orange, red and the 20+ maroon. */
.geogrid-map i.r1  { background: var(--geo-1);  color: #fff; }
.geogrid-map i.r2  { background: var(--geo-2);  color: #fff; }
.geogrid-map i.r3  { background: var(--geo-3);  color: var(--on-gold); }
.geogrid-map i.r4  { background: var(--geo-4);  color: var(--on-gold); }
.geogrid-map i.r5  { background: var(--geo-5);  color: var(--on-gold); }
.geogrid-map i.r6  { background: var(--geo-6);  color: #fff; }
.geogrid-map i.r20 { background: var(--geo-20); color: #fff; }
.geogrid-foot { margin-top: .85rem; font-size: .84rem; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.geogrid-foot .label { display: inline-block; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--paper-2); }

/* ---------- Symptom picker ---------- */
.picker { padding-block: 2.5rem; background: var(--paper-2); color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.picker-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.picker-row > span { font-family: var(--font-display); font-weight: 600; margin-right: .5rem; color: var(--muted); }
.chip { background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .55rem 1rem; font-weight: 500; font-size: .95rem; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .18s var(--ease); }
.chip:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }
.chip[aria-expanded="true"] { background: var(--teal); color: var(--on-gold); border-color: var(--teal); }
.picker-answers { margin-top: 1rem; }
.picker-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.picker-answer > div { overflow: hidden; }
.picker-answer.open { grid-template-rows: 1fr; }
.picker-answer p { margin: 0; padding: 1.1rem 1.25rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); max-width: 78ch; color: var(--muted); }
.picker-answer a { color: var(--teal); font-weight: 600; }
html:not(.js) .picker-answer { grid-template-rows: 1fr; margin-bottom: .5rem; }

/* ---------- Doorway service panels (home) ---------- */
.doorways { display: grid; gap: 1.25rem; }
.doorway {
  display: grid; gap: 1.5rem; text-decoration: none; color: inherit;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  position: relative; overflow: hidden;
}
.doorway:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--paper-3); }
.doorway h3 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-bottom: .5rem; }
.doorway .price { font-family: var(--font-body); font-weight: 600; color: var(--teal); font-size: 1.02rem; margin-bottom: .8rem; }
.doorway p { color: var(--muted); }
.doorway .peek { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); font-size: .95rem; }
.doorway .peek li { padding: .2rem 0 .2rem 1.5rem; position: relative; color: var(--muted); }
.doorway .peek li::before { content: ""; position: absolute; left: 0; top: .58em; width: .8rem; height: .8rem; border-radius: 50%; background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); }
.doorway .peek-title { font-family: var(--font-body); font-weight: 600; color: var(--text); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; padding-left: 0 !important; }
.doorway .peek-title::before { display: none; }
.doorway .go { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-weight: 600; color: var(--teal); margin-top: 1.25rem; }
.doorway .go svg { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.doorway:hover .go svg { transform: translateX(4px); }
.doorway-art { align-self: center; }
.doorway.slim { grid-template-columns: 1fr; padding-block: 1.5rem; background: var(--raised-2); }
.doorway.slim h3 { font-size: 1.4rem; }
@media (min-width: 860px) {
  .doorway { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .doorway.alt { grid-template-columns: .9fr 1.1fr; }
  .doorway.alt .doorway-art { order: -1; }
  .doorway.slim { grid-template-columns: 1fr auto; }
  .doorway .peek { opacity: .001; max-height: 0; overflow: hidden; margin-top: 0; padding-top: 0; border: 0; transition: opacity .3s var(--ease), max-height .35s var(--ease), margin-top .3s, padding-top .3s; }
  @media (hover: hover) and (pointer: fine) {
    .doorway:hover .peek, .doorway:focus-visible .peek { opacity: 1; max-height: 12rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  }
  @media (hover: none) { .doorway .peek { opacity: 1; max-height: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } }
}
html:not(.js) .doorway .peek { opacity: 1; max-height: none; }

/* Product mocks (CSS-drawn) */
.mock-phone { width: min(260px, 100%); margin-inline: auto; background: var(--raised-2); border-radius: 28px; padding: 12px; box-shadow: 0 30px 50px -25px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); }
.mock-phone .screen { background: var(--base); border-radius: 18px; padding: 1rem .9rem; color: var(--text); font-size: .8rem; min-height: 300px; display: flex; flex-direction: column; gap: .6rem; }
.mock-phone .bubble { background: var(--raised-2); border: 1px solid var(--rule-lit); padding: .6rem .7rem; border-radius: 12px 12px 12px 3px; max-width: 92%; box-shadow: 0 2px 6px rgba(0,0,0,.05); overflow-wrap: anywhere; }
.mock-phone .bubble.me { align-self: flex-end; background: var(--gold); color: var(--on-gold); border-color: transparent; border-radius: 12px 12px 3px 12px; }
.mock-phone .stars { color: #E8A21C; font-size: 1rem; letter-spacing: .05em; }
.mock-phone .time { font-size: .65rem; color: var(--muted); text-align: center; }
/* Booking confirmation in the AI Package phone thread. Sits in the thread as a
   system notice, not a message bubble, and is a direct child of .screen so
   phoneDemo() animates it in sequence with the messages. */
.mock-phone .booked { align-self: center; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-weight: 600; font-size: .78rem; color: var(--good); background: var(--raised-2); border: 1px solid var(--rule-lit); border-radius: var(--radius-pill); padding: .35rem .75rem; }
.mock-phone .booked::before { content: "\2713"; font-weight: 700; }

/* Static GeoGrid card, art for the Growth doorway. Same rank ladder as the live
   grid on /seo-social/ (--geo-1 top-3 green through --geo-20 maroon), showing
   the "after" state. Deliberately NOT class .geogrid / .geogrid-map: site.js
   fills those with 63 cells and motion-fx.js appends a <button class="geo-replay-btn">,
   which would land inside the <a class="doorway"> this card sits in. */
.mock-geo { width: min(320px, 100%); margin-inline: auto; background: var(--raised-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; box-shadow: 0 30px 50px -25px rgba(0,0,0,.6); }
.mock-geo .head, .mock-geo .foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: .72rem; color: var(--muted); }
.mock-geo .head { margin-bottom: .6rem; }
.mock-geo .foot { margin-top: .6rem; }
.mock-geo .cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--base); border-radius: 6px; padding: 5px; }
.mock-geo i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-family: var(--font-body); font-weight: 700; font-size: .6rem; line-height: 1; color: #fff; background: var(--geo-20); }
.mock-geo i.g1 { background: var(--geo-1); }
.mock-geo i.g2 { background: var(--geo-2); }
.mock-geo i.g3 { background: var(--geo-3); color: var(--on-gold); }
.mock-geo i.g4 { background: var(--geo-4); color: var(--on-gold); }
.mock-geo i.g5 { background: var(--geo-5); color: var(--on-gold); }

.mock-browser { background: var(--raised); border-radius: 10px; box-shadow: 0 30px 50px -25px rgba(0,0,0,.45); border: 1px solid var(--line); overflow: hidden; }
.mock-browser .bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.mock-browser .bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--paper-3); }
.mock-browser .bar span { flex: 1; margin-left: .5rem; height: 1.1rem; background: var(--base); border-radius: 4px; font-size: .65rem; color: var(--muted); padding: 0 .5rem; line-height: 1.1rem; }
.mock-browser .page { padding: .9rem; display: grid; gap: .55rem; }
.mock-browser .m-hero { background: var(--ink); border-radius: 6px; padding: .9rem; color: #fff; display: grid; gap: .4rem; }
.mock-browser .m-hero b { font-family: var(--font-display); font-size: .95rem; }
.mock-browser .m-hero small { color: var(--muted-dark); font-size: .65rem; }
.mock-browser .m-hero .m-btn { background: var(--gold); color: var(--on-gold); font-size: .6rem; font-weight: 700; padding: .3rem .5rem; border-radius: 3px; width: max-content; }
.mock-browser .m-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mock-browser .m-row div { height: 2.6rem; background: var(--paper-2); border-radius: 4px; }
.mock-browser .m-bar { height: .55rem; background: var(--paper-2); border-radius: 3px; }
.mock-browser .m-bar.short { width: 60%; }

/* ---------- Proof / video rail ---------- */
.proof { overflow: hidden; }
.video-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--teal) transparent; -webkit-overflow-scrolling: touch; }
.video-rail::-webkit-scrollbar { height: 6px; }
.video-rail::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }
.video-card { scroll-snap-align: start; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), border-color .25s; }
.video-card:hover { transform: translateY(-4px); border-color: rgba(232,182,92,.45); }
.video-frame { position: relative; aspect-ratio: 9 / 16; background: #000; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-frame .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-frame.playing .poster { display: none; }
.video-frame .play { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05)); border: 0; cursor: pointer; padding: 0; }
.video-frame .play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); transition: transform .2s var(--ease); }
.video-frame .play:hover span { transform: scale(1.08); }
.video-frame .play svg { width: 26px; height: 26px; margin-left: 4px; }
.video-frame.playing .play { display: none; }
.video-frame .lowres { position: absolute; top: .5rem; left: .5rem; font-size: .7rem; background: rgba(0,0,0,.6); color: var(--muted-dark); padding: .2rem .45rem; border-radius: 3px; }
.video-meta { padding: 1rem 1rem 1.1rem; }
.video-meta .num { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--gold-lite); line-height: 1; font-variant-numeric: tabular-nums; }
.video-meta .num small { font-size: .8rem; color: var(--muted-dark); font-weight: 600; margin-left: .3rem; }
.video-meta .who { font-weight: 600; margin-top: .4rem; }
.video-meta .what { color: var(--muted-dark); font-size: .9rem; }
.rail-nav { display: flex; gap: .5rem; }
.rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent; color: var(--fg); cursor: pointer; display: grid; place-items: center; transition: background-color .18s, border-color .18s; }
.rail-nav button:hover { background: rgba(255,255,255,.08); border-color: var(--gold-lite); }
.rail-nav svg { width: 18px; height: 18px; }
.proof-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* Video grid (results page) */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.video-grid .video-card { background: var(--raised); border-color: var(--line); color: var(--text); }
.video-grid .video-meta .num { color: var(--gold-2); }
.video-grid .video-meta .what, .video-grid .video-meta .num small { color: var(--muted); }
.quote-wall { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.quote { background: var(--ink-2); color: var(--fg); border-radius: var(--radius-lg); padding: 1.6rem; border: 1px solid var(--line-dark); display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 1rem; font-size: 1.1rem; line-height: 1.5; flex: 1; }
.quote blockquote::before { content: "\201C"; font-family: var(--font-display); font-size: 3rem; line-height: 0; color: var(--gold-lite); vertical-align: -1.2rem; margin-right: .2rem; }
.quote cite { font-style: normal; font-weight: 600; }
.quote cite span { display: block; color: var(--muted-dark); font-weight: 500; font-size: .9rem; }

/* ---------- Steps / timeline ---------- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
.step { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--paper-3); }
.step::before { content: ""; position: absolute; top: -2px; left: 0; width: 3.5rem; height: 2px; background: var(--teal); }
.step .n { font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); margin-bottom: .45rem; }
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--muted); margin: 0; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps-v { display: grid; gap: 0; }
.steps-v .step { border-top: 0; padding: 1.5rem 0 1.5rem 3.5rem; border-bottom: 1px solid var(--line); }
.steps-v .step::before { display: none; }
.steps-v .step .n { position: absolute; left: 0; top: 1.4rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); border-radius: 50%; font-size: .9rem; letter-spacing: 0; margin: 0; }

/* ---------- Stats / counters ---------- */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
.stat .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1; color: var(--gold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .big .arrow { font-size: .5em; color: var(--muted); margin: 0 .18em; vertical-align: .22em; }
.stat .lbl { margin-top: .5rem; font-weight: 600; }
.stat .sub { color: var(--muted); font-size: .9rem; }
.on-dark .stat .big, .numbers-band .stat .big { color: var(--gold-lite); }
.on-dark .stat .sub, .numbers-band .stat .sub { color: var(--muted-dark); }
.on-dark .stat .big .arrow, .numbers-band .stat .big .arrow { color: var(--muted-dark); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Pricing ---------- */
.plans { display: grid; gap: 1.25rem; align-items: stretch; }
.plan { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.75rem; display: flex; flex-direction: column; position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.plan.featured { background: var(--raised-2); color: var(--fg); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-lift); }
.plan.featured h3 { color: #fff; }
.plan .badge { position: absolute; top: -.85rem; left: 1.75rem; background: var(--gold); color: var(--on-gold); font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; padding: .4rem .85rem; border-radius: var(--radius-pill); }
.plan h3 { font-size: 1.5rem; margin-bottom: .25rem; }
.plan .for { color: var(--muted); font-size: .95rem; min-height: 2.8em; }
.plan.featured .for { color: var(--muted-dark); }
.plan .amount { font-family: var(--font-display); font-weight: 600; font-size: 2.9rem; letter-spacing: -.02em; line-height: 1; margin: 1rem 0 .25rem; font-variant-numeric: tabular-nums; }
.plan .amount small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.plan.featured .amount { color: var(--gold-lite); }
.plan.featured .btn-gold { background: var(--gold); color: var(--on-gold); }
.plan.featured .btn-gold:hover { background: var(--gold-3); }
.plan.featured .amount small { color: var(--muted-dark); }
.plan .terms { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.plan.featured .terms { color: var(--muted-dark); }
.plan ul { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.plan li { padding: .45rem 0 .45rem 1.7rem; position: relative; border-top: 1px solid var(--line); font-size: .98rem; }
.plan.featured li { border-color: var(--line-dark); }
.plan li::before { content: ""; position: absolute; left: 0; top: .8rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--teal); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6z'/></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'><path fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6z'/></svg>") center / contain no-repeat; }
.plan.featured li::before { background: var(--gold-lite); }
.plan li.plus { font-weight: 600; }
.plan .btn { justify-content: center; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } .plan.featured { transform: translateY(-10px); } .plan.featured:hover { transform: translateY(-14px); } }
.plan .annual { font-size: .9rem; color: var(--muted); margin: 0 0 .5rem; font-weight: 600; }
.plan.featured .annual { color: var(--gold-lite); }
@media (min-width: 900px) { .plans.two { grid-template-columns: repeat(2, 1fr); } }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .98rem; }
.compare th, .compare td { padding: .8rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-family: var(--font-body); font-weight: 600; }
.compare thead th { background: var(--paper-2); }
.compare td.c { text-align: center; }
.compare .yes { color: var(--good); font-weight: 700; }
.compare .no { color: var(--muted); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Phones: the plan columns must stay on screen, so the feature column wraps
   instead of pushing the check marks into a horizontal scroll. */
@media (max-width: 700px) {
  .compare { min-width: 0; table-layout: fixed; font-size: .9rem; }
  .compare th, .compare td { padding: .7rem .5rem; }
  .compare thead th:not(:first-child) { width: 74px; text-align: center; }
  .compare thead th:first-child { width: auto; }
  .compare th[scope="row"] { font-weight: 500; overflow-wrap: anywhere; }
  .compare td.c { padding-inline: .25rem; }
  /* The table no longer scrolls sideways on phones, so the wrapper can stop
     clipping and the column labels can stick under the site header. Without
     this a reader two screens down sees check marks with nothing naming
     the columns. */
  .table-scroll { overflow: visible; }
  .compare thead th { position: sticky; top: var(--header-h); z-index: 2; background: var(--paper-2); box-shadow: 0 1px 0 var(--line); }
  .compare thead th:not(:first-child) { line-height: 1.2; padding-inline: .2rem; }
  .compare thead th .muted.small { display: block; margin-top: .2rem; }
}
.strip { background: var(--gold); color: var(--on-gold); padding: 1.15rem 0; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; text-align: center; }

/* ---------- Checklist / features ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.checklist li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .8rem; align-items: start; }
.checklist li svg { width: 1.5rem; height: 1.5rem; color: var(--teal); flex: none; margin-top: .2rem; }
.checklist strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.checklist span { color: var(--muted); }
.on-dark .checklist span { color: var(--muted-dark); }
.on-dark .checklist li svg, .numbers-band .checklist li svg { color: var(--gold-lite); }
.two-col { display: grid; gap: 2rem 3rem; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; } }
.split { display: grid; gap: 2.5rem; align-items: center; }
.split > * { min-width: 0; } /* a long headline word must not widen the grid column past the viewport */
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 4rem; } .split.rev > :first-child { order: 2; } }
.trade-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.trade-list li { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .45rem 1rem; font-weight: 500; font-size: .93rem; color: var(--muted); }
.on-dark .trade-list li { background: var(--raised-2); border-color: var(--rule-lit); }

/* ---------- Service page hero ---------- */
.svc-hero { padding-block: clamp(3.25rem, 6vw, 5.25rem) clamp(2.75rem, 5vw, 4.25rem); background: var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.svc-hero::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 620px; z-index: 0; pointer-events: none; background: radial-gradient(44% 50% at 18% 32%, rgba(15,110,99,.13), transparent 68%), radial-gradient(38% 44% at 82% 10%, rgba(200,137,43,.15), transparent 70%); }
.svc-hero > * { position: relative; z-index: 1; }
.svc-hero h1 { margin-bottom: .75rem; }
/* Step the service headline down on phones so the longest single word
   ("Automatically.") stays inside the column instead of clipping. */
@media (max-width: 430px) { .svc-hero h1 { font-size: 2.2rem; } }
@media (max-width: 380px) { .svc-hero h1 { font-size: 2.05rem; } }
@media (max-width: 340px) { .svc-hero h1 { font-size: 1.8rem; } }
.svc-hero .lead { color: var(--muted); font-size: 1.2rem; max-width: 52ch; }
.svc-hero .price-line { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 1rem 0 1.35rem; }
.svc-hero .price-line small { font-weight: 600; font-size: .95rem; color: var(--muted); }
.numbers-band { background: var(--ink); color: var(--fg); }
.numbers-band .split { align-items: start; }
.numbers-band .video-card { max-width: 340px; }
@media (max-width: 899px) { .numbers-band .video-card { margin-inline: auto; } } /* stacked layout: center the card instead of leaving it flush left */
.big-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.95rem); line-height: 1.3; color: #fff; letter-spacing: -.008em; margin: 0 0 1rem; }
.big-quote::before { content: "\201C"; color: var(--gold-lite); }
.big-quote::after { content: "\201D"; color: var(--gold-lite); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.on-dark .faq-item { border-color: var(--line-dark); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left; background: none; border: 0; padding: 1.25rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; cursor: pointer; }
.faq-q .ic { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--line); color: var(--teal); position: relative; transition: transform .3s var(--ease), background-color .2s, border-color .2s, color .2s; }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.faq-q .ic::before { width: .7rem; height: 2px; }
.faq-q .ic::after { width: 2px; height: .7rem; transition: transform .3s var(--ease); }
.faq-q[aria-expanded="true"] .ic { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.on-dark .faq-q .ic { border-color: rgba(233,240,238,.3); color: var(--gold-lite); }
.on-dark .faq-q[aria-expanded="true"] .ic { background: var(--gold-lite); border-color: var(--gold-lite); color: var(--on-gold); }
.faq-q[aria-expanded="true"] .ic::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0 0 1.1rem; color: var(--muted); max-width: 70ch; }
.on-dark .faq-a p { color: var(--muted-dark); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }
.faq-a a { font-weight: 600; color: var(--teal); }
.on-dark .faq-a a { color: var(--gold-lite); }

/* ---------- Where to next ---------- */
.next { border-top: 1px solid var(--line); }
.next-grid { display: grid; gap: 1rem; }
.next-card { display: block; text-decoration: none; color: inherit; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.next-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--paper-3); }
.next-card .tag { font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.next-card strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; margin: .4rem 0 .3rem; }
.next-card span { color: var(--muted); font-size: .95rem; }
.next-card .go { display: block; margin-top: .7rem; font-weight: 600; color: var(--teal); }
@media (min-width: 760px) { .next-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--fg); position: relative; overflow: hidden; }
.cta-band .split { align-items: start; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: var(--muted-dark); }
.cta-band .alt-contact { display: grid; gap: .6rem; margin-top: 1.5rem; }
.cta-band .alt-contact a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; }
.cta-band .alt-contact a:hover { color: var(--gold-lite); }
.cta-band .alt-contact svg { width: 1.2em; height: 1.2em; color: var(--gold-lite); }
.cta-band .mascot-side { position: absolute; right: 2%; bottom: 0; width: 110px; opacity: .9; pointer-events: none; }

/* ---------- Embed slots ---------- */
.embed-slot { min-height: 320px; border: 1.5px dashed rgba(232,182,92,.45); border-radius: var(--radius-lg); background: var(--teal-soft); display: grid; place-items: center; text-align: center; padding: 2rem; }
.embed-slot .slot-label { font-family: var(--font-display); font-weight: 600; color: var(--teal); }
.embed-slot .slot-label small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); margin-top: .35rem; font-size: .9rem; }
.on-dark .embed-slot, .numbers-band .embed-slot, .cta-band .embed-slot { border-color: rgba(232,182,92,.45); background: rgba(232,182,92,.09); }
.on-dark .embed-slot .slot-label, .cta-band .embed-slot .slot-label { color: var(--gold-lite); }
.on-dark .embed-slot .slot-label small, .cta-band .embed-slot .slot-label small { color: var(--muted-dark); }
.on-paper .embed-slot, .embed-slot.light { background: var(--teal-soft); }
.embed-slot.light .slot-label { color: var(--teal); }
.embed-slot.light .slot-label small { color: var(--muted); }
.embed-slot.filled { border: 0; background: transparent; padding: 0; min-height: 0; display: block; }
.embed-slot.filled .slot-label { display: none; }
.embed-slot.tall { min-height: 560px; }

/* ---------- About ---------- */
.about-hero { background: var(--ink); color: var(--fg); overflow: hidden; }
.about-hero .split { align-items: end; }
.about-hero .mascot-big { max-height: 420px; width: auto; margin-inline: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.55)); }
.values { display: grid; gap: 1.25rem; }
.value { padding: 1.5rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.value h3 { margin-bottom: .4rem; }
.value p { margin: 0; color: var(--muted); }
@media (min-width: 760px) { .values { grid-template-columns: repeat(2, 1fr); } }
.prose { font-size: 1.12rem; }
.prose h2 { margin-top: 2.5rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }
.pull { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.3; padding: 1.5rem 0 1.5rem 1.75rem; margin: 2.25rem 0; border-left: 3px solid var(--teal); color: var(--text); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr .8fr; gap: 3rem; } }
.contact-side { display: grid; gap: 1rem; align-content: start; }
.contact-item { display: flex; gap: 1rem; align-items: start; padding: 1.2rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--paper-3); }
.contact-item svg { width: 1.5rem; height: 1.5rem; color: var(--teal); flex: none; }
.contact-item strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.contact-item span { color: var(--muted); font-size: .95rem; }

/* ---------- Legal ---------- */
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); }
.legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal p, .legal li { color: var(--text); }
.legal .updated { color: var(--muted); }
.legal .lead { color: var(--muted); }
.legal-toc { margin: 1.5rem 0 2.5rem; padding: 1.1rem 1.3rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.legal-toc ol { margin: 0; padding-left: 0; list-style: none; columns: 2; column-gap: 2rem; }
.legal-toc li { padding: .15rem 0; break-inside: avoid; font-size: .95rem; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal h2 { scroll-margin-top: 6rem; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--muted-dark); border-top: 1px solid var(--line-dark); padding-block: 3.5rem 2rem; font-size: .95rem; }
.footer-grid { display: grid; gap: 2rem; }
.site-footer h3 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--gold-lite); }
.footer-brand img { height: 50px; width: auto; margin-bottom: 1rem; }
.footer-brand p { max-width: 36ch; }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .88rem; }
.footer-bottom .legal-links { display: flex; gap: 1.25rem; }
.social { display: flex; gap: .6rem; margin-top: .75rem; }
.social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: border-color .2s, color .2s; }
.social a:hover { border-color: var(--gold-lite); color: var(--gold-lite); }
.social svg { width: 18px; height: 18px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* ---------- Utilities ---------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.flex { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.small { font-size: .9rem; }

/* ==========================================================================
   ADDED 2026-08-26 — problem pages, marquee, review embed, extra motion.
   Forged names only. Nothing below uses the retired light-SaaS aliases.
   ========================================================================== */

/* ---------- Scroll progress rail (motion-fx) ---------- */
.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: calc(var(--z-sticky) + 1); pointer-events: none;
  background: transparent;
}
.scroll-rail i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--gold-3));
}
.fx-off .scroll-rail { display: none; }

/* ---------- Spotlight: a soft gold glow tracks the cursor over a card ---- */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(232,182,92,.16), transparent 62%);
}
[data-spot]:hover::after, [data-spot]:focus-within::after { opacity: 1; }
[data-spot] > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { [data-spot]::after { display: none; } }

/* ---------- Trade marquee ---------- */
.marquee-band {
  border-bottom: 1px solid var(--rule); background: var(--sunk);
  overflow: hidden; padding-block: .95rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee { display: flex; width: max-content; gap: 0; }
.marquee-track {
  display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem;
  animation: marquee 42s linear infinite;
}
.marquee-track span {
  font-family: var(--font-mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; color: var(--mute); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2.4rem;
}
.marquee-track span::after {
  content: ""; width: 5px; height: 5px; background: var(--gold); flex: none;
  transform: rotate(45deg); opacity: .8;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee > :nth-child(2) { display: none; } }
.fx-off .marquee-track { animation: none; }
.fx-off .marquee > :nth-child(2) { display: none; }

/* ---------- Symptom picker: see-all link ---------- */
.picker-all {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: .69rem; color: var(--gold); text-decoration: none; font-weight: 500;
  padding: .55rem .25rem; white-space: nowrap;
}
.picker-all:hover { color: var(--gold-3); text-decoration: underline; text-underline-offset: .3em; }
.chip[aria-expanded="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.picker-answer a { color: var(--gold); font-weight: 600; }
.picker-answer a:hover { color: var(--gold-3); }

/* ---------- Our own Google reviews (GHL widget) ---------- */
.reviews-band { background: var(--sunk); border-block: 1px solid var(--rule); }
.reviews-embed {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: .5rem; box-shadow: var(--shadow); overflow: hidden;
}
.reviews-embed iframe { display: block; width: 100%; border: 0; min-height: 420px; }
.reviews-foot { margin: 1rem 0 0; color: var(--mute); }
.reviews-foot a { color: var(--gold); text-decoration: underline; text-underline-offset: .22em; }
.reviews-foot a:hover { color: var(--gold-3); }

/* ---------- Problem pages ---------- */
.prob-hero { background: var(--base); }
.prob-hero::before {
  background:
    radial-gradient(42% 46% at 22% 30%, rgba(200,137,43,.20), transparent 70%),
    radial-gradient(34% 40% at 86% 6%, rgba(232,182,92,.10), transparent 72%);
}
.prob-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); }
.prob-hero .lead { color: var(--mute); max-width: 56ch; }
.prob-hero .hero-ctas { margin-top: 1.6rem; }
.prob-crumb { color: var(--mute); margin: 0 0 1.1rem; }
.prob-crumb a { color: var(--gold); text-decoration: none; }
.prob-crumb a:hover { text-decoration: underline; text-underline-offset: .25em; }

.prob-stat {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); height: 100%;
}
.prob-stat .big {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.4rem, 5.4vw, 3.6rem); line-height: .95; letter-spacing: -.03em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.prob-stat .lbl { margin-top: .55rem; font-weight: 700; color: var(--fg); }
.prob-stat p { color: var(--mute); font-size: .96rem; margin: .5rem 0 1.1rem; }
.prob-stat .go { color: var(--gold); font-weight: 600; text-decoration: none; }
.prob-stat .go:hover { color: var(--gold-3); text-decoration: underline; text-underline-offset: .22em; }

.prob-fix { gap: 1.1rem; }
@media (min-width: 820px) { .prob-fix { grid-template-columns: 1fr 1fr; gap: 1.4rem 2.5rem; } }
.prob-fix li { align-items: start; }
.prob-next-quote blockquote { font-size: 1.02rem; color: var(--mute); }
.prob-next-quote blockquote::before { content: none; }
.prob-next-quote cite a { color: var(--gold); text-decoration: underline; text-underline-offset: .22em; }

.prob-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .prob-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .prob-grid { grid-template-columns: repeat(3, 1fr); } }
.prob-card {
  display: flex; flex-direction: column; gap: .45rem; text-decoration: none;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.35rem; position: relative; overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.prob-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.prob-card:hover { border-color: var(--rule-lit); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.prob-card:hover::before { transform: scaleX(1); }
.prob-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.prob-card .n { color: var(--gold); }
.prob-card strong { font-size: 1.14rem; line-height: 1.3; color: var(--fg); }
.prob-card .sub { color: var(--mute); font-size: .93rem; flex: 1; }
.prob-card .go { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold); font-weight: 600; font-size: .95rem; margin-top: .5rem; }
.prob-card .go svg { width: 1.05em; height: 1.05em; transition: transform .2s var(--ease); }
.prob-card:hover .go svg { transform: translateX(4px); }

/* Next-cards on a problem page carry a quoted complaint, so let them wrap. */
.next-card strong { text-wrap: pretty; }

/* ---------- Looping mock graphics (motion-fx) ---------- */
.mock-browser { position: relative; }
.mock-browser .m-cursor {
  position: absolute; width: 20px; height: 20px; left: 0; top: 0; opacity: 0;
  pointer-events: none; z-index: 3; color: var(--fg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.mock-browser .m-btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.mock-browser .m-ping {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 4; opacity: 0;
  background: var(--gold); color: var(--on-gold); font-family: var(--font-mono);
  font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .5rem; border-radius: 3px; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.8);
}
.loop-badge {
  position: absolute; top: .55rem; right: .55rem; z-index: 5;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
  display: inline-flex; align-items: center; gap: .3rem;
}
.loop-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: loop-pulse 2.2s ease-in-out infinite;
}
@keyframes loop-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.fx-off .loop-badge { display: none; }

/* Problem page: the stat card is a card, not a column filler. */
.page-problem .two-col, .page-problems .two-col { align-items: start; }
.prob-stat { height: auto; }

/* Problem page CTA: a short "what happens on the call" card, so the right
   column is not one floating button. */
.cta-card {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow);
}
.cta-card h3 { font-size: 1.05rem; margin-bottom: .9rem; color: #fff; }
.cta-card ol { margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: cta; }
.cta-card li {
  counter-increment: cta; position: relative; padding: .55rem 0 .55rem 2.2rem;
  border-top: 1px solid var(--rule); color: var(--mute); font-size: .96rem;
}
.cta-card li:first-child { border-top: 0; }
.cta-card li::before {
  content: counter(cta); position: absolute; left: 0; top: .55rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  color: var(--gold); border: 1px solid var(--rule-lit); border-radius: 50%;
}
.cta-card .btn { width: 100%; justify-content: center; }

/* Mock browser wireframe blocks were --raised on a --raised card, i.e.
   invisible. Give the skeleton its own step up plus a hairline. */
.mock-browser .m-row div,
.mock-browser .m-bar { background: var(--raised-2); border: 1px solid var(--rule); }
.mock-browser .bar { background: var(--raised-2); }
.mock-browser .bar i { background: var(--rule-lit); }
.mock-browser .m-hero { background: var(--sunk); border: 1px solid var(--rule); }

/* Symptom picker: nine chips stack into a wall on a phone, so below 720px
   the row becomes a swipeable rail with the label lifted out above it. */
.picker-label {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: -.02em; font-size: 1.15rem; color: var(--fg); margin: 0 0 .85rem;
}
.picker-row > span { display: none; }
@media (max-width: 719px) {
  .picker-row {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: .55rem; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .picker-row::-webkit-scrollbar { display: none; }
  .picker-row .chip, .picker-row .picker-all { flex: none; scroll-snap-align: start; }
}

/* ---------- GHL booking calendar embed -----------------------------------
   The widget renders on its own white ground, so it gets a deliberate light
   card rather than sitting as a raw white rectangle on the dark page. */
/* .filled comes from site.js and is more specific than .booking-embed, so
   the white card has to be stated on the pair or it loses the background. */
.booking-embed, .embed-slot.booking-embed.filled {
  border: 0; padding: 0; min-height: 0; display: block; background: #fff;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift);
}
/* Before the widget is injected the slot is an empty white card, which would
   read as a broken box. Keep it out of the flow until there is something in it. */
.booking-embed:not(.filled) { background: transparent; box-shadow: none; min-height: 620px; }
.booking-embed:not(.filled) noscript { display: block; padding: 2rem; text-align: center; }
.booking-embed .slot-label { display: none; }
.booking-embed iframe { display: block; width: 100%; border: 0; min-height: 620px; }
@media (max-width: 700px) { .booking-embed iframe { min-height: 720px; } }

/* Note under the plan comparison table. */
.table-note {
  margin: 1.1rem 0 0; max-width: 78ch; color: var(--mute); font-size: .95rem;
  border-left: 2px solid var(--gold); padding-left: 1rem;
}
.table-note strong { color: var(--fg); }

/* Compare legend: BEFORE / AFTER has to be the thing you read first, with the
   honest descriptor underneath it (the "before" sites are Hammer's own older
   template builds, so the wording must not imply another vendor built them). */
.cmp-tag { display: inline-flex; align-items: baseline; gap: .5rem; }
.cmp-tag b {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; font-size: .92rem; line-height: 1;
}
.cmp-tag > span {
  font-family: var(--font-mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; font-size: .62rem; opacity: .82;
}
@media (max-width: 560px) {
  .cmp-tag { flex-direction: column; gap: .1rem; align-items: flex-start; }
  .cmp-tag.r { align-items: flex-end; }
  .cmp-tag > span { font-size: .55rem; }
}


/* ---------- Call-share ladder: where the first call goes ----------
   Ten spots, bar length scaled so #1 (30 of 100) is full width. Top three
   (the map pack) are gold, 4-5 are the lit rule, 6-10 are the dim rule.
   Bars grow from 0 when the reveal observer adds .in; no-JS shows them full. */
.callshare { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow); }
.callshare-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 1rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.callshare-head .tag { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.callshare-head .dot { width: .6rem; height: .6rem; border-radius: 2px; background: var(--gold); display: inline-block; }
.callshare ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.callshare li { display: grid; grid-template-columns: 2.4rem 1fr 3.4rem; gap: .7rem; align-items: center; font-variant-numeric: tabular-nums; }
.callshare .rank { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.callshare .bar { height: 1.3rem; background: rgba(255,255,255,.045); border-radius: var(--radius); overflow: hidden; }
.callshare .bar i { display: block; height: 100%; width: var(--w); background: var(--rule); border-radius: var(--radius); transition: width 900ms var(--ease); }
.callshare .pct { font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-align: right; color: var(--fg); }
.callshare li.top .bar i { background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.callshare li.top .rank, .callshare li.top .pct { color: var(--gold); }
.callshare li.mid .bar i { background: var(--rule-lit); }
.callshare li:nth-child(2) .bar i { transition-delay: 60ms; } .callshare li:nth-child(3) .bar i { transition-delay: 120ms; }
.callshare li:nth-child(4) .bar i { transition-delay: 180ms; } .callshare li:nth-child(5) .bar i { transition-delay: 240ms; }
.callshare li:nth-child(6) .bar i { transition-delay: 300ms; } .callshare li:nth-child(7) .bar i { transition-delay: 360ms; }
.callshare li:nth-child(8) .bar i { transition-delay: 420ms; } .callshare li:nth-child(9) .bar i { transition-delay: 480ms; }
.callshare li:nth-child(10) .bar i { transition-delay: 540ms; }
html.js .callshare.reveal:not(.in) .bar i { width: 0; }
.callshare-foot { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .9rem; grid-template-columns: repeat(3, 1fr); }
.callshare-foot b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.callshare-foot span { display: block; font-size: .82rem; color: var(--muted); margin-top: .35rem; line-height: 1.35; }
.callshare-src { margin: .9rem 0 0; font-size: .78rem; color: var(--muted); }
@media (max-width: 480px) { .callshare-foot { grid-template-columns: 1fr 1fr; } .callshare li { grid-template-columns: 2rem 1fr 3rem; } }
@media (prefers-reduced-motion: reduce) { .callshare .bar i { transition: none; } html.js .callshare.reveal:not(.in) .bar i { width: var(--w); } }