/* ============================================
   StreetTalk Landing Page — Brand Kit v1.1
   Colors, type, and spacing matched to reference-lp1 (source of truth)
   ============================================ */

/*
  ⚠️ FONT SYSTEM STATUS — READ BEFORE TOUCHING TYPE ⚠️
  --font-body  → 'TikTok Sans' IS genuinely loading, via the Google Fonts
                 <link> tags in <head>. This one is real and live.
  --font-display → references 'Superscore', which is NOT embedded anywhere
                 in this project. Superscore is an Adobe Fonts (Typekit)
                 license — there is no public CDN link for it like Google
                 Fonts provides. Right now every h1/h2/h3 and every element
                 using --font-display is SILENTLY FALLING BACK to
                 'Arial Narrow' / 'TikTok Sans' / Arial. Nothing is broken,
                 but nothing "Superscore" is actually rendering on this page
                 today — do not assume it's live just because the variable
                 name says Superscore.

  To make Superscore real, exactly one of these needs to happen, and which
  one depends on how the font is licensed:
    - Adobe Creative Cloud plan → create an Adobe Fonts web project
      containing Superscore, then drop its embed <link> (or <script>) tag
      into <head> BEFORE this stylesheet, e.g.:
        <link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
    - Standalone/foundry license (e.g. via Swell Type) → self-host the
      licensed .woff2 file(s) in this project and declare it with
      @font-face, then it can be referenced as 'Superscore' below.
  Until one of those is wired in, treat --font-display as "Arial Narrow /
  TikTok Sans, styled to read as a display face" — a placeholder, not a
  substitute font choice.

  ROLE SYSTEM — pattern: display font = big numbers + headlines, body font
  = everything else.
    --font-body (TikTok Sans): body copy (weight 500) · buttons, small
      caps kicker/step labels (weight 700) · small pill badges like the
      AGC-card verbs (weight 800).
    --font-display (Superscore → currently Arial Narrow fallback): h1/h2/h3
      section headlines, plus every big bold stat numeral (hero stats,
      case-study stats, process stat band, proven-results percentages) —
      always weight 900, uppercase, letter-spacing -0.01em. Applied once
      via the shared selector list below; component rules only add their
      own font-size/color.

  WORDMARK NOTE — the "StreetTalk" logo used in the header/footer is an
  image file (streettalklogos/Logo_SingleLine-White.png), not text set in
  any font. Don't try to recreate it with CSS/font styling.
*/

:root {
  --ink: #1A1A1A;
  --white: #FFFFFF;
  --blue: #4242D7;
  --blue-dark: #2828BD;
  --blue-light: #6B6BE0;
  --blue-lightest: #C0C0F2;
  --sky: #333333;
  --sky-dim: #666666;

  --bg-white: #FFFFFF;
  --bg-alt: #F2F2F2;
  --surface-1: #F2F2F2;
  --surface-2: #F7F7F9;
  --border-dim: rgba(0, 0, 0, 0.1);

  --font-body: 'TikTok Sans', Arial, sans-serif;
  --font-display: 'Superscore', 'Arial Narrow', 'TikTok Sans', Arial, sans-serif;

  --container-max: 1180px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-white);
  color: var(--sky);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Display-font role: big headlines + big bold stat numerals share one
   treatment — weight 900, uppercase, tight tracking. Component rules below
   only add size/color/spacing that's specific to their placement. */
h1, h2, h3,
.hero-stat-num,
.story-stat-num,
.stat-tile-num,
.proven-stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blue);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.text-blue { color: var(--blue); }

/* ============ Section head (centered narrow column, matches reference-lp1) ============ */
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.section-headline {
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.section-subhead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sky);
  font-weight: 400;
  margin: 0;
}

section { padding: 64px 0; border-top: 1px solid rgba(0, 0, 0, 0.08); }

/* ============ Section background alternation (white / light gray) ============ */
.hero { background: var(--bg-white); }
.trust-strip { background: var(--bg-alt); }
.captured-content { background: var(--bg-white); }
.use-cases { background: var(--bg-alt); }
.why-agc { background: var(--bg-white); }
.case-studies { background: var(--bg-alt); }
.process { background: var(--bg-white); }
.proven-results { background: var(--bg-alt); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 14px 26px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
}

.btn-primary:hover { transform: translateY(-2px); background: var(--blue-dark); }

.cta-row { text-align: center; margin-top: 32px; }

/* ============ Placeholder photo treatment ============ */
.placeholder-photo {
  position: relative;
  background:
    linear-gradient(135deg, rgba(66, 66, 215, 0.18), rgba(66, 66, 215, 0.04)),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 2px, transparent 2px 12px);
  background-color: var(--surface-2);
  border: 1px solid var(--border-dim);
  overflow: hidden;
}

.placeholder-photo::after {
  content: "IMAGE PLACEHOLDER";
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  pointer-events: none;
}

.placeholder-photo > i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: var(--blue-light);
}

/* ============================================
   STICKY HEADER
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: 14px 16px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px 10px 10px 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

.header-logo { flex-shrink: 0; min-width: 0; }
.header-logo img { height: 20px; width: auto; }

@media (min-width: 640px) {
  .header-logo img { height: 26px; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-small { padding: 10px 18px; font-size: 13px; min-height: 44px; }

.btn.header-cta { padding: 10px 16px; font-size: 13px; }

@media (min-width: 640px) {
  .btn.header-cta { padding: 10px 18px; }
}

/* ============================================
   HERO
   ============================================ */
.hero { padding-top: 36px; border-top: none; }

.hero-copy { text-align: left; }

.hero-headline {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 18px;
  color: var(--sky);
}

.hero-headline-sub {
  display: block;
  font-size: 22px;
  margin-top: 8px;
  color: var(--blue);
}

@media (min-width: 640px) {
  .hero-headline { font-size: 44px; }
  .hero-headline-sub { font-size: 27px; }
}

@media (min-width: 960px) {
  .hero-headline { font-size: 56px; }
  .hero-headline-sub { font-size: 32px; }
}

.hero-body {
  font-size: 14px;
  color: var(--sky-dim);
  max-width: 460px;
  margin: 0 0 28px;
  line-height: 1.6;
  text-wrap: balance;
}

.tm {
  font-size: 0.45em;
  vertical-align: super;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- hero stats block: one shared 2x3 street-interview photo grid behind
   all 3 stat cards, cards stacked on top as overlay bands (not 3 separate
   grids) ---- */
.hero-stats {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-dim);
  overflow: hidden;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.hero-stats-photos {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
}

.hero-stats-photos .ph-tile {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}

.hero-stats-photos .ph-tile-top-face { object-position: center 70%; }
.hero-stats-photos .ph-tile-top-face--tight { object-position: center 60%; }

.hero-stats-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.3), rgba(5, 5, 5, 0.45));
  pointer-events: none;
}

.hero-stat-row {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .hero-stat-row { min-height: 160px; }
}

/* Solid blue-purple box per stat, sized to its content (not a full-width
   band) so it reads as one compact callout sitting on a single photo
   underneath, instead of bleeding across neighboring photo cells. */
.hero-stat-overlay {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  min-width: 200px;
  padding: 10px 20px;
  background: var(--blue);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.25);
}

.hero-stat-num {
  font-size: 34px;
  color: var(--white);
  line-height: 1.1;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

@media (min-width: 640px) {
  .hero-stat-num { font-size: 40px; }
}

.hero-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: none;
}

/* ============================================
   TRUST LOGO STRIP
   ============================================ */
.trust-strip { padding: 40px 0 32px; }

.trust-strip-label {
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
  margin: 0 0 24px;
}

@media (min-width: 640px) {
  .trust-strip-label { font-size: 20px; }
}

.logo-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: marquee 20s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Each logo mark is cropped tight to its own visible content (measured
   per-file, since every brand PNG/WebP carries a different amount of
   baked-in transparent padding) via background-size/position, so every
   mark reads at a consistent visual height and the marquee gap (44px,
   untouched) reads as even spacing between marks — not between bounding
   boxes that vary wildly in blank space. */
.logo-mark {
  display: block;
  flex-shrink: 0;
  opacity: 0.85;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

.logo-mark--gruns       { width: 83px;  height: 34px; background-image: url('../clientlogosmain/gruns.webp');       background-size: 83px 34px;   background-position: 0 0; }
.logo-mark--stripe      { width: 82px;  height: 34px; background-image: url('../clientlogosmain/stripe.webp');      background-size: 82px 34px;   background-position: 0 0; }
.logo-mark--ridge       { width: 89px;  height: 26px; background-image: url('../clientlogosmain/ridge.png');       background-size: 185px 58px;  background-position: -48px -16px; }
.logo-mark--chomps      { width: 77px;  height: 26px; background-image: url('../clientlogosmain/chomps.png');      background-size: 96px 64px;   background-position: -11px -19px; }
.logo-mark--olly        { width: 78px;  height: 26px; background-image: url('../clientlogosmain/olly.webp');       background-size: 81px 26px;   background-position: -2px 0; }
.logo-mark--harrys      { width: 121px; height: 22px; background-image: url('../clientlogosmain/harrys.png');      background-size: 156px 102px; background-position: -17px -39px; }
.logo-mark--lume        { width: 60px;  height: 44px; background-image: url('../clientlogosmain/lume.png');        background-size: 116px 44px;  background-position: -26px 0; }
.logo-mark--rover       { width: 101px; height: 34px; background-image: url('../clientlogosmain/rover.webp');      background-size: 101px 34px;  background-position: 0 0; }
.logo-mark--our-place   { width: 106px; height: 26px; background-image: url('../clientlogosmain/our place.png');   background-size: 113px 64px;  background-position: -3px -19px; }
.logo-mark--birkenstock { width: 159px; height: 26px; background-image: url('../clientlogosmain/birkenstock.png'); background-size: 159px 89px;  background-position: 0 -32px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 22px)); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; overflow-x: auto; }
}

/* ============================================
   VIDEO SLIDER (Vimeo) — one card mounted/visible at a time, portrait 9:16,
   card chrome matched to .captured-thumb (radius/border/bg)
   ============================================ */
.video-slider-wrap { display: flex; flex-direction: column; align-items: center; }

.video-slider-viewport {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.video-slide { position: relative; display: none; }
.video-slide.is-active { display: block; }

.video-slide-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: none;
  background: var(--bg-white);
}

.video-slide-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Sits above the iframe to catch taps — a cross-origin Vimeo iframe won't
   reliably deliver click events to the parent page. */
.video-tap-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  cursor: pointer;
}

.video-play-btn {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(5, 5, 5, 0.55);
  color: var(--white);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.video-play-btn i.ph-play { margin-left: 2px; }

.video-play-btn:hover { background: var(--blue); border-color: var(--blue); }

/* Category pill(s), top-right of each video — same treatment as the
   top-left category pill on the hero video carousel, just flipped. Both
   pills live in a flex column so the second one sits a fixed 8px below the
   first regardless of text length; pointer-events stay off the stack so
   taps still reach .video-tap-overlay underneath. */
/* Logo badge (top-left) and category pill(s) (top-right) live in one shared
   row with align-items: flex-end, so their bottom edges always line up
   regardless of how tall any individual logo or pill happens to be — no
   hand-tuned pixel offsets needed per logo. */
.video-badges-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.video-pill-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 60%;
  margin: 10px 10px 0 0;
  pointer-events: none;
}

.video-pill-stack--left {
  align-items: flex-start;
  margin: 10px 0 0 10px;
}

/* Client logo badge, top-left — same pill chrome as the category pill, just
   holding a logo mark instead of text. Every source logo gets forced to
   solid white via filter so it reads consistently on the blue-purple fill
   regardless of the source file's original color. Flush against the
   frame's left edge and flat on the left/top corners, rounded only on the
   right (a "tab" shape, not a floating pill). */
.video-logo-badge {
  background: var(--blue);
  border: none;
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.12);
  padding: 8px 14px 8px 12px;
  min-height: 38px;
  box-sizing: border-box;
  border-radius: 0 100px 100px 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.video-logo-badge img {
  height: 22px;
  width: auto;
  max-width: 112px;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Some source files carry a lot of baked-in transparent padding around the
   mark, so a plain height cap alone left them reading far smaller/larger
   than the other logos. These crop tight to each file's actual measured
   content (background-size/position) instead of just scaling the whole
   padded image. */
.video-logo-mark {
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
}

.video-logo-mark--gruns        { width: 64px; height: 24px; background-image: url('../videoclientlogos/gruns.png');        background-size: 66px 37px; background-position: -1px -7px; }
.video-logo-mark--birkenstock  { width: 98px; height: 16px; background-image: url('../videoclientlogos/birkenstock.png'); background-size: 98px 55px; background-position: 0 -19px; }
.video-logo-mark--paleovalley  { width: 103px; height: 22px; background-image: url('../videoclientlogos/paleovalley.png'); background-size: 105px 30px; background-position: -1px -3px; }

.video-category-pill {
  width: auto;
  height: auto;
  max-width: 100%;
  background: var(--blue);
  border: none;
  box-shadow: 0 8px 24px rgba(5, 5, 5, 0.06);
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.video-category-pill i { font-size: 12px; line-height: 1; }

/* ============================================
   HOW CONSUMER BRANDS USE AGC
   ============================================ */
.use-cases { padding-top: 40px; }

.use-case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.use-case-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  background: var(--bg-white);
}

.use-case-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  border: none;
}

.use-case-thumb::after { content: none; }
.use-case-thumb i { position: static; transform: none; font-size: 18px; color: var(--white); }

.use-case-text { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.use-case-title { font-weight: 700; font-size: 15px; }
.use-case-desc { font-size: 13px; color: var(--sky-dim); }

/* ============================================
   WHY AGC (mirrors reference-lp1 exactly)
   ============================================ */
.agc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .agc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.agc-card {
  background: var(--bg-white);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}

.agc-card--highlight {
  background: var(--blue);
  border: 1px solid var(--blue-dark);
}

.agc-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}

.agc-card-verb {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sky-dim);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-dim);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.agc-card--highlight .agc-card-name { color: var(--white); }

.agc-card--highlight .agc-card-verb {
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.agc-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agc-card-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sky);
  font-weight: 400;
}

.agc-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--sky-dim);
}

.agc-card--highlight .agc-card-list li {
  color: var(--white);
}

.agc-card--highlight .agc-card-list li::before {
  background: var(--white);
}

.agc-summary {
  max-width: 760px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sky);
  font-weight: 400;
}

@media (min-width: 640px) {
  .agc-summary { font-size: 18px; }
}

/* ============================================
   CASE STUDIES — swipeable story cards
   (format/behavior matched to the VSL landing page: one card visible at a
   time on mobile, fixed card height so the stats row always lands in the
   same place, prev/next arrows, scroll-snap carousel)
   ============================================ */
.stories-carousel-wrap { position: relative; }

@media (min-width: 640px) {
  .stories-carousel-wrap { max-width: 960px; margin: 0 auto; }
}

.stories-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px;
  scrollbar-width: none;
}

.stories-track::-webkit-scrollbar { display: none; }

.story-card {
  flex: 0 0 100%;
  width: 100%;
  height: 520px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 640px) {
  .story-card { flex: 0 0 470px; width: 470px; height: 424px; padding: 22px 34px; }
}

.story-logo {
  flex: 0 0 auto;
  width: 140px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.story-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  filter: brightness(0);
}

.story-desc {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sky);
  margin: 0;
  font-weight: 400;
}

.story-stats {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  padding-right: 6px;
  border-top: 1px solid var(--border-dim);
}

.story-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story-stat-num--mixed-case { text-transform: none; }

.story-stat-num {
  font-size: 22px;
  color: var(--blue);
  white-space: nowrap;
}

.story-stat-label {
  font-size: 13px;
  color: var(--sky-dim);
  font-weight: 500;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .story-stat {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 12px;
    align-items: baseline;
  }
  .story-stat-num { font-size: 24px; }
  .story-stat-label { font-size: 15px; }
}

.stories-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.story-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-dim);
  background: var(--bg-white);
  color: var(--ink);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.story-arrow:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ============================================
   STEPPER (Process)
   ============================================ */
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.stepper-item {
  display: flex;
  gap: 18px;
  padding-bottom: 28px;
  position: relative;
}

.stepper-item:last-child { padding-bottom: 0; }

.stepper-item::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 1px;
  border-left: 2px dotted var(--blue-light);
  opacity: 0.5;
}

.stepper-item:last-child::before { display: none; }

.stepper-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
  font-size: 20px;
  z-index: 1;
}

.stepper-text { display: flex; flex-direction: column; padding-top: 6px; gap: 2px; }
.stepper-step-num { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.stepper-title { font-size: 17px; font-weight: 800; text-transform: uppercase; }
.stepper-desc { font-size: 13px; color: var(--sky-dim); max-width: 360px; margin-top: 2px; }

/* ============================================
   PROCESS STAT BAND
   ============================================ */
.stat-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 36px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  background: var(--bg-alt);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 10px 4px;
}

.stat-tile i { font-size: 32px; color: var(--blue-light); }
.stat-tile-icon { width: 32px; height: 32px; color: var(--blue-light); }
.stat-tile-num { font-size: 20px; }
.stat-tile-label { font-size: 10.5px; color: var(--sky-dim); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; }

/* ============================================
   PROVEN RESULTS
   ============================================ */
.proven-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
  margin-bottom: 28px;
}

.proven-stat { display: flex; flex-direction: column; }
.proven-stat-num { font-size: 42px; line-height: 1; }
.proven-stat-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sky-dim); margin-top: 4px; }

.note-box {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: 18px;
  background: var(--bg-white);
}

.note-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
}

.note-box p { margin: 0; font-size: 13px; color: var(--sky-dim); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border-dim);
  text-align: center;
  background: var(--bg-white);
}

.footer-logo { height: 18px; margin: 0 auto 12px; }
.footer-copy { font-size: 12px; color: var(--sky-dim); margin: 0; }

/* ============================================
   BOOK YOUR CALL MODAL
   (matches reference-lp1 exactly — same HubSpot embed, same modal chrome)
   ============================================ */
.book-call-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  overflow-y: auto;
  padding: 24px 16px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.book-call-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.book-call-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(4px);
}

.book-call-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  padding: 44px 20px 24px;
}

@media (min-width: 640px) {
  .book-call-modal-panel { padding: 48px 32px 32px; }
}

.book-call-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.book-call-modal-close:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

.hs-form-frame { width: 100%; }

/* ============================================
   DESKTOP / TABLET BREAKPOINTS
   ============================================ */
@media (min-width: 640px) {
  .section-headline { font-size: 26px; }
}

@media (min-width: 720px) {
  .use-cases .container { max-width: 900px; }

  .use-case-row { padding: 22px; }

  .stat-band { grid-template-columns: repeat(4, 1fr); }

  .proven-stats { flex-direction: row; justify-content: space-between; align-items: flex-start; text-align: left; }
}

@media (min-width: 1000px) {
  .hero .container { display: flex; align-items: center; gap: 48px; }
  .hero-copy { flex: 1; }
  .hero-media { flex: 1; display: flex; flex-direction: column; gap: 20px; }

  .use-case-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .process .stepper { max-width: 640px; }
}

/* ============================================
   DESKTOP (≥1024px) — additive only. Nothing below this point overrides or
   narrows a rule that also applies under 1024px; every mobile/tablet
   breakpoint above (640/720/768/1000px) is left exactly as it was. Copy,
   images, and section order are unchanged — this is layout/spacing only.
   ============================================ */
@media (min-width: 1024px) {
  /* ---- Header: a little more breathing room in the wide pill bar ---- */
  .header-inner { padding: 12px 12px 12px 28px; }
  .btn.header-cta { padding: 12px 24px; font-size: 14px; }

  /* ---- Hero: more generous side-by-side proportions and copy width.
     Also re-places the CTA button under the body copy (left column)
     instead of under the photo grid — .hero-copy/.hero-media become
     display:contents so their children can be placed independently on a
     grid, without touching the HTML or mobile's stacked order. ---- */
  .hero { padding-top: 64px; }
  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 72px;
    row-gap: 16px;
    align-items: start;
  }
  .hero-copy, .hero-media { display: contents; }
  .hero-headline { grid-column: 1; grid-row: 1; }
  .hero-body { grid-column: 1; grid-row: 2; font-size: 16px; max-width: 440px; }
  .hero .cta-row { grid-column: 1; grid-row: 3; margin-top: 8px; text-align: left; }
  .hero-stats { grid-column: 2; grid-row: 1 / 4; width: 100%; max-width: 460px; margin-left: auto; margin-bottom: 0; }

  /* ---- Trust strip: a bit more vertical room at this width ---- */
  .trust-strip { padding: 56px 0 40px; }

  /* ---- Captured Content video slider: show the active slide AND the one
     right after it side-by-side, instead of one at a time. The JS still
     only ever toggles .is-active on a single slide (mobile behavior is
     completely untouched) — this just also reveals its next sibling via a
     pure CSS adjacent-sibling selector, so the existing preload-the-next-
     video logic already lines up with what's shown. */
  .video-slider-viewport { max-width: 660px; display: flex; gap: 20px; }
  .video-slide { flex: 0 0 320px; width: 320px; }
  .video-slide.is-active + .video-slide { display: block; }

  /* ---- How Consumer Brands Use AGC: proper 3-col desktop grid instead of
     a 2-col grid stretched wide ---- */
  .use-cases .container { max-width: 1100px; }
  .use-case-list { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  /* ---- Why AGC: a touch more breathing room between cards ---- */
  .agc-grid { max-width: 1080px; gap: 28px; }
  .agc-card { padding: 32px 28px; }

  /* ---- Case studies: keep the carousel mechanic, but size the wrapper to
     exactly fit 2 cards + the gap between them (500*2 + 20), so the 3rd
     card doesn't peek in at the edge. ---- */
  .stories-carousel-wrap { max-width: 1020px; }
  .story-card { flex: 0 0 500px; width: 500px; }

  /* ---- Process: stepper and stat band side-by-side instead of fully
     stacked, now that there's room ---- */
  .process .container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; }
  .process .section-head { flex: 0 0 100%; }
  .process .stepper { flex: 1 1 420px; max-width: 460px; margin-top: 8px; }
  .stat-band { flex: 1 1 480px; margin-top: 8px; }

  /* ---- Proven results: wider spread now that the row has more room ---- */
  .proven-results .container { max-width: 1100px; }
  .proven-stats { gap: 0; }
  .proven-stat-num { font-size: 48px; }

  /* ---- Footer: match the wider container used elsewhere on desktop ---- */
  .site-footer .container { max-width: 1100px; }
}
