:root {
  /* v5 cool-light palette — mirrors homepage tokens. Token names
     preserved so existing structural rules continue to work unchanged;
     values shift from warm cream tones to cool engineered tones. */
  --bg:            #FBFBFB;   /* off-white — page background */
  --bg-raised:     #FFFFFF;   /* pure white — raised surfaces are brighter than page */
  --bg-deep:       #161616;   /* charcoal — reserved for dark accent areas */
  --ink:           #161616;   /* primary text — charcoal */
  --ink-dim:       #3F3F3F;   /* secondary text */
  --ink-muted:     #6B6B6B;   /* AA-safe muted */
  --ink-faint:     #585858;   /* mid muted */
  --accent:        #FF5D18;   /* vivid orange */
  --accent-hover:  #E54810;
  --line:          #D9D9D9;   /* hairline borders on off-white */
  --line-bright:   #C7C7C7;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }

body {
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Sora', sans-serif;
  /* Pin weight explicitly — Sora is loaded as a variable font (wght 100..800)
     and without this, the browser may default along the axis differently
     to the homepage. Keeps body weight identical across both pages. */
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  /* Dot-grid texture — same as homepage, ties case pages into the
     systems-studio surface without a separate overlay element. */
  background-image: radial-gradient(circle, rgba(22, 22, 22, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: 0 0;
}

main, section, nav { position: relative; z-index: 2; }

/* Match homepage content frame: 1272px inside 1600px body */
main { max-width: 1272px; margin: 0 auto; }
a { color: inherit; text-decoration: none; }

/* === SIDE RAILS ===
   Editorial vertical frame matching the homepage hero + work rails.
   Fixed to the viewport so the rail text stays in view as the user
   scrolls — case pages are long-form, so a bottom-anchored marker
   would only appear at the end of the read.

   Horizontal positioning tracks the body's 1600px centred container:
   - viewport > 1600px: rail aligns with body's outer edge
     (50vw - 800px from each side)
   - viewport ≤ 1600px: rail clamps to viewport edge (0)
*/
.case-rail-l,
.case-rail-r {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 56px;
  /* Bumped above main (z:2) so the rails sit on top of full-bleed
     images. Children are absolutely positioned (two stacked clip
     wrappers) so case.js can per-pixel-region the rail label. */
  z-index: 3;
  pointer-events: none;
}
/* Pinned to viewport edges (not body's 1600px max) so rails span
   full viewport width, matching homepage. */
.case-rail-l { left:  0; border-right: 1px solid var(--line); }
.case-rail-r { right: 0; border-left:  1px solid var(--line); }
/* Two stacked clip wrappers per rail (added at runtime by case.js).
   One renders the label in --ink, the other in --bg. Clip-paths on
   each are driven by case.js so the ink portion is visible over cream
   sections and the bg portion is visible over dark full-bleed imagery,
   with both rendering simultaneously when the rail crosses a section
   boundary — true spatial split, not a binary toggle. */
.case-rail-clip {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.case-rail-clip--ink .case-rail-text { color: var(--ink); }
.case-rail-clip--bg  .case-rail-text { color: var(--bg);  }
.case-rail-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* === NAV ===
   Mirrors homepage: transparent at top, translucent cream + blur +
   hairline once scrolled past 30px. Padding 28px/56px matches the
   homepage value so logo lands at the same x-position as the case
   rail edges. Toggled by inline scroll listener on each case page. */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Full viewport width — matches homepage. No max-width, no
     translateX centring. Padding 28px/56px aligns logo with the
     case rails (which also span viewport-to-viewport). */
  padding: 28px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-bottom-color 0.4s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
nav.is-scrolled {
  background: rgba(251, 251, 251, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
/* Auto-hide on scroll-down. -120px slides nav fully off the top of
   the viewport (nav is ~82px tall + 28px+28px padding). No more
   translateX since nav is now full-width without centring transform. */
nav.is-hidden {
  transform: translateY(-120px);
}

/* Matches homepage logo: SVG wordmark + terracotta dot baked in. */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* Matches homepage nav-right: Sora 14px in ink-dim (= homepage's
   --ink-soft), 36px gap. Was previously mono 13px in ink-muted. */
.nav-right {
  display: flex;
  gap: 36px;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  color: var(--ink-dim);
  align-items: center;
}
.nav-right a { transition: color 0.3s ease; }
.nav-right a:hover { color: var(--ink); }

/* Single nav CTA — mirrors homepage. Sora (not mono) so it reads as
   a button, not another link. Hover flips to terracotta. The :hover
   override on .nav-right a above would set color to ink first; we
   override here for the pill so it stays cream over both bg states. */
.nav-cta {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-right .nav-cta:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
}
/* Diagonal arrow — matches the hero .cta-btn pattern.
   Lifts up-and-right on hover to reinforce the "let's go" direction. */
.nav-cta svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.nav-cta:hover svg { transform: translate(2px, -2px); }

.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
}

/* === CASE HERO ===
   Horizontal padding 72px (was 40px) so content clears the 56px
   side rails on all desktop viewports — was overlapping at narrow
   widths between 900px and ~1380px. */
.case-hero {
  padding: 180px 72px 80px;
}

/* New BIA-style top: slim back-link area, then full-bleed hero image,
   then title/summary/meta. Replaces the text-heavy .case-hero combo
   on cases that use the new layout (Spin onwards). */
.case-top {
  padding: 140px 72px 0;
}
.case-top .case-back { margin-bottom: 40px; }

.case-intro {
  padding: 0 72px 0;
}

/* Spring/Summer–style headline section. Big project title
   dominates left column, role chips below it; small mono label
   + description on the right. Tools strip at the bottom (kept but
   smaller — not a featured row). Replaces case-intro on cases
   adopting this pattern. */
.case-headline {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  padding: 0 72px 80px;
  align-items: end;
}
.case-headline-main { /* left column wrapper */ }
.case-headline-title {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: clamp(56px, 11vw, 180px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin: 0 0 40px;
  color: var(--ink);
}
.case-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.case-chip {
  display: inline-block;
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  white-space: nowrap;
}
.case-headline-meta { /* right column wrapper */ }
.case-headline-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.case-headline-description {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  max-width: 40ch;
  margin: 0;
}
/* Tools strip — spans full row at the bottom of the headline.
   Small, mono, not loud. Kept visible but secondary. */
.case-headline-tools {
  grid-column: 1 / -1;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 24px;
  align-items: baseline;
}
.case-headline-tools-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.case-headline-tools-list {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  color: var(--ink-dim);
}
.case-headline-tools-list .sep {
  color: var(--accent);
  margin: 0 6px;
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 80px;
  transition: color 0.3s ease;
}
/* Hover: text + arrow turn terracotta. SVG colour follows currentColor.
   Arrow rotates 45° CW so the diagonal "straightens" into a horizontal
   left-pointing arrow — reads as "back" rather than "down-and-back". */
.case-back:hover { color: var(--accent); }
.case-back svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.case-back:hover svg { transform: rotate(45deg); }

.case-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.case-title {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: clamp(72px, 9vw, 140px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0 0 32px;
}
.case-title .dot {
  color: var(--accent);
}

.case-subtitle {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
  max-width: 30ch;
}

.case-label {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.case-summary-body {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
  max-width: 46ch;
}

.case-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 48px 0;
}

.case-meta-row .case-label {
  margin-bottom: 12px;
}

.case-meta-row p {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0;
}
.case-meta-row p .sep {
  color: var(--accent);
  margin: 0 6px;
}

/* === CASE IMAGE BLOCKS === */
.case-image {
  padding: 0 72px;
  margin-bottom: 80px;
}
.case-image img {
  display: block;
  width: 100%;
  /* All contained images locked to 16:9. Spin 4 fits naturally; Spin 2
     gets cropped via cover until you replace the source asset at 16:9.
     Then no crop happens — image fits perfectly. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Full-bleed variant — breaks out of main's 1272px column to span
   the full viewport width. Use for visual breather moments mid-case
   and for signature shots that should dominate the screen. */
.case-image.flush {
  padding: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.case-image.flush img {
  border-radius: 0;
  border: none;
}

/* === BIA-STYLE LAYOUT PRIMITIVES ===
   New components for richer narrative pacing in case studies.
   case-hero-image: full-bleed hero at top of page, replaces
     text-heavy opening. Sits below the back link; the case-title-
     section comes after the hero rather than before.
   case-split: 50/50 image + text grid for pacing narration
     alongside imagery mid-case.
   case-grid-2: two contained images side-by-side for showing
     related shots without breaking flow with text. */

.case-hero-image {
  margin: 0 calc(50% - 50vw) 80px;
  width: 100vw;
  /* Full viewport height — sets the tone immediately, makes the
     case page open with maximum visual weight. */
  height: 100vh;
  background: var(--bg-deep);  /* matches when image is loading or letterboxes */
  overflow: hidden;
}
.case-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 80px 72px;
  /* align-items: center so when image and text are different heights
     (almost always — image is natural aspect, text is content-sized),
     the shorter element vertically centres against the taller one
     instead of leaving dead cream space below the shorter side. */
  align-items: center;
}
.case-split img {
  display: block;
  width: 100%;
  height: auto;
}
.case-split-body {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 52ch;
}
.case-split-body h3 {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--ink);
}
.case-split-body p { margin: 0 0 20px; }
.case-split-body p:last-child { margin-bottom: 0; }

/* Editorial content variants for case-split-body — Hello Robo /
   Surf Air style: small mono label, big sentence lead, 2x2
   sub-deliverables grid. Used when a split needs more structure
   than just a heading + paragraph. */
.case-split-body .split-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 24px;
  font-weight: 400;
}
.case-split-body .split-lead {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 48px;
  max-width: 24ch;
}
.deliverable-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 28px;
}

/* Text-only editorial section — label + lead sentence on the left,
   deliverable grid on the right. Used when the visual would be
   redundant (e.g. case page already has 3 strong images and the
   deliverables don't need a fourth). */
.case-editorial {
  padding: 20px 72px 100px;
  max-width: 1272px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.case-editorial-intro .split-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 24px;
  font-weight: 400;
}
.case-editorial-intro .split-lead {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
}
.deliverable-grid > div h4 {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.deliverable-grid > div p {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}
/* Reverse: image on right, text on left. Default has image first. */
.case-split.reverse > img { order: 2; }
.case-split.reverse > .case-split-body { order: 1; }

.case-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 72px;
  margin-bottom: 80px;
}
.case-grid-2 img {
  display: block;
  width: 100%;
  height: auto;
}

/* Half-and-half full-bleed split. One side dark with image filling
   edge-to-edge top to bottom; other side cream-deep carries the
   content. Section is 100vh tall — image fills its half completely
   via object-fit: cover; content side vertically centres. Page's
   biggest layout beat. */
.case-split-bleed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 80px;
  width: 100vw;
  min-height: 100vh;
  align-items: stretch;
}
.case-split-bleed-image {
  background: var(--bg-deep);  /* warm near-black behind image */
  overflow: hidden;
}
.case-split-bleed-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fill the half completely, crop if aspect mismatches */
}
.case-split-bleed-content {
  background: var(--bg-raised);  /* cream-deep */
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-split-bleed-content h3 {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  color: var(--ink);
}
/* Reverse: image right, content left */
.case-split-bleed.reverse > .case-split-bleed-image { order: 2; }
.case-split-bleed.reverse > .case-split-bleed-content { order: 1; }

/* === CASE APPROACH ===
   Asymmetric two-image pair on top (smaller left, larger right) with
   body copy below in the right column. Editorial layout for narrative
   moments. Auto-placement puts img 1 in col 1, img 2 in col 2; body
   sits in col 2 row 2 explicitly. */
.case-approach {
  display: grid;
  /* Image (col 1) gets the larger share so it carries the visual
     weight of the section. Body (col 2) keeps enough width for two
     short paragraphs at comfortable line-length. */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 60px 80px;
  padding: 0 72px;
  margin-bottom: 80px;
  align-items: start;
}
.case-approach img {
  display: block;
  width: 100%;
  height: auto;
}
/* Modifier: KD Capital "Colours from the brands" pattern.
   Measured geometry from springsummer.dk/kd-capital:
   - Section spans full viewport (S left edge at 4.8% from viewport
     left, M right edge flush at 100%).
   - Two portraits side-by-side at 2:3 aspect, asymmetric widths:
     S (small) = 35.7vw, M (large) = 57.8vw, gap = 20px.
   - Vertical "step-down" stagger: S offset DOWN by ~51% of M's
     height (~44vw at our viewport), overshoots M's bottom by ~13%.
   - Body text sits top-right, sharing M's grid column so its LEFT
     edge aligns with M's left edge.
   Section is a 2-col × 2-row grid:
     row 1 / col 2: body (label + paragraphs)
     row 2 / col 1: S portrait (smaller, offset down via margin-top)
     row 2 / col 2: M portrait (larger, top-aligned in row 2)
   Source images should be 2000x3000 to match 2:3 natively. */
.case-approach.case-approach--portrait-pair {
  display: grid;
  /* M (col 2) reduced by 30% from KD's 57.8fr → 40.5fr; S (col 1)
     grows by the same amount (35.7 → 53fr) so M stays flush against
     the viewport right edge and S absorbs the saved width.
     Total fr (93.5) preserved from the KD measurement. */
  grid-template-columns: 53fr 40.5fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 80px;
  /* Padding-left: max of 72px (standard case-section margin) and
     4.8vw (KD-capital proportional). Below ~1500vw, 72px wins so S
     aligns with the standard content margin used by other case
     sections rather than creeping inward at narrow widths. */
  padding: 0 0 0 max(72px, 4.8vw);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 80px;
  width: 100vw;
  align-items: start;
}
/* Body sits in row 1, col 2 — left-aligned with M's left edge
   (they share grid column 2). margin-right gives the body text
   breathing room from the viewport right edge so it doesn't bleed
   into the side rail area at narrower desktop widths where col 2
   shrinks below the body's natural max-width. The right image (M)
   in the wrapper is unaffected and stays flush right. */
.case-approach.case-approach--portrait-pair > .case-approach-body {
  grid-column: 2;
  grid-row: 1;
  max-width: 38ch;
  margin: 0 72px 0 0;
}
/* Both portraits at 2:3 aspect, no border-radius, no border.
   Selector covers the direct-child Spin 7 AND Spin 3 nested inside
   the right-stack wrapper. */
.case-approach.case-approach--portrait-pair img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0;
  border: none;
  height: auto;
}
/* LEFT (S) portrait — col 1, row 2. Top-aligned. Step-down rhythm
   provided dynamically by parallax (see below) rather than a static
   margin-top, since after the column-width swap S is now bigger
   than M and a static stagger ballooned the section height. */
.case-approach.case-approach--portrait-pair > img:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
}
/* RIGHT-COLUMN STACK — wraps Spin 3 plus a secondary editorial
   block (Live ops). Vertical flex column so the two stack inside
   col 2 / row 2. Stretches to row 2's height (= S's height) so the
   secondary block can fill the cream that's otherwise dead below
   M (≈272px gap from S being intrinsically taller). */
.case-approach.case-approach--portrait-pair > .case-approach-right-stack {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
/* Secondary editorial block — same mono label + body rhythm as the
   primary case-approach-body. Slightly tighter max-width for visual
   hierarchy under M. margin-right matches the body's right margin
   so the text doesn't bleed into the viewport rail at narrower
   desktop widths. */
.case-approach-secondary {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 38ch;
  margin: 0 72px 0 0;
}
.case-approach-secondary p { margin: 0 0 20px; }
.case-approach-secondary p:last-child { margin-bottom: 0; }

/* Parallax — S (left, bigger) provides the step-down rhythm
   dynamically. Timeline is the SECTION (not S), so animation
   engages when the section starts entering the viewport rather
   than when S itself enters. At entry 0% (section first peeks)
   S sits +30vw below its natural row-2 top, then rises 60vw total
   across the section's full pass — visible motion from section
   entry through exit. Browsers without `animation-timeline`
   (Safari < 18, Firefox) fall back to top-aligned static layout. */
@supports (animation-timeline: view()) {
  .case-approach.case-approach--portrait-pair {
    view-timeline-name: --approach-pair;
    view-timeline-axis: block;
  }
  .case-approach.case-approach--portrait-pair > img:nth-of-type(1) {
    animation: s-parallax linear;
    animation-timeline: --approach-pair;
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
  @keyframes s-parallax {
    /* S starts at its natural position when the section first peeks
       (translateY(0) at entry 0%), rises 30vw across the section's
       full pass. Travel halved (was 60vw) so S doesn't disappear
       completely during exit — the empty cream below S during
       late-scroll is reduced. */
    from { transform: translateY(0); }
    to   { transform: translateY(-30vw); }
  }
  /* Honour reduced-motion preference — disable the parallax. */
  @media (prefers-reduced-motion: reduce) {
    .case-approach.case-approach--portrait-pair > img:nth-of-type(1) {
      animation: none;
    }
  }
}

/* Right-column wrapper for case-approach. Flex-stacks the right image
   directly above the body copy so the gap is controlled here (32px),
   independent of the grid's row gap. Without this, the body gets
   pushed down to row 2 of the parent grid which is sized by the much
   taller portrait image on the left. */
.case-approach-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.case-approach-body {
  grid-column: 2;
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 60ch;
}
.case-approach-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 24px;
  font-weight: 400;
}
.case-approach-body p { margin: 0 0 20px; }
.case-approach-body p:last-child { margin-bottom: 0; }

/* Email banner stack — fills the empty left column of .case-approach
   with a "photos dropped on a pile" animation. Each banner drops in
   from above with a small rotation, lands on top of the stack, then
   gradually fades as the next ones drop on top of it. 20 banners
   cycling on a 30s loop, ~6 visible at once for the pile feel. */
.email-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;
  align-self: center;
}
.email-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  animation: banner-drop 30s infinite;
}
/* 5 rotation values cycling across the 20 banners — small angles so
   the pile feels casual without overflowing the column too far. */
.email-stack img:nth-child(5n+1) { --rot: -4deg; }
.email-stack img:nth-child(5n+2) { --rot: 3deg; }
.email-stack img:nth-child(5n+3) { --rot: -2deg; }
.email-stack img:nth-child(5n+4) { --rot: 5deg; }
.email-stack img:nth-child(5n+5) { --rot: -3deg; }
/* Stagger delays — 20 banners over 30s = 1.5s each = 5% of cycle. */
.email-stack img:nth-child(1)  { animation-delay: 0s; }
.email-stack img:nth-child(2)  { animation-delay: -1.5s; }
.email-stack img:nth-child(3)  { animation-delay: -3s; }
.email-stack img:nth-child(4)  { animation-delay: -4.5s; }
.email-stack img:nth-child(5)  { animation-delay: -6s; }
.email-stack img:nth-child(6)  { animation-delay: -7.5s; }
.email-stack img:nth-child(7)  { animation-delay: -9s; }
.email-stack img:nth-child(8)  { animation-delay: -10.5s; }
.email-stack img:nth-child(9)  { animation-delay: -12s; }
.email-stack img:nth-child(10) { animation-delay: -13.5s; }
.email-stack img:nth-child(11) { animation-delay: -15s; }
.email-stack img:nth-child(12) { animation-delay: -16.5s; }
.email-stack img:nth-child(13) { animation-delay: -18s; }
.email-stack img:nth-child(14) { animation-delay: -19.5s; }
.email-stack img:nth-child(15) { animation-delay: -21s; }
.email-stack img:nth-child(16) { animation-delay: -22.5s; }
.email-stack img:nth-child(17) { animation-delay: -24s; }
.email-stack img:nth-child(18) { animation-delay: -25.5s; }
.email-stack img:nth-child(19) { animation-delay: -27s; }
.email-stack img:nth-child(20) { animation-delay: -28.5s; }

@keyframes banner-drop {
  0%   { opacity: 0; z-index: 0;
         transform: translateY(-50px) rotate(0deg) scale(1.04); }
  2%   { opacity: 1; z-index: 100;
         transform: translateY(0) rotate(var(--rot)) scale(1); }
  6%   { opacity: 1; z-index: 100;
         transform: translateY(0) rotate(var(--rot)) scale(1); }
  12%  { opacity: 0.7; z-index: 50;
         transform: translateY(0) rotate(var(--rot)) scale(1); }
  22%  { opacity: 0.3; z-index: 20;
         transform: translateY(0) rotate(var(--rot)) scale(1); }
  30%  { opacity: 0; z-index: 1;
         transform: translateY(0) rotate(var(--rot)) scale(1); }
  100% { opacity: 0; z-index: 1;
         transform: translateY(0) rotate(var(--rot)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .email-stack img { animation: none; opacity: 1; transform: rotate(var(--rot)); }
  .email-stack img:not(:first-child) { display: none; }
}

/* === CASE CONTENT === */
.case-section {
  padding: 80px 72px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
  border-top: 1px solid var(--line);
}
.case-section-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.case-section-body {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
  max-width: 52ch;
}
.case-section-body > *:first-child { margin-top: 0; }
.case-section-body p { margin: 0 0 20px; }
.case-section-body p:last-child { margin-bottom: 0; }
.case-section-body strong { color: var(--ink); font-weight: 700; }

.deliverables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.deliverable-item {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}
.deliverable-item h4 {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.deliverable-item p {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

/* Unboxed deliverable list — for use inside .case-split. Vertical
   list with hairline separators between items, no bordered cards.
   Cleaner editorial feel than the boxed .deliverable-item grid. */
.deliverable-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.deliverable-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.deliverable-list li:first-child { padding-top: 0; }
.deliverable-list li:last-child { border-bottom: none; padding-bottom: 0; }
.deliverable-list h4 {
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.deliverable-list p {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

/* === NEXT PROJECT === */
.case-next {
  padding: 120px 72px 80px;
  border-top: 1px solid var(--line);
}
.case-next-label {
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.case-next-link {
  display: inline-flex;
  align-items: baseline;
  gap: 24px;
  font-family: 'Ubuntu Sans', sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  transition: color 0.3s ease;
}
.case-next-link:hover { color: var(--accent); }
.case-next-link svg {
  width: 40px; height: 40px;
  transition: transform 0.3s ease;
}
.case-next-link:hover svg { transform: translate(4px, -4px); }

/* === FOOTER === */
.bottom-bar {
  max-width: 1272px;
  margin: 0 auto;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-family: 'Ubuntu Sans Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* === MOBILE === */
@media (max-width: 1024px) {
  /* Editorial rails are decorative — hide them at narrow widths
     so they don't crowd content. */
  .case-rail-l, .case-rail-r { display: none; }
  nav { padding: 18px 24px; }
  .nav-right { gap: 18px; font-size: 13px; }
  /* Home link and CTA hidden on mobile — logo already returns home,
     and the CTA overflows the nav width. Keeps "Work" as the only
     menu item, matching the case-page reading context. */
  .nav-right a:nth-child(1),
  .nav-right .nav-cta { display: none; }
  .case-hero { padding: 140px 24px 60px; }
  .case-top { padding: 100px 24px 0; }
  .case-top .case-back { margin-bottom: 32px; }
  .case-intro { padding: 0 24px; }
  .case-headline {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px 60px;
  }
  .case-headline-title { margin-bottom: 28px; }
  .case-headline-tools {
    margin-top: 40px;
    flex-direction: column;
    gap: 8px;
  }
  .case-back { margin-bottom: 56px; }
  .case-hero-row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
  }
  .case-meta-row {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 32px 0;
  }
  .case-image { padding: 0 16px; margin-bottom: 40px; }
  /* New BIA primitives — collapse to single column on mobile */
  .case-hero-image { height: 70vh; margin-bottom: 40px; }
  .case-split {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 24px;
  }
  .case-grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
    margin-bottom: 40px;
  }
  .case-split-bleed {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
    min-height: 0;  /* drop 100vh — would create 200vh stacked on mobile */
  }
  .deliverable-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .case-split-body .split-lead { font-size: 22px; margin-bottom: 32px; }
  .case-editorial {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 20px 24px 60px;
  }
  .case-approach {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
    margin-bottom: 40px;
  }
  .case-approach > img { grid-column: 1; }
  .case-approach-body { grid-column: 1; }
  /* Portrait-pair variant on mobile: collapse the full-bleed grid
     and stagger — stack body + 2 portraits vertically with normal
     mobile padding. */
  .case-approach.case-approach--portrait-pair {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 12px;
    padding: 60px 16px 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
    width: auto;
  }
  .case-approach.case-approach--portrait-pair > .case-approach-body {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 32px 0;
    max-width: none;
  }
  .case-approach.case-approach--portrait-pair > img:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    /* Disable parallax on mobile — single-column stack doesn't
       benefit from vertical parallax, and translating S vertically
       would just create awkward gaps in the stacked layout. */
    animation: none;
  }
  .case-approach.case-approach--portrait-pair > .case-approach-right-stack {
    grid-column: 1;
    grid-row: 3;
    gap: 24px;
  }
  /* Reset secondary text margin-right on mobile — section's 16px
     side padding already provides edge breathing room. */
  .case-approach-secondary {
    margin-right: 0;
    max-width: none;
  }
  .case-editorial-intro .split-lead { font-size: 22px; max-width: none; }
  .case-split-bleed-image {
    aspect-ratio: 3 / 2;  /* gives the image area implicit height when stacked */
  }
  .case-split-bleed-content {
    padding: 56px 24px;
  }
  .case-split-bleed-content h3 { font-size: 26px; margin-bottom: 24px; }
  .case-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 60px 24px;
  }
  .deliverables {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .case-next { padding: 80px 24px 60px; }
  .case-next-link svg { width: 28px; height: 28px; }
  .bottom-bar { margin: 0 24px; padding: 20px 0; flex-direction: column; gap: 8px; font-size: 10px; }
}