/* A single-screen, hover-led atlas. Detailed stories stay on impact.html. */
.home-impact {
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  min-height: 0;
  padding-block: 4rem;
  overflow: visible;
}
.home-impact-copy { align-self: stretch; max-width: 40rem; transform: none; }
/* Serif display for the section heading, per the impact-page direction. The
   nowrap spans are gone — the copy now comes from impactData.intro as one
   string, so the line breaks have to be found rather than hand-placed. */
.home-impact-copy h2 {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.4vw, 4.9rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.home-impact-copy > p:not(.home-impact-eyebrow) { margin-top: 1.5rem; max-width: 33ch; font-size: 1rem; line-height: 1.6; }
.home-impact-link { min-height: 44px; margin-top: 1.25rem; }
/* Wider logo row: it is the social proof, so give it the full column. */
.home-impact-partners { width: 100%; max-width: 100%; margin: 3rem 0 0; transform: none; }
.home-impact-partners > p { margin-bottom: .9rem; color: #817a8b; }
.home-impact-partner-window { height: 4rem; }
.home-impact-partner-loop { animation: home-impact-logo-carousel 48s linear infinite; }
.home-impact-partner-window + .home-impact-partner-window .home-impact-partner-loop { animation-duration: 54s; animation-direction: reverse; }
.home-impact-partner-group { display: flex; flex: 0 0 auto; align-items: center; }
.home-impact-partner-group > span { display: grid; place-items: center; flex: 0 0 clamp(7rem, 10.5vw, 10.5rem); width: clamp(7rem, 10.5vw, 10.5rem); height: 4rem; padding: .45rem 1rem; }
/* Solid black, full strength. The logos are pre-processed to black-on-
   transparency, so the greyscale filter and the .65 knock-back that used to
   sit here are both gone — between them they were what made the bar read as
   a row of grey smudges rather than a client list. */
.home-impact-partner-loop img { display: block; width: auto; height: 2.4rem; max-width: 100%; object-fit: contain; opacity: 1; }
.home-impact-partners:hover .home-impact-partner-loop { animation-play-state: paused; }
.home-impact-stage { align-self: stretch; min-height: 31rem; padding-top: min(90vw, 31rem); padding-bottom: 7rem; overflow: visible; }
.home-impact-globe { inset: 0 0 auto; width: 100%; height: min(112vw, 40rem); min-height: 0; overflow: visible; }
.home-impact-globe .impact-globe-canvas { cursor: grab; touch-action: pan-y; }
.home-impact-globe .impact-globe-canvas.is-dragging { cursor: grabbing; }
.home-impact-globe .impact-globe-canvas:focus-visible { outline: 2px solid var(--violet); outline-offset: -4px; border-radius: 50%; }
.home-impact-globe .globe-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* A partial route network quietly connects the locations without competing
   with the dotted geography or turning the globe into a diagram. */
.home-impact-globe .globe-routes path {
  fill: none;
  stroke: #cfa9ee;
  stroke-width: .8;
  stroke-linecap: round;
  opacity: .42;
  filter: drop-shadow(0 0 3px rgba(168, 115, 223, .34));
}
.home-impact-globe .globe-routes .globe-route-pulse {
  stroke: #f1d7ff;
  stroke-width: 3.2;
  stroke-dasharray: .008 .992;
  stroke-dashoffset: 1;
  opacity: 0;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 5px rgba(207, 124, 255, .95))
    drop-shadow(0 0 10px rgba(139, 73, 211, .72));
  will-change: stroke-dashoffset;
}
.home-impact-globe .globe-routes .globe-route-pulse.is-signalling {
  animation: globe-route-signal var(--route-pulse-duration, 3s) linear 1;
}
@keyframes globe-route-signal {
  0% { stroke-dashoffset: 1; opacity: 0; }
  10%, 86% { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* The 44px hit area and its visible dot share the exact projected centre. */
.home-impact-globe .globe-marker { display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.home-impact-globe .globe-marker i { width: 9px; height: 9px; border-width: 1.5px; transform: none; background: #c493ea; box-shadow: 0 0 14px 4px rgba(191,142,234,.7); }
.home-impact-globe .globe-marker:hover i,
.home-impact-globe .globe-marker:focus-visible i,
.home-impact-globe .globe-marker.is-current i { transform: scale(1.25); box-shadow: 0 0 22px 8px rgba(201,154,241,.7), 0 0 0 8px rgba(214,180,242,.16); }
.home-impact-globe .globe-marker.is-current::after { content: ''; position: absolute; inset: 8px; border: 1px solid #dfc4f3; border-radius: 50%; }
.home-impact-globe .globe-marker span { top: 50%; left: calc(100% - 3px); transform: translateY(-50%); font-size: .56rem; text-shadow: 0 1px 5px #21182c; }
.home-impact-globe .globe-markers,
.home-impact-globe .globe-routes {
  opacity: var(--impact-network-enter, 1);
  transition: none;
  will-change: opacity;
}
.home-impact-hint { top: auto; right: auto; left: 0; bottom: 3.5rem; font-size: .6rem; line-height: 1.5; letter-spacing: .04em; text-transform: none; }
.home-impact-card {
  position: relative;
  top: auto; right: auto; bottom: auto;
  display: block;
  width: 100%; max-width: 29rem;
  margin: 0 0 1rem auto;
  border: 1px solid rgba(102,86,119,.08);
  border-radius: .65rem;
  background: rgba(255,255,255,.97);
  box-shadow: 0 1.6rem 4rem rgba(39,27,53,.16);
  backdrop-filter: blur(16px);
}
.home-impact-card-client { justify-content: space-between; gap: 1.2rem; min-height: 4rem; padding: 1rem 3rem 1rem 1.25rem; color: #7b7385; font-size: .53rem; line-height: 1.4; letter-spacing: .1em; }
.home-impact-card-client img { max-width: 7.5rem; height: 1.8rem; filter: grayscale(1); }
.home-impact-card-client > span { max-width: 15ch; text-align: right; }
.home-impact-card-close { position: absolute; top: .25rem; right: .1rem; width: 44px; height: 44px; border: 0; background: transparent; color: #8a8193; font: 300 1.25rem/1 var(--font-ui); cursor: pointer; }
.home-impact-card-media { min-height: 0; height: auto; aspect-ratio: 2.8; overflow: hidden; background: #e6e1e9; }
.home-impact-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.35); }
.home-impact-card-copy { padding: 1.2rem 1.25rem .7rem; }
.home-impact-card-copy h3 { margin: 0; font-size: clamp(1.3rem, 1.5vw, 1.65rem); line-height: 1.1; letter-spacing: -.045em; font-weight: var(--w-medium); }
.home-impact-card-copy > .home-impact-card-summary { margin: .65rem 0 0; font-size: 1rem; line-height: 1.45; }
.home-impact-card-stats { gap: .65rem; margin-top: 1rem; padding-top: .85rem; }
.home-impact-card-stats strong { font-size: 1.4rem; }
.home-impact-card-stats small { font-size: .46rem; line-height: 1.4; letter-spacing: .06em; }
.home-impact-card-copy > .home-impact-card-note { margin: .65rem 0 0; font-size: .58rem; color: #8b8294; }
.home-impact-card-copy > a { display: flex; justify-content: space-between; min-height: 44px; padding-top: .5rem; margin-top: .65rem; border-top: 1px solid rgba(75,55,92,.1); font-size: .55rem; }
.home-impact-controls { position: absolute; z-index: 4; right: 0; bottom: 0; display: flex; align-items: center; gap: .6rem; }
.home-impact-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #e5e0e9; border-radius: 50%; background: rgba(255,255,255,.9); color: #63556f; font: 400 1.2rem/1 var(--font-ui); cursor: pointer; transition: color .2s, background .2s; }
.home-impact-controls button:hover { background: #4c3074; color: #fff; }
.home-impact-controls button:focus-visible, .home-impact-card-close:focus-visible, .home-impact-card a:focus-visible { outline: 2px solid #4c3074; outline-offset: 3px; }
.home-impact-counter { color: #8b8197; font-size: .6rem; letter-spacing: .1em; }
.home-impact-meter { display: none; width: 7rem; height: 1px; background: #dcd5e3; overflow: hidden; }
.home-impact-meter i { display: block; width: 20%; height: 100%; background: #7f599f; transition: transform .6s ease; }
/* No WebGL, or the map data would not load: show a still of the real dotted
   globe, captured from the live one, instead of a plain gradient circle. The
   host is overscanned; at 64% the still matches the live globe's size. The
   still cannot be dragged, so the "drag to spin" hint goes with it. */
.home-impact-stage.is-fallback .home-impact-globe {
  background: url("assets/impact/globe-still-v1.png") center / 64% auto no-repeat;
}
.home-impact-stage.is-fallback .home-impact-hint { visibility: hidden; }

/* Touch: the marker labels are the reason the homepage scrolls sideways at
   390px. Each one is absolutely placed to the right of its dot, and the dots on
   the globe's eastern limb push their text past the page edge (measured out to
   477px against a 390px viewport) — nothing clips them, so the document itself
   grows. They are also redundant here now: the markers are no longer tappable,
   the arrows step through the case studies and the card names each one. Dots
   only, and the page stops moving sideways. */
@media (hover: none) {
  .home-impact-globe .globe-marker span { display: none; }
}

@media (min-width: 1100px) {
  .home-impact { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(1rem, 3vw, 4rem); min-height: min(100svh, 64rem); padding-block: clamp(3rem, 5vh, 5rem); }
  /* Top-aligned rather than centred, so the heading sits above the globe
     instead of alongside its middle. */
  .home-impact-copy { display: flex; flex-direction: column; justify-content: flex-start; padding-block: 1.5rem 3rem; }
  .home-impact-partners { margin-top: clamp(3.5rem, 9vh, 7rem); }
  .home-impact-stage { min-height: clamp(38rem, 80svh, 56rem); padding: 0; }
  /* Overscan the actual WebGL drawing surface, not just its CSS wrapper. This
     leaves enough rendered area for the selected zoom to remain a full circle. */
  .home-impact-globe { inset: -18% -12% -18% -20%; width: auto; height: auto; }
  .home-impact-hint { bottom: 0; }
  .home-impact-card { position: absolute; top: 24%; right: 0; width: clamp(21rem, 28.5vw, 29rem); margin: 0; }
  .home-impact-card-copy > .home-impact-card-summary { font-size: .84rem; }
  .home-impact-meter { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact-partner-loop { animation: none !important; transform: none; }
  .home-impact-card, .home-impact-meter i, .home-impact-controls button { transition: none; }
  .home-impact-globe .globe-route-pulse { display: none; }
}

/* Card headline in the same serif as the section heading, and a country label
   sitting on the image the way the impact-page design has it. */
.home-impact-card-copy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.04;
}
.home-impact-card-media { position: relative; }
.home-impact-card-place {
  position: absolute;
  top: .7rem;
  right: .8rem;
  padding: .3rem .55rem;
  border-radius: 3px;
  background: rgba(12, 8, 18, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: var(--w-bold) .52rem/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-impact-card-place:empty { display: none; }

/* --------------------------------------------------------------- */
/* Impact experience: the atlas rises over the pinned cinematic coda */
/* --------------------------------------------------------------- */
.home-impact {
  --impact-atlas-enter: 1;
  --impact-copy-enter: 1;
  --impact-network-enter: 1;
  background: #fbfaf8;
}

.home-impact-card-label {
  margin: 0 0 .75rem;
  color: var(--violet);
  font: 700 .56rem/1 var(--font-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .home-impact {
    z-index: 4;
    grid-template-columns: minmax(18rem, .62fr) minmax(36rem, 1.38fr);
    gap: clamp(1rem, 2.5vw, 3rem);
    min-height: 112svh;
    margin-top: 0;
    padding-top: clamp(4rem, 7vh, 6rem);
    border-top: 0;
  }

  .home-impact::before { content: none; }

  .home-impact-copy {
    align-self: center;
    max-width: 32rem;
    opacity: var(--impact-copy-enter);
    transform: translate3d(0, calc((1 - var(--impact-copy-enter)) * 5rem), 0);
    will-change: opacity, transform;
  }

  .home-impact-copy h2 {
    font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
    /* 20% smaller than it was (Hodge, 2026-09-14): heading, film and globe. */
    font-size: clamp(2.4rem, 3.72vw, 4.32rem);
    line-height: .94;
  }

  .home-impact-stage {
    min-height: min(88svh, 60rem);
    opacity: var(--impact-copy-enter);
    transform: translate3d(0, calc((1 - var(--impact-copy-enter)) * 12rem), 0) scale(calc(.94 + var(--impact-copy-enter) * .06));
    transform-origin: 50% 100%;
    will-change: opacity, transform;
  }

  .home-impact-globe { inset: -22% -16% -18% -22%; scale: 1.012; }

  :root { --impact-drawer-width: 42vw; }

  body.impact-drawer-open .home-impact {
    grid-template-columns: minmax(14rem, .5fr) minmax(23rem, 1fr);
    padding-right: calc(var(--frame-inset) + var(--impact-drawer-width));
  }

  .home-impact-card {
    grid-template-rows: auto minmax(14rem, 34svh) minmax(0, 1fr);
    box-shadow: -1.2rem 0 4rem rgba(32, 20, 42, .13);
  }

  .home-impact-card-client {
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) auto;
    gap: .7rem 1.25rem;
    min-height: 5rem;
    padding: 1rem 4.2rem 1rem 1.8rem;
  }

  .home-impact-card-client img { grid-row: 1 / 3; align-self: center; }
  .home-impact-card-client > span:not(.home-impact-card-place) { justify-self: end; text-align: right; }
  .home-impact-card-place {
    position: static;
    justify-self: end;
    padding: 0;
    background: transparent;
    color: #6f6678;
    font-size: .52rem;
    backdrop-filter: none;
  }

  .home-impact-card-copy { padding: clamp(1.35rem, 2vw, 2.1rem) clamp(1.7rem, 2.4vw, 2.6rem) 2rem; }
  .home-impact-card-copy h3 { font-size: clamp(2rem, 2.8vw, 3.35rem); }
}

@media (max-width: 899px) {
  /* A small card over the globe, not a panel attached to the screen.

     This was a full-screen drawer, then a full-width bottom sheet; both read as
     the page handing over to something else, when all the arrows are doing is
     previewing the next location. It is now a card sized to its own content —
     one picture, one headline, one link — floating over the globe, clear of the
     arrow controls so the thing you pressed stays under your thumb.

     Written as an explicit block rather than inherited from the desktop card:
     that card is a grid with its own columns and a filled link row, and
     borrowing it here produced an empty band across the top and a link the size
     of a button. Every property it would otherwise carry in is reset. */
  /* The film carries the proof, so it leads and the link follows it. DOM order
     is left alone (link first) so this is a visual reorder only — with two
     items, one of them a button and one a link, the tab order reading link then
     film is still coherent. */
  .home-impact-actions .home-impact-film { order: 1; }
  .home-impact-actions .home-impact-link { order: 2; }

  .home-impact .home-impact-stage { position: relative; }
  /* Top right, over the globe's upper corner. The arrows are the only way
     through the case studies on touch, so they must never be what the preview
     card covers — and with them up here the card can sit low enough that the
     globe stays in view behind and above it. */
  .home-impact .home-impact-controls {
    top: .25rem;
    right: 0;
    bottom: auto;
    left: auto;
  }
  .home-impact .home-impact-card {
    /* Fixed to the viewport, not the stage. Anchored to the stage it sat at a
       position that depended on how far down the section you happened to be —
       low in the stage meant below the fold. Pinned to the bottom of the screen
       it is always fully visible, the globe is always the thing above it, and
       it leaves on the next scroll (dismissPreviewOnScroll in home-impact.js).
       The controls move to the top right of the globe (below), so the arrows
       are nowhere near it. */
    position: fixed;
    z-index: 90;
    top: auto;
    right: auto;
    bottom: 1.5rem;
    left: 50%;
    display: block;
    width: min(16.5rem, calc(100% - 2.5rem));
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(102, 86, 119, .12);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 .9rem 2.5rem rgba(39, 27, 53, .22);
    opacity: 0;
    transform: translate3d(-50%, .8rem, 0);
    transition: opacity .28s ease, transform .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s;
    visibility: hidden;
  }
  .home-impact .home-impact-card.is-visible {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    transition-delay: 0s;
    visibility: visible;
  }

  /* What a card this size cannot carry and does not need to: the client row and
     sector repeat the name in the headline, and the statistics and the quote
     are the body of a case study rather than a reason to open one. */
  .home-impact .home-impact-card-client,
  .home-impact .home-impact-card-stats,
  .home-impact .home-impact-card-quote,
  .home-impact .home-impact-card-note,
  .home-impact .home-impact-card-summary { display: none; }

  .home-impact .home-impact-card-media {
    display: block;
    width: 100%;
    height: 6.5rem;
    min-height: 0;
    aspect-ratio: auto;
  }
  .home-impact .home-impact-card-media img { width: 100%; height: 100%; object-fit: cover; filter: none; }
  .home-impact .home-impact-card-copy { display: block; padding: .7rem .85rem .75rem; }
  .home-impact .home-impact-card-copy h3 {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.02em;
  }
  /* A rule and a line of type, never a filled button on a card this small. */
  .home-impact .home-impact-card-copy > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-height: 38px;
    margin: .55rem 0 0;
    padding: .5rem 0 0;
    border: 0;
    border-top: 1px solid rgba(75, 55, 92, .14);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #4c3074;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .home-impact .home-impact-card-copy > a span {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: .8rem;
  }
  .home-impact .home-impact-card-close {
    position: absolute;
    top: .05rem;
    right: .2rem;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact { margin-top: 0; }
  .home-impact-copy,
  .home-impact-stage { opacity: 1; transform: none; }
  .what-index-coda figcaption,
  .what-index-coda figcaption h2 { opacity: 1; transform: none; }
}

/* ── Impact film ──────────────────────────────────────────────────────────── */

/* Sits under the CTA at the foot of the copy column, left aligned with it. The
   card is deliberately wider than the text above it and runs over the stage —
   at roughly a tenth of the page it is a real target, not a footnote. */
.home-impact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.2vh, 1.9rem);
  margin-top: clamp(1.4rem, 2.6vh, 2.2rem);
}

.home-impact-actions .home-impact-link { flex: 0 0 auto; margin-top: 0; }

/* The CTA and the film share one width, so both left and right edges line up
   and the arrow sits over the film's right edge (Lauchie, 2026-10-06). */
.home-impact-copy .home-impact-actions {
  align-items: stretch;
  width: clamp(15.2rem, 25.6vw, 24.8rem);
  max-width: 100%;
}
.home-impact-actions .home-impact-film { width: 100%; }
.home-impact-actions .home-impact-link { width: 100%; justify-content: space-between; }
@media (max-width: 1099px) {
  .home-impact-copy .home-impact-actions { width: min(100%, 22.4rem); }
}

.home-impact-film {
  position: relative;
  flex: 0 0 auto;
  display: block;
  /* ~10% of the page at desktop: 16:9 at this width is a real target. */
  width: clamp(15.2rem, 25.6vw, 24.8rem);
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #241733;
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1rem 3rem rgba(31, 21, 42, .22);
  transition: box-shadow .45s ease, transform .45s ease;
}

.home-impact-film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.home-impact-film__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 8, 18, .82) 4%, rgba(12, 8, 18, .16) 52%, rgba(12, 8, 18, .3));
}

.home-impact-film__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  transform: translate(-50%, -50%);
  transition: background .35s ease, transform .35s ease;
}

/* Drawn, not typed, so it stays optically centred in the circle. */
.home-impact-film__cue::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: .42rem solid transparent;
  border-bottom: .42rem solid transparent;
  border-left: .66rem solid var(--tlh-purple, #4c3074);
  transform: translate(-34%, -50%);
}

.home-impact-film__text {
  position: absolute;
  right: 1rem;
  bottom: .85rem;
  left: 1rem;
  display: grid;
  gap: .1rem;
}

.home-impact-film__eyebrow {
  color: rgba(255, 255, 255, .78);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-impact-film__label {
  font-size: 1.05rem;
  font-weight: var(--w-semibold);
  letter-spacing: -.01em;
  line-height: 1.15;
}

.home-impact-film__meta {
  position: absolute;
  top: .8rem;
  right: 1rem;
  padding: .22rem .45rem;
  border-radius: 2px;
  background: rgba(12, 8, 18, .5);
  color: #fff;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.home-impact-film:hover { transform: translateY(-3px); box-shadow: 0 1.5rem 3.8rem rgba(31, 21, 42, .3); }
.home-impact-film:hover .home-impact-film__still { transform: scale(1.05); }
.home-impact-film:hover .home-impact-film__cue { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.home-impact-film:focus-visible { outline: 2px solid var(--tlh-purple, #4c3074); outline-offset: 4px; }

@media (max-width: 1099px) {
  .home-impact-film { width: min(100%, 22.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact-film,
  .home-impact-film__still,
  .home-impact-film__cue { transition: none; }
  .home-impact-film:hover { transform: none; }
  .home-impact-film:hover .home-impact-film__still { transform: none; }
}

/* ── Impact thread ────────────────────────────────────────────────────────── */

/* The line reaches up out of the section, over the closing plate, so it appears
   to start up there and scroll down into place. It is decorative and must never
   catch the pointer — the globe underneath is draggable. */
/* Fixed to the viewport, not to the section: the CTA is pinned while the plate
   is on screen and the globe rises from below, so a document-flow overlay drifts
   away from one end or the other. */
.impact-thread {
  position: fixed;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  /* --thread-in brings it on as the run starts, --thread-fade takes it away as
     the globe opens. */
  opacity: var(--thread-fade, 1);
}

.impact-thread__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: var(--thread-in, 0);
}

/* The unlit path: present, but only just — the drawn line is the event. */
.impact-thread__track {
  stroke: rgba(95, 60, 145, .2);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.impact-thread__drawn {
  stroke: #6b46a8;
  stroke-width: 2;
  stroke-linecap: round;
  /* A whisper of light so the line holds up where it crosses the dark plate
     as well as the off-white section. */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35));
}

/* The dot is the CTA's own circle lifted off the button: same 30px, same
   purple, same arrow at the moment it leaves. It is not faded in. It swaps in
   on the circle's exact pixel (the circle on the button hides in the same
   frame), then drops the arrow, gains its halo and shrinks as the line draws. */
.impact-thread__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tlh-purple, #5f3c91);
  box-shadow:
    0 0 0 calc(var(--thread-in, 0) * .5rem) rgba(95, 60, 145, .12),
    0 .5rem 1.4rem rgba(95, 60, 145, calc(var(--thread-in, 0) * .35));
  opacity: 0;
  will-change: transform;
}
.impact-thread__dot::after {
  content: "\2193";
  color: #fff;
  font-size: .9rem;
  line-height: 1;
  opacity: calc(1 - var(--thread-in, 0));
}
.impact-thread.is-running .impact-thread__dot { opacity: calc(1 - var(--thread-dot-out, 0)); }

/* The circle has left; the white pill stays where it was. */
.what-index-coda .what-index-cta.is-dot-away .impact-cta-arrow { visibility: hidden; }

@media (max-width: 899px) {
  .impact-thread { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .impact-thread { display: none; }
}

/* ── Image-led Impact opening ──────────────────────────────────────────────
   This replaces the old closing plate and its drawn line. The photographs
   carry the handoff out of What We Do; one frame then grows into the Impact
   title before the existing globe atlas continues in normal document flow. */
.home-impact-opening {
  position: relative;
  z-index: 4;
  height: 225svh;
  background: #fff;
}

.home-impact-opening__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.home-impact-opening__feature,
.home-impact-opening__tile {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #eee9f1;
  will-change: transform, filter, opacity;
}

.home-impact-opening__feature {
  z-index: 3;
  inset: 0;
  border-radius: var(--impact-feature-radius, 5px);
  transform: translate3d(0, var(--impact-feature-y, 43vh), 0) scale(var(--impact-feature-scale, .58));
  transform-origin: 50% 50%;
}

.home-impact-opening__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 12, 22, .02) 32%, rgba(17, 12, 22, .76) 100%);
  opacity: var(--impact-feature-shade, .18);
}

.home-impact-opening__feature img,
.home-impact-opening__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-impact-opening__feature img { object-position: 50% 48%; }

.home-impact-opening__tile {
  z-index: 2;
  width: var(--tile-w);
  aspect-ratio: var(--tile-ratio, 1.45);
  border-radius: 5px;
  opacity: var(--tile-opacity, 1);
  filter: blur(var(--tile-blur, 0));
  transform: translate3d(var(--tile-x, 0), var(--tile-y, 0), 0) scale(var(--tile-scale, 1));
}

.home-impact-opening__tile img { transform: scale(1.015); }
.home-impact-opening__tile--a { --tile-w: 42vw; --tile-ratio: 1.28; top: 16%; left: -8%; }
.home-impact-opening__tile--b { --tile-w: 54vw; --tile-ratio: 1.5; top: 12%; right: -12%; }
.home-impact-opening__tile--c { --tile-w: 38vw; --tile-ratio: 1.42; top: 47%; right: -10%; }
.home-impact-opening__tile--d { --tile-w: 40vw; --tile-ratio: 1.42; top: 58%; left: -11%; }
.home-impact-opening__tile--e,
.home-impact-opening__tile--f,
.home-impact-opening__tile--g { display: none; }

.home-impact-opening__copy {
  position: absolute;
  z-index: 4;
  right: 1rem;
  bottom: 2.1rem;
  left: 1rem;
  color: #fff;
  text-align: center;
  opacity: var(--impact-copy-opacity, 0);
  transform: translate3d(0, var(--impact-copy-y, 28px), 0);
  will-change: opacity, transform;
}

.home-impact-opening__copy > p {
  margin: 0 0 1rem;
  color: rgba(255,255,255,.82);
  font-size: .61rem;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.home-impact-opening__copy h2 {
  margin: 0;
  font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
  font-size: clamp(3.2rem, 15vw, 5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.home-impact-opening__copy blockquote {
  max-width: 29ch;
  margin: 1.25rem auto 0;
  color: rgba(255,255,255,.84);
  font-size: .9rem;
  line-height: 1.5;
}

@media (min-width: 700px) {
  .home-impact-opening { height: 285svh; }
  .home-impact-opening__stage { min-height: 38rem; }
  .home-impact-opening__feature {
    transform: translate3d(0, var(--impact-feature-y, 54vh), 0) scale(var(--impact-feature-scale, .38));
  }
  .home-impact-opening__tile--a { --tile-w: clamp(10rem, 20vw, 25rem); top: 13%; left: -1.5%; }
  .home-impact-opening__tile--b { --tile-w: clamp(12rem, 28vw, 34rem); top: 9%; right: auto; left: 28%; }
  .home-impact-opening__tile--c { --tile-w: clamp(11rem, 23vw, 28rem); top: 12%; right: -1%; }
  .home-impact-opening__tile--d { --tile-w: clamp(9rem, 18vw, 22rem); top: 62%; left: 4%; }
  .home-impact-opening__tile--e { display: block; --tile-w: clamp(12rem, 25vw, 31rem); --tile-ratio: 1.58; top: 59%; right: 4%; }
  .home-impact-opening__tile--f { display: block; --tile-w: clamp(8rem, 14vw, 17rem); --tile-ratio: 1.2; bottom: -7%; left: 25%; }
  .home-impact-opening__tile--g { display: block; --tile-w: clamp(9rem, 17vw, 21rem); bottom: -10%; right: 25%; }
  .home-impact-opening__copy {
    right: auto;
    bottom: clamp(2rem, 6vh, 5.5rem);
    left: 50%;
    width: min(90vw, 72rem);
    transform: translate3d(-50%, var(--impact-copy-y, 28px), 0);
  }
  .home-impact-opening__copy h2 { font-size: clamp(4.5rem, 8.4vw, 9.5rem); }
  .home-impact-opening__copy blockquote { max-width: 52ch; font-size: clamp(.86rem, 1.05vw, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact-opening { height: 100svh; }
  .home-impact-opening__tile { display: none; }
  .home-impact-opening__feature { border-radius: 0; transform: none; }
  .home-impact-opening__feature::after { opacity: .62; }
  .home-impact-opening__copy { opacity: 1; transform: none; }
}

@media (min-width: 700px) and (prefers-reduced-motion: reduce) {
  .home-impact-opening__copy { transform: translateX(-50%); }
}

/* ── Impact bridge (impact-bridge.js) ─────────────────────────────────────── */
/* The globe section sits behind the end of What We Do, so the "Our impact"
   plate can shrink straight into the film card over it. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .impact-bridge-on .what-we-do.what-index-section { z-index: 6; }
  .impact-bridge-on .home-impact { z-index: 1; margin-top: -100svh; }
  /* 520px of pinned scroll for the plate to shrink into the film card
     (impact-bridge.js follows the scroll), then a short beat before the
     section scrolls on into the team. */
  .impact-bridge-on .home-impact { height: calc(100svh + 620px); min-height: 0; }
  .impact-bridge-on .what-we-do.what-index-section.is-bridged { visibility: hidden; }
  .home-impact-globe { scale: calc(1.012 * (.45 + .55 * var(--bridge-grow, 1))); }
}
/* The first landing consumes the flight and the hold, and both sections then
   meet in ordinary document flow. The "Our impact" plate itself stays as the
   last panel of the horizontal chapter (client request, 30 Sep): it used to be
   removed here, so scrolling back up skipped the Our Impact title page. It is
   still, and the shrink never plays in reverse. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .impact-bridge-complete .home-impact {
    height: auto;
    min-height: 0;
    margin-top: 0;
  }
  .impact-bridge-complete .home-impact-pin { position: relative; }
}
.impact-bridge.what-index-coda {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
  display: none;
  flex: none;
  min-height: 0;
  margin: 0;
  border-radius: var(--bridge-radius, 0);
  box-shadow: 0 1rem 3rem rgba(31, 21, 42, calc(var(--bridge-shadow, 0) * .22));
  pointer-events: none;
  will-change: transform, width, height;
  --what-coda-scale: 1;
}
.impact-bridge.what-index-coda.is-flying { display: block; }
.impact-bridge.what-index-coda::after { opacity: var(--bridge-scrim, 1); }
.home-impact-film { transition: box-shadow .45s ease, transform .45s ease, opacity .25s ease; }
.home-impact-film.is-bridged { opacity: 0; transition: none; }
.impact-bridge-complete .home-impact-film { transition-property: box-shadow, transform; }
/* Same photograph as the card: no blur, and the plate's grade eases off. */
/* Scoped to .home-page so it outranks home-impact-cover.css, whose plate rule
   (blur tied to the title's exit) otherwise blurred the photograph in flight. */
.home-page .impact-bridge.what-index-coda > img {
  filter: saturate(calc(.84 + .16 * var(--bridge-plain, 0))) contrast(calc(1.02 - .02 * var(--bridge-plain, 0))) brightness(calc(.78 + .22 * var(--bridge-plain, 0)));
  transform: none;
}
.impact-bridge.what-index-coda::before { display: none; }

/* Globe case-study card: 25% larger overall, type and stats included
   (Hodge, 2026-09-14). */
@media (min-width: 900px) {
  .home-impact .home-impact-card { zoom: 1.4375; }
}
/* Keep the larger card, but set its type back down so it fits the box. */
@media (min-width: 900px) {
  .home-impact .home-impact-card-client,
  .home-impact .home-impact-card-copy { zoom: .8; }
}
/* Make the globe card pop: crisp white, a violet client band, ink headline,
   violet stats and a stronger lift off the globe. */
@media (min-width: 900px) {
  .home-impact .home-impact-card {
    border: 1px solid rgba(76, 48, 116, .35);
    background: #ffffff;
    box-shadow: 0 1.4rem 3.6rem rgba(24, 12, 38, .38), 0 0 0 4px rgba(196, 147, 234, .18);
  }
  .home-impact .home-impact-card-client {
    background: #4c3074;
    border-bottom-color: transparent;
    color: #fff;
  }
  .home-impact .home-impact-card-client span,
  .home-impact .home-impact-card-sector { color: #fff !important; opacity: 1; }
  .home-impact .home-impact-card-client img { filter: brightness(0) invert(1); opacity: 1; }
  .home-impact .home-impact-card-copy h3 { color: #17131c; font-weight: 600; letter-spacing: -.03em; }
  .home-impact .home-impact-card-stats strong,
  .home-impact .home-impact-card-stats b,
  .home-impact .home-impact-card-stats dt { color: #4c3074; font-weight: 700; }
  .home-impact .home-impact-card-stats span,
  .home-impact .home-impact-card-stats dd,
  .home-impact .home-impact-card-stats small { color: #4a4252; }
  .home-impact .home-impact-card-quote { border-left-color: #8f5fc7; }
  .home-impact .home-impact-card-quote p { color: #2b2333; }
  .home-impact .home-impact-card-copy > a { color: #4c3074; }
}
/* Quote sits lower and a touch larger; stat numbers up a step to match. */
@media (min-width: 900px) {
  .home-impact .home-impact-card-copy { display: flex; flex-direction: column; }
  .home-impact .home-impact-card-quote { margin-top: auto; padding-top: .5rem; }
  .home-impact .home-impact-card-quote p { font-size: 1.12em; line-height: 1.4; }
  .home-impact .home-impact-card-stats strong,
  .home-impact .home-impact-card-stats b,
  .home-impact .home-impact-card-stats dt { font-size: 1.15em; }
}
/* Programme headline larger and a little lower; stat numbers up again. */
@media (min-width: 900px) {
  .home-impact .home-impact-card-copy h3 {
    margin-top: .35rem;
    font-size: 1.12rem;
    line-height: 1.16;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: none;
    white-space: normal;
  }
  .home-impact .home-impact-card-stats strong { font-size: 1.3em; }
}
@media (min-width: 900px) {
  .home-impact .home-impact-card-copy h3 { font-size: 1.232rem; }
}
@media (min-width: 900px) {
  .home-impact .home-impact-card-quote p { font-size: 1.232em; -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (min-width: 900px) {
  .home-impact .home-impact-card-stats strong { font-size: 1.56em; }
  .home-impact .home-impact-card-stats small { font-size: 1.2em; }
  .home-impact .home-impact-card-quote p { font-size: 1.478em; }
}
.impact-bridge .what-index-cta { opacity: clamp(0, calc(1 - var(--impact-hero-progress, 0) * 3), 1); }
/* Globe card: overview sentence, stat numbers and their labels read larger
   (sizes are before the card's zoom, so on screen they come out ~15% bigger). */
@media (min-width: 900px) {
  .home-impact .home-impact-card .home-impact-card-stats strong { font-size: 20px; line-height: 1.05; }
  .home-impact .home-impact-card .home-impact-card-stats small { font-size: 7.6px; line-height: 1.3; letter-spacing: .08em; }
  .home-impact .home-impact-card .home-impact-card-quote p { font-size: 12.6px; line-height: 1.38; }
  .home-impact .home-impact-card .home-impact-card-quote cite { font-size: 7px; }
}
@media (min-width: 900px) {
  .home-impact .home-impact-card .home-impact-card-stats strong { font-size: 25px; }
  .home-impact .home-impact-card .home-impact-card-stats small { font-size: 9.4px; }
  .home-impact .home-impact-card .home-impact-card-quote p { font-size: 15px; }
  .home-impact .home-impact-card .home-impact-card-quote cite { font-size: 8.6px; }
}
@media (min-width: 900px) {
  .home-impact .home-impact-card .home-impact-card-stats small { font-size: 8.4px; }
  .home-impact .home-impact-card .home-impact-card-quote p { font-size: 13.6px; }
  .home-impact .home-impact-card .home-impact-card-quote cite { font-size: 7.8px; }
}
/* Globe card, final fit: the card grows to its content instead of clipping,
   and every text size is set together so title, stats and statement all read
   at once. (Sizes are before the card's zoom; on screen they are ~15% larger.) */
@media (min-width: 900px) {
  .home-impact .home-impact-card { height: auto; min-height: 13rem; }
  .home-impact .home-impact-card .home-impact-card-copy h3 { margin-top: .2rem; font-size: 14px; line-height: 1.2; -webkit-line-clamp: 2; }
  .home-impact .home-impact-card .home-impact-card-stats { margin-top: .55rem; }
  .home-impact .home-impact-card .home-impact-card-stats strong { font-size: 17px; line-height: 1.05; }
  .home-impact .home-impact-card .home-impact-card-stats small { font-size: 6.4px; line-height: 1.3; letter-spacing: .07em; }
  .home-impact .home-impact-card .home-impact-card-quote { margin-top: .7rem; }
  .home-impact .home-impact-card .home-impact-card-quote p { font-size: 10.6px; line-height: 1.4; -webkit-line-clamp: 3; line-clamp: 3; }
  .home-impact .home-impact-card .home-impact-card-quote cite { font-size: 6.2px; }
}

/* Keep the Impact label, heading and copy in document flow. Independent
   translated offsets made the label overlap the heading on wide screens. */
@media (min-width: 900px) {
  .home-impact-copy .home-impact-eyebrow { position: relative; top: 0; translate: 0 0; }
  .home-page #home-impact-title { font-family: "Inter", sans-serif; translate: none; margin-top: 1.25rem; }
  .home-impact-copy .home-impact-lead { translate: none; margin-top: 1.6rem; }
  .home-impact-copy .home-impact-actions { translate: none; margin-top: 2rem; }
}

/* Short laptop screens (Hodge, 8 Oct): the pinned panel is one screen tall,
   and the copy column — label, heading, paragraph, CTA, then the film card —
   ran ~70px past it at 825px tall, so the logo row cut the film card off.
   Below 980px of height the column's spacing tightens, and the CTA + film
   width is capped by the screen height so the card always ends above the
   logo row. Taller screens are unchanged. */
@media (min-width: 900px) and (max-height: 980px) {
  .home-impact-copy { padding-block: .5rem 1rem; }
  .home-page #home-impact-title { margin-top: .75rem; }
  .home-page .home-impact-copy .home-impact-lead { margin-top: 1rem; }
  .home-impact-copy .home-impact-actions {
    margin-top: 1.25rem;
    width: min(clamp(15.2rem, 25.6vw, 24.8rem), calc((100svh - 620px) * 16 / 9));
    min-width: 13rem;
  }
}