/* RKBF · Commissioning sequence
   Six colours, two faces. Each scene is a system on its own opaque ground;
   scenes change by hard cut, never by drift. */

:root {
  --sc-canvas:     #06090E;
  --sc-surface:    #0D131B;
  --sc-ink:        #EDF0F2;
  --sc-ink-soft:   #9AA6B3;
  --sc-accent:     #F4A62A;   /* sodium: the colour of the platform's own lights */
  --sc-accent-ink: #140D02;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Archivo", system-ui, sans-serif; /* labels are Archivo wide, not a third family */

  --steel:   #0A0E13;
  --sheet:   #0F151D;
  --paper:   #E4E8EA;
  --graphite:#0B1016;
  --r: 4px;                   /* one radius for the page: drawing-sheet corners */
  --reg-w: 17.5rem;
  --live:  #F4A62A;
}

html { background: var(--sc-canvas); }
body { font-weight: 380; letter-spacing: 0.002em; line-height: 1.64; }

.sc-display {
  font-stretch: 74%;
  font-weight: 640;
  letter-spacing: -0.012em;
  line-height: 0.96;
}
.sc-label {
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.skip {
  position: fixed; left: var(--sc-gutter); top: 0.75rem; z-index: 100;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.6rem 1rem; border-radius: var(--r); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.scene { position: relative; }
.scene--energise { background: var(--sc-canvas); }
.scene--record   { background: var(--steel); }
.scene--sheets   { background: var(--sheet); }
.scene--advisor  { background: #070A0F; }
.scene--dc       { background: var(--graphite); }
.scene--handover { background: var(--sc-canvas); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 48px; padding: 0 1.35rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 650;
  font-size: var(--sc-t-sm); letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--r);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.btn::after { content: ""; width: 0.5em; height: 0.5em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 0.1em; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #FFB847; } }
.btn:active { transform: translateY(1px) scale(0.98); }

/* ------------------------------------------------------------------ mark */
.mark {
  position: fixed; z-index: var(--sc-z-chrome);
  left: var(--sc-gutter); top: clamp(1rem, 2.4vh, 1.75rem);
}
/* The mark sits on the same solid plate as the register, so scene copy scrolls
   BEHIND it on every ground instead of through it. */
.mark__link {
  display: flex; align-items: center; gap: 0.75rem; min-height: 44px;
  padding: 0.3rem 0.9rem 0.3rem 0.3rem;
  background: #0B1119; text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  border-radius: var(--r);
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.mark__rk {
  position: relative; display: inline-flex;
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 760;
  font-size: 1.05rem; letter-spacing: 0.16em; color: var(--sc-ink);
  padding: 0.22rem 0.45rem 0.22rem 0.6rem;
}
/* the box is its own layer so it can draw itself round the letters */
.mark__rk::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
  border-radius: 2px;
}
.mark__rk > span { display: inline-block; }

/* The letters strike like sodium lamps: each one flickers amber, dips, catches,
   and settles to ink, one after another. The outline wipes round after them.
   Plays on load, on hover or focus, and once when the platform goes live. */
@media (prefers-reduced-motion: no-preference) {
  .mark.is-striking .mark__rk > span {
    animation: rk-strike 760ms var(--sc-ease-out) both;
    animation-delay: calc(var(--i) * 120ms);
  }
  .mark.is-striking .mark__rk::before { animation: rk-frame 620ms var(--sc-ease-out) 260ms both; }
}
@keyframes rk-strike {
  0%   { color: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
  22%  { color: var(--sc-accent); }
  34%  { color: color-mix(in oklab, var(--sc-accent) 35%, transparent); }
  48%  { color: var(--sc-accent); }
  100% { color: var(--sc-ink); }
}
@keyframes rk-frame {
  from { clip-path: inset(0 100% 0 0); border-color: var(--sc-accent); }
  70%  { clip-path: inset(0 0 0 0); border-color: var(--sc-accent); }
  to   { clip-path: inset(0 0 0 0); }
}
.mark__name { font-size: var(--sc-t-sm); color: var(--sc-ink); font-weight: 500; }

/* ------------------------------------------------------ handover register */
.reg {
  position: fixed; z-index: var(--sc-z-chrome);
  right: var(--sc-gutter); top: clamp(1rem, 2.4vh, 1.75rem);
  width: var(--reg-w);
  background: #0B1119;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
  border-radius: var(--r);
  box-shadow: var(--sc-e3), var(--sc-edge);
  color: var(--sc-ink);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.reg__head {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.15rem 0.75rem;
  width: 100%; padding: 0.7rem 0.85rem 0.6rem; background: none; border: 0; text-align: left; cursor: default;
  border-bottom: 1px solid var(--sc-hairline);
}
.reg__title { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.reg__now { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--sc-ink); display: none; }
.reg__toggle { display: none; }
.reg__list, .reg__decks { list-style: none; margin: 0; padding: 0; }
.reg__list { padding: 0.35rem 0; }
.reg__row > a {
  display: grid; grid-template-columns: 0.9rem 1fr auto; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; min-height: 34px; text-decoration: none; color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .reg__row > a:hover { color: var(--sc-ink); background: rgb(255 255 255 / 0.035); } }
.reg__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent);
  justify-self: center;
  transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.reg__st {
  font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.reg__row.is-live > a { color: var(--sc-ink); background: rgb(244 166 42 / 0.07); }
.reg__row.is-live > a .reg__dot { background: var(--live); border-color: var(--live); transform: scale(1.15); }
.reg__row.is-live > a .reg__st { color: var(--live); }
.reg__row.is-done > a { color: color-mix(in oklab, var(--sc-ink) 80%, transparent); }
.reg__row.is-done > a .reg__dot { background: color-mix(in oklab, var(--sc-ink) 70%, transparent); border-color: transparent; }
.reg__row.is-done > a .reg__st { color: color-mix(in oklab, var(--sc-ink) 72%, transparent); }

/* the deck sub-register: only while the platform is being energised */
.reg__decks { display: none; margin: 0.15rem 0.85rem 0.45rem; }
.reg.decks-open .reg__decks { display: block; }
.reg__decks li {
  display: grid; grid-template-columns: 0.9rem 1fr auto; align-items: center; gap: 0.5rem;
  padding: 0.26rem 0 0.26rem 0.9rem; color: var(--sc-ink-soft); font-size: 0.75rem;
  border-left: 1px solid var(--sc-hairline);
}
.reg__decks li .reg__dot { width: 0.42rem; height: 0.42rem; }
.reg__decks li.is-on { color: var(--sc-ink); }
.reg__decks li.is-on .reg__dot { background: var(--live); border-color: var(--live); }
.reg__decks li.is-on .reg__st { color: var(--live); }

/* compact register: once the platform is live the register folds to one line and
   a strip of seven ticks, so it stops covering the scenes. Hover or focus opens it. */
.reg__ticks { grid-column: 1 / -1; display: none; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 0.45rem; }
.reg__ticks i { height: 3px; border-radius: 1px; background: color-mix(in oklab, var(--sc-ink) 18%, transparent); transition: background-color 200ms var(--sc-ease-out); }
.reg__ticks i.is-done { background: color-mix(in oklab, var(--sc-ink) 70%, transparent); }
.reg__ticks i.is-live { background: var(--live); }
@media (min-width: 861px) {
  .reg.is-compact:not(:hover):not(:focus-within) .reg__body { display: none; }
  .reg.is-compact:not(:hover):not(:focus-within) .reg__now { display: block; }
  .reg.is-compact:not(:hover):not(:focus-within) .reg__ticks { display: grid; }
  .reg.is-compact:not(:hover):not(:focus-within) .reg__head { border-bottom: 0; }
}
.reg__cta {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0.2rem 0.5rem 0.5rem; padding: 0.7rem 0.75rem; min-height: 44px;
  background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--r);
  font-family: var(--sc-font-display); font-weight: 650; font-size: 0.8125rem; letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 160ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.reg__cta::after { content: ""; width: 0.45em; height: 0.45em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .reg__cta:hover { background: #FFB847; } }
.reg__cta:active { transform: translateY(1px); }
.reg.is-closed-out .reg__cta { display: none; }

/* --------------------------------------------------------------- 1 · hero */
.hero { background: var(--sc-canvas); }
/* base and front are ONE picture split in two: they must share every transform */
.hero__layer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px), 0) scale(calc(1.03 + var(--sc-p, 0) * 0.025));
  transform-origin: 38% 62%;
}
.hero__media { z-index: 0; }
/* The packed clip shows directly as the base: site.js sizes it so its colour
   half covers the frame and the mask half falls outside, clipped. Native video
   compositing costs next to nothing; only the front plane needs WebGL. */
.hero__media video[data-sc-scrub] {
  inset: auto; left: var(--vx, 0); top: var(--vy, 0);
  width: var(--vw, 100%); height: var(--vh2, 132%); max-width: none; object-fit: fill;
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.hero.gl-live .hero__gl { opacity: 1; }
.hero__front { z-index: 22; }
.hero__front img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity 300ms var(--sc-ease-out); }
.hero.gl-live .hero__front img { opacity: 0; }

.hero__haze {
  position: absolute; inset: -10% -5% auto -5%; height: 62%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(60% 40% at 70% 70%, rgb(150 176 204 / 0.14), transparent 70%),
    linear-gradient(to bottom, transparent 30%, rgb(120 150 182 / 0.07) 62%, transparent 80%);
  transform: translate3d(calc(var(--px, 0) * -22px + var(--sc-p, 0) * -40px), calc(var(--sc-p, 0) * -6vh), 0);
  opacity: calc(1 - var(--sc-p, 0) * 0.6);
}
/* near plane: sea mist at the waterline, in front of the rig, moving faster than it */
.hero__mist {
  position: absolute; left: -20%; right: -20%; top: 50%; height: 34%; z-index: 23; pointer-events: none;
  background:
    radial-gradient(40% 36% at 22% 60%, rgb(170 192 214 / 0.16), transparent 70%),
    radial-gradient(34% 30% at 58% 52%, rgb(170 192 214 / 0.12), transparent 70%),
    radial-gradient(44% 40% at 86% 64%, rgb(170 192 214 / 0.10), transparent 70%);
  filter: blur(18px);
  transform: translate3d(calc(var(--px, 0) * -34px + var(--sc-p, 0) * -9vw), 0, 0);
}
/* the frame dissolves into the page ground at the bottom and the lead edge */
.hero__fade {
  position: absolute; inset: 0; z-index: 24; pointer-events: none;
  background: linear-gradient(to top, var(--sc-canvas) 0%, rgb(6 9 14 / 0.75) 12%, transparent 34%);
}
/* edge vignette sits with the picture, UNDER the headline, so it never dims the type */
.hero__vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, rgb(6 9 14 / 0.5) 0%, transparent 24%),
    radial-gradient(130% 90% at 55% 40%, transparent 58%, rgb(6 9 14 / 0.5) 100%);
}
/* the lead-corner scrim protects the sub-line; it sits under the headline plane */
.hero__scrim { z-index: 20; }

/* the headline lives in the sky, above the horizon, behind the derrick */
.hero__title {
  z-index: 21; inset-inline: auto; left: var(--sc-gutter); right: auto; bottom: auto;
  top: max(6.2rem, 10.5vh); max-width: none;
}
.hero__plane {
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--sc-p, 0) * -3vh + var(--py, 0) * 4px), 0);
}
.hero__h1 { font-size: min(5.6vw, 8.2vh); text-shadow: 0 2px 30px rgb(6 9 14 / 0.45); }

.hero__copy { z-index: 26; max-width: min(40rem, 58vw); bottom: clamp(2.5rem, 9vh, 6.5rem); }
.hero__sub { margin: 0 0 1.5rem; max-width: 42ch; font-size: var(--sc-t-lg); line-height: 1.45; color: #DCE2E8; }
.hero__copy--live .hero__sub { margin: 1rem 0 0; }
.hero__live {
  margin: 0; display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--sc-font-display); font-stretch: 74%; font-weight: 640;
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); line-height: 1; letter-spacing: -0.01em;
}
.hero__live-dot { width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--live); box-shadow: 0 2px 10px rgb(244 166 42 / 0.45); flex: none; }

/* ------------------------------------------------------------- 2 · record */
.record { background: var(--steel); display: grid; }
.record__label { position: absolute; left: var(--sc-gutter); top: clamp(5.5rem, 14vh, 8.5rem); margin: 0; }
.record__frame {
  position: absolute; inset: clamp(4.5rem, 11vh, 7rem) var(--sc-gutter) clamp(2rem, 6vh, 3.5rem);
  border: 1px solid var(--sc-hairline); border-radius: var(--r); pointer-events: none;
  background:
    linear-gradient(var(--sc-hairline), var(--sc-hairline)) calc(100% - 15rem) 100% / 1px 3.25rem no-repeat,
    linear-gradient(var(--sc-hairline), var(--sc-hairline)) 100% calc(100% - 3.25rem) / 15rem 1px no-repeat;
}
.stmt {
  position: absolute; left: calc(var(--sc-gutter) + clamp(1rem, 3vw, 3rem)); right: calc(var(--reg-w) + var(--sc-gutter) * 2);
  top: 50%; translate: 0 -46%;
  max-width: 62rem;
}
.stmt__meta { margin: 0 0 1.1rem; font-family: var(--sc-font-display); font-stretch: 105%; font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0.04em; color: var(--sc-accent); }
.stmt__big { font-size: clamp(3.4rem, 1.2rem + 9vw, 10.5rem); margin: 0; max-width: 12ch; }
.stmt__text { margin: 1.5rem 0 0; max-width: 52ch; font-size: var(--sc-t-lg); line-height: 1.5; color: #C5CED7; }

/* ------------------------------------------------------------- 3 · sheets */
.sheets { background: var(--sheet); display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.75rem); padding: 0 var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: 0 0 clamp(17rem, 27vw, 25rem); align-self: center; padding-right: 2rem; }
.rail__h { font-size: var(--sc-t-3xl); }
.rail__p { margin: 1.25rem 0 0; color: var(--sc-ink-soft); max-width: 32ch; }
.rail__end { flex: 0 0 clamp(15rem, 22vw, 20rem); align-self: flex-end; margin: 0 0 1rem 1rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.sheet {
  flex: 0 0 clamp(18rem, 25vw, 23rem);
  display: flex; flex-direction: column;
  background: #131B25;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 13%, transparent);
  border-radius: var(--r);
  box-shadow: var(--sc-e2), var(--sc-edge);
  min-height: min(33rem, 68svh);
}
.sheet__head { padding: 1.4rem 1.4rem 1.2rem; border-bottom: 1px solid var(--sc-hairline); }
.sheet__region { margin: 0 0 0.6rem; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); }
.sheet__title { margin: 0; font-family: var(--sc-font-display); font-stretch: 78%; font-weight: 640; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); line-height: 1; letter-spacing: -0.005em; }
.sheet__dl { margin: 0; display: flex; flex-direction: column; flex: 1; }
.sheet__dl > div { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.75rem; padding: 0.8rem 1.4rem; border-bottom: 1px solid var(--sc-hairline); }
.sheet__dl dt { font-family: var(--sc-font-display); font-stretch: 105%; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.2rem; }
.sheet__dl dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: #D3DAE1; }
.sheet__dl > div.sheet__scale { margin-top: auto; border-bottom: 0; border-top: 1px solid var(--sc-hairline); align-items: baseline; }
.sheet__scale dd { font-family: var(--sc-font-display); font-stretch: 78%; font-weight: 640; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); line-height: 1; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .sheet {
    --i: 0;
    opacity: clamp(0.55, calc(0.55 + (var(--sc-p, 0) * 7 - var(--i) + 0.6) * 0.9), 1);
    transform: translate3d(0, clamp(0px, calc((var(--i) - var(--sc-p, 0) * 7 + 0.2) * 18px), 22px), 0);
  }
  .sheet:nth-of-type(2) { --i: 1; } .sheet:nth-of-type(3) { --i: 2; } .sheet:nth-of-type(4) { --i: 3; }
  .sheet:nth-of-type(5) { --i: 4; } .sheet:nth-of-type(6) { --i: 5; }
}

/* ------------------------------------------------------ 4 · codes (paper) */
.scene--codes {
  background: var(--paper);
  --sc-ink: #10161D; --sc-ink-soft: #414C58; --sc-accent: #8C4A00; --sc-accent-ink: #FFF6E8;
  --sc-hairline: rgb(16 22 29 / 0.16);
  color: var(--sc-ink);
  background-image:
    linear-gradient(rgb(16 22 29 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(16 22 29 / 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.codes { padding-block: clamp(6rem, 12vw, 10rem) clamp(5rem, 9vw, 8rem); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem); }
.codes__intro { grid-column: 1 / span 7; }
.codes__h { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.6rem); max-width: 14ch; }
.codes__lede { margin: 1.75rem 0 0; font-size: var(--sc-t-lg); line-height: 1.5; max-width: 50ch; color: #2A333D; }
.ledger { grid-column: 1 / -1; border-top: 2px solid var(--sc-ink); }
.ledger__row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--sc-hairline); }
.ledger__row p { margin: 0; }
.ledger__role { font-family: var(--sc-font-display); font-stretch: 86%; font-weight: 620; font-size: var(--sc-t-xl); line-height: 1.12; letter-spacing: -0.005em; }
.ledger__org { color: var(--sc-ink-soft); }
.ledger__yr { font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.codes__certs { grid-column: 8 / -1; grid-row: 1; align-self: end; }
.codes__h3 { margin: 0 0 0.9rem; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.certs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.certs li { padding: 0.55rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: #25303A; }

/* ------------------------------------------------------------ 5 · advisor */
.adv { position: relative; min-height: 132svh; overflow: clip; isolation: isolate; }
.adv__far {
  position: absolute; inset: -8% -4%; z-index: 0;
  background: url("assets/advisor-far.webp") 40% 50% / cover no-repeat;
  opacity: 0.55;
  transform: translate3d(0, calc((var(--sc-p, 0.5) - 0.5) * -8vh), 0) scale(calc(1.12 - var(--sc-p, 0.5) * 0.08));
}
.adv__far::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #070A0F 0%, transparent 30%, transparent 55%, #070A0F 100%); }
.adv__name {
  position: absolute; z-index: 1; left: 0; right: 0; top: 16svh; margin: 0;
  display: flex; flex-direction: column; padding-left: var(--sc-gutter);
  font-family: var(--sc-font-display); font-stretch: 66%; font-weight: 720;
  font-size: clamp(6rem, 2rem + 17vw, 22rem); line-height: 0.82; letter-spacing: -0.02em;
  color: #3A4B5D;
  transform: translate3d(0, calc((var(--sc-p, 0.5) - 0.5) * -16vh), 0);
}
.adv__name span:last-child { color: #4A5E72; padding-left: 0.18em; }
.adv__subject {
  position: absolute; z-index: 2;
  right: max(var(--sc-gutter), 6vw); bottom: 0;
  width: auto; max-width: none; height: min(96svh, 62rem);
  transform-origin: 50% 100%;
  transform: translate3d(0, calc((0.62 - var(--sc-p, 0.5)) * 22vh), 0) scale(calc(0.94 + var(--sc-p, 0.5) * 0.08));
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.45));
}
.adv__floor { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, #070A0F 0%, #070A0F 18%, rgb(7 10 15 / 0.82) 45%, transparent 100%); pointer-events: none; }
.adv__copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(3rem, 8vh, 6rem); }
.adv__h { margin: 0 0 1.75rem; max-width: 22ch; font-family: var(--sc-font-display); font-stretch: 80%; font-weight: 620; font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.01em; }
.adv__creds { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: 0 2rem; }
.adv__creds > div { padding: 0.75rem 0; border-top: 1px solid var(--sc-hairline); }
.adv__creds dt { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); margin-bottom: 0.25rem; }
.adv__creds dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: #CBD3DB; }

/* ------------------------------------------------------- 6 · data centres */
.dc {
  background: var(--graphite);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(2rem, 4vw, 5rem);
  padding: clamp(6rem, 13vh, 9rem) var(--sc-gutter) clamp(2rem, 6vh, 4rem);
}
.dc__copy { position: relative; }
.dc__label { margin: 0 0 1rem; color: var(--sc-accent); }
.dc__h { font-size: clamp(2.8rem, 1.4rem + 4.4vw, 6rem); max-width: 10ch; }
.dc__lede { margin: 1.4rem 0 1.6rem; max-width: 46ch; color: #C3CCD5; }
.dc__stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); max-width: 34rem; }
.dc__stages li {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.55rem 0; border-bottom: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  transition: color 240ms var(--sc-ease-out);
}
.dc__stages li.is-on { color: var(--sc-ink); }
.dc__pct { font-family: var(--sc-font-display); font-stretch: 100%; font-weight: 650; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--sc-ink) 40%, transparent); transition: color 240ms var(--sc-ease-out); }
.dc__stages li.is-on .dc__pct { color: var(--sc-accent); }
.dc__plan { margin: 0; align-self: center; }
.dc__plan svg { width: 100%; height: auto; max-height: 76svh; overflow: visible; }
.plan__line path { fill: none; stroke: #B9C6D3; stroke-width: 1.4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: var(--d, 1); vector-effect: non-scaling-stroke; }
.plan__line--faint path { stroke: rgb(185 198 211 / 0.22); stroke-dasharray: 6 6; stroke-dashoffset: 0; }
.plan__line--opt path { stroke: #8392A1; }
.plan__line--hall path { stroke: var(--sc-accent); stroke-width: 1.8; }
.plan__line--feed path { stroke: rgb(244 166 42 / 0.7); stroke-width: 1.1; }
.plan__labels text { font-family: var(--sc-font-display); font-stretch: 108%; font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; fill: #C9D3DD; opacity: var(--o, 0); transition: opacity 240ms var(--sc-ease-out); }

/* ------------------------------------------------------------ 7 · handover */
.handover { padding-block: clamp(6rem, 12vw, 9rem) clamp(2rem, 4vw, 3rem); }
.cert {
  max-width: 52rem;
  background: #EDEFF0; color: #10161D;
  --sc-ink: #10161D; --sc-ink-soft: #414C58; --sc-accent: #8C4A00; --sc-hairline: rgb(16 22 29 / 0.16);
  border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--sc-e3);
  position: relative;
}
.cert::before { content: ""; position: absolute; inset: 0.6rem; border: 1px solid rgb(16 22 29 / 0.22); border-radius: 2px; pointer-events: none; }
.cert__head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 2rem; padding-bottom: 0.8rem; border-bottom: 2px solid #10161D; }
.cert__head p { margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.cert__h { font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); }
.cert__p { margin: 1.1rem 0 1.9rem; max-width: 52ch; color: #333D48; }
.cert__field { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.cert__field legend { padding: 0; margin-bottom: 0.6rem; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: #414C58; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid rgb(16 22 29 / 0.3); border-radius: var(--r);
  font-size: var(--sc-t-sm); color: #1E2731; background: #F6F7F8;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .chips label:hover span { border-color: #10161D; } }
.chips input:checked + span { background: #10161D; border-color: #10161D; color: #F4F6F7; }
.chips input:focus-visible + span { outline: 2px solid #8C4A00; outline-offset: 3px; }
.cert__sign { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2rem; }
.cert__line { flex: 1 1 18rem; border-bottom: 1px solid #10161D; padding-bottom: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.cert__line-l { font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 650; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: #414C58; }
.cert__sum { font-family: var(--sc-font-display); font-stretch: 86%; font-weight: 620; font-size: var(--sc-t-xl); line-height: 1.1; }
.btn--sign { background: #10161D; color: #F4F6F7; }
.btn--sign:focus-visible { outline-color: #8C4A00; }
@media (hover: hover) and (pointer: fine) { .btn--sign:hover { background: #26313D; } }
.cert__alt { margin: 1.5rem 0 0; font-size: var(--sc-t-sm); color: #414C58; }
.cert__alt a { color: #10161D; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.25rem; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.foot p { margin: 0; }
.cert.is-sent .cert__line { border-bottom-color: #8C4A00; }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 960px) {
  .stmt { right: var(--sc-gutter); }
}
@media (max-width: 860px) {
  :root { --reg-w: auto; }
  .mark { top: 0.6rem; }
  .mark__name { display: none; }
  .mark__link { padding: 0.3rem; }
  .reg { left: auto; right: var(--sc-gutter); top: 0.6rem; width: min(calc(100vw - var(--sc-gutter) * 2 - 7.25rem), 18rem); }
  .reg__head { cursor: pointer; min-height: 44px; padding: 0.45rem 0.75rem; border-bottom: 0; grid-template-columns: 1fr auto; }
  .reg__title { display: none; }
  .reg__ticks { display: grid; grid-row: 2; }
  .reg__now { display: block; grid-column: 1; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg__toggle { display: block; grid-column: 2; grid-row: 1; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--sc-ink); border-bottom: 2px solid var(--sc-ink); transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--sc-ease-out); }
  .reg[data-open="true"] .reg__toggle { transform: rotate(225deg) translateY(-2px); }
  .reg__body { display: none; border-top: 1px solid var(--sc-hairline); max-height: calc(100svh - 5rem); overflow: auto; }
  .reg[data-open="true"] .reg__body { display: block; }
  .reg__row > a { min-height: 44px; }

  .hero__layer { inset: 0 0 30% 0; transform: none; }
  .hero__haze, .hero__mist { display: none; }
  .hero__fade { background: linear-gradient(to top, var(--sc-canvas) 30%, rgb(6 9 14 / 0.6) 42%, transparent 58%); }
  .hero__title { top: 5.2rem; }
  .hero__h1 { font-size: min(10.5vw, 3rem); }
  .hero__copy { max-width: none; bottom: max(1.5rem, 4svh); }
  .hero__sub { font-size: var(--sc-t-base); margin: 0 0 1.25rem; }
  .hero__live { font-size: clamp(2.4rem, 10vw, 3.2rem); }

  .record__frame { inset: 4.2rem 0.75rem 1rem; }
  .record__label { top: 5.4rem; }
  .stmt { left: var(--sc-gutter); right: var(--sc-gutter); }
  .stmt__big { font-size: clamp(2.9rem, 14vw, 4.4rem); }
  .stmt__text { font-size: var(--sc-t-base); }

  .rail__lead { flex-basis: 78vw; }
  .sheet { flex-basis: 80vw; min-height: min(30rem, 72svh); }
  .rail__end { flex-basis: 70vw; }

  .codes { grid-template-columns: 1fr; }
  .codes__intro, .codes__certs, .ledger { grid-column: 1; grid-row: auto; }
  .ledger__row { grid-template-columns: 1fr; gap: 0.25rem; }

  /* phone: the portrait owns the first screen, the credentials follow in flow
     underneath instead of sitting on his jacket */
  .adv { min-height: 0; }
  .adv__far { inset: 0 -10% auto; height: 110svh; }
  .adv__name { top: 11svh; font-size: clamp(5rem, 25vw, 8rem); }
  .adv__subject { right: 50%; translate: 50% 0; bottom: auto; top: 30svh; height: 62svh; }
  .adv__floor { top: 64svh; bottom: 0; height: auto; background: linear-gradient(to bottom, transparent 0, #070A0F 26svh); }
  .adv__copy { position: relative; bottom: auto; padding-top: 86svh; padding-bottom: 3.5rem; }
  .adv__h { font-size: var(--sc-t-xl); }
  .adv__creds { grid-template-columns: 1fr; }

  .dc { grid-template-columns: 1fr; align-content: start; padding-top: 5rem; gap: 1rem; }
  .dc__plan { order: -1; }
  .dc__plan svg { max-height: 30svh; }
  .dc__h { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .dc__lede { font-size: var(--sc-t-sm); margin: 0.8rem 0 1rem; }
  .dc__stages li { padding: 0.35rem 0; font-size: 0.8125rem; }
}

/* short phones: the pinned data centre stage must fit one screen. The plan
   shrinks and the phase list gives way; the lede keeps the offer. */
@media (max-width: 860px) and (max-height: 760px) {
  .dc { padding-top: 4.4rem; }
  .dc__plan svg { max-height: 24svh; }
  .dc__label { display: none; }
  .dc__stages li:nth-child(n+2):nth-child(-n+4) { display: none; }
}
@media (max-width: 860px) and (max-height: 660px) {
  .dc__stages { display: none; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__layer, .hero__haze, .hero__mist, .hero__plane, .adv__far, .adv__name, .adv__subject { transform: none !important; }
  .plan__line path { stroke-dashoffset: 0 !important; }
  .plan__labels text { opacity: 1 !important; }
}