/* ═══════════════════════════════════════════
   COOK FOR ME — styles.css
   ═══════════════════════════════════════════ */

:root {
  --yellow:  #F2CC4F;
  --dark:    #1E1A14;
  --red:     #E84C2B;
  --cream:   #F5EDD6;
  --white:   #FFFFFF;

  --font-display: 'Bebas Neue', cursive;
  --font-body:    'DM Sans', sans-serif;
  --font-italic:  'Playfair Display', serif;
  --font-geist:   'Geist', sans-serif;   /* FORMAT copy, to match the overview PDF */
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;   /* iOS Safari: don't inflate text & break alignment */
          text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--yellow);
  overflow-x: hidden;
}

/* ─── LENIS smooth scroll (native scroll-behavior would fight it) ─── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ─── PRELOADER ─── */
.preloader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;           /* match the VISIBLE area (excludes the iOS/Chrome URL bar)
                               so Sam + the title centre where the user actually sees,
                               not behind the address bar. Body is yellow, so any strip
                               behind a transient bar stays on-brand. */
  z-index: 9000;            /* covers everything EXCEPT the hero title */
  background: var(--yellow);
  will-change: opacity;
}
.preloader--done { pointer-events: none; }
/* Sam holding the $100s, floating just above the one-line COOK FOR ME on the
   curtain. The radial mask feathers his silhouette (and the cropped torso at
   the bottom) so he melts into the yellow instead of reading as a hard cutout.
   He fades out the moment the morph begins (tween in main.js). */
.preloader__sam {
  position: absolute;
  left: 50%;
  bottom: 50%;                       /* bottom edge anchored to viewport centre; */
  height: clamp(95px, 19vh, 220px);
  height: clamp(95px, 19dvh, 220px); /* dvh: don't oversize Sam when the iOS bar shows. JS owns the transform (translate -50%/-64px */
  width: auto;                       /* + the zoom-in scale) so the two don't clash */
  opacity: 0;                        /* GSAP zooms + fades him in once he's decoded */
  transform-origin: 50% 58%;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 44%, #000 56%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 72% 80% at 50% 44%, #000 56%, rgba(0,0,0,0) 100%);
}

/* While loading, the real hero title shows as ONE centred line above the
   curtain ("COOK FOR ME"); on load GSAP Flip morphs it into its natural
   two-line hero position — so the intro text warps into the landing title. */
body.is-loading { overflow: hidden; }
body.is-loading .hero__title { visibility: hidden; }   /* hidden until JS measures + sets the one-line transform */
/* keep the title above the (still-fading) curtain during the morph */
body.is-morphing .hero__title { position: relative; z-index: 9500; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* ─── NAV ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 48px;
  padding-top: max(18px, env(safe-area-inset-top));   /* clear the iOS notch / status bar */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.scrolled {
  background: var(--yellow);
  box-shadow: 0 2px 20px rgba(30, 26, 20, 0.1);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--dark);
}
.nav__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
/* Sam avatar (top-right) with the socials always visible to its left.
   Hovering the avatar still zooms + tilts it. */
.nav__social {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--dark);
  order: 2;   /* desktop: sits on the right (after the action buttons) */
}
.nav__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav__social:hover .nav__avatar,
.nav__social:focus-within .nav__avatar {
  transform: scale(1.08) rotate(-9deg);   /* zoom + tilt left when socials appear */
}

.nav__social-icons {
  position: absolute;
  right: 100%;
  padding-right: 16px;   /* breathing room between the icons and the avatar */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 16px;
  align-items: center;
  white-space: nowrap;
}
.nav__social-icons a {
  color: var(--dark);
  opacity: 0.65;
  transition:
    opacity 0.3s ease,
    color   0.3s ease;
}
.nav__social-icons a:hover { opacity: 1; color: var(--red); }

/* Mobile nav toggle (hamburger). On desktop it's hidden and .nav__menu is
   display:contents, so actions + social lay out as direct flex children of
   .nav__inner exactly as before (no desktop change, no link duplication). */
.nav__toggle { display: none; }
.nav__menu { display: contents; }

/* Pills */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition:
    box-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform  0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.btn--outline {
  border: 1.5px solid var(--dark);
  color: var(--dark);
  background: transparent;
  box-shadow:
    var(--dark) 0px 2px 0px,
    var(--dark) 0px 4px 0px,
    var(--dark) 0px 6px 0px;
}
.btn--outline:hover {
  transform: translateY(6px);
  box-shadow: none;
}
.btn--filled {
  background: var(--red);
  color: var(--white);
  border: 1.5px solid var(--red);
  box-shadow:
    #a83318 0px 2px 0px,
    #a83318 0px 4px 0px,
    #a83318 0px 6px 0px;
}
.btn--filled:hover {
  transform: translateY(6px);
  box-shadow: none;
}
.btn--dark {
  background: var(--dark);
  color: var(--cream);
  border: 1.5px solid var(--dark);
  box-shadow:
    #000 0px 2px 0px,
    #000 0px 4px 0px,
    #000 0px 6px 0px;
}
.btn--dark:hover {
  transform: translateY(6px);
  box-shadow: none;
}

/* ─── SECTION LABELS ─── */
.section-label {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.5;
  display: block;
  margin-bottom: 32px;
}
.section-label--light {
  color: var(--cream);
  opacity: 0.6;
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;   /* iOS Safari: track the dynamic viewport (address bar) */
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 100px 48px 60px;
}
/* Sam in a polaroid — rests angled at the title's right edge, full opacity.
   It slides out from BEHIND the "COOK FOR ME" text toward the right during the
   intro (tween in runMorph); title/tagline get z-index:2 so it tucks under them. */
.hero__text { position: relative; }
.hero__sam-polaroid {
  position: absolute;
  top: -30px;
  left: calc(46% + 10px);   /* the pocket beside "COOK": clear of the photo cluster, its
                               lower edge dipping behind the top of "ME" (glyphs paint above) */
  width: 190px;
  padding: 10px 10px 36px;
  background: var(--white);
  box-shadow: 0 16px 44px rgba(30, 26, 20, 0.26);
  transform: rotate(12deg);   /* resting angle — the intro tween must land on this */
  z-index: 1;                 /* under the title/tagline (z2), above the hero bg */
  pointer-events: none;
  user-select: none;
}
.hero__sam-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 150 / 190;          /* same window ratio as the photo polaroids */
  background: var(--yellow);
  object-fit: cover;                 /* a real photo — fill the whole frame */
  object-position: center top;       /* anchor up top so there's headroom above his head */
}
/* The title + tagline paint ABOVE Sam's polaroid (z2 > z1), so they'd otherwise
   swallow hover over the lower half of the card. They're not interactive, so let
   pointer events fall THROUGH to the polaroid — the whole card becomes hoverable
   while still sitting visually behind the text. */
.hero__title,
.hero__tagline { pointer-events: none; }
.hero__inner {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  gap: 40px;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(100px, 16vw, 240px);
  line-height: 0.88;
  color: var(--dark);
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  /* size each word to its TEXT (not full title width) so its box aspect ratio
     matches the one-line loading state — keeps the Flip morph a uniform scale
     (no horizontal stretch). */
  align-items: flex-start;
  /* shrink-wrap the box to the widest word so the byline can anchor to the
     right edge of "FOR ME"; relative for the absolute byline child */
  position: relative;
  z-index: 2;                 /* above the Sam polaroid tucked behind the text */
  width: max-content;
}
/* tiny attribution under the big title — absolutely positioned so it sits
   outside the flow and never touches the Flip morph (which only transforms
   the .hero__word elements, not this box) */
.hero__byline {
  position: absolute;
  right: 0;
  bottom: -0.2em;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--dark);
  opacity: 0;   /* fades in via the intro timeline once the COOK FOR ME morph settles */
}
.hero__word {
  display: block;
  width: max-content;       /* box hugs the text so the one-line morph sits tight */
  white-space: nowrap;
}
.hero__tagline {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--red);
  margin-top: 28px;
  line-height: 1.3;
  min-height: 1.3em;        /* reserve the line so typing doesn't shift layout */
  position: relative;
  z-index: 2;               /* above the Sam polaroid tucked behind the text */
}
/* Trailing period blinks like a caret once the line has typed out */
.hero__tagline-dot { opacity: 0; }
.hero__tagline-dot.is-blinking { animation: caretBlink 1s steps(1, end) infinite; }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Polaroids */
.hero__photos {
  position: relative;
  height: 520px;
}
.polaroid {
  position: absolute;
  background: var(--white);
  padding: 10px 10px 36px;
  box-shadow: 0 6px 30px rgba(30, 26, 20, 0.18);
  width: 170px;
  cursor: pointer;
  transform: rotate(var(--rot));
  /* hover transitions are handled by GSAP in main.js (dynamic spacing) */
}
/* 8 cards, 4 top / 4 bottom — percentage lefts so the row tracks the column
   width; --rot is the resting angle (must match polaroidRest in main.js).
   Slots beyond content.json's polaroid count are hidden by loadContent. */
.polaroid--1 { --rot: -5deg; top: 18px;  left: 0; }
.polaroid--2 { --rot:  3deg; top: 0;     left: 24%; }
.polaroid--3 { --rot: -2deg; top: 22px;  left: 48%; }
.polaroid--4 { --rot:  6deg; top: 6px;   left: 72%; }
.polaroid--5 { --rot: -4deg; top: 248px; left: 8px; }
.polaroid--6 { --rot:  4deg; top: 232px; left: 25%; }
.polaroid--7 { --rot: -3deg; top: 252px; left: 49%; }
.polaroid--8 { --rot:  5deg; top: 236px; left: 73%; }

/* Hover (lift + dynamic spacing) is driven by JS so neighbours can move
   out of the way — see main.js. CSS only handles the shadow transition. */
.polaroid__img {
  width: 150px;
  height: 190px;
  background: #2a2218 center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  position: relative;
  overflow: hidden;
}
/* Caption overlays removed — show the clean photos only */
.polaroid__img span,
.video-card__thumb-text,
.brand-card__thumb span { display: none; }

/* Real photos (filenames have spaces/$, so they're URL-encoded) — fallbacks
   only; content.json overrides these per slot */
.polaroid--1 .polaroid__img { background-image: url("../images/right_now.webp"); }
.polaroid--2 .polaroid__img { background-image: url("../images/for%20%24100.webp"); }
.polaroid--3 .polaroid__img { background-image: url("../images/mystery_gift.webp"); }
.polaroid--4 .polaroid__img { background-image: url("../images/%24100.webp"); }
.polaroid--5 .polaroid__img { background-image: url("../images/mystery_gift.webp"); }
.polaroid--6 .polaroid__img { background-image: url("../images/right_now.webp"); }
.polaroid--7 .polaroid__img { background-image: url("../images/for%20%24100.webp"); }
.polaroid--8 .polaroid__img { background-image: url("../images/%24100.webp"); }

.hero__scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: bounce 2s ease infinite;
  opacity: 0.4;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
/* mobile: the hint flows in-line (no translateX centering offset) */
@keyframes bounce-inline {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* ─── FORMAT ─── */
.format {
  background: var(--cream);
  padding: 120px 48px;
}
.format__inner {
  display: grid;
  grid-template-columns: 1fr auto;   /* copy | the double-reel visual */
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.format__headline {
  margin-bottom: 40px;
}
.reveal-wrap {
  /* overflow handled per-line by SplitType in JS */
}
/* FORMAT copy matched to the overview PDF: Geist, uniform 25.5px, colour #2a1c0f,
   bold emphasis words, red italic quote at 33px. */
.reveal-line {
  font-family: var(--font-geist);
  font-size: 25.5px;
  font-weight: 400;
  line-height: 1.42;
  color: #2a1c0f;
  display: block;
}
.reveal-line strong {
  font-weight: 700;
}
.format__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.format__body p {
  font-family: var(--font-geist);
  font-size: 25.5px;
  line-height: 1.42;
  color: #2a1c0f;
}
.format__body strong { font-weight: 700; }
.format__quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 33px;
  color: #f04e23;
  line-height: 1.2;
  border: none;
  padding: 0;
  margin: 8px 0;
}
.reveal-fade { opacity: 0; }

/* Film strip — a big, angled 35mm reel of clips that scrolls continuously
   (placeholder images now; GIFs later, fed from the admin page). Modelled on
   the FORMAT page of the overview PDF: tilted, larger, running off the edges. */
.format { overflow: hidden; }                 /* clip the tall, tilted strips */
.format__visual {
  position: relative;
  width: 700px;          /* room for the two parallel reels */
  height: 460px;
}
.filmstrip {
  position: absolute;
  top: 50%;
  left: 58%;
  transform: translate(-50%, -50%) rotate(8deg);   /* the PDF tilt */
  width: 330px;
  height: 720px;                                    /* taller than the section → runs off top/bottom */
  overflow: hidden;
  background: #15120d;
  border-radius: 8px;
  padding: 0 30px;            /* room for the sprocket holes */
  box-shadow: 0 30px 70px rgba(30, 26, 20, 0.32);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
/* sprocket perforations + frame markings down both edges */
.filmstrip::before,
.filmstrip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;
  background: repeating-linear-gradient(to bottom, var(--cream) 0 12px, transparent 12px 27px);
  z-index: 2;
}
.filmstrip::before { left: 8px; }
.filmstrip::after  { right: 8px; }
.filmstrip__track {
  display: flex;
  flex-direction: column;
  animation: filmScroll 24s linear infinite;
  will-change: transform;
}
.filmstrip:hover .filmstrip__track { animation-play-state: paused; }
.filmstrip__frame {
  position: relative;
  width: 100%;
  height: 205px;
  margin-bottom: 10px;       /* margin (not gap) keeps the loop seamless at -50% */
  border-radius: 2px;
  overflow: hidden;
  background: #2a2218;
  flex-shrink: 0;
}
.filmstrip__frame img,
.filmstrip__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Frames are a fixed 270×205 slot — the admin ✂ crop tool frames stills to match. */

/* Loading spinner shown in a video frame until the clip can paint (From Uiverse.io by Tsiangana) */
.filmstrip__frame .dot-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.4rem 0 0 -1.4rem;   /* centre the 2.8rem spinner */
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.filmstrip__frame.is-loaded .dot-spinner { opacity: 0; }
.dot-spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  --uib-speed: 0.9s;
  height: 2.8rem;
  width: 2.8rem;
}
.dot-spinner__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}
.dot-spinner__dot::before {
  content: '';
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background-color: #fff;
  filter: drop-shadow(0 0 10px rgb(95, 150, 202));
  transform: scale(0);
  opacity: 0.5;
  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}
.dot-spinner__dot:nth-child(2)          { transform: rotate(45deg); }
.dot-spinner__dot:nth-child(2)::before  { animation-delay: calc(var(--uib-speed) * -0.875); }
.dot-spinner__dot:nth-child(3)          { transform: rotate(90deg); }
.dot-spinner__dot:nth-child(3)::before  { animation-delay: calc(var(--uib-speed) * -0.75); }
.dot-spinner__dot:nth-child(4)          { transform: rotate(135deg); }
.dot-spinner__dot:nth-child(4)::before  { animation-delay: calc(var(--uib-speed) * -0.625); }
.dot-spinner__dot:nth-child(5)          { transform: rotate(180deg); }
.dot-spinner__dot:nth-child(5)::before  { animation-delay: calc(var(--uib-speed) * -0.5); }
.dot-spinner__dot:nth-child(6)          { transform: rotate(225deg); }
.dot-spinner__dot:nth-child(6)::before  { animation-delay: calc(var(--uib-speed) * -0.375); }
.dot-spinner__dot:nth-child(7)          { transform: rotate(270deg); }
.dot-spinner__dot:nth-child(7)::before  { animation-delay: calc(var(--uib-speed) * -0.25); }
.dot-spinner__dot:nth-child(8)          { transform: rotate(315deg); }
.dot-spinner__dot:nth-child(8)::before  { animation-delay: calc(var(--uib-speed) * -0.125); }
@keyframes pulse0112 {
  0%, 100% { transform: scale(0); opacity: 0.5; }
  50%      { transform: scale(1); opacity: 1; }
}
@keyframes filmScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* TWO parallel reels, identical tilt, side by side: the left one runs DOWNWARD
   (same seamless -50% loop, played in reverse), the right one upward as always. */
.filmstrip--left  { left: 25%; }
.filmstrip--right { left: 75%; }
.filmstrip--left .filmstrip__track { animation-name: filmScrollDown; }
@keyframes filmScrollDown {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
/* Mobile reels run HORIZONTALLY (stacked rows, opposite directions) — same
   seamless 2×-copy / -50% loop, just along X. Used by the @900 overrides. */
@keyframes filmScrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Not enough width for two reels beside the copy → back to the single reel */
@media (max-width: 1199px) {
  .format__visual { width: 330px; }
  .filmstrip--left { display: none; }
  .filmstrip--right { left: 58%; }   /* the original one-reel placement */
}

/* ─── NUMBERS ─── */
.numbers {
  background: var(--red);
  padding: 100px 48px 120px;
  color: var(--cream);
}
.numbers__inner {
  max-width: 1400px;
  margin: 0 auto;
}
.numbers__big {
  font-family: var(--font-display);
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.85;
  color: var(--cream);
  display: block;
  letter-spacing: -0.02em;
}
.numbers__headline {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 52px);
  letter-spacing: 0.02em;
  color: var(--cream);
  margin-top: 24px;
  line-height: 1.1;
}
.numbers__rule {
  height: 1px;
  background: rgba(245, 237, 214, 0.3);
  margin: 56px 0;
}
.numbers__breakdown {
  display: grid;
  /* content-sized columns spread edge-to-edge: YOUTUBE hugs the left, FACEBOOK
     hugs the right so its right edge lines up under UNITED STATES above it */
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 36px;
  align-items: start;
}
.numbers__platform-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 8px;
}
.numbers__platform-stat {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 80px);
  color: var(--cream);
  display: block;
  line-height: 1;
}
.numbers__platform-sub {
  font-size: 13px;
  color: var(--cream);
  opacity: 0.55;
  display: block;
  margin-top: 4px;
}
.numbers__followers {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(245, 237, 214, 0.3);
}
.numbers__followers em {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2vw, 30px);
  color: var(--cream);
  opacity: 0.85;
  line-height: 1.4;
}
/* BIGGEST AUDIENCE — plain text on the red background (no card / no light bg) */
.numbers__location-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.92;
  margin: 0 0 10px;
}
.numbers__location-country {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--cream);
  display: block;
}
/* centred directly above the 178M hero stat (all viewports) */
/* desktop: big number on the left, BIGGEST AUDIENCE on the right, bottoms level */
.numbers__hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.numbers__location--hero { text-align: center; margin-bottom: 0.18em; }   /* block sits right (over IG/FB); label centred over UNITED STATES */

/* ─── STANDOUTS ─── */
.standouts {
  background: var(--yellow);
  padding: 120px 48px;
}
.standouts__inner {
  max-width: 1400px;
  margin: 0 auto;
}
/* Auto-scrolling marquee (JS duplicates the cards so the -50% loop is seamless;
   hovering pauses it so a card can be clicked). */
/* Auto-scrolls via JS (so it can also be grabbed + dragged left/right); the
   duplicated track lets the scroll position wrap seamlessly. Generous vertical
   padding keeps the lifted card's soft shadow from being clipped to a hard edge
   by overflow:hidden. */
.standouts__marquee {
  overflow: hidden;
  padding: 44px 0;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  /* fade the left/right edges so edge cards' hover shadows dissolve, not hard-clip */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.standouts__marquee.is-grabbing { cursor: grabbing; }
.standouts__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: scroll-position;
}
@keyframes standoutScroll {     /* still used by the Integrations marquee */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.video-card {
  width: 320px;
  flex-shrink: 0;
  margin-right: 20px;   /* margin (not gap) keeps the -50% loop seamless */
  background: var(--cream);
  border: 1.5px solid rgba(30, 26, 20, 0.12);
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transition:
    transform  0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* only on real-hover devices — on touch, :hover sticks on tap and the lifted
   shadow clips against the marquee, so we skip it on phones/tablets */
@media (hover: hover) {
  .video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 26px rgba(30, 26, 20, 0.16);   /* fits inside the marquee padding → no clipped edge */
  }
}
.video-card__thumb {
  aspect-ratio: 16 / 9;       /* fixed slot ratio — admin ✂ crops uploads to match */
  background: #2a2218 center / cover no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.video-card__thumb--yt { background-image: url("../images/right_now.webp"); }
.video-card__thumb--tt { background-image: url("../images/mystery_gift.webp"); }
.video-card__thumb--ig { background-image: url("../images/for%20%24100.webp"); }
.video-card__thumb--fb { background-image: url("../images/%24100.webp"); }
.video-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: white;
  width: 30px; height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
}
.video-card__thumb-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  border-radius: 4px;
}
.video-card__info {
  padding: 20px;
}
.video-card__platform {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #a8331a;
  display: block;
  margin-bottom: 4px;
}
.video-card__stat {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--dark);
  line-height: 1;
  display: block;
}
.video-card__footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--dark);
  opacity: 0.72;
  border-top: 1px solid rgba(30,26,20,0.12);
  margin-top: 10px;
  padding-top: 10px;
}

/* ─── DEMOGRAPHICS ─── */
/* Bar chart */
.bar-row {
  display: grid;
  grid-template-columns: 60px 1fr 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.bar-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--dark);
}
.bar-track {
  height: 14px;
  background: rgba(30, 26, 20, 0.1);
  border-radius: 7px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  background: var(--dark);
  border-radius: 7px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-fill--red { background: var(--red); }
.bar-pct {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--dark);
}

/* Donut */
.demo__gender {
  text-align: center;
}
.donut {
  --p: 0%;                 /* red fill progress, driven by scroll (main.js) */
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--dark);  /* black base; the red fills in on scroll */
  position: relative;
  margin: 0 auto 16px;
}
/* Red (orange) wedge fills clockwise from 0% to --p */
.donut::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--red) 0% var(--p), transparent var(--p) 100%);
  z-index: 1;
}
.donut__inner {
  position: absolute;
  width: 60px; height: 60px;
  background: var(--cream);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;              /* keep the hole above the reveal mask */
}
.donut__legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.dot--red  { background: var(--red); }
.dot--dark { background: var(--dark); }

/* ─── INTEGRATIONS ─── */
.integrations {
  background: var(--white);
  padding: 60px 48px 120px;   /* the Trusted logo wall sits directly above */
}
.integrations__inner {
  max-width: 1400px;
  margin: 0 auto;
}
/* ─── TRUSTED BY GLOBAL BRANDS — scrolling logo wall ─── */
.trusted {
  background: var(--white);
  padding: 100px 48px 30px;
  overflow: hidden;
}
.trusted__inner { max-width: 1400px; margin: 0 auto; }
.trusted__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--dark);
  text-align: center;
  margin-bottom: 48px;
}
/* Alpha brand logos in a continuous marquee — hovering pauses it so a logo
   can be clicked. */
.trusted__marquee {
  overflow: hidden;
  padding: 10px 0;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;       /* let vertical page scroll through; we drive horizontal */
  /* fade the left/right edges so logos dissolve into white instead of hard-clipping */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.trusted__marquee.is-grabbing { cursor: grabbing; }
.trusted__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* auto-scroll + hold-to-drag is JS-driven via setupDragScroll (like Standouts),
     not a CSS animation — so scrollLeft and dragging can coexist */
  will-change: scroll-position;
}
@keyframes brandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 88px;   /* margin (not gap) keeps the -50% loop seamless */
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.brand-logo:hover { opacity: 1; transform: translateY(-3px); }
.brand-logo img { height: 44px; width: auto; display: block; }
.brand-logo__name {       /* text fallback until a logo is uploaded */
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--dark);
  white-space: nowrap;
}

/* Integrations: an auto-scrolling marquee carousel (single row) matching Viral
   Standouts — JS duplicates the cards so the -50% loop is seamless; hover pauses. */
.integrations__marquee {
  overflow: hidden;
  padding: 44px 0;            /* room so a lifted card's shadow isn't clipped top/bottom */
  margin-bottom: 36px;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;       /* let vertical page scroll through; we drive horizontal */
  /* fade the left/right edges so cards (and their hover shadows) dissolve instead
     of hard-clipping at the extremes */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.integrations__marquee.is-grabbing { cursor: grabbing; }
.integrations__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  /* auto-scroll + hold-to-drag is JS-driven via setupDragScroll (like Standouts),
     not a CSS animation — so scrollLeft and dragging can coexist */
  will-change: scroll-position;
}
.integrations__track .brand-card { width: 200px; flex-shrink: 0; margin-right: 20px; }
.integrations__track .brand-card__thumb { aspect-ratio: 1 / 1; }
.brand-card {
  display: block;
  text-decoration: none;   /* works whether the card is a <div> or an <a> link */
  color: inherit;
  overflow: hidden;
  border: 1.5px solid rgba(30, 26, 20, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition:
    transform  0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
  .brand-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 26px rgba(30, 26, 20, 0.16);   /* fits inside the marquee padding → no clipped edge */
  }
}
.brand-card__thumb {
  aspect-ratio: 9 / 16;             /* vertical card — matches the show's clip format;
                                       upload 9:16 stills so they fill with no crop */
  background: linear-gradient(135deg, #4a3a2a, #6a5a4a);
  background-size: cover;            /* uploaded image fills the card */
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  position: relative;
}
.brand-card__thumb--2 { background-image: linear-gradient(135deg, #3a4a5a, #5a6a7a); }
.brand-card__thumb--3 { background-image: linear-gradient(135deg, #3a2a4a, #5a4a6a); }
.brand-card__thumb--4 { background-image: linear-gradient(135deg, #3a4a3a, #5a7a5a); }
.brand-card__thumb span {
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 3px 8px;
  border-radius: 3px;
}
.brand-card__name {
  background: var(--yellow);
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--dark);
}
/* optional view-count line under the brand name (admin-set per card) */
.brand-card__views {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #4a3d12;
  opacity: 1;
}
.integrations__cta {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  color: var(--dark);
}
.integrations__cta strong {
  font-style: normal;
  color: var(--red);
}

/* ─── WHAT PEOPLE ARE SAYING — testimonials marquee ─── */
/* Single-row auto-scrolling carousel of comment cards, matching Viral Standouts /
   Integrations (JS rebuilds the track from content.json "testimonials" and repeats
   the set so the -50% loop is seamless; hover pauses). */
.testimonials {
  background: var(--white);
  padding: 100px 48px;
}
.testimonials__inner { max-width: 1400px; margin: 0 auto; }
.testimonials__label {
  text-align: center;
  margin-bottom: 14px;
}
.testimonials__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--dark);
  text-align: center;
  margin-bottom: 40px;
}
.testimonials__marquee {
  overflow: hidden;
  padding: 24px 0;            /* room so a lifted card's shadow isn't clipped */
  cursor: grab;
  user-select: none;
  touch-action: pan-y;       /* let vertical page scroll through; we drive horizontal */
  /* fade the left/right edges so cards dissolve instead of hard-clipping */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.testimonials__marquee.is-grabbing { cursor: grabbing; }
.testimonials__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  /* auto-scroll + hold-to-drag is JS-driven via setupDragScroll (like Standouts),
     not a CSS animation — so scrollLeft and dragging can coexist */
  will-change: scroll-position;
}
.comment-card {
  width: 360px;
  flex-shrink: 0;
  margin-right: 24px;        /* margin (not gap) keeps the -50% loop seamless */
  background: var(--cream);
  border: 1.5px solid rgba(30, 26, 20, 0.12);
  border-radius: 8px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  transition:
    transform  0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) {
  .comment-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 26px rgba(30, 26, 20, 0.14);
  }
}
.comment-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.comment-card__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
  background: #888;          /* JS overrides per platform / custom colour */
}
.comment-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.comment-card__handle {
  font-weight: 700;
  font-size: 15px;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-card__platform {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(30, 26, 20, 0.72);
}
.comment-card__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;          /* JS overrides per platform */
}
.comment-card__text {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 4;     /* cap long comments… */
  min-height: 6em;           /* …and reserve the full 4-line block (4 × 1.5 line-height)
                                so short comments make the SAME height card as long ones */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment-card__likes {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
}
.comment-card__heart { color: var(--red); display: block; }
.comment-card__count {
  font-size: 13px;
  font-weight: 600;
  color: rgba(30, 26, 20, 0.72);
}

/* ─── CTA ─── */
.cta-section {
  background: var(--yellow);
  padding: 120px 48px 80px;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex;
  align-items: center;
}
.cta-section__inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(100px, 16vw, 240px);
  line-height: 0.88;
  color: var(--dark);
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cta-word {
  display: block;
  overflow: hidden;
}
.cta-rule {
  height: 1px;
  background: rgba(30, 26, 20, 0.2);
  margin: 48px 0;
}
.cta-contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.cta-item__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.5;
  display: block;
  margin-bottom: 6px;
}
.cta-item__link {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  color: var(--dark);
  position: relative;
  display: inline-block;
  transition: color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cta-item__link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cta-item__link:hover { color: var(--red); }
.cta-item__link:hover::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   TRAHAN-STYLE HOVER LAYER
   0.45s cubic-bezier, card tilt, image zoom, link arrows
   ═══════════════════════════════════════════ */

/* Card tilt-on-hover (replaces the plain lift for media cards) */
[data-hover="tilt"] {
  transition:
    transform  0.45s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-hover="tilt"]:hover {
  transform: rotate(-2deg) translateY(-8px);
}
[data-hover="tilt"]:nth-child(even):hover {
  transform: rotate(2deg) translateY(-8px);
}

/* (No inner thumb zoom: the thumbs clip overflow and hold the caption/badge,
   so scaling them cut the text off. Tilt + lift on the card is enough.) */

/* Link arrows nudge right on hover */
.link-arrow {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);
}
a:hover .link-arrow,
.btn:hover .link-arrow {
  transform: translateX(0.25rem);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
  .hero__scroll-hint { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════
   EVENTS PAGE TRANSITION (trahan.co-style)
   ═══════════════════════════════════════════ */
#home-wrap {
  transform-origin: center center;
  background: var(--yellow);   /* keeps backdrop solid while it scales away */
}
/* dark stage behind the two cards during the shuffle */
#transition-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: #110f0b;
  opacity: 0;
  display: none;
  pointer-events: none;
}
#events-overlay,
#about-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  visibility: hidden;            /* hidden until opened; GSAP owns the slide transform */
  background: #fef9e7;
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
#events-overlay.is-open,
#about-overlay.is-open { visibility: visible; }
#events-frame,
#about-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#events-close,
#about-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 9810;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--dark);
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.35s ease;
}
#events-close:hover,
#about-close:hover { transform: rotate(90deg) scale(1.08); background: var(--red); }

/* ─── VIDEO PLAYER MODAL (film-strip clips) ─── */
#video-modal {
  position: fixed;
  inset: 0;
  z-index: 9900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 15, 11, 0.92);
  opacity: 0;   /* fade in/out is driven by GSAP (FLIP zoom) — see setupVideoModal */
}
#video-modal.is-open { display: flex; opacity: 1; }
#video-stage { will-change: transform; }
#video-stage {
  position: relative;
  width: min(94vw, calc(86vh * 16 / 9));   /* landscape default; JS switches to portrait for TikTok/Reels */
  aspect-ratio: 16 / 9;
  max-width: 94vw;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
#video-frame { width: 100%; height: 100%; border: 0; display: block; }
#video-close {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.3s ease, color 0.3s ease;
}
#video-close:hover { transform: rotate(90deg) scale(1.08); background: var(--red); color: var(--cream); }
.filmstrip__frame.has-video { cursor: pointer; }
.filmstrip__frame.has-video::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.filmstrip:hover .filmstrip__frame.has-video::after { opacity: 0.92; }

/* play cue on polaroids + standout cards that carry a video embed */
.polaroid.has-video { cursor: pointer; }
.polaroid.has-video .polaroid__img::after,
.video-card[data-embed] .video-card__thumb::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.polaroid.has-video .polaroid__img::after { font-size: 22px; }
.video-card[data-embed] .video-card__thumb::after { font-size: 30px; }
.polaroid.has-video:hover .polaroid__img::after,
.video-card[data-embed]:hover .video-card__thumb::after { opacity: 1; }

/* integration cards carrying a video embed get the same ▶ cue + in-page player */
.brand-card.has-video .brand-card__thumb::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.brand-card.has-video:hover .brand-card__thumb::after { opacity: 1; }

/* ─── RESPONSIVE ─── */

/* Tablet & below */
@media (max-width: 900px) {
  /* ── Nav → hamburger menu (every link stays reachable) ── */
  .nav { padding: 14px 22px; padding-top: max(14px, env(safe-area-inset-top)); }
  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .nav__toggle span {
    display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 2px;
    background: var(--dark); transition: transform .3s ease, opacity .25s ease;
  }
  .nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--yellow);
    padding: 18px 22px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 14px 26px rgba(30, 26, 20, 0.14);
    border-top: 1px solid rgba(30, 26, 20, 0.08);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .nav--open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__actions { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
  .nav__actions .btn { display: block; width: 100%; text-align: center; }

  /* socials sit TOP-LEFT in the bar as a static, always-visible row (replacing the
     old brand text; cancel the desktop avatar + hover-reveal) */
  .nav__social { order: 0; }
  .nav__avatar { display: none; }
  .nav__social-icons {
    position: static; transform: none; padding-right: 0; pointer-events: auto;
    gap: 18px;
  }
  .nav__social-icons a { opacity: 0.85; transform: none; transition-delay: 0s; }

  /* ── Hero: centered + tight (no marooned title) ── */
  .hero { padding: 104px 24px 52px; min-height: auto; text-align: center; }
  /* during the preload the title is posed at the curtain centre, which can sit past
     the compact hero's box — don't let overflow:hidden clip it (photos are hidden on
     mobile, so nothing else escapes) */
  body.is-loading .hero, body.is-morphing .hero { overflow: visible; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__sam-polaroid { display: none; }   /* no room behind the centred mobile title */
  /* polaroids: a small horizontal strip right below the red tagline — cards keep
     their natural angles (--rot) and the row swipes sideways if it overflows */
  .hero__photos {
    display: flex;
    position: static;
    height: auto;
    gap: 14px;
    margin-top: 26px;
    padding: 14px 8px 16px;        /* headroom so the angled corners don't clip */
    overflow-x: auto;
    /* NO -webkit-overflow-scrolling:touch — its legacy rasterizer smears the
       rotated cards' shadows on iOS; modern iOS momentum-scrolls without it */
    scrollbar-width: none;
    /* fade the left/right edges to white, matching the other card carousels */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  }
  .hero__photos::-webkit-scrollbar { display: none; }
  .polaroid {
    position: static;
    flex: 0 0 auto;
    width: 96px;
    padding: 6px 6px 20px;
    /* tight shadow: the desktop 30px blur smears across neighbours in this packed
       row and gets clipped into hard-edged patches by the scroll container */
    box-shadow: 0 3px 10px rgba(30, 26, 20, 0.18);
  }
  .polaroid__img { width: 100%; height: auto; aspect-ratio: 150 / 190; }
  .hero__text { display: flex; flex-direction: column; align-items: center; }
  .hero__title { width: auto; display: flex; flex-direction: column; align-items: center; }
  .hero__byline { position: static; right: auto; bottom: auto; display: block; text-align: center; margin-top: 10px; }
  .hero__tagline { text-align: center; }
  /* arrow flows below the tagline (not absolutely pinned) so it can't overlap the text */
  .hero__scroll-hint { position: static; transform: none; margin: 26px auto 0; animation-name: bounce-inline; }

  /* ── Tighter section spacing ── */
  .format { padding: 56px 24px; }
  .format__inner { grid-template-columns: 1fr; gap: 36px; }
  /* film reels go HORIZONTAL: two full-width strips stacked under the copy,
     the top one drifting left, the bottom one drifting right */
  .format__visual {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;     /* the max-content track must not blow the 1fr grid column out */
    max-width: 100%;
  }
  .filmstrip {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    padding: 24px 0;               /* sprockets now run along the top/bottom edges */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  }
  .filmstrip--left { display: none; }   /* mobile shows a single reel (the right one) */
  .filmstrip::before,
  .filmstrip::after {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 14px;
    background: repeating-linear-gradient(to right, var(--cream) 0 12px, transparent 12px 27px);
  }
  .filmstrip::before { top: 5px; }
  .filmstrip::after  { bottom: 5px; }
  .filmstrip__track {
    flex-direction: row;
    width: max-content;
    animation-name: filmScrollX;             /* the single reel drifts left */
    animation-duration: 30s;
  }
  .filmstrip__frame {
    width: 150px;                  /* keeps the 270:205 slot ratio, just smaller */
    height: 114px;
    margin-bottom: 0;
    margin-right: 10px;            /* margin (not gap) keeps the -50% loop seamless */
  }

  .numbers { padding: 56px 24px; }
  .numbers__inner { text-align: center; }   /* mobile: stats centred, not left-aligned */
  .numbers__hero-row { flex-direction: column-reverse; align-items: center; gap: 14px; }   /* location back on top */
  .numbers__location--hero { text-align: center; margin-bottom: 0; }   /* keep BIGGEST AUDIENCE centred on mobile */
  .numbers__breakdown { grid-template-columns: 1fr 1fr; gap: 28px; }
  .numbers__platform-name { justify-content: center; }   /* icon + label row */
  .numbers__followers { grid-column: 1 / -1; text-align: center; }

  .standouts { padding: 56px 24px; }
  /* same auto-scroll + drag carousel as web, just ~2 cards in view.
     44px BOTTOM fully clears a hovered card's 0 14px 26px drop-shadow (~40px
     deep) so overflow:hidden doesn't slice it into a sharp line. (These are
     scrollLeft-driven marquees, so overflow-y can't be left visible — the only
     fix is enough bottom room. 44px matches the desktop value.) */
  .standouts__marquee { padding: 24px 0 44px; }
  .video-card { width: 40vw; }
  /* shrink the internals to fit the narrower 2-up cards */
  .video-card__info { padding: 14px; }
  .video-card__stat { font-size: clamp(30px, 9vw, 44px); }
  .video-card__footer { font-size: 11px; }
  .video-card__thumb-text { font-size: 11px; }

  .integrations { padding: 56px 24px; }
  /* mobile: keep the auto-scrolling marquee (like the other carousels) — just
     show smaller cards. The track is duplicated so the -50% loop stays seamless.
     44px bottom clears the hovered card shadow (see Standouts note). */
  .integrations__marquee { padding: 24px 0 44px; }
  .integrations__track .brand-card { width: 40vw; margin-right: 16px; }

  .testimonials { padding: 56px 24px; }
  /* mobile: keep the auto-scrolling marquee (like the other carousels); show ~2
     cards in view — wide enough that the card header reads cleanly. Track is
     duplicated → the -50% loop stays seamless. */
  /* 44px bottom fully clears a hovered card's drop-shadow so overflow:hidden
     doesn't slice it into a sharp line (see Standouts note). */
  .testimonials__marquee { padding: 24px 0 44px; }
  .comment-card {
    width: 40vw;
    margin-right: 3vw;
    padding: 16px;
  }
  /* stack the header (avatar → handle → platform) so the handle/platform get the
     card's full width and fit without truncating to "…" at the narrow 2-up size */
  .comment-card__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
  .comment-card__avatar { width: 36px; height: 36px; font-size: 13px; }
  .comment-card__who { width: 100%; }
  .comment-card__handle { font-size: 13.5px; }
  .comment-card__platform { font-size: 11px; }
  .comment-card__text { font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; -webkit-line-clamp: 6; min-height: 8.7em; /* 6 × 1.45 — equal-height cards at the narrow size */ }

  .cta-section { padding: 56px 24px; }
  .cta-contact { flex-direction: column; align-items: flex-start; gap: 32px; }
}

/* Phones */
@media (max-width: 600px) {
  .nav { padding: 12px 18px; }
  .nav__brand { font-size: 18px; }
  .btn { padding: 9px 16px; font-size: 13px; }
  .nav__actions .btn { padding: 12px 16px; font-size: 14px; }   /* easier tap targets in the menu */

  .hero { padding: 96px 20px 44px; text-align: left; }
  .hero__title { font-size: clamp(62px, 20vw, 110px); align-items: flex-start; }
  .hero__tagline { font-size: clamp(18px, 5.5vw, 24px); margin-top: 16px; text-align: left; }
  /* show Sam's polaroid on the RIGHT (behind the title, like desktop); text nudged left */
  .hero__text { align-items: flex-start; }
  .hero__byline { text-align: left; }
  .hero__sam-polaroid {
    display: block;
    position: absolute;
    top: -8px;
    right: 20px;   /* nudged ~20px in from the edge */
    left: auto;
    width: 108px;
    padding: 7px 7px 20px;
    transform: rotate(8deg);
    z-index: 1;                 /* stays behind the title (z2) */
  }

  /* preloader Sam: smaller + mobile-proportioned (was ~82% of the screen) */
  .preloader__sam { height: clamp(75px, 13vh, 115px); height: clamp(75px, 13dvh, 115px); }

  .section-label { margin-bottom: 22px; }

  .format { padding: 44px 20px; }
  /* keep the PDF's uniform sizing on phones (just smaller) */
  .reveal-line, .format__body p { font-size: 20px; line-height: 1.4; }
  .format__quote { font-size: 26px; }

  .numbers { padding: 44px 20px 48px; }
  .numbers__breakdown { grid-template-columns: 1fr 1fr; gap: 24px 18px; }   /* 2×2 so it isn't so tall */
  .numbers__rule { margin: 32px 0; }

  .standouts, .integrations { padding: 44px 20px; }
  .integrations__cta { font-size: clamp(18px, 5vw, 24px); }

  /* Trusted logo wall — tighter spacing + smaller logos so ~3 show at once */
  .trusted { padding: 64px 20px 24px; }
  .brand-logo { margin-right: 32px; }
  .brand-logo img { height: 28px; }
  .brand-logo__name { font-size: 13px; letter-spacing: 0.1em; }

  .cta-section { padding: 44px 20px 48px; }
  .cta-title { font-size: clamp(64px, 20vw, 120px); }
}

/* ═══ FOOTER ═══ */
.site-footer {
  background: var(--dark);
  color: var(--cream);
  text-align: center;
  padding: 48px 20px 40px;
}
.site-footer__tag {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 2.4vw, 18px);
  margin: 0 0 6px;
}
.site-footer__tag strong { color: var(--yellow); font-weight: 700; }
.site-footer__sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  opacity: 0.7;
  margin: 0 auto 20px;
  max-width: 520px;
}
.site-footer__links {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.site-footer__links a {
  color: var(--cream);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.site-footer__links a:hover { color: var(--red); opacity: 1; }
.site-footer__copy {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  opacity: 0.5;
  margin: 0;
}