@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Brand palette: deep violet #4C3074, white #FFFFFF, secondary slate #64647D.
     Everything below is one of those three, a tint of them, or the ink. */
  --paper: #f1f0ea;
  --ink: #11110f;
  --violet: #4c3074;
  --slate: #64647d;
  --line: rgba(100, 100, 125, .26);
  --nav-bg: rgba(43, 32, 56, .94);
  --nav-text: #ffffff;
  --hero-title: #ffffff;
  --hero-meta: rgba(255, 255, 255, .86);
  --hero-copy: rgba(255, 255, 255, .9);
  --hero-rule: rgba(255, 255, 255, .4);
  --accent: #4c3074;
  --accent-hover: #7c5fa5;
  --page-pad: clamp(1rem, 2vw, 2rem);
  /* The shared content frame. Any full-bleed section that needs to line up with
     the others insets its content by --frame-pad and centres it within
     --frame-max, so the section keeps its own background edge to edge. */
  --frame-max: 1800px;
  --frame-pad: var(--page-pad);
  --rail: clamp(1.5rem, 3.4vw, 3.6rem);
  /* weight ladder — every display/UI weight resolves to one of these */
  --w-thin: 260;
  --w-regular: 400;
  --w-book: 440;
  --w-medium: 470;
  --w-demi: 510;
  --w-semibold: 560;
  --w-bold: 650;
  --w-black: 720;
  --font-display: "Inter", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 900px) {
  :root { --frame-pad: clamp(2rem, 5.3vw, 7rem); }
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--w-regular);
  overflow-x: clip;
}

/* One typographic voice across the site: headings use the same Manrope family
   as the Section 2 supporting copy. Page-specific display styles may still
   control scale, weight and spacing, but not switch back to a serif face. */
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
body.hero-opening { overflow: hidden; }
body.splash-active {
  overflow: hidden;
  background: #ffffff;
}

a { color: inherit; }
button { font: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .65rem 1rem;
  background: var(--ink);
  color: white;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  pointer-events: none;
}
/* The paper is four panels around the window, not one sheet. They read the
   same --win-* values as the film and overlap the opening by a pixel, so the
   film's edge is always covered rather than exposing the black beneath. */
.paper-panel {
  position: absolute;
  background: #f1f0ea;
}
.paper-panel.is-top { top: 0; left: 0; right: 0; height: calc(var(--win-t) + .5px); }
.paper-panel.is-bottom { bottom: 0; left: 0; right: 0; height: calc(var(--win-b) + .5px); }
.paper-panel.is-left { top: 0; bottom: 0; left: 0; width: calc(var(--win-l) + .5px); }
.paper-panel.is-right { top: 0; bottom: 0; right: 0; width: calc(var(--win-r) + .5px); }

/* The splash is a class, not the hidden attribute: .brand-intro sets
   display: grid, which outranks the browser's [hidden] { display: none }. */
.brand-intro.is-done { display: none; }
/* The rule is the hinge of the sequence: the wordmark collapses into it,
   the monogram grows back out of it. */
.brand-intro-rule {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1px;
  background: var(--violet);
  opacity: .5;
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
  will-change: transform, opacity;
}
.brand-intro-copy,
.brand-intro-target {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: baseline;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: clamp(1.65rem, 4vw, 3.45rem);
  font-weight: var(--w-book);
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.brand-intro-copy {
  gap: .24em;
}

.brand-intro-count {
  position: absolute;
  left: var(--rail);
  bottom: 1.6rem;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: var(--w-book);
  letter-spacing: .16em;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.brand-intro-target {
  gap: .035em;
  visibility: hidden;
}
.brand-intro-word,
.brand-intro-char {
  display: inline-block;
}
.brand-intro-char {
  opacity: 0;
  will-change: transform, opacity, filter;
}
.brand-mark-vector {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat;
  mask: url("assets/brand/tlh-monogram-mask.svg") center / contain no-repeat;
}
/* The same mark drawn inline (Monogram.astro): no mask, no second request. */
.brand-mark-vector.is-inline,
.tlh-nav__mark span.is-inline {
  background: none;
  -webkit-mask: none;
  mask: none;
}
.brand-mark-vector.is-inline svg,
.tlh-nav__mark span.is-inline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Approved type-and-mark splash: the full name types in, the monogram is
   drawn from two origins, and the same mark lands in the navigation. */
.splash-sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  color: var(--violet);
  background: #ffffff;
  will-change: transform;
}
.splash-aperture {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: #fff;
}
.splash-aperture svg { display: block; width: 100%; height: 100%; }
.splash-type-stage {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(94vw, 82.5rem);
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
}
.splash-type-copy {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  font-family: var(--font-ui);
  font-size: clamp(1.55rem, 7vw, 2rem);
  font-weight: var(--w-medium);
  line-height: .95;
  letter-spacing: -.06em;
  white-space: nowrap;
}
.splash-type-ghost { visibility: hidden; }
.splash-type-live-wrap {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  align-items: baseline;
}
.splash-type-live { flex: 0 0 auto; }
.splash-type-caret {
  display: inline-block;
  width: .075em;
  height: .78em;
  margin-left: .08em;
  background: var(--violet);
  transform: translateY(.03em);
  animation: splash-caret-blink .64s steps(1, end) infinite;
}
.splash-cycle-window {
  position: relative;
  display: inline-block;
  flex: 0 0 9.8em;
  height: 1.24em;
  margin-left: .2em;
  padding: .08em .06em .14em;
  overflow: hidden;
  vertical-align: bottom;
}
.splash-cycle-word {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}
.splash-cycle-word.is-reeling {
  display: block;
  filter: blur(2px);
}
.splash-reel-track {
  display: flex;
  flex-direction: column;
  line-height: 1em;
  white-space: nowrap;
  will-change: transform;
}
.splash-drop-letter { display: inline-block; will-change: transform, opacity; }
.splash-type-rule {
  display: block;
  width: 0;
  height: 2px;
  margin: 1.375rem auto 0;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: center;
}
@keyframes splash-caret-blink {
  50% { opacity: 0; }
}
.splash-pusher-logo {
  position: fixed;
  z-index: 55;
  top: 50%;
  left: 50%;
  width: clamp(5.5rem, 10vw, 9rem);
  aspect-ratio: 120 / 195.88;
  color: var(--violet);
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, color;
}
.splash-logo-stroke,
.splash-logo-solid {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.splash-logo-stroke { overflow: visible; }
.splash-logo-stroke-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 6.11;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.splash-logo-solid { opacity: 0; }

body.splash-active .header-shell {
  opacity: 0 !important;
  transform: translateY(calc(-100% - 1.5rem)) !important;
  pointer-events: none;
}
body.splash-active .brand-mark { opacity: 0; }
body.splash-active .hero-block {
  opacity: 0;
  transform: none;
}
body.splash-active .hero-company,
body.splash-active .hero-clock {
  opacity: 0;
  transform: translateY(1.2rem);
}
body.splash-active .hero-cta,
body.splash-active .hero-aside p {
  opacity: 0;
  transform: translateY(1.6rem);
}

/* Returning visits render the settled hero from the first paint while the
   video starts normally; the splash script removes this state after parsing. */
html.home-hero-seen body.splash-active { overflow: auto; background: #fff; }
html.home-hero-seen body.splash-active :is(.splash-sheet, .splash-aperture, .splash-pusher-logo) { display: none !important; }
html.home-hero-seen body.splash-active .header-shell { opacity: 1 !important; transform: none !important; pointer-events: auto; }
html.home-hero-seen body.splash-active .brand-mark { opacity: 1; }
html.home-hero-seen body.splash-active .film-frame { transform: none; }
html.home-hero-seen body.splash-active .film-mask.is-top,
html.home-hero-seen body.splash-active .film-mask.is-bottom { transform: scaleY(0); }
html.home-hero-seen body.splash-active .hero-block { visibility: visible; opacity: 1; transform: none; }
html.home-hero-seen body.splash-active :is(.hero-company, .hero-clock, .hero-cta, .hero-aside p) { opacity: 1; transform: none; }

@media (min-width: 761px) {
  .splash-type-copy { font-size: clamp(3rem, 5.2vw, 7rem); }
  .splash-type-rule { margin-top: 1.875rem; }
  .splash-pusher-logo { width: 6.5rem; }
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-inline: 1rem;
  background: transparent;
  color: var(--nav-text);
  pointer-events: none;
}
.header-shell {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 80rem;
  min-height: 4rem;
  margin-top: 1rem;
  padding: 1.25rem .75rem 1.25rem 1rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: .375rem;
  background: var(--nav-bg);
  box-shadow: none;
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  opacity: 1;
  transform: translateY(0);
  transition:
    background-color .2s ease,
    opacity .45s ease,
    transform .75s cubic-bezier(.22, 1, .36, 1);
}
.header-shell > * { pointer-events: auto; }

.site-header.is-pinned .header-shell {
  background: var(--nav-bg);
}
.site-header.is-hidden .header-shell {
  opacity: 0 !important;
  transform: translateY(calc(-100% - 1.5rem)) !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.brand-lockup {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  text-decoration: none;
  pointer-events: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 2.68rem;
  color: var(--nav-text);
  opacity: 1;
  pointer-events: auto;
  transition: opacity .18s ease;
}

.nav-group {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}
.nav-group a {
  margin-right: 1.5rem;
  padding: .25rem;
  color: var(--nav-text);
  font: var(--w-regular) 1rem/1.1 var(--font-ui);
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-group a:hover,
.nav-group a[aria-current="page"] { color: var(--nav-text); }

.header-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: var(--w-demi) .95rem/1 var(--font-ui);
  letter-spacing: -.02em;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.header-cta:hover {
  background: var(--accent-hover);
}
.header-cta:active { transform: scale(.95); }

.menu-button {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .375rem;
  place-content: center;
  min-width: 3.75rem;
  min-height: 2.5rem;
  border: 0;
  padding: .5rem 1.25rem;
  background: none;
  color: var(--nav-text);
  cursor: pointer;
}
.menu-button i { display: block; width: 1.875rem; height: 1px; background: currentColor; }

@media (min-width: 768px) {
  .site-header { padding-inline: 1.5rem; }
  .header-shell {
    min-height: 4.5rem;
    margin-top: 2rem;
    padding: 1.25rem;
  }
  .menu-button { display: none; }
}

@media (min-width: 1000px) {
  /* Keep the complete homepage navigation centred as one frosted shell. */
  .site-header:not(.impact-header) .header-shell { margin-left: auto; margin-right: auto; }
  .site-header:not(.impact-header) .nav-group { margin-left: 0; margin-right: 0; }
  .site-header:not(.impact-header) .header-shell,
  .site-header:not(.impact-header).is-pinned .header-shell {
    --nav-text: #19171d;
    background: rgba(255, 255, 255, .72);
    border-color: rgba(255, 255, 255, .68);
    box-shadow: 0 12px 34px rgba(37, 29, 51, .1);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    backdrop-filter: blur(22px) saturate(1.25);
  }
}

.site-header:not(.impact-header) {
  --nav-text: #19171d;
  --nav-bg: rgba(255, 255, 255, .72);
}

@media (min-width: 768px) and (max-width: 991px) {
  .site-header { padding-inline: 1.25rem; }
  .nav-group a {
    margin-right: 1rem;
    padding-right: 0;
    font-size: .85rem;
  }
}

/* The compact CTA is the phone-only one; above 768px the real nav carries its
   own and this must not appear alongside it. */
.header-cta--compact { display: none; }

@media (max-width: 767px) {
  .nav-group,
  .header-cta { display: none; }
  .header-cta--compact {
    display: inline-flex;
    margin-right: auto;
    padding: .55rem 1rem;
    font-size: .8rem;
  }
  .brand-lockup {
    position: absolute;
    inset: 0;
  }
  /* 15% up from 1.1 x 1.96rem. The mark is a mask sized `contain`, so its box
     has to keep the artwork's own 0.5536 ratio or the shape is laid out in a
     box narrower than it needs and reads as clipped down the right edge —
     1.265 / 2.254 holds that ratio exactly. */
  .brand-mark { width: 1.265rem; height: 2.254rem; }
  .menu-button { margin-left: 0; }
}

.intro-sequence {
  --hero-height: max(100svh, 38rem);
  height: calc(var(--hero-height) * 2);
  margin-bottom: calc(var(--hero-height) * -1);
}
.intro-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 38rem;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.film-frame {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: #11110f;
  opacity: 1;
  transform-origin: center center;
  will-change: transform;
}
body.splash-active .film-frame { transform: scale(0); }
/* Hobro's opener is two equal black curtains. They meet at the centre line and
   collapse simultaneously toward the outside edges over a stationary hero. */
.film-mask {
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 50%;
  background: #000;
  pointer-events: none;
  will-change: transform;
  transform: scaleY(0);
}
.film-mask.is-top { top: 0; transform-origin: center top; }
.film-mask.is-bottom { bottom: 0; transform-origin: center bottom; }
/* Shut until the opening runs, so the footage cannot flash before its cue. */
body.splash-active .film-mask.is-top,
body.splash-active .film-mask.is-bottom { transform: scaleY(1); }
.film-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-frame video {
  filter: brightness(1.055) saturate(1.055) contrast(1.025);
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}
.film-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 6, 14, .34) 0%,
    rgba(8, 6, 14, .12) 16%,
    rgba(8, 6, 14, 0) 34%,
    rgba(8, 6, 14, 0) 66%,
    rgba(8, 6, 14, .12) 84%,
    rgba(8, 6, 14, .36) 100%
  );
  pointer-events: none;
}
.film-scrim-top {
  position: absolute;
  inset: 0 0 auto;
  height: 26%;
  background: linear-gradient(to bottom, rgba(8, 6, 14, .16), rgba(8, 6, 14, 0));
}
.film-scrim-base {
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(8, 6, 14, .32) 0%, rgba(8, 6, 14, .12) 30%, rgba(8, 6, 14, 0) 100%);
}

.hero-block {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  top: 33%;
  bottom: auto;
  z-index: 3;
  color: var(--hero-title);
  will-change: transform, opacity;
}
.hero-topline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid transparent;
}
.hero-topline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--hero-rule);
  transform: scaleX(1);
  transform-origin: left center;
  transition: none;
}
.hero-company,
.hero-clock {
  margin: 0;
  font: var(--w-demi) .72rem/1.2 var(--font-ui);
  letter-spacing: .12em;
  text-shadow: 0 1px 14px rgba(21, 13, 29, .62);
  text-transform: uppercase;
}
/* The mark leads the lockup above the rule; the statement sits below it, small
   now rather than at display size. */
.hero-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-mark {
  display: block;
  flex: 0 0 auto;
  height: 9rem;
  aspect-ratio: 120 / 195.88;
  /* Brand purple (#5F3C91), as the official mark is. */
  color: #5f3c91;
  filter: drop-shadow(0 .3rem 1.4rem rgba(0, 0, 0, .5));
}
.hero-bottomline .statement {
  /* The original display statement hangs directly below the rule. */
  align-self: start;
  color: #fff;
}
.hero-bottomline .statement > span { display: block; }
.hero-company {
  color: var(--hero-meta);
  font-size: .82rem;
}
.hero-brand .hero-company {
  display: grid;
  gap: 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: var(--w-book);
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: none;
}
.hero-brand .hero-company span { display: block; }
.hero-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .32rem;
  margin-right: 0;
  color: rgba(255, 255, 255, .94);
}
.hero-location {
  display: inline-block;
  color: rgba(255, 255, 255, .98);
  font-size: .74rem;
  letter-spacing: .14em;
}
.hero-time-row {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}
.hero-status-dot {
  display: inline-block;
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 .18rem rgba(95, 60, 145, .16);
}
.hero-time {
  color: var(--hero-title);
  font-size: .86rem;
  font-weight: var(--w-semibold);
  letter-spacing: .045em;
}
.hero-bottomline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
  align-items: start;
  padding-top: 1.4rem;
}
.hero-topline { justify-content: flex-end; }
.hero-topline .hero-clock { margin-left: auto; }
.statement {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(3.485rem, 14.45vw, 5.398rem) + 13.6px);
  font-weight: var(--w-regular);
  font-optical-sizing: auto;
  line-height: .96;
  letter-spacing: .01em;
}
.statement > span {
  display: block;
  white-space: nowrap;
}
.hero-char-mask {
  display: inline-block;
  overflow: hidden;
  padding: .08em .01em .08em 0;
  margin-block: -.08em;
  vertical-align: top;
}
.hero-char {
  display: inline-block;
  opacity: 1;
  filter: none;
  transform: translateY(0);
  will-change: transform;
}
.hero-char.is-revealing {
  animation: hero-word-in .97s cubic-bezier(0, 0, .1, 1) both;
  animation-delay: calc(var(--char-delay, 0) * 1ms);
}

/* What we do: kinetic editorial cards travelling around a deep wheel. */
.what-we-do {
  position: relative;
  height: auto;
  padding: 4.5rem 0 8rem;
  background: transparent;
  color: #21182c;
  overflow: clip;
}
.what-marquee {
  width: 100%;
  margin-bottom: 4.5rem;
  overflow: hidden;
  border-block: 1px solid rgba(95, 60, 145, .18);
  color: rgba(95, 60, 145, .72);
}
.what-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  width: max-content;
  padding: 1rem 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 5.8rem);
  font-weight: var(--w-regular);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  animation: what-marquee 24s linear infinite;
}
.what-marquee-track i {
  color: var(--violet);
  font: var(--w-regular) .3em/1 var(--font-ui);
}
.what-we-do-sticky {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
  padding-inline: var(--page-pad);
}
.what-we-do-heading { max-width: 38rem; }
.what-we-do-heading .eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  color: var(--violet);
  font-size: .66rem;
  font-weight: var(--w-bold);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.what-we-do-heading .eyebrow span { color: #776d82; font-weight: var(--w-medium); }
.what-we-do-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.15rem, 13vw, 5.3rem);
  font-weight: var(--w-regular);
  line-height: .86;
  letter-spacing: -.045em;
}
.what-we-do-intro {
  max-width: 41ch;
  margin: 1.75rem 0 0;
  color: #5f566a;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.55;
}
.what-track {
  position: relative;
  display: grid;
  gap: clamp(5rem, 12vh, 8rem);
  width: 100%;
  perspective: 1050px;
  perspective-origin: 50% 50vh;
  transform-style: preserve-3d;
}
.what-track::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -3rem;
  right: -44%;
  bottom: -3rem;
  width: 82%;
  border: 1px solid rgba(95, 60, 145, .16);
  border-radius: 50%;
  pointer-events: none;
}
.what-panel {
  position: relative;
  isolation: isolate;
  min-width: 0;
  --wheel-x: 0px;
  --wheel-y: 0px;
  --wheel-z: 0px;
  --wheel-turn-x: 0;
  --wheel-turn-y: 0;
  --wheel-blur: 0px;
  --wheel-opacity: 1;
  --focus: 1;
  --pointer-x: 0;
  --pointer-y: 0;
  --pointer-pos-x: 50%;
  --pointer-pos-y: 50%;
  --media-x: 0%;
  --media-y: 0%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  opacity: var(--wheel-opacity);
  filter: blur(var(--wheel-blur));
  outline: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transform:
    translate3d(var(--wheel-x), var(--wheel-y), var(--wheel-z))
    rotateX(calc(var(--wheel-turn-x) * 1deg))
    rotateY(calc(var(--wheel-turn-y) * 1deg));
  will-change: transform, filter, opacity;
}
.what-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1.1rem -.8rem -1.15rem 1.1rem;
  border-radius: 1.8rem;
  background: linear-gradient(145deg, #2c163f, #75509a 48%, #24142f);
  box-shadow: 0 2.5rem 5rem rgba(35, 18, 52, calc(.1 + var(--focus) * .22));
  transform: translateZ(-38px);
}
.what-panel-surface {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  min-height: 38rem;
  border: 1px solid rgba(95, 60, 145, .24);
  border-radius: 1.65rem;
  background: rgba(255, 255, 255, .86);
  color: #21182c;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .9),
    0 1.5rem 5rem rgba(55, 34, 77, .1);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
  transform-style: preserve-3d;
  transform: translateZ(22px);
  transition:
    transform .7s cubic-bezier(.16, 1, .3, 1),
    border-color .4s ease,
    box-shadow .7s cubic-bezier(.16, 1, .3, 1);
}
.what-panel-surface::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-pos-x) var(--pointer-pos-y), rgba(255,255,255,.34), transparent 28%);
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity .4s ease;
}
.what-panel-copy {
  position: relative;
  z-index: 3;
  order: 2;
  align-self: end;
  padding: 2rem;
}
.panel-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  color: #756b82;
  font-size: .62rem;
  font-weight: var(--w-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.panel-number { color: var(--violet); font-weight: var(--w-black); }
.what-panel-copy h3 {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: clamp(2.65rem, 10vw, 4.8rem);
  font-weight: var(--w-demi);
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.what-panel-copy > p {
  max-width: 31ch;
  margin: 0;
  color: #62586f;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.48;
}
.what-panel-more {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 1.2rem;
  opacity: 1;
}
.what-panel-more > * { overflow: hidden; }
.what-panel-more p {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(95, 60, 145, .2);
  color: #62586f;
  font-size: .94rem;
  line-height: 1.5;
}
.panel-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.35rem;
  color: var(--violet);
  font-size: .64rem;
  font-weight: var(--w-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.panel-action i {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  font-style: normal;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), background .3s ease, color .3s ease;
}
.what-panel-visual {
  position: relative;
  z-index: 2;
  order: 1;
  min-height: 20rem;
  margin: .7rem .7rem 0;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #dcd0e9;
  transform: translateZ(18px);
}
.what-panel-media { position: absolute; inset: 0; overflow: hidden; }
.what-panel-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(47, 25, 66, .12), transparent 48%),
    linear-gradient(to top, rgba(25, 14, 35, .24), transparent 42%);
  pointer-events: none;
}
.what-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035) translate3d(var(--media-x), var(--media-y), 0);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter .8s ease;
  will-change: transform;
}
.media-lens {
  position: absolute;
  z-index: 3;
  top: -15%;
  left: -35%;
  width: 42%;
  height: 135%;
  border-inline: 1px solid rgba(255,255,255,.4);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  filter: blur(1px);
  transform: skewX(-12deg);
  pointer-events: none;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.visual-label,
.visual-coordinate {
  position: absolute;
  z-index: 4;
  bottom: .9rem;
  color: rgba(255,255,255,.92);
  font-size: .56rem;
  font-weight: var(--w-bold);
  letter-spacing: .15em;
  text-shadow: 0 1px 12px rgba(20, 8, 31, .45);
}
.visual-label { left: 1rem; }
.visual-coordinate { right: 1rem; }
.what-panel-science .what-panel-surface {
  background: rgba(34, 23, 46, .9);
  color: #f7f2fb;
  border-color: rgba(211, 184, 240, .28);
}
.what-panel-science .what-panel-visual { background: #4c3074; }
.what-panel-science .what-panel-media img { object-fit: contain; object-position: center; }
.what-panel-science .panel-meta,
.what-panel-science .what-panel-copy > p,
.what-panel-science .what-panel-more p { color: rgba(242, 232, 250, .68); }
.what-panel-science .panel-number,
.what-panel-science .panel-action { color: #c9a6eb; }
.what-panel-science .what-panel-more p { border-color: rgba(222, 199, 246, .18); }
.what-panel-activation .what-panel-surface { background: rgba(237, 242, 245, .9); }
.what-panel-activation .what-panel-visual { background: #cbdce4; }
.what-progress { display: none; }

@media (hover: hover) and (pointer: fine) {
  .what-panel:hover .what-panel-surface,
  .what-panel:focus-visible .what-panel-surface {
    border-color: rgba(126, 83, 170, .58);
    box-shadow: 0 3rem 7rem rgba(49, 24, 72, .22);
    transform:
      translateZ(54px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      scale(1.018);
  }
  .what-panel:hover .what-panel-surface::before,
  .what-panel:focus-visible .what-panel-surface::before { opacity: .9; }
  .what-panel:hover .what-panel-media img,
  .what-panel:focus-visible .what-panel-media img {
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.13) translate3d(var(--media-x), var(--media-y), 0);
  }
  .what-panel:hover .media-lens,
  .what-panel:focus-visible .media-lens { transform: translateX(340%) skewX(-12deg); }
  .what-panel:hover .panel-action i,
  .what-panel:focus-visible .panel-action i {
    color: #fff;
    background: var(--violet);
    transform: rotate(45deg) scale(1.08);
  }
}

@media (min-width: 901px) {
  .what-we-do { padding: clamp(5rem, 10vh, 8rem) 0 clamp(9rem, 16vh, 13rem); }
  .what-marquee { margin-bottom: clamp(5rem, 10vh, 8rem); }
  .what-we-do-sticky {
    grid-template-columns: minmax(18rem, .78fr) minmax(34rem, 1.22fr);
    gap: clamp(4rem, 8vw, 9rem);
    padding-inline: clamp(2rem, 5vw, 6rem);
  }
  .what-we-do-heading {
    position: sticky;
    top: clamp(7rem, 18vh, 11rem);
  }
  .what-we-do-heading h2 { font-size: clamp(3.6rem, 5vw, 6.2rem); }
  .what-track { gap: clamp(8rem, 18vh, 13rem); }
  .what-panel-surface {
    grid-template-columns: minmax(17rem, .82fr) minmax(0, 1.18fr);
    min-height: clamp(36rem, 72vh, 48rem);
  }
  .what-panel-copy { order: 1; padding: clamp(2.5rem, 3.5vw, 4.5rem); }
  .what-panel-visual {
    order: 2;
    min-height: 0;
    margin: .85rem .85rem .85rem 0;
  }
  .what-panel-copy h3 { font-size: clamp(3.3rem, 4.35vw, 5.7rem); }
  .what-panel-more {
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows .65s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, margin-top .65s cubic-bezier(.16, 1, .3, 1);
  }
  .what-panel:hover .what-panel-more,
  .what-panel:focus-visible .what-panel-more {
    grid-template-rows: 1fr;
    margin-top: 1.35rem;
    opacity: 1;
  }
  .panel-action { opacity: .68; transition: opacity .35s ease; }
  .what-panel:hover .panel-action,
  .what-panel:focus-visible .panel-action { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .what-marquee-track { animation: none; }
  .what-panel { opacity: 1; filter: none; transform: none; }
  .what-panel::after { transform: none; }
  .what-panel-surface,
  .what-panel-media img,
  .media-lens,
  .panel-action i { transition: none !important; transform: none !important; }
}

@keyframes what-marquee {
  to { transform: translateX(-50%); }
}

/* Simplified direction: straight movement, compact drawings, generous space. */
.what-we-do { padding: clamp(7rem, 13vh, 11rem) 0 clamp(11rem, 20vh, 16rem); }
.what-we-do-sticky { gap: clamp(5rem, 11vh, 8rem); }
.what-we-do-heading h2 {
  font-family: var(--font-ui);
  font-size: clamp(3rem, 11vw, 4.7rem);
  font-weight: var(--w-book);
  line-height: .92;
}
.what-we-do-intro { max-width: 34ch; }
.what-track { gap: clamp(8rem, 18vh, 13rem); perspective: 1200px; }
.what-track::before,
.what-panel::after { display: none; }
.what-panel {
  transform: translate3d(0, 0, var(--wheel-z));
}
.what-panel-surface,
.what-panel:hover .what-panel-surface,
.what-panel:focus-visible .what-panel-surface {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 2.25rem;
  border-color: rgba(95, 60, 145, .18);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .91);
  color: #21182c;
  box-shadow: 0 1.4rem 4.5rem rgba(55, 34, 77, .08);
  transform: none;
}
.what-panel-surface::before { display: none; }
.what-panel-copy {
  order: 1;
  align-self: center;
  padding: 0;
}
.panel-number {
  display: block;
  margin-bottom: 1.4rem;
  color: var(--violet);
  font-size: .65rem;
  font-weight: var(--w-black);
  letter-spacing: .18em;
}
.what-panel-copy h3 {
  max-width: 8ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: .9;
}
.what-panel-copy > p,
.what-panel-science .what-panel-copy > p {
  max-width: 27ch;
  color: #62586f;
  font-size: clamp(1rem, 2vw, 1.12rem);
}
.what-panel-visual {
  order: 2;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 2.5rem 0 0;
  border-radius: .85rem;
  background: #171020;
  transform: none;
}
.what-panel-media img,
.what-panel:hover .what-panel-media img,
.what-panel:focus-visible .what-panel-media img,
.what-panel-science .what-panel-media img {
  object-fit: cover;
  opacity: .94;
  filter: none;
  transform: scale(1.01);
}
.what-panel-media::before { background: linear-gradient(135deg, rgba(95,60,145,.08), transparent 55%); }
.what-panel-science .what-panel-surface,
.what-panel-activation .what-panel-surface {
  background: rgba(255, 255, 255, .91);
  color: #21182c;
  border-color: rgba(95, 60, 145, .18);
}

@media (min-width: 901px) {
  .what-we-do-sticky {
    grid-template-columns: minmax(18rem, .82fr) minmax(32rem, 1.18fr);
    gap: clamp(5rem, 9vw, 10rem);
  }
  .what-we-do-heading h2 { font-size: clamp(3.4rem, 4.4vw, 5.2rem); }
  .what-panel-surface,
  .what-panel:hover .what-panel-surface,
  .what-panel:focus-visible .what-panel-surface {
    grid-template-columns: minmax(15rem, 1.2fr) minmax(13rem, .8fr);
    min-height: clamp(28rem, 56vh, 34rem);
    padding: clamp(3rem, 4vw, 5rem);
    column-gap: clamp(3rem, 5vw, 6rem);
  }
  .what-panel-visual {
    align-self: center;
    width: min(100%, 22rem);
    margin: 0;
  }
  .what-panel-copy h3 { font-size: clamp(3.1rem, 4vw, 4.8rem); }
}
@keyframes hero-word-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-aside {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  width: min(100%, 29rem);
}
.hero-aside p {
  position: relative;
  max-width: 38ch;
  margin: 0;
  color: var(--hero-copy);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  font-weight: var(--w-book);
  line-height: 1.46;
  letter-spacing: -.016em;
  text-shadow: 0 1px 14px rgba(21, 13, 29, .56);
}

/* Desktop only, as asked. The hero copy sat at 90% white in book weight on a
   pale sky — the one piece of text on the page fighting its own background.
   Full white, a step up in weight and size, and the shadow doubled: a tight one
   to hold the letterforms against bright cloud, a wider one to lift the block
   off the sky behind it. The CTA label was .66rem, 10.5px of tracked caps for
   the page's one primary action; it comes up with it. */
@media (min-width: 768px) {
  .hero-aside p {
    color: #fff;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    font-weight: var(--w-medium);
    line-height: 1.5;
    letter-spacing: -.012em;
    text-shadow: 0 1px 3px rgba(17, 10, 24, .55), 0 2px 18px rgba(17, 10, 24, .5);
  }
}

.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.2rem;
  min-width: 11.75rem;
  min-height: 2.8rem;
  padding: .8rem 1.1rem .8rem 1.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: var(--w-demi) .66rem/1 var(--font-ui);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 1;
  transform: translateY(0);
  transition:
    background .3s ease,
    opacity .6s ease,
    transform .85s cubic-bezier(.22, 1, .36, 1);
}

/* After the base rule, not before it: that rule sets the label with the `font`
   shorthand, which resets font-size, so an override earlier in the file lost
   regardless of the media query. Desktop only, as asked — .66rem was 10.5px of
   tracked caps for the page's one primary action. */
@media (min-width: 768px) {
  .hero-cta { font-size: .78rem; letter-spacing: .1em; }
}
.hero-cta svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}
.hero-cta:hover { background: var(--accent-hover); }
.hero-cta:hover svg { transform: translateX(.2rem); }

/* The mark lands first. Film, navigation and hero typography follow in order. */
body.hero-opening:not(.nav-intro) .header-shell {
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  transform: translateY(0);
}
body.hero-opening:not(.nav-intro) .nav-group,
body.hero-opening:not(.nav-intro) .header-cta,
body.hero-opening:not(.nav-intro) .menu-button {
  opacity: 0;
  transform: translateY(-.65rem);
  pointer-events: none;
}
.nav-group,
.header-cta,
.menu-button {
  transition:
    opacity .45s ease,
    transform .7s cubic-bezier(.22, 1, .36, 1);
}
body.hero-opening .brand-mark {
  opacity: 0;
}
body.hero-opening.logo-landed .brand-mark {
  opacity: 1;
}
body.hero-opening:not(.hero-intro) .hero-block {
  visibility: hidden;
}
body.hero-opening:not(.hero-intro) .hero-topline::after {
  transform: scaleX(0);
}
body.hero-opening:not(.hero-intro) .hero-company,
body.hero-opening:not(.hero-intro) .hero-clock {
  opacity: 0;
  transform: translateY(1.2rem);
}
body.hero-opening:not(.hero-intro) .hero-char {
  transform: translateY(112%);
}
body.hero-opening:not(.hero-intro) .hero-cta,
body.hero-opening:not(.hero-intro) .hero-aside p {
  opacity: 0;
  transform: translateY(1.6rem);
}
.hero-company,
.hero-clock {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .55s ease,
    transform .8s cubic-bezier(.22, 1, .36, 1);
}
.hero-aside p {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .65s ease,
    transform .9s cubic-bezier(.22, 1, .36, 1);
}
body.hero-intro .hero-topline::after { transition-delay: .08s; }
body.hero-intro .hero-company { transition-delay: .08s; }
body.hero-intro .hero-clock { transition-delay: .08s; }
body.hero-intro .hero-cta { transition-delay: .68s; }
body.hero-intro .hero-aside p { transition-delay: .82s; }

@media (min-width: 701px) {
  .hero-block {
    left: var(--rail);
    right: var(--rail);
    top: 33%;
    bottom: auto;
  }
  .hero-topline {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(21rem, 29rem);
    gap: clamp(3rem, 6vw, 7rem);
    padding-bottom: 1rem;
  }
  .hero-clock {
    grid-column: 2;
    justify-self: start;
    align-items: flex-start;
  }
  .hero-topline .hero-clock { margin-left: 0; }
  .hero-bottomline {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(21rem, 29rem);
    gap: clamp(3rem, 6vw, 7rem);
    padding-top: 1.5rem;
  }
  .statement { max-width: 30rem; }
  .hero-aside {
    justify-self: end;
    padding-bottom: .15rem;
  }
}

/* The phone hero keeps the desktop hierarchy in one complete first view:
   lockup and clock, rule, statement, then the action and supporting line. */
@media (max-width: 700px) {
  .intro-sequence {
    --hero-height: max(100svh, 35rem);
  }
  .intro-sticky {
    min-height: 35rem;
  }
  .film-frame video {
    object-fit: cover;
    object-position: 52% 50%;
  }
  .hero-block {
    /* The rule under the brand sits on the middle of the screen — which is
       what "the line in the middle" has meant each time. Centring the whole
       group was not it: that put the block's centre at 426 but left the rule at
       362, 64px high. The block's top edge is pinned to 50% and the topline is
       lifted out of flow to sit directly above it, so the rule lands on 50%
       exactly, whatever the brand block's height. No measured offset to chase. */
    top: 50%;
    left: var(--page-pad);
    right: var(--page-pad);
    min-width: 0;
  }
  .hero-topline {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    gap: .75rem;
    padding-bottom: .75rem;
  }
  .hero-brand {
    min-width: 0;
    gap: .65rem;
  }
  .hero-mark {
    height: clamp(4rem, 18.5vw, 4.8rem);
  }
  .hero-brand .hero-company {
    font-size: clamp(1rem, 4.8vw, 1.2rem);
    line-height: .9;
  }
  .hero-location {
    font-size: .62rem;
  }
  .hero-time {
    font-size: .72rem;
  }
  .hero-bottomline {
    min-width: 0;
    gap: .9rem;
    padding-top: 1rem;
  }
  .hero-bottomline .statement {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(2.4rem, 10.8vw, 2.75rem);
    line-height: .92;
    letter-spacing: -.035em;
  }
  .home-page #intro-title > span:first-child {
    font-size: inherit !important;
  }
  .hero-aside {
    width: 100%;
    min-width: 0;
    gap: .75rem;
  }
  .hero-aside p {
    max-width: 36ch;
    font-size: .8rem;
    line-height: 1.42;
  }
  .hero-cta {
    gap: 1.4rem;
    min-width: 9.25rem;
    min-height: 38px;
    padding: .6rem .85rem .6rem 1rem;
    font-size: .6rem;
  }
}

/* The 3D mark lives here: fixed, behind every section, faded in by mark3d.js
   once the hero has cleared. */
.site-bg {
  position: fixed;
  z-index: 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  /* No transition: opacity is written straight from scroll position, which is
     already continuous, and a transition here stalled mid-fade. */
}
.site-bg canvas { display: block; width: 100%; height: 100%; }

/* The mark used to be hidden outright on phones, because it was placed as a
   right-hand background object (offsetX 2.3) that fell off a narrow screen. It
   is now recentred and carried faint behind the first section's copy, so it
   stays — see the phone settings in mark3d.js. */

/* The white sheet rises over the pinned hero. Clip the fixed logo to this
   sheet so it appears behind the content without spilling onto the film. */
.page-content {
  position: relative;
  z-index: 2;
  background: #fff;
  clip-path: inset(0);
}

/* Sections after the hero sit over the mark, so they stay transparent and the
   white page ground shows behind it. The hero keeps its own film. */
.story,
.story-film-band,
.what-we-do { position: relative; z-index: 1; }
.intro-sequence { position: relative; z-index: 1; }

.story {
  position: relative;
  /* Scroll length tracks the word count: 21 words, so shorter than it was. */
  height: 390svh;
  min-height: 104rem;
  color: var(--violet);
  background: transparent;
}
.story-sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100svh;
  padding: clamp(5rem, 10vh, 8rem) var(--page-pad);
  overflow: hidden;
}
.story-copy {
  display: grid;
  gap: clamp(2.25rem, 5vh, 4rem);
  width: min(100%, 50vw);
}
.story-reveal {
  /* Left half of the page only; the right half stays open for the mark. */
  width: 100%;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 3.05vw, 3.15rem);
  font-weight: var(--w-book);
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.story-word {
  color: var(--violet);
  opacity: var(--story-opacity, .12);
  will-change: opacity;
}
.story.has-entry-reveal .story-reveal-primary {
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(4px);
}
.story.has-entry-reveal.first-ready .story-reveal-primary {
  animation: story-primary-in 1.2s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes story-primary-in {
  from { opacity: 0; transform: translateY(1.5rem); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.story-reveal-secondary {
  opacity: 0;
  transform: translateY(2.25rem) scale(.975);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}
.story.second-ready .story-reveal-secondary {
  animation: story-secondary-in 1.35s cubic-bezier(.16, 1, .3, 1) both;
}
.story-reveal-secondary .story-word {
  transition: opacity .65s ease;
}
@keyframes story-secondary-in {
  0% { opacity: 0; transform: translateY(2.25rem) scale(.975); filter: blur(10px); }
  55% { opacity: 1; transform: translateY(-.2rem) scale(1.005); filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (max-width: 700px) {
  .story {
    height: 350svh;
    min-height: 94rem;
  }
  .story-sticky { align-items: center; }
  .story-copy { width: 100%; }
  /* Keep the film in its native desktop composition on a phone. It starts at
     the same restrained 80vw used by the Impact page and opens to a generous
     92vw frame, rather than being pulled into the phone's portrait viewport. */
  .story-film-band { height: 240svh; }
  .story-film {
    --w-rest: 80vw;
    --w-open: 92vw;
    width: calc(var(--w-rest) + (var(--w-open) - var(--w-rest)) * var(--expand));
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .story-reveal {
    width: 100%;
    font-size: clamp(1.5rem, 6.5vw, 2.4rem);
    line-height: .98;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-intro,
  .splash-sheet,
  .splash-pusher-logo { display: none; }
  body.splash-active { overflow: auto; }
  body.splash-active .header-shell,
  body.splash-active .brand-mark,
  body.splash-active .hero-block {
    opacity: 1;
    transform: none;
  }
  .brand-mark { opacity: 1 !important; }
  .intro-sequence { height: auto; min-height: 100svh; margin-bottom: 0; }
  .intro-sticky { position: relative; }
  .hero-block { opacity: 1; transform: none; }
  .film-frame { opacity: 1; transform: none !important; animation: none; }
  .story { height: auto; min-height: 100svh; }
  .story-word { opacity: 1 !important; }
}

@media (prefers-color-scheme: dark) {
  :root { --paper: #151416; --ink: #ffffff; --line: rgba(255, 255, 255, .18); }
}

/* What we do — editorial partnership rows. The floating TLH mark remains the
   page background; only the large right-hand media plane is ever deformed. */
.what-we-do {
  --ink: #21182c;
  --slate: #665c72;
  padding: clamp(6rem, 12vh, 10rem) 0 clamp(10rem, 20vh, 16rem);
  overflow: clip;
  background: transparent;
  color: var(--ink);
}
.what-we-do-sticky {
  display: block;
  padding-inline: 1rem;
}
.what-we-do-heading {
  position: static;
  max-width: 42rem;
  margin-bottom: clamp(8rem, 18vh, 13rem);
}
.what-we-do-heading .eyebrow {
  max-width: 32rem;
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
}
.what-we-do-heading h2 {
  max-width: 9ch;
  font-size: clamp(3.8rem, 10vw, 7.5rem);
  font-weight: var(--w-medium);
  line-height: .88;
  letter-spacing: -.065em;
}
.what-we-do-intro {
  max-width: 36ch;
  margin-top: 2rem;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}
.what-track {
  display: grid;
  gap: clamp(8rem, 18vh, 15rem);
  width: 100%;
  perspective: none;
}
.what-track::before,
.what-panel::before,
.what-panel::after,
.what-panel-surface::before,
.what-panel-surface::after,
.what-panel-visual::after { display: none; }
.what-panel {
  width: 100%;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(33, 24, 44, .2);
  opacity: 1;
  filter: none;
  transform: none;
  isolation: isolate;
}
.what-panel-surface,
.what-panel:hover .what-panel-surface,
.what-panel:focus-visible .what-panel-surface,
.what-panel-science .what-panel-surface,
.what-panel-activation .what-panel-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  transition: none;
}
.what-panel-copy {
  display: flex;
  flex-direction: column;
  order: 2;
  align-self: stretch;
  min-height: 14rem;
  padding: 0 0 1rem;
  transform: none;
}
.what-panel-copy h3 {
  order: 1;
  max-width: none;
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: var(--w-semibold);
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: none;
}
.panel-number {
  display: block;
  order: 2;
  margin: auto 0 .85rem;
  color: var(--violet);
  font-size: .68rem;
  font-weight: var(--w-black);
  letter-spacing: .16em;
}
.panel-number::before { display: none; }
.what-panel-copy > p,
.what-panel-science .what-panel-copy > p {
  order: 3;
  max-width: 27ch;
  margin: 0;
  color: #3f3748;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: var(--w-medium);
  line-height: 1.25;
}
.what-panel-visual,
.what-panel-science .what-panel-visual,
.what-panel-activation .what-panel-visual {
  position: relative;
  z-index: 2;
  order: 1;
  width: 100%;
  min-height: 0;
  aspect-ratio: 358 / 447;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #171020;
  box-shadow: none;
  transform: none;
  will-change: filter;
}
.what-panel-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.what-panel-media::before { display: none; }
.what-panel-media img,
.what-panel:hover .what-panel-media img,
.what-panel:focus-visible .what-panel-media img,
.what-panel-science .what-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  transform: none;
  animation: none;
  transition: none;
}
.what-progress { display: none; }

@media (min-width: 480px) {
  .what-we-do-sticky { padding-inline: 2rem; }
}

@media (min-width: 768px) {
  .what-panel-visual,
  .what-panel-science .what-panel-visual,
  .what-panel-activation .what-panel-visual { aspect-ratio: 913 / 514; }
}

@media (min-width: 901px) {
  .what-panel-surface,
  .what-panel:hover .what-panel-surface,
  .what-panel:focus-visible .what-panel-surface {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: .75rem;
    align-items: stretch;
  }
  .what-panel-copy {
    grid-column: 1 / span 3;
    grid-row: 1;
    order: 1;
    align-self: stretch;
    min-height: 0;
    padding-bottom: 0;
  }
  .what-panel-visual,
  .what-panel-science .what-panel-visual,
  .what-panel-activation .what-panel-visual {
    grid-column: 5 / span 8;
    grid-row: 1;
    order: 2;
  }
  .what-panel-copy h3 { font-size: clamp(2.5rem, 3vw, 4rem); }
  .what-panel-copy > p,
  .what-panel-science .what-panel-copy > p {
    font-size: clamp(1.05rem, 1.35vw, 1.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .what-panel-visual { filter: none !important; }
}

/* What we do — a single spatial system, built around the moving TLH mark.
   The mark itself lives on the fixed WebGL layer. These three branches give
   it language once it reaches the centre of the page. */
.what-we-do {
  --method-progress: 0;
  position: relative;
  z-index: 1;
  height: 270svh;
  min-height: 122rem;
  padding: 0;
  overflow: clip;
  color: #21182c;
  background: transparent;
}
.what-we-do-sticky {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  padding: clamp(1.2rem, 2vw, 2rem);
  overflow: hidden;
}
.what-we-do-heading {
  position: absolute;
  z-index: 3;
  top: clamp(5.5rem, 12vh, 9rem);
  left: var(--page-pad);
  width: min(33rem, 44vw);
  max-width: none;
  margin: 0;
}
.what-we-do-heading .eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 25rem;
  margin: 0 0 1.7rem;
  color: var(--violet);
  font-size: .69rem;
  font-weight: var(--w-black);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.what-we-do-heading .eyebrow span { color: #756b80; }
.what-we-do-heading h2 {
  max-width: 8.8ch;
  margin: 0;
  font-size: clamp(3.6rem, 6.3vw, 6.8rem);
  font-weight: var(--w-medium);
  line-height: .88;
  letter-spacing: -.068em;
}
.method-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.method-statement {
  position: absolute;
  z-index: 2;
  left: var(--page-pad);
  bottom: clamp(2.5rem, 7vh, 5.5rem);
  width: min(23rem, 25vw);
  margin: 0;
  color: #4f4659;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  font-weight: var(--w-medium);
  line-height: 1.25;
}
.method-diagram,
.method-points {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.method-origin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border: 1px solid rgba(95, 60, 145, .7);
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -50%) scale(var(--origin-scale, .4));
}
.method-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: 1px;
  background: rgba(95, 60, 145, .42);
  transform-origin: left center;
  transition: none;
}
.method-spoke-t {
  width: min(39vw, 38rem);
  transform: rotate(216deg) scaleX(var(--method-progress));
}
.method-spoke-l {
  width: min(34vw, 33rem);
  transform: rotate(-34deg) scaleX(var(--method-progress));
}
.method-spoke-h {
  width: min(35vw, 34rem);
  transform: rotate(35deg) scaleX(var(--method-progress));
}
.method-point {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: clamp(.8rem, 1.6vw, 1.7rem);
  width: min(20rem, 23vw);
  color: #21182c;
  opacity: var(--point-progress, 0);
  transform: translate3d(var(--point-x, 0px), var(--point-y, 0px), 0);
}
.method-point-t {
  left: max(var(--page-pad), 6vw);
  top: 23%;
}
.method-point-l {
  right: max(var(--page-pad), 6vw);
  top: 26%;
}
.method-point-h {
  right: max(var(--page-pad), 8vw);
  bottom: 14%;
}
.method-letter {
  flex: 0 0 auto;
  color: var(--violet);
  font-size: clamp(5.2rem, 10.5vw, 10.5rem);
  font-weight: var(--w-thin);
  line-height: .7;
  letter-spacing: -.13em;
}
.method-copy {
  padding-bottom: .05rem;
  opacity: var(--copy-progress, 1);
  transform: translateX(var(--copy-x, 0px));
}
.method-copy h3 {
  margin: 0 0 .38rem;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  font-weight: var(--w-semibold);
  line-height: .95;
  letter-spacing: -.055em;
}
.method-copy p {
  max-width: 18ch;
  margin: 0;
  color: #514859;
  font-size: clamp(.88rem, 1.1vw, 1.05rem);
  font-weight: var(--w-medium);
  line-height: 1.25;
}

@media (max-width: 767px) {
  .what-we-do { height: 310svh; min-height: 116rem; }
  .what-we-do-heading {
    top: 5.75rem;
    width: calc(100% - 2rem);
  }
  .what-we-do-heading .eyebrow { margin-bottom: 1.25rem; }
  .what-we-do-heading h2 { font-size: clamp(3.35rem, 14vw, 4.75rem); }
  .method-statement {
    left: 1rem;
    bottom: 1.8rem;
    width: min(25rem, calc(100% - 2rem));
    font-size: 1rem;
  }
  .method-origin { top: 46%; }
  .method-spoke { left: 50%; top: 46%; }
  .method-spoke-t { width: 41vw; transform: rotate(210deg) scaleX(var(--method-progress)); }
  .method-spoke-l { width: 37vw; transform: rotate(-30deg) scaleX(var(--method-progress)); }
  .method-spoke-h { width: 42vw; transform: rotate(42deg) scaleX(var(--method-progress)); }
  .method-point { width: min(15.5rem, 46vw); gap: .65rem; }
  .method-point-t { left: .8rem; top: 30%; }
  .method-point-l { right: .8rem; top: 47%; }
  .method-point-h { right: .8rem; bottom: 19%; }
  .method-letter { font-size: clamp(4.2rem, 19vw, 6.2rem); }
  .method-copy h3 { font-size: 1.5rem; }
  .method-copy p { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .what-we-do { height: auto; min-height: 100svh; padding: 7rem 0 3rem; }
  .what-we-do-sticky { position: relative; height: 52rem; }
  .method-point { opacity: 1; transform: none; }
  .method-copy { opacity: 1; transform: none; }
  .method-spoke-t { transform: rotate(216deg); }
  .method-spoke-l { transform: rotate(-34deg); }
  .method-spoke-h { transform: rotate(35deg); }
}

/* What we do — three overlapping editorial service chapters. The fixed mark
   continues behind them; these full-page sheets simply pass over it. */
.what-we-do {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: #21182c;
}
.services-intro {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 92svh;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(6.8rem, 14vh, 10rem) var(--page-pad) clamp(3rem, 8vh, 6rem);
  background: transparent;
}
.services-intro .eyebrow,
.service-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  color: var(--violet);
  font-size: .7rem;
  font-weight: var(--w-black);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.services-intro .eyebrow { max-width: 26rem; }
.services-intro .eyebrow span { color: #766c82; }
.services-intro h2 {
  max-width: 10ch;
  margin: 0;
  color: #21182c;
  font-size: clamp(4.3rem, 9.7vw, 10rem);
  font-weight: var(--w-medium);
  line-height: .82;
  letter-spacing: -.075em;
}
.services-stack { position: relative; z-index: 2; }
.service-chapter {
  position: relative;
  height: 126svh;
  min-height: 54rem;
}
.service-chapter-challenge { z-index: 1; }
.service-chapter-science { z-index: 2; }
.service-chapter-activation { z-index: 3; }
.service-chapter-surface {
  position: sticky;
  top: 1rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: .75rem;
  width: calc(100% - 2rem);
  height: calc(100svh - 2rem);
  margin: 0 1rem;
  padding: clamp(1.25rem, 2.1vw, 2rem);
  overflow: hidden;
  background: #f5f2f8;
}
.service-chapter-science .service-chapter-surface {
  background: #21182c;
  color: #f9f7fb;
}
.service-chapter-activation .service-chapter-surface { background: #e9efec; }
.service-meta { grid-column: 1 / -1; align-self: start; }
.service-chapter-science .service-meta { color: #cfaafc; }
.service-chapter h3 {
  z-index: 1;
  grid-column: 1 / span 8;
  grid-row: 2;
  align-self: center;
  max-width: 8.5ch;
  margin: 0;
  color: inherit;
  font-size: clamp(4rem, 9.2vw, 9.7rem);
  font-weight: var(--w-medium);
  line-height: .8;
  letter-spacing: -.078em;
  transform: translateY(var(--chapter-title-shift, 2rem));
  opacity: var(--chapter-opacity, 0);
}
.service-copy {
  z-index: 2;
  grid-column: 1 / span 3;
  grid-row: 3;
  align-self: end;
  max-width: 24ch;
  margin: 0;
  color: #4d4556;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  font-weight: var(--w-medium);
  line-height: 1.22;
  opacity: var(--chapter-opacity, 0);
  transform: translateY(var(--chapter-copy-shift, 1.2rem));
}
.service-chapter-science .service-copy { color: rgba(255, 255, 255, .76); }
.service-media {
  position: absolute;
  top: clamp(4.5rem, 11vh, 7rem);
  right: clamp(1.25rem, 3.2vw, 3.5rem);
  width: min(55vw, 51rem);
  height: min(61vh, 38rem);
  overflow: hidden;
  background: #251737;
  clip-path: inset(0 0 var(--media-clip, 100%) 0);
  cursor: none;
}
.service-chapter-activation .service-media { background: #b9d1c7; }
.service-media img,
.service-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--media-scale, 1.1));
  transition: transform .7s cubic-bezier(.16,.84,.21,1);
}
.service-chapter-challenge .service-media img { object-position: 54% center; }
.service-media.is-cursor-active img,
.service-media.is-cursor-active video { transform: scale(1.055); }
.service-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: 5.3rem;
  height: 5.3rem;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #21182c;
  font-size: .68rem;
  font-weight: var(--w-black);
  letter-spacing: .1em;
  pointer-events: none;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.65);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.service-media.is-cursor-active .service-cursor { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.services-clear { height: 68svh; background: transparent; }

@media (max-width: 767px) {
  .services-intro { min-height: 82svh; padding: 6.5rem 1rem 2.4rem; }
  .services-intro h2 { font-size: clamp(4.1rem, 17vw, 6rem); }
  .service-chapter { height: 118svh; min-height: 45rem; }
  .service-chapter-surface {
    top: .6rem;
    width: calc(100% - 1.2rem);
    height: calc(100svh - 1.2rem);
    margin: 0 .6rem;
    padding: 1.05rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .service-chapter h3 {
    grid-column: 1 / -1;
    align-self: start;
    margin-top: 19vh;
    font-size: clamp(3.8rem, 16vw, 5.9rem);
  }
  .service-copy { grid-column: 1 / span 3; font-size: 1rem; }
  .service-media {
    top: auto;
    right: 1.05rem;
    bottom: 9.3rem;
    width: calc(100% - 2.1rem);
    height: min(36vh, 21rem);
  }
  .service-cursor { display: none; }
  .services-clear { height: 42svh; }
}

@media (prefers-reduced-motion: reduce) {
  .service-chapter { height: auto; min-height: 0; padding: .6rem 0; }
  .service-chapter-surface { position: relative; top: auto; height: min(46rem, 100svh); }
  .service-chapter h3,
  .service-copy { opacity: 1; transform: none; }
  .service-media { clip-path: none; }
}

/* TLH service index — the underlying composition is deliberately spare:
   small supporting drawing on the left, service narrative and two pieces of
   work on the right. Each service is a full editorial sheet that overlaps the
   previous one as it becomes sticky. */
.what-we-do {
  position: relative;
  z-index: 1;
  overflow: visible;
  background: transparent;
}
.hello-services { position: relative; }
.hello-service {
  position: relative;
  height: 145svh;
  min-height: 72rem;
}
.hello-service:nth-child(1) { z-index: 1; }
.hello-service:nth-child(2) { z-index: 2; }
.hello-service:nth-child(3) { z-index: 3; }
.hello-service-frame {
  position: sticky;
  top: 0;
  min-height: 100svh;
  padding: clamp(5.5rem, 10vh, 8rem) var(--page-pad) clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  background: rgba(255, 255, 255, .985);
}
.hello-service-figure {
  position: absolute;
  top: clamp(8rem, 16vh, 12.5rem);
  left: clamp(2rem, 20vw, 24rem);
  width: clamp(7.5rem, 10vw, 12rem);
  color: #21182c;
  opacity: var(--hello-reveal, 0);
  transform: translateY(var(--hello-figure-y, 1.8rem));
}
.hello-service-figure svg { display: block; width: 100%; height: auto; }
.hello-service-content {
  width: min(57vw, 65rem);
  margin-left: auto;
  margin-right: clamp(0rem, 4.5vw, 5.5rem);
}
.hello-service-kicker {
  margin: 0 0 clamp(1.25rem, 2vw, 2rem);
  color: #79737e;
  font-size: clamp(.7rem, .85vw, .9rem);
  font-weight: var(--w-medium);
  line-height: 1;
  opacity: var(--hello-reveal, 0);
  transform: translateY(var(--hello-copy-y, 1.2rem));
}
.hello-service h3 {
  margin: 0;
  color: #12100f;
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 6.4vw, 7.8rem);
  font-weight: var(--w-regular);
  line-height: .78;
  letter-spacing: -.065em;
  opacity: var(--hello-reveal, 0);
  transform: translateY(var(--hello-title-y, 3rem));
}
.hello-service-description {
  max-width: 61rem;
  margin: clamp(3.3rem, 7vh, 6rem) 0 clamp(2.5rem, 5vh, 4rem);
  color: #28242a;
  font-size: clamp(1rem, 1.35vw, 1.45rem);
  font-weight: var(--w-book);
  line-height: 1.42;
  opacity: var(--hello-reveal, 0);
  transform: translateY(var(--hello-copy-y, 1.2rem));
}
.hello-service-link {
  display: inline-block;
  margin-bottom: clamp(1.35rem, 2.5vw, 2.25rem);
  color: #21182c;
  font-size: clamp(.85rem, 1.05vw, 1rem);
  font-weight: var(--w-semibold);
  text-decoration-thickness: 1px;
  text-underline-offset: .17em;
  opacity: var(--hello-reveal, 0);
  transform: translateY(var(--hello-copy-y, 1.2rem));
}
.hello-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 5vw, 6.5rem);
}
.hello-case {
  display: block;
  min-width: 0;
  color: #1e1a20;
  text-decoration: none;
  opacity: var(--hello-reveal, 0);
  transform: translateY(var(--hello-case-y, 3.5rem));
}
.hello-case:nth-child(2) { transition-delay: 100ms; }
.hello-case-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #ddd4e8;
  clip-path: inset(0 0 var(--hello-media-clip, 100%) 0);
}
.hello-case-portrait .hello-case-media {
  clip-path: polygon(0 0, 44% 0, 74% 4%, 96% 10%, 100% 19%, 100% 82%, 91% 91%, 72% 97%, 28% 98%, 8% 94%, 0 84%);
}
.hello-case-media img,
.hello-case-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--hello-media-scale, 1.09));
  transition: transform .8s cubic-bezier(.18,.78,.22,1);
}
.hello-case-portrait .hello-case-media img { object-position: 52% center; }
.hello-case:hover .hello-case-media img,
.hello-case:hover .hello-case-media video { transform: scale(1.02); }
.hello-case-title {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 2rem);
  font-weight: var(--w-regular);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.hello-case-type {
  display: block;
  margin-top: .45rem;
  color: #847e87;
  font-size: .72rem;
  font-weight: var(--w-semibold);
  letter-spacing: .02em;
}
.hello-case-cursor {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  border-radius: 50%;
  background: #4c3074;
  color: white;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-style: normal;
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate3d(-50%, -50%, 0) scale(.72);
  transition: opacity .18s ease, transform .25s cubic-bezier(.18,.8,.2,1);
}
.hello-case.is-hovered .hello-case-cursor { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }

@media (max-width: 767px) {
  .hello-service { height: 134svh; min-height: 58rem; }
  .hello-service-frame { padding: 6rem 1rem 3rem; }
  .hello-service-figure {
    top: 7.7rem;
    left: auto;
    right: 1.2rem;
    width: 5.4rem;
  }
  .hello-service-content { width: 100%; margin: 0; }
  .hello-service h3 { font-size: clamp(4.35rem, 19vw, 6rem); }
  .hello-service-description { max-width: 29rem; margin-top: 3rem; margin-bottom: 2rem; font-size: 1rem; }
  .hello-case-grid { gap: .85rem; }
  .hello-case-title { font-size: 1.3rem; }
  .hello-case-type { font-size: .65rem; }
  .hello-case-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hello-service { height: auto; min-height: 0; }
  .hello-service-frame { position: relative; min-height: 50rem; }
  .hello-service-figure,
  .hello-service-kicker,
  .hello-service h3,
  .hello-service-description,
  .hello-service-link,
  .hello-case { opacity: 1; transform: none; }
  .hello-case-media { clip-path: none; }
}

/* What we do — quiet, large-format service cards. The composition is built
   around the reference's two-panel cards and sticky overlap, with TLH footage
   replacing the supplied reference visuals. */
.what-we-do {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #e9e9e3;
  color: #17151c;
}
.what-stack-intro {
  display: grid;
  align-content: end;
  min-height: clamp(27rem, 47svh, 37rem);
  padding: clamp(7rem, 12svh, 10rem) clamp(1.5rem, 2.25vw, 2.75rem) clamp(3.25rem, 6svh, 5.25rem);
}
.what-stack-intro .eyebrow {
  margin: 0 0 1rem;
  color: #4c3074;
  font-size: .7rem;
  font-weight: var(--w-black);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.what-stack-intro h2 {
  max-width: 23ch;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(2.65rem, 3.45vw, 4.8rem);
  font-weight: var(--w-demi);
  line-height: .97;
  letter-spacing: -.065em;
}
.what-stack-intro > p:last-child {
  max-width: 48rem;
  margin: 1.65rem 0 0;
  color: #39363d;
  font-size: clamp(1.02rem, 1.22vw, 1.35rem);
  font-weight: var(--w-book);
  line-height: 1.42;
}
.what-service-stack {
  position: relative;
  padding: 0 clamp(.75rem, 1.15vw, 1.5rem);
}
.what-service-card {
  position: relative;
  height: clamp(37rem, 69svh, 49rem);
}
.what-service-card + .what-service-card { margin-top: -22svh; }
.what-service-card:nth-of-type(1) { z-index: 1; }
.what-service-card:nth-of-type(2) { z-index: 2; }
.what-service-card:nth-of-type(3) { z-index: 3; }
.what-service-card-inner {
  position: sticky;
  top: clamp(.7rem, 1.35vw, 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
  height: clamp(29rem, 45svh, 36rem);
  overflow: hidden;
  border-radius: clamp(1rem, 1.3vw, 1.45rem);
  background: #fff;
  box-shadow: 0 1.2rem 3.25rem rgba(25, 22, 28, .105);
  opacity: var(--service-reveal, 0);
  transform: translateY(var(--service-entry-y, 20px));
  will-change: transform, opacity;
}
.what-service-card-copy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(11rem, .9fr);
  grid-template-rows: auto 1fr auto;
  gap: 1.4rem 3rem;
  padding: clamp(2rem, 3.2vw, 3.8rem) clamp(2rem, 3.2vw, 4rem) clamp(1.8rem, 3vw, 3.35rem);
}
.what-service-card-copy h3 {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(3.25rem, 4.8vw, 6.25rem);
  font-weight: var(--w-medium);
  line-height: .89;
  letter-spacing: -.075em;
}
.what-service-card-copy p {
  grid-column: 1;
  align-self: end;
  max-width: 39rem;
  margin: 0;
  font-size: clamp(1rem, 1.18vw, 1.3rem);
  font-weight: var(--w-book);
  line-height: 1.34;
}
.what-service-card-copy ul {
  grid-column: 2;
  align-self: end;
  margin: 0;
  padding: 0;
  color: #35313a;
  font-size: clamp(.88rem, .95vw, 1.05rem);
  font-weight: var(--w-medium);
  line-height: 1.65;
  list-style: none;
  text-align: center;
}
.what-service-video {
  position: relative;
  overflow: hidden;
  background: #25212a;
}
.what-service-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(15, 12, 17, .11), transparent 46%);
  pointer-events: none;
}
.what-service-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}
.what-service-card:nth-of-type(1) .what-service-video video { object-position: 54% center; }
.what-service-card:nth-of-type(2) .what-service-video video { object-position: 52% center; }
.what-service-card:nth-of-type(3) .what-service-video video { object-position: 42% center; }
.what-liquid-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.what-stack-clear { height: clamp(20rem, 42svh, 34rem); }

@media (max-width: 767px) {
  .what-stack-intro {
    min-height: 55svh;
    padding: 6.5rem 1rem 2.6rem;
  }
  .what-stack-intro h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .what-stack-intro > p:last-child { font-size: 1rem; }
  .what-service-stack { padding: 0 .65rem; }
  .what-service-card { height: 108svh; min-height: 44rem; }
  .what-service-card + .what-service-card { margin-top: -31svh; }
  .what-service-card-inner {
    top: .65rem;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(25rem, 1.25fr) minmax(17rem, .75fr);
    height: min(calc(100svh - 1.3rem), 49rem);
    max-height: 49rem;
  }
  .what-service-card-copy {
    grid-template-columns: minmax(0, 1fr) minmax(7rem, .82fr);
    gap: .75rem 1rem;
    padding: 1.5rem;
  }
  .what-service-card-copy h3 { font-size: clamp(3.2rem, 14vw, 4.65rem); }
  .what-service-card-copy p { font-size: .95rem; line-height: 1.35; }
  .what-service-card-copy ul { font-size: .76rem; line-height: 1.5; }
  .what-service-video { grid-row: 2; }
  .what-stack-clear { height: 25svh; }
}

@media (prefers-reduced-motion: reduce) {
  .what-service-card { height: auto; min-height: 0; margin: 0 0 1rem; }
  .what-service-card-inner { position: relative; top: auto; opacity: 1; transform: none; }
  .what-service-video video { transform: none; }
}

/* Pinned deck: the viewport stays still while the cards alone rise into a
   compact stack. This deliberately replaces the usual "scroll past cards"
   behaviour with one controlled upward movement. */
.what-we-do {
  height: 310svh;
  background: transparent;
  overflow: clip;
}
.what-stack-pin {
  position: sticky;
  /* Let the whole composition travel normally for an extra 20vh before
     pinning. The first card therefore arrives higher, leaving more run-up
     for the Science card's rise. */
  top: -20svh;
  height: 120svh;
  overflow: hidden;
  isolation: isolate;
}
.what-stack-intro {
  position: absolute;
  z-index: 3;
  top: clamp(3.8rem, 5.5svh, 5.5rem);
  left: clamp(1.5rem, 4vw, 5rem);
  right: auto;
  display: block;
  width: min(42rem, 42vw);
  min-height: 0;
  padding: 0;
  transform: translate3d(0, var(--what-intro-drift, 0px), 0);
  will-change: transform;
}
.what-stack-intro h2 { max-width: 10ch; }
.what-stack-intro > p:last-child { max-width: 38rem; margin-top: .95rem; }
.what-service-stack {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 0 clamp(.75rem, 1.15vw, 1.5rem);
  pointer-events: none;
  transform: translate3d(0, var(--service-stack-drift, 0px), 0);
  will-change: transform;
}
.what-service-card,
.what-service-card + .what-service-card {
  position: absolute;
  right: clamp(.75rem, 1.15vw, 1.5rem);
  left: clamp(.75rem, 1.15vw, 1.5rem);
  height: clamp(29rem, 45svh, 36rem);
  margin: 0;
  pointer-events: auto;
}
.what-service-card:nth-of-type(1) { top: 45svh; }
.what-service-card:nth-of-type(2) { top: 97svh; }
.what-service-card:nth-of-type(3) { top: 148svh; }
.what-service-card-copy h3 {
  justify-self: end;
  padding-right: clamp(1rem, 4.5vw, 5.75rem);
  font-size: clamp(2.6rem, 2.7vw, 3.7rem);
}
@media (min-width: 768px) {
  /* A shallow residual of each earlier card stays visible at rest. Keeping
     the title near its upper edge lets all three service names read as a
     deliberate stack rather than cutting into one another. */
  .what-service-card-copy {
    padding-top: clamp(1.25rem, 1.9vw, 2.4rem);
  }
}
.what-service-card-inner {
  position: relative;
  top: auto;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, .92);
  isolation: isolate;
  background: #f8f7f2;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .95),
    inset 0 -1px rgba(91, 86, 100, .13),
    0 1.2rem 3.4rem rgba(25, 22, 28, .09);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translate3d(0, var(--service-entry-y, 98svh), 0);
  transition: none;
}
.what-service-card-inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8%;
  background-image: var(--glass-backdrop);
  background-position: center 58%;
  background-size: cover;
  filter: grayscale(.82) blur(30px) saturate(.3) contrast(.88);
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}
.what-service-card .what-service-card-inner { --glass-backdrop: url("assets/tlh-journey.png"); }
.what-service-card-inner > * { position: relative; z-index: 1; }
.what-service-card-copy {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 255, 255, .7), transparent 31%),
    #f8f7f2;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.what-service-card-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 1px solid rgba(255, 255, 255, .58);
  background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 32%, rgba(255, 255, 255, .08));
  pointer-events: none;
}
.what-service-card-copy > * { position: relative; z-index: 1; }
.what-service-kicker {
  position: absolute;
  z-index: 2;
  top: clamp(.7rem, 1.05vw, 1.3rem);
  left: clamp(1.25rem, 3.2vw, 4rem);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  color: var(--violet);
  font-size: clamp(.62rem, .6vw, .74rem);
  font-weight: var(--w-black);
  letter-spacing: .17em;
  line-height: 1;
  text-transform: uppercase;
}
.what-service-kicker span {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: .72;
}
.what-service-card-copy h3 {
  justify-self: start;
  align-self: start;
  /* Keep a genuine visual pause below the eyebrow instead of letting the
     two headings collide at the card's top edge. */
  margin-top: clamp(1.45rem, 1.7vw, 2.2rem);
  padding-right: 0;
  font-size: clamp(2.4rem, 2.45vw, 3.25rem);
  font-weight: var(--w-demi);
}
.what-service-card-copy p:not(.what-service-kicker) {
  max-width: 34rem;
  font-size: clamp(1rem, 1.03vw, 1.2rem);
  font-weight: var(--w-book);
  line-height: 1.4;
}
.what-service-card-copy ul {
  color: rgba(24, 22, 30, .66);
  font-size: clamp(.76rem, .78vw, .92rem);
  font-weight: var(--w-demi);
  line-height: 1.58;
}
.what-service-card:nth-of-type(1) .what-service-card-copy {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .78), transparent 33%),
    #eeeaf7;
}
.what-service-card:nth-of-type(2) .what-service-card-copy {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .8), transparent 33%),
    #f4f1ea;
}
.what-service-card:nth-of-type(3) .what-service-card-copy {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, .8), transparent 33%),
    #ecefeb;
}
.what-service-card-inner::before { opacity: 0; }
@media (min-width: 768px) {
  .what-service-card-copy {
    grid-template-columns: clamp(8rem, 10.5vw, 13rem) minmax(0, 1.5fr) minmax(10rem, .88fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(1.25rem, 2.25vw, 3.2rem);
    row-gap: 0;
  }
  .what-service-number {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    color: rgba(95, 60, 145, .14);
    font-size: clamp(6.4rem, 9.2vw, 11.6rem);
    font-weight: var(--w-regular);
    letter-spacing: -.105em;
    line-height: .7;
  }
  .what-service-number::after {
    content: "";
    position: absolute;
    top: 7%;
    right: clamp(-1.6rem, -1.125vw, -.625rem);
    bottom: 7%;
    width: 1px;
    background: rgba(55, 49, 65, .11);
  }
  .what-service-kicker {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 clamp(.45rem, .7vw, .8rem);
    font-size: clamp(.54rem, .48vw, .65rem);
    letter-spacing: .19em;
  }
  .what-service-kicker span { width: 1.25rem; }
  .what-service-card-copy h3 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: clamp(.35rem, .65vw, .7rem) 0 0;
    font-size: clamp(2.25rem, 2.3vw, 3.05rem);
  }
  .what-service-card-copy p:not(.what-service-kicker) {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    max-width: 31rem;
    font-size: clamp(1.04rem, 1.08vw, 1.28rem);
    line-height: 1.38;
  }
  .what-service-card-copy ul {
    position: relative;
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: end;
    padding-bottom: .1rem;
    font-size: clamp(.78rem, .82vw, .96rem);
    text-align: left;
  }
  .what-service-card-copy ul::before {
    content: "";
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: clamp(-1.6rem, -1.125vw, -.625rem);
    width: 1px;
    background: rgba(55, 49, 65, .11);
  }
}
.what-service-video::after {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .2), transparent 34%),
    linear-gradient(110deg, rgba(15, 12, 17, .09), transparent 48%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .what-service-video {
    --liquid-x: 50%;
    --liquid-y: 50%;
    --liquid-pan-x: 0px;
    --liquid-pan-y: 0px;
    --liquid-scale: 0;
    cursor: none;
  }
  .what-service-video video {
    position: relative;
    z-index: 1;
    transform-origin: var(--liquid-x) var(--liquid-y);
    transform: translate3d(var(--liquid-pan-x), var(--liquid-pan-y), 0) scale(calc(1.015 + var(--liquid-scale)));
    transition: filter .42s ease;
    will-change: transform, clip-path;
  }
.what-service-card:nth-of-type(1) .what-service-video video { clip-path: url(#what-liquid-clip-1); }
.what-service-card:nth-of-type(2) .what-service-video video { clip-path: url(#what-liquid-clip-2); }
.what-service-card:nth-of-type(3) .what-service-video video { clip-path: url(#what-liquid-clip-3); }
  .what-service-video::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: radial-gradient(circle 7.5rem at var(--liquid-x) var(--liquid-y), rgba(255, 255, 255, .2), rgba(255, 255, 255, .045) 24%, transparent 61%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .what-service-video::after { z-index: 3; transition: opacity .35s ease; }
  .what-service-video.is-liquid-active::before { opacity: 1; }
  .what-service-video.is-liquid-active::after { opacity: .64; }
}
.what-stack-clear { display: none; }

@media (max-width: 767px) {
  .what-we-do { height: 355svh; }
  .what-stack-pin { top: -12svh; height: 112svh; }
  .what-stack-intro {
    top: 5.4rem;
    left: 1.15rem;
    right: auto;
    width: min(21rem, calc(100% - 2.3rem));
  }
  .what-stack-intro h2 { font-size: clamp(2.75rem, 12vw, 3.85rem); }
  .what-stack-intro > p:last-child { font-size: .98rem; }
  .what-service-card,
  .what-service-card + .what-service-card {
    right: .65rem;
    left: .65rem;
    height: min(41rem, 70svh);
  }
  .what-service-card:nth-of-type(1) { top: 46svh; }
  .what-service-card:nth-of-type(2) { top: 96svh; }
  .what-service-card:nth-of-type(3) { top: 151svh; }
  .what-service-number { display: none; }
  .what-service-kicker { left: 1.5rem; top: 1rem; }
  .what-service-card-copy h3 { justify-self: center; padding-right: 0; font-size: clamp(2.55rem, 11vw, 3.6rem); }
  .what-service-card-inner {
    grid-template-rows: minmax(24rem, 1.25fr) minmax(14rem, .75fr);
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .what-we-do { height: auto; overflow: visible; }
  .what-stack-pin { position: relative; height: auto; overflow: visible; }
  .what-stack-intro { position: relative; top: auto; right: auto; width: auto; padding: 6rem 1rem 2rem; transform: none; }
  .what-service-stack { position: relative; display: grid; gap: 1rem; padding: 0 1rem 2rem; transform: none; }
  .what-service-card,
  .what-service-card + .what-service-card { position: relative; inset: auto; height: auto; margin: 0; }
  .what-service-card-inner { transform: none; }
}

/* ── The what-we-do ground change ────────────────────────────────────────────
   Two circles swell out of opposite corners and flood the page with a new
   colour. Not scroll-linked: they are latched at a point on the way down and
   they never come back, so the page keeps the new ground for good. The layer
   is fixed and sits in `.page-content` right after `.site-bg`, so it paints
   over the floating mark (same stacking level, later in the DOM) and under the
   sections (z-index 1) — the light cards go on floating on top of it. */
.page-wash {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-wash-circle {
  --wash-scale: 0;
  position: absolute;
  display: block;
  width: 82vmax;
  height: 82vmax;
  border-radius: 50%;
  background: var(--wash-surface, #4c3074);
  transform: scale(var(--wash-scale));
  /* Long and ease-out: a whole-page ground change should read as inevitable
     rather than as a UI transition snapping into place. */
  transition: transform 2.8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* Anchored off-canvas so the growth comes from beyond the corners, and so the
   two together overrun the viewport at full size with no gap left at 2.2. */
.page-wash-circle.is-left { bottom: -35vmax; left: -31vmax; }
.page-wash-circle.is-right { top: -34vmax; right: -29vmax; transition-duration: 3.2s; transition-delay: .35s; }
body.wash-on .page-wash-circle { --wash-scale: 2.2; }

/* Section two's statement is still on screen when the wash fires, and it is set
   in violet — near-invisible on the new ground. It turns with the wash. */
body.wash-on .story-word { color: #ffffff; }
.story-word { transition: color .9s ease .35s; }

/* The section's own copy sits directly on the wash (the cards are opaque, so
   they need nothing), and it is set in near-black. Flip it with the trigger. */
body.wash-on .what-we-do { --ink: #ffffff; --slate: #ded5ee; }
body.wash-on .what-stack-intro h2 { color: #ffffff; }
body.wash-on .what-stack-intro > p:last-child { color: #ded5ee; }
body.wash-on .what-stack-intro .eyebrow { color: #e9dffb; }
.what-stack-intro h2,
.what-stack-intro > p:last-child,
.what-stack-intro .eyebrow { transition: color .9s ease .35s; }

@media (prefers-reduced-motion: reduce) {
  /* Land on the new ground with no travel. */
  .page-wash-circle { transition: none; }
  .what-stack-intro h2,
  .what-stack-intro > p:last-child,
  .what-stack-intro .eyebrow,
  .story-word { transition: none; }
}

/* ── The intro film ──────────────────────────────────────────────────────────
   The statement is read first; the film only offers itself once the sweep has
   finished, so it never competes with the sentence for attention. */
.story-sticky {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2rem, 4.5vh, 3.5rem);
}

/* The film gets a band of its own between the statement and What we do, and
   the band is a scroll stage: the frame opens from ~80% of the viewport to full
   bleed while the ground dims under it, then What we do wipes up over the top.
   --expand and --dim are written per frame from scroll position in script.js;
   the values here are the resting state the page holds before JS runs, and the
   state reduced motion keeps. No horizontal padding on the band — the inset at
   rest lives in --w-rest, so that full bleed really is edge to edge. */
.story-film-band {
  --expand: 0;
  --dim: 0;
  position: relative;
  /* The film opens, starts and holds full bleed, then scrolls away normally;
     the white divider simply follows below it, no overlap. */
  height: 195svh;
  padding: 0;
}
/* The dark ground sits behind the whole band, not just the pinned stage, so the
   field stays continuous as the stage unsticks and travels out of view. */
.story-film-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #241733;
  opacity: var(--dim);
  pointer-events: none;
}
.story-film-stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  overflow: hidden;
}
.story-film {
  /* Rest: ~80% of the viewport on either axis, whichever binds first. */
  --w-rest: min(88vw, calc(80svh * 16 / 9), 112rem);
  --h-rest: calc(var(--w-rest) * 9 / 16);
  --r-rest: clamp(.9rem, 1.1vw, 1.2rem);
  position: relative;
  z-index: 1;
  width: calc(var(--w-rest) + (100vw - var(--w-rest)) * var(--expand));
  height: calc(var(--h-rest) + (100svh - var(--h-rest)) * var(--expand));
  margin: 0;
}
.story-film-open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--r-rest) * (1 - var(--expand)));
  background: #11110f;
  box-shadow: 0 1.4rem 3.6rem rgba(25, 22, 28, .22);
  cursor: pointer;
}
.story-film-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.story-film-open:hover img { transform: scale(1.03); }
/* The play circle is gone — the film starts on scroll, so a play button was
   promising an interaction that no longer drives anything. Its hover rule and
   the SVG sizing went with it. */
.story-film-label {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  gap: .6rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: clamp(3rem, 7vh, 5.5rem) clamp(1.15rem, 2.2vw, 2.2rem) clamp(1.6rem, 4vh, 3rem);
  background: linear-gradient(to top, rgba(12, 8, 18, .72), transparent);
  color: #fff;
  font: var(--w-demi) clamp(.68rem, .95vw, .82rem)/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-film-label em { font-style: normal; opacity: .5; }

/* A small chevron that falls and resets — the cue reads as "keep going" without
   needing a word for it. */
.story-film-cue {
  position: relative;
  width: 1rem;
  height: 1rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-.1rem, -.1rem);
  opacity: .8;
  animation: story-film-cue-fall 2.1s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes story-film-cue-fall {
  0%, 62%, 100% { transform: rotate(45deg) translate(-.1rem, -.1rem); opacity: .55; }
  28% { transform: rotate(45deg) translate(.14rem, .14rem); opacity: 1; }
}
.story-film-cue-text { letter-spacing: .16em; }
/* Once it is running, the cue has done its job. */
.story-film-band.is-playing .story-film-label { opacity: 0; }
.story-film-label { transition: opacity .4s ease; }
/* Both of these set `display`, which outranks the UA's `[hidden]{display:none}`
   — without these the player would sit there visible from the start. */
.story-film-open[hidden],
.story-film-video[hidden] { display: none; }
.story-film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r-rest) * (1 - var(--expand)));
  background: #11110f;
  box-shadow: 0 1.4rem 3.6rem rgba(25, 22, 28, .22);
}

/* On a phone the frame grows to 100vw x 100svh — a portrait box — and `cover`
   filled it by cropping the film hard down to a tall slot through the middle.
   The picture is 16:9 and stays 16:9: `contain` keeps every frame of it and
   lets the black of the frame open above and below as the box goes portrait,
   which is what a widescreen film looks like full screen on an upright phone.
   Desktop keeps `cover` — there the expanded box is close enough to 16:9 that
   it only trims the edges. */
@media (max-width: 899px) {
  .story-film-video,
  .story-film-open img {
    object-fit: contain;
    background: #000;
  }
  .story-film-open { background: #000; }

  /* svh is the viewport with the browser chrome expanded. iOS Safari hides its
     bottom toolbar as you scroll, so the real viewport grows past svh and a
     100svh frame stopped short — a band of the white page showing under the
     film at full bleed. lvh is the large viewport height, so the black covers
     in both states. Same fix as the What We Do plate. */
  .story-film-stage { height: 100lvh; }
  .story-film { height: calc(var(--h-rest) + (100lvh - var(--h-rest)) * var(--expand)); }
}

/* Sound toggle. The film auto-starts muted at full frame — unmuted autoplay is
   refused outright — so this is the one click that gets the audio back. It sits
   top-right, clear of the native controls along the bottom. */
.story-film-sound {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 2.2vw, 2rem);
  right: clamp(1rem, 2.2vw, 2rem);
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.05rem .6rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(12, 8, 18, .52);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: var(--w-bold) .62rem/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.story-film-sound[hidden] { display: none; }
.story-film-sound:hover { background: rgba(12, 8, 18, .72); border-color: rgba(255, 255, 255, .5); }
.story-film-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.story-film-sound-icon { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; }
.story-film-sound-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill-rule: evenodd; }
.story-film-sound-icon .story-film-wave { fill: none; opacity: 0; transition: opacity .2s ease; }
.story-film-sound-icon .story-film-slash { opacity: 1; transition: opacity .2s ease; }
/* Pressed = sound on: the waves come in, the slash goes. */
.story-film-sound[aria-pressed="true"] .story-film-wave { opacity: 1; }
.story-film-sound[aria-pressed="true"] .story-film-slash { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .story-film { opacity: 1; transform: none; pointer-events: auto; transition: none; }
  /* No scroll stage: hold the framed state rather than pinning for 260svh. */
  .story-film-band { --expand: 0; --dim: 0; height: auto; min-height: 100svh; }
  .story-film-stage { position: static; height: auto; padding-block: clamp(3rem, 9vh, 8rem); }
  .story.has-entry-reveal .story-reveal-primary { opacity: 1; transform: none; filter: none; animation: none !important; }
  .story-reveal-secondary { opacity: 1; transform: none; filter: none; animation: none !important; }
  .story-film-open img { transition: none; }
  /* No scroll stage under reduced motion, so nothing falls and nothing to scroll
     for — the cue holds still and script.js relabels it. */
  .story-film-cue { animation: none; }
}

/* Compact homepage impact preview: a short, hover-led atlas. The full
   destination journey remains on impact.html. */
.home-impact {
  --frame-inset: calc(var(--frame-pad) + max(0px, (100% - var(--frame-max) - 2 * var(--frame-pad)) / 2));
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, .65fr) minmax(38rem, 1.35fr);
  gap: clamp(3rem, 5vw, 6rem);
  min-height: min(100svh, 64rem);
  padding: clamp(5rem, 10vw, 9rem) var(--frame-inset) clamp(5rem, 9vw, 8rem);
  overflow: hidden;
  background: #fff;
  color: #21182c;
}
.home-impact-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 30rem;
  transform: translateY(-4rem);
}
.home-impact-eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.5rem;
  color: var(--violet);
  font: var(--w-bold) .67rem/1.2 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.home-impact-eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.home-impact-copy h2 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(2.75rem, 5vw, 4.8rem);
  font-weight: var(--w-medium);
  line-height: .9;
  letter-spacing: -.068em;
}
.home-impact-copy > p:not(.home-impact-eyebrow) {
  max-width: 34ch;
  margin: 2rem 0 0;
  color: #6c6475;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
}
.home-impact-link,
.home-impact-card-copy > a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
  color: var(--violet);
  font: var(--w-semibold) .72rem/1.2 var(--font-ui);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.home-impact-link span,
.home-impact-card-copy > a span { font-size: 1rem; letter-spacing: 0; }
.home-impact-stage {
  position: relative;
  align-self: center;
  min-height: min(82svh, 54rem);
}
.home-impact-globe {
  position: absolute;
  inset: 0;
  min-height: 38rem;
}
.home-impact-globe .impact-globe-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.home-impact-globe .globe-markers {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
}
.home-impact-globe .globe-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  transition: opacity .2s ease;
}
.home-impact-globe .globe-marker i {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid #fff5ff;
  border-radius: 50%;
  background: #d8b8ff;
  box-shadow: 0 0 16px 6px rgba(188, 134, 255, .65), 0 0 0 7px rgba(189, 150, 222, .16);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.home-impact-globe .globe-marker:hover i,
.home-impact-globe .globe-marker:focus-visible i,
.home-impact-globe .globe-marker.is-current i {
  background: #fff;
  box-shadow: 0 0 22px 9px rgba(210, 166, 255, .8), 0 0 0 10px rgba(189, 150, 222, .22);
  transform: translate(-50%, -50%) scale(1.25);
}
.home-impact-globe .globe-marker span {
  position: absolute;
  top: -1.1rem;
  left: .9rem;
  color: #f5ecff;
  font: var(--w-semibold) .62rem/1 var(--font-ui);
  letter-spacing: .14em;
  opacity: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.home-impact-globe .globe-marker.is-current span { opacity: 1; }
.home-impact-hint {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 3;
  margin: 0;
  color: #8e8499;
  font: var(--w-demi) .67rem/1.2 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity .3s ease;
}
.home-impact-hint span { margin-right: .35rem; color: var(--violet); font-size: 1rem; }
.home-impact-hint.is-muted { opacity: .35; }
.home-impact-partners { width: min(50rem, 44vw); margin-top: clamp(2.6rem, 5vw, 4.5rem); margin-left: clamp(1rem, 3vw, 3rem); transform: translateY(4rem); }
.home-impact-partners > p { margin: 0 0 .8rem; color: #8e8499; font: var(--w-bold) .6rem/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.home-impact-partner-window { overflow: hidden; width: 100%; height: 5.5rem; border: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
.home-impact-partner-loop { display: flex; align-items: center; width: max-content; height: 100%; animation: home-impact-logo-carousel 24s linear infinite; will-change: transform; }
.home-impact-partner-loop > span { display: grid; place-items: center; flex: 0 0 clamp(9rem, 13vw, 13rem); height: 100%; margin-right: 1.2rem; }
.home-impact-partner-loop img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 3.7rem;
  object-fit: contain;
  /* The logos are pre-processed to solid black on transparency, so no
     greyscale filter, no opacity knock-back and no multiply blend — those
     were only there to cope with white-background JPEGs, and between them
     they were what made the bar read grey instead of black. */
  opacity: 1;
}
/* --partner-shift is one copy's width in px, written by home-impact.js. The
   50% fallback is the old two-copy behaviour, kept for any marquee that has not
   been measured. */
@keyframes home-impact-logo-carousel { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--partner-shift, 50%))); } }
.home-impact-partner-window:hover .home-impact-partner-loop { animation-play-state: paused; }
.home-impact-card {
  position: absolute;
  right: 3.5rem;
  bottom: 1rem;
  z-index: 4;
  display: grid;
  grid-template-columns: clamp(13rem, 19vw, 17rem) minmax(0, 1fr);
  width: min(64rem, calc(100% + 6rem));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 1.6rem 4rem rgba(27, 14, 44, .2);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0;
  transform: translateY(1rem) scale(.97);
  transition: opacity .45s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.home-impact-card[hidden] { display: none; }
.home-impact-card.is-visible { opacity: 1; transform: none; }
.home-impact-card-media { min-height: 12rem; background: #2d1b42; }
.home-impact-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-impact-card-media { min-height: 20rem; }
.home-impact-card-copy { padding: 1.65rem 1.8rem 1.55rem; }
.home-impact-card-client { display: flex; align-items: center; gap: .55rem; min-height: 1.8rem; color: var(--violet); font: var(--w-bold) .64rem/1.2 var(--font-ui); letter-spacing: .13em; text-transform: uppercase; }
.home-impact-card-client img { display: block; width: auto; max-width: 8rem; height: 1.8rem; object-fit: contain; mix-blend-mode: multiply; }
.home-impact-card-copy h3 { margin: 1rem 0 0; color: #201928; font-size: clamp(1.6rem, 2.5vw, 2.6rem); font-weight: var(--w-demi); line-height: 1.04; letter-spacing: -.045em; }
.home-impact-card-copy > p { margin: .85rem 0 0; color: #655c70; font-size: clamp(.9rem, 1vw, 1.05rem); line-height: 1.45; }
.home-impact-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid rgba(75, 55, 92, .16); }
.home-impact-card-stats > span { display: grid; gap: .3rem; }
.home-impact-card-stats strong { color: #201928; font-size: 1.55rem; font-weight: var(--w-demi); line-height: 1; letter-spacing: -.05em; }
.home-impact-card-stats small { color: #655c70; font: var(--w-bold) .52rem/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.home-impact-card-copy > a { margin-top: 1rem; font-size: .6rem; }

@media (max-width: 900px) {
  .home-impact { grid-template-columns: 1fr; gap: 2rem; min-height: auto; padding-block: 5rem; }
  .home-impact-copy { max-width: 38rem; transform: none; }
  .home-impact-partners { width: 100%; margin-left: 0; transform: none; }
  .home-impact-copy h2 { max-width: 12ch; }
  .home-impact-stage { min-height: min(90vw, 38rem); }
  .home-impact-globe { min-height: 24rem; }
  .home-impact-card { position: relative; right: auto; bottom: auto; width: 100%; margin-top: min(46vw, 16rem); }
  .home-impact-partner-window { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact-card,
  .home-impact-card.is-visible,
  .home-impact-globe .globe-marker,
  .home-impact-globe .globe-marker i { transition: none; transform: none; }
}

/* Flat stand-in for the 3D mark, shown only when WebGL or the 3D script fails
   (html.mark3d-fallback, set in index.astro). Placed where the 3D mark sits:
   right of centre on desktop, centred and raised on phones. */
.site-bg__flat { display: none; }
html.mark3d-fallback:not(.mark3d-live) .site-bg__flat {
  position: absolute;
  top: 50%;
  left: 72%;
  display: block;
  height: 50vh;
  width: auto;
  aspect-ratio: 120 / 195.88;
  color: #5f3c91;
  transform: translate(-50%, -50%);
}
@media (max-width: 899px) {
  html.mark3d-fallback:not(.mark3d-live) .site-bg__flat { left: 50%; top: 44%; height: 34vh; }
}