/* What we do: an editorial horizontal chapter driven by vertical scroll. */
.what-we-do.what-index-section {
  --what-ink: #211b29;
  --what-rule: rgba(76, 48, 116, .12);
  position: relative;
  z-index: 1;
  height: calc(var(--what-scroll-distance, 3400px) + 100svh);
  min-height: 100svh;
  padding: 0;
  overflow: visible;
  background: #e9def2;
  color: var(--what-ink);
  font-family: var(--font-ui);
}

.what-index-stage {
  position: sticky;
  /* Above the section's decorative bottom fade (healf-editorial.css), which
     was written for a chapter that ended on the lilac ground and otherwise
     washes the closing photograph white. */
  z-index: 1;
  top: 0;
  height: 100svh;
  min-height: 42rem;
  overflow: hidden;
  isolation: isolate;
}

.what-index-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  pointer-events: none;
}

.what-index-chrome {
  position: absolute;
  z-index: 5;
  top: clamp(1.1rem, 2.4vh, 2rem);
  right: var(--frame-pad);
  left: var(--frame-pad);
  display: flex;
  justify-content: space-between;
  color: rgba(33, 27, 41, .65);
  font-size: .65rem;
  font-weight: var(--w-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.what-index-chrome b { color: var(--violet); font-weight: inherit; }
.what-index-viewport { position: relative; z-index: 1; width: 100%; height: 100%; }
.what-index-track {
  display: flex;
  align-items: center;
  /* Leave the neighbouring frame outside the viewport at every desktop width. */
  gap: max(8rem, calc((100vw - min(56vw, 56rem)) / 2 + 3rem));
  width: max-content;
  height: 100%;
  padding: clamp(5rem, 9vh, 7.5rem) clamp(2rem, 6vw, 7rem);
  padding-right: 0;
  transform: translate3d(var(--what-track-x, 0px), 0, 0);
  will-change: transform;
}

.what-index-eyebrow {
  margin: .4rem 0 0;
  color: var(--violet);
  font-size: .7rem;
  font-weight: var(--w-bold);
  letter-spacing: .17em;
  text-transform: uppercase;
}

.what-we-do.what-index-section .what-index-card {
  --what-card-frame: clamp(.9rem, 1.15vw, 1.3rem);
  position: relative;
  flex: 0 0 min(56vw, 56rem);
  width: min(56vw, 56rem);
  height: min(75svh, 47rem);
  min-height: 36rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  isolation: isolate;
  transform: none;
}

.what-index-card-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(.92) brightness(.92);
  transform: scale(var(--what-image-scale, 1.04));
  transform-origin: center;
  will-change: transform;
}

.what-we-do.what-index-section .what-index-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(var(--what-card-frame) * -1);
  display: block;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(233, 238, 242, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 1.4rem 3.5rem rgba(14, 10, 20, .24);
  -webkit-backdrop-filter: blur(10px) saturate(.9) brightness(1.04);
  backdrop-filter: blur(10px) saturate(.9) brightness(1.04);
  filter: none;
  transform: none;
  transition: none;
  pointer-events: none;
}
.what-index-card-shell {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #18131d;
  isolation: isolate;
}
.what-index-card-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, rgba(22, 20, 25, .38), rgba(22, 20, 25, .08) 42%, rgba(22, 20, 25, .32));
  pointer-events: none;
}

.what-index-card-copy {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  gap: 0;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 3rem);
  text-align: center;
}

.what-we-do.what-index-section .what-index-card-label {
  display: block;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-size: .58rem;
  font-weight: var(--w-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: none;
  opacity: 1;
  transform: none;
}

.what-index-card-label span { color: rgba(255,255,255,.58); }
.what-index-card h3 {
  margin: 0;
  font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
  font-size: clamp(2.7rem, 4vw, 4.8rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.what-index-card-summary {
  max-width: 66ch;
  margin: 1.5rem 0 0;
  color: rgba(255,255,255,.94);
  font-size: clamp(.76rem, .85vw, .9rem);
  line-height: 1.6;
}

.what-index-card-footer {
  align-self: end;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: .58rem;
  font-weight: var(--w-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The final card stays above the arriving plate, and takes its own accelerating
   run at the left edge on top of the track's own travel, so it is gone by the
   time that plate is full bleed rather than lying across it. */
.what-we-do.what-index-section .what-index-card--activation {
  z-index: 2;
  transform: translate3d(var(--what-card-exit, 0px), 0, 0);
  will-change: transform;
}

.what-index-coda {
  position: relative;
  z-index: 1;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100svh;
  min-height: 42rem;
  /* The coda begins two-thirds of the way across the 70vw card, so only the
     trailing third overlaps when the Impact plate first takes hold. */
  margin: 0 0 0 calc(max(-23.333vw, -23.333rem) - clamp(3rem, 6vw, 8rem));
  overflow: hidden;
  background: #150e22;
  color: #fff;
}

.what-index-coda > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02) blur(calc(var(--impact-hero-progress, 0) * 13px)); transform: scale(calc(var(--what-coda-scale, 1.05) + var(--impact-hero-zoom, 0) + var(--impact-hero-progress, 0) * .05)); will-change: transform, filter; }

/* This frame is a backlit summit under open sky, so the quote needs real
   support rather than the flat tint the old purple plate got away with. The
   scrim is heaviest through the middle band where the type sits and lets the
   sun flare and the horizon come back at top and bottom. */
.what-index-coda::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(88% 62% at 50% 52%, rgba(21, 14, 34, .60), rgba(21, 14, 34, 0) 74%),
    linear-gradient(180deg, rgba(21, 14, 34, .30), rgba(21, 14, 34, .42) 48%, rgba(21, 14, 34, .40));
}
.what-index-coda::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #100b18;
  opacity: calc(var(--impact-hero-progress, 0) * .2);
  pointer-events: none;
}
/* The chapter opens on a plate titled "What we do" and closes on its twin,
   titled for the chapter it hands over to. Same structure, same scale, same
   centring as .what-index-cover-title. */
.what-index-coda figcaption {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--frame-pad);
  text-align: center;
  transform: translate3d(0, calc(var(--impact-hero-progress, 0) * -5svh), 0);
  will-change: transform, opacity;
}

.what-index-coda figcaption .what-index-eyebrow {
  margin: 0 0 clamp(1rem, 2.4vh, 1.8rem);
  color: rgba(255, 255, 255, .74);
  /* Goes with the heading rather than being left behind on the plate, and
     lifts as it goes. */
  opacity: clamp(0, calc(1 - var(--impact-hero-progress, 0) * 2.6), 1);
  transform: translate3d(0, calc(var(--impact-hero-progress, 0) * -4.5rem), 0);
}

.what-index-coda figcaption h2 {
  max-width: 14ch;
  margin: 0;
  font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
  font-size: clamp(3.4rem, 8.4vw, 9.5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 40px rgba(10, 6, 16, .35);
  /* Steeper than linear: the heading has to be completely gone before the dot
     starts down, so the thread has a clear run at the globe. */
  opacity: clamp(0, calc(1 - var(--impact-hero-progress, 0) * 1.45), 1);
  transform:
    translate3d(0, calc(var(--impact-hero-progress, 0) * -4rem), 0)
    scale(calc(1 - var(--impact-hero-progress, 0) * .18));
  will-change: transform, opacity;
}
.what-index-coda blockquote {
  max-width: 52ch;
  margin: clamp(1.6rem, 3.4vh, 2.6rem) 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(.86rem, 1.05vw, 1rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0;
  opacity: clamp(0, calc(1 - var(--impact-hero-progress, 0) * 3.2), 1);
  transform: translate3d(0, calc(var(--impact-hero-progress, 0) * -3.5rem), 0);
}
.what-index-coda .what-index-cta { display: inline-flex; align-items: center; gap: 1.4rem; min-height: 44px; margin-top: clamp(1.1rem, 2.6vh, 2.1rem); padding: .5rem .55rem .5rem 1.2rem; border-radius: 999px; background: #fff; color: var(--violet); box-shadow: none; font-size: .82rem; font-weight: var(--w-semibold); text-decoration: none; opacity: 1; }
.what-index-coda .what-index-cta:hover { background: #fff; color: var(--violet); transform: translateY(-2px); }
.what-index-cta .impact-cta-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: .9rem;
  line-height: 1;
}
.what-index-cta:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

/* Phones keep the chapter exactly as it is written on desktop: the plate is cut
   away in three bands, the cards travel sideways on vertical scroll, and the
   closing plate arrives and flies into the film card. Nothing here flattens the
   layout — it only refits it to a narrow screen, because the desktop measures
   are set against a wide viewport: a 56vw card is 218px at 390px wide, and type
   sized in vw collapses. Widths, type and padding come up; the mechanism is
   untouched. */
@media (max-width: 899px) {
  .what-index-chrome { top: 1rem; font-size: .58rem; }

  /* svh is the SMALL viewport height — the page area with the browser chrome
     fully expanded. iOS Safari hides its bottom toolbar as you scroll, so the
     real viewport grows past svh and a 100svh plate stops short, leaving a band
     of the section's lilac ground under a photograph that is meant to be full
     bleed. lvh is the large viewport height, so the picture covers in both
     states; the few pixels that fall under the chrome when it is showing are
     photograph, not content. The section's own height matches, or the sticky
     stage would release before the plate has finished covering. */
  .what-we-do.what-index-section { height: calc(var(--what-scroll-distance, 3400px) + 100lvh); }
  .what-index-stage { height: 100lvh; }
  .what-index-coda { height: 100lvh; }

  /* The track is held one full viewport to the right so no card is in view
     while the plate is being cut away. "One viewport" was not quite enough:
     each card's frame is drawn on a negative inset, so it sits 0.7rem outside
     the card's own box and that strip stayed on screen down the right-hand
     edge through the whole reveal. The extra clears the frame. */
  /* padding-right is what the last card comes to rest against. At 0 the track
     ends on card three's right edge, so the card stops flush with the right of
     the screen (left 86 of 393, centre 239 against a viewport centre of 197).
     Half the leftover width — (100vw - 93.6vw) / 2 = 3.2vw — carries it on until
     it is centred before the page scrolls away. */
  .what-index-track { gap: 4.5rem; padding: clamp(3rem, 7vh, 4.5rem) 1.25rem; padding-right: 3.2vw; }
  .what-we-do.what-index-section .what-index-card {
    --what-card-frame: .7rem;
    flex: 0 0 93.6vw;
    width: 93.6vw;
    /* Retain the existing height while widening the mobile cards by 20%. */
    height: min(56svh, 30.5rem);
    min-height: 21.5rem;
  }
  .what-index-card-copy { padding: 1.35rem 1.1rem; }
  .what-we-do.what-index-section .what-index-card-label { margin-bottom: .7rem; font-size: .54rem; }
  /* 4vw of 390px is 15px, so the card titles need their own floor here. */
  .what-index-card h3 { font-size: clamp(1.9rem, 8.5vw, 2.9rem); }
  .what-index-card-summary { margin-top: 1rem; font-size: .84rem; line-height: 1.5; }
  .what-index-card-footer { font-size: .52rem; letter-spacing: .05em; }

  /* Caption hidden on phones — see home-impact-cover.css, which loads later
     and owns the higher-specificity rules for this plate. */
}

@media (prefers-reduced-motion: reduce) {
  .what-we-do.what-index-section { height: auto; overflow: hidden; }
  .what-index-stage { position: relative; height: auto; overflow: visible; }
  .what-index-track { display: grid; width: 100%; height: auto; padding-inline: var(--frame-pad); transform: none !important; }
  .what-we-do.what-index-section .what-index-card { width: 100%; }
  .what-index-coda { width: 100%; margin-left: 0; }
  .what-index-card-media, .what-index-coda > img { transform: none !important; }
}

/* ------------------------------------------------------------------ */
/* Opening plate, cut away to the ground beneath                        */
/* ------------------------------------------------------------------ */

/* The photograph the plate uncovers. It never moves: once revealed it is the
   ground the whole card sequence travels across. */
.what-index-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #0e0a14;
}

.what-index-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lifted rather than dimmed: the cards carry their own ground, so this one
     is allowed to stay bright. The frame is a dawn shot whose top half sits in
     blue shadow, so the lift is real rather than cosmetic. */
  filter: saturate(.92) contrast(.96) brightness(1.14);
  transform: scale(var(--what-cover-scale, 1.06));
  transform-origin: center;
  will-change: transform;
}

/* Three bands of one photograph, each clipped away towards its own left edge.
   Because every band is a slice of a single frame at viewport width, the plate
   reads as one picture right up until the last of it goes. */
.what-index-plate {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  pointer-events: none;
}

.what-index-plate-band {
  position: relative;
  /* Three fr columns land on fractional pixels. Each band starts a pixel early
     and tucks under its neighbour, so no hairline of the ground shows through
     a join that is still meant to be covered. */
  width: calc(100% + 1px);
  margin-left: -1px;
  overflow: hidden;
  /* --band-open runs 0 → 1, eating the band from its right edge. */
  clip-path: inset(0 calc(var(--band-open, 0) * 100%) 0 0);
}

.what-index-plate-band i {
  position: absolute;
  top: 0;
  /* 100% is the band's own box, which runs one pixel long and starts one pixel
     early, so both have to be given back or each band drifts further left than
     the last and the plate stops lining up across its joins. */
  left: calc(var(--band) * -100% + (var(--band) + 1) * 1px);
  display: block;
  width: calc(300% - 3px);
  height: 100%;
  background-image: var(--what-plate-image, url("/assets/what-we-do-lions-head.jpg"));
  background-position: center;
  background-size: cover;
  /* The plate is a bright, open frame now, so it is no longer pulled down —
     the type is carried by the scrim below rather than by darkening the photo. */
  filter: saturate(.86) contrast(1.01);
}

/* Weighted to the middle, where the title sits, and kept off the sky at the
   top so the frame still reads as the bright one it is. */
.what-index-plate-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(150% 62% at 50% 50%, rgba(12, 8, 18, .58), rgba(12, 8, 18, 0) 76%),
    linear-gradient(180deg, rgba(12, 8, 18, .16), rgba(12, 8, 18, .10) 45%, rgba(12, 8, 18, .42));
}

/* A hairline of light down the retreating edge, so the cut reads as an edge
   travelling rather than the plate simply thinning. */
.what-index-plate-band::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, .5);
  /* A parabola: nothing at rest, nothing once the band has gone, brightest
     mid-travel. Tied to (1 - open) alone it sat lit on an untouched plate and
     drew three hairlines down it. */
  opacity: calc(var(--band-open, 0) * (1 - var(--band-open, 0)) * 4);
}

.what-index-cover-title {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--frame-pad);
  color: #fff;
  text-align: center;
  /* Type leaves before the first cut reaches it, so it is never sliced. */
  opacity: var(--what-cover-title, 1);
  transform: translate3d(0, calc((1 - var(--what-cover-title, 1)) * -2.5rem), 0);
  will-change: opacity, transform;
}

.what-index-cover-title .what-index-eyebrow {
  margin: 0 0 clamp(1rem, 2.4vh, 1.8rem);
  color: #fff;
  text-shadow: 0 1px 16px rgba(10, 6, 16, .8);
}

.what-index-cover-title h2 {
  max-width: 14ch;
  margin: 0;
  font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
  font-size: clamp(3.4rem, 8.4vw, 9.5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 40px rgba(10, 6, 16, .55);
  transform: scale(var(--what-cover-heading-scale, 1));
  transform-origin: center;
  will-change: transform;
}

.what-index-cover-lead {
  position: absolute;
  top: 64%;
  right: clamp(2rem, 10vw, 11rem);
  width: min(24rem, 26vw);
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 16px rgba(10, 6, 16, .8);
  font-size: clamp(.78rem, .9vw, .92rem);
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  opacity: var(--what-cover-lead-opacity, 1);
  transform: translate3d(0, var(--what-cover-lead-y, 0), 0);
  will-change: opacity, transform;
}

.what-index-cover-cue {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 16px rgba(10, 6, 16, .8);
  font-size: .62rem;
  font-weight: var(--w-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The cards ride over the uncovered photograph, so the track sits above it and
   starts one viewport to the right — the first card enters from off-screen as
   the last of the plate goes. */
.what-index-viewport { z-index: 3; }
/* One viewport plus the card frame. Exactly 100vw puts the first card's own box
   on the right edge, but its frame is drawn on a negative inset — up to 1.3rem
   outside that box — so a strip of it sat on screen down the right-hand edge
   through the whole plate reveal. This was fixed for phones first; the frame is
   wider on a desktop, so the sliver was larger there. */
.what-index-track { padding-left: calc(100vw + 2rem); }

/* On that ground the cards need their own edge to stay card-shaped. */
.what-we-do.what-index-section .what-index-card {
  box-shadow: none;
}

/* The running head belongs to the card sequence, not the opening plate, so it
   arrives with the cut rather than sitting unreadable on the dark photograph.
   It now sits on a photograph rather than the lilac ground, so it is set in
   white over a soft shade that carries it across whatever is behind it. */
.what-we-do.what-index-section .what-index-chrome {
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 14px rgba(12, 8, 18, .55);
  opacity: calc(var(--what-chrome, 1) * (1 - var(--impact-handoff, 0)));
  transition: opacity .2s linear;
}

.what-we-do.what-index-section .what-index-chrome b { color: #fff; }

/* Both fallbacks drop the cut entirely: the plate becomes a plain opening
   panel with the title over it, and the photograph it would have uncovered is
   shown whole underneath, before the cards. The stage becomes a flow column so
   the two stack in that order rather than overlapping — the earlier blocks
   above have already unstuck it. */
/* Reduced motion only. This block takes the chapter apart — the sticky stage
   becomes a flex column, the plate stops being cut away, the cards stop
   travelling — which is the right answer for someone who has asked for no
   animation, and the wrong one for a phone. Phones now run the same scroll
   piece as desktop (see the refit above), so the width condition is gone. */
@media (prefers-reduced-motion: reduce) {
  .what-index-stage { display: flex; flex-direction: column; }

  .what-we-do.what-index-section .what-index-chrome {
    order: 0;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    padding: 1.2rem 1rem 0;
    opacity: 1 !important;
  }

  .what-index-plate {
    order: 1;
    position: relative;
    display: block;
    height: 86svh;
    min-height: 30rem;
  }

  /* Same order as the plate, so DOM order keeps it second, then pulled back
     over the plate rather than absolutely positioned against the stage. */
  .what-index-cover-title {
    order: 1;
    position: relative;
    height: 86svh;
    min-height: 30rem;
    margin-top: -86svh;
    opacity: 1 !important;
    transform: none !important;
  }

  .what-index-cover-title h2 {
    transform: none !important;
  }

  .what-index-cover-lead {
    position: static;
    width: min(100%, 32rem);
    margin-top: 1.5rem;
    font-size: 1rem;
    opacity: 1 !important;
    transform: none !important;
  }

  .what-index-backdrop {
    order: 2;
    position: relative;
    height: 46svh;
    min-height: 16rem;
    margin-top: 1rem;
  }

  .what-index-viewport { order: 3; height: auto; }
  .what-index-backdrop img { transform: none !important; }

  .what-index-plate-band { display: none; }
  .what-index-plate-band:first-child {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: 0;
    clip-path: none !important;
  }
  .what-index-plate-band:first-child::before { display: none; }
  .what-index-plate-band:first-child i { left: 0; width: 100%; }

  /* No track travel here, so the last card has no exit to run. */
  .what-we-do.what-index-section .what-index-card--activation {
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 899px) {
  .what-index-cover-title { padding: 1.5rem; }

  /* Phone render cost, not choreography — the plate cut, the band retreat and
     the track travel are all unchanged (see the mobile-motion rule elsewhere).

     1. The card frame's blurred backdrop cannot be layer-cached: it re-reads
        and re-blurs the pixels behind it on every frame the track moves, which
        is the whole chapter. Three of them. At phone size the blur is barely
        legible anyway, so the ring keeps its border, its inset highlights and
        its shadow, and trades the blur for a slightly stronger flat fill. */
  .what-we-do.what-index-section .what-index-card::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(233, 238, 242, .2);
  }

  /* 2. --what-image-scale moves each card's photograph by 0.055 of its width
        as it crosses the centre. On a 78vw card that is a few pixels nobody
        sees, and it holds three composited layers hot for the whole beat. */
  .what-index-card-media {
    transform: none;
    will-change: auto;
  }

  /* 3. The plate photograph. Each band paints it at 300% of the band, i.e.
        about one viewport across, so a phone needs ~1200px, not 1920. */
  .what-index-plate-band i {
    background-image: var(--what-plate-image, url("/assets/what-we-do-lions-head-1200.jpg"));
  }
}

@media (prefers-reduced-motion: reduce) {
  .what-index-track { padding-left: 0; }
}

/* Keep iPhone scrolling on moving layers: no live backdrop blur, image zoom,
   or repainted clip-path during the horizontal chapter. Desktop is unchanged. */
.what-index-plate-slice { display: contents; }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .what-index-track { padding-block: clamp(3rem, 7lvh, 4.5rem); }
  .what-we-do.what-index-section .what-index-card::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(233, 238, 242, .4);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  }
  .what-index-card-media { transform: scale(1.025); will-change: auto; }
  .what-index-backdrop img { transform: scale(1.02); will-change: auto; }
  .what-index-plate-band { clip-path: none; contain: paint; }
  .what-index-plate-band::before,
  .what-index-plate-band::after { display: none; }
  .what-index-plate-slice {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    transform: translate3d(calc(var(--band-open, 0) * -100%), 0, 0);
    will-change: transform;
  }
  .what-index-plate-band i {
    transform: translate3d(calc(var(--band-open, 0) * 100% / 3), 0, 0);
    will-change: transform;
  }
  .what-index-plate-slice::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(150% 62% at 50% 50%, rgba(12, 8, 18, .58), rgba(12, 8, 18, 0) 76%),
      linear-gradient(180deg, rgba(12, 8, 18, .16), rgba(12, 8, 18, .10) 45%, rgba(12, 8, 18, .42));
    transform: translate3d(calc(var(--band-open, 0) * 100%), 0, 0);
  }
}

/* Client request, 30 Sep: the card subheadings (The spark / The insight /
   The shift) and the card copy read bigger and more present. */
.what-we-do.what-index-section .what-index-card-label {
  font-size: clamp(.82rem, .95vw, 1rem);
  letter-spacing: .12em;
}
.what-index-card-summary {
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.55;
}
@media (max-width: 899px) {
  .what-we-do.what-index-section .what-index-card-label { font-size: .74rem; }
  .what-index-card-summary { font-size: .98rem; line-height: 1.5; }
}

/* Keep the full-frame photograph in its natural colour. The cards retain
   their own aubergine copy scrim below. */
.what-index-backdrop img { filter: none; }

.what-index-card-media {
  filter: saturate(.62) contrast(.9) brightness(.82);
}
.what-index-card-shell::after {
  background:
    linear-gradient(180deg,
      rgba(36, 23, 51, .9) 0%,
      rgba(36, 23, 51, .8) 30%,
      rgba(36, 23, 51, .34) 55%,
      rgba(36, 23, 51, .06) 72%,
      rgba(36, 23, 51, .5) 100%);
}
.what-index-card-copy { text-shadow: 0 1px 18px rgba(20, 12, 28, .45); }
.what-index-card-summary { color: #fff; }
.what-we-do.what-index-section .what-index-card-label { color: #fff; }
.what-index-card-label span { color: rgba(255, 255, 255, .72); }
.what-index-card-footer { color: #fff; }

/* The frame was a pale glass ring; on the darker ground it now reads as a
   bright edge, which is what lifts each card off the page. */
.what-we-do.what-index-section .what-index-card::before {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(244, 238, 248, .2);
}