/* ==========================================================================
   Growack — RevOps & Growth Marketing studio
   Design system + components. Single source of truth.
   Brand tokens taken verbatim from the Developer Brief v2 (Section 2).
   Primary accent = orange (growth). Secondary accent = teal (RevOps). Links = teal.
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root {
  /* Neutrals & surfaces (v2) */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #111827;
  /* v2 spec muted is #6B7280; nudged a hair darker to #626977 so it clears WCAG AA
     (4.5:1) even on the #F1F5F9 alt bands, where #6B7280 lands at ~4.44:1. */
  --color-text-muted: #626977;
  --color-text-muted-strong: #566072;

  /* Primary accent — orange (growth). The brief's #F97316 is too light for text
     on light bg (fails AA), so #F97316 is used as a FILL (button bg) and the
     deeper #C2410C is the accent used for text/icons on light surfaces. */
  --color-primary: #c2410c;          /* orange ink — text, icons, default accent (AA-safe) */
  --color-primary-bright: #f97316;   /* bright brand orange — button fill, decorative */
  --color-primary-hover: #ea580c;    /* button hover fill (with dark label) */
  --color-primary-soft: #fef3c7;

  /* Teal accent — RevOps: links, secondary buttons, RevOps-flavoured accents */
  --color-teal: #0f766e;
  --color-teal-hover: #0d9488;
  /* nudged 3 steps lighter (was #E0F2F1). The orange ink #C2410C measured 4.47:1
     on the old tint at 13-17px semibold, i.e. just under AA, on 14 pages of
     eyebrow labels. At #E9F5F4 the same ink reaches 4.64:1 and the teal ink
     #0F766E on the tint moves from 4.73:1 to 4.94:1. */
  --color-teal-soft: #e9f5f4;

  /* ---- Chart value ramp -------------------------------------------------
     ONE ordered sequence, used by every chart on the site whose FILL carries a
     magnitude. Shade tracks VALUE, never position in a list: equal values take
     the same step, and a larger value never takes a lighter step than a
     smaller one. Step 1 is the highest value.

     Before this ramp existed the segmented bars drew the leader in teal and
     EVERY remaining segment in the one bright orange, so a 2 and a 1 rendered
     identically and the fill encoded nothing.

     Derived from the house palette only: the teal accent anchors the leader,
     step 2 is #C2410C mixed 40% toward #F97316, step 3 IS #F97316, and steps 4
     and 5 are #F97316 tinted 30% and 55% toward white. Nothing new is invented.

     Measured, sRGB, against #FFFFFF and against the #F1F5F9 bar track:
       s1 #0F766E  L .1418   white 5.47:1   track 5.00:1
       s2 #D85510  L .2113   white 4.02:1   track 3.67:1
       s3 #F97316  L .3246   white 2.80:1   track 2.56:1
       s4 #FB9D5C  L .4540   white 2.08:1   track 1.90:1
       s5 #FDC49C  L .6276   white 1.55:1   track 1.41:1
     NEIGHBOURING steps, which is the ratio that decides whether the ramp reads
     as ordered at all: 1.36, 1.43, 1.35, 1.34 — no two steps sit closer than
     1.34:1, so the middle of the ramp cannot collapse the way flat orange did.
     Luminance is strictly increasing, so the order survives greyscale intact
     (neighbours 1.34 or better with the hue thrown away), and it is still
     strictly increasing under a Vienot deuteranopia simulation (1.29 or
     better) and under tritanopia (1.15).

     ONE RESIDUAL, stated rather than hidden: under PROTANOPIA steps 1 and 2
     land within 1.07:1 of each other, because red luminance is suppressed and
     a dark orange falls to roughly the lightness the teal already has. No
     orange can be lighter than teal in normal vision and darker in protanopic
     vision, so a teal-led ramp cannot fix this by re-picking a hex. Steps 2 to
     5 stay ordered there (1.32 or better), and the two that converge stay far
     apart in CHROMA (teal simulates to a neutral #70706E, step 2 to an olive
     #6F6F15), the leader is always the leftmost segment and the first legend
     entry, and every value is printed. If a strictly protan-ordered ramp is
     ever wanted instead, dropping the teal for #C2410C #DE5A11 #F97316
     #FBA269 #FDCFA9 is strictly ordered in all four modes; it costs the teal
     leader marker, which is the only reason it is not the default.

     s3 to s5 do not reach 3:1 against white on their own. A light-ended
     sequential ramp cannot: five steps all clearing 3:1 would have to sit
     below L .30, which leaves no room to separate them. The fills are
     therefore never the sole carrier of a value — every bar prints its number
     beside it and every legend entry keeps its own count — and every legend
     swatch carries --chart-keyline, which measures 5.52:1 on white and 5.04:1
     on the track, so the mark itself is always bounded whatever its fill. */
  --chart-shade-1: #0f766e;
  --chart-shade-2: #d85510;
  --chart-shade-3: #f97316;
  --chart-shade-4: #fb9d5c;
  --chart-shade-5: #fdc49c;
  /* Outside the ordered ramp and lighter than step 5, so a pooled remainder
     can never read as outranking a value that was actually counted. */
  --chart-shade-rest: #e2e8f0;
  /* 1px keyline that bounds a swatch whatever its fill: the house muted ink,
     5.52:1 on #FFFFFF and 5.04:1 on the #F1F5F9 track. */
  --chart-keyline: #626977;

  /* Secondary tokens alias to teal so existing "--ai"/secondary components map cleanly */
  --color-secondary: #0f766e;
  --color-secondary-hover: #0d9488;
  --color-secondary-soft: #e0f2f1;

  /* Feedback */
  --color-success: #16a34a;          /* dots / non-text accents */
  --color-success-text: #166534;     /* success text on light bg (AA-safe) */
  --color-warning: #facc15;
  --color-error: #dc2626;

  /* Typography */
  --font-heading: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale (v2 brief: body 16; H1 44/32, H2 32/26, H3 24/22, H4 20/18) */
  --fs-body: 1rem;            /* 16px */
  --fs-sm: 0.875rem;          /* 14px */
  --fs-xs: 0.78rem;           /* ~12.5px */
  --fs-lead: 1.15rem;         /* ~18px subcopy */
  --fs-h4: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);   /* 18 → 20 */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);  /* 22 → 24 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2rem);    /* 26 → 32 */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);     /* 32 → 44 */
  --fs-display: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); /* 32 → 44 — hero H1, brief §2.2 ceiling */

  /* Spacing scale — 8px base (brief 3.4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;   /* half-step used by the v2 hero rhythm (var(--space-5, 20px)) */
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section padding */
  --section-y: clamp(48px, 6vw, 96px);

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --gutter: clamp(16px, 4vw, 24px);

  /* Radii */
  --radius-sm: 7px;
  --radius: 12px;
  --radius-md: 12px;   /* alias of --radius; .prevnext__item asked for it and got 0 */
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows — restrained, no loud effects (brief technical notes) */
  --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.04);
  --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.06), 0 1px 2px rgba(2, 6, 23, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(2, 6, 23, 0.12), 0 2px 6px -2px rgba(2, 6, 23, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(2, 6, 23, 0.18);
  --shadow-primary: 0 8px 20px -6px rgba(15, 118, 110, 0.35);

  --header-h: 72px;
  --header-h-scrolled: 60px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset / base ---------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@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;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
/* An outline icon declares fill="none" as a PRESENTATION ATTRIBUTE, and CSS beats
   a presentation attribute at any specificity - so the rule above was flooding
   every stroke glyph on the site solid. Measured: 63 of 63 such svgs on
   /resources/, and it destroyed the icons that carry meaning - the clock on the
   blog cards and on /resources/events/tactical-growth-marketing-meetup/ rendered
   as a plain disc, the eye in "Four parts, one evening" as a solid almond, the
   landing-page and calendar glyphs as solid blocks. This restores the author's
   intent wherever it is declared, and only there: a glyph that wants a fill
   simply does not carry the attribute. Two earlier patches fixed one component
   each (.footer-social, .se-motif); this is the same fix stated once.
   A child with its own fill rule (.sm-fill, .sm-track, ...) still wins on
   specificity, so the figure motifs are untouched. */
svg[fill="none"] { fill: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;          /* brief §2.2: H1/H2 = 1.2 */
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
/* brief §2.2: H3/H4 = 1.25–1.3 */
h3 { font-size: var(--fs-h3); line-height: 1.28; }
h4 { font-size: var(--fs-h4); line-height: 1.28; }
h5, h6 { line-height: 1.28; }

p { text-wrap: pretty; }

a {
  color: var(--color-teal); /* v2: links are teal */
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover { color: var(--color-teal-hover); text-decoration: underline; }

ul, ol { padding-left: 1.15rem; }
li { margin-block: var(--space-1); }

strong, b { font-weight: 600; }

:focus-visible {
  outline: 2.5px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--color-primary-soft); color: var(--color-text); }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 1000;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; color: #fff; }

/* ---------- 3. Layout primitives ----------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 4vw, 64px); }
.section--alt { background: var(--color-surface-alt); }
.section--surface { background: var(--color-surface); }
.section--dark {
  background: var(--color-text);
  color: #cbd5e1;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.divider { border: 0; border-top: 1px solid var(--color-border); margin: 0; }

/* Section heading group */
.section-head { max-width: 720px; margin-bottom: var(--space-12); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--color-text-muted); font-size: var(--fs-lead); margin-top: var(--space-4); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--color-primary);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }
.eyebrow--ai { color: var(--color-teal); } /* base teal #0F766E ~5.5:1 on white — AA-safe for small bold */
.eyebrow--ai::before { background: var(--color-teal); }
.eyebrow--plain::before { display: none; }

.lead { font-size: var(--fs-lead); color: var(--color-text-muted); line-height: 1.6; }
.muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 60ch; }

/* Grids */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* A grid item defaults to min-width:auto, so its MIN-CONTENT sets a floor the
   track cannot go below, and a `1fr` track silently resolves WIDER than its own
   box. That is what destroyed copy on the meetup page: a 358px .grid.grid-2
   resolved a 539.75px track, laying its second column out from x=16 to x=556 in
   a 390px viewport, and because the section carries overflow:clip and the page
   scrollWidth stayed 390 the overflowing paragraph and its CTA were not merely
   cut, they were unreachable. minmax(0,1fr) lets the track resolve to its box;
   min-width:0 lets the item inside it do the same, and BOTH are needed.

   Deliberately confined to the collapsed (single-column) breakpoints. Applied
   unconditionally it also removes the intrinsic floor from multi-column desktop
   layouts, and measured at 1280 that squeezed the hero .split text column until
   the CTA pair wrapped onto three lines. Below the breakpoint every track is
   full-width already, so there is no intrinsic sizing left to lose. */
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid > * { min-width: 0; }
}

/* ---------- 4. Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-xs);
}
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; box-shadow: var(--shadow-primary); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-teal); /* v2: secondary button = teal outline */
  border-color: var(--color-teal);
}
.btn--secondary:hover { background: var(--color-teal-soft); color: var(--color-teal); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-text); }

.btn--on-dark {
  background: #fff;
  color: var(--color-text);
}
.btn--on-dark:hover { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-lg); }

/* Outline button for use on the dark CTA band — tokenised so the hover state is
   intentional (the old inline-styled .btn--secondary went invisible on hover). */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6); /* ~5:1 on the dark band, clears 3:1 UI min */
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: #fff; }

.btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.btn--sm { padding: 9px 16px; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* Text / arrow links */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-teal); /* v2: links are teal */
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.link-arrow:hover { text-decoration: none; color: var(--color-teal-hover); }
.link-arrow:hover svg { transform: translateX(4px); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.cta-row--center { justify-content: center; }
/* v3 item 3 ("ensuring proper rendering for mobile view"): .btn is nowrap, so
   a long label sets a min-content width nothing can shrink. On a 360px screen
   "Bigger than a read? Book a diagnostic" (request-audit) measured 360px and
   pushed the PAGE to 375px scrollWidth. Below 420px a button may wrap. */
@media (max-width: 420px) {
  .btn { white-space: normal; }
}

/* ---------- 5. Badges, chips, pills -------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.badge--ai { background: var(--color-secondary-soft); color: var(--color-teal); }
.badge--neutral { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge--num {
  width: 32px; height: 32px; padding: 0;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); display: inline-block; }

/* ---------- 6. Cards ----------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  /* hover timing: MOTION SYSTEM role 3 (v2.css) */
}
.card--hover:hover { border-color: #cdd7e3; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card--pad-sm { padding: var(--space-6); }
.card h3 { font-size: var(--fs-h4); }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}
.card-icon svg { width: 24px; height: 24px; }
.card-icon--ai { background: var(--color-secondary-soft); color: var(--color-secondary); }

.feature-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-block: var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.55;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.feature-list--ai li::before {
  background-color: var(--color-secondary-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ---------- 7. Header ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent; /* glass lives on ::before so the header is not a containing block for the fixed mobile drawer */
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: background 0.25s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}
.site-header.is-scrolled::before { background: rgba(255, 255, 255, 0.92); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-h);
  transition: height 0.25s var(--ease);
}
.site-header.is-scrolled .header-inner { height: var(--header-h-scrolled); }

.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--color-text); }
.brand:hover { text-decoration: none; color: var(--color-text); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark--footer { width: 28px; height: 28px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > .btn { display: none; } /* CTA inside nav is for the mobile drawer only */
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 500;
  /* was #334155 — off-palette slate on the header nav of all 48 pages.
     Collapsed onto the house AA-safe text grey. */
  color: var(--color-text-muted);
}
.nav-link:hover { background: var(--color-surface-alt); color: var(--color-text); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--color-primary); font-weight: 600; }
.nav-link .chev { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.has-dropdown:hover .nav-link .chev,
.has-dropdown:focus-within .nav-link .chev { transform: rotate(180deg); }
.dropdown-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.dropdown-item:hover { background: var(--color-surface-alt); text-decoration: none; color: var(--color-text); }
.dropdown-item .di-icon {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.dropdown-item .di-icon svg { width: 19px; height: 19px; }
.dropdown-item:nth-child(2) .di-icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.dropdown-item .di-title { display: block; font-weight: 600; font-size: 0.95rem; }
.dropdown-item .di-desc { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.4; }

.header-cta { display: flex; align-items: center; gap: var(--space-3); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- 8. Mobile nav ------------------------------------------------ */
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    bottom: 0;
    height: auto;
    z-index: 95;
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-6) var(--gutter) var(--space-16);
    gap: var(--space-2);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s;
    border-top: 1px solid var(--color-border);
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav-link { padding: 14px 12px; font-size: 1.05rem; border-radius: var(--radius-sm); justify-content: space-between; }
  .has-dropdown { width: 100%; }
  /* In the mobile drawer the submenu is always shown (no toggle) so every
     destination is one tap away and there is no collapsed-accordion fragility. */
  .nav-link .chev { display: none; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; min-width: 0; max-height: none; overflow: visible;
    padding: 2px 0 6px 10px; margin-left: 6px; border-left: 2px solid var(--color-border);
  }
  .dropdown-item { padding: 11px 12px; }
  .dropdown-item .di-desc { display: none; }
  .nav > .btn { display: inline-flex; margin-top: var(--space-4); }
  body.nav-open { overflow: hidden; }
}

/* Sticky bottom CTA (mobile) */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  transform: translateY(120%);
  transition: transform 0.3s var(--ease);
}
.mobile-cta-bar.is-visible { transform: translateY(0); }
@media (max-width: 940px) { .mobile-cta-bar { display: block; } }

/* ---------- 9. Hero ------------------------------------------------------ */
.hero { position: relative; padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-superline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
}
.hero h1 { font-size: var(--fs-display); margin-bottom: var(--space-6); }
.hero h1 .accent { color: var(--color-primary); }
.hero-sub { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 36ch; margin-bottom: var(--space-8); }
.hero .cta-row { margin-bottom: var(--space-6); }
.hero-trust { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 46ch; line-height: 1.5; }
.hero-trust strong { color: var(--color-text); font-weight: 600; }

.hero-visual { position: relative; }
.hero-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sub, .hero-trust { max-width: 52ch; }
  /* v3 item 1/3 — was 460px, which forced the desktop render to reflow on a
     tablet. 620px lets the 3-up KPI / 4-up stage grids hold their proportions;
     below ~640px the container is narrower than this anyway, so it stops
     binding and the mockup simply fills the gutter-to-gutter width. */
  .hero-visual { max-width: 620px; } /* headline + CTA lead on mobile (no reorder) */
}

/* Hero "system" diagram card */
.syscard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.syscard-head .dot-row { display: flex; gap: 5px; }
.syscard-head .dot-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); display: block; }
.sysrow {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg);
  margin-block: var(--space-2);
}
.sysrow .sr-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--color-primary-soft); color: var(--color-primary); }
.sysrow .sr-ic svg { width: 17px; height: 17px; }
.sysrow .sr-ic--ai { background: var(--color-secondary-soft); color: var(--color-secondary); }
.sysrow .sr-label { font-weight: 600; font-size: 0.92rem; }
.sysrow .sr-meta { font-size: var(--fs-xs); color: var(--color-text-muted); margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.sysconnector { display: grid; place-items: center; height: 16px; color: var(--color-border); }
.sysconnector svg { width: 16px; height: 16px; }
.syscard-foot {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm);
}
.syscard-foot .out { color: var(--color-success-text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 10. Stat / metric blocks ------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { }
.stat .stat-num { font-family: var(--font-heading); font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; color: var(--color-primary); line-height: 1; }
.stat .stat-label { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.stat .stat-delta { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: 600; color: var(--color-success-text); }
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) { .stat-grid--2 { grid-template-columns: 1fr; } }

/* ---------- 11. Quick audit strip ---------------------------------------- */
.audit-strip { background: var(--color-surface-alt); }
.audit-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
}
.audit-copy { max-width: 640px; }
.audit-copy .label { font-weight: 700; font-family: var(--font-heading); font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.audit-copy p { color: var(--color-text-muted); }
.audit-copy .free-tag { color: var(--color-primary); font-weight: 600; }

/* ---------- 12. Two pillars ---------------------------------------------- */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}
.pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--color-primary); }
.pillar--ai::before { background: var(--color-secondary); }
.pillar .pill-tag { margin-bottom: var(--space-4); }

/* ---------- 13. Process / timeline --------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; }
.step .step-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-surface); border: 1.5px solid var(--color-primary);
  color: var(--color-primary); font-family: var(--font-heading); font-weight: 700;
  margin-bottom: var(--space-4);
}
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: 0.95rem; }
.steps--connected .step::after {
  content: ""; position: absolute; top: 20px; left: 52px; right: -12px; height: 1.5px;
  background: linear-gradient(90deg, var(--color-border), transparent);
}
.steps--connected .step:last-child::after { display: none; }
@media (max-width: 860px) { .steps--connected .step::after { display: none; } }

/* Vertical timeline */
.timeline { position: relative; margin-top: var(--space-8); }
.timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); }
.tl-item { position: relative; padding-left: 56px; padding-bottom: var(--space-8); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .tl-dot {
  position: absolute; left: 8px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-primary); color: #fff; display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-heading);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.tl-item h3 { font-size: var(--fs-h4); }
.tl-item p { color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- 14. Quotes / testimonials ------------------------------------ */
.quote {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
}
.quote p { font-size: 1.05rem; line-height: 1.6; }
.quote .quote-mark { color: var(--color-primary); font-family: var(--font-heading); font-size: 2.4rem; line-height: 0.5; }
.quote-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.quote-foot .qf-name { font-weight: 600; font-size: 0.95rem; }
.quote-foot .qf-role { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Person identity (founder cards) — reusable, replaces borrowed .qf-name */
.person-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.person-role { font-size: var(--fs-sm); color: var(--color-text-muted); }
.founder-card { display: flex; gap: var(--space-6); align-items: center; }
.founder-card .avatar--lg { width: 84px; height: 84px; font-size: 1.6rem; flex: none; }
@media (max-width: 420px) { .founder-card { flex-direction: column; align-items: flex-start; } }

/* ---------- 15. CTA band ------------------------------------------------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-text); /* solid dark (v2: no generic gradients) */
  color: #cbd5e1;
  padding: clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { margin-top: var(--space-4); max-width: 52ch; }
.cta-band .cta-row { margin-top: var(--space-8); }
.cta-band-inner { position: relative; z-index: 1; }

/* --- v3 meeting doc, item 8: "Try to use the blank space on the right." ----
   Every .cta-band stacked h2 / p / buttons at the left edge, so the headline
   wrapped to three short lines while the right ~55% of the box stayed empty.
   Same fix as the .promo band already ships (v2.css .promo__inner): copy left,
   button stack hard right, vertically centred. No markup change — the three
   existing children are placed explicitly. Applies to all seven bands
   (index, services, about, contact, resources, privacy, terms). */
/* 861px is the site's own stacking breakpoint (hero, mockups, nav). Below it
   the band goes back to a single column: squeezing a 260px button stack out of
   a ~630px band only pushed the headline back to four lines. */
@media (min-width: 861px) {
  .cta-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 5vw, 72px);
    align-content: center;
    align-items: start;
  }
  .cta-band-inner > h2 {
    grid-column: 1; grid-row: 1;
    max-width: none;          /* was 18ch — the 3-line wrap he screenshotted.
                                 the grid column now sets the measure */
  }
  .cta-band-inner > p { grid-column: 1; grid-row: 2; max-width: 60ch; }
  .cta-band-inner > .cta-row {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--space-3);
    margin-top: 0;
    min-width: 260px;
  }
  .cta-band-inner > .cta-row > .btn { width: 100%; }
}

/* ---------- 16. Forms ---------------------------------------------------- */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label, .field-label { font-size: var(--fs-sm); font-weight: 600; display: block; }
.field .req { color: var(--color-error); }
.field .hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.input, .select, .textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text);
  padding: 11px 13px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s;
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--color-primary); background: #fff;
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.textarea { resize: vertical; min-height: 120px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }

.choice-group { display: flex; flex-direction: column; gap: var(--space-2); }
.choice {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; background: var(--color-bg);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.choice:hover { border-color: #cdd7e3; }
.choice input { margin-top: 3px; accent-color: var(--color-primary); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.choice .ch-title { font-weight: 600; font-size: 0.95rem; }
.choice .ch-desc { font-size: var(--fs-sm); color: var(--color-text-muted); }

.form-success {
  display: none;
  text-align: center; padding: var(--space-8) var(--space-4);
}
.form-success.is-visible { display: block; }
.form-success .fs-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; margin: 0 auto var(--space-6); }
.form-success .fs-ic svg { width: 28px; height: 28px; }
.form-note { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-4); }

/* What happens next list */
.next-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.next-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; align-items: flex-start; }
.next-list .nl-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: grid; place-items: center; font-family: var(--font-heading); }

/* ---------- 17. Resources / filter --------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filter-btn {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
  cursor: pointer; transition: all 0.16s var(--ease);
}
.filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.resource-card { display: flex; flex-direction: column; height: 100%; }
.resource-card .rc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.type-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.type-label .tl-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--color-surface-alt); }
.type-label .tl-ic svg { width: 15px; height: 15px; }
/* ---- ONE CHIP TREATMENT FOR EVERY RESOURCE CARD --------------------------
   Counted across the site: 65 cards carry data-type="Article" and exactly ONE
   carries data-type="Tool" (the "Template" chip on the RevOps-diagnostic
   card). "Video" and "Event" are declared but used nowhere.
   That single Tool chip rendered #16A34A on #E8F6EE -- a green that appears
   nowhere else on the site and is not in the fixed palette -- sitting in a
   grid beside 65 identical cream-and-orange chips. Nothing about it is broken
   on its own; it is only wrong next to its 65 counterparts.
   The chip now carries the house treatment whatever the card's type, so a new
   data-type cannot reintroduce an off-palette colour by being added. The
   TYPE is still announced by the chip's label text and its icon; it does not
   need a colour system of its own.
   #fef3e8 / --color-warning (#facc15) and the green are gone with the
   per-type rules. Do not re-add a per-type colour without a palette value. */
.type-label .tl-ic { background: var(--color-primary-soft); color: var(--color-primary); }
.resource-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.resource-card p { color: var(--color-text-muted); font-size: 0.95rem; }
.resource-card .rc-foot { margin-top: auto; padding-top: var(--space-6); }
.is-hidden { display: none !important; }

/* ---------- 18. Logos / stack band --------------------------------------- */
.logo-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6) var(--space-12); }
.logo-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; color: var(--color-text-muted); font-size: 0.95rem;   /* was #475569 */
}
.logo-chip svg { width: 22px; height: 22px; color: var(--color-text-muted); }

/* ---------- 19. Case study cards ----------------------------------------- */
.case-card { display: flex; flex-direction: column; }
.case-card .cc-tag { margin-bottom: var(--space-4); }
.case-card .cc-outcome { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); line-height: 1.25; }
.case-card .cc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-4) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.case-card .cc-metric .m-num { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-primary); }
.case-card .cc-metric .m-lab { font-size: var(--fs-xs); color: var(--color-text-muted); }
.case-card .cc-foot { margin-top: auto; padding-top: var(--space-4); }

/* ---------- 20. Misc / utilities ----------------------------------------- */
.pre-text { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; background: var(--color-surface-alt); padding: 2px 6px; border-radius: 5px; }
.kicker-list { display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.kicker-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); }
.kicker-list svg { flex: none; width: 20px; height: 20px; color: var(--color-primary); margin-top: 2px; }

.callout {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-6);
}
.callout--ai { border-left-color: var(--color-secondary); background: var(--color-secondary-soft); }
.callout p { color: var(--color-text); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.full-span { grid-column: 1 / -1; }

/* ---------- 21. Footer --------------------------------------------------- */
.site-footer { background: var(--color-text); color: #94a3b8; padding-block: var(--space-16) var(--space-8); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-6); } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { color: #fff; margin-bottom: var(--space-4); }
.footer-pos { font-size: 0.95rem; line-height: 1.6; max-width: 34ch; margin-bottom: var(--space-6); color: #94a3b8; }
.footer-col h4 { color: #e2e8f0; font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.footer-col a { color: #94a3b8; font-size: 0.95rem; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-loc { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: #94a3b8; margin-top: var(--space-2); }
.footer-loc svg { width: 16px; height: 16px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-4); padding-top: var(--space-8); font-size: var(--fs-sm);
}
.footer-bottom .fb-links { display: flex; gap: var(--space-6); }
/* The footer paints --color-text (#111827). These links carried no footer-scoped
   colour, so they inherited the global link teal #0F766E and rendered at 3.24:1
   at 14px/400 — under AA on every one of the 48 pages. #E2E8F0 is the house
   border token already used for .footer-col h4 on this same surface and reaches
   14.6:1 here; the global teal stays untouched because it is correct on light. */
.footer-bottom .fb-links a { color: #e2e8f0; }
.footer-bottom .fb-links a:hover { color: #fff; text-decoration: underline; }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: #cbd5e1;
}
.footer-social a:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; }

/* ---------- 22. Scroll reveal -------------------------------------------- */
/* Only hide when JS is active (html.js); no-JS = fully visible content.
   THE REVEAL IS DEFINED IN premium.css, NOT HERE. This block used to declare a
   complete second version of it - 0.6s on var(--ease), 18px of travel, delays
   of .08/.16/.24 - every value of which was overridden by premium.css (0.7s on
   var(--ease-out), 22px, .09/.18/.27/.36) because premium.css loads later and
   its delay selectors carry the higher specificity. Measured across all 48
   pages, every one of the ~1,600 revealing elements runs premium's numbers, so
   nothing here was ever visible; it was a set of plausible values waiting for
   a specificity change to switch the whole site's reveal timing by accident.
   The primed state stays (it must sit next to the .js gate that owns it); the
   timing is premium's alone. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- 23. Page hero (inner pages) ---------------------------------- */
.page-hero { padding-block: clamp(48px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.page-hero .container { max-width: 880px; }
.page-hero--wide .container { max-width: var(--container); }
.page-hero--wide .split { align-items: start; }
.page-hero h1 { margin-bottom: var(--space-6); }
.page-hero .lead { max-width: 60ch; }
.page-hero .cta-row { margin-top: var(--space-8); }

/* breadcrumb-ish prose blocks */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }

/* Two-column text/visual split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split--text-narrow { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 820px) {
  .split, .split--text-narrow { grid-template-columns: minmax(0, 1fr); }
  .split > * { min-width: 0; }
}

/* anchor offset target */
.anchor { scroll-margin-top: calc(var(--header-h) + 24px); }