/* =========================================================================
   THE VFX INSTITUTE — v1 FOLDS

   Base rules are the STATIC layout: normal-flow sections needing no JS. That
   is the real mobile and prefers-reduced-motion experience, and it is what a
   desktop browser paints before GSAP is ready. The pinned portal stage layers
   absolute positioning on top of these same elements via `.is-pinned`.

   RING GEOMETRY — measured off the source footage, not guessed. In the video
   frame the bright ring spans 62.9% of frame width, the dark hollow inside it
   spans 27.7%, and the ring's centre sits at (49%, 58%) of the frame — below
   the frame's own middle, because the plate has a spark floor under it. Every
   number below is derived from those four, so the DOM circle, the scrim and
   the mark all stay locked to the actual ring however the video is scaled:

     video display width  = --ring-outer / 0.629
     hollow diameter      = 0.44 x --ring-outer
     centring correction  = translate(-49%, -58%)
   ========================================================================= */

/* =========================================================================
   HEADER

   Transparent — no bar, no border. The plate runs the full height of the
   viewport and a band across the top would cut it. Legibility is carried by
   the glass pills instead, so the chrome floats on the picture and only
   darkens the few hundred pixels it actually occupies.
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  padding: clamp(0.9rem, 1.8vw, 1.5rem) clamp(1rem, 3vw, 2.5rem);
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* the shared pill. Same reasoning as the panels in the stage: the tint
   carries the contrast and the blur is the enhancement, so it still reads
   where backdrop-filter is unsupported. */
.glass-pill {
  background: rgba(var(--void-rgb), 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: var(--hair) solid rgba(var(--white-rgb), 0.13);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.9);
}

/* --- the torch ------------------------------------------------------------
   The header is fixed and carries no background of its own, so once the
   page scrolls the mark is over whatever section happens to be underneath
   it — a lit green stage, an ochre wall, a red band — and it stops reading.
   The nav and the phone number solve this with a glass pill; putting the
   mark in one too would have made the header three chips in a row.

   So it gets a light instead: a beam from a source above the viewport,
   narrow at the top and widening as it falls, with a soft hot spot where it
   lands on the mark. White works for both grounds it has to survive — the
   mark is brand red, which measures about 5:1 on white and only 1.9:1 on
   the wall's ochre, so lifting whatever is behind it toward white raises
   the contrast rather than washing it out.

   It is only there when it is needed: nothing at the top of the page, where
   the mark is already on black, fading in past 60px of scroll.
   -------------------------------------------------------------------------- */
.brand {
  position: relative;
  display: block;
  line-height: 0;
  flex: none;
  isolation: isolate;
}
.brand-torch,
.brand::before {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
/* The beam. clip-path cuts the cone, but the clip is never what you see:
   the gradient inside it is already at zero alpha by 82%, and a 26px blur
   runs over the top of that. The first pass tapered to zero only at the
   clip line with a 13px blur, and the result was a visible grey wedge with
   straight diagonal sides and a hard bottom edge — a polygon, not a light.

   Warm white rather than pure white, because the light in the photograph
   this most often crosses is warm, and a neutral beam over it reads as
   fog. */
.brand-torch {
  left: 50%; top: -300%;
  width: 340%; height: 520%;
  translate: -50% 0;
  background: linear-gradient(180deg,
    rgba(255, 251, 240, 0) 0%,
    rgba(255, 251, 240, 0.05) 38%,
    rgba(255, 250, 236, 0.12) 62%,
    rgba(255, 250, 236, 0.06) 74%,
    rgba(255, 250, 236, 0) 82%);
  clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
  /* The clip alone still showed its diagonal on flat black, where there is
     no texture to hide it. This mask fades the beam out in every direction
     from where it lands, so the polygon's sides and its base are gone
     before the clip line is reached and only the soft shape remains. */
  -webkit-mask-image: radial-gradient(ellipse 44% 44% at 50% 62%,
    #000 10%, rgba(0, 0, 0, 0.5) 40%, transparent 64%);
  mask-image: radial-gradient(ellipse 44% 44% at 50% 62%,
    #000 10%, rgba(0, 0, 0, 0.5) 40%, transparent 64%);
  filter: blur(24px);
}
/* The pool the beam lands in.

   Read the note above about what this does NOT do. Measured, the white
   torch does not improve the mark's contrast — it reduces it. The mark is
   #C52127, luminance 0.131, and every ground it crosses is darker than
   that: 0.003 on the courses fold, 0.037 on the wall. Lightening those
   walks the ground UP TOWARDS the red rather than away from it, so the
   contrast falls before it could ever rise:

     wall     no torch  L 0.037  2.07:1     with torch  L 0.204  1.40:1
     courses  no torch  L 0.003  3.42:1     with torch  L 0.119  1.07:1

   A white glow only starts paying again past a ground of about L 0.49,
   which is a near-opaque white plate behind the mark, not a beam — I built
   that too and it neither reached the number nor looked like a torch.

   What it does do is separate the mark from busy ground: over the wall's
   plaster and the poster grids, the pool quiets the texture immediately
   behind the logo, which is a real readability gain even though the
   luminance ratio against the red is not. Keeping it at a level where it
   reads as light rather than as a white blob.

   If the goal is the contrast number, the effect wants to be dark, not
   light — a vignette taking the wall from 0.037 to about 0.005 gets the
   mark to roughly 3.2:1. That is a one-line change to this rule. */
.brand::before {
  content: '';
  left: 50%; top: 52%;
  width: 190%; height: 235%;
  translate: -50% -50%;
  background: radial-gradient(ellipse 48% 40% at 50% 50%,
    rgba(255, 252, 245, 0.4), rgba(255, 250, 238, 0.16) 44%, transparent 70%);
  filter: blur(10px);
}
.site-header.is-lit .brand-torch,
.site-header.is-lit .brand::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .brand-torch, .brand::before { transition: none; }
}
.brand-logo {
  width: auto;
  height: clamp(34px, 3.6vw, 46px);
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

/* --- the menu ------------------------------------------------------------ */
.nav { margin-left: auto; }
.nav-list {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.9rem);
  margin: 0;
  padding: 0.42rem 0.6rem;
  list-style: none;
  /* The glass moves to a pseudo-element, and this is the reason: an element
     with backdrop-filter becomes the containing block for any position:fixed
     descendant. With it on .nav-list, the mega panels' `left: 50%` resolved
     against the pill rather than the viewport, and the Courses panel ran 226px
     off the left edge at 1280. The pill looks identical; it just no longer
     captures what is positioned inside it. */
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-list::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(var(--void-rgb), 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
/* Scoped to the top-level row. Unscoped, `.nav-list a` reached every link
   inside the mega panels and overwrote them: it made the demo-class button
   display:block so its badge dropped onto a second line, and its nowrap ran
   every course description across the next column. Both of those looked
   like panel bugs and neither was. */
.nav-list > li > a {
  display: block;
  padding: 0.52em 0.78em;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink-mid);
  text-decoration: none;
  transition: color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.nav-list > li > a:hover,
.nav-list > li > a[aria-current="page"] { color: var(--ink); background: rgba(var(--white-rgb), 0.08); }

/* The phone's sequence pins the plate and the copy as one box. Everywhere
   else the wrapper must not exist as far as layout is concerned — the
   desktop stage positions .steps absolutely inside .stage-pin and an extra
   block between them would break it. */
.mseq-wrap { display: contents; }

/* --- the mega menu --------------------------------------------------------
   Full screen, because of what is in it. The real site has nine courses,
   and nine of anything with a description each is not a dropdown — it is a
   page. Given the room, the panel can do the thing a dropdown cannot: show
   you the work. Pointing at a course swaps the pane on the right for that
   course's still, its name and what it teaches; point at nothing and the
   pane is the demo-class card instead.

   It also fixed a bug outright. Four panels stacked at the same absolute
   position ghosted each other's text through the open one — closed, they
   computed to visibility:hidden and opacity:0 and still painted. One
   full-screen panel at a time cannot overlap anything.

   The panels open on hover AND on focus in CSS alone, so keyboard and no-JS
   both reach them; site.js adds click, tap, the aria state, Escape, the
   close delay and the preview swap.
   -------------------------------------------------------------------------- */
.nav-has { position: static; }
.nav-top {
  display: flex;
  align-items: center;
  gap: 0.34em;
  padding: 0.52em 0.78em;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink-mid);
  transition: color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.nav-top:hover,
.nav-has:hover .nav-top,
.nav-top:focus-visible,
.nav-top[aria-expanded="true"] { color: var(--ink); background: rgba(var(--white-rgb), 0.08); }
.nav-chev {
  width: 0.72em; height: 0.72em;
  flex: none;
  opacity: 0.7;
  transition: transform var(--t-1) var(--ease);
}
.nav-has:hover .nav-chev,
.nav-top[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.mega {
  position: fixed;
  top: var(--mega-top, 5.25rem);
  /* JS writes --mega-x: the button's centre, clamped so neither edge can
     reach a gutter. Fixed rather than absolute because the panel must not be
     boxed by its nav item — anchored to it and centred, Courses ran 226px
     off the left edge at 1280. */
  left: var(--mega-x, 50%);
  translate: -50% 0;
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: clamp(1.35rem, 2.2vw, 2rem);
  border: var(--hair) solid rgba(var(--white-rgb), 0.13);
  border-radius: var(--r-md);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.95);
  /* Opaque. The panel sits over the hero, where a 5.6rem poster face at 16:1
     reads through anything less, and a menu you can read the page through
     looks broken rather than glassy. Over the black: a technical grid at the
     same 115deg the numbers fold rules run at, and a brand wash from the
     corner it opens from. */
  background:
    repeating-linear-gradient(115deg,
      transparent 0 54px,
      rgba(var(--brand-rgb), 0.05) 54px 55px,
      transparent 55px 128px),
    radial-gradient(80% 120% at 20% 0%, rgba(var(--brand-rgb), 0.12), transparent 62%),
    var(--void);
  /* Closed is display:none, and the open state animates with keyframes
     rather than a transition — `transition: display allow-discrete` with
     @starting-style is not needed here and an animation runs on the display
     change by itself.

     This declaration has to stay in THIS rule. Splitting the block to add
     .mega--wide once left display:none applying only to the wide panel, and
     the three small ones defaulted to block: all four rendered at once,
     ghosting their text through each other. That is what "the panels are
     see-through" turned out to be, twice. */
  display: none;
}
/* Courses needs a real width: three columns plus the pane cannot be sized by
   max-content, which collapses the grid to a single column. 58rem is three
   lists, the gaps and a 17rem pane, and it still clears the gutters at 1280
   — the narrowest width this floating panel is used at. */
/* 64rem, not 58: at 58 the three lists were 12rem each and every second
   course name broke onto two lines, which is what made the panel read as
   cramped and left the column heights ragged. */
.mega--wide { width: min(64rem, calc(100vw - 2 * var(--gutter))); }

/* Small panels with more than one labelled group (Courses: VFX & Film / CGI,
   3D & AI / Motion & Design) get the same three-across treatment instead of
   stacking each group under the last — a real width plus a column count on
   .mega-cols, the same pair .mega--wide already sets. */
.mega--sm.mega--cols3 { width: min(40rem, calc(100vw - 2 * var(--gutter))); }
.mega--sm.mega--cols3 .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Two-group panels (About: the institute / work with us) get the same
   treatment at two-across instead of three. */
.mega--sm.mega--cols2 { width: min(30rem, calc(100vw - 2 * var(--gutter))); }
.mega--sm.mega--cols2 .mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* A single flat list (Corporate's three links, Contact's four) reads as one
   long column in a narrow panel; laid out two or three across instead, it
   reads as a menu rather than a scroll. */
.mega-list--grid2,
.mega-list--grid3 { display: grid; gap: 0.2rem 1.25rem; }
.mega-list--grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-list--grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nav-has:hover > .mega,
.site-header:not(.js-menus) .nav-has:focus-within > .mega,
.nav-top[aria-expanded="true"] + .mega { display: block; }

/* the rim light along the top edge */
.mega::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent, rgba(var(--brand-lit-rgb), 0.75) 22%, rgba(var(--brand-lit-rgb), 0.2) 62%, transparent);
}

.mega-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: clamp(1.5rem, 2.8vw, 2.5rem);
  align-items: start;
  animation: mega-in 320ms var(--ease) both;
}
/* the small panels are their links and nothing else: a card with a second
   call to action in each one was three more asks in a menu */
.mega--sm .mega-sheet { grid-template-columns: minmax(0, 1fr); }
.mega-cols { display: grid; gap: clamp(1rem, 2vw, 2rem); }
.mega--wide .mega-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* the columns arrive after the sheet, one after another */
.mega-col { min-width: 0; animation: mega-col-in 340ms var(--ease) both; }
.mega-cols .mega-col:nth-child(1) { animation-delay: 70ms; }
.mega-cols .mega-col:nth-child(2) { animation-delay: 140ms; }
.mega-cols .mega-col:nth-child(3) { animation-delay: 210ms; }
.mega-view { animation: mega-col-in 340ms var(--ease) both; animation-delay: 180ms; }
@keyframes mega-col-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.mega-k {
  margin: 0 0 0.9rem;
  padding-bottom: 0.65rem;
  border-bottom: var(--hair) solid rgba(var(--white-rgb), 0.13);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.mega-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.mega-list a {
  position: relative;
  display: block;
  /* belt and braces: .nav-list is scoped to its own row now, but a menu
     description must wrap whatever else lands on it */
  white-space: normal;
  padding: 0.62rem 0.7rem 0.68rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--t-1) var(--ease), padding-left var(--t-1) var(--ease);
}
/* a tick that draws down the left edge — the same line-draw the header mark
   and the footer sign-off use, at menu scale */
.mega-list a::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45rem; bottom: 0.45rem;
  width: 2px;
  border-radius: 1px;
  background: var(--brand-lit);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 260ms var(--ease);
}
.mega-list a:hover,
.mega-list a:focus-visible,
.mega-list a.is-on { background: rgba(var(--white-rgb), 0.06); padding-left: 1.05rem; }
.mega-list a:hover::before,
.mega-list a:focus-visible::before,
.mega-list a.is-on::before { transform: scaleY(1); }
.mega-list b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.mega-list i {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: var(--fs-nano);
  line-height: 1.45;
  color: var(--ink-mid);
  max-width: 26ch;
}

/* --- the pane ------------------------------------------------------------
   Pointing at a course swaps this for that course's still; pointing at
   nothing puts the demo-class card back. Both states are stacked in the same
   box so the panel never changes size as they swap.
   -------------------------------------------------------------------------- */
/* Tall enough for the taller of its two states. Both are absolutely
   positioned so they can cross-fade in place without the panel resizing
   under the pointer — which means neither contributes height, and the pane
   has to reserve it. The still is 351px at this width; 22.5rem covers it. */
.mega-view { position: relative; min-height: 22.5rem; }
.view-card,
.view-shot {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1.1rem, 1.8vw, 1.4rem);
  border: var(--hair) solid rgba(var(--brand-rgb), 0.3);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(var(--brand-rgb), 0.2), transparent 62%),
    rgba(var(--white-rgb), 0.03);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.view-card.is-on,
.view-shot.is-on { opacity: 1; transform: none; pointer-events: auto; }
.view-p { margin: 0; font-size: var(--fs-nano); line-height: 1.6; color: var(--ink-mid); }
.view-frame {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #0A0C12;
}
.view-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-shot figcaption { display: flex; flex-direction: column; gap: 0.25rem; }
.view-shot b { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.view-shot i { font-style: normal; font-size: var(--fs-nano); line-height: 1.5; color: var(--ink-mid); }
/* it renders at its own size; nothing here overrides the component */
.mega-view .btn { align-self: flex-start; }
.mega-all {
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: var(--hair) solid rgba(var(--gold-rgb), 0.5);
  transition: color var(--t-1) var(--ease);
}
.mega-all:hover { color: var(--ink); }

@media (max-width: 1180px) {
  .mega-sheet, .mega--sm .mega-sheet { grid-template-columns: 1fr; }
  .mega-view { min-height: 0; }
  .view-card, .view-shot { position: relative; }
  .view-shot:not(.is-on) { display: none; }
  .mega--sm.mega--cols3, .mega--sm.mega--cols2 { width: auto; }
  .mega--sm.mega--cols3 .mega-cols,
  .mega--sm.mega--cols2 .mega-cols,
  .mega-list--grid2,
  .mega-list--grid3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-chev, .mega-list a, .mega-list a::before,
  .view-card, .view-shot { transition: none; }
  .mega-col { transition: none; transition-delay: 0s; opacity: 1; transform: none; }
}

/* The one action in the list is marked as one, so eight equal links do not
   bury it — in brand red, the same gradient the page's other primary
   buttons use, so the header reads as part of the same system rather than a
   second accent. White on it measures 4.90:1 at the lit end of the gradient
   and 7.92:1 at the deep end. */
.nav-list .nav-cta {
  color: var(--ink);
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid));
  box-shadow: 0 0 0 1px rgba(var(--white-rgb), 0.1) inset;
}
/* it stays a compact chip — a badge would bloat it inside a nav row — but
   it changes state the way every other button on the page does, so hovering
   anything here means the same thing */
.nav-list .nav-cta {
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.nav-list .nav-cta:hover,
.nav-list .nav-cta:focus-visible {
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), #FFC24A);
}

/* --- call us ------------------------------------------------------------- */
.callbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  text-decoration: none;
  transition: border-color var(--t-1) var(--ease);
}
.callbox-ico {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid));
  color: var(--ink);
}
.callbox-ico svg { width: 1.05rem; height: 1.05rem; }
.callbox-text { display: flex; flex-direction: column; line-height: 1.15; }
.callbox-text b {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.callbox-text i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --brand-lit, not --brand: the deep red measures 3.31:1 on this ground
     and would fail as small text; the lit one clears at 6.23:1 */
  color: var(--brand-lit);
}
.callbox:hover { border-color: rgba(var(--brand-rgb), 0.6); }

/* --- narrow: the list collapses behind a toggle -------------------------- */
.nav-toggle {
  display: none;
  flex: none;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  place-items: center;
  align-content: center;
  justify-items: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  transition: transform var(--t-1) var(--ease), opacity var(--t-1) var(--ease);
}

@media (max-width: 1180px) {
  .nav-toggle { display: grid; }

  /* The call pill and the burger go to the right edge, where a thumb is.
     On desktop it is .nav that carries `margin-left: auto` and pushes
     everything after it across; here .nav is taken out of flow to become
     the drop-down panel, so that auto margin stops pushing anything and
     both controls collapsed back against the logo. The push moves to the
     first item still in flow. */
  .callbox { margin-left: auto; }

  /* The header is fixed and carries no background of its own. On desktop
     that is fine — the nav and the phone number are glass pills, so they
     bring their own ground. Here they are a bare logo and two round
     buttons, and whatever section is scrolling past runs straight under
     them: body copy was passing behind the logo mid-sentence.

     A gradient, not a bar: it fades out by the bottom of the header so the
     page still reads as one surface rather than gaining a chrome strip. */
  .site-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 190%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(var(--void-rgb), 0.95) 0%,
      rgba(var(--void-rgb), 0.82) 42%,
      rgba(var(--void-rgb), 0) 100%);
  }
  .nav { position: fixed; inset: 0 0 auto; margin: 0; padding: 5.5rem 1rem 1.25rem; }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.6rem;
    border-radius: var(--r-md);
  }
  .nav-list > li > a { padding: 0.85em 1em; font-size: var(--fs-sm); }
  /* closed by default; the toggle sets the flag on <html> */
  .nav { visibility: hidden; opacity: 0; transform: translateY(-10px);
         transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease), visibility var(--t-1); }
  html[data-nav-open] .nav { visibility: visible; opacity: 1; transform: none; }
  html[data-nav-open] .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html[data-nav-open] .nav-toggle span:nth-child(2) { opacity: 0; }
  html[data-nav-open] .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- the menus, stacked -------------------------------------------------
     The nav is a fixed column here, so a panel floating over its own row
     would cover the items under it. They become accordions in flow instead.

     grid-template-rows 0fr -> 1fr animates the height without JS measuring
     anything, and it is the row that animates rather than the panel, so the
     content inside is never scaled or clipped mid-transition.

     Hover is explicitly overruled: on a stacked menu opened by tapping, a
     :hover left behind by a tap would leave a panel stuck open. Only
     aria-expanded — which is to say, only a real press — opens one. */
  .nav { max-height: calc(100dvh - 5.75rem); overflow-y: auto; overscroll-behavior: contain; }
  .nav-top {
    width: 100%;
    justify-content: space-between;
    padding: 0.85em 1em;
    font-size: var(--fs-sm);
  }
  .mega,
  .nav-has:hover > .mega,
  .site-header:not(.js-menus) .nav-has:focus-within > .mega {
    position: static;
    translate: none;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    /* the accordion animates its row, so here the panel is always displayed
       and it is the height that opens and closes */
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 320ms var(--ease);
  }
  .nav-top[aria-expanded="true"] + .mega { grid-template-rows: 1fr; }
  /* The child of the animated row needs min-height:0 or the row cannot
     collapse. This selector was still naming .mega-inner after the panel was
     rebuilt around .mega-sheet, so every accordion sat open at full height
     with aria-expanded="false" — the menu looked broken from the first tap. */
  .mega > .mega-sheet { min-height: 0; overflow: hidden; }
  /* No padding on the animated row: padding on it still contributes height,
     so the accordion bottoms out instead of closing. The inset moves in. */
  .mega-sheet,
  .mega--sm .mega-sheet,
  .mega--wide .mega-sheet {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    animation: none;      /* the accordion IS the animation here */
  }
  .mega--wide .mega-cols,
  .mega-cols { grid-template-columns: 1fr; gap: 0; }
  .mega-col { padding: 0.2rem 0 0.7rem 0.75rem; animation: none; opacity: 1; transform: none; }
  .mega-k { margin-bottom: 0.5rem; }
  .mega-list a { padding: 0.7rem 0.6rem 0.75rem; }
  .mega-list i { max-width: none; }
  /* the preview pane is a pointer device's idea: there is no hover to drive
     it, and the card under it is one more ask inside a menu */
  .mega-view { display: none; }
}
@media (max-width: 720px) {
  .callbox-text { display: none; }
  .callbox { padding: 0.5rem; }
}

/* =========================================================================
   FOLD 1 — THE PORTAL
   ========================================================================= */
.stage-pin {
  position: relative;
  background:
    radial-gradient(ellipse 900px 620px at 50% 42%, rgba(var(--ember-rgb), 0.06), transparent 62%),
    linear-gradient(180deg, var(--void) 0%, var(--surface) 100%);
  padding: calc(var(--sp-8) + var(--sp-2)) var(--gutter) var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- the plate ------------------------------------------------------------
   Static path: a normal-flow 16:9 still of the finished shot, so the section
   still reads without JS. Pinned, it becomes the full-bleed backdrop the
   whole scroll scrubs through. */
.plate {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
}
/* On the static path the canvas is never drawn and the still already carries
   the opening image, so the plate would only stack a second hero picture
   above the copy. It is the pinned path's surface and nothing else. */
.plate { display: none; }
.plate-canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.plate-open { display: none; }
.plate-scrim { display: none; }

.scroll-cue {
  display: none;
  position: relative;
  z-index: 4;
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --- glass ---------------------------------------------------------------
   This page carries no scrim. The grade is already dark and desaturated —
   the frame measures 34-65 of 255 across the whole clip — so darkening it
   further would only flatten a picture that is already doing the work.
   Legibility comes from a defined panel instead: its own tint plus a real
   backdrop blur, which normalises whatever is behind it, lava included,
   without touching the rest of the shot.

   The tint is what carries the contrast, not the blur: at 0.42 over the
   brightest part of the plate white type still measures about 12:1, and
   over the darkest closer to 18:1. backdrop-filter is a progressive
   enhancement — where it is unsupported the tint alone still clears AA. */
.glass {
  background: rgba(var(--void-rgb), 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: var(--hair) solid rgba(var(--white-rgb), 0.14);
  border-radius: var(--r-md);
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(var(--white-rgb), 0.09);
}
.glass--quiet {
  background: rgba(var(--void-rgb), 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-color: rgba(var(--white-rgb), 0.1);
}

.bars { display: none; }

.hero {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  max-width: 760px;
  margin-top: var(--sp-5);
  text-align: left;
}

/* the kicker: a drawn rule, then the words. Gold rather than red so it
   belongs to the headline it introduces instead of to the button. */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(var(--void-rgb), 0.9);
}
.hero-kicker-rule {
  width: clamp(28px, 5vw, 62px);
  height: 2px;
  background: var(--gold);
  flex: none;
  transform-origin: 0 50%;
}

/* THE POSTER HEADLINE

   Anton, caps, set tight — one weight by design, so there is no bold to
   reach for and the size does all the shouting.

   The distressed edge is a mask, not a font: an opaque tile with the
   speckles punched out, so its own alpha erodes the letterforms directly
   and no luminance mode is needed.

   The erosion is CLUSTERED, not scattered, and measures 0.8% coverage. An
   even spread of specks over every glyph reads as a noise overlay laid on
   top of the type; real print distress eats the ink in patches, leaving
   clean metal between them.

   0.8% was arrived at by rendering candidates onto the actual headline and
   looking, not by picking a number. Two ways of lightening it were tried:
   dropping the specks' alpha thinned them into a grey haze that read as a
   dirty screen, and cutting the count alone left the survivors evenly
   spread and still noisy. What works is keeping each speck opaque enough to
   read as a chip out of the ink, and having far fewer of them gathered into
   a handful of patches.

   The specks wrap across the tile edges, so the 300px repeat has no seam —
   with clustered patches a hard edge shows in a way uniform noise hides.

   It is inlined as a data URI rather than loaded from assets/. A mask is
   fetched under stricter rules than an image, and from a file:// page
   Chrome refuses the cross-file request outright — and a mask that fails to
   load does not fall back to "no mask", it resolves to fully transparent,
   so the whole headline silently disappears. Inlining removes the request.

   The mask is why this treatment stays on the headline: it eats a few
   percent of every glyph, which a poster face absorbs and a paragraph
   would not survive. */
.hero-h,
.about-h,
.numbers-h,
.watch-h,
.reel-h,
.diaries-h,
.partners-h,
.call-h,
.advantage-h,
.courses-h,
.tales-h,
.step-h,
.work-h,
.faq-h,
.journal-h {
  font-family: var(--font-poster);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #F4F1EA;
  -webkit-mask-image: url("data:image/png;base64,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");
  mask-image: url("data:image/png;base64,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");
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.hero-h em {
  font-style: normal;
  color: var(--gold);
}

/* each line is a clipping window; the span inside is what moves, so the
   words rise out of nothing rather than sliding up from the paragraph */
.hero-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-line > span { display: block; }

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--ink-mid);
  max-width: 48ch;
  text-shadow: 0 2px 16px rgba(var(--void-rgb), 0.9);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* ONE button on this page. Every call to action — hero, courses, work,
   blog, FAQ, the red band — is this shape, this badge and this animation;
   only the resting ground changes. Nine buttons that each hovered a little
   differently read as nine components a reader has to learn separately. */
.btn {
  gap: 0.9em;
  padding: 0.85em 0.85em 0.85em 1.7em;
  border-radius: var(--r-pill);
  /* every variant carries the hairline, transparent unless a ground paints
     it, so the outlined button is not 2px taller than the filled ones */
  border: var(--hair) solid transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform var(--t-1) var(--ease),
    background var(--t-1) var(--ease),
    color var(--t-1) var(--ease),
    border-color var(--t-1) var(--ease),
    box-shadow var(--t-1) var(--ease);
}
/* --- the grounds --------------------------------------------------------- */
.btn-hero,
.btn-primary {
  color: var(--ink);
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid));
  box-shadow:
    0 0 0 1px rgba(var(--white-rgb), 0.1) inset,
    0 18px 44px -18px rgba(var(--brand-rgb), 0.85);
}
.btn-ghost {
  color: var(--ink);
  background: rgba(var(--white-rgb), 0.03);
  border-color: rgba(var(--white-rgb), 0.22);
}
/* on the red band the plate has to be white — gold on that red is 2.35:1 */
.call-btn {
  color: #0A0A0C;
  background: #FFFFFF;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
}
.call-btn .btn-ico { background: var(--brand-mid); color: #FFFFFF; }
/* The icon is a badge, not a glyph: a filled disc with the arrow knocked
   out of it. The previous arrow was drawn from borders — a 2px bar plus a
   rotated square for the head — which never landed on a whole pixel and
   rendered soft at one size and lopsided at another. An SVG stroke with
   round caps is crisp at every size and needs no hand-tuning.

   Two copies of the arrow sit inside a clipped disc. On hover the pair
   slides one full width, so the first leaves to the right as the second
   arrives from the left — the arrow reads as travelling rather than just
   nudging, and the disc is never empty mid-transition. */
.btn-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.35em;
  height: 2.35em;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #F4F1EA;
  color: var(--brand-deep);
  transition: transform var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.btn-ico svg {
  grid-area: 1 / 1;
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.42s var(--ease);
}
.btn-ico svg:nth-child(1) { transform: translateX(0); }
.btn-ico svg:nth-child(2) { transform: translateX(-190%); }

/* Hover inverts the whole control rather than just lifting it: the fill goes
   gold, the label and the badge go black. Black on the gold measures 9.63:1
   and gold on the black badge the same, so the swapped state is as legible
   as the resting one — the colours simply trade places.

   `color` carries both the label and the arrow: the SVG is stroked with
   currentColor, so it follows the text without a rule of its own. */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), #FFC24A);
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(var(--void-rgb), 0.14) inset,
    0 18px 44px -18px rgba(var(--gold-rgb), 0.9);
}
.btn:hover .btn-ico,
.btn:focus-visible .btn-ico {
  transform: scale(1.06);
  background: var(--void);
  color: var(--gold);
}
/* the arrow travels: one leaves right as the next arrives from the left */
.btn:hover .btn-ico svg:nth-child(1),
.btn:focus-visible .btn-ico svg:nth-child(1) { transform: translateX(190%); }
.btn:hover .btn-ico svg:nth-child(2),
.btn:focus-visible .btn-ico svg:nth-child(2) { transform: translateX(0); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn-ico, .btn-ico svg { transition: none; }
}

/* --- the pipeline steps ---------------------------------------------------- */
.steps {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 700px;
  margin-top: var(--sp-6);
}
.step { display: flex; flex-direction: column; gap: var(--sp-1); }
.step + .step { margin-top: var(--sp-6); }
/* Size and leading only. The family, weight, case, colour and the distress
   mask all come from the shared heading rule above, which is the point:
   this was the one heading on the page in a different typeface. */
.step-h {
  font-size: var(--fs-d2);
  line-height: var(--lh-display);
}
.step-p { font-size: var(--fs-body); color: var(--ink-mid); max-width: 46ch; }


/* --- the step label ------------------------------------------------------
   A gold capsule with black type, replacing the dotted red eyebrow used
   elsewhere. The dot is suppressed rather than removed from .eyebrow itself,
   because that base class is still doing its original job in the hero and
   the numbers section.

   Black on the gold measures 9.63:1, and because the label now carries its
   own background it needs no text halo — the capsule is doing that work, so
   the shadow moves to the box as a drop-shadow instead. */
.step .eyebrow {
  align-self: flex-start;
  padding: 0.42em 0.85em 0.38em;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--void);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-shadow: none;
}
.step .eyebrow::before { display: none; }

.ticks { display: none; }


/* =========================================================================
   PINNED STAGE — the breakdown

   The plate goes full-bleed and the copy sits over its left third. That
   split is not arbitrary: the action in the footage is composed right of
   frame, and from the moment the fighters land the right half of the picture
   measures 1.7-2x brighter than the left. The type is placed where the shot
   is already dark, so the scrim has to do very little work.
   ========================================================================= */
.stage.is-pinned .stage-pin {
  height: 100vh;
  overflow: hidden;
  padding: 0;
  display: block;
  background: var(--void);
}

.stage.is-pinned .plate {
  display: block;
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  /* the poster is dropped here: the canvas covers the box from the first
     painted frame, and leaving it would show through the green screen's
     darker corners */
  background: var(--void);
}
/* The plate pulls back across the scroll — site.js writes --plate-scale.
   It only ever scales UP from 1, never below: object-fit:cover means 1.0 is
   exactly the covering size, so anything under it would show the page
   through the edges. Composited on the GPU, so the zoom costs nothing on top
   of the frame swapping already happening. */
.stage.is-pinned .plate-canvas {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--plate-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The opening still, laid over the canvas and carrying the same cover fit
   and the same pull-back scale, so the two are registered to the pixel and
   the hand-off is a change of sharpness and nothing else. It is dropped as
   soon as the scroll moves off the first frame — js writes .is-running —
   because from there the canvas is the thing being animated and a still on
   top of it would be a second picture to composite for no reason. */
.stage.is-pinned .plate-open {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--plate-scale, 1));
  transform-origin: 50% 50%;
  z-index: 1;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.stage.is-pinned .plate.is-running .plate-open { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .stage.is-pinned .plate-open { transition: none; }
}

/* The scrim is back, and it is the footage that brought it back. The note
   that used to sit here said the plate was already graded down and the type
   could sit straight on it — true of the old clip, which measured 24-47 of
   255 across the left half of its opening beat. This one opens on a lit
   green stage: measured against it the headline came out at 2.55:1, the
   lead at 2.45:1 and the gold kicker at 1.34:1, all of them under.

   So it washes the copy side and only the copy side. It is at full strength
   to 30%, half gone by 46% and completely gone by 62% — which is where the
   action lives in this clip and where the picture has to stay open. The
   vertical pass is for the header, which sits on the plate too. */
.stage.is-pinned .plate-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: none;                /* site.js drives its opacity per frame */
  background:
    linear-gradient(90deg,
      rgba(var(--void-rgb), 0.94) 0%,
      rgba(var(--void-rgb), 0.9) 30%,
      rgba(var(--void-rgb), 0.52) 46%,
      rgba(var(--void-rgb), 0) 62%),
    linear-gradient(180deg, rgba(var(--void-rgb), 0.55), transparent 20%);
}

.stage.is-pinned .hero {
  position: absolute;
  top: 50%;
  left: clamp(1.5rem, 6vw, 7rem);
  /* --shift is written by site.js; the centring stays here so the two
     cannot disagree */
  transform: translateY(-50%) translate3d(0, var(--shift, 0px), 0);
  width: min(56%, 780px);
  max-width: none;
  margin: 0;
  padding: 0;
  z-index: 5;
  gap: var(--sp-3);
}
/* with no panel to fit inside, the headline can take the size it wants */
.stage.is-pinned .hero-h { font-size: clamp(2.9rem, 6vw, 5.6rem); }
.stage.is-pinned .hero-lead { font-size: var(--fs-body); max-width: 44ch; }

/* Every animated piece starts hidden, but only where GSAP will actually run
   — .is-pinned is the same gate the timeline uses. On the static path they
   are simply visible, so a phone never waits on a timeline that never runs. */
.stage.is-pinned [data-hero-k],
.stage.is-pinned [data-hero-lead],
.stage.is-pinned [data-hero-cta] { opacity: 0; }
.stage.is-pinned .hero-kicker-rule { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .stage.is-pinned [data-hero-k],
  .stage.is-pinned [data-hero-lead],
  .stage.is-pinned [data-hero-cta] { opacity: 1; }
  .stage.is-pinned .hero-kicker-rule { transform: scaleX(1); }
}

/* Anchored to the bottom-left corner rather than centred. The steps stack
   in the same place, so each is pinned to the container's BOTTOM edge and
   grows upward — anchoring their tops instead would push a three-line step
   down off the screen while a two-line one sat short of the mark. */
.stage.is-pinned .steps {
  position: absolute;
  top: auto;
  bottom: 120px;
  left: 120px;
  width: min(46%, 640px);
  max-width: none;
  margin: 0;
  transform: none;
}
.stage.is-pinned .step {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0; right: 0;
  opacity: 0;
  padding: 0;
  gap: 0.55rem;
  will-change: opacity, transform;
}
.stage.is-pinned .step + .step { margin-top: 0; }

/* the eyebrow and the headline each hold one line; only the description is
   allowed to wrap, and only to two */
.stage.is-pinned .step .eyebrow {
  white-space: nowrap;
  /* separation from the plate comes from the box, not the glyphs */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}
/* Same poster face as the hero, so the page speaks in one voice — Anton,
   caps, and the identical distress tile. The mask is safe at this size: at
   0.8% coverage the specks are a pixel or two and a 40px cap absorbs them.
   Much below this it would start eating strokes, which is why the body copy
   and the eyebrows stay on the UI face. */
.stage.is-pinned .step-h {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.9vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #F4F1EA;
  white-space: nowrap;
  -webkit-mask-image: url("data:image/png;base64,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");
  mask-image: url("data:image/png;base64,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");
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
/* Legibility without a panel: a layered halo carried by the glyphs
   themselves. Three shadows — a tight one for the edge, a mid one for
   separation, a wide soft one for the glow — darken only the pixels around
   each letter, so the copy survives sitting over live lava while the frame
   stays completely open. A box or a wash would both put a shape on the
   picture; this puts it on the text.

   The body copy also goes white here rather than --ink-mid: mid-grey has
   nowhere to go against fire, and the size difference alone is enough to
   keep it subordinate to the heading. */
.stage.is-pinned .step-p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
  max-width: 54ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* THE DASH NAV

   Sits under the steps and carries the step number. Each dash owns its own
   figure, hidden until that step is the live one — so the count is revealed
   by the indicator already tracking progress instead of being printed a
   second time above the copy.

   --on and --fill are both written per frame by render(): --on is the step's
   own opacity curve, so the number and its copy arrive together and can
   never disagree; --fill is how far through that step the reader is. */
.stage.is-pinned .ticks {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  position: absolute;
  left: 120px;
  bottom: 62px;
  margin: 0; padding: 0;
  list-style: none;
  z-index: 4;
}
.stage.is-pinned .ticks li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.stage.is-pinned .ticks b {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  /* passed steps hold at 0.42, the live one goes to full — so the tally
     stays readable without competing with the step being read */
  opacity: calc(var(--on, 0) * 0.42 + var(--cur, 0) * 0.58);
  /* rises as it arrives, then settles once the step is reached */
  transform: translate3d(0, calc((1 - var(--on, 0)) * 8px), 0);
  transition: none;
}
.stage.is-pinned .ticks span {
  display: block;
  width: 42px; height: 2px;
  background: rgba(var(--white-rgb), 0.2);
  overflow: hidden;
}
.stage.is-pinned .ticks span::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: var(--gold);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
  /* passed dashes stay filled but recede, matching their figures */
  opacity: calc(0.5 + 0.5 * var(--cur, 0));
}


/* the shared halo — see the note on .step-p above */
.stage.is-pinned .step-h,
.stage.is-pinned .step-p,
.stage.is-pinned .ticks b {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 10px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(0, 0, 0, 0.7);
}
/* the dashes need the same separation, and a shadow cannot reach a
   background box — so they carry it as a drop-shadow filter instead */
.stage.is-pinned .ticks li { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)); }
.stage.is-pinned .ticks span { background: rgba(var(--white-rgb), 0.34); }

.stage.is-pinned .scroll-cue {
  display: block;
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  margin: 0;
}

/* =========================================================================
   PHONE / NARROW — static path only
   ========================================================================= */
@media (max-width: 720px) {
  .chapter + .chapter { margin-top: var(--sp-5); }
  .chapter-h { font-size: 1.5rem; }
}

/* =========================================================================
   FOLD 3 — THE NUMBERS

   Same parts as the stage: gold capsule, poster headline, hairline rule, one
   left column. Top padding is deliberately short — the band above is the
   divider, so a full fold of air under it would read as the two being
   unrelated.
   ========================================================================= */
.numbers {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background:
    radial-gradient(ellipse 70% 60% at 18% 34%, rgba(var(--brand-rgb), 0.14), transparent 62%),
    linear-gradient(180deg, var(--void) 0%, #0A0D14 46%, var(--void) 100%);
  overflow: hidden;
}
.numbers-rules {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg,
      transparent 0 62px,
      rgba(var(--brand-rgb), 0.16) 62px 63px,
      transparent 63px 150px);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 26% 50%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 26% 50%, black 0%, transparent 78%);
  pointer-events: none;
}

.numbers-inner {
  position: relative;
  z-index: 2;
  max-width: var(--page);
  margin: 0 auto;
  /* the argument on the left, the evidence on the right. The old layout ran
     the headline full width and put four figures in a row under it, which
     left the right half of the fold empty and gave each figure a column too
     narrow to say anything in. */
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}
.numbers-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* the same capsule the steps use, so the two sections are visibly kin */
.numbers-tag {
  align-self: flex-start;
  margin: 0;
  padding: 0.42em 0.85em 0.38em;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--void);
  font-family: var(--font-ui);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

/* sized so "Our work speaks through" holds on one line in this column: at
   3.4rem it wrapped to three lines and broke a headline written as two */
.numbers-h {
  font-size: clamp(1.8rem, 3.5vw, 2.9rem);
  line-height: 1.0;
  margin: 0;
}
.numbers-h em {
  font-style: normal;
  color: var(--brand-lit);
}
.numbers-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.numbers-line > span { display: block; }
.numbers-p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink-mid);
  max-width: 34ch;
}
.numbers-cta { margin-top: 0.25rem; }

/* --- the sheet ------------------------------------------------------------
   Two by two, ruled. The dividers are absolutely positioned elements rather
   than borders on the cells: a border cannot be animated from nothing, and
   these draw themselves before the figures count in — the same line-draw the
   header mark and the footer sign-off use.
   -------------------------------------------------------------------------- */
.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.stats-rule {
  position: absolute;
  background: var(--rule-quiet);
  pointer-events: none;
}
.stats-rule--top { left: 0; right: 0; top: 0; height: 1px; transform-origin: left center; }
.stats-rule--mid { left: 0; right: 0; top: 50%; height: 1px; transform-origin: left center; }
/* without it the sheet is open at the bottom and reads as unfinished */
.stats-rule--bot { left: 0; right: 0; bottom: 0; height: 1px; transform-origin: left center; }
.stats-rule--col {
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform-origin: center top;
}

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.5rem, 2.8vw, 2.3rem) 0;
}
/* the inner edge of the right-hand column clears the divider */
.stat:nth-child(even) { padding-left: clamp(1.4rem, 2.6vw, 2.2rem); padding-right: 0; }
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(70% 80% at 20% 20%, rgba(var(--brand-rgb), 0.14), transparent 68%);
  transition: opacity var(--t-2) var(--ease);
}
.stat:hover::after { opacity: 1; }
.stat > * { position: relative; z-index: 1; }

.stat-no {
  font-family: var(--font-poster);
  font-size: var(--fs-nano);
  line-height: 1;
  letter-spacing: 0.06em;
  /* 0.3 measured 2.73:1 — under the bar. This is an index the reader uses
     to count the cells, not a watermark like the one in About, so it has to
     clear small text: 0.5 puts it at 4.8:1 and it still reads as quiet
     beside an 18.8:1 label. */
  color: rgba(var(--white-rgb), 0.5);
}
.stat-value {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--brand-lit);
  /* the digits change every frame while counting; a tabular figure stops the
     label beneath from jittering as each numeral's width varies */
  font-variant-numeric: tabular-nums;
}
.stat-value i { font-style: normal; }
.stat-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink);
}
/* the line that makes the figure above it mean something. Without it a
   stats row is decoration; with it, each number names its own evidence. */
.stat-note {
  margin: 0;
  font-size: var(--fs-nano);
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 30ch;
}

@media (max-width: 1000px) {
  /* the argument sits above the evidence rather than beside it */
  .numbers-inner { grid-template-columns: 1fr; }
  .numbers-p { max-width: 52ch; }
}
@media (max-width: 620px) {
  /* Two by two, which is the shape the sheet was drawn as. Both dividers
     work again here — the column rule has a column to divide and the mid
     rule falls between the rows rather than between cells two and three —
     so they come back rather than being replaced by borders.

     Everything inside comes down a size with them. A cell is about 153px of
     text at 390px, and the desktop figure at 41px with a 13.8px tracked
     label does not fit that: the label wrapped under its own number. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 1.1rem 0.9rem 1.35rem 0; }
  .stat:nth-child(even) { padding-left: 0.9rem; padding-right: 0; }
  .stat-value { font-size: 2.1rem; }
  /* 0.76 and 0.75, not 0.74 and 0.72: those compute to 11.8px and 11.5px
     and this file sets a 12px floor for anything with words in it. Third
     time I have had to hold my own rule after sizing something down. */
  .stat-label { font-size: 0.76rem; letter-spacing: 0.09em; }
  .stat-note { font-size: 0.75rem; line-height: 1.5; max-width: none; }
  .stat-no { font-size: 0.66rem; }
}

/* =========================================================================
   THE BAND

   One rule on the page's own black. A red bar across the full width read as
   a slab dropped between two sections; on black the band belongs to the
   flow, and the red is in the type where it carries meaning. Gold appears
   only in the separators — a few hundred pixels of it across the width.
   ========================================================================= */
.belt-band {
  position: relative;
  background: var(--void);
  overflow: hidden;
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.07);
  border-bottom: var(--hair) solid rgba(var(--white-rgb), 0.07);
}
.belt-band .belt { padding: clamp(0.7rem, 1.5vw, 1.15rem) 0; }
.belt-band .belt-word {
  font-family: var(--font-poster);
  font-size: clamp(1.05rem, 2.2vw, 1.85rem);
  font-weight: 400;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  padding: 0 0.5em;
}
.belt-band .belt-dot { font-size: 0.72em; padding: 0 0.15em; }

.belt--dark { background: var(--void); }
.belt--dark .belt-word { color: var(--brand-lit); }   /* 6.23:1 on the black */
.belt--dark .belt-word:nth-of-type(3n+2) { color: var(--ink); }
.belt--dark .belt-dot { color: var(--gold); }

/* the second row runs the other way — same keyframe, reversed, so the two
   stay locked to one definition */
.belt-band [data-belt-rev] .belt-track { animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .belt-band [data-belt-rev] .belt-track { animation: none; }
}

/* =========================================================================
   FOLD 4 — THE WALKTHROUGH
   ========================================================================= */
.watch {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background: linear-gradient(180deg, var(--void) 0%, #0A0D14 55%, var(--void) 100%);
}
.watch-inner {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.watch-h {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
}
.watch-lead {
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--ink-mid);
  max-width: 56ch;
}

/* --- the two clips -------------------------------------------------------
   30/70, bottom-aligned. Equal heights would have been tidier but it costs
   the tour a third of its width for a clip that is not the point of the
   section, so the sidebar is deliberately shorter and its tag and title
   fill the space above it — which is what keeps the bottom alignment from
   reading as a hole in the top-left corner.
   ------------------------------------------------------------------------ */
.watch-media {
  width: 100%;
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: end;
}
.watch-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 1vw, 0.8rem);
}
.watch-side-tag {
  margin: 0;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.watch-side-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* The stage exists only so the phone layout has something to hang the
   rotated word off. At desktop width it is a plain full-width box and the
   clip inside it behaves exactly as it did before. */
.watch-side-stage {
  position: relative;
  width: 100%;
}
.watch-side-vert { display: none; }

/* --- the player facade ---------------------------------------------------- */
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
  border: var(--hair) solid var(--rule);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.player-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-3) var(--ease), filter var(--t-2) var(--ease);
}
.player::after {
  /* keeps the caption legible over whatever the poster frame happens to be */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(var(--void-rgb), 0.85));
  pointer-events: none;
}

.player-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 92px);
  height: clamp(64px, 7vw, 92px);
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid));
  box-shadow: 0 18px 50px -18px rgba(var(--brand-rgb), 0.95);
  transition: transform var(--t-1) var(--ease), filter var(--t-1) var(--ease);
  z-index: 2;
}
.player-play svg { width: 38%; height: 38%; margin-left: 6%; }
.player:hover .player-play { transform: translate(-50%, -50%) scale(1.07); filter: brightness(1.08); }
.player:hover .player-thumb { transform: scale(1.03); filter: brightness(1.05); }
.player-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.player-meta {
  position: absolute;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(0.9rem, 2vw, 1.6rem);
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}
.player-meta span {
  font-family: var(--font-poster);
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.player-meta i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* once the real player is in, the facade's furniture must not sit over it */
.player.is-live .player-play,
.player.is-live .player-meta,
.player.is-live::after { display: none; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the sidebar clip carries its title above it, so it needs neither the
   caption scrim nor a disc sized for a video three times its width */
.player--short { aspect-ratio: 1; margin-top: 0; }
.player--short::after { display: none; }
.player--short .player-play { width: clamp(46px, 4.4vw, 66px); height: clamp(46px, 4.4vw, 66px); }

@media (prefers-reduced-motion: reduce) {
  .player-thumb, .player-play { transition: none; }
}
@media (max-width: 860px) {
  /* The tour first — it is what the heading promised. Stacked, a square
     clip at full width is nearly twice the area of a 16:9 one, so the
     sidebar has to be capped or the running order inverts. */
  .watch-media { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); }

  /* The cap moves off the column and onto its contents, so the clip keeps
     its left edge and its size while the column itself runs the full
     width — which is what gives the rotated word a right edge to sit on.
     The title keeps the same measure it had, so its wrapping does not
     move. */
  .watch-side { order: 2; max-width: none; }
  .watch-side-h { max-width: min(62%, 280px); }
  .watch-side-stage { width: 100%; }
  .player--short { width: min(62%, 280px); }

  /* The "Short" label goes: the rotated word says the same thing at ten
     times the size, and two labels for one clip is one too many. The
     player's own aria-label still names it a short for anyone not seeing
     either. */
  .watch-side-tag { display: none; }

  /* Set flush right, across from the clip, reading bottom to top. Gold at
     low alpha — it is a mark on the page rather than a line to be read, so
     it takes the brand colour but not its weight. */
  .watch-side-vert {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: var(--font-poster);
    font-size: clamp(3.4rem, 19vw, 5.4rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.22);
    pointer-events: none;
    user-select: none;
  }

  /* The caption comes off the picture and sits under it.

     Overlaid, it was landing on top of the thumbnail's own baked-in title —
     "INSIDE THE VFX INSTITUTE" straight through "BEST VFX INSTITUTE IN
     MUMBAI" — and neither was readable. There is room under the frame on a
     phone and none inside it, because a 16:9 poster at 350px leaves the
     lower third to the artwork. */
  .player { overflow: visible; }
  .player-meta {
    position: static;
    margin-top: 0.85rem;
    /* The card grows to hold the caption once it is in flow, so the
       caption is inside the card's border rather than under it — and with
       no padding of its own it was set hard against the left edge and the
       bottom rule. The picture is flush by design; type never is. */
    padding: 0 clamp(0.85rem, 3.5vw, 1.15rem) clamp(0.9rem, 3vw, 1.1rem);
    gap: 2px;
    text-align: left;
  }
  /* the scrim existed to seat the caption; with the caption outside, it is
     just darkening the bottom of the picture */
  .player::after { display: none; }
}

/* =========================================================================
   FOLD 5 — WORK BY OUR STUDENTS

   The reel runs through a television.

   The set stands OVER the band. It is a sibling of .strip rather than a
   child, because .strip must clip horizontally to hide the running track
   and CSS gives no way to clip one axis while letting the other overflow —
   overflow-x: hidden forces overflow-y to auto. Outside it, the television
   can stand proud of the film top and bottom without the band growing a
   hundred pixels of padding to contain it.

   That is also why the set carries its own still. A picture large enough
   to fill this screen cannot live in the track: it would be cut off at the
   band's edge. So the strip stays a strip — uniform cells, all in black
   and white, running past — and the television is the only thing in
   colour. --screen is the aperture's width and the set is sized at
   --screen / 0.944444, the bezel being an even 28 units of 1008.

   Cells are 16:9 because that is what the player fills. These films are
   finished in scope and carry their own bars, and inside a television that
   is not a defect, it is what a widescreen film looks like on a set.
   ========================================================================= */
/* Every dimension in this fold derives from three numbers, declared once
   here: the cell width, the screen width, and the band's padding. --proud
   is how far the set stands out past the band top and bottom, and it is
   what the copy above and the caption below are held clear by — so the
   television can be resized without anything colliding with it. */
.reel {
  --fw: clamp(190px, 19vw, 290px);
  --screen: clamp(260px, 41vw, 640px);
  --pad-y: 34px;
  --band-h: calc(var(--fw) * 9 / 16 + 2 * var(--pad-y) + 2 * var(--hair));
  --tv-h: calc(var(--screen) * 0.621374);          /* 591.5/1008 of its width */
  --proud: calc((var(--tv-h) - var(--band-h)) / 2);
  position: relative;
  padding: var(--fold-y) 0;
  background: linear-gradient(180deg, var(--void) 0%, #0A0810 50%, var(--void) 100%);
  overflow: hidden;
}
/* No bottom margin: it would collapse against the stage's, and the stage
   needs the larger of the two plus the gap, not the larger of the two. */
.reel-head {
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.reel-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.reel-h {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
}
.reel-lead { margin: 0; font-size: var(--fs-lead); color: var(--ink-mid); max-width: 52ch; }

/* --- step controls -------------------------------------------------------- */
.reel-nav { display: flex; gap: 0.6rem; flex: none; padding-bottom: 0.35rem; }
.reel-btn, .nav-btn {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: var(--hair) solid rgba(var(--white-rgb), 0.22);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease);
}
.reel-btn svg, .nav-btn svg { width: 20px; height: 20px; }
/* same hover contract as the hero button: gold plate, black mark */
.reel-btn:hover, .reel-btn:focus-visible,
.nav-btn:hover, .nav-btn:focus-visible { background: var(--gold); border-color: var(--gold); color: #0A0A0C; }
.reel-btn:focus-visible, .nav-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* --- the band ------------------------------------------------------------- */
.strip {
  /* only what the perforations need — the set's height is not this band's
     problem any more */
  position: relative;
  padding: var(--pad-y) 0;
  background: #07070B;
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.09);
  border-bottom: var(--hair) solid rgba(var(--white-rgb), 0.09);
  overflow: hidden;
  /* cells arrive and leave rather than being guillotined at the edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* sprocket holes, one repeating gradient per margin */
.strip::before, .strip::after {
  content: '';
  position: absolute;
  left: -20px; right: -20px;
  height: 20px;
  background: repeating-linear-gradient(90deg,
    transparent 0 9px,
    rgba(var(--white-rgb), 0.13) 9px 22px,
    transparent 22px 31px);
  z-index: 2;
  pointer-events: none;
}
.strip::before { top: 0; }
.strip::after  { bottom: 0; }

.strip-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  will-change: transform;
  transition: transform 820ms var(--ease-soft);
}
/* set by JS for the single frame where the loop jumps back a whole set */
.strip.is-cut .strip-track { transition: none; }

.frame {
  position: relative;
  display: block;
  flex: none;
  width: var(--fw);
  text-decoration: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;
  /* the whole cell greys out — it is one strip of film, not a gallery */
  filter: grayscale(1) contrast(1.05) brightness(0.62);
  opacity: 0.9;
}
/* No highlight on the centred cell: it is directly behind the television,
   so anything done to it is spent on pixels nobody can see. What the strip
   has to be is even. */
.frame-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
/* YouTube's hqdefault is a 480x360 canvas with the 16:9 frame letterboxed
   into the middle 270 rows (measured, all three IDs). Pulling the image up
   by 9.375% of the box WIDTH — percentage margins resolve against width —
   lands that band exactly in the box. hqdefault is the largest size that
   exists for all three: maxres and sd both 404 on the Constitution edit,
   and mqdefault is only 320px, which visibly softens at this size. */
.frame-img img { display: block; width: 100%; height: auto; margin-top: -9.375%; }

/* --- the set -------------------------------------------------------------- */
/* the band is pushed down by the set's overhang, so the gap you see above
   the television is the head's own margin and not a collision waiting to
   happen at a narrower width */
.reel-stage { position: relative; margin-top: calc(var(--proud) + clamp(2rem, 4vw, 3.25rem)); }
.tv {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--screen) / 0.944444);
  aspect-ratio: 1008 / 591.5;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: rgba(var(--white-rgb), 0.82);
  pointer-events: none;      /* the strip either side stays clickable */
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.8));
}
.tv-line { display: block; width: 100%; height: 100%; }
/* read straight off the viewBox: 28/1008, 28/591.5, 952/1008, 535.5/591.5 */
.tv-screen {
  position: absolute;
  left: 2.777778%; top: 4.733728%;
  width: 94.444444%; height: 90.532544%;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  pointer-events: auto;
}
/* Same crop as the film cells: hqdefault is a 480x360 canvas with the 16:9
   frame letterboxed into the middle 270 rows, and -9.375% of the box WIDTH
   lands that band exactly in a 16:9 aperture. */
.tv-still {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: auto;
  margin-top: -9.375%;
  display: block;
  transition: opacity 260ms var(--ease);
}
.tv.is-turning .tv-still { opacity: 0; }
.tv-screen.is-live .tv-still { display: none; }
.tv-play {
  position: absolute;
  inset: 0;
  --mark: clamp(38px, 3.2vw, 54px);
  --cue-gap: 14px;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: transparent;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.tv-mark {
  grid-area: 1 / 1;
  display: block;
  line-height: 0;
  opacity: 0.92;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75))
          drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
  transition: opacity var(--t-1) var(--ease), scale var(--t-1) var(--ease);
}
.tv-mark svg { display: block; height: var(--mark); width: auto; }
.tv-cue {
  grid-area: 1 / 1;
  font-family: var(--font-ui);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(calc(var(--mark) / 2 + var(--cue-gap)));
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease);
  pointer-events: none;
}
.tv-play:hover { --cue-gap: 21px; }
.tv-play:hover .tv-mark, .tv-play:focus-visible .tv-mark { opacity: 1; scale: 1.08; }
.tv-play:hover .tv-cue,  .tv-play:focus-visible .tv-cue  { opacity: 1; }
.tv-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
/* once the real player is in, the facade's furniture must not sit over it */
.tv-screen.is-live .tv-play { display: none; }
.tv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- what the set is showing ---------------------------------------------- */
.reel-now {
  margin: calc(var(--proud) + clamp(1.1rem, 2.2vw, 1.8rem)) auto 0;
  padding: 0 var(--gutter);
  max-width: var(--page);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.reel-now b {
  font-family: var(--font-poster);
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.reel-now i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.reel-now.is-turning b, .reel-now.is-turning i { opacity: 0; }
/* the section's own way out: having watched a student film, the next move
   is to ask about the course, so the ask sits directly under the caption */
.reel-more { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: flex; justify-content: center; }
/* the same ask under the diaries wall, and beside the About socials: every
   fold that makes a case ends with the move it is asking the reader to make */
.diaries-more { margin-top: clamp(1.8rem, 3.4vw, 2.8rem); display: flex; justify-content: center; }
.about-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.reel-now b, .reel-now i { transition: opacity 300ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .strip-track, .tv-still, .tv-mark, .tv-cue,
  .reel-now b, .reel-now i { transition: none; }
}
@media (max-width: 860px) {
  /* The arrows move from beside the heading to under the video. .reel-head
     carries no styling of its own by this point (the copy and the nav are
     what render); making it display:contents drops its box and hands its
     two children to .reel's own grid, so they can be reordered against the
     stage and caption below them without duplicating the buttons — the
     prev/next JS looks up a single [data-strip-prev] element, so there can
     only ever be one pair. */
  /* minmax(0, 1fr), not plain 1fr: the strip's own track runs to
     max-content (fifteen frames wide, clipped only by .strip's own
     overflow:hidden) and a bare 1fr track sizes to fit that content's
     intrinsic width rather than the container — the whole row blows out
     to the strip's full unclipped width. min-width: 0 on the stage closes
     the same hole one level down, in case anything is ever added there
     that isn't already clipping itself the way .strip does. */
  .reel { display: grid; grid-template-columns: minmax(0, 1fr); }
  .reel-head { display: contents; }
  /* carries .reel-head's old horizontal padding — display:contents drops
     that box, and with it the gutter that used to keep the tag, heading
     and lead off the edges. Every other section's copy block gets this
     from its own head; .reel-copy never needed it of its own until now,
     because .reel-head used to supply it. */
  .reel-copy { order: 1; padding: 0 var(--gutter); }
  .reel-stage { order: 2; min-width: 0; }
  .reel-now { order: 3; }
  .reel-nav {
    order: 4;
    justify-self: center;
    margin: clamp(1.1rem, 2.6vw, 1.75rem) 0 0;
  }
  .reel-more { order: 5; }
  .reel {
    --fw: clamp(130px, 32vw, 200px);
    --screen: clamp(230px, 74vw, 420px);
    --pad-y: 22px;
  }
  /* the perforations scale with the band, or a phone gets a dozen big
     white blocks where a strip of film should have a fine edge */
  .strip::before, .strip::after {
    height: 13px;
    background: repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(var(--white-rgb), 0.13) 6px 15px,
      transparent 15px 21px);
  }
  .reel-btn { width: 46px; height: 46px; }
}

/* =========================================================================
   FOLD 6 — PLACEMENT DIARIES

   Six vertical clips on one flat baseline, drifting. An earlier pass sat
   them on a shallow arc; at that width a curve that gentle does not read as
   a curve, it reads as cards that failed to line up.

   The motion is a continuous drift rather than a step, which is also what
   the Elementor original does — autoplay_speed 0 with speed 5000 is
   Swiper's marquee idiom, not a stepping carousel. That matters twice over
   here: the film band in the fold directly above steps, so a second
   stepping carousel under it would read as the same widget twice.

   Hovering one card dims the other five and stops the drift. That is the whole interaction:
   with six faces competing at once, the thing the design has to do is let
   you look at one.

   Card motion is written to --rise, never to `transform` — the base
   transform belongs to the stylesheet, and JS writing transform directly
   is what wiped the layout out three times in this build's earlier folds.
   ========================================================================= */
.diaries {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(var(--brand-rgb), 0.16), transparent 62%),
    var(--void);
  overflow: hidden;
}
.diaries-head {
  max-width: var(--page);
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.diaries-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.diaries-nav { display: flex; gap: 0.6rem; flex: none; padding-bottom: 0.35rem; }
.diaries-h {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
}
.diaries-lead { margin: 0; font-size: var(--fs-lead); color: var(--ink-mid); max-width: 56ch; }

.diary-wall {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  /* room for the hover lift and its shadow, which would otherwise be
     guillotined by the overflow that makes the drift possible */
  padding: 22px 0;
  overflow: hidden;
  /* cards leave and arrive rather than being cut off at the container edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.diary-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.7rem, 1.4vw, 1.15rem);
  width: max-content;
  will-change: transform;
}

.diary {
  flex: none;
  width: clamp(200px, 19vw, 300px);
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
  border: var(--hair) solid var(--rule);
  /* both of these are custom properties so the entry animation can drive
     them without ever owning `transform` or `opacity` outright — the hover
     dim below still wins on opacity, and the arc survives */
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--rise, 0px), 0);
  /* The hover lift is the `scale` property, not a scale() inside transform.
     GSAP drives --rise through transform every frame on entry, and a
     transition on transform would fight it — the browser re-targets each
     frame and the rise turns to mush. `scale` is its own animatable
     property, so the two never touch. */
  scale: 1;
  transition: opacity var(--t-2) var(--ease), border-color var(--t-1) var(--ease),
              box-shadow var(--t-2) var(--ease), scale var(--t-2) var(--ease);
}
.diary-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-3) var(--ease), filter var(--t-2) var(--ease);
}
/* carries the caption over whatever the poster frame happens to be */
.diary::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  background: linear-gradient(180deg, transparent, rgba(var(--void-rgb), 0.55) 45%, rgba(var(--void-rgb), 0.94));
  pointer-events: none;
}

/* The whole card is the button.

   No disc behind the mark. A filled circle on a vertical selfie is a plate
   dropped over the speaker's face; the bare triangle sits on the same spot
   and covers a fraction of it. What keeps it readable over any footage is
   a pair of drop-shadows on the glyph itself rather than a background —
   one tight and one soft, so it holds on a white wall and in a dark room.

   Under the cursor the mark comes up to full white, grows a little, and
   the word arrives below it. No ring, no plate — the only shape on the
   card is the triangle. Nothing moves position either: everything that
   changes is finish, so the target never shifts under the pointer.

   The mark and the label share one grid cell, so the mark stays exactly
   centred on the card no matter what the label does. --mark is the
   triangle's HEIGHT, which the label offset is measured from; change it
   and the pair rescales together. */
.diary-play {
  --mark: clamp(44px, 3.6vw, 58px);
  --cue-gap: 16px;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
}
.diary-mark {
  position: relative;
  grid-area: 1 / 1;
  display: block;
  line-height: 0;
  opacity: 0.92;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75))
          drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
  transition: opacity var(--t-1) var(--ease), scale var(--t-1) var(--ease);
}
.diary-mark svg { display: block; height: var(--mark); width: auto; }

.diary-cue {
  grid-area: 1 / 1;
  font-family: var(--font-ui);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  /* half the mark clears the triangle; the gap is what animates */
  transform: translateY(calc(var(--mark) / 2 + var(--cue-gap)));
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease);
  pointer-events: none;
}

.diary:hover .diary-play,
.diary-play:focus-visible { --cue-gap: 23px; }
.diary:hover .diary-mark,
.diary-play:focus-visible .diary-mark { opacity: 1; scale: 1.08; }
.diary:hover .diary-cue,
.diary-play:focus-visible .diary-cue { opacity: 1; }
.diary-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; border-radius: var(--r-md); }

.diary-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0 clamp(0.7rem, 1vw, 1rem) clamp(0.75rem, 1.1vw, 1.1rem);
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
.diary-cap b {
  font-family: var(--font-poster);
  font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.diary-cap i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* one card at a time — six faces at full strength is a wall, not a story */
.diary-wall:hover .diary,
.diary-wall:focus-within .diary { opacity: 0.4; }
.diary-wall:hover .diary:hover,
.diary-wall:focus-within .diary:focus-within,
.diary-wall .diary.is-live { opacity: 1; }
.diary:hover, .diary:focus-within {
  border-color: rgba(var(--brand-lit-rgb), 0.7);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  scale: 1.045;
  z-index: 4;          /* so the card that grew is the one on top */
}
.diary:hover .diary-thumb { transform: scale(1.045); }

/* once the real player is in, the facade's furniture must not sit over it */
.diary.is-live .diary-play,
.diary.is-live .diary-cap,
.diary.is-live::after { display: none; }
.diary iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .diary, .diary-thumb, .diary-mark, .diary-cue { transition: none; }
}
@media (max-width: 860px) {
  /* Same move as the reel above: the arrows come off the heading row and
     sit under the wall instead. .diaries-head has no box of its own to
     hold once its children are pulled onto .diaries' own grid, and
     minmax(0, 1fr) keeps the wall's max-content track (the drifting card
     row) from forcing that grid wider than the viewport — the wall's own
     overflow:hidden clips the drift visually but does not stop it from
     reporting its full width upward the way a bare 1fr track would take
     it. Only one [data-diary-prev]/[data-diary-next] pair exists, so this
     moves the buttons rather than adding a second set. */
  .diaries { display: grid; grid-template-columns: minmax(0, 1fr); }
  .diaries-head { display: contents; }
  /* carries the head's old bottom margin — display:contents drops that
     box, and with it the margin that used to open this gap */
  .diaries-copy { order: 1; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  /* margin-inline: 0, not the auto it carries normally — a grid item with
     an auto margin in this axis shrink-to-fits its content instead of
     stretching to the column, and the wall's content is the drifting
     track at its full max-content width, so it grew straight to the
     max-width cap instead of the viewport. There is nothing left to
     centre once the column already spans the full width. */
  .diary-wall { order: 2; min-width: 0; margin-inline: 0; }
  .diaries-nav {
    order: 3;
    justify-self: center;
    margin: clamp(1.1rem, 2.6vw, 1.75rem) 0 0;
  }
  .diaries-more { order: 4; }
}
@media (max-width: 640px) {
  /* "Feature film · placed" is one thought and breaks badly in two at this
     width; the tracking is what pushes it over, so take the tracking back */
  .diary-cap i { letter-spacing: 0.08em; }
  .nav-btn { width: 46px; height: 46px; }
}

/* =========================================================================
   FOLD 7 — HIRING PARTNERS  (hazard-tape ribbon)

   Full-bleed yellow ribbon with diagonal black chevron dashes on top and
   bottom edges — the classic caution-tape look. The heading goes black on
   yellow, and the distressed dot mask reads white against the dark glyphs.
   Left and right edges are clean yellow, no dashes.
   ========================================================================= */
.partners {
  position: relative;
  padding: 0;
  background: var(--gold);
  overflow: hidden;
}
/* Distressed, so the ribbon reads as paint on a wall rather than a fill.
   The heading mask was the wrong texture for this: at 300px it is dust, and
   dust on a band this wide reads as a compression artefact. This tile is
   900px and carries two scales — worn patches of 40-150px with fine grit
   between them — because that is what a painted surface loses.

   0.46, and that number is a contrast limit rather than a taste. The
   heading here is BLACK on gold, so every patch that darkens the field
   costs legibility: at full strength the worst patch took black down to
   2.32:1 and put a tenth of the ribbon under 4.5:1. 0.52 is where the
   darkest patch still clears 4.5; 0.46 leaves room for the gradient of a
   patch edge landing under a stroke. The red band opposite has the reverse
   problem — white type, which darkening only helps — so it carries 0.58. */
.partners-grain {
  position: absolute;
  inset: 0;
  background: url("../assets/grain.png") repeat 0 0 / 900px 900px;
  opacity: 0.46;
  pointer-events: none;
}
.partners-h, .partner-row { position: relative; z-index: 1; }

/* --- hazard chevron borders (top and bottom only) ------------------------ */
.partners::before,
.partners::after {
  content: '';
  display: block;
  width: 100%;
  height: 22px;
  background:
    repeating-linear-gradient(
      -45deg,
      #111 0px,
      #111 12px,
      var(--gold) 12px,
      var(--gold) 24px
    );
  flex-shrink: 0;
}

/* --- inner content between the chevron borders --------------------------- */
.partners-h {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
  /* black text on yellow — the shared mask's #F4F1EA becomes visible as
     white specks against the dark glyphs */
  color: #111;
}

.partner-row {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.3vw, 1.25rem);
}
.partner {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  transition: border-color var(--t-1) var(--ease),
              transform var(--t-1) var(--ease),
              box-shadow var(--t-1) var(--ease);
}
.partner img {
  display: block;
  width: 100%; height: auto;
}
.partner:hover {
  border-color: #111;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .partner { transition: none; }
}
@media (max-width: 1024px) {
  .partner-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Three across at every width from here down to the smallest phone —
     the fourth breakpoint that used to drop to two columns is gone, since
     seven logos over two rows of three plus a lone last one is the whole
     point. That last logo has no partner in its row, so it is placed in
     the middle column instead of falling to the left edge. */
  .partner-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partner:last-child { grid-column: 2; }
}

/* =========================================================================
   FOLD 8 — ABOUT

   The one section on this page with nothing moving in it. Everything above
   is footage; this is where the eye gets to stop, so the work is done by
   type, a single hairline and one idea.

   The idea is the creed. "Learn. Create. Get hired." is not a slogan here,
   it is a table of contents — each word links to the fold that already
   proved it. The label under each word is what makes that legible without
   a hover: a reader should be able to see it is navigation, not decoration.

   The heading shares the hero's distress mask by joining its selector,
   which keeps one copy of a 50KB texture in the file instead of two.
   ========================================================================= */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--fold-y) var(--gutter);
  background: var(--void);
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.08);
}
/* --- the plate ------------------------------------------------------------
   Two things keep the photograph from eating the section. The scrim is a
   near-black wash at 0.88, which drops the picture to about a tenth of its
   own contrast and leaves the lead paragraph at 9.4:1 over the brightest
   part of it (the monitor, top centre) rather than the 2.1:1 it measured
   unscrimmed. And the plate is taller than the section and masked at both
   ends, so the image fades into the black above and below instead of
   arriving as a pasted rectangle with two visible seams. */
.about-plate {
  position: absolute;
  inset: -8% 0;
  z-index: -1;
  pointer-events: none;
}
.about-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* --shift is written by site.js; the scale lives here so the parallax
     never has room to expose an edge */
  transform: scale(1.16) translate3d(0, var(--shift, 0px), 0);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.about-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--void-rgb), 0.97), rgba(var(--void-rgb), 0.86) 38%, rgba(var(--void-rgb), 0.94)),
    radial-gradient(70% 60% at 22% 34%, rgba(var(--brand-rgb), 0.16), transparent 70%);
}
.about-inner { position: relative; max-width: var(--page); margin: 0 auto; }

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.about-title { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.about-h {
  /* the shared rule sets the family, the mask and the ink; only the size
     and the leading are this heading's own */
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: var(--track-hero);
}
.about-lead {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-mid);
}

/* --- mission and vision ---------------------------------------------------
   One pane, split by a hairline. Two separate boxes on a photograph read as
   two stickers dropped on it; a single sheet of glass with a rule down the
   middle reads as a spread, which is what these two paragraphs actually are.

   The hierarchy is the real change. Each half now leads with its own
   sentence at display size and carries the full paragraph beneath it, so a
   reader who is scanning gets the claim and a reader who has stopped gets
   the detail. Before, both halves were a 12px label and then 90 words of
   15px body with nothing in between.
   -------------------------------------------------------------------------- */
.about-split {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border: var(--hair) solid rgba(var(--white-rgb), 0.1);
  border-radius: var(--r-md);
  background: rgba(18, 20, 26, 0.72);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* glass, now that there is a photograph behind it to be glass over — the
     fallback stays opaque enough to carry the type on its own */
  .about-split {
    background: rgba(14, 16, 21, 0.52);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
  }
}
/* the light a real pane catches along its top edge */
.about-split::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.4), transparent);
  z-index: 2;
}

.about-col {
  position: relative;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  transition: background var(--t-2) var(--ease);
}
.about-col + .about-col { border-left: var(--hair) solid rgba(var(--white-rgb), 0.1); }
/* hovering one half warms it from its own outer corner, so the pane stays
   one object and only the attention moves */
.about-col::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(80% 90% at 12% 0%, rgba(var(--brand-rgb), 0.22), transparent 70%);
  transition: opacity var(--t-2) var(--ease);
}
.about-col:last-child::after { background: radial-gradient(80% 90% at 88% 0%, rgba(var(--brand-rgb), 0.22), transparent 70%); }
.about-col:hover::after { opacity: 1; }

/* --- the slug: index, rule, label, on one line ---------------------------- */
.about-slug {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.about-no {
  font-family: var(--font-poster);
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--brand-lit);
  transition: color var(--t-1) var(--ease);
}
/* the rule between index and label is the pseudo, so no empty span is
   needed in the markup to draw a line */
.about-no::after {
  content: '';
  display: inline-block;
  width: 1.8rem;
  margin: 0 0 0.25em 0.85rem;
  border-bottom: var(--hair) solid rgba(var(--white-rgb), 0.28);
  vertical-align: middle;
}
.about-kicker {
  margin: 0;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* the claim, pulled out of the paragraph and set at display size. It rises
   inside its own clipping window on entry — the same move the hero opening
   uses, so the section is answering the page rather than starting over. */
.about-line {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-poster);
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--ink);
}
.about-line span { display: block; }
.about-body { margin: 0; font-size: var(--fs-sm); line-height: 1.72; color: var(--ink-mid); max-width: 52ch; }

/* --- the creed ------------------------------------------------------------ */
.about-creed {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5.5rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.1);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
}
/* Focus mode: dim un-hovered items when hovering the container */
.about-creed:hover .creed:not(:hover) {
  opacity: 0.4;
  filter: blur(2px);
}
/* the one place the brand colour is allowed to sit behind the type */
.about-creed::before {
  content: '';
  position: absolute;
  left: 50%; top: -35%;
  /* ...and never past the viewport: at 390px the 120% bleed put 15px of
     empty page beyond the right edge and gave the whole document a
     horizontal scroll for a glow nobody can see */
  width: min(120%, 1100px, 100vw); height: 170%;
  transform: translateX(-50%);
  /* Sized so the wash reaches nothing well inside its own box on all four
     sides. A radial centred on an element's edge stops dead at that edge —
     it reads as a rectangle of tint, not as light — so the box is grown
     past the row in both directions and the gradient kept inside it. */
  background: radial-gradient(58% 58% at 50% 50%, rgba(var(--brand-rgb), 0.2), transparent 70%);
  pointer-events: none;
}
.creed {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}
.creed b {
  font-family: var(--font-poster);
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--t-1) var(--ease);
}
/* The three words are filled with the floor behind them — the same
   photograph, showing through the letterforms. The white wash over it is
   not decoration: raw, the picture averages a relative luminance of about
   0.12 and the words would sit at 2.4:1. Washed to 72-89% white, the
   letterform interiors measure 8.93:1 at the median and 4.13:1 at the
   single darkest pixel across all three words — clear of the 3:1 large text
   needs and of the 4.5:1 body text needs — while the photograph's colour
   and structure still read inside the type.

   Hover drops the fill for flat white, so the state change raises contrast
   rather than lowering it — the usual failure mode of a picture-filled
   headline. Everything is behind @supports because a browser without
   background-clip would render three transparent words. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .creed b {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.89)),
      url("../assets/about/floor.webp") center / 190% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color var(--t-1) var(--ease), opacity var(--t-1) var(--ease);
  }
  .creed:hover b, .creed:focus-visible b { color: var(--ink); background: none; }
  /* three words, three parts of the same frame: the fire on the left, the
     comp in the middle, the reference wall on the right — so they are
     visibly the same photograph without being the same crop of it */
  .creed:nth-child(1) b { background-position: 12% 46%; }
  .creed:nth-child(2) b { background-position: 50% 50%; }
  .creed:nth-child(3) b { background-position: 88% 42%; }
  @media (max-width: 760px) {
    /* the same file the plate loaded at this width — a text fill sampled at
       190% of a word does not need the 2000px copy, and pulling it would
       double the section's transfer for no visible difference */
    .creed b { background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.89)),
      url("../assets/about/floor-sm.webp"); }
  }
}
.creed i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
/* the arrow lives in a pseudo so the label's own letter-spacing does not
   push it a quarter of an em away from the word */
.creed i::after { content: ' \2192'; letter-spacing: 0; }
.creed::before {
  content: '';
  position: absolute;
  left: 0; bottom: -0.5rem;
  width: 100%; height: 2px;
  background: var(--brand-mid);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-2) var(--ease);
}
.creed:hover i, .creed:focus-visible i { transform: translateX(3px); }
.creed:hover::before, .creed:focus-visible::before { transform: scaleX(1); }
.creed:focus-visible { outline: 3px solid var(--brand); outline-offset: 8px; border-radius: 2px; }

/* --- social --------------------------------------------------------------- */
.about-social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.7rem;
}
.social {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: var(--hair) solid rgba(var(--white-rgb), 0.18);
  color: var(--ink-mid);
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.social svg { width: 18px; height: 18px; }
/* magnetic pop and red accent on hover */
.social:hover, .social:focus-visible { 
  background: var(--brand); 
  border-color: var(--brand); 
  color: #0A0A0C; 
  transform: scale(1.1); 
}
.social:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .creed b, .creed i, .creed::before, .social { transition: none; }
}
@media (max-width: 860px) {
  .about-top { grid-template-columns: 1fr; }
  /* stacked, the divider has to move from the side to the top or the two
     halves run together with no seam at all */
  .about-split { grid-template-columns: 1fr; }
  .about-col + .about-col {
    border-left: 0;
    border-top: var(--hair) solid rgba(var(--white-rgb), 0.1);
  }
  .about-col:last-child::after { background: radial-gradient(90% 80% at 12% 0%, rgba(var(--brand-rgb), 0.22), transparent 70%); }
  /* The creed stays three across rather than stacking — "Learn. Create.
     Get hired." is meant to read as one line, and stacked it took three
     times the vertical space for no gain. "Get hired." is the long one, so
     the word size is what has to give: clamped down far enough that it
     still clears the narrowest column (a 320px phone, after the section's
     own gutter and the row's own gap) with room to spare, then nowrap
     backs that up rather than leaving a wrap as the fallback. */
  .about-creed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.4rem, 2.4vw, 1.5rem); }
  .creed { gap: 0.3rem; }
  .creed b { font-size: clamp(0.95rem, 4.7vw, 1.7rem); white-space: nowrap; }
  .creed::before { bottom: -0.6rem; }
}

/* =========================================================================
   FOLD 9 — THE VFX ADVANTAGE

   Three claims, each with a photograph of the actual floor behind it. This
   is the only real photography of the school on the page, so it runs in
   colour — the two folds above already turn grey into colour on hover and
   a third would make a motif out of an accident.

   All three photographs are exactly 2:1, so the frame is 2/1 and not a
   pixel of any of them is cropped. Their size also sets the layout: the
   third exists at 400px wide and there is nothing larger on the server, so
   a card lands at about 430 and the row is three across. Anything that
   showed one photograph large would have shown that one falling apart.

   Nothing here is clickable but the button, so nothing here has a hover
   state. The section's one moment is its reveal.
   ========================================================================= */
.advantage {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background: linear-gradient(180deg, var(--void) 0%, #0A0810 55%, var(--void) 100%);
}
.advantage-head {
  max-width: var(--page);
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.advantage-title {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.advantage-h {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
  max-width: 18ch;
}
.advantage-head .btn { flex: none; }

.advantage-row {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
.adv {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* written by the reveal; the stylesheet keeps the transform so an inline
     write can never take the layout with it */
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--rise, 0px), 0);
}
.adv-shot {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;          /* the photographs' own ratio, so no crop */
  border-radius: var(--r-md);
  overflow: hidden;
  border: var(--hair) solid rgba(var(--white-rgb), 0.1);
  background: var(--surface-raised);
}
.adv-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the index, then a rule running out to the column's edge */
.adv-meta {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0.7rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.adv-meta b {
  font-family: var(--font-poster);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.adv-meta::after {
  content: '';
  flex: 1;
  height: var(--hair);
  background: rgba(var(--white-rgb), 0.14);
}
.adv-h {
  margin: 0 0 0.6rem;
  font-family: var(--font-poster);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.adv-body { margin: 0; font-size: var(--fs-sm); line-height: 1.72; color: var(--ink-mid); }

@media (max-width: 1100px) {
  .advantage-head { flex-direction: column; align-items: flex-start; }
  /* two, not one. Going straight to a single column hands the smallest
     photograph a 828px frame to fill from a 400px file — a 2.07x blow-up.
     Two columns keeps it near its native size the whole way down. */
  .advantage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); }
}
@media (max-width: 700px) {
  .advantage-row { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); }
  /* and where one column is unavoidable, the photograph stops growing
     before the file runs out */
  .adv-shot { max-width: 460px; }
  .adv-body { max-width: 58ch; }
}
@media (max-width: 860px) {
  /* Learn More moves from beside the heading to the close of the section,
     after the three cards rather than before them — the same reorder used
     on the reel and the diaries above. .advantage-head has nothing of its
     own to render once its two children (the title block and the button)
     are handed to .advantage's own grid. */
  .advantage { display: grid; grid-template-columns: minmax(0, 1fr); }
  .advantage-head { display: contents; }
  /* carries .advantage-head's old bottom margin — display:contents drops
     that box, and with it the margin that used to open this gap */
  .advantage-title { order: 1; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
  .advantage-row { order: 2; min-width: 0; }
  .advantage-head .btn {
    order: 3;
    justify-self: center;
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
  }
}

/* =========================================================================
   FOLD 10 — OUR COURSES

   Course sheets, not cards with pictures on them. What makes the difference
   is the syllabus: every one of the six carries exactly three lines of what
   is actually taught, ticked, under its own heading. That is the part
   someone choosing a course reads first and the part a generic card leaves
   out.

   The syllabus is pushed to the bottom of the card (margin-top: auto inside
   a stretched grid cell) so the six lists sit on the same line across the
   row however long the descriptions run. That alignment is the whole point:
   it lets someone compare six courses at a glance rather than reading them
   one at a time.
   ========================================================================= */
.courses {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(var(--brand-rgb), 0.13), transparent 60%),
    var(--void);
}
.courses-head {
  max-width: var(--page);
  margin: 0 auto clamp(2.25rem, 4.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.courses-h {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
}
.courses-lead { margin: 0; font-size: var(--fs-lead); color: var(--ink-mid); max-width: 62ch; }

.course-grid {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.course {
  position: relative;                /* the stretched link anchors here */
  display: flex;
  flex-direction: column;
  border: var(--hair) solid rgba(var(--white-rgb), 0.12);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(var(--white-rgb), 0.028);
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--rise, 0px), 0);
  /* the lift is `translate`, its own property — --rise owns transform and a
     hover written into the same property would cancel the reveal */
  translate: 0 0;
  transition: translate var(--t-2) var(--ease), border-color var(--t-1) var(--ease),
              background-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.course:hover, .course:focus-within {
  translate: 0 -4px;
  border-color: rgba(var(--brand-lit-rgb), 0.55);
  background: rgba(var(--white-rgb), 0.05);
  box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.95);
}

.course-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;              /* the covers' own ratio: 768 x 512 */
  overflow: hidden;
  background: var(--surface-raised);
}
.course-cover img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale var(--t-3) var(--ease);
}
.course:hover .course-cover img { scale: 1.04; }
/* the cover fades into the card rather than stopping on a hard line */
.course-cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(var(--void-rgb), 0.85));
  pointer-events: none;
}
.course-no {
  position: absolute;
  left: 0.85rem; top: 0.8rem;
  z-index: 2;
  padding: 0.34em 0.6em 0.28em;
  border-radius: var(--r-sm);
  background: rgba(var(--void-rgb), 0.82);
  border: var(--hair) solid rgba(var(--white-rgb), 0.16);
  font-family: var(--font-poster);
  font-size: var(--fs-nano);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.course-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1rem, 1.8vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
}
.course-h {
  margin: 0 0 0.55rem;
  font-family: var(--font-poster);
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.course-h a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-1) var(--ease);
}
/* the whole card is the target; the accessible name stays the title */
.course-h a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.course-h a:focus-visible { outline: none; }
.course:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.course:hover .course-h a { color: var(--gold); }
.course-p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-mid); }

/* --- the syllabus --------------------------------------------------------- */
.course-foot {
  margin-top: auto;                 /* all six lists land on the same line */
  padding-top: clamp(1rem, 1.8vw, 1.35rem);
}
.course-kicker {
  margin: 0 0 0.6rem;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.course-list {
  margin: 0 0 clamp(0.9rem, 1.6vw, 1.2rem);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.course-list li {
  position: relative;
  padding-left: 1.45rem;
  font-size: var(--fs-sm);
  line-height: 1.42;
  color: var(--ink);
}
/* a tick drawn from two borders — no icon file, and it inherits the brand */
.course-list li::before {
  content: '';
  position: absolute;
  left: 3px; top: 0.34em;
  width: 5px; height: 9px;
  border-right: 2px solid var(--brand-lit);
  border-bottom: 2px solid var(--brand-lit);
  transform: rotate(45deg);
}
/* A button, not a caption. It was a line of gold nano type on a hairline —
   the right information in the wrong clothes, easy to read past on a card
   that already has a title, a paragraph and three ticks competing for the
   eye. Now it is a bordered pill across the full width of the card, which
   is the only element down there with an edge around it.

   The whole card is still the link; this is the affordance, not the target.
   Gold on the card measures 9.24:1 and near-black on gold 9.47:1, so it is
   legal in both states rather than only at rest. */
.course-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: clamp(0.85rem, 1.6vw, 1.15rem);
  padding: 0.78em 1.1em;
  border: var(--hair) solid rgba(var(--gold-rgb), 0.45);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease);
}
.course-go::after {
  content: '\2192';
  letter-spacing: 0;
  transition: transform var(--t-1) var(--ease);
}
/* the card's own hover fills it — the same gold plate, black mark contract
   every other control on this page uses */
.course:hover .course-go,
.course:focus-within .course-go {
  background: var(--gold);
  border-color: var(--gold);
  color: #0A0A0C;
}
.course:hover .course-go::after,
.course:focus-within .course-go::after { transform: translateX(4px); }

.courses-more {
  max-width: var(--page);
  margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0;
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .course, .course-cover img, .course-go::after { transition: none; }
}
@media (max-width: 1100px) {
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .course-grid { grid-template-columns: 1fr; }
  .course-p, .course-list { max-width: 58ch; }
}

/* =========================================================================
   FOLD 11 — REAL STORIES

   A poster site on a Mumbai wall, and the students go up in the frame.

   The wall is a photograph; the frame is not. That is what finally makes it
   fit. A moulding built from padding is the same width on all four sides by
   definition, and the aperture it leaves is exactly 9:16 — the shape these
   clips already are — so nothing is cropped and nothing is letterboxed. The
   photographed frame this replaces had rails of 31, 14, 14 and 24 pixels,
   which is the asymmetry of a lens rather than of a design, and no amount
   of re-cutting was ever going to even it out.

   What stops it reading as a rectangle drawn on a wall is the light. On
   this wall it comes from above and the right: the surface brightens from
   81 on the left to 162 on the right, and the torn poster near x=700 throws
   its shadow down and to the left. So the cast shadow goes down-left, the
   moulding is lit along its top and right, and inside the rebate the
   shadow falls on the top and right inner edges — the sides the light is
   blocked by. Get that backwards and no amount of gradient saves it.

   That is what makes the fit exact instead of approximate. Aligning a box
   to the edges of a photographed frame is a guess that gets re-measured
   every time someone looks at it; painting the frame over the video makes
   overflow impossible. The rails are the photograph's own, so they are as
   even as the photograph is, and the clip can never creep past them.

   Copy sits on a scrim rather than on the wall. Measured, white type on
   that wall is 3.96:1 at best and 1.52:1 on its lit patches. The strip
   under the frame needs no help — it is in shadow at 8.23:1, which is why
   the name goes there and the heading does not.
   ========================================================================= */
.tales {
  position: relative;
  /* no top padding: the wall is full-bleed against the band above it.
     The foot is on the shared rhythm like every other fold. */
  padding: 0 0 var(--fold-y);
  background: var(--void);
}
.tales-plate {
  position: relative;
  aspect-ratio: 1672 / 941;      /* the plate's own ratio, so % stay true */
  overflow: hidden;
}
.tales-wall {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}
/* dark on the left, clear over the frame */
/* --- the copy, on the wall -------------------------------------------------
   The sun in this photograph is at the upper right — that is what the
   frame's moulding says, lit along its top and right edges, throwing its
   cast down and to the left at -17px/27px. Everything the page adds to this
   wall now falls along that same vector: 0.53 left for every 0.84 down.

   The previous attempt outlined every glyph on all eight sides and put a
   soft blur behind it. An outline is what makes lettering read as pasted on
   rather than painted on — nothing on a real wall has a dark keyline round
   it — and one blurred offset reads as a CSS glow, not as a shadow. Both
   are gone.

   What replaces them is how a long shadow is actually built: eleven small
   offsets stepped along the light vector, each fractionally weaker, which
   composite into a single solid shadow body with a real edge, and then one
   soft layer at the end for the penumbra. The shadow is warm dark brown,
   not black, because a shadow on ochre plaster is a darker version of the
   plaster rather than an absence of light.

   And the paint is not flat white: it carries a gradient lit from the upper
   right, so the letters take their light from where the wall takes its own.
   -------------------------------------------------------------------------- */
.tales-copy {
  position: absolute;
  z-index: 4;
  /* Ranged left and vertically centred, ~100px in on a full-width desktop.

     It scales rather than sitting at a fixed 100px because of what is on
     the wall: scanning the bare plate for anything that is not warm plaster
     finds the drainpipe at 0.8-4.4% and a pasted paper bill at 40.6-43.9%.
     Both are percentages of the plate, so they move in as the window
     narrows while a fixed offset would not — at the 1001px where the wall
     is still shown, 100px plus a 32% block would have run 14px into the
     bill. This clamp lands at 100px at 1600, 93 at 1470 and 63 at 1001,
     which keeps at least 23px of plaster between the copy and the bill at
     every width the wall appears. */
  left: clamp(56px, 6.3vw, 100px);
  top: 50%;
  translate: 0 -50%;
  width: min(32%, 500px);
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
  gap: clamp(0.8rem, 1.6vw, 1.25rem);
  /* the light vector, shared by everything the page puts on this wall */
  --a: -0.53;
  --b: 0.84;
}

/* The capsule is an object on the wall, so it casts the same way the frame
   does — and because the shape is a pill, box-shadow follows the pill
   rather than a box around it. Black: on ochre plaster a gold chip reads as
   another warm patch of the same wall. */
.tales-copy .numbers-tag {
  padding: 0.62em 1.15em 0.56em;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  background: #0B0907;
  color: #F4F1EA;                /* 17.6:1 inside the chip */
  box-shadow:
    -2px 3px 0 rgba(38, 24, 12, 0.5),
    -5px 8px 10px -3px rgba(38, 24, 12, 0.5),
    -11px 17px 26px -8px rgba(30, 18, 9, 0.55);
  rotate: -0.35deg;              /* the same tilt the frame has */
}

.tales-h {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.04;
}
/* One hard offset and one soft ambient, and that is all. The version before
   this stepped eleven offsets along the vector to build a long shadow, and
   in a face this condensed the steps filled the counter of every U, D and O
   until the word was a dark mass with letters faintly lighter than it. Real
   painted signage does not carry a long shadow anyway — it carries a single
   crisp drop at the light's angle, and a wider soft one for the light the
   wall bounces back. */
.tales-h,
.tales-lead {
  --s: 1;
  text-shadow:
    calc(var(--a) * var(--s) * 5px) calc(var(--b) * var(--s) * 5px) 0 rgba(38, 24, 12, 0.78),
    calc(var(--a) * var(--s) * 11px) calc(var(--b) * var(--s) * 11px) calc(var(--s) * 11px) rgba(30, 18, 9, 0.45);
}
/* Per letter, once site.js has split the line. --cast scales the offset:
   under a light at the upper right the letters furthest from it throw the
   longest shadows, so the drop lengthens across the line from right to
   left. That gradient is the reason the split is worth doing at all. */
.tales-h .tl {
  display: inline-block;
  white-space: pre;
  --s: calc(var(--cast) / 10);
  /* warm off-white, brighter on the side the sun is on. -webkit-text-fill
     is what actually shows the gradient; `color` alone leaves the glyph
     painted over it in some builds. */
  /* Flat warm white, not a clipped gradient. background-clip:text was
     leaving the glyphs transparent here — what looked like grey lettering
     was the drop shadow read straight through the letter, with the only
     white a sliver up its top-right edge. A gradient across a box one
     character wide was never going to earn much anyway; the light on these
     letters comes from the shadow they throw, not from a ramp inside them. */
  color: #FBF7EC;
}

.tales-lead {
  margin: 0;
  --s: 0.55;
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: #F7F3E9;
  max-width: 34ch;
}

/* --- the frame ------------------------------------------------------------
   432 x 740 on the plate with an 18px moulding, which leaves 396 x 704 —
   exactly 9:16. The padding is a percentage of the PLATE, not of the frame,
   so all four sides resolve against the same number and stay equal at every
   size; percentages on padding always resolve against the containing
   block's width, which is what makes the top and bottom rails match the
   left and right ones rather than being scaled by the frame's own height. */
.tales-frame {
  position: absolute;
  left: 52.2727%; top: 11.4772%;
  width: 25.8373%;
  aspect-ratio: 432 / 740;
  padding: 1.0766%;
  box-sizing: border-box;
  z-index: 2;
  /* the moulding: darker on the shadowed lower-left, catching light on the
     upper-right, which is where this wall's light comes from */
  background: linear-gradient(215deg, #33281F 0%, #1C1611 42%, #0C0A08 100%);
  border-radius: 2px;
  /* Three shadows, not two, and each one softer than the last. A shadow
     thrown further from an object is always more diffuse — so an 11px
     offset carrying only a 4px blur terminates in a visible step rather
     than fading out. Measured on the wall beside the frame, the falloff
     now runs 61 -> 72 -> 80 -> 87 -> 92 -> 97 -> 100 -> 104 with no jump
     in it, against a 7.7-point step at 11px before. */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),                    /* it meets the wall  */
    inset -1px 1px 0 rgba(255, 255, 255, 0.15),       /* lit top and right  */
    inset 1px -1px 0 rgba(0, 0, 0, 0.75),             /* dark bottom, left  */
    -2px 4px 6px -1px rgba(0, 0, 0, 0.55),            /* contact            */
    -8px 13px 18px -6px rgba(0, 0, 0, 0.42),          /* mid               */
    -17px 27px 46px -12px rgba(0, 0, 0, 0.5);         /* cast, down-left   */
  /* nothing on a wall is quite level; a rectangle that is reads as UI */
  rotate: -0.35deg;
}

.tales-screen {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
}
/* The rebate. It has to be a pseudo element rather than an inset shadow on
   the screen itself: an inset shadow paints under the element's content, so
   over a video it would not be there at all. */
.tales-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.85),
    inset -7px 8px 17px -6px rgba(0, 0, 0, 0.8);      /* cast by the top and
                                                         right rails */
}
/* Two layers that cross-fade. Fading one out and back in leaves the frame
   empty in the middle of the change — with two, the next face is already
   up before the last one has gone. */
.tales-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.035;
  transition: opacity 560ms var(--ease), scale 900ms var(--ease);
}
.tales-still.is-front { opacity: 1; scale: 1; }
.tales-play {
  --mark: clamp(26px, 2.1vw, 38px);
  --cue-gap: 11px;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: transparent;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
}
.tales-mark {
  grid-area: 1 / 1;
  display: block; line-height: 0;
  opacity: 0.92;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
          drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
  transition: opacity var(--t-1) var(--ease), scale var(--t-1) var(--ease);
}
.tales-mark svg { display: block; height: var(--mark); width: auto; }
.tales-cue {
  grid-area: 1 / 1;
  font-family: var(--font-ui);
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(calc(var(--mark) / 2 + var(--cue-gap)));
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease);
  pointer-events: none;
}
.tales-play:hover { --cue-gap: 17px; }
.tales-play:hover .tales-mark, .tales-play:focus-visible .tales-mark { opacity: 1; scale: 1.1; }
.tales-play:hover .tales-cue,  .tales-play:focus-visible .tales-cue  { opacity: 1; }
.tales-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
.tales-screen.is-live .tales-play,
.tales-screen.is-live .tales-still { display: none; }
.tales-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the name, on the shadowed strip below the frame */
.tales-name {
  position: absolute;
  z-index: 4;
  /* aligned to the picture's edge, not the frame's, and dropped clear of
     the moulding's cast shadow */
  left: 53.3493%; top: 92%;
  width: 30%;
  margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.tales-name b {
  font-family: var(--font-poster);
  font-size: clamp(0.85rem, 1.35vw, 1.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.tales-name i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.tales-name.is-turning b, .tales-name.is-turning i { opacity: 0; transform: translateY(4px); }
.tales-name b, .tales-name i {
  transition: opacity 320ms var(--ease), transform 480ms var(--ease);
}

/* --- the rail ------------------------------------------------------------- */
.tales-rail {
  position: absolute;
  z-index: 4;
  left: var(--gutter); bottom: 8%;
  width: 44%;
  display: flex;
  gap: clamp(0.35rem, 0.8vw, 0.7rem);
}
.tales-thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: var(--hair) solid rgba(var(--white-rgb), 0.18);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--t-1) var(--ease), filter var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease), translate var(--t-1) var(--ease);
}
.tales-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tales-thumb:hover { opacity: 0.85; filter: none; }
.tales-thumb.is-on {
  opacity: 1;
  filter: none;
  border-color: var(--brand-lit);
  translate: 0 -6px;
}
.tales-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.tales-more {
  max-width: var(--page);
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .tales-still, .tales-mark, .tales-cue, .tales-thumb, .tales-name b, .tales-name i,
  .tales-name b, .tales-name i { transition: none; }
}

/* Below this the aperture drops under about 230px — too small for a face
   and a name at the frame's full desktop size — so the whole plate stops
   being an absolute overlay keyed to the photo's own short, wide shape and
   becomes a normal stacked card instead: the wall as a cover-fit backdrop
   behind it, sized by its content rather than the photo's aspect ratio,
   with the frame, name and rail flowing down it in order. The rail turns
   from two rows of four into one row a thumb rides past, kept close under
   the frame so the two read as one picker in a single screen, not two
   blocks apart. */
@media (max-width: 1000px) {
  /* no side gutter here — the wall runs to both edges, the way a wall
     actually would, rather than sitting as a card with the page showing
     round it. The gutter isn't gone, just moved: the plate keeps its own
     inner padding below, so the heading, frame and rail still get the
     usual breathing room from the edges the wall itself no longer has. */
  .tales { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
  .tales-plate {
    aspect-ratio: auto;
    overflow: hidden;
    /* seals the wall and the scrim's negative z-index into this box, so
       they stack behind the card's own content and nothing further back —
       without it a negative z-index escapes to the nearest ancestor that
       actually establishes a stacking context, which here was .tales'
       solid black, and the photo was rendering behind that instead */
    isolation: isolate;
    /* square, not rounded — a corner radius on a card is a card's own
       edge; flush against the viewport edge it would just look clipped */
    border-radius: 0;
    padding: clamp(1.75rem, 5vw, 2.5rem) var(--gutter) clamp(2rem, 5vw, 2.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.85rem, 2.4vw, 1.25rem);
  }
  /* still the same cover-fit image (the base rule already sizes and crops
     it); only the stacking changes — negative z-index drops it behind the
     card's own in-flow content instead of the absolute overlay it was on
     desktop. Brightness stays at the base rule's own 0.9: the point of
     bringing the wall back was to see it, so the scrim below is doing the
     legibility work at a light enough touch that the photo still reads as
     a photo instead of a shape guessed at through fog. */
  /* Nudged off dead-centre: the notice pasted to the wall sits close
     enough to the photo's own middle that a centred crop lands it right
     behind the frame's left edge, half hidden. Panning the crop to 57%
     clears it into the open margin on the left with room either side,
     without pulling either the pipe on the far left or the "STICK NO
     BILLS" stencil on the right into frame. */
  .tales-wall { z-index: -1; object-position: 57% 50%; }
  /* the scrim: a little darker at the top and bottom, where the tag,
     heading and the name/rail strip need the contrast, and barely there
     through the middle, which is mostly covered by the frame anyway.
     Backed up by a plain drop-shadow on the text itself below, rather
     than asking the scrim alone to carry legibility the way the About
     section's does — that scrim reads as atmosphere; this one only needs
     to nudge a contrast ratio, not replace the photo with a wash. */
  .tales-plate::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      rgba(var(--void-rgb), 0.45) 0%,
      rgba(var(--void-rgb), 0.1) 26%,
      rgba(var(--void-rgb), 0.14) 68%,
      rgba(var(--void-rgb), 0.5) 100%);
    pointer-events: none;
  }
  .tales-copy, .tales-name, .tales-rail {
    position: static;
    left: auto; top: auto; bottom: auto;
    /* the centring translate has to come off with the positioning, or the
       block is dragged half its own height up the static page */
    translate: none;
    width: 100%;
  }
  /* the frame stays — it is the point of the section — sized up rather
     than down this time, and still centred: at this size, on its own
     card, it reads as the section's one focal object rather than a
     photograph pinned to one side of a wall. */
  .tales-frame {
    position: static;
    left: auto; top: auto;
    width: clamp(190px, 56vw, 250px);
    aspect-ratio: auto;
    padding: 8px;
    rotate: 0deg;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.5),
      inset -1px 1px 0 rgba(255, 255, 255, 0.14),
      inset 1px -1px 0 rgba(0, 0, 0, 0.7),
      0 14px 30px -12px rgba(0, 0, 0, 0.8);
  }
  .tales-screen { aspect-ratio: 9 / 16; height: auto; }
  /* the wall's own light no longer lines up with the frame at this crop,
     so the desktop shadow (tuned to that specific light vector) is off in
     favour of one plain drop-shadow that works from any direction — paired
     with the light scrim above rather than either one alone carrying it */
  .tales-name b, .tales-name i,
  .tales-h, .tales-h .tl, .tales-lead {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
  }
  .tales-copy .numbers-tag { rotate: none; }
  .tales-copy .numbers-tag {
    background: var(--gold);
    color: var(--void);
    box-shadow: none;
  }
  .tales-name { max-width: 260px; text-align: center; align-items: center; }
  /* One row a thumb scrolls past, not a grid it reads top to bottom —
     and smaller than the frame by a wide margin now, so the frame reads
     as the one thing to look at and the rail as the strip of choices
     under it, not two objects competing at the same size. Eight
     thumbnails still never fit unscrolled at phone width even this
     small, so the row scrolls rather than shrinking them past
     recognition; each keeps a fixed size and snaps into place. */
  .tales-rail {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: clamp(0.4rem, 1.6vw, 0.6rem);
    /* room for the on-state's own upward translate and glow, or the strip
       clips the one card that is doing something */
    padding: 6px 2px 10px;
    /* fades the row's own edges rather than guillotining a thumb mid-card
       — the same move the reel and diaries strips use above */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  .tales-rail::-webkit-scrollbar { display: none; }
  .tales-thumb {
    flex: 0 0 auto;
    width: clamp(48px, 14vw, 62px);
    scroll-snap-align: start;
    opacity: 1;
    filter: grayscale(1);
    translate: 0 0;
  }
  .tales-thumb.is-on { filter: none; translate: 0 -4px; }
}

/* =========================================================================
   FOLD 12 — SOME OF OUR WORK

   A light table: twelve cells ruled by hairlines, with the wall quietly
   reshuffling itself. One cell at a time cross-fades to a poster that is
   not currently on screen, so the grid never sits still for long and never
   shows the same title twice.

   Six across and two down, which is what lands the whole wall inside a
   single screen: at six columns a 2:3 cell is about 340px tall, so two rows
   plus the heading clear a 1000px viewport. Five columns would not — the
   cells grow to 407 and the second row falls off the bottom.

   The posters sit apart now, each in its own hairline, rather than sharing
   rules struck between them. Once there is a real gap the shared-edge
   argument stops applying — nothing is adjacent any more — and a tile with
   its own border reads as a print pinned to a board.

   Both layers animate in both directions: the arriving poster settles from
   1.06 to 1 as it fades up, the leaving one drifts back out as it fades
   down. Two crossing moves rather than one, which is what stops it reading
   as a slideshow.

   The opacity ramp is linear while the scale is eased. Two eased ramps
   crossing do not sum to a constant — the pair brightens through the middle
   of the change — and at this speed that pulse is long enough to see.
   ========================================================================= */
.work {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background: var(--void);
}
.work-head {
  max-width: var(--page);
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.work-head .btn { flex: none; }
.work-kicker {
  margin: 0 0 0.5rem;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.work-h {
  margin: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.0;
}

.work-grid {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 0.95vw, 15px);
}
.work-cell {
  position: relative;
  aspect-ratio: 2 / 3;          /* the ratio the posters are cropped to */
  overflow: hidden;
  background: #08090D;
  border: var(--hair) solid rgba(var(--white-rgb), 0.13);
  border-radius: var(--r-sm);
}
.work-cell img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.06;
  /* linear on the fade so the two crossing ramps hold a steady brightness;
     eased on the scale, which is what gives the arrival its weight. 2600ms
     rather than 1500: at a second and a half the swap registered as a
     change of image, which is the thing to avoid — a poster should look
     like it was always going to be there. */
  transition: opacity 2600ms linear, scale 3600ms var(--ease);
}
.work-cell img.is-front { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .work-cell img { transition: none; }
}
@media (max-width: 1180px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  {
  /* Book a Consultation Call moves from beside the heading to the close
     of the section, after the grid rather than before it — the same
     reorder used on the reel, the diaries and the advantage cards above.
     .work-head has nothing left to render once its two children (the
     title block and the button) are handed to .work's own grid. */
  .work { display: grid; grid-template-columns: minmax(0, 1fr); }
  .work-head { display: contents; }
  /* carries .work-head's old bottom margin — display:contents drops that
     box, and with it the margin that used to open this gap */
  .work-title { order: 1; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
  .work-grid {
    order: 2;
    min-width: 0;
    /* margin-inline: 0, not the auto it carries normally — a grid item
       with an auto margin in this axis shrink-to-fits its content instead
       of stretching to the column, and this grid's own tracks are all
       minmax(0, 1fr) with nothing forcing a width, so it collapsed to
       just its gaps. Same fix as the diaries wall above. */
    margin-inline: 0;
    /* three across the whole way down to the smallest phone — see the
       removed 560px breakpoint below, which used to drop this to two */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .work-head .btn {
    order: 3;
    justify-self: center;
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
  }
}

/* =========================================================================
   FOLD 14 — FAQ

   Eleven questions is where a plain accordion stops working: it becomes a
   wall you scroll rather than a place you look something up. So they are
   grouped and the groups are the interface — someone worried about money
   reads two answers, not eleven.

   The panels open by animating grid-template-rows from 0fr to 1fr. It is
   the one way to animate to a content height without measuring it in
   JavaScript, and without the max-height guess that either clips the long
   answers or makes the short ones lag.
   ========================================================================= */
.faq {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background:
    radial-gradient(100% 55% at 50% 0%, rgba(var(--brand-rgb), 0.1), transparent 62%),
    var(--void);
}
.faq-head {
  max-width: var(--page);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.faq-title {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.7rem, 1.5vw, 1.1rem);
}
.faq-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--ink);
}
.faq-lead { margin: 0; font-size: var(--fs-lead); color: var(--ink-mid); max-width: 56ch; }
.faq-head .btn { flex: none; }

.faq-body {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* --- the topics ----------------------------------------------------------- */
.faq-rail {
  position: sticky;
  top: calc(var(--header-h, 88px) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.faq-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.faq-cat i {
  font-style: normal;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  opacity: 0.7;
}
.faq-cat:hover { background: rgba(var(--white-rgb), 0.05); color: var(--ink); }
.faq-cat.is-on {
  background: rgba(var(--brand-lit-rgb), 0.12);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--brand-lit);
}
.faq-cat.is-on i { color: var(--gold); opacity: 1; }
.faq-cat:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- the questions -------------------------------------------------------- */
.faq-list { border-top: var(--hair) solid rgba(var(--white-rgb), 0.13); }
.faq-item { border-bottom: var(--hair) solid rgba(var(--white-rgb), 0.13); }
.faq-item[hidden] { display: none; }

.faq-q { margin: 0; }
.faq-q button {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  padding: clamp(1rem, 1.9vw, 1.5rem) clamp(0.4rem, 1vw, 0.9rem);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: background-color var(--t-1) var(--ease);
}
.faq-q button:hover { background: rgba(var(--white-rgb), 0.035); }
.faq-q button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.faq-q b {
  font-family: var(--font-poster);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.faq-q span {
  font-family: var(--font-poster);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color var(--t-1) var(--ease);
}
/* a plus that becomes a minus — two bars, one of which rotates away */
.faq-q i {
  position: relative;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  border: var(--hair) solid rgba(var(--white-rgb), 0.22);
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.faq-q i::before, .faq-q i::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 2px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate var(--t-2) var(--ease), opacity var(--t-1) var(--ease);
}
.faq-q i::after { rotate: 90deg; }

.faq-item.is-open .faq-q span { color: var(--gold); }
.faq-item.is-open .faq-q i { background: var(--gold); border-color: var(--gold); color: #0A0A0C; }
.faq-item.is-open .faq-q i::after { rotate: 0deg; opacity: 0; }

/* 0fr to 1fr: a real height animation with nothing measured in script */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-soft);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  margin: 0;
  padding: 0 clamp(0.4rem, 1vw, 0.9rem) clamp(1.1rem, 2vw, 1.6rem)
           calc(clamp(0.4rem, 1vw, 0.9rem) + clamp(0.85rem, 2vw, 1.5rem) + 2.2em);
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--ink-mid);
  max-width: 74ch;
}

@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-q i::before, .faq-q i::after, .faq-cat, .faq-q button { transition: none; }
}
@media (max-width: 900px) {
  /* More FAQs moves from beside the heading to the close of the section,
     after the topic rail and the question list rather than before them —
     the same reorder used on the reel, the diaries, the advantage cards,
     the work grid and the blog above. .faq-head has nothing left to
     render once its two children (the title block and the button) are
     handed to .faq's own grid. */
  .faq { display: grid; grid-template-columns: minmax(0, 1fr); }
  .faq-head { display: contents; }
  /* carries .faq-head's old bottom margin — display:contents drops that
     box, and with it the margin that used to open this gap */
  .faq-title { order: 1; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .faq-body {
    order: 2;
    min-width: 0;
    /* margin-inline: 0, not the auto it carries normally — a grid item
       with an auto margin in this axis shrink-to-fits its content instead
       of stretching to the column. Same fix as the diaries wall, the
       work grid and the blog list above. */
    margin-inline: 0;
    grid-template-columns: 1fr;
  }
  .faq-head .btn {
    order: 3;
    justify-self: center;
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
  }
  .faq-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .faq-cat {
    border: var(--hair) solid rgba(var(--white-rgb), 0.16);
    border-radius: var(--r-pill);
    padding: 0.5rem 0.85rem;
  }
  .faq-cat.is-on { box-shadow: none; border-color: var(--brand-lit); }
  /* the answer lines up under the question, not under its number */
  .faq-a p { padding-left: clamp(0.4rem, 1vw, 0.9rem); }
}

/* =========================================================================
   FOLD 13 — THE BLOG

   An index, not a card grid. Two folds above are already rows of cards with
   a picture on top — the courses and the advantages — and a third would turn
   a layout into a habit. An index is also the honest shape for this content:
   there are no excerpts, only titles, so the title is the biggest thing in
   the row and everything else gets out of its way.

   The rules are borders on the rows rather than a gap, because these ARE
   adjacent: a list wants its items to touch. That is the opposite call to
   the poster wall two folds up, and for the opposite reason.
   ========================================================================= */
.journal {
  position: relative;
  padding: var(--fold-y) var(--gutter);
  background: var(--void);
}
.journal-head {
  max-width: var(--page);
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.journal-title {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.journal-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--ink);
}
.journal-head .btn { flex: none; }

.journal-list {
  max-width: var(--page);
  margin: 0 auto;
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.13);
}

.post {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding: clamp(1rem, 2vw, 1.6rem) clamp(0.5rem, 1.2vw, 1rem);
  border-bottom: var(--hair) solid rgba(var(--white-rgb), 0.13);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--t-1) var(--ease);
}
.post:hover, .post:focus-visible { background: rgba(var(--white-rgb), 0.035); }
.post:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.post-no {
  display: block;
  font-family: var(--font-poster);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--gold);
  align-self: start;
  padding-top: 0.35em;
}
.post-text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.post-date {
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.post-h {
  font-family: var(--font-poster);
  /* the title is the hook and the only copy there is, so it gets the size */
  font-size: clamp(1.15rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  transition: color var(--t-1) var(--ease);
}
.post:hover .post-h, .post:focus-visible .post-h { color: var(--gold); }
.post-sub { font-size: var(--fs-sm); color: var(--ink-mid); }

.post-shot {
  display: block;
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 3 / 2;          /* the images' own ratio: 768 x 512 */
  border-radius: var(--r-sm);
  overflow: hidden;
  border: var(--hair) solid rgba(var(--white-rgb), 0.12);
  background: var(--surface-raised);
}
.post-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* Held back rather than desaturated. Two folds already use grey-to-colour
     on hover, and a third makes a motif out of a trick; dimming keeps the
     title the loudest thing in the row without repeating it. */
  filter: brightness(0.68) saturate(0.8);
  transition: filter var(--t-2) var(--ease), scale var(--t-3) var(--ease);
}
.post:hover .post-shot img, .post:focus-visible .post-shot img { filter: none; scale: 1.05; }

.post-go {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: var(--hair) solid rgba(var(--white-rgb), 0.2);
  color: var(--ink-mid);
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease);
}
.post-go svg { width: 18px; height: 18px; }
.post:hover .post-go, .post:focus-visible .post-go {
  background: var(--gold); border-color: var(--gold); color: #0A0A0C;
}

@media (prefers-reduced-motion: reduce) {
  .post, .post-h, .post-shot img, .post-go { transition: none; }
}
@media (max-width: 860px) {
  /* All posts moves from beside the heading to the close of the section,
     after the list rather than before it — the same reorder used on the
     reel, the diaries, the advantage cards and the work grid above.
     .journal-head has nothing left to render once its two children (the
     title block and the button) are handed to .journal's own grid. */
  .journal { display: grid; grid-template-columns: minmax(0, 1fr); }
  .journal-head { display: contents; }
  /* carries .journal-head's old bottom margin — display:contents drops
     that box, and with it the margin that used to open this gap */
  .journal-title { order: 1; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
  .journal-list {
    order: 2;
    min-width: 0;
    /* margin-inline: 0, not the auto it carries normally — a grid item
       with an auto margin in this axis shrink-to-fits its content instead
       of stretching to the column. Same fix as the diaries wall and the
       work grid above. */
    margin-inline: 0;
  }
  .journal-head .btn {
    order: 3;
    justify-self: center;
    margin-top: clamp(1.5rem, 4vw, 2.25rem);
  }
  .post { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(0.8rem, 3vw, 1.25rem); }
  /* the arrow goes, not the picture: the picture is the reason to click */
  .post-go { display: none; }
  .post-shot { width: clamp(84px, 26vw, 130px); }
}

/* =========================================================================
   THE CALL — and the destination for #demo

   Every "Book a Demo Class" on this page has pointed at #demo since the
   header was built, and until now there was nothing there. This band is
   that anchor.

   White on this red measures 7.44:1 at the gradient's deep end and 4.57:1
   at its lit end, so the copy is legal across the whole sweep. Gold is not
   — 2.35:1 on the lit end — which is why the page's one accent colour sits
   this section out and the button is white with a near-black label at
   18.4:1.
   ========================================================================= */
.call {
  position: relative;
  padding: clamp(2.75rem, 5.5vw, 4.5rem) var(--gutter);
  background: linear-gradient(115deg, var(--brand-deep) 0%, var(--brand-mid) 100%);
}
/* The same tile as the yellow ribbon, but carried on a layer of its own so
   its strength can differ. At full weight the patches read as stains on the
   red rather than as worn paint — the yellow can take them, this cannot.
   Offset half a tile as well, so the two bands do not wear in the same
   places; the tile repeats, but the page should not look like it does. */
.call::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../assets/grain.png") repeat 450px 260px / 900px 900px;
  opacity: 0.58;
  pointer-events: none;
}
.call-inner {
  /* above the grain layer */
  position: relative;
  z-index: 1;
  max-width: var(--page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.call-copy { display: flex; flex-direction: column; gap: 0.5rem; }
.call-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  color: var(--ink);
}
.call-p { margin: 0; font-size: var(--fs-lead); color: rgba(var(--white-rgb), 0.9); max-width: 52ch; }
.call-btn { flex: none; }
/* gold-on-gold would vanish here, so the band's button keeps a dark ring */
.call-btn:focus-visible { outline-color: #0A0A0C; }

/* =========================================================================
   THE FOOTER — the end title card

   Three things it does that the old one did not: it carries the site map
   (six course pages, seven destinations — none of which were reachable from
   the bottom of a 22,000px document), it gives the newsletter a band rather
   than a cramped third column, and it signs off with the name at title size.

   The wordmark is SVG text at textLength="1000" in a 1000-wide viewBox with
   lengthAdjust="spacing". That is what makes it span the page exactly at
   every width — the tracking opens, the glyphs keep Anton's real
   proportions, and no breakpoint has to guess a font-size.
   ========================================================================= */
.foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050609;
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.09);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 0;
}
/* the red band above does not stop dead at the border: a little of it
   bleeds down into the footer, so the two read as one ending */
/* it has to start at the footer's own top edge, not above it: .foot clips
   its overflow, so a bleed that begins off the top is simply cut away */
.foot-bleed {
  position: absolute;
  inset: 0 0 auto;
  height: 22rem;
  z-index: -1;
  pointer-events: none;
  background:
    url("../assets/grain.png") repeat 120px 40px / 900px 900px,
    radial-gradient(64% 100% at 50% 0%, rgba(var(--brand-rgb), 0.42), transparent 74%);
  /* the grain only exists where the red is, so the black below stays clean */
  -webkit-mask-image: radial-gradient(64% 100% at 50% 0%, #000, transparent 76%);
  mask-image: radial-gradient(64% 100% at 50% 0%, #000, transparent 76%);
  opacity: 0.9;
}

.foot-top {
  max-width: var(--page);
  margin: 0 auto;
  display: grid;
  /* the fourth column carries the sign-up as well as the contact details,
     so it takes the width the newsletter band used to have */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
/* The four columns and the sign-up band arrive rather than appear. Motion is
   written to --rise/--fade, never to transform directly, so the stylesheet
   keeps ownership of the box and GSAP only moves a number — the same
   contract every other revealed row on this page uses. */
/* Every generically revealed fold reads the same two properties the rest of
   the page does. Motion is written to --rise/--fade and never to transform
   directly, so the stylesheet keeps the box and GSAP only moves a number. */
[data-rise] {
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--rise, 0px), 0);
}

[data-foot-col] {
  opacity: var(--fade, 1);
  transform: translate3d(0, var(--rise, 0px), 0);
  will-change: transform, opacity;
}
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.foot-logo { display: block; }
.foot-logo img { display: block; width: clamp(110px, 11vw, 145px); height: auto; }
.foot-h {
  margin: 0;
  font-family: var(--font-poster);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot-p { margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-mid); max-width: 42ch; }
.foot-social { margin: 0.35rem 0 0; padding: 0; list-style: none; display: flex; gap: 0.6rem; }

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.foot-k {
  margin: 0;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- the site map --------------------------------------------------------
   A link list is where a footer normally gets boring, so these hover the way
   the buttons do: an arrow slides out of nothing on the left and the label
   steps aside to make room. The arrow is a pseudo-element with a fixed 1ch
   width, so the row above and below never move. */
.foot-nav { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.62rem; }
.foot-nav a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-mid);
  text-decoration: none;
  transition: color var(--t-1) var(--ease), padding-left var(--t-1) var(--ease);
}
.foot-nav a::before {
  content: '\2192';
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-6px);
  color: var(--brand-lit);
  transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.foot-nav a:hover,
.foot-nav a:focus-visible { color: var(--ink); padding-left: 1.35ch; }
.foot-nav a:hover::before,
.foot-nav a:focus-visible::before { opacity: 1; transform: translateX(0); }
.foot-all { color: var(--gold) !important; font-weight: 600; }
.foot-all::before { color: var(--gold); }

/* --- contact -------------------------------------------------------------- */
.foot-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.foot-list li { display: flex; flex-direction: column; gap: 0.25rem; }
.foot-tag {
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  opacity: 0.75;
}
.foot-list a {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-1) var(--ease);
}
.foot-list a:hover, .foot-list a:focus-visible { color: var(--gold); }
.foot-list em { font-style: normal; font-size: var(--fs-nano); color: var(--ink-mid); }

/* --- the sign-up, in the contact column ------------------------------------
   It used to be a band across the footer between the columns and the
   sign-off. It reads better as the last thing in Get in touch: an address,
   an email, a phone number and then "or leave us your email" is one list of
   ways to reach us, and the band was cutting the footer in half to say it.

   Stacked rather than side by side, because the column is 376px and a
   horizontal field plus a badged button inside that leaves a 200px input.
   -------------------------------------------------------------------------- */
.foot-signup {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.35rem, 2.6vw, 1.9rem);
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}
.foot-signup .foot-k { align-self: flex-start; }
.foot-note { margin: 0; font-size: var(--fs-nano); line-height: 1.65; color: var(--ink-mid); }
.foot-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.foot-input {
  width: 100%;
  padding: 0.85em 1.15em;
  border: var(--hair) solid rgba(var(--white-rgb), 0.2);
  border-radius: var(--r-pill);
  background: rgba(var(--void-rgb), 0.55);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  transition: border-color var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.foot-input::placeholder { color: var(--ink-mid); opacity: 0.75; }
.foot-input:focus { outline: none; border-color: var(--gold); background: rgba(var(--void-rgb), 0.8); }
/* the submit is the page's button, not a form control with its own manners */
.foot-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 0.5em 0.5em 0.5em 1.25em;
  border: var(--hair) solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-mid));
  transition:
    transform var(--t-1) var(--ease),
    background var(--t-1) var(--ease),
    color var(--t-1) var(--ease);
}
.foot-sub .btn-ico { width: 2em; height: 2em; }
.foot-sub .btn-ico svg { width: 0.95em; height: 0.95em; }
.foot-sub:hover,
.foot-sub:focus-visible {
  transform: translateY(-2px);
  color: var(--void);
  background: linear-gradient(120deg, var(--gold), #FFC24A);
}
.foot-sub:hover .btn-ico,
.foot-sub:focus-visible .btn-ico { background: var(--void); color: var(--gold); transform: scale(1.06); }
.foot-sub:hover .btn-ico svg:nth-child(1) { transform: translateX(190%); }
.foot-sub:hover .btn-ico svg:nth-child(2) { transform: translateX(0); }
.foot-sub:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.foot-said {
  margin: 0;
  font-size: var(--fs-nano);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.foot-said[hidden] { display: none; }

/* --- the sign-off ---------------------------------------------------------
   Three numbers, all fractions of a measured cap height (104 units at a
   118-unit font size — Anton's caps are 0.8814em, which is why guessing
   0.73 would have put every one of these in the wrong place):

     0    - 70%   lit
     70   - 80%   the engraving fades to nothing
     80   - 100%  below the bottom of the document

   The container is exactly the visible part. The SVG's box runs y -20 to
   110 in user space; the crop line is y 84.27, so the box shows
   (84.27 + 20) / 130 of the artwork and clips the rest — which is what makes
   the word continue past the page instead of ending on it.

   The footer's own bottom padding is zero and this is the last element, so
   the crop line IS the end of the document.
   -------------------------------------------------------------------------- */
.foot-end {
  position: relative;
  max-width: var(--page);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  /* 1000 wide by (84.27 + 20) tall: the artwork above the crop and the
     headroom over it, nothing more. 84.27 is where the real outlines put
     80% of the cap — the earlier text node measured 84.2, so the number
     moved when the geometry did. */
  aspect-ratio: 1000 / 104.27;
  overflow: hidden;
  line-height: 0;
}
.foot-mark { display: block; position: relative; width: 100%; height: auto; overflow: visible; }
/* Resting state: inked, no stroke. The draw adds the stroke and takes the
   fill away, then hands both back — so if the JS never runs, or the reader
   has asked for less motion, the name is simply already there. */
.foot-mark path {
  fill: url(#markInk);
  stroke: var(--brand-lit);
  stroke-width: 0.85;
  stroke-opacity: 0;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foot-mark .mk-tick { fill: none; stroke-opacity: 0.55; stroke-width: 1.1; }

/* --- the bottom rule ------------------------------------------------------ */
.foot-bar {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  border-top: var(--hair) solid rgba(var(--white-rgb), 0.09);
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.foot-bar p { margin: 0; font-size: var(--fs-nano); letter-spacing: 0.06em; color: var(--ink-mid); }
/* the gap between the legal line and the letters coming up through the floor */
.foot-bar { padding-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.foot-legal { margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; align-items: center; gap: 1.5rem; }
.foot-bar a {
  font-size: var(--fs-nano);
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  text-decoration: none;
  transition: color var(--t-1) var(--ease);
}
.foot-bar a:hover, .foot-bar a:focus-visible { color: var(--gold); }

/* back to top — the arrow badge again, turned to point the way it goes */
.foot-up {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border: var(--hair) solid rgba(var(--white-rgb), 0.18);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: rgba(var(--white-rgb), 0.04);
  color: var(--ink);
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.foot-up svg { grid-area: 1 / 1; width: 19px; height: 19px; transition: transform 0.42s var(--ease); }
.foot-up svg:nth-child(1) { transform: translateY(0); }
.foot-up svg:nth-child(2) { transform: translateY(190%); }
.foot-up:hover, .foot-up:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: var(--gold);
  color: var(--void);
}
.foot-up:hover svg:nth-child(1), .foot-up:focus-visible svg:nth-child(1) { transform: translateY(-190%); }
.foot-up:hover svg:nth-child(2), .foot-up:focus-visible svg:nth-child(2) { transform: translateY(0); }
.foot-up:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .call-btn, .foot-form, .foot-sub, .foot-list a, .foot-nav a, .foot-nav a::before,
  .foot-bar a, .foot-up, .foot-up svg { transition: none; }
}
@media (max-width: 1080px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .call-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-bar { flex-direction: column; align-items: flex-start; }
  .foot-legal { margin-left: 0; }
  /* anchored to the bar, not the footer: the mark is the last element now
     and a footer-anchored button would sit on top of it */
  .foot-up { position: absolute; right: 0; top: clamp(1.1rem, 2vw, 1.5rem); }
}
@media (max-width: 460px) {
  /* one column. Two-up looks tighter and measures taller: at 175px the
     course names wrap to two and three lines, so nine doubled rows come out
     longer than sixteen single ones. */
  .foot-top { grid-template-columns: 1fr; }
  /* at this width the title is 20px tall and reads as a smudge, so it goes */
  .foot-end { display: none; }
  .foot-form { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: none; gap: 0.6rem; }
  .foot-input { border: var(--hair) solid rgba(var(--white-rgb), 0.2); border-radius: var(--r-pill); background: rgba(var(--void-rgb), 0.55); }
  .foot-sub { justify-content: center; }
}

/* =========================================================================
   THE MARK DRAWING ITSELF — in the header, on first load

   No curtain. The logo that is already in the header draws itself in place
   and then inks, so the page is readable and scrollable the whole time.

   vector-effect: non-scaling-stroke is what makes this possible at header
   size. The mark's viewBox is 898 units wide and renders at 69px, so a
   stroke measured in user units comes out at a fortieth of its number —
   5 units drew a third of a pixel. Non-scaling means 0.9 is 0.9px on
   screen, whatever the mark is scaled to, which is what lets the line be
   this fine without disappearing.
   ========================================================================= */
.brand-logo.is-drawing [data-draw]:not([data-guide]) {
  fill: transparent !important;
  stroke: var(--brand-lit);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The guides carry their own stroke rather than borrowing the one above,
   so they survive the moment is-drawing comes off — that is what lets the
   fills land underneath while the outline is still fading. */
.brand-logo [data-guide] {
  fill: none;
  stroke: var(--brand-lit);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* the clipped groups are the finished letterforms; while their outlines are
   being drawn as guides, the fills stay out of the way */
.brand-logo.is-drawing [data-clipped] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo.is-drawing [data-draw] { fill: revert !important; stroke: none; }
  .brand-logo.is-drawing [data-clipped] { opacity: 1; }
}


/* =========================================================================
   THE PHONE PASS

   Everything below is a fix for something measured on a 390px viewport, not
   a precaution. Each block says what was wrong.
   ========================================================================= */
@media (max-width: 620px) {
  /* --- the hero -----------------------------------------------------------
     Measured before touching it: the block ran 534px and ended at y=726 on
     an 844px viewport. Safari's own chrome takes about 150 of those, so the
     button was landing under the toolbar — which is what "the first fold is
     not aligned" actually was.

     Centred, and every element down a size. The savings come from the
     places with the most of it: a 53px headline over three lines, and a
     five-line lead. Nothing is cut; it is set at a size a phone was
     designed for.
     -------------------------------------------------------------------- */
  .hero {
    align-items: flex-start;
    text-align: left;
    gap: clamp(0.7rem, 2.4vw, 1rem);
    margin-top: 0;
  }
  /* the rule is a left margin-mark and there is no left margin here, so it
     goes rather than being re-staged above the words */
  .hero-kicker-rule { display: none; }
  .hero-kicker {
    align-items: flex-start;
    gap: 0;
    /* 0.76, not 0.72: 0.72rem computes to 11.5px and this file sets a 12px
       floor for anything with words in it a few rules further down. Holding
       my own rule. */
    font-size: 0.76rem;
    letter-spacing: 0.18em;
  }
  .stage.is-static .hero-h,
  .hero-h { font-size: clamp(2.2rem, 10.4vw, 2.9rem); line-height: 0.98; }
  .hero-lead { font-size: 1rem; line-height: 1.55; max-width: 32ch; }
  .hero-actions { justify-content: flex-start; }
  /* the button is em-based throughout — badge, padding and gap all scale
     from the font size, so one declaration takes the whole control down
     rather than six */
  .btn { font-size: 0.8rem; }

  /* --- the phone's pinned sequence ----------------------------------------
     Only exists while site.js has said it can run: .is-seq is added by
     mobileSeq() and never appears without it, so reduced motion, no GSAP and
     no JavaScript all keep the five stills instead.
     -------------------------------------------------------------------- */
  /* the hero keeps its own fold; the sequence is the one after it */
  .stage.is-seq .mseq-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(1.25rem, 4vw, 2rem);
    min-height: 100dvh;
    /* Weighted to the top so less of the viewport trails the last line.
       The pinned box has to stay a full viewport tall — anything shorter and
       the belt below it shows through during the pin — so the only lever on
       the black after "Light it. Grade it. Ship it." is where the content
       sits inside it. Top-heavy padding moves the whole composition up and
       takes about 60px off the tail. */
    padding-block: 6.5rem 0;
  }
  /* and the pin's own 96px bottom padding goes with it: on this path the
     sequence is the last thing in the section, so that padding was 96px of
     black between the final line and the ribbon */
  .stage.is-seq .stage-pin { padding-bottom: 0; }
  .stage.is-seq .step-shot { display: none; }
  .mseq { display: none; }
  .stage.is-seq .mseq {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
    border: var(--hair) solid rgba(var(--white-rgb), 0.12);
    line-height: 0;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  }
  .mseq-canvas { width: 100%; height: auto; display: block; }

  /* one slot, five texts stacked in it. They are absolutely positioned so
     the block never changes height as they swap — a slot that resizes under
     a pinned scroll reads as the page jumping. */
  .stage.is-seq .steps {
    position: relative;
    display: block;
    min-height: 11.5rem;
  }
  .stage.is-seq .step {
    position: absolute;
    inset: 0 0 auto;
    margin: 0;
    text-align: left;
    will-change: opacity, transform;
  }
  .stage.is-seq .step-h { font-size: clamp(1.5rem, 6.6vw, 2rem); line-height: 1.05; }
  .stage.is-seq .step-p { font-size: 0.95rem; line-height: 1.55; max-width: 36ch; }

  /* --- the steps get their picture back ------------------------------------
     The scrubbed plate is the pinned path only, so on a phone the whole
     first fold — the hero and all five steps — sat on flat black. The one
     thing this section is about was missing from it entirely.

     Each step now carries the frame from its own act, pulled straight out of
     the sequence the desktop scrubs, so the phone sees the same shot being
     built. 172KB for the five, and they are lazy so only the first is
     fetched before the reader arrives. */
  /* the hero's own ground, scrimmed hard enough to carry the headline —
     measured below, not guessed */
  .hero-shot {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    height: 78vh;
    z-index: 0;
    overflow: hidden;
    line-height: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 44%, transparent);
    mask-image: linear-gradient(180deg, #000 44%, transparent);
  }
  /* Centred now, and it can be: the phone gets its own cut of the plate
     rather than a slice of the desktop one. The wide frame was 1140px of
     which a phone saw about a third — a 3x blow-up of 380 source pixels,
     which is where the softness came from — and a centred crop of it split
     the fire-fighter down her spine. This file is cut from the full-size
     plate to the shape a phone actually shows, both fighters framed in it
     already, so there is nothing left to pan to. */
  .hero-shot img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0.34;
  }
  .stage-pin { position: relative; }
  .hero { position: relative; z-index: 2; }

  .step-shot {
    display: block;
    margin: 0 0 1rem;
    border-radius: var(--r-md);
    overflow: hidden;
    border: var(--hair) solid rgba(var(--white-rgb), 0.1);
    line-height: 0;
  }
  .step-shot img { width: 100%; height: auto; display: block; }

  /* --- the reel -----------------------------------------------------------
     The strip stays. Hiding it was the obvious fix and the wrong one: the
     television's still is sourced from whichever cell is centred, so
     display:none took the picture off the screen along with the strip.

     What was actually wrong is that at 390px only slivers of the neighbours
     fit, and a greyed-out sliver reads as a rendering artifact. So the strip
     is masked to fade out well before the edges — the neighbours suggest a
     reel continuing past the frame instead of ending in a hard stub — and
     the controls move under the set, where a thumb is. */
  .strip {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  }
  /* Same problem, same fix. The diaries wall drifts, so at rest a card is
     part-way off the left edge — and a caption sliced down the middle
     ("...DENT TO WORKING ...ONAL") reads as broken rather than as a reel
     continuing past the frame. The mask makes the partial card fade out
     instead of being cut. */
  /* The fade has to be wide, and wider on the left than the right. At 14%
     the cut fell at 45% opacity — still legible, so still read as a caption
     sliced in half. The card entering on the left is the one being left
     behind and can go almost entirely; the one on the right is arriving and
     should stay readable enough to invite the swipe. */
  .diary-wall {
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 30%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent 2%, #000 30%, #000 88%, transparent);
  }
  .reel-nav button { width: 46px; height: 46px; }

  /* --- tap targets ---------------------------------------------------------
     Measured at 390px: the six course titles were 26px tall, the footer's
     sixteen site-map links 20px, the legal pair 12px, the contact lines
     22px, and "See the numbers" 26px. A finger is about 44px. These get
     padding rather than a bigger font, so the type scale is untouched and
     only the hit area grows. */
  .course-h a,
  .foot-nav a,
  .foot-list a,
  .foot-bar a {
    display: inline-block;
    padding-block: 0.55rem;
  }
  .foot-nav a, .foot-list a { padding-inline: 0.1rem; }
  /* the lists were spaced for 20px rows; with 44px rows they need less */
  .foot-nav { gap: 0.1rem; }
  .foot-list { gap: 0.6rem; }
  .foot-legal { gap: 1.1rem; }
  .brand-logo { height: 40px; }
}

/* the still belongs to the phone layout; the pinned path has the real
   sequence behind it and a second copy would sit on top of the picture */
@media (min-width: 621px) { .step-shot, .hero-shot { display: none; } }

/* =========================================================================
   THE PHONE TYPE SCALE

   The type floor above fixes sizes that were too small. This fixes sizes
   that disagree with each other — measured on a 390px viewport, where the
   same role was being set three different ways:

     section heading   28.8 / 30.4 / 32px    (eleven headings, three sizes)
     section lead      16 / 18.4px           (nine leads, two sizes)
     small meta        12 / 12.48px          (one rule opting out of nano)

   None of it is wide enough to read as hierarchy — 28.8 against 30.4 is
   not a smaller heading, it is the same heading looking wrong — and all of
   it comes from each fold clamping its own type independently, which is
   invisible at desktop width where the clamps all resolve off vw and land
   together. Below the clamp floors they stop tracking and the differences
   are frozen in.

   So the roles are named once here rather than nine times at source. Phone
   only: the desktop scale is doing what it was drawn to do.
   ========================================================================= */
@media (max-width: 620px) {
  /* one heading size. 1.9rem is the majority already — six of the eleven
     sit here — so this pulls the two outliers in rather than moving the
     page. */
  .about-h,
  .numbers-h,
  .watch-h,
  .reel-h,
  .diaries-h,
  .call-h,
  .advantage-h,
  .courses-h,
  .tales-h,
  .work-h,
  .faq-h,
  .journal-h { font-size: 1.9rem; }

  /* one lead size. Every fold's opening paragraph is the same job, so it
     reads at the same size — .numbers-p was set from --fs-body and was the
     one paragraph on the page a size under its neighbours. */
  .numbers-p { font-size: var(--fs-lead); }

  /* and the meta that had opted out of the token: 0.75rem was written to
     clear a 12px floor that --fs-nano now clears on its own at 0.78rem, so
     the hard value is only holding it 0.5px under everything else it sits
     beside. */
  .stat-note { font-size: var(--fs-nano); }
  .hero-kicker span { font-size: var(--fs-nano); }
}