/* =====================================================================
   THE CONVERSION DIRECTIVE — Design System
   Tokens, reset, base typography, layout primitives, animations.
   ===================================================================== */

/* -----  DESIGN TOKENS  ----- */
:root {
  /* Color — Backgrounds (LIGHT THEME — matches Conversion Directive logo) */
  --bg-deep: #FFFFFF;       /* Page background — pure white for max logo contrast */
  --bg-surface: #F7F9FC;    /* Cards, raised surfaces */
  --bg-section: #F1F4F9;    /* Alternating section backgrounds */
  --bg-dark: #1A2333;       /* Single dark section (footer + dark hero accents) */
  --border: #E1E6EE;        /* Default card / divider borders */
  --border-strong: #C8D0DC; /* Stronger dividers */

  /* Color — Text on light bg */
  --text-primary: #1A2333;  /* Near-black with brand tint */
  --text-muted: #5B6573;    /* Body secondary */
  --text-subtle: #677080;   /* Captions, meta — WCAG AA (≥4.5:1) on all light bgs */
  --text-on-dark: #F2F4F8;  /* Inverted text (footer, buttons) */

  /* Color — Brand (extracted from the Conversion Directive logo) */
  --brand: #1F3F6E;             /* Deep navy — primary button bg, headings */
  --brand-hover: #2A4F86;       /* Slightly lighter on hover */
  --brand-accent: #2A4F86;      /* Links, accents (mid-navy for AA on light bg) */
  --brand-green: #6EBE2E;       /* Lime green from "DIRECTIVE" — decorative only */
  --brand-green-hover: #5FA526;
  --brand-glow: rgba(31, 63, 110, 0.25);
  --brand-glow-soft: rgba(31, 63, 110, 0.08);

  /* Color — Single-use accents */
  --warm-accent: #B5421A;   /* Methodology badge — WCAG AA on white & bg-section */
  --stat-green: var(--brand); /* Stat numbers must pass AA — use navy. Lime green
                                 stays as --brand-green for decorative use only. */

  /* Type scale — premium-agency standard (≈18–20px body) */
  --fs-h1: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h2: clamp(2rem, 4.2vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 2.6vw, 1.625rem);
  --fs-body-lg: 1.25rem;          /* 20px — was 19px */
  --fs-body: 1.125rem;            /* 18px — was 17px */
  --fs-small: 0.875rem;           /* 14px — was 13px */
  --fs-stat: clamp(2.5rem, 5vw, 4rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --max-w: 1280px;
  --max-w-text: 720px;

  /* Radius */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;

  /* Motion */
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 600ms;
}

/* -----  RESET  ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* -----  TYPOGRAPHY  ----- */
h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  word-spacing: 0.02em;
}
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.005em; font-weight: 600; }
p { font-size: var(--fs-body); }

.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--space-sm);
  display: inline-block;
}

.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 56ch;
}

/* -----  LAYOUT PRIMITIVES  ----- */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--space-3xl);
  position: relative;
}
.section--tight { padding-block: var(--space-2xl); }
.section--snug  { padding-block: var(--space-xl); }
.section--alt { background: var(--bg-section); }

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--hero { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-2xl); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4, .grid--hero { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.flow > * + * { margin-block-start: var(--space-md); }
.flow-lg > * + * { margin-block-start: var(--space-lg); }

/* -----  HEADER / NAV  ----- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: var(--space-md);
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(225, 230, 238, 0.4);
  transition: border-color var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--border), 0 8px 20px rgba(26, 35, 51, 0.06);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.nav__logo-img {
  height: 52px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .nav__logo-img { height: 40px; }
}
.nav__logo-mark { /* Legacy mark, retained for any non-logo-image fallback contexts */
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--brand);
  border-radius: 8px;
  color: white;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}
.nav__link {
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--easing);
  font-weight: 500;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text-primary); }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  padding: var(--space-2xs);
}

@media (max-width: 800px) {
  .nav__list {
    position: fixed;
    inset: 0;
    background: var(--bg-deep);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);
    font-size: 1.5rem;
    transform: translateY(-100%);
    transition: transform var(--t-base) var(--easing), visibility 0s linear var(--t-base);
    pointer-events: none;
    visibility: hidden;
    border-top: 1px solid var(--border);
  }
  .nav__list.is-open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform var(--t-base) var(--easing), visibility 0s linear 0s;
  }
  .nav__toggle { display: block; z-index: 101; position: relative; }
}

/* -----  BUTTONS  ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--easing), background var(--t-fast) var(--easing), box-shadow var(--t-fast) var(--easing);
  border: 0;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.btn--primary {
  background: var(--brand);
  color: white;
  box-shadow: 0 6px 16px var(--brand-glow), 0 1px 3px rgba(31, 63, 110, 0.18);
}
.btn--primary:hover {
  background: var(--brand-hover);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px var(--brand-glow), 0 1px 3px rgba(31, 63, 110, 0.22);
}
.btn--secondary {
  background: white;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn--secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
.btn--green {
  background: var(--brand-green);
  color: var(--text-primary);
  box-shadow: 0 6px 16px rgba(110, 190, 46, 0.28), 0 1px 3px rgba(110, 190, 46, 0.18);
}
.btn--green:hover {
  background: var(--brand-green-hover);
  color: var(--text-primary);
  transform: translateY(-1px) scale(1.02);
}
.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn__arrow { display: inline-block; transition: transform var(--t-fast) var(--easing); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* -----  HERO  ----- */
.hero {
  padding-top: calc(var(--space-3xl) + 4.5rem);
  padding-bottom: var(--space-3xl);
  min-height: min(82vh, 760px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: center;
}
/* Hero text colors flipped to light-on-dark because the hero now has a
   dark illustration background. Other pages' eyebrow class stays navy. */
.hero__eyebrow { color: var(--brand-green); }
.hero__title {
  color: white;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  word-spacing: 0.18em;
  margin-block: var(--space-md);
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
/* Desktop: each .hero__title-row span is a block AND nowraps internally,
   forcing the exact three-line layout regardless of word widths.
   Mobile: spans go back to inline so text wraps naturally word-by-word.
   The non-breaking hyphen (‑) in "Direct‑Response" keeps that word
   together on mobile so it lands on its own line like v1 instead of
   breaking mid-word. */
.hero__title-row { display: block; white-space: nowrap; }
@media (max-width: 720px) {
  .hero__title-row { display: inline; white-space: normal; }
}
.hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body-lg);
  max-width: 58ch;
  line-height: 1.55;
  margin-bottom: var(--space-xl);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
/* When multiple .hero__subtitle paragraphs stack (e.g. About page hero),
   tighten the gap between them. Leaves the original large bottom margin
   intact on the LAST one for spacing before CTAs / next section. */
.hero__subtitle:not(:last-of-type) { margin-bottom: var(--space-sm); }
.hero__subtitle + .hero__subtitle { margin-top: 0; }

/* Hero-scoped button overrides — primary becomes lime green to pop against
   the dark hero illustration; secondary becomes a glass/ghost button. */
.hero .btn--primary {
  background: var(--brand-green);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(110, 190, 46, 0.40), 0 0 60px rgba(110, 190, 46, 0.16);
}
.hero .btn--primary:hover {
  background: var(--brand-green-hover);
  color: var(--text-primary);
  box-shadow: 0 12px 30px rgba(110, 190, 46, 0.50), 0 0 80px rgba(110, 190, 46, 0.22);
}
.hero .btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: white;
  color: white;
}
.hero__ctas {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Full-bleed hero background. Use either:
   - <img class="hero__media" src="..."> for static photo
   - <video class="hero__media" ...> for looping video
   - <div class="hero__bg"></div> as gradient-only fallback */
.hero__bg, .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias toward the right side of the source image (where the editor + monitors sit) */
  object-position: 60% center;
  border: 0;
}
/* Per-image hero crop overrides.
   Desktop: keep an explicit object-position for images whose focal
   point is off-center. Mobile (≤760px): shift further right where
   the portrait crop would otherwise cut off the more important
   side of the photo. */
.hero__media[src*="case-studies-hero"] { object-position: 50% 30%; }
.hero__media[src*="about-hero"]        { object-position: 50% 25%; }
@media (max-width: 760px) {
  .hero__media[src*="services-hero"]     { object-position: 80% center; }
  .hero__media[src*="case-studies-hero"] { object-position: 80% 30%; }
  .hero__media[src*="about-hero"]        { object-position: 65% 25%; }
}
/* Dark gradient overlay — sits between bg image and content for text contrast.
   Three layers stacked:
   1. Uniform base darken so the whole image is slightly faded and text pops everywhere.
   2. Directional emphasis — heavier on the left (where hero text overlays), feathers right.
   3. Vertical frame — subtle darkening at top and bottom edges. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(rgba(7, 9, 13, 0.42), rgba(7, 9, 13, 0.42)),
    linear-gradient(to right,
      rgba(7, 9, 13, 0.62) 0%,
      rgba(7, 9, 13, 0.36) 40%,
      rgba(7, 9, 13, 0.14) 75%,
      rgba(7, 9, 13, 0.00) 100%),
    linear-gradient(to bottom,
      rgba(7, 9, 13, 0.28) 0%,
      transparent 28%,
      transparent 68%,
      rgba(7, 9, 13, 0.55) 100%);
  pointer-events: none;
}
.hero__bg {
  background:
    /* light wash to keep dark text legible over any future imagery */
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.90) 100%),
    /* brand-green ambient glow (top-right) */
    radial-gradient(circle at 82% 18%, rgba(110, 190, 46, 0.22), transparent 48%),
    /* navy ambient glow (bottom-left) */
    radial-gradient(circle at 10% 82%, rgba(31, 63, 110, 0.28), transparent 55%),
    /* secondary green accent (bottom-right) */
    radial-gradient(circle at 92% 92%, rgba(110, 190, 46, 0.14), transparent 42%),
    /* atmospheric base */
    linear-gradient(135deg, #f3f7fc 0%, #ffffff 45%, #eef3fa 100%);
}
.hero__bg::after {
  /* Subtle dot-grid texture for premium "designed" feel */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(31, 63, 110, 0.07) 1px, transparent 1.5px);
  background-size: 30px 30px;
  background-position: 0 0;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 25%, black 75%, transparent 100%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}
.hero__asset {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(110, 190, 46, 0.18), transparent 65%),
    radial-gradient(circle at 80% 70%, var(--brand-glow), transparent 60%),
    linear-gradient(135deg, var(--bg-surface), var(--bg-section));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(26, 35, 51, 0.06);
}
.hero__asset > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.hero__asset::before {
  /* Decorative glow ring (Nano Banana asset placeholder underlay) */
  content: '';
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
  filter: blur(28px);
  opacity: 0.18;
  animation: pulse 5s var(--easing) infinite;
}
.hero__asset:has(> img)::before { display: none; }
.hero__asset-note {
  position: relative;
  z-index: 2;
  color: var(--text-subtle);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-md);
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.08); opacity: 0.28; }
}

/* -----  STAT BAND  ----- */
.stats {
  border-block: 1px solid var(--border);
  padding-block: var(--space-2xl);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.stats__grid > * {
  text-align: center;
}
@media (max-width: 800px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
.stat__number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--stat-green);
  display: block;
}
.stat__label {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* -----  INDUSTRIES STRIP  -----
   Thin dark-navy band below the stat band. Quickly signals "the playbook
   works across these verticals" so visitors don't read the golf-heavy
   case studies and assume we're a golf-only shop. Matches the dark theme
   used elsewhere on .section--alt sections. */
.industries {
  padding-block: var(--space-lg);
  text-align: center;
  background: var(--bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.industries__label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: var(--space-md);
}
.industries__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.industries__tag {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(242, 244, 248, 0.92);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--easing), background var(--t-fast) var(--easing), color var(--t-fast) var(--easing);
}
.industries__tag:hover {
  background: rgba(110, 190, 46, 0.10);
  border-color: rgba(110, 190, 46, 0.45);
  color: #FFFFFF;
}
@media (max-width: 540px) {
  .industries__list { gap: 0.4rem; }
  .industries__tag { padding: 0.4rem 0.75rem; font-size: 0.875rem; }
}

/* -----  LOGO MARQUEE  ----- */
.marquee {
  padding-block: var(--space-xl);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.marquee__label {
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: max-content;
  animation: scroll 40s linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 0.75rem 1.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(26, 35, 51, 0.04);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--easing), border-color var(--t-fast) var(--easing);
}
.marquee__item:hover {
  color: var(--brand);
  border-color: var(--brand);
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* -----  WHO IT'S FOR / NOT FOR  ----- */
.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
@media (max-width: 800px) { .audience { grid-template-columns: 1fr; } }
.audience__col {
  padding: var(--space-lg);
  border-radius: var(--r-lg);
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(26, 35, 51, 0.04);
}
.audience__col--yes { border-top: 3px solid var(--brand-green); }
.audience__col--no { border-top: 3px solid var(--warm-accent); border-color: rgba(229, 94, 37, 0.20); }
.audience__col h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.audience__icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.75rem;
}
.audience__icon--yes { background: var(--brand-green); color: var(--text-primary); }
.audience__icon--no { background: var(--warm-accent); color: white; }
.audience__list { list-style: none; padding: 0; }
.audience__list li {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.audience__list li:last-child { border-bottom: 0; }
.audience__list strong { color: var(--text-primary); }

/* -----  PILLAR CARDS  ----- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: var(--space-lg);
  background: white;
  border: 1px solid rgba(31, 63, 110, 0.18);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--easing), border-color var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.10),
    0 24px 48px rgba(31, 63, 110, 0.06);
  color: inherit;
}
.pillar:hover {
  transform: translateY(-6px);
  border-color: rgba(31, 63, 110, 0.45);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.08),
    0 16px 40px rgba(31, 63, 110, 0.16),
    0 32px 64px rgba(31, 63, 110, 0.10);
}
.pillar__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--brand), var(--brand-green));
  border-radius: 12px;
  margin-bottom: var(--space-md);
  display: grid;
  place-items: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(31, 63, 110, 0.18);
}
.pillar h3 { margin-bottom: var(--space-xs); }
.pillar p { color: var(--text-muted); }

/* "Creative Systems & Production Buildout" — full-width premium card
   below the 3-pillar grid. Horizontal layout, brand-accent treatment. */
.pillar--feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  margin-top: var(--space-lg);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: linear-gradient(135deg, rgba(110, 190, 46, 0.04) 0%, rgba(31, 63, 110, 0.06) 100%);
  border: 1px solid rgba(31, 63, 110, 0.24);
  position: relative;
}
.pillar--feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand) 100%);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.pillar__icon--feature {
  width: 56px;
  height: 56px;
  font-size: 1.625rem;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-green) 100%);
  margin-bottom: 0;
}
.pillar__feature-body { display: flex; flex-direction: column; gap: 0.5rem; }
.pillar__tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-green-hover);
  margin-bottom: 0.25rem;
}
.pillar--feature h3 {
  font-size: clamp(1.375rem, 2.6vw, 1.625rem);
  margin: 0;
}
.pillar--feature p {
  margin: 0;
  max-width: 70ch;
}
.pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--brand);
  transition: gap var(--t-fast) var(--easing), color var(--t-fast) var(--easing);
}
.pillar--feature:hover .pillar__cta {
  color: var(--brand-green-hover);
  gap: 0.625rem;
}
@media (max-width: 720px) {
  .pillar--feature { grid-template-columns: 1fr; }
  .pillar__icon--feature { margin-bottom: var(--space-sm); }
}

/* =====================================================================
   THE WORK / REEL — Editorial grid with hover-preview + click-to-lightbox
   ===================================================================== */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 720px) {
  .reel-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Portfolio page uses 3-col layout (homepage stays 2-col).
   Steps down: 3-col desktop → 2-col tablet → 1-col phone. */
.portfolio-section .reel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
@media (max-width: 1000px) {
  .portfolio-section .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .portfolio-section .reel-grid { grid-template-columns: 1fr; }
}

/* "More of Our Work" button row beneath the homepage reel */
.reel-footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

/* Portfolio page category sections */
.portfolio-section__head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.portfolio-section__title {
  margin: var(--space-sm) 0 0 0;
  font-size: clamp(1.875rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
/* On dark .section--alt sections, portfolio title goes white
   (loose section-header rule already promotes it via the existing
   .section--alt > .container > .reveal > h2 selector; this catches
   the title even though it sits in a .portfolio-section__head wrapper) */
.section--alt .portfolio-section__title { color: #FFFFFF; }
.section--alt .portfolio-section__head .eyebrow { color: var(--brand-green); }

.reel-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-base) var(--easing);
}
.reel-card:hover { transform: translateY(-4px); }

.reel-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #0E1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 12px 32px rgba(0, 0, 0, 0.28);
  transition: border-color var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
.reel-card:hover .reel-card__media {
  border-color: rgba(110, 190, 46, 0.45);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 16px 40px rgba(110, 190, 46, 0.20),
    0 28px 56px rgba(0, 0, 0, 0.32);
}

/* Placeholder gradient posters — six tinted variants so the grid reads as
   intentional rather than empty. Replace with background-image:url(...) when real frame stills are dropped in. */
.reel-card__poster {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(110, 190, 46, 0.10), transparent 60%),
    linear-gradient(135deg, #1A2333 0%, #0A0D14 100%);
  background-size: cover;
  background-position: center;
  transition: transform var(--t-slow) var(--easing), opacity var(--t-base) var(--easing);
  transform: scale(1.001); /* avoid 1px edge during transform */
}
.reel-card__poster[data-tint="1"] { background-image: radial-gradient(120% 80% at 80% 20%, rgba(110, 190, 46, 0.20), transparent 50%), linear-gradient(135deg, #1F3F6E 0%, #0A0D14 100%); }
.reel-card__poster[data-tint="2"] { background-image: radial-gradient(120% 80% at 20% 80%, rgba(31, 63, 110, 0.40), transparent 60%), linear-gradient(135deg, #2E4A6E 0%, #0E1622 100%); }
.reel-card__poster[data-tint="3"] { background-image: radial-gradient(120% 80% at 70% 30%, rgba(110, 190, 46, 0.12), transparent 50%), linear-gradient(160deg, #1A3050 0%, #050810 100%); }
.reel-card__poster[data-tint="4"] { background-image: radial-gradient(120% 80% at 30% 70%, rgba(110, 190, 46, 0.16), transparent 50%), linear-gradient(135deg, #243758 0%, #0B0F18 100%); }
.reel-card__poster[data-tint="5"] { background-image: radial-gradient(120% 80% at 50% 50%, rgba(31, 63, 110, 0.50), transparent 65%), linear-gradient(135deg, #1F3F6E 0%, #07090D 100%); }
.reel-card__poster[data-tint="6"] { background-image: radial-gradient(120% 80% at 80% 80%, rgba(110, 190, 46, 0.18), transparent 50%), linear-gradient(135deg, #2A4F86 0%, #060914 100%); }

.reel-card:hover .reel-card__poster {
  transform: scale(1.05);
  opacity: 0.85;
}

/* Hover-preview video (silent loop). Hidden until card is hovered AND a real
   <source> has been wired in. */
.reel-card__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-base) var(--easing);
  pointer-events: none;
}
.reel-card.is-previewing .reel-card__preview { opacity: 1; }

.reel-card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  transition: background var(--t-base) var(--easing);
}
.reel-card:hover .reel-card__overlay {
  background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.45) 100%);
}

.reel-card__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  transition: transform var(--t-base) var(--easing), background var(--t-base) var(--easing), color var(--t-base) var(--easing);
}
.reel-card__play svg { margin-left: 3px; } /* optical centering of the play triangle */
.reel-card:hover .reel-card__play {
  transform: scale(1.12);
  background: var(--brand-green);
  color: var(--text-primary);
}

.reel-card__duration {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reel-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-inline: 0.125rem;
}
.reel-card__title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
.reel-card__meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
/* On dark .section--alt sections (homepage reel, portfolio Social /
   Video Series sections), flip card text to light-on-dark. */
.section--alt .reel-card__title { color: #FFFFFF; }
.section--alt .reel-card__meta  { color: rgba(231, 236, 242, 0.62); }

/* -----  VIDEO LIGHTBOX  ----- */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--easing), visibility 0s linear var(--t-base);
}
.video-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-base) var(--easing), visibility 0s linear 0s;
}
.video-lightbox__frame {
  position: relative;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.video-lightbox__frame video,
.video-lightbox__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.video-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}
.video-lightbox__close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.08);
}
.video-lightbox__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-lg);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'DM Sans', sans-serif;
}
.video-lightbox__placeholder p { margin-block: 0.25rem; }
.video-lightbox__placeholder-meta {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.video-lightbox__placeholder code {
  font-family: 'DM Sans', monospace;
  background: rgba(255, 255, 255, 0.10);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}
body.is-lightbox-open { overflow: hidden; }

/* -----  CASE STUDY HERO CARD  -----
   Option B: image and content sit side-by-side as true grid columns —
   no full-bleed background, no frost-glass overlay. Each gets equal
   visual presence. */
.case-hero {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  border: 1px solid rgba(31, 63, 110, 0.18);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 540px;
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.10),
    0 24px 48px rgba(31, 63, 110, 0.06);
}
.case-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-hero::before { content: none; }
.case-hero__content {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-hero--text-left  .case-hero__content { grid-column: 1; grid-row: 1; }
.case-hero--text-left  .case-hero__bg      { grid-column: 2; grid-row: 1; }
.case-hero--text-right .case-hero__content { grid-column: 2; grid-row: 1; }
.case-hero--text-right .case-hero__bg      { grid-column: 1; grid-row: 1; }

/* Text colors for the white-frost panel = brand-native light-mode colors */
.case-hero .eyebrow { color: var(--text-muted); }
.case-hero__stat { color: var(--brand); text-shadow: none; }
.case-hero h3 { color: var(--text-primary); }
.case-hero p { color: var(--text-muted); text-shadow: none; }
.case-hero strong { color: var(--text-primary) !important; }
.case-hero .case-stat-mini__num { color: var(--brand); }
.case-hero .case-stat-mini__label { color: var(--text-muted); text-shadow: none; }

/* Primary button reverts to brand navy on the white-frost panel */
.case-hero .btn--primary {
  background: var(--brand);
  color: white;
  box-shadow: 0 8px 20px var(--brand-glow), 0 1px 3px rgba(31, 63, 110, 0.20);
}
.case-hero .btn--primary:hover {
  background: var(--brand-hover);
  color: white;
  transform: translateY(-1px) scale(1.02);
}

/* Primary button on dark case card — green pop, dark text */
.case-hero .btn--primary {
  background: var(--brand-green);
  color: var(--text-primary);
  box-shadow: 0 8px 20px rgba(110, 190, 46, 0.35), 0 0 60px rgba(110, 190, 46, 0.12);
}
.case-hero .btn--primary:hover {
  background: var(--brand-green-hover);
  color: var(--text-primary);
  transform: translateY(-1px) scale(1.02);
}

/* Tablet + phone: vertical stack — image on top, content panel below.
   Image height scales with viewport so tablets get a taller hero band
   than phones. */
@media (max-width: 900px) {
  .case-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .case-hero__bg,
  .case-hero--text-left .case-hero__bg,
  .case-hero--text-right .case-hero__bg {
    grid-row: 1;
    grid-column: 1;
    height: clamp(220px, 38vw, 380px);
  }
  .case-hero__content,
  .case-hero--text-left .case-hero__content,
  .case-hero--text-right .case-hero__content {
    grid-row: 2;
    grid-column: 1;
    padding: var(--space-lg);
  }
  /* Mobile-only: punch in on the Performance Golf case card so the
     monitor wall fills more of the frame and less of the surrounding
     room is visible. Origin anchored toward the top so the wall-mounted
     TV stays in view. Desktop crop is unchanged. */
  .case-hero__bg[src*="case-card-perf-golf"] {
    transform: scale(1.35);
    transform-origin: 50% 20%;
  }
  /* Same treatment for the Graves card — origin biased toward the top
     so the top of the monitor stays in view (center origin was cutting
     it off). */
  .case-hero__bg[src*="case-card-graves"] {
    transform: scale(1.35);
    transform-origin: 50% 15%;
  }
  /* The transformed image above creates a new stacking context and was
     painting OVER the content panel below it (covering the first line
     of the eyebrow). Promote the content panel into its own stacking
     context with z-index so it paints on top of the scaled image's
     visual overflow. */
  .case-hero__content {
    position: relative;
    z-index: 1;
  }
}
.case-hero__stat {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  word-spacing: 0.03em;
  color: var(--stat-green);
  display: block;
}
.case-hero__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  background:
    linear-gradient(135deg, var(--bg-section), white);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-md);
  position: relative;
  overflow: hidden;
}
.case-hero__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mini stat grid used inside case-study cards (4 secondary numbers per card) */
.case-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.case-stat-mini {
  padding-block: 0.25rem;
}
.case-stat-mini__num {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.005em;
  word-spacing: 0.04em;
  color: var(--stat-green);
}
.case-stat-mini__label {
  display: block;
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ----- Case-study chapter headers (case-studies.html) ----- */
.case-chapter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 3px solid rgba(31, 63, 110, 0.32);
}
/* Same divider on dark .section--alt — use light-on-dark instead of navy */
.section--alt > .container > .case-chapter {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}
.case-chapter__num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.case-chapter__num::after {
  content: ".";
  margin-left: 0.04em;
  color: var(--brand-green);
}
.case-chapter__meta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.case-chapter__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-accent);
}
.case-chapter__title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  text-wrap: balance;
}
@media (max-width: 540px) {
  .case-chapter { grid-template-columns: 1fr; gap: 0.5rem; align-items: start; }
  .case-chapter__num { font-size: 3rem; line-height: 1; }
}

/* =====================================================================
   FEATURED CASE STUDY — Editorial growth story
   ===================================================================== */
.feat-case__head {
  max-width: 960px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.feat-case__title {
  margin: var(--space-sm) 0 0 0;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--text-primary);
}
.feat-case__context {
  margin: var(--space-md) 0 0 0;
  max-width: 78ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.feat-case__environment {
  margin: var(--space-md) 0 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}
.feat-case__environment-label {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-right: 0.4rem;
}
.feat-case__accent {
  font-style: normal;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
.feat-case__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.18em;
  background: linear-gradient(90deg, rgba(110, 190, 46, 0.0), rgba(110, 190, 46, 0.55) 20%, rgba(110, 190, 46, 0.55) 80%, rgba(110, 190, 46, 0.0));
  border-radius: 2px;
  z-index: -1;
}
.feat-case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

/* ---------- Growth chart panel ---------- */
.growth-chart {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
  border: 1px solid rgba(31, 63, 110, 0.18);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.10),
    0 24px 48px rgba(31, 63, 110, 0.06);
}
.growth-chart__caption {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.growth-chart__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.growth-chart__headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.growth-chart__sub {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 44ch;
}

.growth-chart__plot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.growth-chart__svg {
  width: 100%;
  height: clamp(220px, 30vw, 320px);
  display: block;
  overflow: visible;
}
.growth-chart__line {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  filter: drop-shadow(0 4px 12px rgba(31, 63, 110, 0.12));
}
.is-visible .growth-chart__line {
  animation: growth-draw 2400ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}
.growth-chart__area {
  opacity: 0;
  transition: opacity 900ms var(--easing) 1600ms;
}
.is-visible .growth-chart__area { opacity: 1; }

.growth-chart__dots circle {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 320ms var(--easing), transform 320ms var(--easing);
}
.is-visible .growth-chart__dots circle:nth-child(1) { opacity: 1; transform: scale(1); transition-delay: 600ms; }
.is-visible .growth-chart__dots circle:nth-child(2) { opacity: 1; transform: scale(1); transition-delay: 1000ms; }
.is-visible .growth-chart__dots circle:nth-child(3) { opacity: 1; transform: scale(1); transition-delay: 1400ms; }
.is-visible .growth-chart__dots circle:nth-child(4) { opacity: 1; transform: scale(1); transition-delay: 1800ms; }
.is-visible .growth-chart__dots circle:nth-child(5) { opacity: 1; transform: scale(1); transition-delay: 2200ms; }
@keyframes growth-draw {
  to { stroke-dashoffset: 0; }
}

.growth-chart__years {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.growth-chart__years li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.growth-chart__year-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.growth-chart__year-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.growth-chart__year-val--peak {
  color: var(--brand-green-hover);
}

/* ---------- Editorial story panel ---------- */
.feat-case__story {
  background: var(--bg-deep);
  border: 1px solid rgba(31, 63, 110, 0.18);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.10),
    0 24px 48px rgba(31, 63, 110, 0.06);
}
.feat-case__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  padding: 4px 12px;
  background: rgba(110, 190, 46, 0.10);
  color: var(--brand);
  border: 1px solid rgba(110, 190, 46, 0.35);
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feat-case__pull {
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--brand);
  padding-left: 1.125rem;
}
.feat-case__pull p {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.feat-case__pull em {
  font-style: italic;
  color: var(--brand);
}
.feat-case__stats {
  margin: var(--space-sm) 0 var(--space-md) 0;
  padding: var(--space-md) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feat-case__stats > div { display: flex; flex-direction: column; gap: 0.25rem; }
.feat-case__stats dt {
  order: 2;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.feat-case__stats dd {
  order: 1;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.feat-case__story .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 1000px) {
  .feat-case__grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .growth-chart__years {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    font-size: 0.6875rem;
  }
  .growth-chart__year-label { font-size: 0.625rem; letter-spacing: 0.08em; }
  .growth-chart__year-val { font-size: 0.8125rem; }
  .feat-case__stats { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
}

/* -----  METHODOLOGY  ----- */
.method__badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(110, 190, 46, 0.12);
  color: var(--brand-green-hover);
  border: 1px solid rgba(110, 190, 46, 0.40);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.method__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
@media (max-width: 800px) { .method__steps { grid-template-columns: 1fr 1fr; } }

/* 5-step version of the Conversion Stack (longer step copy needs more
   vertical room per cell; grid steps down through 5 → 3 → 2 → 1 cols). */
.method__steps--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .method__steps--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .method__steps--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .method__steps--five { grid-template-columns: 1fr; }
}
.method__step {
  padding: var(--space-md);
  border-left: 3px solid var(--brand-green);
  background: white;
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: 0 4px 12px rgba(26, 35, 51, 0.04);
}
.method__step-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xs);
}
.method__step h4 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.method__step p { color: var(--text-muted); font-size: 1rem; line-height: 1.5; }

/* -----  BOTTLENECK DIAGNOSTIC CARDS (Services page) ----- */
.bottleneck-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) { .bottleneck-grid { grid-template-columns: 1fr; } }

.bottleneck-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: white;
  border: 1px solid rgba(31, 63, 110, 0.18);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-base) var(--easing), border-color var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.08);
}
.bottleneck-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 63, 110, 0.45);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.08),
    0 14px 32px rgba(31, 63, 110, 0.14);
}
.bottleneck-card__symptom {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
}
.bottleneck-card__solution {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(0.9375rem, 1.3vw, 1rem);
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .bottleneck-card__solution { white-space: normal; font-size: 1.0625rem; }
}
.bottleneck-card__solution strong {
  color: var(--brand);
  font-weight: 700;
}

/* -----  PATTERN CARDS (Case Studies page closing section) ----- */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 1000px) { .pattern-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pattern-grid { grid-template-columns: 1fr; } }

.pattern-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: white;
  border: 1px solid rgba(31, 63, 110, 0.18);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--r);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.08);
}
.pattern-card__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.pattern-card__body {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Founder caption line under the About-page intro */
.founder-line {
  margin: var(--space-lg) 0 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-subtle);
}
.founder-line strong { color: var(--text-primary); font-weight: 700; }


/* -----  TESTIMONIALS  ----- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } }
.testimonial {
  padding: var(--space-lg);
  background: white;
  border: 1px solid rgba(31, 63, 110, 0.18);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.05),
    0 8px 24px rgba(31, 63, 110, 0.10),
    0 24px 48px rgba(31, 63, 110, 0.06);
  transition: transform var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(31, 63, 110, 0.08),
    0 14px 36px rgba(31, 63, 110, 0.14),
    0 28px 56px rgba(31, 63, 110, 0.08);
}
.testimonial__quote {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-primary);
  flex-grow: 1;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.testimonial__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-section), var(--border));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial__name {
  font-weight: 600;
  font-size: 0.9375rem;
  display: block;
}
.testimonial__role {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* -----  CTA SECTION  ----- */
.final-cta {
  text-align: center;
  padding-block: var(--space-3xl);
  background:
    radial-gradient(circle at 50% 0%, rgba(110, 190, 46, 0.12), transparent 50%),
    radial-gradient(circle at 20% 90%, var(--brand-glow-soft), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(110, 190, 46, 0.08), transparent 50%),
    var(--bg-surface);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.final-cta::before {
  /* Subtle dot-grid for premium texture, masked to the section center. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(31, 63, 110, 0.07) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  pointer-events: none;
}
.final-cta__title { margin-bottom: var(--space-md); }
.final-cta__qualifier {
  color: var(--text-subtle);
  font-size: 0.9375rem;
  margin-top: var(--space-lg);
}

/* -----  FOOTER  ----- */
.footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-top: 4px solid var(--brand-green);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer .nav__logo { color: white; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.75fr 1fr 1fr 1.6fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
  }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .footer__brand { grid-column: 1; }
  .footer__brand p { max-width: none; }
  .footer__col h4 { margin-bottom: var(--space-xs); }
}
.footer__col h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 244, 248, 0.55);
  margin-bottom: var(--space-sm);
}
.footer__col ul { list-style: none; padding: 0; }
.footer__col li { padding-block: 6px; }
.footer__col a { color: rgba(242, 244, 248, 0.75); transition: color var(--t-fast) var(--easing); }
.footer__col a:hover { color: white; }
.footer__brand p { color: rgba(242, 244, 248, 0.75); margin-block: var(--space-sm); max-width: 36ch; }
.footer__brand a[href^="mailto"] { color: rgba(242, 244, 248, 0.75) !important; }
.footer__brand a[href^="mailto"]:hover { color: white !important; }

/* Contact column — icons + social badges */
.footer__contact-list { list-style: none; padding: 0; margin: 0 0 var(--space-md) 0; }
.footer__contact-list li {
  padding-block: 6px;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: rgba(242, 244, 248, 0.78);
  line-height: 1.45;
}
.footer__contact-list a {
  color: rgba(242, 244, 248, 0.78);
}
.footer__contact-list a:hover { color: white; }
.footer__contact-icon {
  flex-shrink: 0;
  color: var(--brand-green);
  margin-top: 2px;
}
.footer__contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-green) !important;
  font-weight: 700;
  margin-bottom: var(--space-md);
  text-decoration: none;
  transition: gap var(--t-fast) var(--easing), color var(--t-fast) var(--easing);
}
.footer__contact-cta:hover {
  color: #FFFFFF !important;
  gap: 0.625rem;
}
.footer__social {
  display: flex;
  gap: 0.5rem;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(242, 244, 248, 0.70);
  transition: color var(--t-fast) var(--easing), border-color var(--t-fast) var(--easing), background var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}
.footer__social a:hover {
  background: rgba(110, 190, 46, 0.14);
  border-color: var(--brand-green);
  color: var(--brand-green);
  transform: translateY(-2px);
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(242, 244, 248, 0.12);
  color: rgba(242, 244, 248, 0.55);
  font-size: var(--fs-small);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
@media (max-width: 560px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}
.footer__bottom a { color: rgba(242, 244, 248, 0.75); }
.footer__bottom a:hover { color: white; }

/* -----  FORMS  ----- */
.form {
  display: grid;
  gap: var(--space-md);
  max-width: 580px;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__group { display: grid; gap: 0.375rem; }
.form__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.form__input, .form__select, .form__textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.875rem 1.125rem;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--t-fast) var(--easing), box-shadow var(--t-fast) var(--easing);
}
/* Allow grid cells to shrink below their content size so long
   <option> text inside selects doesn't push the form past the
   viewport on mobile. */
.form, .form__row, .form__group { min-width: 0; }
.form__input:hover, .form__select:hover, .form__textarea:hover {
  border-color: var(--brand);
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow-soft);
}
.form__hint {
  font-size: var(--fs-small);
  color: var(--text-subtle);
  margin-top: var(--space-sm);
}

/* Inline success card shown after a successful Formspree submission */
.form__success {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(110, 190, 46, 0.10) 0%, rgba(110, 190, 46, 0.04) 100%);
  border: 1px solid rgba(110, 190, 46, 0.35);
  text-align: center;
}
.form__success h3 {
  color: var(--brand);
  margin: 0 0 var(--space-sm) 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700;
}
.form__success p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 52ch;
}
.form__success p strong { color: var(--brand); }
.form__success a { color: var(--brand); font-weight: 600; }

/* -----  SERVICES PAGE  ----- */
.service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: stretch;
}
@media (max-width: 900px) {
  .service { grid-template-columns: 1fr; gap: var(--space-lg); }
  /* On mobile every service stacks image-first regardless of source order
     so the Copy block matches the VSL + Ads flow (image on top, text below). */
  .service__visual { min-height: 320px; order: -1; }
}
.service__visual {
  min-height: 480px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 30% 30%, rgba(110, 190, 46, 0.12), transparent 60%),
    radial-gradient(circle at 80% 80%, var(--brand-glow-soft), transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-md);
  box-shadow: 0 6px 20px rgba(26, 35, 51, 0.06);
  position: relative;
  overflow: hidden;
}
.service__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service__features {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  margin: var(--space-md) 0 var(--space-lg);
}
.service__features li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-muted);
}
.service__features li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand-accent);
  font-weight: 700;
}
.service__verticals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
}
.service__tag {
  padding: 0.25rem 0.625rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.service__price-floor {
  font-size: var(--fs-small);
  color: var(--text-subtle);
  margin-bottom: var(--space-md);
}

/* -----  TIMELINE (about page)  ----- */
.timeline {
  --timeline-line-x: 10.5rem;
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.timeline::before {
  content: '';
  position: absolute;
  left: var(--timeline-line-x);
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-green), var(--brand) 50%, transparent);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--timeline-line-x) 1fr;
  align-items: start;
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: var(--timeline-line-x);
  top: 0.9rem;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--brand-green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg-deep), 0 0 0 5px var(--border-strong), 0 0 24px rgba(110, 190, 46, 0.45);
  z-index: 1;
}
.timeline__year {
  grid-column: 1;
  text-align: right;
  padding: 0.5rem 1.75rem 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.timeline__title {
  grid-column: 2;
  padding-left: 1.75rem;
  margin: 0 0 0.625rem 0;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.timeline__subtitle {
  grid-column: 2;
  padding-left: 1.75rem;
  margin: 0 0 var(--space-sm) 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--brand);
  font-style: italic;
  max-width: 60ch;
}
.timeline__body {
  grid-column: 2;
  padding-left: 1.75rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 1.1875rem;
  line-height: 1.65;
  text-wrap: pretty;
  max-width: 60ch;
}
.timeline__body + .timeline__body { margin-top: var(--space-sm); }
@media (max-width: 760px) {
  .timeline { --timeline-line-x: 0.5rem; }
  .timeline__item { grid-template-columns: 1fr; padding-left: 2.25rem; }
  .timeline__item::before { left: 0.5rem; }
  .timeline__year,
  .timeline__title,
  .timeline__subtitle,
  .timeline__body {
    grid-column: 1;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .timeline__year { padding-top: 0; margin-bottom: 0.5rem; }
}

/* -----  REVEAL ANIMATION (used by JS)  ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-slow) var(--easing), transform var(--t-slow) var(--easing);
}

/* -----  ACCESSIBILITY  ----- */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
  .hero__asset::before { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* -----  PAGE HERO (subpages)  ----- */
.page-hero {
  padding-top: calc(var(--space-3xl) + 4rem);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--border);
}
.page-hero__title { max-width: 18ch; margin-block: var(--space-sm) var(--space-md); }
/* When .page-hero is also .section--alt (dark navy band), drop the light
   gray bottom border (would clash on dark bg) and ensure the lede reads
   in white. The h1/eyebrow are already handled by the .section--alt
   text overrides for direct-child elements of .reveal. */
.page-hero.section--alt { border-bottom: 0; }
.page-hero.section--alt .lede { color: rgba(255, 255, 255, 0.85); }

/* Compact-height hero for internal pages that use the full-bleed media pattern.
   Inherits all .hero styling (overlay, light text, etc.) — just shorter. */
.hero--compact {
  min-height: min(58vh, 560px);
}

/* =====================================================================
   COLOR EXPERIMENT — Dark navy .section--alt theme
   To revert: delete this whole block (or restore .section--alt original
   rule above — was `background: var(--bg-section)`).
   ===================================================================== */
.section--alt {
  background: var(--bg-dark);
}
/* Loose section-header text inside the container (not inside white cards).
   Uses direct-child `>` so we don't bleed into card content like .method__step
   (whose wrapper grid also carries the .reveal class for scroll-fade-in). */
.section--alt > .container > .reveal > h1,
.section--alt > .container > .reveal > h2,
.section--alt > .container > .reveal > h3,
.section--alt > .container > .reveal > h4,
.section--alt > .container > .reveal > p,
.section--alt > .container > .reveal > strong,
.section--alt > .container > .reveal > span {
  color: #FFFFFF !important;
}
.section--alt > .container > .reveal > .eyebrow {
  color: var(--brand-green) !important;
}
/* Methodology pill — stronger green chip on dark bg */
.section--alt > .container > .reveal > .method__badge {
  background: rgba(110, 190, 46, 0.20);
  border-color: rgba(110, 190, 46, 0.55);
  color: var(--brand-green) !important;
}
/* Loose links in section-header areas */
.section--alt > .container > .reveal > a {
  color: var(--brand-green) !important;
}
/* Case-study chapter headers (numbered 01–04 on case-studies.html) */
.section--alt > .container > .case-chapter .case-chapter__num,
.section--alt > .container > .case-chapter .case-chapter__title {
  color: #FFFFFF !important;
}
.section--alt > .container > .case-chapter .case-chapter__eyebrow {
  color: var(--brand-green) !important;
}

/* Service block sitting inside a dark .section--alt (e.g. copywriting service) */
.section--alt .service .eyebrow { color: var(--brand-green) !important; }
.section--alt .service h2 { color: #FFFFFF !important; }
.section--alt .service p { color: rgba(255, 255, 255, 0.80) !important; }
.section--alt .service strong { color: #FFFFFF !important; }
.section--alt .service .service__features li { color: rgba(255, 255, 255, 0.88); }
.section--alt .service .service__features li::before { color: var(--brand-green); }
.section--alt .service .service__tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
.section--alt .service .service__price-floor { color: rgba(255, 255, 255, 0.65); }

/* =====================================================================
   ABOUT PAGE — Journey numbered cards + Founder Quote
   ===================================================================== */

/* Stacked journey cards (4 .case-hero items) — even gap between them */
.journey-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Numbered indicator inside each journey card content panel */
.journey-num {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand-green);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Italic, brand-colored lede line right under the journey card title */
.journey-lede {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--brand) !important;
  font-style: italic;
  margin: 0 0 var(--space-sm) 0 !important;
  max-width: 56ch;
}

/* Journey card body paragraphs slightly tighter than default case-hero */
.case-hero .case-hero__content > p {
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* About — Founder Quote (pull-quote on dark band) */
.founder-quote {
  position: relative;
  text-align: center;
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
}
/* Giant decorative opening quote mark behind the eyebrow */
.founder-quote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(12rem, 22vw, 20rem);
  line-height: 0.85;
  color: var(--brand-green);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.founder-quote > * { position: relative; z-index: 1; }

.founder-quote .eyebrow {
  color: var(--brand-green) !important;
  display: block;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* The actual quote — italic, large, balanced wrap */
.founder-quote__text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.42;
  letter-spacing: -0.014em;
  color: #FFFFFF !important;
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  max-width: 28ch;
  text-wrap: balance;
}

/* Attribution with horizontal rule accent on each side */
.founder-quote__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-style: normal;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: 90%;
}
.founder-quote__attribution::before,
.founder-quote__attribution::after {
  content: "";
  flex: 0 0 2.5rem;
  height: 1px;
  background: rgba(110, 190, 46, 0.55);
}
.founder-quote__role {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.875rem;
  margin-left: 0.25rem;
}

/* Supporting paragraph below the quote */
.founder-quote__support {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto;
}
.founder-quote__support strong { color: #FFFFFF !important; }

/* Prominent closing statement with brand-green accent rule above */
.founder-quote__statement {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: #FFFFFF !important;
  position: relative;
}
.founder-quote__statement::before {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--brand-green);
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Mobile: stack attribution rules vertically if cramped, tighten paddings */
@media (max-width: 640px) {
  .founder-quote__attribution { gap: 0.625rem; flex-wrap: wrap; }
  .founder-quote__attribution::before,
  .founder-quote__attribution::after { flex-basis: 1.5rem; }
  .founder-quote__role { display: block; flex-basis: 100%; margin-left: 0; margin-top: 0.25rem; }
  .founder-quote__text { max-width: none; }
}