@charset "utf-8";

/* =========================================================================
   OFFSETEASE — design system
   Written for this site. No framework, no reset library, no runtime deps.
   ========================================================================= */

/* ---- Typefaces (self-hosted, latin + latin-ext) ------------------------- */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-latin-400700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-latin-ext-400700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------- */

:root {
  --ink: #041a1e;
  --abyss: #020f11;
  --deep: #0a3d44;
  --teal: #0f5b64;
  --bone: #faf9f5;
  --bone-2: #f2f0e9;
  --bone-3: #e9ece8;
  --gold: #c8a16a;
  --gold-ink: #8a6524;
  --gold-lift: #e0c79b;
  --mist: #7fb6bc;

  /* Surface + foreground pairs. The page is LIGHT by default; dark sections
     are opt-in punctuation, not the ground state. Sections re-declare these
     four, so every component inside inherits the right contrast without
     knowing where it sits. */
  --bg: var(--bone);
  --fg: #06282e;
  --fg-soft: rgb(6 40 46 / 0.82);
  --fg-mute: rgb(6 40 46 / 0.66);
  --rule: rgb(10 61 68 / 0.16);
  --rule-soft: rgb(10 61 68 / 0.09);
  --accent: var(--gold-ink);
  /* Small mono accents need more contrast than the display gold provides at
     11–12px, so they get their own deeper tone. */
  --accent-text: #6f5119;
  --focus: #6f5119;
  --panel: rgb(10 61 68 / 0.045);

  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1440px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 150px);
  --section-y-tight: clamp(56px, 7vw, 110px);

  --ease: cubic-bezier(0.16, 0.8, 0.24, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;

  --nav-h: 68px;
  --radius: 14px;
}

/* A second light surface, so consecutive pale sections do not read as one
   undifferentiated sheet. */
.on-bone {
  --bg: var(--bone-2);
}
.on-tint {
  --bg: var(--bone-3);
}

/* Dark punctuation — and every surface that sits over dark photography, which
   must carry the dark token set or it inherits light-on-light text. */
.on-ink,
.on-deep,
.hero,
.band,
.close,
.story,
.footer {
  /* `color` as well as the tokens: only `.section` applied it, so these
     surfaces were declaring light text and then inheriting the dark body colour. */
  color: var(--fg);
  --bg: var(--ink);
  --fg: #f5f3ee;
  --fg-soft: rgb(245 243 238 / 0.78);
  --fg-mute: rgb(245 243 238 / 0.66);
  --rule: rgb(245 243 238 / 0.16);
  --rule-soft: rgb(245 243 238 / 0.09);
  --accent: var(--gold);
  --accent-text: var(--gold);
  --focus: var(--gold);
  --panel: rgb(245 243 238 / 0.05);
}
.on-deep {
  --bg: var(--deep);
}
.on-abyss {
  --bg: var(--abyss);
  --fg: #f5f3ee;
  --fg-soft: rgb(245 243 238 / 0.78);
  --fg-mute: rgb(245 243 238 / 0.66);
  --rule: rgb(245 243 238 / 0.16);
  --rule-soft: rgb(245 243 238 / 0.09);
  --accent: var(--gold);
  --accent-text: var(--gold);
  --focus: var(--gold);
  --panel: rgb(245 243 238 / 0.05);
}

/* ---- Base --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  overflow-x: hidden; /* must sit on html, not body, or body becomes the scroll root */
}

body {
  margin: 0;
  background: var(--bone);
  color: #06282e;
  font-family: var(--sans);
  font-size: clamp(16px, 1.02vw, 17.5px);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

img,
svg,
picture,
video {
  max-width: 100%;
}
img,
video {
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: rgb(200 161 106 / 0.5);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus, var(--gold));
  outline-offset: 3px;
  border-radius: 3px;
}
/* The nav bar over the hero is a dark surface even though the page is light. */
.nav.is-top :focus-visible,
.hero :focus-visible,
.band :focus-visible,
.close :focus-visible,
.footer :focus-visible,
.story :focus-visible {
  outline-color: var(--gold);
}

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 400;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  border-radius: 999px;
  transform: translateY(-180%);
  transition: transform 0.25s var(--ease);
}
.skip:focus {
  transform: none;
}

main:focus {
  outline: none;
}

.u-hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Typography --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.03;
  text-wrap: balance;
}

.display {
  font-size: clamp(38px, 6.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.h1 {
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.02;
}
.h2 {
  font-size: clamp(26px, 3.1vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.h3 {
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

.lede {
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 48ch;
}
.body-lg {
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.62;
  color: var(--fg-soft);
  max-width: 62ch;
}
.muted {
  color: var(--fg-mute);
}

.label {
  font-family: var(--mono);
  /* Uppercase mono at 11.5px with 0.18em tracking read as texture rather than
     text. The size carries the label now, so the tracking can ease off. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}
.on-ink .label,
.on-deep .label,
.on-abyss .label,
.hero .label,
.band .label,
.close .label,
.story .label,
.footer .label {
  color: var(--mist);
}

.kicker {
  font-family: var(--mono);
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.04em;
  color: var(--accent);
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--panel);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* Kinetic headline: each word rises from behind a mask. */
.kw {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: bottom;
}
.kw__i {
  display: inline-block;
  will-change: transform;
}
.kw__i--accent {
  color: var(--gold);
}
/* The headline is readable with no JavaScript and at first paint. The rise is
   layered on only once `is-in` lands, so the value proposition is never gated
   behind a deferred script. */
.js .kinetic.is-in .kw__i {
  animation: kw-rise 0.6s var(--ease) calc(var(--kw) * 35ms) both;
}
@keyframes kw-rise {
  from {
    transform: translateY(110%) rotate(1.4deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ---- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: 960px;
}
.wrap--mid {
  max-width: 1180px;
}

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: var(--section-y-tight);
}
.section--flush {
  padding-block: 0;
}
/* First section on a page with no hero: clear the fixed header. The tight
   padding alone is smaller than the nav on a phone, so the breadcrumb was
   sliding under the logo. */
.section--top {
  /* The rendered nav is taller than --nav-h on small screens because of the
     lockup, so this leans generous rather than exact. */
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 88px));
}
.section + .section {
  border-top: 1px solid var(--rule-soft);
}
.section.on-bone + .section.on-bone,
.section.on-deep + .section.on-deep {
  border-top: 0;
}

.head {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 62ch;
  margin-bottom: clamp(36px, 4.6vw, 76px);
}
.head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
@media (max-width: 860px) {
  .head--split {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.cols {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Explicit counts, so a grid never leaves an orphan on a half-empty row. */
.cols--2 {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cols--3 {
  grid-template-columns: 1fr;
}
@media (min-width: 760px) and (max-width: 1023px) {
  /* Two-up would strand the third card, so tablets stay single column and let
     the media cards run wider instead. */
  .cols--3 {
    grid-template-columns: 1fr;
    max-width: 680px;
  }
}
@media (min-width: 1024px) {
  .cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Three narrow columns want a taller crop than two wide ones. */
@media (min-width: 1024px) {
  .cols--3.cols--media .mcard .ph {
    aspect-ratio: 4 / 3;
  }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .cols--3.cols--media .mcard .ph {
    aspect-ratio: 21 / 9;
  }
}
.cols--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--rule);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover, var(--bone));
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}
.btn:hover::before,
.btn:focus-visible::before {
  transform: none;
}
.btn:hover,
.btn:focus-visible {
  color: var(--btn-hover-fg, var(--ink));
  border-color: transparent;
}
.btn:active {
  transform: scale(0.985);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  --btn-bd: var(--gold);
  --btn-hover: var(--bone);
  font-weight: 600;
}
.btn--ghost {
  --btn-bd: rgb(10 61 68 / 0.32);
  --btn-hover: var(--deep);
  --btn-hover-fg: var(--bone);
}
.on-ink .btn--ghost,
.on-deep .btn--ghost,
.on-abyss .btn--ghost,
.hero .btn--ghost,
.band .btn--ghost,
.close .btn--ghost {
  --btn-bd: rgb(245 243 238 / 0.34);
  --btn-hover: rgb(245 243 238 / 0.16);
  --btn-hover-fg: var(--bone);
}
.btn--sm {
  padding: 11px 20px;
  font-size: 13.5px;
}

.btn__arrow {
  transition: transform 0.4s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Text link with a wiping underline. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease);
}
.tlink:hover,
.tlink:focus-visible {
  background-size: 100% 1px;
}

/* ---- Brand lockup ------------------------------------------------------- */

.lockup {
  display: block;
  height: auto;
  color: currentColor;
}
.lockup--nav {
  width: clamp(126px, 13vw, 158px);
}
.lockup--footer {
  width: clamp(160px, 19vw, 216px);
}
/* Each ray sits inside a <g> that carries the rotation, so a CSS transform
   here would compose with it rather than replace it. Nothing animates: the
   logo is present at first paint and stays still. Gating its visibility on an
   animation meant it vanished entirely whenever that animation did not run. */
.lockup__ray,
.lockup__ring {
  transform-box: fill-box;
  transform-origin: center;
}

/* The mark does not rotate. A logo that spins when you reach for it reads as a
   toy, and it is the one element on the page that must sit still. */

/* ---- Scroll progress ---------------------------------------------------- */

.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 220;
  background: rgb(10 61 68 / 0.12);
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
}
@supports (animation-timeline: scroll()) {
  .progress__bar {
    animation: progress-grow linear;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow {
    to {
      transform: scaleX(1);
    }
  }
}

/* ---- Navigation --------------------------------------------------------- */

/* Two states. Scrolled: a light bar on a light page. At the very top: fully
   transparent over the dark hero, with the light-on-dark treatment. */
.nav {
  position: fixed;
  inset: 2px 0 auto;
  z-index: 200;
  color: var(--deep);
  background: rgb(250 249 245 / 0.88);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid rgb(10 61 68 / 0.12);
  transition:
    transform 0.5s var(--ease),
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}
.nav.is-hidden {
  transform: translateY(calc(-100% - 4px));
}
.nav.is-top {
  color: var(--bone);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 44px);
  min-height: var(--nav-h);
}
.nav__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 28px);
  margin-left: auto;
}
.nav__link {
  position: relative;
  /* 48px of touch height. The underline still sits on the text, so the larger
     target is felt on a phone and invisible on a desktop. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 1px;
  font-size: 14px;
  color: currentColor;
  opacity: 0.72;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover,
.nav__link.is-current {
  opacity: 1;
}
.nav__link:hover::after,
.nav__link.is-current::after {
  transform: none;
}
.nav__cta {
  flex: 0 0 auto;
}
.nav__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.55;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.nav__toggle:hover {
  opacity: 1;
}
/* The menu is a light surface, so the close control must take the dark token
   regardless of what the nav bar behind it is doing. */
.is-menu-open .nav__toggle {
  color: var(--deep);
  border-color: rgb(10 61 68 / 0.6);
  opacity: 1;
}
.is-menu-open .nav__brand {
  color: var(--deep);
}
.nav__bars {
  display: block;
  width: 17px;
}
.nav__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.nav__bars i + i {
  margin-top: 5px;
}
html.is-menu-open,
body.is-menu-open {
  /* Both, because iOS ignores the lock on one of them depending on which
     element ends up as the scroll root. */
  overflow: hidden;
}
.is-menu-open .nav__bars i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.is-menu-open .nav__bars i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

@media (max-width: 1020px) {
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__toggle {
    display: flex;
  }
}

/* Full-screen mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  color: var(--deep);
  background: var(--bone);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s var(--ease),
    visibility 0.45s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
}
.menu__inner {
  min-height: 100%;
  padding: calc(var(--nav-h) + 34px) var(--gutter) 64px;
  display: grid;
  gap: clamp(32px, 6vw, 56px);
  align-content: start;
}
.menu__primary {
  display: grid;
  gap: 2px;
}
.menu__big {
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  opacity: 0;
  transform: translateY(14px);
}
.menu.is-open .menu__big {
  animation: menu-in 0.6s var(--ease) forwards;
  animation-delay: calc(var(--mi, 0) * 55ms + 120ms);
}
@keyframes menu-in {
  to {
    opacity: 1;
    transform: none;
  }
}
.menu__big--cta {
  color: var(--gold-ink);
}
.menu__cols {
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.menu__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.menu__col a {
  font-size: 14.5px;
  color: var(--fg-soft);
  text-decoration: none;
}
.menu__col a:hover {
  color: var(--bone);
}

/* ---- Photography -------------------------------------------------------- */

.ph {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 3 / 2);
  background-color: var(--tone, var(--deep));
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
}
.ph img {
  width: 100%;
  height: 100%;
  object-position: var(--pos, center);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.ph img.is-loaded,
.no-js .ph img {
  opacity: 1;
}
.ph--free {
  aspect-ratio: auto;
  height: 100%;
}

/* Slow drift on hover for interactive media. */
.ph--zoom img {
  transition:
    opacity 0.7s ease,
    transform 1.5s var(--ease),
    filter 1.5s ease;
}
a:hover > .ph--zoom img,
.card:hover .ph--zoom img {
  transform: scale(1.055);
  filter: saturate(1.07);
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

/* Duotone scrim so any photograph sits inside the palette. */
.scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Three layers, because the photography is not all dark: a vertical fade, a
   corner glow, and a left-weighted wash that guarantees the text column has a
   dark ground even under a bright photograph like the tree nursery. */
.scrim--hero {
  background:
    linear-gradient(
      100deg,
      rgb(4 26 30 / 0.82) 0%,
      rgb(4 26 30 / 0.62) 38%,
      rgb(4 26 30 / 0.12) 72%,
      rgb(4 26 30 / 0) 100%
    ),
    linear-gradient(
      180deg,
      rgb(4 26 30 / 0.9) 0%,
      rgb(4 26 30 / 0.62) 48%,
      rgb(10 61 68 / 0.78) 76%,
      var(--ink) 100%
    ),
    radial-gradient(90% 70% at 12% 96%, rgb(15 91 100 / 0.62) 0%, rgb(4 26 30 / 0) 62%);
}

/* ...and lift it only on the home hero, which is the one carrying a clip worth
   seeing and the only one whose media is reliably dark. Measured: at these
   values the gold accent word still clears 3:1 over the brightest frame of
   canopy-fog, where the inner heroes — shorter, on bright skies — do not. */
.hero:not(.hero--inner):not(.hero--compact) .scrim--hero {
  background:
    linear-gradient(
      100deg,
      rgb(4 26 30 / 0.78) 0%,
      rgb(4 26 30 / 0.42) 34%,
      rgb(4 26 30 / 0.04) 62%,
      rgb(4 26 30 / 0) 100%
    ),
    linear-gradient(
      180deg,
      rgb(4 26 30 / 0.52) 0%,
      rgb(4 26 30 / 0.18) 44%,
      rgb(10 61 68 / 0.68) 78%,
      var(--ink) 100%
    ),
    radial-gradient(90% 70% at 12% 96%, rgb(15 91 100 / 0.5) 0%, rgb(4 26 30 / 0) 62%);
}
@media (max-width: 860px) {
  /* No room for a side wash on a phone, so the vertical one does all the work.
     It is shaped to the content rather than applied flat: the top third holds
     no text and stays light enough to read as a photograph, then the scrim
     steps up hard at the eyebrow and holds. Measured — the flat version left
     the 11.5px eyebrow at 3.28:1 on sixteen pages, because `cover` on a 375px
     box crops to a bright centre strip that the desktop framing never shows. */
  .scrim--hero {
    background:
      linear-gradient(
        180deg,
        rgb(4 26 30 / 0.72) 0%,
        rgb(4 26 30 / 0.6) 22%,
        rgb(4 26 30 / 0.88) 36%,
        rgb(10 61 68 / 0.9) 76%,
        var(--ink) 100%
      );
  }
}
.scrim--band {
  background: linear-gradient(
    90deg,
    rgb(4 26 30 / 0.92) 0%,
    rgb(4 26 30 / 0.68) 42%,
    rgb(4 26 30 / 0.3) 100%
  );
}
.scrim--soft {
  background: linear-gradient(180deg, rgb(4 26 30 / 0.2), rgb(4 26 30 / 0.78));
}

/* Faint engineering grid, used over dark photography. */
.grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(245 243 238 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(245 243 238 / 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
}

/* ---- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  overflow: clip;
  background: var(--ink);
  isolation: isolate;
}
.hero--inner {
  min-height: min(86svh, 820px);
}
.hero__bg {
  position: absolute;
  inset: -14% 0;
  z-index: -2;
}
.hero__bg .ph,
.hero__bg img {
  width: 100%;
  height: 100%;
}
.hero__bg .ph {
  aspect-ratio: auto;
}
.hero__bg img {
  opacity: 0.56;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(56px, 11vw, 130px)) var(--gutter)
    clamp(44px, 7vw, 92px);
}
.hero__eyebrow {
  margin-bottom: clamp(18px, 3vw, 32px);
}
/* Belt and braces where a glyph lands on a bright patch of sky or fog. */
.hero .label,
.hero h1,
.hero .lede {
  text-shadow: 0 1px 20px rgb(4 26 30 / 0.75);
}
/* Over photography the 11.5px mono eyebrow does not clear 4.5:1 in its default
   teal — measured worst case 3.19:1 on the EAC hero and 3.81:1 on the service
   heroes at 375px. A text-shadow does not count toward contrast, so this is a
   colour change. It applies to every hero because the eyebrow always sits in
   the top-left, where the scrim is at its strongest and the ground is reliably
   dark; a brighter teal there only ever helps. */
.hero .label {
  color: #9ac8cd;
}
.hero__lede {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 5vw, 76px);
  align-items: flex-end;
  margin-top: clamp(26px, 4vw, 50px);
}
.hero__scan {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(200 161 106 / 0.8), transparent);
  animation: scan 9s cubic-bezier(0.5, 0, 0.5, 1) infinite 1.8s;
  pointer-events: none;
}
@keyframes scan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(min(74vh, 900px));
    opacity: 0;
  }
}

/* The brand mark, blown up into an orbital field behind the hero. */
.orbit {
  position: absolute;
  top: -9vw;
  right: -7vw;
  width: min(52vw, 780px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}
.orbit__rays {
  position: absolute;
  inset: 0;
  animation: spin 150s linear infinite;
}
.orbit__rays rect {
  fill: rgb(200 161 106 / 0.34);
}
.orbit__rays rect:nth-child(2n) {
  fill: rgb(245 243 238 / 0.17);
}
.orbit__rays rect:nth-child(3n) {
  fill: rgb(127 182 188 / 0.22);
}
.orbit__ring {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  border: 1px solid rgb(245 243 238 / 0.16);
  border-radius: 999px;
}
.orbit__ring--a {
  width: 38%;
  aspect-ratio: 1;
  border-color: rgb(245 243 238 / 0.3);
}
.orbit__ring--b {
  width: 64%;
  aspect-ratio: 1;
  animation: pulse 9s ease-in-out infinite;
}
.orbit__ring--c {
  width: 92%;
  aspect-ratio: 1;
  border-color: rgb(245 243 238 / 0.08);
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.75;
  }
}

.scroll-cue {
  margin-top: clamp(26px, 3.5vw, 44px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.scroll-cue::before {
  content: '';
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgb(200 161 106 / 0.9), transparent);
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(9px);
  }
}

/* ---- Stat strip --------------------------------------------------------- */

.stats {
  margin-top: clamp(38px, 5.5vw, 88px);
  display: grid;
  /* 150px keeps a 375px phone at two columns instead of one very tall stack */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}
.stats__cell {
  background: var(--bg);
  padding: 20px 18px 17px;
}
.on-ink .stats__cell,
.on-deep .stats__cell,
.on-abyss .stats__cell,
.hero .stats__cell {
  background: rgb(4 26 30 / 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.stats__v {
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats__u {
  font-size: 0.5em;
  color: var(--fg-mute);
  letter-spacing: 0;
}
.stats__l {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--fg-soft);
  margin-top: 9px;
}

/* ---- Chapter rail ------------------------------------------------------- */

/* The rail lives in the page gutter. Labels stay collapsed so they can never
   sit on top of the copy; they slide out on hover, or stay out on screens wide
   enough to hold them clear of the content column. */
.rail {
  position: fixed;
  left: clamp(14px, calc((100vw - var(--wrap)) / 2 - 64px), 40px);
  top: 50%;
  translate: 0 -50%;
  z-index: 150;
  display: none;
  gap: 14px;
  pointer-events: none;
}
@media (min-width: 1240px) {
  .js .rail {
    display: grid;
  }
}
.rail__dot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(6 40 46 / 0.72);
  transition: color 0.5s ease;
}
.rail__dot span {
  /* max-width, not opacity alone: a collapsed-but-laid-out label would form an
     invisible column over the copy and swallow clicks. */
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    opacity 0.4s var(--ease),
    max-width 0.45s var(--ease);
}
.rail:hover .rail__dot span,
.rail__dot:focus-visible span {
  max-width: 12rem;
  opacity: 1;
}
@media (min-width: 1700px) {
  .rail__dot span {
    max-width: 12rem;
    opacity: 0.6;
  }
  .rail__dot.is-active span {
    opacity: 1;
  }
}
.rail__dot i {
  display: block;
  height: 1px;
  width: 12px;
  flex: 0 0 auto;
  background: rgb(6 40 46 / 0.35);
  transition:
    width 0.5s var(--ease),
    background 0.5s ease;
}
.rail__dot.is-active {
  color: var(--deep);
}
.rail__dot.is-active i {
  width: 30px;
  background: var(--gold-ink);
}
/* `is-dark` is set by the controller when the tracked section is a dark one. */
.rail.is-dark .rail__dot {
  color: rgb(245 243 238 / 0.5);
}
.rail.is-dark .rail__dot i {
  background: rgb(245 243 238 / 0.32);
}
.rail.is-dark .rail__dot.is-active {
  color: var(--bone);
}
.rail.is-dark .rail__dot.is-active i {
  background: var(--gold);
}

/* ---- Reveal ------------------------------------------------------------- */

.js .reveal {
  /* 0.85s of fade plus up to 640ms of stagger meant a block could sit
     half-legible for a second and a half. Anyone scrolling at reading speed
     met grey text, which reads as a slow site rather than a considered one.
     The move survives at less than half the duration; only the waiting goes. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.4s var(--ease-out) var(--rd, 0ms),
    transform 0.55s var(--ease-out) var(--rd, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
.js .reveal--wipe {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease) var(--rd, 0ms);
}
.js .reveal--wipe.is-in {
  clip-path: inset(0 0 0 0);
}
.js .reveal--scale {
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 0.45s var(--ease-out) var(--rd, 0ms),
    transform 1.4s var(--ease) var(--rd, 0ms);
}
.js .reveal--scale.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Numbers ------------------------------------------------------------ */

.fig {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.fig__pre,
.fig__suf {
  color: var(--fg-mute);
  font-size: 0.55em;
}
.fig__label {
  display: block;
}

/* ---- Cards -------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 0.5s var(--ease),
    background 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 50%),
    rgb(200 161 106 / 0.13),
    transparent 60%
  );
  transition: opacity 0.45s ease;
}
a.card:hover,
a.card:focus-visible {
  border-color: rgb(200 161 106 / 0.55);
  background: rgb(200 161 106 / 0.05);
}
a.card:hover::after {
  opacity: 1;
}
.card__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent-text);
}
.card__t {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.card__b {
  color: var(--fg-soft);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
}
.card__go {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--accent);
}
.card__go svg {
  transition: transform 0.4s var(--ease);
}
a.card:hover .card__go svg {
  transform: translateX(5px);
}

/* Media card: photograph above the text. */
.mcard {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
}
.mcard .ph {
  aspect-ratio: 16 / 10;
}
.mcard__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 30px);
}

/* Fine-pointer 3D tilt. */
@media (hover: hover) and (pointer: fine) {
  .js .tilt {
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease);
  }
  .js .tilt.is-tilting {
    transition: transform 0.12s linear;
  }
}

/* ---- Numbered list / ladder -------------------------------------------- */

.ladder {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  counter-reset: ladder;
}
.ladder__row {
  display: grid;
  grid-template-columns: clamp(52px, 7vw, 96px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 44px);
  padding: clamp(22px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  position: relative;
}
.ladder__row::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 1.2s var(--ease);
}
.ladder__row.is-in::before {
  width: 100%;
}
.ladder__n {
  font-family: var(--mono);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.16em;
  color: var(--accent-text);
  padding-top: 0.35em;
}
.ladder__t {
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin-bottom: 8px;
}
.ladder__b {
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 0;
}
@media (max-width: 640px) {
  .ladder__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---- The Five Checks ---------------------------------------------------- */

.checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 940px) {
  .checks {
    grid-template-columns: 1fr;
  }
}
.checks__dial {
  position: relative;
  width: min(100%, 400px);
  justify-self: center;
  display: grid;
  justify-items: center;
}
.checks__dial svg {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  overflow: visible;
}
.checks__ray {
  fill: rgb(10 61 68 / 0.14);
  transition:
    fill 0.6s var(--ease),
    filter 0.6s var(--ease);
}
.on-ink .checks__ray,
.on-deep .checks__ray,
.on-abyss .checks__ray,
.story .checks__ray {
  fill: rgb(245 243 238 / 0.15);
}
.checks__ray.is-lit {
  fill: var(--gold-ink);
  filter: drop-shadow(0 0 14px rgb(200 161 106 / 0.4));
}
.on-ink .checks__ray.is-lit,
.on-deep .checks__ray.is-lit,
.on-abyss .checks__ray.is-lit,
.story .checks__ray.is-lit {
  fill: var(--gold);
  filter: drop-shadow(0 0 16px rgb(200 161 106 / 0.5));
}
.checks__ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  opacity: 0.2;
}
/* The readout sits below the mark: the hub circle is only 44px across at
   display size, so a numeral inside it would collide with the stroke. */
.checks__count {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  font-size: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.checks__count b {
  font-family: var(--sans);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.checks__list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.checks__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: clamp(15px, 1.7vw, 22px) 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0.56;
  transition: opacity 0.6s var(--ease);
}
.checks__item.is-lit {
  opacity: 1;
}
.no-js .checks__item {
  opacity: 1;
}
.checks__i {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-text);
  padding-top: 0.5em;
}
.checks__h {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.checks__d {
  color: var(--fg-soft);
  font-size: 15.5px;
  margin: 4px 0 0;
}
.checks__close {
  margin-top: clamp(22px, 3vw, 36px);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--accent);
}

/* ---- Proof (cited research) -------------------------------------------- */

.proof {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
}
.proof__fig {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.proof__figl {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--fg-soft);
  margin-top: 8px;
  max-width: 22ch;
  white-space: normal;
}
.proof__t {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-soft);
  margin: 0;
}
.proof__t em {
  font-style: normal;
  color: var(--fg);
}
@media (max-width: 720px) {
  .proof {
    grid-template-columns: 1fr;
  }
}

/* ---- Scrollytelling ----------------------------------------------------- */

.story {
  position: relative;
  background: var(--ink);
}
.story__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.story__layers {
  position: absolute;
  inset: 0;
}
.story__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition:
    opacity 1.1s var(--ease),
    transform 1.7s var(--ease);
  transform: scale(1.06);
}
.story__layer.is-on {
  opacity: 1;
  transform: none;
}
.story__layer .ph,
.story__layer img {
  width: 100%;
  height: 100%;
}
.story__layer .ph {
  aspect-ratio: auto;
}
.story__layer img {
  opacity: 0.46;
}
.story__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(26px, 5vw, 70px);
  align-items: center;
}
.story__track {
  display: flex;
  gap: clamp(18px, 2.4vw, 30px);
}
.story__spine {
  flex: 0 0 2px;
  background: var(--rule);
  border-radius: 2px;
  position: relative;
  align-self: stretch;
  min-height: 190px;
}
.story__spine i {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  width: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: height 0.4s linear;
}
.story__scenes {
  position: relative;
  flex: 1 1 auto;
  display: grid;
}
.story__scene {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity 0.75s var(--ease),
    transform 0.85s var(--ease),
    filter 0.75s var(--ease);
  pointer-events: none;
}
.story__scene.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
.story__eyebrow {
  margin-bottom: 14px;
}
.story__h {
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 14px;
}
.story__b {
  color: var(--fg-soft);
  max-width: 42ch;
  font-size: clamp(15.5px, 1.2vw, 18px);
}
.story__dial {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(46vw, 400px);
}
.story__count {
  position: absolute;
  left: 50%;
  bottom: -40px;
  translate: -50% 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
}

@media (max-width: 940px) {
  .story {
    height: auto !important;
  }
  .story__pin {
    position: relative;
    height: auto;
    overflow: visible;
    padding-block: var(--section-y);
  }
  .story__inner {
    grid-template-columns: 1fr;
  }
  .story__dial {
    display: none;
  }
  .story__scenes {
    display: grid;
    gap: clamp(40px, 9vw, 64px);
  }
  .story__scene {
    grid-area: auto;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .story__layer:not(:first-child) {
    display: none;
  }
  .story__layer:first-child {
    opacity: 1;
    transform: none;
  }
}

/* Without JavaScript the pin controller never runs, so unpin the act and show
   every scene rather than stranding the reader on scene one. */
.no-js .story {
  height: auto !important;
}
.no-js .story__pin {
  position: relative;
  height: auto;
  overflow: visible;
  padding-block: var(--section-y);
}
.no-js .story__inner {
  grid-template-columns: 1fr;
}
.no-js .story__dial {
  display: none;
}
.no-js .story__scenes {
  display: grid;
  gap: clamp(40px, 9vw, 64px);
}
.no-js .story__scene {
  grid-area: auto;
  opacity: 1;
  transform: none;
  filter: none;
}
.no-js .story__layer:not(:first-child) {
  display: none;
}
.no-js .story__layer:first-child {
  opacity: 1;
  transform: none;
}

/* ---- Split comparison --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.split__side {
  background: var(--bone);
  padding: clamp(26px, 3.2vw, 44px);
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
}
.split__side--high {
  background: linear-gradient(160deg, rgb(200 161 106 / 0.22), var(--bone) 72%);
}
.on-ink .split__side,
.on-deep .split__side {
  background: var(--ink);
}
.on-ink .split__side--high,
.on-deep .split__side--high {
  background: linear-gradient(160deg, rgb(200 161 106 / 0.16), transparent 70%);
}
.split__l {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.split__v {
  font-size: clamp(38px, 5.4vw, 74px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.split__side--high .split__v {
  color: var(--accent);
}
.split__n {
  color: var(--fg-soft);
  max-width: 34ch;
  margin: 0;
}
.split__bar {
  height: 4px;
  border-radius: 4px;
  background: var(--rule);
  overflow: hidden;
  margin-top: 6px;
}
.split__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: currentColor;
  transition: width 1.4s var(--ease) 0.2s;
}
.split__side.is-in .split__bar i {
  width: var(--w, 100%);
}

/* ---- Band (full-bleed photograph with copy) ----------------------------- */

.band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(74vh, 640px);
  overflow: clip;
  isolation: isolate;
}
.band__bg {
  position: absolute;
  inset: -14% 0;
  z-index: -2;
}
.band__bg .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.band__bg img {
  width: 100%;
  height: 100%;
  opacity: 0.58;
}
.band__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(44px, 8vw, 96px) var(--gutter);
}
.band__h {
  font-size: clamp(26px, 3.8vw, 56px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
  max-width: 20ch;
}
.band__b {
  color: var(--fg-soft);
  max-width: 52ch;
  margin-top: 16px;
}

/* ---- Pills / tag lists -------------------------------------------------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pills li {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg-soft);
  transition:
    border-color 0.4s var(--ease),
    color 0.4s var(--ease);
}
.pills li:hover {
  border-color: var(--accent);
  color: var(--fg);
}

/* ---- Bulleted approach list -------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.steps li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-soft);
}
.steps li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.32em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(18px, 2.2vw, 28px) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: clamp(16.5px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--fg);
  transition: color 0.3s ease;
}
.faq__q:hover {
  color: var(--accent);
}
.faq__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.faq__icon::after {
  rotate: 90deg;
}
.faq__q[aria-expanded='true'] .faq__icon::after {
  transform: scaleX(0);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  color: var(--fg-soft);
  max-width: 66ch;
  padding-bottom: clamp(18px, 2.2vw, 28px);
  margin: 0;
}
.no-js .faq__a {
  grid-template-rows: 1fr;
}

/* ---- Service index ------------------------------------------------------ */

.svc-group + .svc-group {
  margin-top: clamp(44px, 6vw, 84px);
}
.svc-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding-bottom: 16px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--rule);
}
.svc-group__t {
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.svc-group__b {
  color: var(--fg-mute);
  font-size: 14.5px;
  margin: 0;
}

/* ---- Related ------------------------------------------------------------ */

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}

/* ---- Breadcrumb --------------------------------------------------------- */

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}
/* An insight title can run to 95 characters, which wrapped the trail onto a
   second line and pushed the eyebrow and h1 down the page. Truncate the
   current page only — the full text stays in the DOM for assistive tech and
   in the BreadcrumbList schema. */
.crumb li {
  min-width: 0;
  max-width: 100%;
}
/* The separator is a ::before on the li, so making the label a block pushed
   it onto its own line and left the slash stranded above. A flex row keeps
   the slash and the (truncating) label on one line together. */
.crumb li:last-child {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
}
.crumb li:last-child [aria-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumb a {
  text-decoration: none;
  color: inherit;
}
.crumb a:hover {
  color: var(--fg);
}
.crumb li + li::before {
  content: '/';
  margin-right: 8px;
  opacity: 0.5;
}

/* ---- Forms -------------------------------------------------------------- */

.form {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.field {
  display: grid;
  gap: 8px;
}
.field__lab {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgb(6 40 46 / 0.9);
  cursor: pointer;
}
.field__lab em {
  font-style: normal;
  color: var(--fg-mute);
}
.on-ink .field__lab,
.on-deep .field__lab {
  color: rgb(245 243 238 / 0.92);
}
.field .req {
  color: var(--accent);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 15px 16px;
  background: var(--panel);
  /* Control boundaries need 3:1, which the decorative --rule token does not give. */
  border: 1px solid rgb(10 61 68 / 0.42);
  border-radius: 8px;
  color: var(--fg);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  background: rgb(200 161 106 / 0.05);
}
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #d98b7a;
}
.field__err {
  font-size: 13px;
  color: #a8402a;
  min-height: 0;
}
.on-ink .field__err,
.on-deep .field__err,
.on-abyss .field__err {
  color: #e39e8e;
}
.field--pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.form__note {
  font-size: 13.5px;
  color: var(--fg-mute);
}
.form__status {
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  font-size: 15px;
}
.form__status[data-tone='ok'] {
  border-color: rgb(127 182 188 / 0.6);
  background: rgb(127 182 188 / 0.1);
}
.form__status[data-tone='err'] {
  border-color: #c97b68;
  background: rgb(201 123 104 / 0.1);
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Contact detail list ------------------------------------------------ */

.contacts {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.contacts a,
.contacts div {
  background: var(--bg);
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  text-decoration: none;
  transition: color 0.3s ease;
}
.contacts a:hover {
  color: var(--accent);
}
.contacts dt,
.contacts .k {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  min-width: 110px;
}
.contacts .v {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ---- Sources ------------------------------------------------------------ */

.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  counter-reset: src;
}
.sources li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(16px, 2vw, 24px) 0;
  border-bottom: 1px solid var(--rule);
}
.sources__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-text);
  padding-top: 0.3em;
}
.sources__t {
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sources__d {
  color: var(--fg-soft);
  font-size: 15px;
  margin: 5px 0 0;
}
.sources__v {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-mute);
  margin: 8px 0 0;
  word-break: break-word;
}

/* ---- CTA close ---------------------------------------------------------- */

.close {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.close__bg {
  position: absolute;
  inset: -14% 0;
  z-index: -2;
}
.close__bg .ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.close__bg img {
  width: 100%;
  height: 100%;
  opacity: 0.36;
}
.close__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(80px, 12vw, 170px) var(--gutter) clamp(72px, 10vw, 140px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  justify-items: start;
}
.close__h {
  font-size: clamp(30px, 5.2vw, 76px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: 18ch;
}
.close__b {
  color: var(--fg-soft);
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 19px);
}

/* Contextual links inside body copy. Underlined rather than coloured: these
   sit mid-sentence in long paragraphs, where a colour change alone is both
   easy to miss and, for anyone who cannot distinguish it, no signal at all. */
.clink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.clink:hover {
  color: var(--teal);
  text-decoration-color: currentColor;
}
.on-ink .clink,
.on-deep .clink {
  text-decoration-color: var(--mist);
}
.on-ink .clink:hover,
.on-deep .clink:hover {
  color: var(--mist);
}

/* A mega-menu heading that is also a link. It has to stay visually a heading —
   the column below it is the list of links — so it takes an underline on hover
   rather than link colour at rest. */
.mega__t a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.mega__t a:hover {
  color: var(--teal);
  border-bottom-color: currentColor;
}

/* Group heading on the ESG index, now a route into that group's hub. */
.svc-group__t a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.svc-group__t a:hover {
  color: var(--teal);
  border-bottom-color: currentColor;
}
.svc-group__go {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.svc-group__go:hover {
  border-bottom-color: currentColor;
}

/* The hub link sits above the services it introduces, so it is marked as the
   parent rather than reading as another sibling in the list. */
.menu__ov {
  font-weight: 500;
  color: var(--mist) !important;
}

/* ---- Direct answer, fact table, timeline -------------------------------- */

.answer {
  max-width: 68ch;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  background: var(--panel);
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
}
.answer .label {
  margin-bottom: 10px;
}
.answer__t {
  margin: 0;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  color: var(--fg);
}
.on-ink .answer,
.on-deep .answer {
  background: rgb(245 243 238 / 0.06);
  border-left-color: var(--mist);
}

/* Service-page fact tables reuse .table-wrap/.cmp-table above, so the site has
   one table format rather than two that merely resemble each other. Only the
   source line under a value is particular to them. */
.cmp-table .src {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}
.cmp-table tbody th {
  width: 34%;
}

.tl {
  margin-top: clamp(26px, 3.2vw, 40px);
}
.tl__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: tl;
}
.tl__i {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 15px 0 15px 22px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.tl__i:last-child {
  border-bottom: 1px solid var(--rule);
}
/* The marker encodes state, not decoration: filled means the date has passed. */
.tl__i::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  background: transparent;
}
.tl__i.is-done::before {
  background: var(--teal);
}
.on-ink .tl__i::before,
.on-deep .tl__i::before {
  border-color: var(--mist);
}
.on-ink .tl__i.is-done::before,
.on-deep .tl__i.is-done::before {
  background: var(--mist);
}
.tl__w {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.on-ink .tl__w,
.on-deep .tl__w {
  color: var(--mist);
}
.tl__d {
  color: var(--fg-soft);
  font-size: 16px;
}
@media (max-width: 620px) {
  .tl__i {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
}

/* ---- Closing enquiry form ----------------------------------------------- */
/* A service page ends with the form rather than a button to a generic contact
   page. The constraint that shapes everything here: a form is a working
   control, not decoration, so legibility beats atmosphere at every point where
   the two disagree. */

.close--form {
  /* The plain closing section is cinematic and can afford 170px of air. This
     one has to hold a six-field form above the fold on a laptop. */
  --close-pad: clamp(56px, 7vw, 104px);
}
.close--form .close__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  justify-items: stretch;
  padding-block: var(--close-pad);
}
@media (max-width: 900px) {
  .close--form .close__inner--split {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The hero scrim is left-weighted, which leaves the right-hand half — exactly
   where the form sits — with almost no cover. This one darkens the whole
   section so the panel is never asked to carry the contrast on its own. */
.close--form::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(4 26 30 / 0.62) 0%, rgb(4 26 30 / 0.78) 100%);
  pointer-events: none;
}
.close--form .close__h {
  font-size: clamp(28px, 3.4vw, 46px);
  max-width: 15ch;
}

.close__say {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  align-content: start;
  padding-top: clamp(0px, 1vw, 10px);
}
.close__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border-top: 1px solid rgb(245 243 238 / 0.18);
}
.close__facts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgb(245 243 238 / 0.18);
  font-size: 15.5px;
  color: var(--bone);
}
.close__facts li > span:first-child {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  min-width: 72px;
}
.close__facts a {
  color: var(--bone);
  text-decoration: none;
  border-bottom: 1px solid rgb(245 243 238 / 0.35);
}
.close__facts a:hover {
  border-bottom-color: var(--gold);
}

/* The panel is nearly opaque on purpose. At 0.72 the photograph read straight
   through the input boxes and the field labels sat on whatever happened to be
   behind them, which is the difference between a form and a picture of one. */
.close__form {
  background: rgb(4 22 26 / 0.94);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgb(245 243 238 / 0.16);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.85);
}
.form--compact {
  gap: clamp(15px, 1.7vw, 19px);
}
.form--compact .field {
  gap: 7px;
}
.form--compact .field__lab {
  font-size: 14px;
  font-weight: 500;
  color: rgb(245 243 238 / 0.95);
}
.form--compact .field__lab em {
  color: rgb(245 243 238 / 0.55);
}
.form--compact .field input,
.form--compact .field textarea {
  background: rgb(245 243 238 / 0.06);
  /* 0.34 read as a hairline against the panel. A control needs an edge you can
     find without hunting for it. */
  border: 1px solid rgb(245 243 238 / 0.42);
  border-radius: 10px;
  padding: 14px 15px;
  color: var(--bone);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
}
.form--compact .field input::placeholder,
.form--compact .field textarea::placeholder {
  color: rgb(245 243 238 / 0.45);
}
.form--compact .field input:hover,
.form--compact .field textarea:hover {
  border-color: rgb(245 243 238 / 0.6);
}
.form--compact .field input:focus,
.form--compact .field textarea:focus {
  border-color: var(--gold);
  background: rgb(200 161 106 / 0.12);
  outline: 2px solid rgb(200 161 106 / 0.35);
  outline-offset: 1px;
}
.form--compact .field textarea {
  min-height: 96px;
}
.form--compact .field__err {
  /* #a8402a is tuned for the bone ground and vanishes against ink. */
  color: #f4a795;
  font-size: 13px;
}
.form--compact .consent {
  align-items: start;
  gap: 12px;
}
.form--compact .consent input[type='checkbox'] {
  /* 16px was a hard target to hit and easy to miss entirely on a dark panel. */
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--gold);
  border-color: rgb(245 243 238 / 0.5);
}
.form--compact .consent label,
.form--compact .form__note {
  color: rgb(245 243 238 / 0.8);
  font-size: 14px;
  line-height: 1.5;
}
.form--compact .consent a {
  color: var(--bone);
}
.form--compact .btns {
  margin-top: 4px;
}
.form--compact .form__status[data-tone='ok'] {
  color: var(--mist);
}
.form--compact .form__status[data-tone='err'] {
  color: #f4a795;
}
@media (max-width: 560px) {
  .close__form {
    padding: 22px 18px;
    border-radius: 14px;
  }
  /* A primary action should not be a small pill on a phone. */
  .form--compact .btns,
  .form--compact .btns .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Footer ------------------------------------------------------------- */

.footer {
  background: var(--abyss);
  padding: clamp(52px, 6vw, 96px) var(--gutter) clamp(26px, 3vw, 40px);
}
.footer__wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* 1 — the footer should do work, not just list links */
.fcta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 56px);
  align-items: end;
  padding-bottom: clamp(34px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.fcta__h {
  margin: 0;
  font-size: clamp(25px, 3.2vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 18ch;
}
.fcta__side {
  display: grid;
  justify-items: start;
  gap: 12px;
}
.fcta__n {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-mute);
}
@media (max-width: 780px) {
  .fcta {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* 2 — brand block beside the link grid */
.fmain {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.2fr);
  gap: clamp(32px, 4.5vw, 80px);
  padding-block: clamp(34px, 4.5vw, 64px);
}
@media (max-width: 1020px) {
  .fmain {
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vw, 48px);
  }
}
.fbrand {
  display: grid;
  gap: 18px;
  align-content: start;
}
.fbrand__l {
  margin: 0;
  max-width: 38ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-mute);
}
.fbrand__c {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.fbrand__c a {
  display: inline-block;
  padding: 4px 0;
  font-size: 15.5px;
  color: var(--fg-soft);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition:
    background-size 0.4s var(--ease),
    color 0.3s ease;
}
.fbrand__c a:hover {
  color: var(--bone);
  background-size: 100% 1px;
}
.fbrand__w {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

/* Four explicit columns. auto-fit only fitted four at this width, which
   pushed the fifth onto a second row and left it hanging under the first. */
.fnav {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.6vw, 38px);
  align-content: start;
}
@media (min-width: 560px) {
  .fnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1020px) {
  .fnav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fcol__t {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.fcol__l {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.fcol__l a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-mute);
  text-decoration: none;
  transition:
    color 0.25s ease,
    padding-left 0.3s var(--ease);
}
.fcol__l a:hover {
  color: var(--bone);
  padding-left: 6px;
}

/* 3 — the trust asset, given its own row */
.fsources {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px clamp(16px, 2.4vw, 30px);
  align-items: center;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: rgb(245 243 238 / 0.03);
  text-decoration: none;
  transition:
    border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.fsources:hover {
  border-color: rgb(200 161 106 / 0.6);
  background: rgb(200 161 106 / 0.06);
}
.fsources__k {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gold);
  white-space: nowrap;
}
.fsources__b {
  font-size: 14px;
  color: var(--fg-mute);
}
.fsources__a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--gold);
  transition: transform 0.4s var(--ease);
}
.fsources:hover .fsources__a {
  transform: translateX(4px);
}
@media (max-width: 720px) {
  .fsources {
    grid-template-columns: 1fr auto;
  }
  .fsources__b {
    grid-column: 1 / -1;
  }
  .fsources__k {
    white-space: normal;
  }
}

/* 4 — base line */
.fbase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  margin-top: clamp(26px, 3.4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--fg-mute);
}
.fbase p {
  margin: 0;
}
.fbase__m {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.fbase__l {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
}
.fbase__l a {
  display: inline-block;
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
}
.fbase__l a:hover {
  color: var(--bone);
}

/* ---- Motion preferences ------------------------------------------------- */

/* Safety net for the case where the inline head script has switched the page
   into `.js` mode but app.js never arrives. Without this every `.reveal` stays
   at opacity 0 and the page reads as blank below the hero. */
.js-stalled .reveal,
.js-stalled .kinetic .kw__i,
.js-stalled .reveal--wipe,
.js-stalled .reveal--scale,
.js-stalled .ladder__row,
.js-stalled .split__side {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .kinetic .kw__i,
  .js .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .story {
    height: auto !important;
  }
  .story__pin {
    position: relative;
    height: auto;
    overflow: visible;
    padding-block: var(--section-y);
  }
  .story__scene {
    grid-area: auto;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .story__scenes {
    gap: clamp(40px, 9vw, 64px);
  }
  .story__layer:not(:first-child) {
    display: none;
  }
  .story__layer:first-child {
    opacity: 1;
  }
  .checks__item,
  .checks__ray {
    opacity: 1;
  }
  .hero__scan,
  .orbit__rays {
    animation: none;
  }
}

/* ---- Print -------------------------------------------------------------- */

@media print {
  .nav,
  .menu,
  .progress,
  .rail,
  .scroll-cue,
  .hero__scan,
  .orbit,
  .footer__nav {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .section,
  .hero,
  .close {
    background: #fff !important;
    color: #000 !important;
    min-height: 0 !important;
    padding-block: 18px !important;
  }
  .ph,
  .band__bg,
  .close__bg,
  .hero__bg {
    display: none !important;
  }
  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}

/* ---- Pipeline stages ---------------------------------------------------- */

.stages {
  position: relative;
}
.stages__grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
/* The rail sits behind the badge row and fills as the section is read. */
.stages__rail {
  display: none;
}
@media (min-width: 1080px) {
  .stages__rail {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(clamp(22px, 2.4vw, 30px) + 13px);
    height: 1px;
    background: var(--rule);
  }
  .stages__rail i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    transition: width 0.25s linear;
  }
  .no-js .stages__rail i {
    width: 100%;
  }
}
.stage {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.5s var(--ease);
}
.stage.is-lit {
  border-color: rgb(200 161 106 / 0.45);
}
.stage__h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.stage__n {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
  transition:
    border-color 0.45s var(--ease),
    color 0.45s var(--ease),
    background 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.stage.is-lit .stage__n {
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 0 0 5px rgb(200 161 106 / 0.12);
}
.no-js .stage__n {
  border-color: var(--accent);
  color: var(--accent);
}
.stage__t {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.022em;
}
.stage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.stage__list li {
  display: grid;
  gap: 3px;
}
.stage__list b {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.stage__list span {
  color: var(--fg-soft);
  font-size: 14.5px;
  line-height: 1.5;
}
.stage__sum {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-soft);
}

/* ---- Misc --------------------------------------------------------------- */

.faq__hd {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* A photo frame should never inherit the card's hover lift on touch. */
.frame .ph {
  display: block;
}

/* The story dial is a progress instrument, not the logo — give it room. */
.story__sun {
  width: min(34vw, 300px);
  height: auto;
  color: var(--fg);
}
.story__sun .checks__ray {
  fill: rgb(245 243 238 / 0.16);
}
.story__sun .checks__ray.is-lit {
  fill: var(--gold);
  filter: drop-shadow(0 0 16px rgb(200 161 106 / 0.45));
}
.story__sun .checks__ring {
  opacity: 0.3;
}
.checks__dial svg {
  color: var(--fg);
}

/* =========================================================================
   Components added in the audit remediation pass
   ========================================================================= */

/* ---- Our figures vs the market's --------------------------------------- */

.statblock {
  margin-top: clamp(38px, 5.5vw, 88px);
}
.statblock .stats {
  margin-top: 0;
}
.stats--ours .stats__v {
  color: var(--gold-ink);
}
.on-ink .stats--ours .stats__v,
.on-deep .stats--ours .stats__v,
.on-abyss .stats--ours .stats__v,
.hero .stats--ours .stats__v {
  color: var(--gold);
}
.stats__note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.stats__note::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--accent);
}

/* Third-party data: a ruled list, never a card row, so it cannot be mistaken
   for Offsetease's own numbers. */
.mkt {
  border-top: 1px solid var(--rule);
}
.mkt__title {
  margin: 14px 0 4px;
  color: var(--fg-mute);
}
.mkt__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mkt__row {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto;
  gap: 6px clamp(14px, 2.4vw, 30px);
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.mkt__v {
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
}
.mkt__u {
  font-size: 0.6em;
  color: var(--fg-mute);
}
.mkt__l {
  font-size: 15px;
  color: var(--fg-soft);
}
.mkt__s {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .mkt__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .mkt__s {
    white-space: normal;
  }
}

/* ---- Inline contextual CTA --------------------------------------------- */

.icta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(20px, 3vw, 40px);
  margin-top: clamp(30px, 4vw, 54px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
}
.icta__t {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.3vw, 18.5px);
  color: var(--fg);
}
.icta__a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--deep);
  color: var(--bone);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition:
    background 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.on-ink .icta__a,
.on-deep .icta__a,
.on-abyss .icta__a {
  background: var(--gold);
  color: var(--ink);
}
.icta__a:hover {
  background: var(--fg);
  color: var(--bg);
}
.icta__a:hover .btn__arrow {
  transform: translateX(4px);
}

/* ---- Desktop mega-menu -------------------------------------------------- */

.nav__has-mega {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav__disc {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: currentColor;
  opacity: 0.72;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    rotate 0.35s var(--ease);
}
.nav__disc:hover {
  opacity: 1;
}
.nav__disc[aria-expanded='true'] {
  rotate: 180deg;
  opacity: 1;
  color: var(--gold-ink);
}
.nav.is-top .nav__disc[aria-expanded='true'] {
  color: var(--gold);
}
.mega {
  /* Fixed, not absolute: anchored to the viewport so it cannot hang off the
     right edge the way an item-centred panel does. */
  position: fixed;
  top: calc(var(--nav-h) + 10px);
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  width: min(94vw, 1040px);
  max-height: calc(100vh - var(--nav-h) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 2.4vw, 32px);
  color: var(--deep);
  background: rgb(252 251 248 / 0.99);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgb(10 61 68 / 0.14);
  border-radius: var(--radius);
  box-shadow: 0 26px 64px rgb(6 40 46 / 0.16);
  opacity: 0;
  translate: -50% -8px;
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease),
    translate 0.3s var(--ease);
}
.mega.is-open {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}
.nav.is-hidden .mega {
  display: none;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.mega__t {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
}
.mega__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.mega__col a {
  /* 44px rather than 48: this column holds up to seven links and the taller
     target would push the panel past the fold on a short laptop screen. */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 8px;
  margin-left: -8px;
  border-radius: 7px;
  font-size: 14.5px;
  color: rgb(6 40 46 / 0.82);
  text-decoration: none;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
.mega__col a:hover {
  background: rgb(10 61 68 / 0.07);
  color: var(--deep);
}
.mega__col--all a {
  color: var(--gold-ink);
  font-weight: 500;
}
@media (max-width: 1020px) {
  .mega,
  .nav__disc {
    display: none;
  }
}

/* ---- Mobile menu: 44px targets, grouped behind accordions --------------- */

.menu__big {
  min-height: 56px;
  display: flex;
  align-items: center;
}
.menu__groups {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.menu__group {
  border-bottom: 1px solid var(--rule-soft);
}
.menu__gt {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.menu__gi {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.menu__gi::before,
.menu__gi::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease);
}
.menu__gi::after {
  rotate: 90deg;
}
.menu__gt[aria-expanded='true'] .menu__gi::after {
  transform: scaleX(0);
}
.menu__gp {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.menu__group.is-open .menu__gp {
  grid-template-rows: 1fr;
}
.menu__gp > ul {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__gp a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  font-size: 15.5px;
  color: var(--fg-soft);
  text-decoration: none;
}
.menu__gp a:active {
  color: var(--gold-ink);
}
.no-js .menu__gp {
  grid-template-rows: 1fr;
}
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding-top: 8px;
}
/* Every target in the menu clears 44px, including the text link. */
.menu__foot .tlink {
  min-height: 44px;
  align-items: center;
}
/* The menu scrolls; say so at the bottom edge. */
.menu::after {
  content: '';
  position: fixed;
  inset: auto 0 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(250 249 245 / 0), var(--bone));
}
.menu.is-open::after {
  opacity: 1;
}

/* ---- Consent ------------------------------------------------------------ */

.consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15px;
  color: var(--fg-soft);
}
.consent label {
  cursor: pointer;
}
.consent input {
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent a {
  color: var(--accent-text);
}

/* ---- Contact layout ----------------------------------------------------- */

.hero--compact {
  min-height: 0;
}
.hero--compact .hero__inner {
  padding-top: calc(var(--nav-h) + clamp(34px, 5vw, 64px));
  padding-bottom: clamp(30px, 4vw, 56px);
}
.hero--compact .display,
.hero--compact .h1 {
  font-size: clamp(29px, 3.6vw, 52px);
}
.hero--compact .lede {
  font-size: clamp(16px, 1.25vw, 18.5px);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4.5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Standards & frameworks --------------------------------------------- */

.std__note {
  max-width: 52ch;
  color: var(--fg-soft);
  margin-bottom: 18px;
}
.fw {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.fw__t {
  font-weight: 600;
  letter-spacing: -0.015em;
  padding-top: 15px;
}
.fw__d {
  margin: 4px 0 0;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-soft);
  font-size: 15px;
}
.stage__sum {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-soft);
}

/* ---- Prose pages -------------------------------------------------------- */

.prose__s + .prose__s {
  margin-top: clamp(28px, 3.4vw, 46px);
}
.prose__h {
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin-bottom: 12px;
}
.prose p {
  max-width: 68ch;
  color: var(--fg-soft);
}
.prose a {
  color: var(--accent);
}
.prose__notice {
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
  font-size: 14.5px;
  color: var(--fg-soft);
  max-width: 72ch;
}

/* ---- Footer feature ----------------------------------------------------- */

.footer__feature {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  max-width: var(--wrap);
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
}
.footer__feature-l {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--gold);
}
.footer__feature:hover .footer__feature-l {
  color: var(--gold-lift);
}
.footer__feature-b {
  font-size: 14.5px;
  color: var(--fg-mute);
  max-width: 54ch;
}

/* ---- Sources ------------------------------------------------------------ */

.sources__t a {
  text-decoration: none;
  color: var(--fg);
}
.sources__t a:hover {
  color: var(--accent);
}
.sources__ext {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.8em;
  color: var(--accent);
}

/* ---- Scrollytelling legibility over photography ------------------------- */

.story__track {
  position: relative;
}
.story__track::before {
  content: '';
  position: absolute;
  inset: -8% -14% -8% -10%;
  z-index: -1;
  border-radius: 20px;
  background: linear-gradient(
    100deg,
    rgb(4 26 30 / 0.9) 0%,
    rgb(4 26 30 / 0.78) 55%,
    rgb(4 26 30 / 0) 100%
  );
}
@media (max-width: 940px) {
  .story__track::before {
    /* Percentage insets scale with the track, so the bleed grew exactly as the
       space for it ran out: at 768px the right edge landed on 771px and the
       whole document scrolled 3px sideways. Pixels keep the bleed bounded. */
    inset: -12px -14px;
    background: linear-gradient(180deg, rgb(4 26 30 / 0.86), rgb(4 26 30 / 0.92));
  }
}

/* ---- Persistent mobile CTA ---------------------------------------------- */

.sticky {
  position: fixed;
  inset: auto 0 0;
  z-index: 180;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgb(250 249 245 / 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgb(10 61 68 / 0.14);
  box-shadow: 0 -10px 34px rgb(6 40 46 / 0.08);
  translate: 0 110%;
  transition: translate 0.45s var(--ease);
}
@media (max-width: 1020px) {
  .js .sticky {
    display: flex;
  }
}
.sticky.is-up {
  translate: 0 0;
}
.is-menu-open .sticky {
  translate: 0 110%;
}
.sticky__a {
  flex: 1 1 auto;
  max-width: 320px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.sticky__e {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-size: 14.5px;
  color: var(--fg-mute);
  text-decoration: none;
}

/* ---- Small-screen rhythm ------------------------------------------------ */

@media (max-width: 700px) {
  :root {
    --section-y: clamp(56px, 11vw, 88px);
    --section-y-tight: clamp(46px, 9vw, 72px);
  }
  /* A 16:10 photo on each of four stacked cards costs a whole viewport of
     scroll on a phone for no extra information. */
  .mcard .ph {
    aspect-ratio: 2 / 1;
  }
}

/* ---- Cinematic hero ----------------------------------------------------- */

/* Sits above the poster inside .hero__bg, so it inherits the same parallax
   transform and the same scrim. It never becomes the LCP element: the poster
   <picture> paints first and the clip dissolves over it once it can play. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  pointer-events: none;
}
.hero__video.is-playing {
  opacity: 1;
}

/* ---- Cinematic band ----------------------------------------------------- */

.band--film {
  min-height: min(86vh, 760px);
}
.band__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.band__video.is-playing {
  opacity: 0.62;
}
/* A slow drift keeps the frame alive even before the clip decides to load. */
.band--film .band__bg .ph img {
  animation: film-drift 26s ease-in-out infinite alternate;
}
@keyframes film-drift {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .band--film .band__bg .ph img {
    animation: none;
  }
}

/* ---- Footer contact block (replaces the second closing CTA) ------------- */

.fcta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.fcta__list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.fcta__list li > span:first-child {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
/* All three values are set identically — the email and phone are links, but
   the only thing that marks them as such is a colour change on interaction. */
.fcta__list a,
.fcta__v {
  font-size: clamp(15.5px, 1.25vw, 17px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--fg-soft);
}
.fcta__list a {
  text-decoration: none;
  transition: color 0.25s ease;
}
.fcta__list a:hover,
.fcta__list a:focus-visible {
  color: var(--gold);
}
.fcta__list a:active {
  color: var(--gold-lift);
}

/* ---- Contact page: the honest fallback while the form is unwired -------- */

.offline {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}
.offline__t {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 600;
  letter-spacing: -0.022em;
}
.offline__b {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 52ch;
  color: var(--fg-soft);
}
.offline .btns {
  gap: 10px;
}
.offline .btn {
  max-width: 100%;
}
.offline .btn__label {
  overflow-wrap: anywhere;
}

/* ---- Hero headline: painted first, then settled -------------------------- */

.kinetic--soft .kw {
  overflow: visible;
  padding-bottom: 0;
  margin-bottom: 0;
}
.js .kinetic--soft.is-in .kw__i {
  animation: kw-soft 0.55s var(--ease) calc(var(--kw) * 30ms) both;
}
@keyframes kw-soft {
  from {
    transform: translateY(0.2em);
  }
  to {
    transform: none;
  }
}

/* ---- Sticky bar dismiss -------------------------------------------------- */

.sticky__x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 1px solid rgb(10 61 68 / 0.2);
  border-radius: 999px;
  color: var(--deep);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.sticky__x:hover {
  opacity: 1;
}

/* ---- Insights library --------------------------------------------------- */

.ilist__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(26px, 3.4vw, 42px);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.chip span {
  font-size: 12px;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.chip:hover {
  border-color: var(--fg-soft);
}
.chip.is-on {
  color: var(--deep);
  background: var(--gold);
  border-color: var(--gold);
}
.chip.is-on span {
  color: rgb(10 61 68 / 0.7);
}

.ilist__status {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.ilist__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: ins;
}
.ins {
  padding: clamp(22px, 2.8vw, 32px) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 10px;
}
.ins:last-child {
  border-bottom: 1px solid var(--rule);
}
.ins__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.ins__cat {
  color: var(--accent-text);
}
.ins__read {
  margin-left: auto;
}
.ins__t {
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.011em;
  margin: 0;
  text-wrap: balance;
}
.ins__t a {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s var(--ease);
}
.ins__t a:hover,
.ins__t a:focus-visible {
  background-size: 100% 1px;
}
.ins__ext {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.7em;
  vertical-align: 2px;
  color: var(--fg-mute);
}
.ins__b {
  margin: 0;
  max-width: 68ch;
  color: var(--fg-soft);
  font-size: 16px;
  line-height: 1.62;
}
.ins__rel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
}
.ins__rel svg {
  transition: transform 0.3s var(--ease);
}
.ins__rel:hover svg {
  transform: translateX(4px);
}
.ilist__none {
  padding: 34px 0;
  color: var(--fg-mute);
  font-size: 15px;
}
@media (max-width: 700px) {
  .ins__read {
    margin-left: 0;
  }
}

/* ---- Insight article ----------------------------------------------------- */

.art__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.art__cat {
  color: var(--accent-text);
}
.art__body > p:first-child,
.art__body .article-lead {
  font-size: clamp(17.5px, 1.7vw, 20px);
  line-height: 1.62;
  color: var(--fg);
}
.art__body h2 {
  margin: clamp(34px, 4vw, 52px) 0 14px;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.24;
  letter-spacing: -0.012em;
}
.art__body h3 {
  margin: clamp(24px, 3vw, 34px) 0 10px;
  font-size: clamp(17px, 1.8vw, 20px);
}
.art__body p {
  margin: 0 0 16px;
}
.art__body ul,
.art__body ol {
  margin: 0 0 18px;
  padding-left: 1.25em;
}
.art__body li {
  margin-bottom: 8px;
}
.art__body a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}
.art__refs {
  margin-top: clamp(38px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.art__refs h2 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 14px;
}
.art__refs ol {
  margin: 0;
  padding-left: 1.2em;
}
.art__refs li {
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.5;
}
.art__refs a {
  color: var(--accent-text);
  word-break: break-word;
}
.art__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(30px, 4vw, 44px);
}

/* More insights */
.mrc {
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.mrc ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.mrc a {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
}
.mrc__cat {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.mrc__t {
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--fg);
}
.mrc a:hover .mrc__t {
  color: var(--accent-text);
}
.mrc__r {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
}

.toc {
  margin: clamp(22px, 3vw, 32px) 0 clamp(28px, 3.6vw, 40px);
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.toc .label {
  margin: 0 0 10px;
}
.toc ol {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 6px;
}
.toc li {
  font-size: 14.5px;
  line-height: 1.45;
}
.toc a {
  display: inline-flex;
  align-items: center;
  /* 19px tall as plain inline text, under the 24px WCAG 2.2 floor. */
  min-height: 30px;
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc a:hover,
.toc a:focus-visible {
  color: var(--accent-text);
  border-bottom-color: currentColor;
}
/* A jump link must not land the heading under the fixed header, which
   measures 97px — 96 put the heading exactly 1px beneath it. */
.art__body h2 {
  scroll-margin-top: 124px;
}

/* ---- Figures carried over with the articles ------------------------------ */

/* All scoped to .art__body. `.fig` is already the number span inside
   statStrip, so an unscoped panel rule here drew a bordered box around every
   figure on the homepage's impact strip. */

/* These components came with the migrated article HTML — a flow diagram, a
   pair of cost cards, a numbered step list and a phase-in bar chart. Restyled
   in this site's tokens rather than dropped, because the numbers in them are
   content, not decoration. */

.art__body .fig {
  margin: clamp(28px, 3.6vw, 44px) 0;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.art__body .fig__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.art__body .fig__title {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.art__body .fig__sub {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-soft);
}
.art__body .fig__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-mute);
}
.art__body .fig__note--accent {
  color: var(--accent-text);
}

.art__body .cbam-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
.art__body .cbam-flow__box {
  flex: 1 1 170px;
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.art__body .cbam-flow__box--hl {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.art__body .cbam-flow__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.art__body .cbam-flow__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
}
.art__body .cbam-flow__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-soft);
}
.art__body .cbam-flow__arrow {
  align-self: center;
  color: var(--fg-mute);
}

.art__body .cost-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.art__body .cost-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}
.art__body .cost-card__head {
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--gold);
}
.art__body .cost-card__head--dark {
  color: var(--bone);
  background: var(--deep);
}
.art__body .cost-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
}
.art__body .cost-card__row span {
  color: var(--fg-soft);
}
.art__body .cost-card__row b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.art__body .cost-card__total {
  font-size: 16px;
  color: var(--accent-text) !important;
}

.art__body .cbam-steps {
  display: grid;
  gap: 10px;
}
.art__body .cbam-steps__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.art__body .cbam-steps__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--deep);
  background: var(--gold);
}
.art__body .cbam-steps__b {
  display: block;
  font-size: 15px;
  color: var(--fg);
}
.art__body .cbam-steps__d {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
}

.art__body .ramp {
  display: grid;
  gap: 14px;
}
.art__body .ramp__bar {
  height: 9px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}
.art__body .ramp__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
}
.art__body .ramp__year {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fg);
}
.art__body .ramp__pct {
  font-size: 14px;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.art__body .ramp__d {
  font-size: 13.5px;
  color: var(--fg-soft);
}
.art__body .ramp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.art__body .ramp__chip {
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

/* Wide content must scroll in its own container, never the page. */
.table-wrap,
.art__body .table-wrap {
  overflow-x: auto;
  margin: clamp(24px, 3vw, 34px) 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.cmp-table,
.art__body .cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 520px;
}
.cmp-table caption,
.art__body .cmp-table caption {
  padding: 12px 14px;
  text-align: left;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--rule);
}
.cmp-table th,
.cmp-table td,
.art__body .cmp-table th,
.art__body .cmp-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.5;
}
.cmp-table thead th,
.art__body .cmp-table thead th {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
}
.cmp-table tbody th,
.art__body .cmp-table tbody th {
  font-weight: 600;
  color: var(--fg);
}
.cmp-table td,
.art__body .cmp-table td {
  color: var(--fg-soft);
}

/* ---- Touch targets ------------------------------------------------------ */

/* Measured at 375px: the footer contact links were 22px tall, the footer nav
   links 32px, the base row 29px, and the sticky dismiss button 40px. WCAG 2.2
   SC 2.5.8 puts the floor at 24px — only the 22px contact links actually
   failed — but a thumb wants 44. Padding does the work, so the type scale and
   the desktop rhythm are untouched.
   The dense service columns get 40px rather than 44: eighteen links at 44
   would add roughly 200px to an already long mobile footer, and 40 clears the
   requirement with room to spare. */
@media (pointer: coarse), (max-width: 860px) {
  .fcta__list a,
  .fbrand__c a,
  .fbrand__nav a,
  .fbase__l a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .fcol__l a {
    display: flex;
    align-items: center;
    /* 40px left this column a few pixels short of every other touch target in
       the footer, and it is the densest list on the page. */
    min-height: 44px;
  }
  .sticky__x {
    width: 44px;
    height: 44px;
  }
}

/* ---- Breadcrumb landmark ------------------------------------------------ */

.crumb-nav {
  display: block;
}

/* ---- Skip past the pinned story ----------------------------------------- */

.story__skip {
  position: absolute;
  z-index: 5;
  top: calc(var(--nav-h) + 18px);
  right: var(--gutter);
  padding: 10px 18px;
  border: 1px solid rgb(245 243 238 / 0.3);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.story:hover .story__skip,
.story__skip:focus-visible {
  opacity: 1;
}
.story__skip:hover {
  background: rgb(245 243 238 / 0.14);
}
.story__end {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
}
@media (max-width: 940px) {
  .story__skip {
    display: none;
  }
}

/* ---- Mobile menu: the CTA must be reachable ----------------------------- */

@media (max-width: 1020px) {
  .menu__inner {
    padding-top: calc(var(--nav-h) + 20px);
    gap: clamp(22px, 4vw, 40px);
  }
  .menu__big {
    min-height: 50px;
    font-size: clamp(25px, 6.6vw, 38px);
  }
  .menu__foot {
    position: sticky;
    bottom: 0;
    margin-top: 4px;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgb(250 249 245 / 0), var(--bone) 26%);
  }
}

/* ---- Company links, sitting with the brand block ------------------------ */

.fbrand__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 2px;
}
.fbrand__nav a {
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color 0.25s ease;
}
.fbrand__nav a:hover {
  color: var(--bone);
}

/* ---- Enquiry form: honest about not being connected yet ----------------- */

.form__pending {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-soft);
}
.form__pending a {
  color: var(--accent-text);
}


/* ---- Forced colours (Windows High Contrast) ----------------------------- */
/* The system palette replaces every colour here, which silently removes the
   scrims, the gradient rules and the focus ring the rest of this sheet draws.
   Put back the things that carry meaning rather than decoration. */
@media (forced-colors: active) {
  .scrim {
    display: none;
  }
  .btn,
  .chip,
  .card,
  .mega,
  .menu {
    border: 1px solid CanvasText;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .lockup__ray,
  .checks__ray {
    forced-color-adjust: none;
  }
}