/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== GRAIN OVERLAY ===== */
body::before {
  display: none;
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.05;
  animation: grain 8s steps(10) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

@keyframes grain {
  0%   { transform: translate(0,    0);    }
  10%  { transform: translate(-5%,  -10%); }
  20%  { transform: translate(-15%, 5%);   }
  30%  { transform: translate(7%,   -25%); }
  40%  { transform: translate(-5%,  25%);  }
  50%  { transform: translate(-15%, 10%);  }
  60%  { transform: translate(15%,  0%);   }
  70%  { transform: translate(0%,   15%);  }
  80%  { transform: translate(3%,   35%);  }
  90%  { transform: translate(-10%, 10%);  }
  100% { transform: translate(0,    0);    }
}

:root {
  /* ── THEME ─────────────────────────────────────────────
     Change --h (hue) + --s (saturation) to shift the whole
     palette. E.g. --h:0 gives a red theme, --h:200 gives teal.
  ───────────────────────────────────────────────────────── */
  --h: 48;       /* hue — butter yellow */
  --s: 100%;     /* saturation */

  /* Background scale */
  --bg:        hsl(var(--h), var(--s), 93%);   /* main yellow */
  --bg-light:  hsl(var(--h), var(--s), 96%);
  --bg-medium: hsl(var(--h), var(--s), 88%);
  --bg-accent: hsl(var(--h), var(--s), 81%);
  --bg-dark:   hsl(var(--h), var(--s), 71%);

  /* Light surface (about section, cards on white) */
  --surface:   hsl(var(--h), 50%, 99%);

  /* Check/grid pattern colours */
  --check-on-bg:      hsl(var(--h), var(--s), 99%);  /* near-white lines on yellow */
  --check-on-surface: hsl(var(--h), var(--s), 88%);  /* warm-yellow lines on light */

  /* Text */
  --text-primary:   #1a1a1a;
  --text-secondary: #4a4a3a;
  --text-muted:     #6a6a4a;
  --white:  #ffffff;
  --black:  #1a1a1a;
  --border: rgba(0, 0, 0, 0.08);
  --card-bg: rgba(255, 255, 255, 0.7);
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
}

html {
  scroll-behavior: smooth;
}

/* ============================================================
   RESPONSIVE BASE RESETS
   These run once at the root and remove the need for per-component
   patching of overflow, image sizing, and text wrapping.
   ============================================================ */

/* Baseline safety net for html + body:
   - overflow-x: hidden stops horizontal runaway (wide children like the
     300vw journey track). `clip` where supported (no scroll-container
     side effects); `hidden` as fallback for Safari < 16.
   - NO vertical overflow restriction — page MUST scroll when content
     exceeds the viewport (iPhone SE, short laptop, split-screen).
   - min-height: 100svh so short content pages still fill the viewport
     rather than leaving a yellow strip below the fold. */
html,
body {
  min-height: 100svh;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  /* Stop Safari (iOS + narrow macOS windows) from auto-inflating text on
     "mobile-ish" viewports — our clamp() scale is the single source of truth. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media: intrinsic responsive sizing. Specific components with fixed widths
   override, but anything unstyled still fits its parent. */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Headlines: break inside a word before overflowing; balance multi-line
   titles so they wrap visually evenly (progressive enhancement in Chrome
   114+ and Safari 17.4+ — falls back to normal wrapping elsewhere). */
h1, h2, h3 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Body copy: same break-word safety, plus `pretty` to avoid orphan last-
   lines where supported. No cost on older browsers. */
p {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ============================================================
   DISPLAY HEADLINES — ONE shared scale
   Applied to every major section heading so sizing/wrapping stays
   consistent. Do not add per-section font-size overrides — tune this
   rule instead. 20ch max-width forces longer headlines (e.g. "Why I'm
   writing to you, California Burrito.") to wrap into a tighter block
   shape instead of stretching across the viewport.
   ============================================================ */
/* Hero headline — slightly tighter clamp than the other display headings
   since it's the h1 and the surrounding hero already has its own generous
   padding/layout. */
.hero-headline {
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2.75rem);
  line-height: 1.15;
  max-width: min(90%, 32ch);
  margin-inline: auto;
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Anchor links (e.g. #hero) land with breathing room rather than flush
     with the viewport top. */
  scroll-margin-top: 6rem;
}

/* Other display headings (h2-ish) — unified scale. Reducing the ceiling
   keeps long section titles readable on common laptop heights (13"
   MacBook at ~810px fullscreen) without clipping at section boundaries. */
.section-title,
.personal-note-title,
.journey-careers-title,
.cta-title {
  font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2.5rem);
  line-height: 1.2;
  max-width: min(90%, 32ch);
  margin-inline: auto;
  text-wrap: balance;
  overflow-wrap: break-word;
  scroll-margin-top: 6rem;
}

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

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: rgba(255, 248, 220, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 22px;
  font-family: 'Nunito', sans-serif;
}

.logo-icon {
  color: var(--black);
}

.marquee-bar {
  background: var(--bg);
  border-radius: 20px;
  padding: 6px 16px;
  overflow: hidden;
  max-width: 280px;
  font-size: 12px;
  color: var(--text-muted);
}

.marquee-track {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
}

.marquee-divider {
  opacity: 0.4;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.time-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.nav-right {
  display: flex;
  gap: 24px;
}

.nav-link {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  transition: opacity 0.2s;
}

.nav-link:hover {
  opacity: 0.6;
}

/* ===== HERO ===== */
.hero {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: center;
  /* Hero fills the viewport on normal screens but caps at 900px on very
     tall monitors so it doesn't become a comedic-sized splash. min() is
     used instead of max-height because min-height and max-height conflict
     in CSS (min wins) — min() picks the smaller of the two up front. */
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;  /* hero stays vertically centred — content is simple */
  align-items: center;
  /* Slightly more breathing room than before (5vh vs 4vh) since the
     headline ceiling came down ~25%. */
  padding-block: clamp(2rem, 5vh, 4rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  gap: clamp(0.75rem, 2vh, 1.25rem);
  /* No overflow: hidden — page scrolls naturally when content exceeds. */
}

/* ===== FULL-PAGE GRAIN TEXTURE ===== */
/* Fixed overlay that gives every section the organic noise feel */
body::after {
  display: none;
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.038;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
}

/* ===== SECTION RADIAL GRADIENTS — barely-there depth ===== */

/* Hero: soft spotlight upper-right */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 85% at 72% 22%, rgba(255,255,255,0.55) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Journey sticky panel: soft glow from top-left */
.journey-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 70% at 18% 30%, rgba(255,255,255,0.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Pivot (Why work with me): glow from bottom-right */
.pivot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 65% at 80% 75%, rgba(255,255,255,0.4) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Careers reel: glow from top-left */
.careers-reel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 12% 18%, rgba(255,255,255,0.4) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* CTA footer: soft center bloom */
.cta-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(255,255,255,0.45) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* grain on hero — keep for extra texture on main above-fold */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

.character {
  position: absolute;
  z-index: 1;
  opacity: 0.9;
}

.character .char-img {
  width: 170px;
  height: auto;
  mix-blend-mode: multiply;
  display: block;
}

.character-left {
  left: -20px;
  top: 90px;
  animation: float 4s ease-in-out infinite;
}

.character-right {
  right: -10px;
  bottom: 60px;
  animation: float 4s ease-in-out infinite 1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-12px) scale(1.04); }
}

/* gentle pulse — used on all illustrated characters */
@keyframes pulse-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.042); }
}

.hero-video {
  position: relative;
  z-index: 2;
  /* Polaroid sizes itself via .video-wrapper (160×196 photo hole + frame).
     No max-height override — was stretching the polaroid out of its natural
     Instax aspect ratio on tall screens. */
}

/* Outer container — polaroid frame */
.video-container {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 10px 10px 44px;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 0 8px 36px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  overflow: visible;
  /* No max-height cap — .video-wrapper's fixed 160×196 + frame padding
     already gives the polaroid a compact designed size. A max-height here
     was overriding the wrapper's height and stretching the photo. */
}

/* The video photo area — Instax-ish ~4:5 portrait. aspect-ratio is a belt-
   and-braces guard: if the fixed height is ever overridden elsewhere, the
   wrapper still keeps its designed proportions instead of stretching. */
.video-wrapper {
  width: 160px;
  height: 196px;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background: #e8e0d8;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Polaroid label strip at the bottom */
.video-polaroid-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
}

/* Button sits centered on the video bottom edge */
.video-btn {
  position: absolute;
  bottom: calc(44px - 26px);
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22), 0 6px 24px rgba(0,0,0,0.16);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 4;
}

.video-btn:hover {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28), 0 8px 32px rgba(0,0,0,0.18);
}

/* Hide button while playing, reveal on hover */
.video-container.playing .video-btn {
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.video-container.playing:hover .video-btn {
  opacity: 1;
}

.hero-greeting {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.hero-headline {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 700;
  /* font-size / line-height / max-width come from the shared .display-headline
     rule below — see bottom of typography section. */
  position: relative;
  z-index: 2;
}

.hero-subtext {
  font-family: 'Nunito', sans-serif;
  /* Fluid body copy: 14px → 20px across the range. */
  font-size: clamp(14px, 0.85rem + 0.25vw, 20px);
  font-weight: 500;
  color: var(--text-primary);
  max-width: min(100% - 2rem, 800px);
  line-height: 1.8;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}

.dashed-line {
  width: 60%;
  max-width: 500px;
  height: 1px;
  border-top: 2px dashed var(--text-muted);
  opacity: 0.3;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.cta-button {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  padding: 16px 36px;
  background: var(--black);
  color: var(--white);
  border-radius: 40px;
  transition: all 0.3s;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.cta-button:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}


/* ===== FLOATING CTA ===== */
.float-cta {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  background: var(--black);
  color: var(--white);
  padding: 14px 24px;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.float-cta.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.float-cta:hover {
  background: #333;
  transform: translateY(-2px) scale(1);
}

/* ===== CTA ACTIONS ROW ===== */
.cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===== CTA CONTACTS — always visible ===== */
.cta-contacts {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 24px;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #111;
  color: #fff;
  border-radius: 100px;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}

.contact-pill:hover {
  background: #333;
  transform: translateY(-2px) scale(1.03);
}

.cta-box {
  transition: padding 0.4s ease;
}

/* ===== PARTY LIGHTS — soft aura glow blobs that drift + pulse while music plays ===== */
.party-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-xl);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  /* disco hue-shift: cycles every color through every blob */
  animation: party-hue 3.2s linear infinite paused;
}
.party-lights.is-on {
  opacity: 1;
  animation-play-state: running;
}
.party-light {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.party-light--1 { top: -12%;  left: -6%;  background: radial-gradient(circle, rgba(255, 70,160,0.75), transparent 65%);  animation: party-drift-1 2.4s infinite, party-pulse 0.9s infinite; }
.party-light--2 { top:  8%;   left: 36%;  background: radial-gradient(circle, rgba(130, 80,255,0.75), transparent 65%);  animation: party-drift-2 2.8s infinite, party-pulse 1.1s infinite 0.15s; }
.party-light--3 { top: -8%;   right: -6%; background: radial-gradient(circle, rgba(255,180, 40,0.85), transparent 65%);  animation: party-drift-3 2.1s infinite, party-pulse 0.8s infinite 0.30s; }
.party-light--4 { bottom:-10%; left: 20%; background: radial-gradient(circle, rgba( 50,200,255,0.75), transparent 65%);  animation: party-drift-4 3.0s infinite, party-pulse 1.2s infinite 0.40s; }
.party-light--5 { bottom: 0%;  right:  6%; background: radial-gradient(circle, rgba(255,100, 60,0.75), transparent 65%);  animation: party-drift-5 2.5s infinite, party-pulse 1.0s infinite 0.08s; }
.party-light--6 { top: 38%;    left:  2%; background: radial-gradient(circle, rgba( 90,230,130,0.70), transparent 65%);  animation: party-drift-6 3.3s infinite, party-pulse 1.3s infinite 0.55s; width: 380px; height: 380px; }

@keyframes party-drift-1 { 0%,100% { transform: translate(0,0)       } 25% { transform: translate(120px, 80px)  } 50% { transform: translate(60px,140px) } 75% { transform: translate(-40px, 60px) } }
@keyframes party-drift-2 { 0%,100% { transform: translate(0,0)       } 25% { transform: translate(-90px, 70px)  } 50% { transform: translate(-140px,20px)} 75% { transform: translate(-30px,-50px)} }
@keyframes party-drift-3 { 0%,100% { transform: translate(0,0)       } 25% { transform: translate(-80px,100px)  } 50% { transform: translate(-140px,40px)} 75% { transform: translate(-40px,150px)} }
@keyframes party-drift-4 { 0%,100% { transform: translate(0,0)       } 25% { transform: translate(70px, -80px)  } 50% { transform: translate(140px,-40px)} 75% { transform: translate(20px, -120px)} }
@keyframes party-drift-5 { 0%,100% { transform: translate(0,0)       } 25% { transform: translate(-110px,-60px) } 50% { transform: translate(-60px,-140px)}75% { transform: translate(-160px,20px)} }
@keyframes party-drift-6 { 0%,100% { transform: translate(0,0)       } 25% { transform: translate(90px,  50px)  } 50% { transform: translate(140px,-30px)} 75% { transform: translate(60px, -100px)} }
@keyframes party-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes party-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

/* Reduced motion: fade lights in without drifting or strobing */
@media (prefers-reduced-motion: reduce) {
  .party-light { animation: none !important; opacity: 0.75; }
}

/* ===== MUTE / PLAY BUTTON — text pill with animated sound icon ===== */
.mute-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  min-width: 228px;           /* stable size across both labels */
}

.mute-btn:hover {
  background: #333;
  transform: translateY(-1px);
}

.sound-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.sound-icon svg {
  display: block;
}
.sound-wave {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translate(0, -50%);
  opacity: 0;
}
.sound-wave--1 { width: 8px;  height: 8px;  }
.sound-wave--2 { width: 14px; height: 14px; }

/* Rays radiate outward while music plays */
.mute-btn.is-playing .sound-wave {
  animation: sound-wave-emit 1.4s ease-out infinite;
}
.mute-btn.is-playing .sound-wave--1 { animation-delay: 0s; }
.mute-btn.is-playing .sound-wave--2 { animation-delay: 0.5s; }

@keyframes sound-wave-emit {
  0%   { opacity: 0;   transform: translate(-2px, -50%) scale(0.4); }
  30%  { opacity: 0.95;                                             }
  100% { opacity: 0;   transform: translate(4px, -50%) scale(1.2);  }
}

/* Pulses when autoplay is blocked — tap to start music */
.mute-btn.needs-tap {
  animation: mutePulse 1.4s ease-in-out infinite;
}

@keyframes mutePulse {
  0%,100% { box-shadow: 0 0 0 0    rgba(0,0,0,0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(0,0,0,0);    }
}

/* ===== TESTIMONIALS MARQUEE ===== */
.testimonials-marquee {
  position: relative;
  z-index: 2;
  background: var(--surface);
  padding: 20px 0;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  gap: 20px;
  animation: scroll-testimonials 30s linear infinite;
  width: max-content;
}

@keyframes scroll-testimonials {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.testimonial-card {
  min-width: 340px;
  max-width: 340px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
}

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-accent);
}

.testimonial-card strong {
  font-family: 'Fraunces', serif;
  font-size: 15px;
}

.testimonial-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ===== PORTFOLIO STRIP ===== */
.portfolio-strip {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 40px 0;
  overflow: hidden;
}

.portfolio-images {
  display: flex;
  gap: 20px;
  padding: 0 32px;
}

.portfolio-img {
  min-width: 280px;
  height: 280px;
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.03) 8px,
    rgba(0, 0, 0, 0.03) 16px
  );
  border: 1px solid var(--border);
}

/* ===== WORKS ===== */
.works {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 80px 32px;
}

.section-eyebrow {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.section-subtext {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 48px;
  line-height: 1.7;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.work-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.work-card.shrinking {
  transform: scale(var(--card-scale, 1));
  transform-origin: center bottom;
  transition: transform 0.1s linear, box-shadow 0.3s;
}

.work-card.shrinking:hover {
  transform: scale(var(--card-scale, 1)) translateY(-4px);
}

.work-card-visual {
  height: 320px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--bg-light);
  overflow: hidden;
}

.work-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.work-card-shapes {
  position: relative;
  width: 200px;
  height: 160px;
}

.shape {
  position: absolute;
  border-radius: var(--radius);
  border: 3px solid var(--white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.shape-rounded {
  width: 180px;
  height: 120px;
  background: var(--white);
  top: 0;
  left: 0;
  border-radius: var(--radius-xl);
}

.shape-square {
  width: 90px;
  height: 90px;
  bottom: 0;
  right: 0;
  border-radius: var(--radius);
}

.work-card-info {
  padding: 20px 28px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.work-title {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 22px;
  font-weight: 400;
}

.work-tags {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== SERVICES / WHAT I'M LOOKING FOR ===== */
.services {
  position: relative;
  z-index: 5;
  /* Card-stacking, same pattern as .why-work:
     1. 100svh sticky pin  (services content stays in viewport)
     2. 100svh CTA slide-up (cta-footer rises from below to cover us).
     The -100svh margin-top is what lets services itself slide over the
     why-work pin above. The extra 100svh of height is the scroll budget
     for the NEXT card (cta) to slide over THIS pin. */
  height: calc(100svh + 100svh);
  background: var(--surface);
  border-radius: 32px 32px 0 0;
  margin-top: -100svh;
  box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.12),
              0 -4px 20px rgba(0, 0, 0, 0.06);
}

/* Mirrors .why-sticky: pins at top while cta-footer scrolls up over it. */
.services-sticky {
  position: sticky;
  top: 0;
  /* min-height, not height — so if the role-groups + Yes/No box + CTA are
     taller than the viewport (short laptop, iPhone SE), the section grows
     naturally and the page scrolls. svh = safe-from-Safari's dynamic UI. */
  min-height: 100svh;
  /* NO overflow: hidden — was clipping content when the viewport was
     shorter than the content itself. Page scroll handles the overflow. */
  border-radius: 32px 32px 0 0;
  /* flex-start + heading-friendly top padding so "What I'm looking for"
     sits near the top of the pinned area, not floating at mid-viewport
     where a 13" MacBook in Safari fullscreen clipped it. */
  padding-top: clamp(4rem, 8vh, 6rem);
  padding-bottom: clamp(2rem, 6vh, 5rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1rem, 3vh, 2rem);
}

.services-title {
  text-align: center;
  margin-bottom: 12px;
}

.services-desc {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 640px;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.2vw, 17px);
}

/* Company-name highlight inside the big "Why X should work with me" heading */
.why-big-target {
  font-style: italic;
}

.section-title {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 16px;
  /* font-size / line-height / max-width come from the shared headline rule. */
}

.section-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* ── Role badges — horizontal row above box (legacy, kept for any stray refs) ── */
.roles-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.role-badge {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.18);
  color: var(--text-secondary);
  background: transparent;
}

/* ── Two-group role cards (replaces single flat badge row) ── */
.roles-groups-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.roles-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto 18px;
}

.role-group {
  background: var(--surface);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.role-group-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--text-primary);
}

.role-group-items {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.roles-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--text-secondary);
  text-align: center;
  margin: 0 auto 22px;
  max-width: 640px;
}

/* Inline CTA button at the bottom of the What-I'm-looking-for sticky — gives
   the reader a single-click exit to the contact section without scrolling further. */
.services-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 32px;
  background: var(--text-primary);
  color: var(--white);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  align-self: center;
}

.services-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* ── Yes / No box ── */
/* Wrapper exists so the searching cartoon can be positioned absolutely
   right next to the box and layered BEHIND it via z-index. The top
   margin reserves room above the box for the cartoon's body to show. */
.looking-wrap {
  position: relative;
  margin-top: 70px;
}

/* Cartoon stands ON the top edge of the box: her feet/microscope visually
   touch the yellow edge. The image has ~60px of transparent padding at
   the bottom, so the overlap value (90px) is chosen so that her VISIBLE
   feet — not the image's alpha edge — line up with the box top, closing
   the gap the user marked with a red line. Layered behind via z-index. */
.looking-cartoon {
  position: absolute;
  right: 3%;
  bottom: calc(100% - 90px);
  width: 220px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.looking-box {
  display: flex;
  gap: 0;
  background: var(--bg);
  border-radius: var(--radius-xl);
  padding: 24px 40px;
  position: relative;
  z-index: 2; /* sits above .looking-cartoon */
  overflow: hidden;
}

/* grain texture */
.looking-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  border-radius: var(--radius-xl);
}

.looking-col {
  flex: 1;
  position: relative;
  z-index: 1;
}

.looking-divider {
  width: 1px;
  background: rgba(0,0,0,0.12);
  margin: 0 48px;
  position: relative;
  z-index: 1;
}

.looking-col-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 16px;
}

.looking-tags {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.looking-tag {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  display: flex;
  align-items: flex-start;     /* pin icon to the first line, not vertical-middle of 2 lines */
  text-align: left;            /* override the parent section's center-align */
  gap: 12px;
}

.looking-tag::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  margin-top: 1px;             /* nudge down so ✓ optically centers on the first line's cap-height */
}

.looking-tag.yes::before {
  content: '✓';
  background: var(--text-primary);
  color: var(--white);
}

.looking-tag.no::before {
  content: '✕';
  background: transparent;
  border: 2px solid rgba(0,0,0,0.2);
  color: var(--text-muted);
}

.looking-tag.no {
  color: var(--text-muted);
}

/* ===== PERSONAL NOTE (company-specific card, only shown when companies.json has personalNote) ===== */
.personal-note {
  position: relative;
  z-index: 2;
  /* Fluid 60–130px top, 16–48px sides, 60–120px bottom. */
  padding: clamp(60px, 7vw, 130px) clamp(16px, 4vw, 48px) clamp(60px, 7vw, 120px);
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.07);
  display: none;
  text-align: center;
}

body.has-personal-note .personal-note {
  display: block;
  /* Card-stacking pattern (same as .services / .cta-footer):
     1. 100svh sticky pin     → personal-note content stays in view
     2. 100svh scroll budget  → journey slides up from below as a yellow card
     The inner .personal-note-inner handles the sticky pin so the section itself
     can provide the extra scroll budget. */
  height: calc(100svh + 100svh);
  padding: 0;
}

body.has-personal-note .personal-note-inner {
  position: sticky;
  top: 0;
  /* min-height + svh: pin fits viewport but the 3 cards can grow + wrap
     down if the viewport is short. NO overflow: hidden — if title + intro
     + cards exceed the viewport, the page scrolls to reveal them. */
  min-height: 100svh;
  /* flex-start + generous padding-top so the heading sits near the top of
     the pinned area instead of floating in vertical-centre (where Safari
     fullscreen on a 13" MacBook clipped it against the section boundary). */
  padding-top: clamp(4rem, 8vh, 6rem);
  padding-bottom: clamp(2rem, 6vh, 5rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

body.has-personal-note .personal-note-points {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* On custom.html the about section is removed from the HTML, so the journey
   section card-stacks directly over the personal-note's white card. Butter
   yellow fill (matches hero) for the whole journey stretch — "50 Creative
   Careers" area AND the polaroid grid below the dashed line — so they read
   as one continuous block. margin-top: -100svh makes the journey rise over
   the personal-note's scroll-budget zone as you scroll, mirroring how the
   personal-note card rises over the hero. */
body.has-personal-note .journey {
  background: var(--bg);
  border-radius: 32px 32px 0 0;
  margin-top: -100svh;
  box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.12),
              0 -4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 3;
}

body.has-personal-note .journey-sticky {
  background: var(--bg);
}

body.has-personal-note .journey-polaroids {
  background: var(--bg);
}

/* The journey-sticky radial gradient is a white glow — drop it when the section is yellow
   so the yellow isn't washed out behind the polaroid cards. */
body.has-personal-note .journey-sticky::before {
  content: none;
}

.personal-note-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.personal-note-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.personal-note-psst {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  color: hsl(12, 70%, 58%);
  letter-spacing: -0.01em;
}

.personal-note-label {
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Hide empty optional fields so spacing stays clean when a company JSON omits intro/eyebrow */
.personal-note-intro:empty,
.personal-note-label:empty { display: none; }

.personal-note-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 36px;
  /* font-size / line-height / max-width come from the shared headline rule. */
}

.personal-note-title em {
  font-style: italic;
  color: hsl(12, 70%, 58%);
}

.personal-note-intro {
  font-family: 'Nunito', sans-serif;
  /* Fluid body copy: 14px → 20px across the range. */
  font-size: clamp(14px, 0.85rem + 0.25vw, 20px);
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: min(100% - 2rem, 760px);
  margin: 0 auto 72px;
}

.personal-note-intro em,
.personal-note-intro strong {
  font-style: italic;
  color: hsl(12, 70%, 58%);
  font-weight: 600;
}

.personal-note-points {
  display: grid;
  /* Auto-fit grid: columns stay at minimum 280px wide, reflow to 1-3 columns
     based on available space. Replaces the old explicit 3-col default + a
     @media (max-width: 900px) breakpoint that forced single-column. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
}

.personal-note-card {
  background: #fff;
  border-radius: 22px;
  padding: 44px 28px 36px;
  text-align: center;
  position: relative;
  border: 1.5px solid hsla(48, 30%, 88%, 1);
  box-shadow: 0 6px 24px rgba(0,0,0,0.05);
  /* Entrance state — cards start lifted and hidden, slide up when section enters viewport */
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.8, 0.3, 1),
    transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1),
    box-shadow 0.25s ease,
    translate 0.25s ease;
}

body.personal-note-visible .personal-note-card {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger each card so they cascade in */
body.personal-note-visible .personal-note-card:nth-child(1) { transition-delay: 0ms,   0ms,   0ms, 0ms; }
body.personal-note-visible .personal-note-card:nth-child(2) { transition-delay: 180ms, 180ms, 0ms, 0ms; }
body.personal-note-visible .personal-note-card:nth-child(3) { transition-delay: 360ms, 360ms, 0ms, 0ms; }

.personal-note-card:hover {
  translate: 0 -4px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.09);
}

/* Tape sticker on each card — reuses the .polaroid-tape class used in the journey section */
.personal-note-card > .polaroid-tape {
  top: -14px;
  width: 84px;
  height: 22px;
}

.personal-note-card-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 26px;
  color: hsl(12, 70%, 58%);
  display: block;
  margin-bottom: 20px;
  font-weight: 700;
}

.personal-note-card-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.personal-note-card-body {
  font-family: 'Nunito', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ===== ABOUT ===== */
.about {
  position: relative;
  z-index: 2;
  /* Fluid 48–110px top, 16–48px sides. */
  padding: clamp(48px, 6vw, 110px) clamp(16px, 4vw, 48px) 0;
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.about-center {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}

.about-center .section-title {
  margin-bottom: 28px;
}

.about-bio {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 16px;
}

.about-pill {
  display: inline-block;
  background: var(--bg);
  padding: 2px 12px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Photo strip ── */
.about-photo-strip {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding: 12px 0 0;
}

.about-photo-strip::before,
.about-photo-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.about-photo-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}

.about-photo-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}

.about-photo-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: photoStripScroll 40s linear infinite;
}

.about-photo-track img {
  width: 200px;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
}

@keyframes photoStripScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carousel-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: carouselScroll 35s linear infinite;
}

.carousel-track img {
  width: 200px;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: blur(3px) brightness(0.8) saturate(0.7);
  flex-shrink: 0;
  transition: filter 0.5s ease;
}

.carousel-track img:hover {
  filter: blur(0) brightness(1) saturate(1);
}

@keyframes carouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.reveal--delay {
  transition-delay: 0.15s;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== MY JOURNEY — horizontal scroll ===== */
.journey {
  position: relative;
  z-index: 2;
  background: var(--surface);
  height: 550vh;
}

.journey-sticky {
  position: sticky;
  top: 0;
  /* min-height + svh: pin fits viewport but can grow if content exceeds.
     overflow: hidden kept — this is the journey's horizontal scroll-jack
     track, which is intentionally 300vw wide and MUST be clipped at the
     sticky boundary. It's not clipping user-reading content. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Generous top padding so "My journey" has breathing room from the
     viewport's top edge during phase 1 of the scroll-jack. The JS lifts
     the title up ~30vh during phase 2 to clear room for the polaroid
     pile, so this floor needs to be comfortable on its own. */
  padding: clamp(6rem, 12vh, 10rem) 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

.journey-title {
  flex-shrink: 0;
  text-align: center;
  /* margin-block only — don't touch margin-inline so the shared headline
     rule's `margin-inline: auto` can still centre the (narrow) title block
     horizontally in its flex-column parent. */
  margin-block: 0 10px;
  position: relative;
  z-index: 5;
  will-change: transform;
}

/* Tanya's personal intro — sits under "My journey" so the section feels signed by her */
.journey-intro {
  flex-shrink: 0;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 5;
}

/* Horizontal track — holds all panels side by side */
.journey-track {
  flex: 1;
  min-height: 0;
  display: flex;
  width: 300vw; /* 3 panels × 100vw */
  will-change: transform;
  margin-bottom: 100px; /* room for car */
}

/* Each panel fills the viewport */
.journey-panel {
  width: 100vw;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 0 64px;
  box-sizing: border-box;
}

.journey-panel--a .journey-photos { order: 1; }
.journey-panel--a .journey-text   { order: 2; }
.journey-panel--b .journey-text   { order: 1; }
.journey-panel--b .journey-photos { order: 2; }

.journey-photos {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-polaroid {
  position: absolute;
  width: clamp(160px, 16vw, 230px);
  background: #fff;
  padding: 10px 10px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.08);
  border-radius: 2px;
}

.journey-polaroid img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.journey-polaroid .photo-polaroid-label {
  height: 36px;
  font-size: 12px;
  padding: 0 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-polaroid--1 {
  transform: rotate(-6deg) translate(-115px, -40px);
  z-index: 1;
}

.journey-polaroid--2 {
  transform: rotate(5deg) translate(115px, 40px);
  z-index: 2;
}

.journey-text {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

.journey-panel--a .journey-text { justify-self: start; text-align: left; }
.journey-panel--b .journey-text { justify-self: end;   text-align: left; }

/* Panel 3 — title card */
.journey-panel--title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-title-card {
  text-align: center;
}

.journey-careers-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-style: normal;
  color: var(--text-primary);
  /* margin-block only — preserves margin-inline: auto from the shared
     headline rule. */
  margin-block: 8px;
  /* font-size / line-height / max-width come from the shared headline rule. */
}

/* Mobile-only short intro — hidden on desktop, shown via @media (max-width: 768px) */
.journey-careers-story--mobile {
  display: none;
}

/* Polaroid-details-live is injected by script.js into the DOM unconditionally,
   but only used on mobile. Hide it by default; @media (max-width: 768px) shows it. */
.polaroid-details-live {
  display: none;
}

/* Mobile-only "values" block below the services title — hidden by default,
   shown on mobile via @media query. Replaces the Yes/No box on small screens. */
.looking-mobile-values {
  display: none;
}

.journey-careers-story {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 600px;
  margin: 12px auto 0;
}


/* ── Driving car ── */
.journey-car {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 300px;
  height: auto;
  z-index: 10;
  will-change: transform;
  pointer-events: none;
}

.journey-car img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.25s ease;
}

/* Idle is in flow (gives container height); speed stacks on top */
.journey-car-speed {
  position: absolute;
  bottom: 0;
  left: 0;
}

.journey-car-idle  { opacity: 1; }
.journey-car-speed { opacity: 0; }

.journey-car.is-driving .journey-car-idle  { opacity: 0; }
.journey-car.is-driving .journey-car-speed { opacity: 1; }

/* ── Dotted trail behind car (phase 1 only) ── */
.journey-trail {
  position: absolute;
  bottom: 55px;
  left: 0;
  height: 4px;
  width: 0;
  background: none;
  border-bottom: 3px dashed var(--text-muted);
  opacity: 0.35;
  z-index: 9;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.journey-trail.is-hidden {
  opacity: 0;
}

.journey-era {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.journey-heading {
  font-family: 'Fraunces', serif;
  /* Fluid 20px → 44px across 320–2560px. */
  font-size: clamp(20px, 0.75rem + 1.4vw, 44px);
  font-weight: 400;
  font-style: normal;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.journey-body {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--text-secondary);
  line-height: 1.75;
}

/* When a panel has multiple body paragraphs, space them apart */
.journey-body + .journey-body { margin-top: 14px; }

.journey-dots,
.journey-dot,
.journey-photo,
.journey-photo--left,
.journey-photo--right { display: none; }

/* Each group is a self-contained panel with its own grid background */
.journey-photo-group {
  position: relative;
  border-radius: 20px;
  padding: 10px;
}

/* Group A — yellow line grid (early years) */
.journey-photo-group--a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(48, 75%, 76%) 1px, transparent 1px),
    linear-gradient(90deg, hsl(48, 75%, 76%) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: 20px;
  z-index: 0;
}

/* Group B — dot grid, warm cream (later years) */
.journey-photo-group--b::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, hsl(45, 55%, 78%) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  border-radius: 20px;
  z-index: 0;
}

.journey-photo-pair {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.journey-photo-frame {
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.12);
  overflow: visible; /* allow tape to peek above top */
  display: flex;
  flex-direction: column;
  position: relative;
}

.journey-photo-group--a .journey-photo-frame:nth-child(1) { transform: rotate(-2deg); }
.journey-photo-group--a .journey-photo-frame:nth-child(2) { transform: rotate(1.5deg); }
.journey-photo-group--b .journey-photo-frame:nth-child(1) { transform: rotate(-1.5deg); }
.journey-photo-group--b .journey-photo-frame:nth-child(2) { transform: rotate(2deg); }

.journey-photo-frame img {
  width: calc(100% - 12px);
  height: 160px;
  object-fit: cover;
  margin: 6px 6px 0;
  flex-shrink: 0;
  display: block;
}

.journey-photo-frame .photo-polaroid-label {
  height: 36px;
  font-size: 13px;
  padding: 0 8px 4px;
}

/* kept for back-compat but no longer rendered */
.journey-photo-divider {
  display: none;
}

.journey-photo-divider::before {
  content: '';
  position: absolute;
  inset: -10px 0;
  background: linear-gradient(
    to bottom,
    transparent,
    hsl(45, 70%, 93%) 40%,
    hsl(45, 70%, 93%) 60%,
    transparent
  );
  z-index: -1;
}

.journey-flipper-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-flipper-inner.flipped {
  transform: rotateY(180deg);
}

.journey-flipper-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  border: 4px solid var(--white);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.journey-flipper-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journey-flipper-back {
  transform: rotateY(180deg);
}

/* ===== THE PIVOT — sticky scroll reveal ===== */
.pivot {
  position: relative;
  z-index: 3;
  background: hsl(48, 65%, 97%);
  border-radius: 48px 48px 0 0;
  margin-top: -120px;
  /* overflow must stay visible/default — overflow:clip/hidden breaks sticky children */
  box-shadow: 0 -32px 80px rgba(0, 0, 0, 0.14);
}

/* Outer padding wrapper */
.pivot-inner {
  padding: 0 64px;
  /* no overflow set — must not clip sticky child */
}

/* Two-column sticky reveal grid */
.pivot-sticky-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ── Left: sticky photo column ── */
.pivot-sticky-left {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 64px 0 48px;
}

.pivot-left-label {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.pivot-photo-panel {
  height: clamp(260px, 40vh, 380px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.pivot-panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pivot-panel-img.swapping {
  opacity: 0;
  transform: scale(1.04);
}

/* ── Right: natural scroll column ── */
.pivot-scroll-right {
  /* natural flow — no fixed height */
}

/* Intro entry (header) — natural height, no huge gap */
.pivot-entry--intro {
  padding: 64px 0 56px;
}

.pivot-title {
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: 12px;
}

.pivot-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.85;
}

.pivot-sub em {
  font-style: normal;
  color: var(--text-primary);
  font-weight: 600;
}

/* Individual career entry */
.pivot-entry {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 60px;
  border-top: 1px solid var(--border);
}

.pivot-entry-eyebrow {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 13px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 10px;
}

.pivot-entry-title {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.pivot-entry-num {
  color: var(--bg-dark);
}

.pivot-entry-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 420px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* ── Instagram thumbnail card ── */
.pivot-ig-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 10px 16px 10px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  width: fit-content;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pivot-ig-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.pivot-ig-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.pivot-ig-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pivot-ig-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pivot-ig-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.pivot-ig-sub {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Skip button — pill below photo ── */
.pivot-skip {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 2px solid var(--text-primary);
  border-radius: 40px;
  background: transparent;
  width: fit-content;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.pivot-skip:hover {
  background: var(--text-primary);
  color: hsl(48, 65%, 97%);
}

/* ===== CAREERS REEL — native horizontal scroll ===== */
.careers-reel {
  position: relative;
  z-index: 3;
  background: hsl(45, 85%, 95%);
  /* Fluid 56–120px top, 48–100px bottom. */
  padding: clamp(56px, 7vw, 120px) 0 clamp(48px, 6vw, 100px);
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
}

.careers-reel-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* overridden above in sticky container */

.careers-reel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 64px;
  gap: 40px;
}

.careers-reel-header-left {
  flex: 1;
  max-width: 620px;
}

.careers-reel-header .section-eyebrow {
  color: var(--text-secondary);
  font-size: clamp(18px, 2.2vw, 28px);
  margin-bottom: 4px;
}

.careers-reel-title {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 16px 0;
}

.careers-reel-story {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0;
}

/* Counter + scroll hint — sits right above the card track, right side */
.careers-reel-cue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 0 64px;
}

.careers-reel-count {
  font-family: 'Nunito', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.careers-scroll-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0.60;
  letter-spacing: 0.05em;
}

/* Track wrapper — native horizontal scroll */
.careers-reel-track-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 8px 0 24px;
  padding-left: 64px;
  scrollbar-width: none;
}
.careers-reel-track-wrap::-webkit-scrollbar { display: none; }
.careers-reel-track-wrap.is-dragging { cursor: grabbing; }

.careers-reel-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding-right: 64px;
}

.careers-reel-spacer { display: none; } /* no longer needed */

/* ── Individual career card ── */
.career-card {
  width: 260px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.career-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.13);
}

/* Photo area — top of card */
.career-card-photo {
  position: relative;
  height: 120px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--accent, hsl(48,100%,62%)) 35%, hsl(45,70%,91%));
  overflow: hidden;
}

.career-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Number badge overlaid on photo */
.career-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent, hsl(48,100%,62%));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}

/* Text body */
.career-card-body {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.career-card-name {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.career-card-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}

/* Circular role tags */
.career-card-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.career-role-tag {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent, hsl(48,100%,62%)) 30%, white);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, hsl(48,100%,62%)) 50%, transparent);
  letter-spacing: 0.04em;
}

/* Watch on Instagram button */
.career-ig-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 13px;
  background: var(--text-primary);
  color: var(--white);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
  width: fit-content;
}

.career-ig-btn:hover {
  opacity: 0.75;
}

/* Ghost "coming soon" card */
.career-card--ghost {
  background: hsl(45, 55%, 92%);
  border-style: dashed;
  box-shadow: none;
}
.career-card--ghost .career-card-photo {
  background: hsl(45, 50%, 88%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.career-card--ghost .career-card-photo::after {
  content: '+43';
  font-family: 'Nunito', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: rgba(0,0,0,0.13);
  letter-spacing: -0.04em;
}
.career-card--ghost .career-card-body {
  background: transparent;
}

/* ===== CAREERS POLAROID VIEW ===== */

/* stage: wraps the scroll row */
.polaroid-stage {
  margin: 24px 0 0;
  position: relative;
  flex: 1;
  min-height: 0;
}

/* horizontal scroll row — polaroids sit on the dashed line */
.careers-polaroid-grid {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 16px 48px 48px;
  align-items: flex-start;
  margin-top: 0;
}

.careers-polaroid-grid:active { cursor: grabbing; }

/* hide scrollbar */
.careers-polaroid-grid::-webkit-scrollbar { display: none; }
.careers-polaroid-grid { -ms-overflow-style: none; scrollbar-width: none; }

/* single polaroid wrapper — taped directly to the dashed line */
.polaroid-card {
  perspective: 1200px;
  cursor: pointer;
  flex-shrink: 0;
  width: 234px;
  margin: 0 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  position: relative;
  z-index: 1;
  transition: z-index 0s, opacity 0.7s ease, margin-top 0.7s ease;
  opacity: 0;
  margin-top: 80px;
}

.polaroid-card.slide-up {
  opacity: 1;
  margin-top: 0;
}

.polaroid-card:hover {
  z-index: 20;
}

/* chime removed — polaroids sit directly on the dashed line */
.polaroid-card::before {
  display: none;
}

/* tape sticker — sits above the photo, pinned to the dashed line */
.polaroid-tape {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-rot, 3deg));
  width: 56px;
  height: 24px;
  background: var(--tape, hsla(44,90%,72%,0.55));
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(0px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* flip container — rotation lives here, not on the wrapper */
.polaroid-inner {
  width: 100%;
  height: 336px;
  transform-style: preserve-3d;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
  position: relative;
}

.polaroid-card:hover .polaroid-inner {
  transform: rotate(0deg) rotateY(180deg) scale(1.06);
}

/* front & back shared */
.polaroid-front,
.polaroid-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #ffffff;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.08),
    0 8px 32px rgba(0,0,0,0.13),
    0 1px 2px rgba(0,0,0,0.06);
  border-radius: 2px;
  overflow: visible; /* tape peeks above */
}

/* FRONT */
.polaroid-front {
  display: flex;
  flex-direction: column;
}

.polaroid-photo {
  height: 258px;   /* fixed — keeps all polaroids portrait & identical */
  flex-shrink: 0;
  overflow: hidden;
  margin: 10px 10px 0;
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid-photo--empty {
  background: hsl(44, 30%, 91%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 258px;
  flex-shrink: 0;
  margin: 10px 10px 0;
}

.polaroid-photo--empty span {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.5;
  letter-spacing: 0.05em;
}

.polaroid-ghost-count {
  font-family: 'Space Mono', monospace !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,0.12) !important;
  opacity: 1 !important;
  letter-spacing: -0.04em !important;
}

/* white label strip */
.polaroid-label {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 14px;
  gap: 8px;
}

.polaroid-name {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  color: #222;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.polaroid-num {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  font-style: normal;
  opacity: 0.45;
  flex-shrink: 0;
  letter-spacing: 0.08em;
}

/* BACK */
.polaroid-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px 16px;
  background: #fffcf4;
}

.polaroid-back-num {
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  font-style: normal;
  opacity: 0.4;
  letter-spacing: 0.1em;
}

.polaroid-back-title {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 22px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.15;
  margin: 0;
}

.polaroid-back-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.polaroid-back-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.polaroid-back-tags span {
  font-family: 'Nunito', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: hsl(44, 60%, 88%);
  color: #444;
  letter-spacing: 0.05em;
}

.polaroid-back-ig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  padding: 5px 10px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.04em;
  width: fit-content;
  text-decoration: none;
  transition: opacity 0.2s;
}

.polaroid-back-ig:hover {
  opacity: 0.72;
}

/* ghost card style */
.polaroid-card--ghost .polaroid-front {
  background: hsl(44, 35%, 94%);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.08);
}

/* ===== 50 CREATIVE CAREERS SECTION ===== */
/* Polaroid layer — absolutely positioned, fills sticky, shown in phase 2 */
/* Journey polaroid stage — slides up from below in phase 2 */
.journey-polaroids {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding: 0;
  box-sizing: border-box;
  transform: translateY(100%);
  will-change: transform;
  pointer-events: none;
  z-index: 20;
  border-top: 3px dashed rgba(0, 0, 0, 0.22);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.06);
  /* Clip the polaroids here so the grid can use overflow: visible
     and let wheel events bubble to the window scroll */
  overflow: hidden;
}

.journey-polaroids.is-visible {
  pointer-events: auto;
}

.journey-title-card {
  will-change: transform;
}

.journey-polaroids .careers-polaroid-grid {
  display: flex;
  flex-direction: row;
  gap: 0;
  /* IMPORTANT: do NOT use overflow-x: auto here.
     A horizontal scroll container eats vertical wheel events on macOS
     trackpads (deltaY → deltaX conversion), which caused 5–10 scrolls
     to advance past the section. Instead we clip at the parent and
     use JS pointer drag to pan horizontally. */
  overflow: visible;
  padding: 16px 24px 48px;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  cursor: grab;
  will-change: transform;
  user-select: none;
  touch-action: pan-y;
}

.journey-polaroids .careers-polaroid-grid.is-dragging {
  cursor: grabbing;
}

/* polaroid grid is not scrollable — cards overflow and are clipped by the sticky container */

/* ===== WHY WORK WITH ME ===== */
.why-work {
  position: relative;
  z-index: 4;
  background: var(--bg);
  /* Three zones stacked into one scroll budget:
     1. Card reveal  →  1100px  (cards 1–5 slide up)
     2. Read pause   →   400px  (all cards visible, nothing moving — user can read card 5)
     3. Services up  →  100svh   (services slides up to cover the sticky)
     Plus the 100svh sticky base itself. */
  height: calc(100svh + 1100px + 400px + 100svh);
  border-radius: 32px 32px 0 0;
  margin-top: -100svh;
  box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.12),
              0 -4px 20px rgba(0, 0, 0, 0.06);
}

.why-sticky {
  position: sticky;
  top: 0;
  /* min-height so cards + big-text can grow if needed; svh for safe Safari
     chrome. overflow: hidden kept only for the card pile animation that
     relies on clipping — this is a purely-decorative case, not content. */
  min-height: 100svh;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
}

/* ── Big background text ── */
.why-big-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  /* Fluid 28px → 112px across 320–2560px (this is the big bg display). */
  font-size: clamp(28px, 1rem + 4vw, 112px);
  color: var(--text-primary);
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
  letter-spacing: -0.02em;
  text-align: center;
}

.why-big-line {
  display: block;
}

.why-big-line--prefix {
  display: inline-flex;
  gap: 0.25em;
  align-items: baseline;
}

/* Keep the brand emphasis italic only when it's on its own line */
.why-big-target--solo {
  font-style: italic;
}

/* ── Cards ── */
/* Aligned grid layout: 3 cards on top row, 2 centered on bottom row.
   Cards start hidden (opacity 0 + translateY) and reveal in sequence
   as the user scrolls through the section (JS adds .shown one at a time). */
.why-cards {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 12px 18px;
  padding: 48px 40px 24px;
  pointer-events: none;
  z-index: 1;
}

.why-card {
  position: relative;
  flex: 0 0 290px;
  width: 290px;
  background: var(--surface);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10),
              0 4px 14px rgba(0, 0, 0, 0.05);
  /* Invisible (opacity:0) until the Why section scrolls in — block clicks
     while hidden so the cards don't intercept clicks on content below
     (e.g. the "Watch on Instagram" buttons in the journey polaroid pile,
     which the -800px margin pulls behind these cards). */
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease-out;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
}

.why-card-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.why-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.why-card-content {
  flex: 1;
}

/* Hidden starting state — slight offset + subtle rotation per card */
.why-card[data-index="0"] { transform: translateY(60px) rotate(-2deg); }
.why-card[data-index="1"] { transform: translateY(60px) rotate(2deg); }
.why-card[data-index="2"] { transform: translateY(60px) rotate(1.5deg); }
.why-card[data-index="3"] { transform: translateY(60px) rotate(-1.5deg); }
.why-card[data-index="4"] { transform: translateY(60px) rotate(0.5deg); }
.why-card[data-index="5"] { transform: translateY(60px) rotate(-1deg); }

/* Revealed state — settle into grid position */
.why-card.shown { pointer-events: auto; }
.why-card[data-index="0"].shown { transform: translateY(0) rotate(-2deg); opacity: 1; }
.why-card[data-index="1"].shown { transform: translateY(0) rotate(2deg); opacity: 1; }
.why-card[data-index="2"].shown { transform: translateY(0) rotate(1.5deg); opacity: 1; }
.why-card[data-index="3"].shown { transform: translateY(0) rotate(-1.5deg); opacity: 1; }
.why-card[data-index="4"].shown { transform: translateY(0) rotate(0.5deg); opacity: 1; }
.why-card[data-index="5"].shown { transform: translateY(0) rotate(-1deg); opacity: 1; }

.why-title {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  font-style: normal;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.why-num {
  color: var(--bg-dark);
}

.why-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ── Alternate card layout (applied to all 6 why-cards) ──
   Text on top with a large faded ghost number above the title; character
   illustration sits at the bottom-right. Sized to fit 3×2 grid within 100svh. */
.why-card--alt {
  overflow: hidden;
  /* Reserve bottom space to match the .why-card-art height below. */
  padding-bottom: 96px;
  min-height: 210px;
}

.why-card--alt .why-card-content {
  position: relative;
  z-index: 2;
}

.why-card--alt .why-num-ghost {
  display: block;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 0.9;
  color: rgba(0, 0, 0, 0.08);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.why-card--alt .why-title--alt {
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 6px;
}

/* Illustration: fixed-size "portrait" frame. The cropped/*.png characters
   are tall full-body (aspect ~0.75:1) while cartoon_thingsdone.png is
   nearly square. To give every card the SAME visual weight as the
   thingsdone layout the user liked, we use object-fit: cover + top
   anchor so tall images crop their bottom half, showing only the
   head/torso — effectively turning the tall illustrations into a
   "half-image" matching the square one. */
.why-card-art {
  position: absolute;
  bottom: 0;
  right: 6px;
  width: 90px;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.why-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.why-list li {
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  color: var(--text-muted);
  position: relative;
  padding-left: 14px;
}

.why-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--bg-dark);
  font-size: 18px;
  line-height: 1;
}

/* ── Right sticky panel ── */
.why-panel {
  position: sticky;
  top: 100px;
}

.why-panel-inner {
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
}

.why-panel-img {
  width: auto;
  height: 400px;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease, transform 0.5s ease;
  transform: scale(1);
  animation: pulse-breathe 3.6s ease-in-out infinite;
}

/* pause pulse during card-swap so transitions don't fight */
.why-panel-img.swap-out {
  animation: none;
}

.why-panel-img.swap-out {
  opacity: 0;
  transform: scale(0.88);
}
.why-panel-img.swap-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* ===== EXTENDED TESTIMONIALS ===== */
.extended-testimonials {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 80px 32px 100px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.testimonial-video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
}

.testimonial-video-placeholder {
  height: 300px;
  background: linear-gradient(135deg, var(--bg-medium), var(--bg-accent));
  position: relative;
  overflow: hidden;
}

.testimonial-video-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.testimonial-video-info {
  padding: 20px 24px;
  position: relative;
}

.testimonial-company-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-dark);
  margin-bottom: 8px;
}

.testimonial-video-info h4 {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 20px;
  font-weight: 400;
}

.testimonial-video-info p {
  font-size: 13px;
  color: var(--text-secondary);
}

.testimonial-quote-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-accent);
}

.quote-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  flex: 1;
}

.testimonial-quote-card strong {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
}

.testimonial-quote-card span {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== CTA FOOTER ===== */
.cta-footer {
  position: relative;
  /* Card-stacking: rises from below to cover the pinned .services-sticky.
     Services reserves 100svh at the end of its height for this slide-up. */
  z-index: 6;
  background: var(--bg);
  border-radius: 32px 32px 0 0;
  margin-top: -100svh;
  box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.12),
              0 -4px 20px rgba(0, 0, 0, 0.06);
  /* Heading-friendly top padding so "Call me, maybe?" has breathing room
     from the section boundary instead of being pushed into the fold by
     flex-center. */
  padding-top: clamp(4rem, 8vh, 6rem);
  padding-bottom: clamp(2rem, 6vh, 5rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
  /* svh so the CTA always fits the viewport but grows when Call-me title +
     desc + 4 contact pills + dancing-girl exceed a short viewport. */
  min-height: 100svh;
}

.cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border-radius: var(--radius-xl);
  padding: 40px 52px 0 52px;
  position: relative;
  overflow: visible;
  background-color: var(--bg-medium);
  min-height: 0;
}

/* grain on cta-box */
.cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  border-radius: var(--radius-xl);
}

.cta-content {
  max-width: 500px;
  position: relative;
  z-index: 2;
  padding-bottom: 40px;
}

.cta-title {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 16px;
  /* font-size / line-height / max-width come from the shared headline rule. */
  line-height: 1.2;
}

.cta-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 28px;
}

.cta-character {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  flex-shrink: 0;
  margin-right: 60px;
}

.cta-character .char-img {
  width: auto;
  height: 500px;
  display: block;
  animation: pulse-breathe 3.8s ease-in-out infinite 0.6s;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* Fluid footer padding: 40–72px top, 16–40px sides. */
  padding: clamp(40px, 5vw, 72px) clamp(16px, 3vw, 40px) 0;
}

.footer-links {
  display: flex;
  gap: 80px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.footer-col a:hover {
  opacity: 0.6;
}

.footer-copyright {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

/* ===== RESPONSIVE ===== */
/* Reference design: 1280–1439px. Below that: three step-down breakpoints collapse
   grids / release pins. Above that: two step-up breakpoints scale display type and
   padding so the layout doesn't feel lost in the middle of a wide monitor. */

/* ── Wide desktop (≥1440px) — large laptops, 1080p monitors ──
   Typography is fully fluid via clamp() on the base rules — no font-size
   overrides needed here anymore. This block only keeps the CONTAINER-width
   bumps so wide screens get bigger copy regions (cards, grids, images).   */
@media (min-width: 1440px) {
  /* Hero gets more breathing room */
  .hero {
    padding-top: 140px;
    padding-bottom: 80px;
    min-height: 95vh;
  }

  /* Content containers scale up so copy + cards don't feel tiny in the middle.
     The Why-me grid cap keeps the 3×2 layout intact (4×2 would break the design). */
  .about-center          { max-width: 880px; }
  .looking-box           { max-width: 960px; margin-left: auto; margin-right: auto; }
  .roles-groups          { max-width: 880px; }
  .personal-note-points  { max-width: 1400px; gap: 36px; }
  .why-cards             { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .why-card              { flex-basis: 340px; width: 340px; }
  .cta-box               { max-width: 1200px; margin-left: auto; margin-right: auto; }
  .about-photo-track img { width: 240px; height: 310px; }
}

/* ── Ultra-wide (≥1920px) — 2K displays, 4K laptops running at 1× scaling ──
   Same story as 1440: typography is already fluid, only container widths
   need to bump so the layout doesn't feel lost on big monitors. */
@media (min-width: 1920px) {
  .hero {
    padding-top: 160px;
    padding-bottom: 100px;
  }

  /* Same 3×2 cap, slightly larger cards + breathing room */
  .why-cards             { max-width: 1320px; padding-left: 48px; padding-right: 48px; }
  .why-card              { flex-basis: 380px; width: 380px; }
  .looking-box           { max-width: 1040px; }
  .personal-note-points  { max-width: 1500px; }
}

/* Three step-down breakpoints — desktop (>1024px) is the canonical design and stays
   untouched. Tablet (≤1024), small-screen (≤768), and mobile (≤480) each release
   animations/pins that don't survive shorter viewports and collapse multi-column
   grids to single stacks. */

/* ── Tablet & small desktop (≤1024px) ──
   NB: typography is fully fluid via clamp() on the base rules, so this block
   no longer overrides font-sizes — it only handles STRUCTURAL changes that
   need a hard breakpoint (hiding decorative characters, releasing sticky
   pins, etc). */
@media (max-width: 1024px) {
  /* Side-parallax characters, marquee, and scroll-parallax decorations don't add value
     on narrower screens — hide them to free horizontal space. */
  .character-left,
  .character-right,
  .marquee-bar {
    display: none;
  }

  /* Hero: video polaroid moves into the flow above the headline.
     The absolute positioning relies on side characters to balance it — without them
     it overflows, so we center it inline instead. */
  .hero {
    padding: 96px 24px 48px;
  }
  .hero-video {
    position: static;
    margin: 0 auto 32px;
    width: min(320px, 70vw);
  }
  .video-container {
    margin: 0 auto;
  }

  /* Release the sticky-pin on the Why-work section — the 3×2 grid doesn't fit the
     100svh pin on shorter viewports, so we let the cards flow naturally instead. */
  .why-work {
    height: auto;
    margin-top: 0;
  }
  .why-sticky {
    position: static;
    height: auto;
    padding: 80px 24px 60px;
    overflow: visible;
  }
  .why-cards {
    position: static;
    inset: auto;
    padding: 40px 0 0;
  }
  .why-card {
    flex: 0 0 calc(50% - 12px);
    width: calc(50% - 12px);
    max-width: 340px;
  }
  /* Show "Why …" bg text in flow since the cards are no longer absolute. */
  .why-big-text {
    position: static;
    transform: none;
    margin-bottom: 12px;
  }

  /* Services: same pattern — release the pin, let content flow vertically. */
  .services {
    height: auto;
    margin-top: 0;
  }
  .services-sticky {
    position: static;
    height: auto;
    padding: 80px 24px 60px;
    overflow: visible;
  }

  /* CTA footer: remove the -100svh stack-margin so it doesn't clobber services on mobile. */
  .cta-footer {
    margin-top: 0;
    height: auto;
  }

  /* Contact pills row: lay out as a 2-column grid so pills are aligned on both
     axes (flex-wrap alone lets uneven widths stagger the rows). */
  .cta-contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-pill {
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
  }

  /* Dancing-girl / party-lights character: smaller, centered, doesn't dominate.
     The desktop .char-img rule sets `height: 500px` with higher specificity, so
     we override with the same class selector + !important to force proper
     aspect-ratio scaling on narrow screens. */
  .cta-character .char-img {
    height: auto !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 320px;
  }

  /* Custom.html personal-note: the 200vh card-stack pin is desktop-only.
     On narrower screens, let the personal-note content flow naturally and the
     journey sits below it with a standard card-stack edge. */
  body.has-personal-note .personal-note {
    height: auto;
    padding: 0;
  }
  body.has-personal-note .personal-note-inner {
    position: static;
    height: auto;
    padding: 80px 24px 60px;
    overflow: visible;
    justify-content: flex-start;
  }
  body.has-personal-note .journey {
    margin-top: -28px;
    border-radius: 28px 28px 0 0;
  }

  /* CTA footer: box already stacks via the old 900px rule; consolidate here. */
  .cta-box {
    flex-direction: column;
    padding: 32px 24px 0;
    text-align: center;
    gap: 0;
  }
  .cta-character {
    margin: -8px auto 0;
  }
  .footer {
    flex-direction: column;
    gap: 24px;
  }
  .footer-copyright {
    text-align: center;
  }

  /* Other legacy grids kept from prior @900px rule. */
  .works-grid,
  .services-grid,
  .about-content,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .journey-row,
  .journey-row.journey-row--flip {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .journey-row--flip .journey-photos { order: 2; }
  .journey-row--flip .journey-text   { order: 1; }

  /* ── Tablet-range journey fix (Safari/iPad) ──
     The journey's two-column panels + desktop-geometry driving-car don't fit
     the 769–1024px range: text clips on the right, and the car overlaps
     panel copy because its path is tuned for wider viewports. Stack each
     panel into a single column, soften padding, and hide the car. The
     horizontal scroll-jack itself (track translate via vertical scroll)
     stays — only the inside of each panel simplifies. */
  .journey-panel {
    padding: 40px 32px;
    grid-template-columns: 1fr !important;
    align-items: start;
    gap: 24px;
  }
  .journey-panel--a .journey-photos,
  .journey-panel--b .journey-photos {
    justify-self: center;
    width: min(420px, 100%);
  }
  .journey-panel--a .journey-text,
  .journey-panel--b .journey-text {
    justify-self: start;
    width: 100%;
    max-width: 640px;
  }
  /* .journey-careers-title font-size is fluid via base clamp() — no override
     needed here anymore. */
  /* Car + dotted trail hidden — both rely on desktop-width geometry and
     end up overlapping copy at tablet widths. */
  .journey-car,
  .journey-trail {
    display: none !important;
  }
}

/* ── Small screen / portrait tablet & large phones (≤768px) ── */
@media (max-width: 768px) {
  /* Journey keeps the desktop scroll-jacking pattern — vertical scroll drives
     horizontal translate on the track. Extra height on mobile spreads the
     per-card reveal across more scroll (a single thumb-swipe advances one
     card instead of five). */
  .journey {
    background: var(--surface);
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    height: 800vh;
  }
  .journey-sticky {
    padding-top: 60px;
  }
  .journey-title {
    /* margin-block only — don't clobber the shared headline's
       margin-inline: auto. Horizontal breathing room on mobile comes from
       the parent's padding-inline, not a title margin. */
    margin-block: 0 16px;
  }
  /* Panels: each takes full 100vw, internals go single-column */
  .journey-panel {
    padding: 20px 20px 0;
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
  }
  .journey-panel--title {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .journey-panel--a .journey-photos,
  .journey-panel--b .journey-photos {
    justify-self: center;
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 220px;
    display: flex;
    justify-content: center;
  }
  .journey-panel--a .journey-text,
  .journey-panel--b .journey-text {
    justify-self: center;
    text-align: left;
  }
  .journey-polaroid {
    position: relative;
    display: inline-block;
    width: clamp(130px, 36vw, 170px);
  }
  .journey-polaroid--1 {
    transform: rotate(-4deg);
    margin: 0 -14px 0 0;
  }
  .journey-polaroid--2 {
    transform: rotate(4deg);
    margin: 14px 0 0 -14px;
  }
  /* Car/trail: hide on mobile since they're positioned for desktop geometry */
  .journey-car,
  .journey-trail {
    display: none !important;
  }

  /* 50 Creative Careers POLAROID PILE: on mobile the polaroid area sits in
     the lower half of the sticky. Hidden during phase 1 (panels 1+2) so it
     doesn't overlap journey content; only fades in once the user reaches
     panel 3 and phase 2 starts (.is-visible class toggled by updateJourney). */
  .journey-polaroids {
    top: 38%;
    bottom: 0;
    height: auto;
    border-top: none !important;
    box-shadow: none !important;
    padding: 8px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none !important;
  }
  .journey-polaroids.is-visible {
    opacity: 1;
    pointer-events: auto !important;
  }
  .careers-polaroid-grid {
    position: relative;
    flex-direction: row;
    height: 100%;
    gap: 0;
    padding: 0;
    overflow: visible;
    cursor: pointer;
    touch-action: manipulation;
    max-width: 320px;
    margin: 0 auto;
    transform: none !important;
  }
  .polaroid-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 160px;
    flex: none;
    /* Hidden starting state — each card flies up from below when its
       scroll threshold is crossed (see script.js updateJourney). */
    opacity: 0;
    transform: translateX(-50%) translateY(80vh) rotate(var(--stack-rot, 0)) !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity   0.4s ease;
    will-change: transform, opacity;
    touch-action: pan-y;
  }
  /* Softer shadows on the polaroid faces so stacked cards don't paint a
     heavy edge behind the top one. */
  .polaroid-front,
  .polaroid-back {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .polaroid-card.shown {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(var(--stack-rot, 0)) !important;
  }
  /* z-index goes 4→10 by DOM order so each newly-revealed card lands ON TOP
     of the previously-revealed ones — the pile "grows" as the user scrolls. */
  .careers-polaroid-grid .polaroid-card:nth-child(1) { z-index:  4; --stack-rot: -5deg; }
  .careers-polaroid-grid .polaroid-card:nth-child(2) { z-index:  5; --stack-rot:  3deg; }
  .careers-polaroid-grid .polaroid-card:nth-child(3) { z-index:  6; --stack-rot: -2deg; }
  .careers-polaroid-grid .polaroid-card:nth-child(4) { z-index:  7; --stack-rot:  4deg; }
  .careers-polaroid-grid .polaroid-card:nth-child(5) { z-index:  8; --stack-rot: -3deg; }
  .careers-polaroid-grid .polaroid-card:nth-child(6) { z-index:  9; --stack-rot:  2deg; }
  .careers-polaroid-grid .polaroid-card:nth-child(7) { z-index: 10; --stack-rot: -1deg; }

  /* Mobile polaroid: card shows ONLY photo + name/number label. The back-content
     (description, tags, Instagram link) is mirrored into a separate text block
     BELOW the pile (.polaroid-details-live) via script.js — so the pile stays
     visually clean and tall text doesn't clip. */
  .polaroid-inner {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    transform: none !important;
  }
  .polaroid-front {
    position: static;
    width: 100%;
    height: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    padding-bottom: 0;
  }
  .polaroid-photo,
  .polaroid-photo--empty {
    height: 150px;
    margin: 6px 6px 0;
  }
  .polaroid-label {
    padding: 10px 12px 12px;
    font-size: 11px;
    height: auto;
  }
  .polaroid-name { font-size: 13px; }
  .polaroid-num  { font-size: 10px; }
  /* Hide the back-face on mobile — its content is replicated below the pile */
  .polaroid-back {
    display: none !important;
  }

  /* Pile container — just tall enough for the photo-only card, centered */
  .careers-polaroid-grid {
    height: 220px;
    margin: 0 auto !important;
    flex-shrink: 0;
  }

  /* Live details block below the pile — populated by script.js to show the
     top card's back content (number, title, description, tags, IG link). */
  .polaroid-details-live {
    display: block;
    max-width: 320px;
    margin: 16px auto 0;
    padding: 0 8px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    flex-shrink: 0;
  }
  .polaroid-details-live-num {
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 6px;
    font-style: normal;
  }
  .polaroid-details-live-title {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--text-primary);
  }
  .polaroid-details-live-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 10px;
  }
  .polaroid-details-live-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
  }
  .polaroid-details-live-tags span {
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    color: var(--text-secondary);
  }
  .polaroid-details-live-ig {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--text-primary);
    color: var(--white);
    text-decoration: none;
  }

  /* Journey careers story: on mobile hide the 3-paragraph desktop intro and
     show only the one-liner. The tap-through instruction sits just above the pile. */
  .journey-careers-story:not(.journey-careers-story--mobile) {
    display: none;
  }
  .journey-careers-story--mobile {
    display: block !important;
    font-size: 13.5px;
    margin: 6px auto 0;
    max-width: 280px;
  }
  .journey-title-card .section-eyebrow {
    font-size: 11px;
    margin-bottom: 6px;
  }
  /* Panel 3 title card sits at the TOP of the panel (not vertically centered)
     so the polaroid pile absolute-positioned below has less gap to travel. */
  .journey-panel--title {
    justify-content: flex-start;
    padding-top: 10px;
  }
  .journey-title-card {
    margin-top: 0;
  }

  /* Floating "↓" chevron — only visible while the polaroid pile is on screen.
     Anchors to the bottom-right so users who want to skim can jump to the
     next section without waiting for all cards to reveal. */
  .polaroid-skip-cta {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    background: var(--text-primary);
    color: var(--white);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .polaroid-skip-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Restore the sticky-pin pattern on Services (the ≤1024 rule released it).
     The CTA footer still card-stacks over it, so services keeps its own
     100svh pin with 100svh of extra scroll budget for cta-footer overlap. */
  .services {
    height: calc(100svh + 100svh);
    margin-top: -100svh;
    border-radius: 28px 28px 0 0;
  }
  .services-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 40px 20px 24px;
    overflow: hidden;
    border-radius: 28px 28px 0 0;
  }
  /* CTA footer: also re-enable the card-stack overlap (was released at ≤1024). */
  .cta-footer {
    margin-top: -100svh;
    height: 100svh;
    border-radius: 28px 28px 0 0;
  }
  /* Tighten services content so title + roles + 3 phrases all fit 100svh. */
  .services-title {
    font-size: clamp(22px, 6.2vw, 30px);
    margin-bottom: 4px;
  }
  .services-desc {
    font-size: 12px;
    margin-bottom: 10px;
    max-width: 300px;
    line-height: 1.45;
  }
  .roles-groups-label {
    font-size: 10px;
    margin-bottom: 6px;
    letter-spacing: 0.14em;
  }
  .roles-groups {
    gap: 8px;
    margin-bottom: 10px;
  }
  .role-group {
    padding: 8px 12px;
  }
  .role-group-title {
    font-size: 14px;
    margin-bottom: 1px;
  }
  .role-group-items {
    font-size: 11px;
    line-height: 1.35;
  }
  /* Drop the tagline on mobile — the 3 mobile phrases below communicate the
     same thing in less vertical space. */
  .roles-tagline {
    display: none;
  }
  /* Drop the inline CTA on mobile too — the floating ↓ arrow + nav "Contact"
     link already give users ways to reach the contact section. */
  .services-cta {
    display: none;
  }

  /* Mobile replaces the Yes/No box with a simpler 3-phrase values block
     featuring the "searching with a microscope" cartoon. */
  .looking-wrap {
    display: none;
  }
  .looking-mobile-values {
    display: block;
    max-width: 320px;
    margin: 4px auto 0;
    text-align: center;
  }
  .looking-mobile-cartoon {
    width: 70px;
    height: auto;
    display: block;
    margin: 0 auto 4px;
  }
  .looking-mobile-phrase {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 2px;
  }
  .looking-mobile-phrase:last-child {
    margin-bottom: 0;
  }
  .looking-mobile-phrase em {
    font-style: italic;
    color: hsl(12, 70%, 58%);
  }

  /* Custom.html journey: match the generic journey on mobile (no yellow card-stack,
     since the narrow viewport makes the rounded edge look awkward). */
  body.has-personal-note .journey,
  body.has-personal-note .journey-sticky,
  body.has-personal-note .journey-polaroids {
    background: var(--surface);
  }
  body.has-personal-note .journey {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* WHY-ME CARD PILE: restore the desktop sticky-pin pattern (the ≤1024
     breakpoint earlier released it) so scroll progress reveals cards one
     at a time — each new card flies in from below and stacks on top.
     Only when all 6 are revealed does continued scroll advance. */
  .why-work {
    height: calc(100svh + 1100px + 400px + 100svh);
    margin-top: -100svh;
  }
  .why-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 60px 20px 20px;
    overflow: hidden;
  }
  /* Title stays pinned at the top in flow — always visible above the pile */
  .why-big-text {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto 16px;
    text-align: center;
    z-index: 0;
  }
  .why-big-text {
    /* stays absolute-centered as on desktop so the cards fly up over it */
  }
  .why-cards {
    position: absolute;
    inset: 0;
    padding: 0;
    display: block;
    pointer-events: auto;
  }
  .why-cards .why-card {
    position: absolute;
    top: 58%;
    left: 50%;
    flex: none;
    width: 280px;
    max-width: 280px;
    margin: 0;
    opacity: 0;
    /* Lighter shadow on mobile so the rotated cards underneath don't show a
       heavy edge — only the top card reads as "elevated". */
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06),
                0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translate(-50%, 80vh) rotate(var(--stack-rot, 0)) !important;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity   0.4s ease;
    will-change: transform, opacity;
  }
  .why-cards .why-card.shown {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(var(--stack-rot, 0)) !important;
  }
  /* Same ascending z-index pattern so as each card is scroll-revealed it
     lands ON TOP of the previous one — the pile grows as you scroll. */
  .why-cards .why-card:nth-child(1) { z-index:  5; --stack-rot: -3deg; }
  .why-cards .why-card:nth-child(2) { z-index:  6; --stack-rot:  2deg; }
  .why-cards .why-card:nth-child(3) { z-index:  7; --stack-rot: -2deg; }
  .why-cards .why-card:nth-child(4) { z-index:  8; --stack-rot:  2.5deg; }
  .why-cards .why-card:nth-child(5) { z-index:  9; --stack-rot: -1.5deg; }
  .why-cards .why-card:nth-child(6) { z-index: 10; --stack-rot:  1.5deg; }

  /* Services role-groups and Yes/No box both collapse to single column. */
  .roles-groups {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 420px;
  }
  .looking-wrap {
    margin-top: 0;
  }
  .looking-cartoon {
    display: none;
  }
  .looking-box {
    flex-direction: column;
    padding: 28px 24px;
    gap: 24px;
  }
  .looking-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .looking-col {
    width: 100%;
  }

  /* Personal-note 3-col grid already collapses at 900, but make sure the inner
     sticky release is total on small screens. */
  .personal-note-points {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
  }

  /* Display headline font-sizes are handled by the shared .hero-headline,
     .section-title, .personal-note-title, .journey-careers-title, .cta-title
     rule in the base typography section — one clamp(1.75rem, 3vw+1rem, 4.5rem)
     scale covers 320–2560px. No mobile-specific overrides here.
     .why-big-text is intentionally huge background display and stays on its
     own rule; .journey-heading is a subheading (H3) and keeps its own. */
  .why-big-text {
    white-space: normal;
    line-height: 1.05;
  }

  /* About bio: tighten the padding so photo strip doesn't dominate. */
  .about {
    padding: 60px 20px 0;
  }
  .about-center {
    margin-bottom: 40px;
  }
  .about-photo-track img {
    width: 140px;
    height: 180px;
  }

  /* Section side padding */
  .works,
  .services,
  .about,
  .extended-testimonials,
  .cta-footer,
  .why-work,
  .personal-note {
    padding-left: 20px;
    padding-right: 20px;
  }
  .navbar {
    padding: 12px 16px;
  }

}

/* ── Mobile portrait (≤480px) ──
   Typography is fluid via clamp() on the base rules, so this block only
   keeps small-screen-specific STRUCTURAL tweaks (card padding, component
   sizes) that don't fit cleanly into a fluid token. */
@media (max-width: 480px) {
  .hero-video {
    width: min(280px, 80vw);
  }

  /* Tighten card interiors so body copy is readable at smaller width. */
  .why-card {
    padding: 16px;
  }
  .why-card--alt {
    padding-bottom: 110px;
    min-height: 200px;
  }
  .why-card-art {
    width: 80px;
    height: 80px;
  }

  .looking-box {
    padding: 24px 20px;
  }
  .looking-tag {
    font-size: 14px;
  }

  .role-group {
    padding: 16px 18px;
  }
  .role-group-title {
    font-size: 16px;
  }
  .role-group-items {
    font-size: 12.5px;
  }

  .personal-note-card {
    padding: 32px 22px 28px;
  }

  /* CTA footer character scales down */
  .cta-character img {
    max-width: 180px;
  }

  .time-badge {
    display: none;
  }
}

/* ===== ANIMATIONS ===== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }