/* ==========================================================================
   SNACKABLE — Design System
   Style: Exaggerated Minimalism + editorial brutalist edge
   Type:  DM Sans throughout / IBM Plex Mono for labels
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core palette */
  --ink:            #161616;
  --ink-raised:     #1F1F1F;
  --ink-line:       #303030;
  --cream:          #FAF4EC;
  --cream-raised:   #FFFFFF;
  --cream-line:     #E6DED1;

  /* Pastel accent family — each is a section ground, always with ink text.
     Every pastel clears 8:1 against --ink, so headings and body both pass. */
  --pink:           #FCB8FA;   /* brand accent + social practice */
  --sky:            #A9D6FF;   /* reputation practice */
  --mint:           #9FE7C7;
  --butter:         #FFDF8C;
  --lilac:          #CFC3FF;
  --coral:          #FF9E7D;   /* public relations practice */

  /* Hot accent — emphasis only, never a large text ground */
  --hot:            #FA5424;

  /* Deep variants: accent used AS TEXT on cream or white (all >= 4.7:1) */
  --pink-deep:      #A8228F;
  --sky-deep:       #1560B8;
  --mint-deep:      #0E7A55;
  --butter-deep:    #8A6200;
  --lilac-deep:     #5B3FD4;
  --coral-deep:     #B02A00;

  /* Muted ink for use on a pastel ground (>= 5:1 on every pastel) */
  --ink-muted:      #3D3A36;

  /* Semantic — light (default surface is bone) */
  --bg:             var(--cream);
  --surface:        var(--cream-raised);
  --fg:             var(--ink);
  --fg-muted:       #56524A;
  --line:           var(--cream-line);
  --accent:         var(--pink);
  --accent-ink:     var(--ink);
  --accent-text:    var(--pink-deep);

  --danger:         #C0261A;
  --danger-bg:      #FDECEA;
  --success:        #1B6E43;
  --success-bg:     #E8F5EE;

  /* Type scale */
  --font-display: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-mega:   clamp(3.25rem, 11vw, 10rem);
  --t-hero:   clamp(2.75rem, 8vw, 7rem);
  --t-h1:     clamp(2.25rem, 5.5vw, 4.25rem);
  --t-h2:     clamp(1.75rem, 3.6vw, 3rem);
  --t-h3:     clamp(1.3rem, 2.2vw, 1.85rem);
  --t-h4:     1.25rem;                           /*  20px — flat, so it
        cannot fall below the 18px body on narrow screens. */
  /* Small text matches v2 (Sphere's 14 / 16 / 18px steps). The lead's floor
     rises with the body so it can never compute smaller than body text at
     narrow widths. Display sizes above are v1's own and stay as they are. */
  --t-lead:   clamp(1.125rem, 1.5vw, 1.375rem);
  --t-body:   1.125rem;                          /*  18px */
  --t-small:  1rem;                              /*  16px */
  --t-label:  0.875rem;                          /*  14px */

  /* Spacing — standard density */
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --maxw:      82.5rem;   /* 1320px */
  --maxw-text: 46rem;

  /* Shape + motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 520ms;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Dark surfaces are opt-in per section via .band--ink, so page-level
   dark mode only adjusts the default (bone) band to stay legible. */
:root[data-theme='dark'],
:root:not([data-theme='light']) {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; }
li { margin-bottom: var(--s-2); }

::selection { background: var(--pink); color: var(--ink); }

/* Accessible focus — never removed */
:focus-visible {
  outline: 3px solid var(--hot);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.band--ink :focus-visible { outline-color: var(--pink); }
.band--pastel :focus-visible,
.cta-band :focus-visible,
.card--feature :focus-visible { outline-color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: var(--gutter);
  transform: translateY(-140%);
  background: var(--ink); color: var(--pink);
  padding: 0.85rem 1.35rem; z-index: 999;
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 62rem; }

.band { padding-block: var(--section-y); position: relative; }
.band--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.band--ink {
  background: var(--ink);
  color: var(--cream);
  --bg: var(--ink);
  --fg: var(--cream);
  --fg-muted: #A5A199;
  --line: var(--ink-line);
  --surface: var(--ink-raised);
  --accent-text: var(--pink);
  --danger: #FF7A66;
  --danger-bg: #3A1512;
  --success: #5FE0A4;
  --success-bg: #0F3323;
}
.band--white { background: var(--cream-raised); }

/* Pastel grounds. Text is always ink; --fg-muted darkens so secondary copy
   still clears 4.5:1 against a light, saturated background. */
.band--pastel {
  color: var(--ink);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --line: rgba(22, 22, 22, 0.16);
  --surface: rgba(255, 255, 255, 0.55);
  --accent-text: var(--ink);
}
.band--pink   { background: var(--pink);   --bg: var(--pink); }
.band--sky    { background: var(--sky);    --bg: var(--sky); }
.band--mint   { background: var(--mint);   --bg: var(--mint); }
.band--butter { background: var(--butter); --bg: var(--butter); }
.band--lilac  { background: var(--lilac);  --bg: var(--lilac); }
.band--coral  { background: var(--coral);  --bg: var(--coral); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

.grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-16); }
  .grid--split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */
.t-mega { font-family: var(--font-display); font-size: var(--t-mega); font-weight: 700; line-height: 0.88; letter-spacing: -0.045em; margin: 0; }
.t-hero { font-size: var(--t-hero); line-height: 0.92; letter-spacing: -0.04em; }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }
.t-h3 { font-size: var(--t-h3); }
.t-h4 { font-size: var(--t-h4); letter-spacing: -0.02em; }
.t-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg-muted); max-width: var(--maxw-text); }
.t-small { font-size: var(--t-small); }
.t-muted { color: var(--fg-muted); }
.t-measure { max-width: var(--maxw-text); }
.t-up { text-transform: uppercase; }
.t-center { text-align: center; }
.t-num { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fg-muted); margin: 0 0 var(--s-4);
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 2px;
  background: var(--accent-text); flex: none;
}
.eyebrow--plain::before { display: none; }

.mark {
  background: var(--pink); color: var(--ink);
  padding: 0 0.18em; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.mark--coral { background: var(--coral); color: var(--ink); }
.mark--sky { background: var(--sky); color: var(--ink); }

/* A highlight paints its content area — 1.30em in DM Sans — which is far
   taller than the sub-1 line-height the display headings use, so the bar
   bleeds past its own line box and clips the line above. Raising the
   heading's line-height to clear it would need ~1.3 and would destroy the
   tight stacking these headlines rely on. Instead, pad only the line that
   actually holds a mark: the bar gets its room, every other line keeps its
   leading.

   The value is derived, not eyeballed. The bar's top must clear the deepest
   descender of the line above:

     DM Sans deepest descender (gjpqy)  0.232em
     optical gap                      + 0.100em
     clearance already present        - 0.111em   (half the content-area
                                                   overhang at line-height
                                                   0.88)
     ------------------------------------------
     padding-block                      0.440em

   The optical gap is 0.10em rather than a pixel count because the marked
   headings run from 36px to 107px; at 0.04em the smallest of them cleared
   by a single pixel, which reads as touching.

   0.22em was right for the previous typeface and survived here only because
   two of the three marked headings happen to have no descenders on the line
   above. RE-DERIVE THIS WHENEVER THE DISPLAY FACE OR ITS LINE-HEIGHT
   CHANGES — measure the descender, do not guess. */
.hero__title .line:has(.mark),
h1 .line:has(.mark),
h2 .line:has(.mark) {
  padding-block: 0.44em;
}

/* Fallback for engines without :has() — a mark anywhere in a display heading
   loosens that heading rather than leaving the bar overlapping. */
@supports not selector(:has(*)) {
  .hero__title, .t-mega, .t-hero { line-height: 1.3; }
}

.outline-type {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  paint-order: stroke fill;
}
/* Safari/Chrome only; anything else still shows solid text rather than nothing. */
@supports not (-webkit-text-stroke: 1px black) {
  .outline-type { color: var(--fg); }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-line: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-line);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--pink); --btn-fg: var(--ink); --btn-line: var(--pink); }
.btn--primary:hover { --btn-bg: var(--ink); --btn-fg: var(--pink); --btn-line: var(--ink); }

/* High-emphasis accent. --hot is the only saturated colour; ink text keeps it at 5.4:1. */
.btn--hot { --btn-bg: var(--hot); --btn-fg: var(--ink); --btn-line: var(--hot); }
.btn--hot:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-line: var(--ink); }
.band--ink .btn--primary:hover { --btn-bg: transparent; --btn-fg: var(--pink); --btn-line: var(--pink); }

/* Mint CTA for the review funnel. A real variant rather than inline
   --btn-bg overrides: those beat the :hover rule on specificity, which pinned
   the background and left only the text colour changing. */
.btn--mint { --btn-bg: var(--mint); --btn-fg: var(--ink); --btn-line: var(--mint); }
.btn--mint:hover { --btn-bg: #FFFFFF; --btn-fg: var(--ink); --btn-line: var(--ink); }

.btn--coral { --btn-bg: var(--coral); --btn-fg: var(--ink); --btn-line: var(--coral); }
.btn--coral:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-line: var(--ink); }
.band--ink .btn--coral:hover { --btn-bg: transparent; --btn-fg: var(--coral); --btn-line: var(--coral); }

.btn--sky { --btn-bg: var(--sky); --btn-fg: var(--ink); --btn-line: var(--sky); }
.btn--sky:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-line: var(--ink); }
.band--ink .btn--sky:hover { --btn-bg: transparent; --btn-fg: var(--sky); --btn-line: var(--sky); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: currentColor; }
.btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); }

.btn--lg { min-height: 3.5rem; padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[aria-disabled='true'], .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn__icon { width: 1.05em; height: 1.05em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Text link with animated underline */
.link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 700;
  text-decoration: none; text-transform: uppercase;
  font-size: var(--t-small); letter-spacing: 0.04em;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { background-size: 0% 2px; color: var(--accent-text); }
.link svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. NAV
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  color: var(--ink);
  border-bottom: 1px solid var(--cream-line);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); min-height: 4.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; font-family: var(--font-display);
  font-weight: 700; font-size: 1.55rem; letter-spacing: -0.045em;
  color: var(--ink); flex: none;
}
.brand__dot { width: 0.6rem; height: 0.6rem; background: var(--hot); border-radius: 50%; flex: none; }
.brand:hover .brand__dot { background: var(--pink-deep); }

/* Wordmark: the pastel sweep carried over from the Artifexia partner lockup.
   The palette there is already this site's — pink, sky, mint, butter — so it
   transfers unchanged. The closing stop repeats the opening colour so the
   loop has no seam (the original jumps from butter back to pink). */
.brand__word {
  display: inline-block;
  /* An explicit tight line box, so the pill's height comes from padding we
     control rather than the inherited 1.65 line-height. */
  line-height: 1.05;
  padding: 0.32em 0.84em;
  border-radius: 0.2em;
  color: var(--ink);
  background-image: linear-gradient(90deg,
    var(--pink), var(--sky) 30%, var(--mint) 55%, var(--butter) 80%, var(--pink));
  background-size: 200% 100%;
  animation: brand-sweep 6s linear infinite;
}
@keyframes brand-sweep { to { background-position: -200% 0; } }

/* Hold a mid-sweep position rather than freezing wherever it happened to be. */
@media (prefers-reduced-motion: reduce) {
  .brand__word,
  .footer__wordmark { animation: none; background-position: -60% 0; }
}

.nav__links { display: none; }
/* 73rem, not the 62rem used elsewhere: the six-item row plus the brand pill
   and the CTA need 1147px, so below that the hamburger is the only layout
   that fits. Measured — re-measure if a nav label or the logo size changes. */
@media (min-width: 73rem) {
  .nav__links {
    display: flex; align-items: center; gap: var(--s-6);
    list-style: none; margin: 0; padding: 0;
  }
  .nav__links li { margin: 0; }
}
.nav__link {
  display: inline-block; padding: 0.5rem 0;
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  text-decoration: none; color: var(--fg-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--hot); }
.nav__link[aria-current='page'] { color: var(--ink); border-bottom-color: var(--hot); }

.nav__cta { display: none; }
@media (min-width: 73rem) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 3rem; min-height: 2.75rem; padding: 0 0.85rem;
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;
}
.nav__toggle:hover { background: var(--ink); color: var(--cream); }
@media (min-width: 73rem) { .nav__toggle { display: none; } }
.nav__toggle-bars { position: relative; width: 1.1rem; height: 0.7rem; flex: none; }
.nav__toggle-bars::before, .nav__toggle-bars::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars::after { top: 0.55rem; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { top: 0.28rem; transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after { top: 0.28rem; transform: rotate(-45deg); }

.nav__drawer {
  background: var(--cream); border-top: 1px solid var(--cream-line);
  padding: var(--s-4) 0 var(--s-8);
}
.nav__drawer[hidden] { display: none; }
.nav__drawer ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.nav__drawer li { margin: 0; border-bottom: 1px solid var(--cream-line); }
.nav__drawer ul a {
  display: block; padding: 1rem 0; min-height: 3rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -0.03em; text-decoration: none; color: var(--ink);
}
.nav__drawer ul a[aria-current='page'] { color: var(--pink-deep); }
@media (min-width: 73rem) { .nav__drawer { display: none !important; } }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  background: var(--cream); color: var(--ink);
  --bg: var(--cream); --fg: var(--ink); --fg-muted: #56524A; --line: var(--cream-line);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5.5rem);
  position: relative; overflow: hidden;
}
/* Soft pastel wash instead of the old neon glow. */
.hero__glow {
  position: absolute; inset: auto -20% -55% -20%; height: 78%;
  background:
    radial-gradient(46% 70% at 14% 100%, color-mix(in srgb, var(--pink) 34%, transparent), transparent 72%),
    radial-gradient(44% 66% at 86% 100%, color-mix(in srgb, var(--sky) 30%, transparent), transparent 74%);
  pointer-events: none;
}
/* Opt-in dark hero, kept for any page that wants the old treatment. */
.hero--ink {
  background: var(--ink); color: var(--cream);
  --bg: var(--ink); --fg: var(--cream); --fg-muted: #A5A199; --line: var(--ink-line);
}
.hero__inner { position: relative; }
.hero__title { font-size: var(--t-mega); line-height: 0.88; letter-spacing: -0.045em; margin: 0 0 var(--s-6); }
.hero__title .line { display: block; }
.hero__lead { font-size: var(--t-lead); color: var(--fg-muted); max-width: 40ch; margin-bottom: var(--s-8); }
.hero__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4); margin: var(--s-12) 0 0; padding: 0; border: 0;
}
@media (min-width: 52rem) { .hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hero__meta div {
  background: var(--tile, var(--pink));
  border-radius: var(--r-lg);
  padding: var(--s-6);
  min-width: 0;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
/* Each tile takes a different pastel, with a slight alternating tilt. */
.hero__meta div:nth-child(1) { --tile: var(--pink);   transform: rotate(-1.4deg); }
.hero__meta div:nth-child(2) { --tile: var(--sky);    transform: rotate(1deg); }
.hero__meta div:nth-child(3) { --tile: var(--mint);   transform: rotate(-0.8deg); }
.hero__meta div:nth-child(4) { --tile: var(--butter); transform: rotate(1.6deg); }
.hero__meta div:hover { transform: rotate(0deg) translateY(-4px); }

.hero__meta dt {
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.hero__meta dd {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Dark hero variant keeps the plain inline stat row. */
.hero--ink .hero__meta div { background: none; padding: 0; transform: none; color: inherit; }
.hero--ink .hero__meta dt { color: var(--fg-muted); }
.hero--ink .hero__meta dd { color: var(--fg); }

/* --------------------------------------------------------------------------
   8. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
  --speed: 42s;
  overflow: hidden; position: relative;
  border-block: 1px solid var(--line);
  padding-block: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; width: max-content; gap: var(--s-8);
  animation: marquee var(--speed) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee[data-paused='true'] .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  text-transform: uppercase; letter-spacing: -0.02em;
  white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-8);
  color: var(--fg);
}
.marquee__item::after { content: '\2022'; color: var(--accent-text); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee-ctl {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: var(--s-3);
  min-height: 2.25rem; padding: 0.3rem 0.8rem;
  background: transparent; color: var(--fg-muted);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;
}
.marquee-ctl:hover { color: var(--fg); border-color: var(--fg); }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.card--link:hover { border-color: var(--fg); transform: translateY(-4px); }
.card__num {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.14em; color: var(--accent-text);
}
.card__icon {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--fg); border-radius: var(--r-pill);
  margin-bottom: var(--s-2);
}
.card__icon svg { width: 1.35rem; height: 1.35rem; stroke-width: 1.75; }
.card__title { margin: 0; font-size: var(--t-h3); }
.card__body { color: var(--fg-muted); margin: 0; font-size: var(--t-small); }
.card__foot { margin-top: auto; padding-top: var(--s-4); }
.card--feature { background: var(--pink); --bg: var(--pink); color: var(--ink); border-color: var(--pink); --fg-muted: var(--ink-muted); }
.card--feature .card__num, .card--feature .card__icon { color: var(--ink); border-color: var(--ink); }

/* Stretched link so the whole card is one target */
.stretch::after { content: ''; position: absolute; inset: 0; }

/* Pillar cards (home services) */
.pillar {
  position: relative; display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  padding: var(--s-8); border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  overflow: hidden;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--fg); }
.pillar__index {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.14em; color: var(--fg-muted);
  display: block; margin-bottom: var(--s-6);
}
.pillar__title { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-bottom: var(--s-3); }
.pillar__body { color: var(--fg-muted); font-size: var(--t-small); margin-bottom: var(--s-6); }
.pillar__list { list-style: none; padding: 0; margin: 0 0 var(--s-8); }
.pillar__list li {
  font-size: var(--t-small); padding-left: 1.3rem; position: relative;
  color: var(--fg-muted);
}
.pillar__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 2px; background: var(--accent-text);
}
.pillar--pr:hover { background: var(--coral); color: var(--ink); border-color: var(--coral); --fg-muted: var(--ink-muted); --accent-text: var(--ink); }
.pillar--rep:hover { background: var(--sky); color: var(--ink); border-color: var(--sky); --fg-muted: var(--ink-muted); --accent-text: var(--ink); }
.pillar--social:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); --fg-muted: var(--ink-muted); --accent-text: var(--ink); }

/* --------------------------------------------------------------------------
   10. LADDER (PR funnel stages)
   -------------------------------------------------------------------------- */
.ladder { list-style: none; margin: 0; padding: 0; counter-reset: rung; }
.ladder__item {
  position: relative; margin: 0;
  border-top: 1px solid var(--line);
  padding-block: var(--s-8);
}
.ladder__item:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 56rem) {
  .ladder__item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-8);
    align-items: start;
  }
}
.ladder__num {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.16em; color: var(--accent-text);
  display: block; margin-bottom: var(--s-3);
}
@media (min-width: 56rem) { .ladder__num { margin-bottom: 0; padding-top: 0.4rem; } }
.ladder__title { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.ladder__stage {
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-muted); display: block; margin-bottom: var(--s-2);
}
.ladder__body { color: var(--fg-muted); font-size: var(--t-small); }
.ladder__deliverables { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.ladder__deliverables li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--t-small); color: var(--fg-muted);
}
.ladder__deliverables li::before {
  content: ''; position: absolute; left: 0; top: 0.45em;
  width: 0.85rem; height: 0.85rem;
  border: 2px solid var(--accent-text); border-radius: 50%;
}
.ladder__item:hover .ladder__num { color: var(--fg); }

/* --------------------------------------------------------------------------
   11. STATS
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); padding: var(--s-8); }
.stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1;
  letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-3);
}
.stat__label { font-size: var(--t-small); color: var(--fg-muted); margin: 0; }

/* --------------------------------------------------------------------------
   12. CASE STUDIES
   -------------------------------------------------------------------------- */
.case {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.case:hover { transform: translateY(-4px); border-color: var(--fg); }
.case__visual {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: var(--ink); display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
.case__visual svg { width: 100%; height: 100%; }
.case__meta {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted);
  margin-bottom: var(--s-3);
}
.case__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.case__title { font-size: var(--t-h3); margin: 0; }
.case__result {
  margin-top: auto; padding-top: var(--s-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.02em;
}
.case__result span { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   13. PROCESS
   -------------------------------------------------------------------------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 52rem) { .process { grid-template-columns: repeat(var(--process-cols, 4), 1fr); } }
.process li { margin: 0; background: var(--bg); padding: var(--s-8) var(--s-6); }
.process__step {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.16em; color: var(--accent-text); display: block; margin-bottom: var(--s-4);
}
.process__title { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.process__body { font-size: var(--t-small); color: var(--fg-muted); margin: 0; }

/* --------------------------------------------------------------------------
   14. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-8); background: var(--surface);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.quote__text {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.3;
  letter-spacing: -0.025em; margin: 0;
}
.quote__cite { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; font-style: normal; }
.quote__avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ink); color: var(--pink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.quote__name { font-weight: 600; font-size: var(--t-small); display: block; }
.quote__role { font-size: var(--t-small); color: var(--fg-muted); display: block; }

/* --------------------------------------------------------------------------
   15. ACCORDION / FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); min-height: 4rem; padding: var(--s-6) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h4); letter-spacing: -0.02em; color: var(--fg);
}
.faq__btn:hover { color: var(--accent-text); }
.faq__sign { position: relative; width: 1.1rem; height: 1.1rem; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: currentColor; transform: translateY(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq__sign::after { transform: translateY(-50%) rotate(90deg); }
.faq__btn[aria-expanded='true'] .faq__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__panel { padding: 0 0 var(--s-6); max-width: var(--maxw-text); color: var(--fg-muted); }
.faq__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16. TABS (reputation: people / business)
   -------------------------------------------------------------------------- */
.tabs { display: inline-flex; gap: 0.35rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.tab {
  min-height: 2.75rem; padding: 0.5rem 1.35rem;
  background: transparent; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { color: var(--fg); }
.tab[aria-selected='true'] { background: var(--fg); color: var(--bg); }
.tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   17. SERP MOCK (reputation before/after)
   -------------------------------------------------------------------------- */
.serp {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.serp__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.serp__tag { padding: 0.2rem 0.55rem; border-radius: var(--r-pill); font-weight: 700; }
.serp__tag--bad { background: var(--danger-bg); color: var(--danger); }
.serp__tag--good { background: var(--success-bg); color: var(--success); }
.serp__list { list-style: none; margin: 0; padding: var(--s-4) var(--s-6) var(--s-6); }
.serp__list li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.serp__list li:last-child { border-bottom: 0; }
.serp__rank { font-family: var(--font-mono); font-size: var(--t-label); color: var(--fg-muted); padding-top: 0.25rem; flex: none; width: 1.75rem; }
.serp__title { font-size: var(--t-small); font-weight: 600; margin: 0; }
.serp__url { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-muted); margin: 0; word-break: break-word; overflow-wrap: anywhere; }
.serp__flag { font-size: 0.6875rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.serp__flag--bad { color: var(--danger); }
.serp__flag--good { color: var(--success); }

/* --------------------------------------------------------------------------
   18. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-8); }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-6); }
.fieldset__legend {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3);
  letter-spacing: -0.03em; padding: 0; margin-bottom: var(--s-2);
  display: flex; align-items: baseline; gap: var(--s-3);
}
.fieldset__legend span {
  font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: 0.16em; color: var(--accent-text); font-weight: 400;
}
/* align-content:start stops the auto rows absorbing the extra height when a
   grid sibling is taller (e.g. a neighbouring field carries a hint line),
   which was inflating the label and the control itself. */
.field { display: grid; gap: 0.4rem; align-content: start; }
.field__label { font-weight: 600; font-size: var(--t-small); }
.field__req { color: var(--danger); margin-left: 0.15rem; }
.field__hint { font-size: 0.8125rem; color: var(--fg-muted); margin: 0; }
.field__error {
  font-size: 0.8125rem; color: var(--danger); font-weight: 600;
  display: flex; align-items: center; gap: 0.35rem; margin: 0;
}
.field__error[hidden] { display: none; }
.field__error svg { width: 1em; height: 1em; flex: none; }

.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 1rem;
  background: var(--surface); color: var(--fg);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: 1rem; /* >=16px prevents iOS zoom */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.select { appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356524A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.15rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--fg); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger);
}
.input::placeholder, .textarea::placeholder { color: #6E695E; }

/* Choice chips (checkbox / radio cards) */
.choices { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .choices--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .choices--3 { grid-template-columns: repeat(3, 1fr); } }
.choice { position: relative; display: block; }
.choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.choice__box {
  display: flex; align-items: flex-start; gap: 0.75rem;
  min-height: 3rem; padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; height: 100%;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice__box:hover { border-color: var(--fg-muted); }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--coral); outline-offset: 3px; }
.choice input:checked + .choice__box { border-color: var(--fg); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.choice__tick {
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.2rem;
  border: 2px solid var(--fg-muted); border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.choice input[type='radio'] + .choice__box .choice__tick { border-radius: 50%; }
.choice input:checked + .choice__box .choice__tick { background: var(--fg); border-color: var(--fg); }
.choice__tick svg { width: 0.75rem; height: 0.75rem; color: var(--bg); opacity: 0; }
.choice input:checked + .choice__box .choice__tick svg { opacity: 1; }
.choice__text { font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.choice__text small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.8125rem; margin-top: 0.15rem; }

/* Honeypot: off-screen, untabbable, hidden from assistive tech. Only an
   automated submission fills it in. */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.error-summary {
  border: 2px solid var(--danger); background: var(--danger-bg); color: #5A1109;
  border-radius: var(--r-sm); padding: var(--s-6);
}
.error-summary[hidden] { display: none; }
.error-summary h2 { font-size: var(--t-h4); margin-bottom: var(--s-3); color: var(--danger); }
.error-summary ul { margin: 0; padding-left: 1.15rem; }
.error-summary a { color: var(--danger); font-weight: 600; }

.form-success {
  border: 2px solid var(--success); background: var(--success-bg); color: #10402A;
  border-radius: var(--r-sm); padding: var(--s-8); text-align: center;
}
.form-success[hidden] { display: none; }
.form-success h2 { color: var(--success); }

.form-aside {
  background: var(--ink); color: var(--cream);
  --bg: var(--ink); --fg: var(--cream); --fg-muted: #A5A199; --line: var(--ink-line);
  --accent-text: var(--pink);
  border-radius: var(--r-md); padding: var(--s-8);
}
/* Sticky only once the aside sits BESIDE the form. In the stacked single-column
   layout it would pin to the top and let the form scroll underneath it — and
   .choice is positioned, so those boxes paint over the pinned panel. */
@media (min-width: 64rem) {
  .form-aside { position: sticky; top: 6.5rem; }
}

/* --------------------------------------------------------------------------
   19. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { background: var(--pink); --bg: var(--pink); color: var(--ink); --fg: var(--ink); --fg-muted: var(--ink-muted); --line: rgba(22,22,22,0.18); }
.cta-band--coral { background: var(--coral); --bg: var(--coral); color: var(--ink); --fg: var(--ink); --fg-muted: var(--ink-muted); --line: rgba(22,22,22,0.22); }
.cta-band--sky { background: var(--sky); --bg: var(--sky); color: var(--ink); --fg: var(--ink); --fg-muted: var(--ink-muted); --line: rgba(22,22,22,0.2); }
.cta-band .btn--ghost { --btn-fg: var(--fg); }
.cta-band__title { font-size: var(--t-h1); margin-bottom: var(--s-6); }

/* Sticky mobile CTA on funnel pages */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 90;
  background: var(--ink); color: var(--cream);
  border-top: 1px solid var(--ink-line);
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.sticky-cta p { margin: 0; font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em; color: #A5A199; }
/* The bar is one fixed row, so the button holds its line and gives up
   horizontal padding instead — at 390px the full-size label wrapped to two
   lines inside a sticky bar. .btn's 3rem min-height keeps the tap target. */
.sticky-cta .btn {
  flex: none;
  white-space: nowrap;
  padding-inline: 1rem;
  font-size: 0.875rem;
}
.sticky-cta p { min-width: 0; }
/* Tied to the nav breakpoint: below it the header CTA is in the drawer, so
   the sticky bar is the only CTA on screen. The two must not disagree. */
@media (min-width: 73rem) { .sticky-cta { display: none; } }

/* --------------------------------------------------------------------------
   20. TEAM
   -------------------------------------------------------------------------- */
.person { display: flex; flex-direction: column; gap: var(--s-4); }
.person__photo {
  aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden;
  background: var(--ink); display: grid; place-items: center;
  border: 1px solid var(--line);
}
.person__photo svg { width: 100%; height: 100%; }
.person__name { font-size: var(--t-h4); margin: 0; }
.person__role { font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); margin: 0; }
.person__bio { font-size: var(--t-small); color: var(--fg-muted); margin: 0; }

/* Single-founder layout. The photo column is capped at 20rem because the
   source crop is 420px wide — any wider and it would be upscaled. */
.founder { display: grid; gap: var(--s-8); align-items: start; }
.founder__photo {
  aspect-ratio: 3 / 4; max-width: 20rem;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--ink); border: 1px solid var(--line);
}
.founder__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder__body > * + * { margin-top: var(--s-4); }
.founder__body .person__role { margin-top: var(--s-2); }
@media (min-width: 48rem) {
  .founder { grid-template-columns: 20rem minmax(0, 1fr); gap: var(--s-12); }
}

/* Service list in the local section. */
.local__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.local__list li {
  padding-left: 1.25rem; position: relative;
  margin-bottom: var(--s-3); color: var(--fg-muted);
}
.local__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent);
}
.local__list a { font-weight: 500; }

/* 404 shortcut list. */
.notfound__links {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
}
.notfound__links a {
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   20b. LEGAL PAGES
   --------------------------------------------------------------------------
   Long-form prose. Held to a readable measure and given a clear heading
   rhythm, since these pages are nothing but headings and paragraphs. */
.legal { max-width: var(--maxw-text); }
.legal h3 {
  font-size: var(--t-h4); letter-spacing: -0.02em;
  margin: var(--s-12) 0 var(--s-4);
}
.legal h3:first-of-type { margin-top: var(--s-8); }
.legal p, .legal ul { margin: 0 0 var(--s-4); }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: var(--s-3); }
.legal li:last-child { margin-bottom: 0; }
.legal__meta {
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-muted);
}
.legal code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.35em; border-radius: 0.25em;
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--cream); --bg: var(--ink); --fg: var(--cream); --fg-muted: #A5A199; --line: var(--ink-line); padding-block: var(--s-16) var(--s-8); }
.footer__grid { display: grid; gap: var(--s-12); }
@media (min-width: 56rem) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-8); } }
.footer h2 { font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); font-weight: 400; margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.6rem; }
.footer a { text-decoration: none; font-size: var(--t-small); color: #D4D1C9; transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--pink); }
/* A link sitting inside a sentence cannot rely on colour alone: the link
   colour against the surrounding muted text is only 1.69:1, under the 3:1 a
   colour-only cue needs. The column lists are exempt — their position makes
   them obviously links — so this is scoped to prose. */
.footer p a, .footer address a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer__bottom {
  margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: 0.8125rem; color: var(--fg-muted);
}
/* Copyright and legal links travel together, so the links never orphan onto
   a row of their own when the bottom bar wraps. */
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-2) var(--s-4); margin: 0;
}
.footer__legal p { margin: 0; }
.footer__legal a { color: inherit; }
.footer__legal a:hover, .footer__legal a:focus-visible { color: var(--cream); }
.footer__wordmark {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 14vw, 11rem); line-height: 0.85; letter-spacing: -0.05em;
  margin: var(--s-16) 0 0;
  /* Same sweep as the header wordmark, clipped to the glyphs instead of a
     pill. A stroke cannot take a gradient, so the outline is dropped. */
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--pink), var(--sky) 30%, var(--mint) 55%, var(--butter) 80%, var(--pink));
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: brand-sweep 6s linear infinite;
  user-select: none;
}

/* --------------------------------------------------------------------------
   22. MOTION — reveal on scroll
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee__track { animation: none; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .card--link:hover, .case:hover, .pillar:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   23. MISC
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted);
}
.badge--accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.tag-list li { margin: 0; }

.note {
  border-left: 3px solid var(--accent-text);
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  font-size: var(--t-small); color: var(--fg-muted);
  max-width: var(--maxw-text);
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.checklist li { position: relative; padding-left: 2rem; font-size: var(--t-small); margin: 0; }
.checklist li svg { position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; color: var(--accent-text); }

.breadcrumb { font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); margin-bottom: var(--s-6); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.breadcrumb li + li::before { content: '/'; color: var(--line); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   24. PAGE THEMES — funnel pages carry their own signature accent
   -------------------------------------------------------------------------- */
.theme-pr  { --accent: var(--coral); --accent-text: var(--coral-deep); }
.theme-rep { --accent: var(--sky);   --accent-text: var(--sky-deep); }

.theme-pr .hero,  .theme-pr .band--ink,  .theme-pr .form-aside  { --accent-text: var(--coral); }
.theme-rep .hero, .theme-rep .band--ink, .theme-rep .form-aside { --accent-text: var(--sky); }

.theme-pr ::selection  { background: var(--coral); color: var(--ink); }
.theme-rep ::selection { background: var(--sky); color: var(--ink); }

/* Page hero variant for interior pages */
.hero--page { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero--page .hero__title { font-size: var(--t-hero); }

/* Pricing / engagement tiers */
.tier {
  display: flex; flex-direction: column; gap: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: var(--s-8);
}
.tier--highlight { border: 2px solid var(--accent); }
.tier > p { margin-bottom: 0; }
.tier__name { font-size: var(--t-h3); margin: 0; }
.tier__price {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; margin: 0;
}
.tier__price small { display: block; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-top: 0.35rem; }
.tier__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.tier__list li { position: relative; padding-left: 1.75rem; font-size: var(--t-small); margin: 0; color: var(--fg-muted); }
.tier__list li svg { position: absolute; left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem; color: var(--accent-text); }
.tier__foot { margin-top: auto; padding-top: var(--s-4); }

/* Problem / pain cards */
.pain {
  border: 1px solid var(--line); border-left: 4px solid var(--danger);
  border-radius: var(--r-sm); background: var(--surface);
  padding: var(--s-6);
}
.pain h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.pain p { font-size: var(--t-small); color: var(--fg-muted); margin: 0; }

/* Outlet tile grid */
.outlets { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 30rem) { .outlets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .outlets { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .outlets { grid-template-columns: repeat(5, 1fr); } }
.outlet {
  margin: 0;
  background: var(--bg); padding: var(--s-6) var(--s-4);
  display: grid; place-items: center; min-height: 6rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.02em; text-align: center;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.outlet:hover { color: var(--fg); background: var(--surface); }

/* Split feature row (image left / copy right, alternating) */
.feature-row { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 56rem) {
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
  .feature-row--flip > *:first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   25. CREATOR STUDIO — content-format reels + creator roster
   -------------------------------------------------------------------------- */
.reels { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .reels { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .reels { grid-template-columns: repeat(6, 1fr); gap: var(--s-3); } }

.reel { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; }
.reel__art {
  aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.reel:hover .reel__art { transform: translateY(-4px); border-color: var(--accent); }
.reel__art svg { width: 100%; height: 100%; display: block; }
.reel__label {
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-muted); margin: 0;
}

.roster { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.roster__faces { display: flex; flex: none; }
.roster__face {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  border: 2px solid var(--bg); margin-left: -0.7rem;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem;
  background: var(--ink-raised); color: var(--pink);
}
.roster__face:first-child { margin-left: 0; }
.roster__face--more { background: var(--ink); color: var(--pink); }
.roster p { margin: 0; font-size: var(--t-small); color: var(--fg-muted); }
.roster strong { color: var(--fg); }

/* --------------------------------------------------------------------------
   26. REVIEW FUNNEL — lead capture, platform grid, verdict table, review mock
   -------------------------------------------------------------------------- */
.theme-review { --accent: var(--mint); --accent-text: var(--mint-deep); }
.theme-review .hero, .theme-review .band--ink, .theme-review .form-aside { --accent-text: var(--mint); }
.theme-review ::selection { background: var(--mint); color: var(--ink); }

/* Hero lead capture: one field, one button, one decision. */
.lead-form { max-width: 40rem; margin-top: var(--s-8); }
.lead-form__row { display: flex; flex-direction: column; gap: var(--s-3); }
/* The pill row needs about 550px. The hero splits into two columns at 64rem,
   and that column does not reach 550px until roughly 80rem — so between those
   two the input was crushed (115px at a 1024px viewport, against a button
   fixed at 294px). Comma = OR: pill row while the hero is still one column,
   and again once the split column is genuinely wide enough. Stacked between. */
@media (min-width: 40rem) and (max-width: 63.99rem), (min-width: 80rem) {
  .lead-form__row {
    flex-direction: row; align-items: stretch;
    background: var(--cream-raised);
    border: 2px solid var(--ink); border-radius: var(--r-pill);
    padding: 0.4rem 0.4rem 0.4rem 0.35rem; gap: 0.4rem;
  }
  .lead-form__row .input {
    border: 0; background: transparent; min-height: 3.25rem;
    padding-left: 1.25rem; border-radius: var(--r-pill);
  }
  .lead-form__row .input:focus-visible { outline-offset: -2px; }
  .lead-form__row .btn { flex: none; }
}
.lead-form .field { gap: 0.5rem; }
.lead-form__note {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin-top: var(--s-4); padding: 0; list-style: none;
}
.lead-form__note li {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  font-size: var(--t-small); color: var(--fg-muted);
}
.lead-form__note svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--accent-text); }

/* Platform coverage grid */
.platforms { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 30rem) { .platforms { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56rem) { .platforms { grid-template-columns: repeat(5, 1fr); } }
.platform {
  margin: 0; background: var(--bg); min-height: 5.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: var(--s-4) var(--s-3); text-align: center;
  transition: background var(--dur) var(--ease);
}
.platform:hover { background: var(--surface); }
.platform__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.02em; }
.platform__note { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }

/* Removable / not-removable verdict columns */
.verdict { display: grid; gap: var(--s-6); }
@media (min-width: 56rem) { .verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verdict__col { border-radius: var(--r-md); padding: var(--s-8); }
.verdict__col--yes { background: var(--mint); color: var(--ink); --fg-muted: var(--ink-muted); }
.verdict__col--no { background: var(--surface); border: 1px solid var(--line); }
.verdict__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6); padding-bottom: var(--s-4);
  border-bottom: 1px solid currentColor;
}
.verdict__head h3 { margin: 0; font-size: var(--t-h3); }
.verdict__badge {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 2px solid currentColor;
}
.verdict__badge svg { width: 1.15rem; height: 1.15rem; }
.verdict ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.verdict li { margin: 0; font-size: var(--t-small); }
.verdict li strong { display: block; font-size: 1rem; margin-bottom: 0.15rem; }
.verdict li span { color: var(--fg-muted); }

/* Mock review card — shows what a flagged review looks like */
.review-mock {
  margin: 0; background: var(--cream-raised);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-6); display: grid; gap: var(--s-4);
}
.review-mock--gone { background: var(--mint); border-color: var(--mint); --fg-muted: var(--ink-muted); }
.review-mock__head { display: flex; align-items: center; gap: var(--s-3); }
.review-mock__avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
}
.review-mock__name { margin: 0; font-weight: 600; font-size: var(--t-small); }
.review-mock__stars { display: flex; gap: 0.1rem; margin: 0.15rem 0 0; }
.review-mock__stars svg { width: 0.9rem; height: 0.9rem; }
.review-mock__flag {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem; border-radius: var(--r-pill);
  background: var(--danger-bg); color: var(--danger);
}
.review-mock--gone .review-mock__flag { background: var(--ink); color: var(--mint); }
.review-mock__body { margin: 0; font-size: var(--t-small); }
.review-mock__body--gone { text-decoration: line-through; opacity: 0.55; }
.review-mock__meta { margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); }

/* Promise / guarantee row */
.promise { display: grid; gap: var(--s-6); list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .promise { grid-template-columns: repeat(3, 1fr); } }
.promise li { margin: 0; display: grid; gap: var(--s-2); }
.promise__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  display: grid; place-items: center; border: 2px solid currentColor; margin-bottom: var(--s-2);
}
.promise__icon svg { width: 1.2rem; height: 1.2rem; }
.promise h3 { margin: 0; font-size: var(--t-h4); }
.promise p { margin: 0; font-size: var(--t-small); color: var(--fg-muted); }

/* Minimal funnel-page header. Scoped to .nav--minimal so the standard nav
   keeps hiding its CTA on mobile, where the drawer carries it instead. */
.nav__tagline {
  display: none; margin: 0;
  font-family: var(--font-mono); font-size: var(--t-label);
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted);
}
@media (min-width: 48rem) { .nav__tagline { display: block; } }
.nav--minimal .nav__cta { display: inline-flex; white-space: nowrap; }
.nav--minimal .nav__inner { gap: var(--s-4); }
/* The brand sits beside the CTA with no drawer to fall back on, so below the
   tablet break the CTA holds one line and gives up padding instead of
   wrapping. */
@media (max-width: 30rem) {
  .nav--minimal .nav__inner { gap: var(--s-3); }
  .nav--minimal .nav__cta { padding-inline: 1rem; font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   PRINT
   --------------------------------------------------------------------------
   Mostly for the legal pages, which are the ones people actually print.
   Drop the furniture, flatten to black on white, and expose link targets. */
@media print {
  *, *::before, *::after {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  .nav, .nav__drawer, .footer__wordmark, .sticky-cta, .hero__glow,
  .marquee, .btn-row, .skip-link, .cta-band { display: none !important; }
  .footer { border-top: 1px solid #000; padding-block: 1rem 0; }
  .footer__grid, .footer__legal { display: block; }
  body { font-size: 11pt; line-height: 1.45; }
  .wrap { max-width: none; padding: 0; }
  .band { padding-block: 0.75rem; }
  .legal { max-width: none; }
  .legal h3 { margin-top: 1.4rem; page-break-after: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  /* A printed link is useless without its target. */
  .legal a[href^="/"]::after  { content: " (snackableagency.com" attr(href) ")"; font-size: 0.85em; }
  .legal a[href^="mailto:"]::after { content: ""; }
  a { text-decoration: underline; }
  img { max-width: 100% !important; }
}