/* ==========================================================================
   Scroll — shared design system (v2 boards)
   Owner: foundation pass. Page agents: DO NOT EDIT. Add page-scoped modifiers
   in /assets/css/pages/<page>.css instead. API reference: /COMPONENTS.md and /styleguide/.

   Breakpoints (max-width):  1100 compact nav · 1024 tablet · 900 menu/burger · 768 · 620 mobile · 400 small
   Contents
     01 Tokens              10 Cards
     02 Reset / base        11 Grids + split layouts
     03 Type                12 Lists
     04 Layout / container  13 Stats
     05 Panels              14 Compare table
     06 Eyebrow + section   15 FAQ accordion, tabs, filter chips
        headers             16 Team card + booking widget
     07 Buttons + links     17 Ad wall hero, logo marquee, photo band
     08 Pills / chips       18 UI cards (feed / SMS / calendar)
     09 Icon tile           19 Header, dropdown, mobile menu, mobile bar
                            20 Footer
                            21 Utilities, motion, reduced motion
   ========================================================================== */

/* 01 ─ Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* palette */
  --ground: #111111;
  --charcoal: #1a1a1a;
  --charcoal-mid: #2a2a2a;
  --charcoal-light: #3C3C3C;
  --placeholder: #232323;
  --footer: #141414;
  --coral: #EAA572;
  --coral-glow: #f0b88a;
  --coral-ink: #A9571F;
  --slate: #95ADC5;
  --light-blue: #B2C4D5;
  --tan: #EDCDAC;
  --cream: #F2F1ED;
  --white: #FFFFFF;
  --ink: #1a1a1a;
  --soft: #C9D3DD;          /* list text on dark */
  --quote: #E6E4DE;
  --ink-body: #4a5560;      /* body on cream */
  --ink-muted: #5b6570;     /* meta on white cards */
  /* #6f7d8a measured 3.40:1 on --charcoal-mid and 4.12:1 on --charcoal, under
     the 4.5:1 needed for the small supporting text it is used for. This clears
     4.5 on the darkest surface it lands on and stays visibly muted. */
  --meta: #8b97a3;
  --gold: #F5C542;
  --hair: rgba(149,173,197,0.08);
  --hair-2: rgba(149,173,197,0.12);
  --blue: #7FA7F0;
  --green: #7CCB8E;
  --green-ink: #2E7D46;
  --red-ink: #B3443A;

  /* type */
  /* Urbanist, not Oswald. Oswald is condensed and read as a different brand to
     the body text; Urbanist is a geometric sans that sits with DM Sans. It is
     also much wider at the same size, so the display scale comes down with it.
     If an Adobe Fonts licence turns up, Proxima Nova swaps in on this line. */
  --font-display: 'Urbanist', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --inset: 8px;             /* panel side margin */
  --radius-panel: 20px;
  --radius-card: 16px;
  --pad-y: 112px;           /* panel vertical padding */
  --navh: 72px;             /* set live by site.js */

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* surface context (dark by default; .panel--cream / .on-light swap these) */
  --c-heading: var(--white);
  --c-meta: var(--meta);
  --c-text: var(--slate);
  --c-strong: var(--cream);
  --c-soft: var(--soft);
  --c-accent: var(--coral);           /* highlight words, eyebrows, text links */
  --c-card: var(--charcoal-mid);
  --c-card-border: var(--hair);
  --c-rule: var(--hair-2);
  --c-icon-bg: rgba(234,165,114,0.12);
}
@media (max-width: 620px) {
  :root { --gutter: 20px; --pad-y: 72px; }
}

/* 02 ─ Reset / base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--navh) + 12px); }
html.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--c-text); font: 400 16px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: rgba(234,165,114,0.35); color: var(--white); }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.panel--cream :focus-visible, .on-light :focus-visible { outline-color: var(--coral-ink); }

.skip { position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 12px 18px; background: var(--coral); color: var(--ink); font: 700 14px/1 var(--font-body); letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; transform: translateY(-160%); transition: transform .2s var(--ease-out); }
.skip:focus { transform: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 03 ─ Type ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .display { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--c-heading); letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(44px, 5.0vw, 72px); line-height: 1.02; }        /* inner-page hero H1 */
h2 { font-size: clamp(28px, 2.5vw, 37px); line-height: 1.08; }      /* regular H2 */
h3 { font-size: 20px; line-height: 1.15; letter-spacing: 0.5px; }  /* card title */
h4 { font-size: 16px; line-height: 1.2; letter-spacing: 0.5px; }
h1 em, h2 em, h3 em, .display em, .hl { font-style: normal; color: var(--c-accent); }

/* size helpers (apply to any heading/element) */
.fs-hero { font-size: clamp(44px, 5.9vw, 85px); line-height: 1.02; } /* Home hero */
.fs-h1   { font-size: clamp(44px, 5.0vw, 72px); line-height: 1.02; } /* inner hero */
.fs-xl   { font-size: clamp(35px, 3.7vw, 54px); line-height: 1.06; } /* big H2, 2–3 per page */
.fs-h2   { font-size: clamp(28px, 2.5vw, 37px); line-height: 1.08; }
.fs-h3   { font-size: 20px; line-height: 1.15; letter-spacing: 0.5px; }
.fs-mega { font-size: clamp(52px, calc(6.9vw - 14px), 85px); line-height: 1; }
.fs-stat { font-size: 38px; line-height: 1.02; }
.nowrap { white-space: nowrap; }

.lead { font-size: 18px; line-height: 1.7; color: var(--c-text); }
.lead--hero { font-size: 20px; line-height: 1.65; color: var(--soft); }
.text-sm { font-size: 14px; line-height: 1.55; }
.text-meta { font-size: 13px; line-height: 1.5; color: var(--c-text); }
.text-strong { color: var(--c-strong); font-weight: 600; }
.placeholder-note { font-size: 11px; letter-spacing: 1px; color: var(--slate); }

@media (max-width: 620px) {
  h1, .fs-h1 { font-size: clamp(38px, 12vw, 48px); line-height: 1.02; }
  h2, .fs-h2 { font-size: clamp(26px, 7.7vw, 30px); line-height: 1.02; letter-spacing: .5px; }
  h3, .fs-h3 { font-size: 19px; line-height: 1.1; }
  .fs-hero { font-size: clamp(40px, 12.8vw, 50px); line-height: 1.02; }
  .fs-xl { font-size: clamp(32px, 9.8vw, 38px); line-height: .95; letter-spacing: .5px; }
  .fs-mega { font-size: clamp(44px, 14.4vw, 56px); line-height: .9; }
  .fs-stat { font-size: 38px; }
  .lead { font-size: 16px; line-height: 1.65; }
  .lead--hero { font-size: 16px; color: var(--slate); }
}

/* 04 ─ Layout / container ───────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1424px; padding-inline: clamp(var(--gutter), 3.9vw, 56px); }
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.container--text { max-width: calc(680px + 2 * var(--gutter)); }
.stack-y > * + * { margin-top: var(--stack-gap, 20px); }
.flow { display: flex; flex-direction: column; gap: var(--flow-gap, 20px); align-items: flex-start; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap, 16px 32px); }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mt-s { margin-top: 24px; } .mt-m { margin-top: 52px; } .mt-l { margin-top: 80px; }
.mb-0 { margin-bottom: 0 !important; } .mb-s { margin-bottom: 24px; } .mb-m { margin-bottom: 52px; } .mb-l { margin-bottom: 80px; }
@media (max-width: 620px) { .mt-m { margin-top: 28px; } .mt-l { margin-top: 44px; } .mb-m { margin-bottom: 28px; } .mb-l { margin-bottom: 44px; } }

/* 05 ─ Panels ───────────────────────────────────────────────────────────── */
/* <section class="panel panel--cream"> <div class="container">…</div> </section> */
.panel { position: relative; margin: 0 var(--inset) var(--inset); border-radius: var(--radius-panel); overflow: clip; padding-block: var(--pad-y); background: var(--charcoal); color: var(--c-text); }
main > .panel:first-child { margin-top: var(--inset); }
.panel--charcoal { background: var(--charcoal); --c-card: var(--charcoal-mid); }
.panel--mid { background: var(--charcoal-mid); --c-card: var(--charcoal); }
.panel--ground { background: var(--ground); --c-card: var(--charcoal); }
.panel--cream, .on-light {
  --c-heading: var(--ink); --c-text: var(--ink-body); --c-strong: var(--ink); --c-soft: var(--ink-body);
  --c-accent: var(--coral-ink); --c-card: var(--white); --c-card-border: rgba(26,26,26,0.08);
  --c-meta: var(--ink-muted);
  --c-rule: rgba(26,26,26,0.12); --c-icon-bg: rgba(234,165,114,0.2);
  color-scheme: light;
}
.panel--cream { background: var(--cream); color: var(--ink-body); }
.panel--coral {
  background: var(--coral); color: var(--ink);
  --c-heading: var(--ink); --c-text: rgba(26,26,26,0.7); --c-strong: var(--ink); --c-soft: rgba(26,26,26,0.8);
  --c-accent: var(--ink); --c-card: rgba(255,255,255,0.28); --c-card-border: rgba(26,26,26,0.12);
  --c-rule: rgba(26,26,26,0.16); --c-icon-bg: rgba(26,26,26,0.1);
}
.panel--coral :focus-visible { outline-color: var(--ink); }
/* Photo panel: style="--bg:url('/assets/img/tp-lounge-group.jpg')" (+ optional --bg-pos) */
.panel--photo { background: var(--charcoal) var(--bg, none) var(--bg-pos, center 30%) / cover no-repeat; isolation: isolate; }
.panel--photo::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(17,17,17,0.94) 0%, rgba(17,17,17,0.85) 45%, rgba(17,17,17,0.55) 100%); }
.panel--photo > * { position: relative; z-index: 1; }
.panel--photo-strong::before { background: linear-gradient(90deg, rgba(17,17,17,0.96) 0%, rgba(17,17,17,0.9) 50%, rgba(17,17,17,0.72) 100%); }
.panel--tight { padding-block: clamp(44px, 5vw, 64px); }
.panel--flush { padding-block: 0; }
.panel--hero { padding-block: clamp(72px, 8vw, 112px); }
@media (max-width: 620px) {
  .panel--photo::before { background: linear-gradient(180deg, rgba(17,17,17,0.8) 0%, rgba(17,17,17,0.95) 100%); }
  .panel--tight { padding-block: 40px; }
}

/* 06 ─ Eyebrow + section headers ────────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1.3 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--c-accent); }
.eyebrow--slate { color: var(--slate); }
.eyebrow--cream { color: var(--cream); letter-spacing: 2px; }
.eyebrow--dot::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

/* centered (default) */
.section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 60px; }
:where(.section-head > p) { max-width: 560px; font-size: 18px; line-height: 1.7; color: var(--c-text); }
.section-head--xl { gap: 18px; margin-bottom: 72px; }
:where(.section-head--xl > p) { max-width: 600px; }
.section-head--left { align-items: flex-start; text-align: left; }
:where(.section-head--left > p) { max-width: 640px; }
/* split: heading block left, supporting text/actions right */
.section-head--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 24px 80px; text-align: left; }
.section-head--split > p, .section-head--split > .section-head__aside { max-width: 520px; justify-self: end; }
.section-head__main { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
@media (max-width: 900px) {
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split > p, .section-head--split > .section-head__aside { justify-self: start; }
}
@media (max-width: 620px) {
  .section-head, .section-head--xl { align-items: flex-start; text-align: left; gap: 12px; margin-bottom: 28px; }
  :where(.section-head > p) { font-size: 16px; line-height: 1.65; }
  .section-head--keep-center { align-items: center; text-align: center; }
}

/* 07 ─ Buttons + links ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 36px; border: 1px solid transparent; border-radius: 4px; background: var(--coral); color: var(--ink); font: 700 14px/1.1 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .18s var(--ease-out), box-shadow .2s ease; }
.btn .icon, .btn svg { width: 16px; height: 16px; flex: none; transition: transform .2s var(--ease-out); }
.btn:hover { background: var(--coral-glow); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 20px 40px; font-size: 15px; }
.btn--lg .icon { width: 17px; height: 17px; }
.btn--sm { padding: 10px 28px; font-size: 14px; letter-spacing: 1px; }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(242,241,237,0.3); }
.btn--ghost:hover { background: rgba(242,241,237,0.06); border-color: rgba(242,241,237,0.55); }
.btn--ghost .icon { color: var(--coral); }
.on-light .btn--ghost, .panel--cream .btn--ghost { color: var(--ink); border-color: rgba(26,26,26,0.3); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #000; color: var(--white); }
.panel--coral .btn:not(.btn--ghost) { background: var(--ink); color: var(--cream); }
.panel--coral .btn:not(.btn--ghost):hover { background: #000; }
.panel--coral .btn--ghost { color: var(--ink); border-color: rgba(26,26,26,0.35); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (max-width: 620px) {
  .btn--block-mobile { display: flex; width: 100%; }
  .btn--lg { padding: 20px 24px; }
}

/* text link with arrow: "See the Proof →" */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--font-body); letter-spacing: .5px; text-transform: uppercase; color: var(--light-blue); transition: color .2s ease; }
.link-arrow:hover { color: var(--cream); }
.on-light .link-arrow, .panel--cream .link-arrow { color: var(--ink-body); }
.on-light .link-arrow:hover, .panel--cream .link-arrow:hover { color: var(--ink); }
/* card link: "LEARN MORE →" */
.link-card { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1.3 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-accent); transition: color .2s ease, gap .2s var(--ease-out); }
.link-card:hover { gap: 10px; color: var(--coral-glow); }
.on-light .link-card:hover, .panel--cream .link-card:hover { color: var(--ink); }
/* underlined accent link: "See how the system works →" */
.link-underline { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent); font: 700 14px/1.3 var(--font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--c-accent); transition: border-color .2s ease, color .2s ease; }
.link-underline:hover { border-bottom-color: currentColor; }
.prose a, .link-inline { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* 08 ─ Pills / chips ────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px; border: 1px solid; border-radius: 999px; font: 600 10px/1.4 var(--font-body); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.pill--coral { background: rgba(234,165,114,0.14); color: var(--coral); border-color: rgba(234,165,114,0.4); }
.pill--blue  { background: rgba(92,140,230,0.15); color: var(--blue); border-color: rgba(92,140,230,0.35); }
.pill--green { background: rgba(88,180,110,0.14); color: var(--green); border-color: rgba(88,180,110,0.35); }
.on-light .pill--coral, .panel--cream .pill--coral { color: var(--coral-ink); }
.on-light .pill--green, .panel--cream .pill--green { color: var(--green-ink); }
.pill--lg { padding: 5px 14px; font-size: 11px; letter-spacing: 1.5px; }

/* trust pill: stars | 5 Stars on Google | 500+ Clients | [ XX ] Case Studies */
.trust-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 20px; border: 1px solid rgba(234,165,114,0.35); background: rgba(17,17,17,0.55); border-radius: 999px; font: 600 12px/1.3 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--coral); }
.trust-pill__sep { color: rgba(234,165,114,0.35); }
.stars { display: inline-flex; gap: 2px; align-items: center; flex: none; }
.stars svg { width: 11px; height: 11px; fill: var(--gold); }
.stars--md svg { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .trust-pill { padding: 7px 14px; font-size: 11px; letter-spacing: 1.2px; background: rgba(234,165,114,0.08); }
  .trust-pill__more { display: none; }
}

/* dark overlay chip: "▶ Real client ads" */
.chip-dark { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; background: rgba(17,17,17,0.6); border: 1px solid rgba(242,241,237,0.16); border-radius: 999px; font: 600 12px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--cream); backdrop-filter: blur(6px); }
.chip-dark svg { width: 14px; height: 14px; fill: var(--coral); }

/* 09 ─ Icon tile ────────────────────────────────────────────────────────── */
.icon-tile { display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--c-icon-bg); color: var(--c-accent); }
.icon-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile--blue { background: rgba(92,140,230,0.12); color: var(--blue); }
.icon-tile--sm { width: 40px; height: 40px; }
.icon-tile--sm svg { width: 20px; height: 20px; }
@media (max-width: 620px) { .icon-tile { width: 40px; height: 40px; } .icon-tile svg { width: 20px; height: 20px; } }

/* 10 ─ Cards ────────────────────────────────────────────────────────────── */
/* .card adapts to its panel: #2a2a2a on charcoal, #1a1a1a on mid, white on cream */
.card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 32px 30px; background: var(--c-card); border: 1px solid var(--c-card-border); border-radius: var(--radius-card); color: var(--c-text); }
:where(.card > p), .card__text { font-size: 15px; line-height: 1.65; color: var(--c-text); }
.card__eyebrow { font: 600 12px/1.3 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--c-accent); }
.card__title { color: var(--c-heading); }
.card__foot { margin-top: auto; padding-top: 8px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__corner { position: absolute; top: 40px; right: 26px; }           /* top-right pill */
.card__num { font: 700 44px/1 var(--font-display); color: rgba(169,87,31,0.22); }  /* faded step number */
.card--compact { padding: 28px 26px; }
.card--featured { border-color: rgba(234,165,114,0.55); }
.card--accent-top { border-top: 2px solid var(--coral); }
.card--charcoal { --c-card: var(--charcoal); }
.card--mid { --c-card: var(--charcoal-mid); }
.card--white { --c-card: var(--white); }
.card--white, .card.on-light { color: var(--ink-body); }
.card--hover { transition: transform .25s var(--ease-out), border-color .25s ease, box-shadow .25s ease; }
.card--hover:hover { transform: translateY(-4px); border-color: rgba(234,165,114,0.35); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.6); }
.card--link { cursor: pointer; }
.card--link .card__stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* whole card clickable */
.card--row { flex-direction: row; align-items: center; gap: 22px; padding: 22px 30px; }
.card--row .card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 620px) {
  .card, .card--compact { padding: 20px; gap: 10px; border-radius: var(--radius-card); }
  .card--row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .card__corner { position: static; order: -1; align-self: flex-start; }
}

/* testimonial */
.quote-card__text { font-size: 18px; line-height: 1.55; font-style: italic; color: var(--quote); }
.quote-card__name { font-size: 15px; font-weight: 600; color: var(--coral); }
.quote-card__meta { font-size: 13px; color: var(--slate); }
.on-light .quote-card__text, .panel--cream .quote-card__text { color: var(--ink); }
.on-light .quote-card__name, .panel--cream .quote-card__name { color: var(--coral-ink); }
@media (max-width: 620px) { .quote-card__text { font-size: 15px; line-height: 1.6; } }

/* placeholder box (dark) */
.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; padding: 24px; background: var(--placeholder); border: 1px dashed rgba(149,173,197,0.25); border-radius: 12px; font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--meta); text-align: center; }

/* 11 ─ Grids + split layouts ────────────────────────────────────────────── */
.grid { display: grid; gap: var(--grid-gap, 24px); grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--gap-s { --grid-gap: 16px; }
.grid--gap-l { --grid-gap: 32px; }
.grid--equal { grid-auto-rows: 1fr; }
@media (max-width: 1024px) {
  .grid { --grid-gap: 16px; }
  .grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--3:not(.grid--keep), .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3:not(.grid--keep) > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* lone last card spans the row */
  .grid--equal { grid-auto-rows: auto; }
}
@media (max-width: 620px) {
  .grid { --grid-gap: 12px; }
  .grid--2, .grid--3, .grid--3:not(.grid--keep), .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--5, .grid--6, .grid--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3:not(.grid--keep) > :last-child:nth-child(odd) { grid-column: auto; }
}

/* split: two columns of text + visual */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
.split--aside { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: stretch; }
.split--top { align-items: start; }

/* Booking sections stack instead of splitting. The calendar was living in the
   5/12 column, which is narrower than the GHL widget's own breakpoint: it then
   stacked its month above its time slots and reported a tall height, so the
   page grew a long scroll past the fold to reach the slots. Full width lets the
   widget lay the two out side by side and come back short.
   The copy centres above it. Prose keeps a readable measure rather than running
   the full container width, which at 1200px would be an unreadable line. */
.split--book { grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; justify-items: center; }
.split--book > * { width: 100%; }
.split--book > *:first-child { text-align: center; }
/* The copy column is a .flow, which is a flex COLUMN with align-items:
   flex-start, so every child shrinks to its content and sits left. text-align
   then only centres the text inside each box: a long heading fills the width
   and looks centred, a short one like "Still not sure which one?" does not.
   Centre the boxes themselves, not just the text in them. */
.split--book > *:first-child { align-items: center; }
.split--book > *:first-child > p,
.split--book > *:first-child > .lead { margin-inline: auto; max-width: 62ch; }
.split--book .checklist-box { margin-inline: auto; max-width: 760px; text-align: left; }
.split--book .btn { margin-inline: auto; }
/* No sticky copy column: there is nothing beside it to stay level with. */
.split--book > *:first-child { position: static; }
@media (max-width: 620px) { .split--book { gap: 32px; } }
@media (max-width: 1024px) { .split, .split--7-5, .split--5-7, .split--aside { gap: 48px; } .split--aside { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 900px) { .split, .split--7-5, .split--5-7, .split--aside { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 620px) { .split, .split--7-5, .split--5-7, .split--aside { gap: 28px; } }

/* 12 ─ Lists ────────────────────────────────────────────────────────────── */
.list-arrow, .list-check, .list-square, .list-dash { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.list-arrow > li, .list-check > li, .list-square > li, .list-dash > li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--c-soft); }
.list-arrow > li::before { content: '→'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--c-accent); }
.list-square > li { padding-left: 16px; }
.list-square > li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 1px; background: var(--coral); }
.list-check > li { padding-left: 26px; }
.list-check > li::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--c-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.list--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.list--lg > li { font-size: 16px; }
@media (max-width: 620px) { .list--2col { grid-template-columns: minmax(0, 1fr); } }

/* checklist box: "Your Side of the Deal" */
.checklist-box { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; background: rgba(234,165,114,0.06); border: 1px solid rgba(234,165,114,0.15); border-radius: 12px; align-self: stretch; }
.checklist-box__title { font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--c-accent); }
@media (max-width: 620px) { .checklist-box { padding: 18px 16px; } .checklist-box__title { font-size: 11px; } }

/* 13 ─ Stats ────────────────────────────────────────────────────────────── */
/* mega band: 4 stats separated by hairlines */
.stat-band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .9fr); border-top: 1px solid var(--c-rule); }
.stat-band--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 40px 32px 8px; }
.stat + .stat { border-left: 1px solid var(--c-rule); }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }
.stat__n { font: 700 clamp(64px, calc(8.4vw - 17px), 104px)/.95 var(--font-display); text-transform: uppercase; color: var(--c-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel--cream .stat__n, .on-light .stat__n { color: var(--coral-ink); }
/* A heading with no accent at all: the emphasised half stays the heading colour.
   The case-studies heading tried burnt orange, then blue (#1651BD); Dan's call is
   that it reads better flat, all #1A1A1A, so the eye goes to the cards. */
.hl-flat em { color: inherit; }
.stat__label { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--c-heading); }
.stat__meta { font-size: 13px; line-height: 1.5; color: var(--c-text); }
@media (max-width: 1024px) {
  .stat-band, .stat-band--even, .stat-band--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-rule); border: 0; border-radius: 14px; overflow: hidden; }
  .stat-band--3 > .stat:last-child { grid-column: 1 / -1; }
  .stat, .stat:first-child, .stat:last-child { padding: 32px 28px; border: 0; background: var(--panel-bg, var(--charcoal)); }
  .stat + .stat { border-left: 0; }
  .panel--mid .stat { --panel-bg: var(--charcoal-mid); }
  .panel--cream .stat { --panel-bg: var(--cream); }
}
@media (max-width: 620px) {
  .stat, .stat:first-child, .stat:last-child { padding: 20px 14px; gap: 6px; }
  .stat__n { font-size: clamp(40px, 13.6vw, 56px); line-height: .9; }
  .stat__label { font-size: 14px; }
  .stat__meta { font-size: 12px; }
}
/* small stat block (44px number + label + meta), e.g. Straight Talk tiles */
.stat-card { display: flex; flex-direction: column; gap: 4px; }
.stat-card__n { font: 700 44px/1 var(--font-display); text-transform: uppercase; color: var(--c-accent); }
.stat-card__label { font-size: 15px; font-weight: 600; color: var(--c-strong); }
.stat-card__meta { margin-top: 4px; font-size: 13px; color: var(--c-text); }
@media (max-width: 620px) { .stat-card__n { font-size: 38px; } }
/* stacked coral-bordered number box (Straight Talk) */
.number-box { display: flex; flex-direction: column; border: 1px solid rgba(234,165,114,0.2); border-radius: var(--radius-card); overflow: hidden; background: var(--charcoal); }
.number-box > * { padding: 34px 38px; background: rgba(234,165,114,0.06); }
.number-box > * + * { border-top: 1px solid rgba(234,165,114,0.12); background: rgba(234,165,114,0.03); }
@media (max-width: 620px) { .number-box { border-radius: 12px; } .number-box > * { padding: 24px 20px; } }

/* 14 ─ Compare table ────────────────────────────────────────────────────── */
/* <div class="compare"><table> thead: <td></td><th>Typical Agency</th><th class="is-us">Scroll</th> · rows: <th scope="row">…</th><td>…</td><td class="is-us">…</td> */
.compare { border: 1px solid var(--c-rule); border-radius: var(--radius-card); overflow: hidden; }
.compare table { width: 100%; table-layout: fixed; }
.compare col.compare__label-col { width: 44%; }
.compare th, .compare td { padding: 20px 28px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.5; }
.compare thead { background: #222222; }
.compare thead th, .compare thead td { padding-block: 18px; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--slate); }
.compare thead th.is-us { color: var(--coral); font-weight: 700; background: rgba(234,165,114,0.06); }
/* optional second line in a column header: "Main offer", "$50/mo" */
.compare--plans thead th span { display: block; margin-top: 5px; font: 600 11px/1.35 var(--font-body); letter-spacing: .6px; text-transform: none; color: var(--meta); }
.compare tbody tr { border-top: 1px solid var(--hair); }
.compare tbody th { font-weight: 400; color: var(--cream); }
.compare tbody td { color: var(--slate); }
.compare tbody td.is-us { color: var(--cream); font-weight: 600; background: rgba(234,165,114,0.04); }
.compare th + th, .compare th + td, .compare td + td, .compare td + th { border-left: 1px solid var(--hair); }
.panel--cream .compare thead { background: #E8E6E0; }
.panel--cream .compare tbody th, .panel--cream .compare tbody td.is-us { color: var(--ink); }
.panel--cream .compare tbody td, .panel--cream .compare thead th, .panel--cream .compare thead td { color: var(--ink-body); }
.panel--cream .compare thead th.is-us { color: var(--coral-ink); }
@media (max-width: 620px) {
  .compare { border-radius: 12px; }
  .compare table, .compare thead, .compare tbody { display: block; }
  /* display:block drops the table's own sizing, so width:100% has to be restated
     on each part or the rows size to their content and overflow the wrapper. */
  .compare table, .compare thead, .compare tbody, .compare tr { width: 100%; }
  .compare tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the 2-column rule above is for the 2-tier agency table. The plan tables carry
     four tiers plus a label, so the four cells sit 2x2 under a full-width label. */
  .compare--plans tbody th, .compare--plans thead td:first-child { grid-column: 1 / -1; }
  .compare--plans thead th, .compare--plans tbody td { min-width: 0; overflow-wrap: anywhere; }
  .compare thead { background: #1f1f1f; }
  .compare thead td:first-child { display: none; }
  .compare thead th, .compare thead th.is-us { padding: 12px 16px; font-size: 12px; background: none; }
  .compare tbody tr { border-top: 1px solid var(--hair); }
  .compare tbody th { grid-column: 1 / -1; padding: 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--slate); background: rgba(149,173,197,0.04); border-bottom: 1px solid rgba(149,173,197,0.06); }
  .compare tbody td { padding: 12px 16px; font-size: 14px; }
  .compare th + td { border-left: 0; }
  .compare tbody td.is-us { background: none; }
}

/* .max-vs: the Partner Program vs Max table. Lives here, not in max.css,
   because /partner-program/ uses the same markup and does not load max.css. */
.max-vs__head { margin-bottom: 56px; }
.max-vs { max-width: 1000px; margin-inline: auto; background: var(--charcoal); }
.max-vs__max { font: 700 22px/1 var(--font-display); letter-spacing: .5px; text-transform: uppercase; color: var(--coral); }
.max-vs__none { font-size: 18px; line-height: 1.2; color: var(--meta); }
.max-vs tbody td.is-us { background: rgba(234,165,114,0.06); }
.max-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--coral); }
.max-check svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.max-vs__foot { max-width: 1000px; margin: 24px auto 0; font-size: 15px; color: var(--slate); }
.max-vs__foot a { color: var(--coral); font-weight: 600; transition: color .2s ease; }
.max-vs__foot a:hover { color: var(--coral-glow); }
@media (min-width: 621px) {
  .max-vs__c1 { width: 43.2%; }
  .max-vs__c2 { width: 27%; }
  .max-vs th, .max-vs td { vertical-align: middle; padding: 20px 28px; font-size: 14px; }
  .max-vs th + th, .max-vs th + td, .max-vs td + td, .max-vs td + th { border-left: 0; }
  .max-vs thead { background: transparent; }
  .max-vs thead { border-bottom: 1px solid rgba(149,173,197,0.1); }
  .max-vs thead th, .max-vs thead td { padding-block: 22px; font-size: 12px; letter-spacing: 2px; color: var(--slate); }
  .max-vs thead th.is-us { padding-block: 18px; background: rgba(234,165,114,0.1); }
  .max-vs .is-us { border-left: 2px solid var(--coral) !important; }
  .max-vs tbody tr { border-top-color: var(--hair); }
  .max-vs tbody tr:first-child { border-top: 0; }
  .max-vs tbody th { padding-left: 32px; font-size: 15px; font-weight: 500; color: var(--cream); }
  .max-vs thead td { padding-left: 32px; }
  .max-vs tbody td { color: var(--slate); }
}
@media (min-width: 621px) and (max-width: 900px) {
  .max-vs th, .max-vs td { padding-inline: 18px; }
  .max-vs tbody th, .max-vs thead td { padding-left: 22px; }
}
@media (max-width: 620px) {
  .max-vs__head { margin-bottom: 28px; }
  .max-vs thead th.is-us { background: rgba(234,165,114,0.08); }
  .max-vs__max { font-size: 16px; }
  .max-vs tbody td.is-us { background: rgba(234,165,114,0.05); }
  .max-vs__foot { margin-top: 20px; font-size: 14px; }
  .max-vs__foot a { display: inline-block; margin-top: 2px; }
}


/* ── Quote cards (.pq). Shared: /proof/ and the home page, so they cannot live
   in proof.css, which home does not load. ── */
.pq { break-inside: avoid; padding-left: 16px; border-left: 2px solid rgba(26,26,26,0.14); }
.pq__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; }
.pq__by { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pq__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(26,26,26,0.05); border: 1px solid rgba(26,26,26,0.1); font: 600 10px/1 var(--font-body); color: var(--ink-muted); }
.pq__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pq__who b { font-size: 13.5px; font-weight: 600; color: var(--coral-ink); }
.pq__meta { font-size: 12px; color: var(--ink-muted); }
/* tier 1: the named client quotes, equal height so the row reads as a set */
.pq-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.pq-featured > li { display: flex; }
.pq-featured .pq { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 28px 28px 24px; border-left: 0; border-radius: 14px; background: var(--white); box-shadow: 0 18px 40px -28px rgba(26,26,26,0.45); }
/* the quote grows, the attribution sits on the baseline across all three cards,
   so a short quote no longer leaves a hole in the middle of its card */
.pq-featured .pq__text { flex: 1 0 auto; }
.pq-featured .pq__by { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(26,26,26,0.09); }
.pq-featured .pq__text { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.3; letter-spacing: -.2px; font-style: italic; color: var(--ink); }

/* tier 2: the Google reviews, one uniform style */
.pq-wall__label { margin: clamp(44px, 5vh, 64px) 0 20px; font: 600 12px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
.pq-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pq-wall > li { display: flex; }
.pq-wall .pq {
  flex: 1; display: flex; flex-direction: column; margin: 0;
  padding: 22px 22px 20px; border-left: 0; border-radius: 12px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(26,26,26,0.07);
}
.pq-wall .pq__text { flex: 1 0 auto; }
.pq-wall .pq__by { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(26,26,26,0.07); }

.proof-wall__more { margin-top: clamp(28px, 3vh, 44px); text-align: center; }

@media (max-width: 980px) {
  .pq-featured, .pq-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pq-featured, .pq-wall { grid-template-columns: minmax(0, 1fr); }
  .pq__text { font-size: 15px; }
  .pq-featured .pq__text { font-size: 18px; }
}

/* 15 ─ FAQ accordion · tabs · filter chips ──────────────────────────────── */
/* FAQ: <div class="faq" data-accordion> <div class="faq__item"> <h3 class="faq__q"><button class="faq__btn" aria-expanded aria-controls="x">Q<span class="faq__icon"></span></button></h3> <div class="faq__a" id="x"><div class="faq__inner"><p>A</p></div></div> */
.faq { display: flex; flex-direction: column; max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--c-rule); }
.faq__q { margin: 0; font: inherit; text-transform: none; letter-spacing: 0; }
.faq__btn { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; width: 100%; padding: 22px 0; background: none; border: 0; text-align: left; font: 600 18px/1.4 var(--font-body); color: var(--c-heading); }
.faq__btn:hover { color: var(--c-accent); }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; margin-top: 0; border-radius: 50%; border: 1px solid rgba(234,165,114,0.3); color: var(--c-accent); transition: background-color .2s ease, transform .3s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: currentColor; border-radius: 1px; transition: transform .3s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__icon { background: rgba(234,165,114,0.12); }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__inner { padding: 0 52px 0 0; font-size: 16px; line-height: 1.65; color: var(--c-text); }
.faq__inner > * + * { margin-top: 12px; }
.faq__inner > :last-child { margin-bottom: 22px; }   /* spacing as margin so the 0fr collapse hides it */
/* collapse only once JS is ready (no-JS shows every answer) */
[data-accordion].is-ready .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
[data-accordion].is-ready .faq__a > .faq__inner { overflow: hidden; min-height: 0; }
[data-accordion].is-ready .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
@media (max-width: 620px) {
  .faq__btn { padding: 18px 0; gap: 16px; font-size: 16px; }
  .faq__icon { width: 24px; height: 24px; }
  .faq__inner { padding: 0; font-size: 15px; }
  .faq__inner > :last-child { margin-bottom: 18px; }
}

/* Tabs: <div class="tabs" data-tabs> <div class="tabs__list" role="tablist"> <button class="tabs__tab" role="tab" aria-selected aria-controls="p1" id="t1"> … <div class="tabs__panel" role="tabpanel" id="p1" aria-labelledby="t1"> */
.tabs__list { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--c-rule); border-radius: 999px; background: rgba(17,17,17,0.35); }
.panel--cream .tabs__list { background: rgba(255,255,255,0.6); }
.tabs__tab { padding: 10px 20px; border: 0; border-radius: 999px; background: none; font: 600 13px/1 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-text); transition: background-color .2s ease, color .2s ease; }
.tabs__tab:hover { color: var(--c-heading); }
.tabs__tab[aria-selected="true"] { background: var(--coral); color: var(--ink); }
.tabs__list--line { border: 0; border-bottom: 1px solid var(--c-rule); border-radius: 0; background: none; padding: 0; gap: 28px; }
.tabs__list--line .tabs__tab { padding: 12px 0; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs__list--line .tabs__tab[aria-selected="true"] { background: none; color: var(--c-heading); border-bottom-color: var(--coral); }
.tabs__panel { margin-top: 32px; }
.tabs__panel:focus-visible { outline-offset: 6px; }
@media (max-width: 620px) { .tabs__list { display: flex; } .tabs__list:not(.tabs__list--line) .tabs__tab { flex: 1; padding: 10px 12px; } }

/* Filter chips: <div class="chip-row" data-filter-group="proof"> <button class="chip" data-filter="all" aria-pressed="true">All</button> … · items: <div data-filter-items="proof"> <article data-tags="roofing garage"> */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--c-rule); border-radius: 999px; background: transparent; font: 600 12px/1 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-text); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.chip:hover { border-color: rgba(234,165,114,0.5); color: var(--c-heading); }
.chip[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.chip__count { opacity: .6; font-weight: 500; }
[data-tags].is-filtered-out { display: none !important; }
@media (max-width: 620px) {
  /* These used to be a horizontal scroller on a phone, which put most of the
     filters off the edge of the screen with nothing to say they were there.
     They wrap now: a taller block, but every option is visible and tappable.
     Chips shrink a step so the wrap costs fewer rows. */
  .chip-row--scroll { flex-wrap: wrap; overflow: visible; justify-content: center; }
  .chip { padding: 8px 13px; font-size: 11px; letter-spacing: 1.2px; gap: 6px; }
}

/* 16 ─ Team card + booking widget ───────────────────────────────────────── */
.team-card { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; background: var(--white); border-radius: 14px; color: var(--ink); max-width: 100%; }
.team-card__pics { display: flex; gap: 6px; flex: none; }
.team-card__pics img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.team-card__title { font: 600 17px/1.25 var(--font-body); color: var(--ink); }
/* It is an <a> now, so stop it picking up link colour, and give it the small lift
   every other clickable card on the site has. */
.team-card { text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.team-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.team-card:hover .team-card__title { color: var(--coral-ink); }
.team-card--attached { display: flex; padding: 12px 18px 12px 12px; border-radius: 0; }
@media (max-width: 620px) {
  .team-card { padding: 14px 16px; gap: 10px; }
  .team-card__pics img { width: 48px; height: 48px; }
  .team-card__title { font-size: 16px; }
  .team-card--attached { padding: 10px 14px 10px 10px; gap: 12px; }
}

/* A white card that can sit on a dark panel, so it has to carry the light-surface
   tokens itself: its muted text was reading --meta, which is tuned for dark. */
.booking { border-radius: var(--radius-card); overflow: hidden; background: var(--white); box-shadow: 0 30px 80px rgba(0,0,0,0.45); color: var(--ink); color-scheme: light;
  --c-heading: var(--ink); --c-text: var(--ink-body); --c-meta: var(--ink-muted); --c-accent: var(--coral-ink); }
.booking__cal { position: relative; min-height: 420px; background: var(--white); border-top: 1px solid rgba(26,26,26,0.08); }
/* Fallback height only: site.js replaces it when GHL posts setHeight. 1040px was
   one number for both viewports, which suited the tall mobile calendar and left
   desktop 1.3 screens of mostly-white box. */
.booking__frame { position: relative; z-index: 1; width: 100%; height: 760px; border: 0; background: transparent; }
.booking__wait { position: absolute; inset: 0; display: grid; place-items: center; align-content: start; padding-top: 160px; font: 600 12px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--c-meta); }
.booking__wait::before { content: ''; width: 28px; height: 28px; margin-bottom: 16px; border-radius: 50%; border: 2px solid rgba(169,87,31,0.2); border-top-color: var(--coral-ink); animation: spin .9s linear infinite; }
.booking__fallback { display: none; padding: 48px 28px 52px; text-align: center; }
.booking__fallback svg { width: 40px; height: 40px; margin: 0 auto 16px; color: var(--coral-ink); }
.booking__fallback-title { font: 700 28px/1.05 var(--font-display); text-transform: uppercase; color: var(--ink); }
.booking__fallback-text { margin: 10px auto 22px; max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.booking__fallback .btn { white-space: normal; max-width: 100%; line-height: 1.25; }
.booking__fallback-call { margin: 16px auto 0; max-width: 36ch; font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.booking__fallback-call a { font-weight: 700; color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; }
.booking__alt { padding: 12px 16px 14px; background: var(--white); border-top: 1px solid rgba(26,26,26,0.08); font-size: 13px; color: var(--ink-muted); text-align: center; }
.booking__alt a { color: var(--coral-ink); font-weight: 600; }
.booking__alt a:hover { text-decoration: underline; }
.booking.is-loaded .booking__wait { display: none; }
.booking.is-blocked .booking__cal { min-height: 0; }
.booking.is-blocked .booking__frame, .booking.is-blocked .booking__wait, .booking.is-blocked .booking__alt { display: none; }
.booking.is-blocked .booking__fallback { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) {
  .booking { border-radius: 14px 14px 12px 12px; }
  /* only the pre-message state: the widget has never reported more than ~940 */
  .booking__frame { height: 900px; }
  .booking__fallback { padding: 36px 18px 40px; }
  .booking__fallback .btn { width: 100%; padding: 16px 14px; font-size: 13px; }
}

/* 17 ─ Ad wall hero · logo marquee · photo band ─────────────────────────── */
/* <section class="panel panel--ground hero-adwall"> <div class="adwall" aria-hidden="true"> <div class="adwall__col"><img class="adwall__tile" …></div> ×6 </div> … */
.hero-adwall { min-height: 900px; padding-block: 92px 72px; background: var(--ground); isolation: isolate; }
/* full bleed: at least the 1432px design width, otherwise the whole viewport, tiles scale with their column */
.adwall { position: absolute; left: 50%; top: 0; z-index: -2; width: max(100%, 1432px); transform: translateX(-50%); display: flex; gap: 8px; pointer-events: none; }
.adwall__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; margin-top: -40px; }
.adwall__col:nth-child(even) { margin-top: -130px; }
.adwall__tile { width: 100%; height: auto; aspect-ratio: 232 / 412; border-radius: 16px; object-fit: cover; background: var(--charcoal); }
.hero-adwall::before, .hero-adwall::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-adwall::before { background: linear-gradient(180deg, rgba(17,17,17,0.72) 0%, rgba(17,17,17,0.82) 60%, #111111 100%); }
.hero-adwall::after { background: linear-gradient(90deg, rgba(17,17,17,0.5) 0%, rgba(17,17,17,0.4) 55%, rgba(17,17,17,0.2) 85%, rgba(17,17,17,0.1) 100%); }
.adwall--few .adwall__col:nth-child(n+5) { display: none; }   /* fewer tiles (Partner Program) */
.hero-adwall--short { min-height: 720px; }
.hero-tag { position: absolute; top: 40px; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.hero-chip { position: absolute; bottom: 28px; left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); z-index: 2; }
@media (max-width: 1024px) {
  .hero-adwall { min-height: 820px; }
}
@media (max-width: 620px) {
  .hero-adwall, .hero-adwall--short { min-height: 700px; padding-block: 28px 80px; }
  .adwall { left: 0; right: 0; width: auto; transform: none; gap: 4px; }
  .adwall__col, .adwall__col:nth-child(even) { flex: 1; min-width: 0; gap: 4px; margin-top: 0; }
  .adwall__col:nth-child(n+4) { display: none; }
  .adwall__tile { width: 100%; height: 213px; aspect-ratio: auto; border-radius: 0; }
  .hero-adwall::after { display: none; }
  .hero-tag { position: static; margin: 0 var(--gutter) 18px; }
  .hero-chip { left: 20px; bottom: 20px; padding: 6px 12px; }
  .hero-chip svg { width: 12px; height: 12px; }
}

/* ad tile (standalone vertical client ad) */
.ad-tile { position: relative; aspect-ratio: 427 / 760; max-width: 260px; border-radius: 16px; overflow: hidden; background: var(--charcoal); }
.ad-tile img { width: 100%; height: 100%; object-fit: cover; }
.ad-tile .chip-dark { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; font-size: 10px; }

/* logo marquee: <div class="marquee"> <div class="marquee__track"> [logos] [logos aria-hidden] */
/* The loop translates -50% across exactly two groups, so ONE GROUP MUST BE WIDER
   THAN THE WIDEST SCREEN or a gap opens as group two runs out. Repeat the logo run
   inside each group until it is: nine logos left a visible gap above ~1700px. */
.logo-strip { padding-block: 44px 48px; }
.logo-strip__label { margin: 0 0 30px; text-align: center; font: 600 12px/1.3 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--slate); padding-inline: var(--gutter); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 96s linear infinite; }   /* one full pass; never pauses */
.marquee__group { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex: none; min-height: 60px; }
/* each logo carries its own --h, set from its ink area so marks read at a similar visual size */
.marquee__group img { height: calc(var(--h, 44px) * var(--logo-scale, 1)); width: auto; max-width: 190px; opacity: .75; object-fit: contain; flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 620px) {
  .logo-strip { padding-block: 22px; }
  .logo-strip__label { font-size: 11px; margin-bottom: 16px; }
  .marquee__group { gap: 40px; padding-right: 40px; }
  .marquee__group { --logo-scale: .74; }
  .marquee__group img { max-width: 150px; }
}

/* wide photo band */
.photo-band { position: relative; height: clamp(260px, 36vw, 520px); padding: 0; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(17,17,17,0.55) 100%); }

/* photo collage (team band) */
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 196px; gap: 12px; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); border: 1px solid var(--hair-2); }
.collage img:first-child { grid-column: 1 / -1; }
@media (max-width: 620px) { .collage { grid-template-rows: 220px 130px; gap: 10px; } .collage img:not(:first-child) { border-radius: 12px; } }

/* numbers row: CAC / LTV + link, under the case studies or any results block */
.numbers-row { max-width: 1080px; margin: clamp(40px, 8vh, 96px) auto 0; padding-top: 28px; border-top: 1px solid var(--c-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.numbers-row__items { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.numbers-row__item { display: flex; flex-direction: column; gap: 4px; }
.numbers-row__eyebrow { flex-basis: 100%; }
.numbers-row__n { font: 700 44px/1 var(--font-display); text-transform: uppercase; color: var(--c-accent); white-space: nowrap; }
.numbers-row__label { font-size: 14px; font-weight: 600; color: var(--c-strong); }
.numbers-row__meta { font-size: 13px; color: var(--c-text); }
@media (max-width: 620px) {
  .numbers-row { margin-top: 44px; padding-top: 22px; gap: 20px; }
  .numbers-row__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
  .numbers-row__n { font-size: 28px; }
  .numbers-row__label { font-size: 13px; line-height: 1.3; }
  .numbers-row__meta { display: none; }
}

/* 18 ─ UI cards (floating product mockups) ──────────────────────────────── */
.ui-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--white); border-radius: var(--radius-card); box-shadow: 0 24px 60px rgba(0,0,0,0.35); color: var(--ink); font-size: 14px; line-height: 1.45; }
.panel--cream .ui-card { box-shadow: 0 24px 60px rgba(0,0,0,0.15); border: 1px solid rgba(26,26,26,0.08); }
.ui-card__rule { padding-top: 12px; border-top: 1px solid rgba(26,26,26,0.08); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.ui-card__rule svg { width: 14px; height: 14px; flex: none; color: var(--coral-ink); }
.ui-step-label { display: flex; align-items: baseline; gap: 12px; font: 600 12px/1.3 var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--c-accent); }
.ui-step-label b { font: 700 20px/1.15 var(--font-display); letter-spacing: .5px; }
/* feed post */
.ui-feed__head { display: flex; align-items: center; gap: 10px; }
.ui-feed__avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #7CCB8E, #3e8a52); flex: none; }
.ui-feed__who { display: flex; flex-direction: column; line-height: 1.2; }
.ui-feed__who b { font-weight: 600; }
.ui-feed__who span { font-size: 12px; color: var(--ink-muted); }
.ui-feed__dots { margin-left: auto; display: flex; gap: 3px; }
.ui-feed__dots i { width: 4px; height: 4px; border-radius: 50%; background: #9aa4ad; }
.ui-feed__media { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--charcoal); }
.ui-feed__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.ui-feed__cta { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: #EEF0F2; border-radius: 8px; font-weight: 600; }
.ui-feed__cta svg { width: 14px; height: 14px; color: var(--ink-muted); }
/* SMS thread */
.ui-sms__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(26,26,26,0.08); }
.ui-sms__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #EEF0F2; flex: none; color: var(--ink-muted); }
.ui-sms__avatar svg, .ui-sms__head > svg { width: 16px; height: 16px; }
.ui-sms__head > svg { width: 18px; height: 18px; color: #9aa4ad; }
.ui-sms__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ui-sms__lines i { display: block; width: 46%; height: 8px; border-radius: 4px; background: #DDE1E5; }
.ui-sms__lines i + i { width: 28%; height: 6px; background: #EEF0F2; }
.ui-sms__thread { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.ui-bubble { max-width: 84%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #EEF0F2; align-self: flex-start; }
.ui-bubble--out { max-width: 86%; align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--coral); }
.ui-bubble__label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.ui-bubble__label svg { width: 12px; height: 12px; }
.ui-typing { display: flex; gap: 4px; align-self: flex-start; padding: 10px 12px; border-radius: 14px; background: #EEF0F2; }
.ui-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa4ad; animation: typing 1.2s ease-in-out infinite; }
.ui-typing i:nth-child(2) { background: #b9c0c6; animation-delay: .15s; }
.ui-typing i:nth-child(3) { background: #d3d8dc; animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
/* calendar */
.ui-cal__event { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid rgba(26,26,26,0.08); border-radius: 12px; }
.ui-cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 68px; border-radius: 10px; background: var(--ink); flex: none; }
.ui-cal__day span { font: 700 11px/1.2 var(--font-body); letter-spacing: 1.5px; color: var(--coral); }
.ui-cal__day b { font: 700 30px/.95 var(--font-display); color: var(--white); }
.ui-cal__what { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 16px; font-weight: 600; }
.ui-cal__what .pill { font-size: 11px; font-weight: 700; color: var(--green-ink); }
.ui-cal__what .pill svg { width: 11px; height: 11px; }
.ui-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 30px; gap: 6px; }
.ui-cal__grid i { border-radius: 6px; background: #F3F4F6; }
.ui-cal__grid i.is-busy { background: rgba(234,165,114,0.28); }
.ui-cal__grid i.is-picked { background: var(--coral); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(169,87,31,0.55); }
/* the 3-card flow with connectors */
.ui-flow { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 18px; align-items: start; }
.ui-flow__step { display: contents; }
.ui-flow__step > .ui-step-label { grid-row: 1; align-self: end; }
.ui-flow__step > .ui-card { grid-row: 2; }
.ui-flow > :nth-child(1) > * { grid-column: 1; }
.ui-flow > :nth-child(3) > * { grid-column: 3; }
.ui-flow > :nth-child(5) > * { grid-column: 5; }
.ui-flow__arrow { grid-row: 2; display: flex; align-items: center; justify-content: center; margin-top: 154px; color: var(--coral); }
.ui-flow > .ui-flow__arrow:nth-child(2) { grid-column: 2; }
.ui-flow > .ui-flow__arrow:nth-child(4) { grid-column: 4; }
.ui-flow__arrow svg { width: 48px; height: 24px; }
@media (max-width: 900px) {
  .ui-flow { display: flex; flex-direction: column; align-items: stretch; max-width: 460px; margin-inline: auto; row-gap: 0; }
  .ui-flow__step { display: flex; flex-direction: column; gap: 12px; }
  .ui-flow__step > .ui-step-label { align-self: flex-start; }
  .ui-flow__arrow { margin: 0; padding: 12px 0; }
  .ui-flow__arrow svg { transform: rotate(90deg); width: 40px; }
  .ui-feed__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .ui-step-label { font-size: 11px; letter-spacing: 2px; }
  .ui-cal__grid { display: none; }
  .ui-cal__day { width: 48px; height: 52px; }
  .ui-cal__day b { font-size: 26px; }
  .ui-cal__what { font-size: 14px; }
  .ui-bubble, .ui-bubble--out { font-size: 13px; padding: 9px 13px; }
}

/* 19 ─ Header · dropdown · mobile menu · mobile bar ─────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(17,17,17,0.9); border-bottom: 1px solid var(--hair); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .28s var(--ease-std), background-color .28s ease; }
.site-header.is-scrolled { background: rgba(17,17,17,0.94); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.8); }
.site-header__inner { display: flex; align-items: center; gap: 36px; padding: 20px clamp(20px, 8.33vw, 120px); }
.site-header__logo { display: inline-flex; line-height: 0; margin-right: auto; border-radius: 4px; }
.site-header__logo img { height: 30px; width: auto; }
.site-header__phone { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--font-body); color: var(--cream); white-space: nowrap; transition: color .2s ease; }
.site-header__phone .icon { color: var(--coral); }
.site-header__phone:hover { color: var(--coral); }
.site-header--landing .site-header__inner { gap: 16px; }

.site-nav__list { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; background: none; border: 0; font: 500 14px/1 var(--font-body); letter-spacing: .5px; text-transform: uppercase; color: var(--slate); white-space: nowrap; transition: color .2s ease; }
.site-nav__link:hover, .site-nav__link[aria-expanded="true"] { color: var(--cream); }
.site-nav__link[aria-current="page"] { color: var(--cream); }
.site-nav__link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--coral); }
.site-nav__trigger[aria-current="page"]::after { right: 17px; }
.site-nav__chev { width: 12px; height: 12px; transition: transform .25s var(--ease-out); }
.site-nav__trigger[aria-expanded="true"] .site-nav__chev { transform: rotate(180deg); }
.site-nav__dropdown { position: absolute; top: calc(100% + 18px); left: -18px; min-width: 272px; padding: 8px; background: var(--charcoal); border: 1px solid var(--hair-2); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.75); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear .25s; }
.site-nav__dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }   /* hover bridge */
.site-nav__item.is-open .site-nav__dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s; }
.site-nav__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-nav__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 8px; font: 500 15px/1.2 var(--font-body); color: var(--cream); transition: background-color .15s ease, color .15s ease; }
.site-nav__menu a:hover, .site-nav__menu a:focus-visible { background: rgba(149,173,197,0.07); color: var(--coral); outline-offset: -2px; }
.site-nav__menu a[aria-current="page"] { color: var(--coral); }

.burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--cream); }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .site-header__inner { gap: 24px; }
  .site-nav__list { gap: 24px; }
  .site-header__phone-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header__phone { padding: 8px; margin: -8px; }
  .site-header__phone .icon { width: 18px; height: 18px; }
}
@media (max-width: 1100px) {
  .site-header__inner { gap: 20px; padding-inline: 24px; }
  .site-nav__list { gap: 18px; }
  .site-nav__link { font-size: 13px; }
  .site-header .btn--sm { padding: 10px 20px; }
}

.mobile-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--navh) + 12px) 24px calc(24px + env(safe-area-inset-bottom)); background: var(--ground); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(149,173,197,0.14); }
.mobile-menu__list > li { border-bottom: 1px solid rgba(149,173,197,0.14); }
.mobile-menu__item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 2px; background: none; border: 0; font: 700 30px/1 var(--font-display); text-transform: uppercase; text-align: left; color: var(--cream); }
.mobile-menu__item[aria-current="page"] { color: var(--coral); }
.mobile-menu__item svg { width: 22px; height: 22px; color: var(--coral); transition: transform .25s ease; }
.mobile-menu__item[aria-expanded="true"] svg { transform: rotate(45deg); }
.mobile-menu__sub { list-style: none; margin: 0; padding: 0 2px 16px; display: grid; gap: 2px; }
.mobile-menu__sub a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font: 500 17px/1.3 var(--font-body); color: var(--slate); }
.mobile-menu__sub a:hover, .mobile-menu__sub a[aria-current="page"] { color: var(--cream); }
.mobile-menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; }
.mobile-menu__foot .btn { padding: 17px; }
.mobile-menu__hours { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--meta); }

.mobile-bar { display: none; }
@media (max-width: 900px) {
  .site-nav, .site-header__phone { display: none; }
  .site-header__inner { gap: 12px; padding: 12px 20px; }
  .site-header__logo img { height: 26px; }
  .site-header .btn--sm { padding: 9px 14px; font-size: 12px; letter-spacing: 1px; }
  .burger { display: flex; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(17,17,17,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--hair-2); transform: translateY(110%); transition: transform .32s var(--ease-out); }
  .mobile-bar--single { grid-template-columns: 1fr; }
  .mobile-bar.is-visible { transform: none; }
  .mobile-bar .btn { height: 48px; padding: 0 12px; font-size: 13px; }
  body:has([data-mobile-bar]) .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* The footer was padded but nothing else was, so a section that ends mid-page
     could put its last heading or button under the Call / Book bar. Pad the last
     panel on the page too, which is the one the bar can actually reach. */
  body:has([data-mobile-bar]) main > section:last-of-type,
  body:has([data-mobile-bar]) > section:last-of-type { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* The review widget's launcher sits in the bottom-right corner, on top of the
     sticky bar and anything near it. It is for reviewers on a desktop, so it
     comes off the phone entirely rather than fighting for that corner. */
  feedbucket-app, [id*="feedbucket" i], [class*="feedbucket" i] { display: none !important; }
}
@media (min-width: 901px) { .mobile-menu { display: none; } }
@media (max-width: 400px) {
  .site-header__inner { gap: 8px; padding: 12px 16px; }
  .site-header__logo img { height: 23px; }
  .site-header .btn--sm { padding: 8px 11px; font-size: 11px; letter-spacing: .8px; }
}
/* "Book a call" fits where "Book a 30-minute call" did not, so this floor drops
   from 340 to the narrowest phone anyone still carries. */
@media (max-width: 300px) { .site-header:not(.site-header--landing) .site-header__cta { display: none; } }

/* 20 ─ Footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer); border-top: 1px solid var(--hair); padding: 64px clamp(20px, 8.33vw, 120px) 28px; color: var(--slate); font-size: 14px; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: var(--cream); }
.site-footer__grid { display: grid; grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr)); gap: 36px; margin-bottom: 48px; }
.site-footer__logo { display: inline-flex; line-height: 0; margin-bottom: 14px; border-radius: 4px; }
.site-footer__logo img { height: 28px; width: auto; }
.site-footer__tagline { margin-bottom: 14px; font-weight: 600; color: var(--cream); }
.site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.8; }
.site-footer__gap { margin-top: 8px; }
.site-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.site-footer__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(149,173,197,0.2); transition: border-color .2s ease, color .2s ease; }
.site-footer__social a:hover { border-color: var(--coral); color: var(--coral); }
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__title { margin: 0 0 16px; font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; line-height: 1.95; }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--meta); }
.site-footer--min { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-block: 28px 40px; font-size: 13px; color: var(--meta); }
.site-footer--min .site-footer__logo { margin: 0; }
.site-footer--min .site-footer__logo img { height: 26px; }
.site-footer__spacer { flex: 1; }
@media (max-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .site-footer { padding: 48px 20px 24px; margin-top: 0; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-bottom: 32px; }
  /* site.js collapses each link list behind its heading here; a full-width row
     per group reads better than two half-width disclosures side by side. With
     JS off nothing is collapsible and the two-column grid stands. */
  .site-footer__grid:has(.is-collapsible) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .is-collapsible { border-top: 1px solid var(--hair); }
  .is-collapsible .site-footer__title { margin: 0; }
  .site-footer__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 48px; padding: 0; background: none; border: 0;
    color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
    text-align: left; cursor: pointer;
  }
  .site-footer__toggle::after {
    content: ''; flex: none; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
  }
  .site-footer__toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .is-collapsible ul { padding-bottom: 14px; }
  .site-footer__brand { margin-bottom: 8px; }
  .site-footer__bottom { flex-direction: column; font-size: 12px; padding-top: 20px; }
  .site-footer--min { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer--min .site-footer__spacer { display: none; }
}

/* 21 ─ Utilities · motion · reduced motion ──────────────────────────────── */
.only-mobile { display: none !important; }
@media (max-width: 620px) { .only-mobile { display: revert !important; } .hide-mobile { display: none !important; } }
@media (max-width: 900px) { .hide-tablet { display: none !important; } }

/* reveal / stagger — hidden state only when scripting is on and motion is allowed */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.is-visible), [data-stagger]:not(.is-visible) > * { opacity: 0; transform: translateY(28px); }
  [data-stagger]:not(.is-visible) > * { transform: translateY(32px); }
}
[data-reveal], [data-stagger] > * { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-stagger] > * { transition-duration: .56s; }
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
  .booking__wait::before { animation: none; }
}

/* 19 ─ Case study card ─────────────────────────────────── */
/* Used on /partner-program/ and the homepage, so it lives here rather than in
   a page stylesheet. Field order is fixed: name, trade and city, service badge,
   date range, one ad row per platform, closed revenue, owner quote, thumbnail. */
/* sitewide case study card: name, trade/city, service badge, dates, per-platform
   ad rows, closed revenue, owner quote, ad thumbnail */
.cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; margin: 0 0 26px; padding: 0; list-style: none; }
/* equal rows only while the grid has more than one column; in a single column it
   just stretched every card to the tallest, 735px each on a phone */
@media (min-width: 621px) { .home-cases .cs-cards { grid-auto-rows: 1fr; } }
.cs-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px; }
.cs-card__shot { overflow: hidden; border-radius: 12px; background: var(--charcoal); }
.cs-card__shot img { display: block; width: 100%; height: auto; aspect-ratio: 427 / 760; object-fit: cover; }
.cs-card__name { font: 700 clamp(20px, 2vw, 26px)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .5px; color: var(--c-heading); }
.cs-card__where { margin-top: 5px; font-size: 14px; color: var(--c-text); }
/* The plan and the period answer one question together - what they bought and
   for how long - so they sit on a line rather than stacking two short rows. */
.cs-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.cs-card__badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(234,165,114,0.14); border: 1px solid rgba(234,165,114,0.4); font: 600 11px/1 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-accent); }
.cs-card__dates { font: 600 12px/1 var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-meta); }
.cs-card__ads { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cs-card__ads li { font-size: 14.5px; line-height: 1.45; color: var(--c-text); }
.cs-card__ads b { color: var(--c-heading); font-weight: 700; }
/* Closed revenue is what the card is for, so the figure carries the weight and
   the label and qualifiers sit quietly around it. */
.cs-card__revenue { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; }
.cs-card__revenue-label { font: 600 11px/1 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--c-meta); }
.cs-card__revenue-n { font: 700 clamp(26px, 2.4vw, 32px)/1.05 var(--font-display); letter-spacing: .5px; color: var(--c-accent); }
.cs-card__revenue-sub { font-size: 13px; line-height: 1.4; color: var(--c-meta); }
.cs-card__quote { margin: 16px 0 0; padding-left: 15px; border-left: 3px solid var(--c-accent); }
.cs-card__quote p { font-size: 14.5px; line-height: 1.6; font-style: italic; color: var(--c-text); }
.cs-card__quote cite { display: block; margin-top: 7px; font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--c-meta); }
.pp-results__pending { margin-bottom: 30px; font-size: 14px; line-height: 1.6; color: var(--slate); }
@media (max-width: 620px) {
  /* One column on a phone, so centre it. Left-aligned text under a left-aligned
     thumbnail leaves a ragged column of short lines (a trade, a date, three ad
     rows, a revenue figure) that is harder to scan than the same lines centred.
     This is the sitewide card, so /proof/ gets it too. */
  .cs-card { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; }
  .cs-card__shot { width: min(180px, 100%); max-width: none; margin-inline: auto; }
  .cs-card__ads { align-items: center; }
  /* On a phone the card is read one at a time, so the hierarchy can be louder:
     the client, then what they got back, then what they said about it. */
  .cs-card__name { font-size: 25px; }
  .cs-card__where { margin-top: 6px; font-size: 15.5px; }
  .cs-card__meta { justify-content: center; }
  .cs-card__ads li { font-size: 15px; }
  .cs-card__revenue { align-items: center; gap: 4px; }
  .cs-card__revenue-n { font-size: 34px; }
  .cs-card__cpj { font-size: 15px; }
  .cs-card__quote p { font-size: 16.5px; line-height: 1.55; }
  .cs-card__quote cite { font-size: 13.5px; }
  /* the quote's accent rule moves from its left edge to a short bar above it,
     because a full-width border across a centred block reads as a divider */
  .cs-card__quote { padding: 2px 0 0; border-left: 0; }
  .cs-card__quote::before { content: ''; display: block; width: 40px; height: 3px; margin: 0 auto 12px; border-radius: 2px; background: var(--c-accent); }
  .cs-card__quote cite { margin-top: 9px; }
}
/* XX marks a figure still being collected: visibly unfinished, never mistakable for data */
.cs-card__cpj { margin-top: 6px; font-size: 14.5px; color: var(--c-text); }
/* The ad video fills the same 9:16 slot the screenshot used. A Vimeo background
   embed letterboxes inside its own iframe, so the iframe has to carry the video's
   true ratio and exceed the box on BOTH axes; viewport units do not work here,
   the container is not the viewport. The poster stays visible underneath until
   the player reports it has loaded. */
/* The clips are 1080x1920. Stretching the box to the card's height meant the
   iframe had to overflow and crop to cover it, so the sides of every ad were cut
   off: Dan's call is that seeing the whole frame beats filling the column. The
   box carries the clip's own ratio at every width now, and the video fits it
   exactly rather than being cropped into it. */
.cs-card__shot--video { position: relative; align-self: start; min-height: 0; aspect-ratio: 9 / 16; }
.cs-card__shot--video img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
/* Cover, properly. width:100% AND height:100% together beat the aspect-ratio, so
   the iframe took the box's shape (180x300, ratio 0.6) while the video inside it
   is 9:16, and Vimeo letterboxed the difference: grey bars down both sides. Let
   the height drive and the width follow the ratio, with min-width as the floor
   for a box that is wider than 9:16. */
.cs-card__vid { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  border: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.cs-card__shot--video.is-playing .cs-card__vid { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cs-card__vid { display: none; } }
.cs-card__shot--logo { display: grid; place-items: center; padding: 18px; }
.cs-card__shot--logo img { aspect-ratio: auto; width: 100%; height: auto; object-fit: contain; }
/* A client with no logo or ad on file yet. This lived in pages/home.css while
   /proof/ used it too, so the tile rendered unstyled there: no centring, no
   type, and the name clipped against the top of a collapsed box. Fourth time a
   component styled in one page's sheet has broken on another. If two pages use
   it, it belongs here. */
.cs-card__shot--name { display: grid; place-items: center; padding: 18px; text-align: center; }
.cs-card__shot--name span { font: 700 15px/1.3 var(--font-display); text-transform: uppercase; letter-spacing: 1px; color: rgba(242,241,237,0.72); }
.cs-card__pending { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--meta); }

/* ── Touch targets ───────────────────────────────────────────────────────────
   Measured at 390px: 330 interactive elements were under the 44px minimum, and
   240 of them were inline text links that are wide enough but only 17-20px tall.
   Padding is added with a negative margin so nothing moves: the hit area grows,
   the layout does not. Applied on touch pointers rather than by width, because
   the problem is the finger, not the viewport. */
@media (pointer: coarse) {
  .link-arrow, .link-card, .link-underline,
  .site-footer__col a, .site-footer__contact a, .site-footer__bottom a {
    padding-block: 14px;
    margin-block: -14px;
  }
  /* the underline sits on the text, so keep its own offset and pad the rest */
  .link-underline { padding-bottom: 4px; margin-bottom: -10px; }
  .site-footer__social a, .site-footer__logo, .site-header__logo { min-width: 44px; min-height: 44px; }
  .site-footer__logo, .site-header__logo { display: inline-flex; align-items: center; }
  /* .blog-chip and friends set their own padding, so raise the floor instead of
     adding to it: a taller chip would otherwise fight every per-page override */
  .chip, .blog-chip { min-height: 44px; }
  .btn--sm, .site-header__cta, .skip-link, .blog-listen, .blog-news__btn,
  .skip, .host-toggle__summary, summary { min-height: 44px; }
  /* inline links inside prose: the run of text is the target, so pad it out
     without letting the extra box push the paragraph around */
  .flow p > a, .lead > a, .post-body p > a, .wd-folio__deep a { padding-block: 12px; margin-block: -12px; }
}

/* ── GoHighLevel form embed (partials/ghl-form.html) ──
   The same form joinscroll.com runs. It lives in scroll.css, not a page
   stylesheet, because any page can carry one: a component used on two pages
   and styled in one page's sheet is the bug that has bitten this build three
   times. The inline height is a fallback that GHL's form_embed.js overwrites
   once the iframe reports its real height, so the card never collapses while
   the form loads. */
.ghlform { margin: 0 -8px; }
.ghlform__frame { display: block; width: 100%; min-height: 420px; border: 0; border-radius: 12px; background: var(--white); }
.ghlform__alt { margin: 12px 0 0; font-size: 13px; color: var(--c-meta, var(--ink-muted)); text-align: center; }
.ghlform__alt a { color: var(--coral-ink); font-weight: 600; }
.ghlform__alt a:hover { text-decoration: underline; }
@media (max-width: 620px) { .ghlform { margin: 0 -4px; } }

/* ── batch ("Show more") ──
   site.js caps a long grid at data-batch items. The cap is its own class, not
   [hidden], because filters own [hidden] and rewrite it on every run. */
.is-batched-out { display: none !important; }
.batch-more { display: block; margin: 28px auto 0; }

/* ── anchor offset ──
   The header is sticky, so a jump to #book or #plans used to land the target
   12px under it: nothing hidden, but nothing to breathe either. :target covers
   every in-page anchor at once rather than one rule per id. Pages that already
   set their own (contact, careers, the legal docs) are more specific and win. */
:target { scroll-margin-top: calc(var(--navh, 72px) + 24px); }