/* ==========================================================================
   KARDINIA ENERGY — "Frames"
   Cinematic system v14. One stylesheet.

   The site is cut like a film. Every page opens on a moving full-bleed
   frame with the proposition set low and small against it, then cuts
   between light reading acts and dark cinema acts. Two devices only:
   the TRACE (a hairline combed with copper ticks, taken from the printed
   bus-bar fingers) and the FRAME INDEX (mono numerals).

   No cream. No cards. No pills as status chips. No navy wash. No
   gradient atmospheres poured over photographs. No stock-icon rows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ground */
  --black: #08090a;      /* cinema ground */
  --ink: #101315;        /* dark surface */
  --slate: #191d20;      /* dark elevated, footer */
  --paper: #f0f0ee;      /* principal canvas: cool neutral, not cream */
  --paper-2: #e5e5e1;    /* sunken light */
  --white: #ffffff;      /* logo ground only */

  /* text on light */
  --tx: #0c0e0f;
  --tx-2: #565b5f;
  --tx-3: #7c8185;

  /* text on dark */
  --dx: #f2f2f0;
  --dx-2: #a6acb0;
  --dx-3: #767c81;

  /* line */
  --line: #d7d7d2;
  --line-2: #c2c2bc;
  --dline: rgba(255, 255, 255, 0.15);
  --dline-2: rgba(255, 255, 255, 0.3);

  /* meaning: copper is interaction, oxide is the product,
     eucalyptus is the advisory route, amber is focus */
  --copper: #c56a3a;
  --copper-2: #a3542b;
  --copper-lit: #e08a55;
  --oxide: #61262b;
  --euco: #285241;
  --euco-2: #1b3a2d;
  --amber: #f0b744;

  /* type */
  --f-d: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-b: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-m: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* metrics */
  --gut: clamp(20px, 4.4vw, 72px);
  --maxw: 1480px;
  --tick: 22px;
  --r: 10px;
  --r-tile: 14px;
  --hdr: 68px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.34s;

  /* spacing scale (8) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;
  --s8: 128px;
}

/* --------------------------------------------------------------------------
   2. FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
}
body {
  padding-top: var(--hdr);
  background: var(--paper);
  color: var(--tx);
  font-family: var(--f-b);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
video,
svg,
picture {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
::selection {
  background: var(--copper);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--gut);
  z-index: 200;
  background: var(--black);
  color: var(--dx);
  padding: 12px 20px;
  border-radius: var(--r);
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 500;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 16px;
}

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
[id] {
  scroll-margin-top: calc(var(--hdr) + 24px);
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--f-d);
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
}

/* display scale */
.t-xl {
  font-size: clamp(2.9rem, 7.9vw, 6.6rem);
  line-height: 0.95;
  letter-spacing: -0.042em;
  font-weight: 640;
}
.t-lg {
  font-size: clamp(2.3rem, 5.1vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
}
.t-md {
  font-size: clamp(1.72rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
}
.t-sm {
  font-size: clamp(1.24rem, 1.7vw, 1.55rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
}

/* body scale */
.lead {
  font-size: clamp(1.16rem, 1.5vw, 1.48rem);
  line-height: 1.5;
  color: var(--tx-2);
  max-width: 46ch;
}
p {
  max-width: 66ch;
}
.small {
  font-size: 16px;
  line-height: 1.58;
  color: var(--tx-2);
}
.tiny {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tx-2);
}

/* mono metadata — genuine facts, indices, units. Never decoration. */
.mono,
.eyebrow,
.ix {
  font-family: var(--f-m);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-3);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.eyebrow .ix {
  color: var(--copper);
}
.ix {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* dark context */
.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--dx);
}
.on-dark .lead,
.on-dark p,
.on-dark .small,
.on-dark .tiny {
  color: var(--dx-2);
}
.on-dark .eyebrow {
  color: var(--dx-3);
}
.on-dark .eyebrow .ix {
  color: var(--copper-lit);
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow {
  max-width: 1080px;
}

.act {
  position: relative;
  padding-block: clamp(72px, 9vw, 132px);
}
.act--tight {
  padding-block: clamp(52px, 6vw, 88px);
}
.act--dark {
  background: var(--black);
  color: var(--dx);
}
.act--ink {
  background: var(--ink);
  color: var(--dx);
}
.act--sunk {
  background: var(--paper-2);
}
.act--dark p,
.act--ink p {
  color: var(--dx-2);
}

/* section head: eyebrow + heading + optional standfirst */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.head__t {
  max-width: 20ch;
}
.head--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.head--split .head__t {
  grid-column: 1;
}
.head--split .eyebrow {
  grid-column: 1 / -1;
}
.head--split .head__p {
  grid-column: 2;
  padding-bottom: 6px;
}


/* --------------------------------------------------------------------------
   6. HEADER — one bar across the top, always fixed. The wordmark has to sit
   on a light ground, so the bar is the light ground.
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 48px);
  height: var(--hdr);
  padding-inline: var(--gut);
  padding-top: env(safe-area-inset-top);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease);
}
.hdr.is-stuck {
  box-shadow: 0 12px 34px -24px rgba(8, 9, 10, 0.55);
}
.hdr__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 100%;
}
.hdr__logo img {
  height: clamp(24px, 2.4vw, 30px);
  width: auto;
}
.nav {
  margin-left: auto;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 32px);
  list-style: none;
}
.nav__list a {
  position: relative;
  display: block;
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--tx-2);
  padding-block: 8px;
  transition: color 0.2s var(--ease);
}
.nav__list a:hover {
  color: var(--tx);
}
.nav__list a[aria-current="page"] {
  color: var(--tx);
}
.nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-image: repeating-linear-gradient(
    to right,
    var(--copper) 0 1px,
    transparent 1px 5px
  );
}
.hdr__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 600;
  color: var(--copper-2);
  padding-block: 8px;
  transition: color 0.2s var(--ease);
}
.hdr__cta:hover {
  color: var(--tx);
}
.hdr__cta .arr {
  display: inline-block;
  transition: transform 0.22s var(--ease);
}
.hdr__cta:hover .arr {
  transform: translateX(3px);
}

/* burger + mobile sheet */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  touch-action: manipulation;
}
.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--tx);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
}
.burger span::before {
  transform: translateY(-6px);
}
.burger span::after {
  transform: translateY(6px);
}
.burger[aria-expanded="true"] span {
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span::before {
  opacity: 0;
}
.burger[aria-expanded="true"] span::after {
  transform: rotate(-90deg);
}

.mnav {
  position: fixed;
  inset: var(--hdr) 0 0 0;
  z-index: 85;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s6) var(--gut);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  overscroll-behavior: contain;
}
.mnav[data-open="true"] {
  opacity: 1;
  visibility: visible;
}
.mnav nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mnav a {
  font-family: var(--f-d);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--dx);
  padding-block: 10px;
  border-bottom: 1px solid var(--dline);
}
.mnav a:last-child {
  color: var(--copper-lit);
}
.nojs-menu {
  display: none;
}

/* --------------------------------------------------------------------------
   7. CONTROLS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-d);
  font-size: 14.5px;
  font-weight: 560;
  letter-spacing: -0.008em;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.24s var(--ease), color 0.24s var(--ease),
    border-color 0.24s var(--ease), transform 0.24s var(--ease);
}
.btn .arr {
  display: inline-block;
  transition: transform 0.24s var(--ease);
}
.btn:hover .arr {
  transform: translateX(3px);
}

.btn--solid {
  background: var(--tx);
  color: var(--paper);
}
.btn--solid:hover {
  background: var(--oxide);
}
.btn--euco {
  background: var(--euco);
  color: #fff;
}
.btn--euco:hover {
  background: var(--euco-2);
}
.btn--paper {
  background: var(--paper);
  color: var(--tx);
}
.btn--paper:hover {
  background: #fff;
}
/* the reference's outline button: fills on hover */
.btn--line {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--dx);
}
.btn--line:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--tx);
}
.btn--line-dk {
  border-color: var(--line-2);
  color: var(--tx);
}
.btn--line-dk:hover {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--paper);
}
.btn--sm {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 13px;
}

/* text action with a travelling arrow */
.txt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 560;
  color: var(--tx);
  padding-block: 6px;
  border-bottom: 1px solid var(--copper);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.txt .arr {
  display: inline-block;
  color: var(--copper);
  transition: transform 0.24s var(--ease);
}
.txt:hover {
  color: var(--copper-2);
}
.txt:hover .arr {
  transform: translateX(3px);
}
.on-dark .txt,
.act--dark .txt,
.act--ink .txt,
.band .txt,
.chapter .txt,
.film .txt,
.ftr .txt {
  color: var(--dx);
  border-bottom-color: var(--copper-lit);
}
.on-dark .txt .arr,
.band .txt .arr,
.chapter .txt .arr,
.film .txt .arr,
.act--dark .txt .arr,
.act--ink .txt .arr {
  color: var(--copper-lit);
}
.on-dark .txt:hover,
.band .txt:hover,
.chapter .txt:hover,
.film .txt:hover,
.act--dark .txt:hover,
.act--ink .txt:hover {
  color: var(--copper-lit);
}

/* small mono badge link, sits above hero headlines */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--copper-lit);
  transition: color 0.2s var(--ease);
}
.tag .arr {
  display: inline-block;
  transition: transform 0.22s var(--ease);
}
.tag:hover {
  color: #fff;
}
.tag:hover .arr {
  transform: translateX(3px);
}
.tag--line {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.82);
  gap: 0;
}
.tag--line::after {
  content: "";
  display: block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  margin-left: 16px;
  background: var(--copper-lit);
}
.tag--dk {
  color: var(--copper-2);
}
.tag--dk:hover {
  color: var(--tx);
}

.acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

/* --------------------------------------------------------------------------
   8. FILM — the full-bleed moving frame that opens every page
   -------------------------------------------------------------------------- */
.film {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  height: calc(100svh - var(--hdr));
  max-height: 940px;
  background: var(--black);
  color: var(--dx);
  display: flex;
  overflow: hidden;
}
.film--short {
  height: calc(78svh - var(--hdr) * 0.5);
  min-height: 520px;
  max-height: 760px;
}
/* held frame: the film plays out across a short run of scroll, then lets go */
.film--pin {
  display: block;
  height: 190vh;
  max-height: none;
  overflow: visible;
}
.film--pin .film__hold {
  position: sticky;
  top: var(--hdr);
  display: flex;
  height: calc(100svh - var(--hdr));
  min-height: 540px;
  max-height: 1000px;
  overflow: hidden;
  isolation: isolate;
}
.film--pin.is-flat {
  height: calc(100svh - var(--hdr));
  min-height: 540px;
  max-height: 940px;
}
.film--pin.is-flat .film__hold {
  position: relative;
  top: 0;
  height: 100%;
  max-height: none;
}
.film__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.film__media img,
.film__media video,
.film__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.film__media video.is-ready {
  opacity: 1;
}
/* neutral bottom-weighted scrim: legibility, not a colour wash */
.film__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.9) 0%,
      rgba(8, 9, 10, 0.66) 22%,
      rgba(8, 9, 10, 0.16) 52%,
      rgba(8, 9, 10, 0.04) 74%,
      rgba(8, 9, 10, 0.34) 100%
    ),
    linear-gradient(to right, rgba(8, 9, 10, 0.5) 0%, rgba(8, 9, 10, 0) 62%);
}
.film__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(40px, 6vh, 72px);
  padding-bottom: max(clamp(40px, 6vh, 72px), env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
}
.film__block {
  max-width: min(70vw, 850px);
}
.film__block .film__p,
.film__block > p:not(.film__h):not(.tag) {
  max-width: 44ch;
}
.film__block .tag {
  max-width: none;
  white-space: nowrap;
}
.film__block .tag {
  margin-bottom: 20px;
}
.film__block h1,
.film__block .film__h {
  color: #fff;
  margin-bottom: 18px;
}
.film__p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.76);
  max-width: 44ch;
  margin-bottom: 26px;
}
.film__block .acts {
  margin-top: 4px;
}

/* facts rail across the base of a hero — real numbers only */
.film__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(to top, rgba(8, 9, 10, 0.62), rgba(8, 9, 10, 0));
}
.film__rail ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(24px, 4vw, 56px);
  list-style: none;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px var(--gut);
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
}
.film__rail b {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
}
.film:has(.film__rail) .film__in {
  padding-bottom: clamp(84px, 11vh, 120px);
}

/* scroll cue */
.cue {
  position: absolute;
  right: var(--gut);
  bottom: clamp(40px, 6vh, 72px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.cue i {
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  position: relative;
}
.cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--copper-lit);
  transform: translateY(-100%);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  55% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
.film:has(.film__rail) .cue {
  bottom: clamp(84px, 11vh, 120px);
}

/* --------------------------------------------------------------------------
   10. BAND — a full-bleed cinema statement between reading acts
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
  min-height: clamp(460px, 68vh, 720px);
  display: flex;
  align-items: flex-end;
  background: var(--black);
  color: var(--dx);
  overflow: hidden;
}
.band--center {
  align-items: center;
}
.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.band__media img,
.band__media video,
.band__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.band__media video.is-ready {
  opacity: 1;
}
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(8, 9, 10, 0.88) 0%,
    rgba(8, 9, 10, 0.5) 34%,
    rgba(8, 9, 10, 0.12) 72%,
    rgba(8, 9, 10, 0.28) 100%
  );
}
.band__in {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(64px, 9vw, 120px) var(--gut);
}
.band__t {
  color: #fff;
  max-width: 17ch;
}
.band__p {
  margin-top: 22px;
  font-size: 18.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  width: min(100%, 620px);
}
.band__in .acts {
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   11. SPLIT — text against a moving frame, half and half
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
/* flipped: media on the right, so it bleeds off the right edge instead */
.split--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}
.split--flip .split__media {
  order: 2;
}
.split__media {
  position: relative;
  height: clamp(400px, 50vw, 680px);
  overflow: hidden;
  background: var(--ink);
}
.split__body {
  padding: clamp(28px, 3.5vw, 56px) var(--gut);
  max-width: 640px;
}
.split--flip .split__body {
  margin-left: auto;
}
.split__media img,
.split__media video,
.split__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.split__media video.is-ready {
  opacity: 1;
}
.split__t {
  max-width: 21ch;
  margin-bottom: 20px;
}

/* media that runs the full width of the section, edge to edge.
   Never 100vw and never overflow:hidden on html or body: the first
   causes a scrollbar-width overflow, the second computes to clip on
   both axes and makes the whole page unscrollable. */
.bleed {
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   12. LEDGER — ruled rows. Replaces card grids everywhere.
   -------------------------------------------------------------------------- */
.ledger {
  border-top: 1px solid var(--line);
}
.act--dark .ledger,
.act--ink .ledger,
.on-dark .ledger {
  border-top-color: var(--dline);
}
.ledger__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 0.72fr) minmax(0, 1.5fr);
  gap: clamp(16px, 2.6vw, 40px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.act--dark .ledger__row,
.act--ink .ledger__row,
.on-dark .ledger__row {
  border-bottom-color: var(--dline);
}
.ledger__ix {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--copper);
  padding-top: 6px;
}
.act--dark .ledger__ix,
.on-dark .ledger__ix {
  color: var(--copper-lit);
}
.ledger__t {
  font-family: var(--f-d);
  font-size: clamp(1.26rem, 1.9vw, 1.66rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.16;
}
.ledger__d {
  font-size: 17px;
  line-height: 1.6;
  color: var(--tx-2);
  max-width: 56ch;
}
.act--dark .ledger__d,
.act--ink .ledger__d,
.on-dark .ledger__d {
  color: var(--dx-2);
}
.ledger__d .txt {
  margin-top: 14px;
}
/* a whole row can be a link */
a.ledger__row {
  transition: background-color 0.24s var(--ease), padding-left 0.24s var(--ease);
}
a.ledger__row:hover {
  background: rgba(197, 106, 58, 0.06);
  padding-left: 10px;
}

/* facts: mono figure over a label, ruled */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  border-top: 1px solid var(--line);
}
.act--dark .facts,
.act--ink .facts,
.on-dark .facts {
  border-top-color: var(--dline);
}
.facts > div {
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 28px) clamp(22px, 2.4vw, 32px) 0;
  border-bottom: 1px solid var(--line);
}
.act--dark .facts > div,
.act--ink .facts > div,
.on-dark .facts > div {
  border-bottom-color: var(--dline);
}
.facts b {
  display: block;
  font-family: var(--f-d);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.facts span {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tx-2);
  max-width: 30ch;
}
.act--dark .facts span,
.act--ink .facts span,
.on-dark .facts span {
  color: var(--dx-2);
}


/* --------------------------------------------------------------------------
   12b. THE SCENE — the film framed on one side, its layers listed on the
   other. Where the frame fits under the header it stays in view beside the
   list, and js/kardinia.js runs the film across exactly that stretch: from
   the moment the whole frame is on screen until it is released at the end
   of the list. Nothing is held beyond the list's own length.
   -------------------------------------------------------------------------- */
.scene {
  --p: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); /* the head's columns */
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.scene__viz {
  /* never taller than the room under the header, so it can stay in view */
  width: min(100%, calc((100svh - var(--hdr) - 150px) * 16 / 9));
}
@media (min-width: 901px) and (min-height: 560px) {
  .scene__viz {
    position: sticky;
    top: calc(var(--hdr) + clamp(20px, 4vh, 40px));
  }
}
.scene__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border-radius: 6px;
  overflow: hidden;
}
.scene__poster,
.scene__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene__vid {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.scene__vid.is-ready {
  opacity: 1;
}
/* how far the film has run: the one emphasis, because it is the one thing
   the film shows. It says nothing about individual layers. */
.scene__meter {
  position: relative;
  height: 2px;
  margin-top: 14px;
  background: var(--line);
  overflow: hidden;
}
.scene__meter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--copper);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.scene.is-flat .scene__meter {
  display: none;
}
.scene__cap {
  margin-top: 12px;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-2);
  max-width: none;
}
.scene__list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.lyr {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  padding-block: clamp(14px, 1.5vw, 20px);
  border-bottom: 1px solid var(--line);
}
.lyr__n {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--copper-2);
}
.lyr__t {
  display: block;
  font-family: var(--f-d);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
}
.lyr__d {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tx-2);
}

/* the list on its own, with the film taken out (2 Oct 2026): the seven
   layers run down the head's two columns, 01 to 04 then 05 to 07 */
.scene--list {
  display: block;
}
.scene--list .scene__list {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 5vw, 96px);
  border-top: 0;
}
.scene--list .lyr:nth-child(1),
.scene--list .lyr:nth-child(5) {
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .scene {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .scene__viz {
    width: 100%;
  }
}
/* the head goes to one column at 1100px, so the list follows it there */
@media (max-width: 1100px) {
  .scene--list .scene__list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .scene--list .lyr:nth-child(5) {
    border-top: 0;
  }
}

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

/* --------------------------------------------------------------------------
   13. CHAPTERS — a stack of full-bleed application frames
   -------------------------------------------------------------------------- */
.chapter {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 84vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
  color: var(--dx);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chapter__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.chapter__media img,
.chapter__media video,
.chapter__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chapter__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.chapter__media video.is-ready {
  opacity: 1;
}
.chapter__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.9) 0%,
      rgba(8, 9, 10, 0.52) 32%,
      rgba(8, 9, 10, 0.08) 70%
    ),
    linear-gradient(to right, rgba(8, 9, 10, 0.52) 0%, rgba(8, 9, 10, 0) 58%);
}
.chapter__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 92px) var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.chapter__t {
  color: #fff;
  max-width: 15ch;
}
.chapter__ix {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--copper-lit);
  margin-bottom: 18px;
  display: block;
}
.chapter__p {
  font-size: 17px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
  max-width: 50ch;
}
.chapter__list {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: var(--f-m);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   14. RUN — a vertical sequence (advisory services, process stations)
   -------------------------------------------------------------------------- */
.run {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.act--dark .run,
.on-dark .run {
  border-top-color: var(--dline);
}
.run__item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 72px);
  padding-block: clamp(30px, 3.6vw, 52px);
  border-bottom: 1px solid var(--line);
}
.act--dark .run__item,
.on-dark .run__item {
  border-bottom-color: var(--dline);
}
.run__k {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 14px;
  display: block;
}
.act--dark .run__k,
.on-dark .run__k {
  color: var(--copper-lit);
}
.run__t {
  font-family: var(--f-d);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 620;
  letter-spacing: -0.028em;
  line-height: 1.08;
  max-width: 16ch;
}
.run__b p {
  font-size: 17px;
  color: var(--tx-2);
  max-width: 58ch;
}
.act--dark .run__b p,
.on-dark .run__b p {
  color: var(--dx-2);
}
.run__out {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.act--dark .run__out,
.on-dark .run__out {
  border-top-color: var(--dline);
  color: var(--dx-3);
}

/* --------------------------------------------------------------------------
   15. FILM GRID — small moving tiles (applications preview, insights)
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
}
.act--dark .tiles,
.on-dark .tiles {
  background: var(--dline);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  padding: var(--s4) var(--s3);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  color: var(--dx);
}
.tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.tile__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.tile__media video.is-ready {
  opacity: 1;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(8, 9, 10, 0.88) 0%,
    rgba(8, 9, 10, 0.42) 42%,
    rgba(8, 9, 10, 0.06) 78%
  );
}
.tile:hover .tile__media img {
  transform: scale(1.04);
}
.tile__k {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--copper-lit);
  margin-bottom: 12px;
}
.tile__t {
  font-family: var(--f-d);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: #fff;
  margin-bottom: 8px;
}
.tile__p {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34ch;
}
a.tile .tile__t .arr {
  display: inline-block;
  transition: transform 0.24s var(--ease);
}
a.tile:hover .tile__t .arr {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   16. STATEMENT / QUOTE
   -------------------------------------------------------------------------- */
.stmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.stmt__t {
  max-width: 15ch;
}
.stmt__b p + p {
  margin-top: 1.05em;
}

.quote {
  max-width: 26ch;
}
.quote blockquote {
  font-family: var(--f-d);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 560;
  letter-spacing: -0.028em;
  line-height: 1.18;
  text-wrap: balance;
}
.quote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--f-m);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.on-dark .quote cite {
  color: var(--dx-3);
}

/* --------------------------------------------------------------------------
   17. DOCUMENTARY — real photography, sized honestly
   -------------------------------------------------------------------------- */
.docu {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.docu__fig {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 3 / 2;
}
.docu__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.docu__b .t-md {
  max-width: 15ch;
  margin-bottom: 18px;
}

/* people, grouped */
.teams {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}
.team-group__k {
  max-width: none;
  margin-bottom: clamp(18px, 2vw, 26px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.act--dark .team-group__k,
.on-dark .team-group__k {
  border-bottom-color: var(--dline);
}
.people {
  /* auto-fill, not auto-fit: a group of two should sit at portrait size,
     not stretch across the whole row */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(184px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  background: var(--paper-2);
  margin-bottom: 14px;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.5s var(--ease);
}
.person:hover img {
  filter: grayscale(0) contrast(1);
}
.person--wide {
  grid-column: span 2;
}
@media (max-width: 560px) {
  .person--wide {
    grid-column: span 1;
  }
}
.person--wide img {
  aspect-ratio: 16 / 10;
  object-position: center 40%;
}
.person b {
  display: block;
  font-family: var(--f-d);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.person span {
  display: block;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tx-3);
  margin-top: 4px;
}
.person__d {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tx-2);
  max-width: 34ch;
}
.act--dark .person__d,
.on-dark .person__d {
  color: var(--dx-2);
}

/* --------------------------------------------------------------------------
   17b. THE PEOPLE (About) — one two-column grid shared by the introduction,
   each pair of profiles and the full-width technical team row. The markup
   is the CMS's (js/content.js renderTeam), so this lays out whatever the
   editors publish: people in pairs, a "wide" member across the grid.
   -------------------------------------------------------------------------- */
#team {
  --team-gut: clamp(28px, 4.4vw, 72px);
}
#team .head--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--team-gut);
  row-gap: 18px;
  align-items: end;
  margin-bottom: clamp(44px, 5.5vw, 80px);
}
#team .head__t {
  max-width: none;
}
#team .head__p {
  max-width: 44ch;
  padding-bottom: 4px;
}
#team .teams {
  gap: clamp(48px, 5.5vw, 88px);
}
#team .team-group__k {
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
#team .people {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) var(--team-gut);
}
#team .person {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(20px, 2.2vw, 32px);
  align-content: start;
}
#team .person > img {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  object-position: center 20%;
}
#team .person > :not(img) {
  grid-column: 2;
}
#team .person:not(:has(> img)) {
  grid-template-columns: minmax(0, 1fr);
}
#team .person:not(:has(> img)) > * {
  grid-column: 1;
}
#team .person b {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
#team .person span {
  margin-top: 6px;
  font-family: var(--f-b);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--tx-2);
}
#team .person__d {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 38ch;
}
/* the technical team: one editorial row across the whole grid, the
   photograph in the first column and its words in the second */
#team .person--wide {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--team-gut);
}
#team .person--wide > img {
  aspect-ratio: 3 / 2;
  object-position: center 40%;
}
@media (max-width: 1100px) {
  #team .head--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  #team .people {
    grid-template-columns: minmax(0, 1fr);
  }
  #team .person {
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  }
  #team .person--wide {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  #team .teams {
    gap: 44px;
  }
  #team .people {
    gap: 28px;
  }
  #team .person {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px;
  }
  #team .person__d {
    margin-top: 10px;
    font-size: 15.5px;
  }
  #team .person--wide {
    grid-template-columns: minmax(0, 1fr);
  }
  #team .person--wide > img {
    grid-row: auto;
    margin-bottom: 16px;
  }
  #team .person--wide > :not(img) {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   18. NOTES — insights list
   -------------------------------------------------------------------------- */
.notes {
  border-top: 1px solid var(--line);
}
.note {
  display: grid;
  grid-template-columns: 128px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding-block: clamp(24px, 2.8vw, 38px);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background-color 0.24s var(--ease), padding-left 0.24s var(--ease);
}
.note:hover {
  background: rgba(197, 106, 58, 0.06);
  padding-left: 10px;
}
.note__m {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tx-3);
  text-transform: uppercase;
}
.note__t {
  font-family: var(--f-d);
  font-size: clamp(1.16rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.16;
  max-width: 24ch;
}
.note__d {
  font-size: 16px;
  color: var(--tx-2);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   19. FORMS
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--s3);
}
.field {
  display: grid;
  gap: 8px;
}
.field label {
  font-family: var(--f-d);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -0.004em;
}
.field .hint {
  font-size: 13px;
  color: var(--tx-3);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--white);
  color: var(--tx);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-family: var(--f-b);
  font-size: 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea {
  min-height: 132px;
  resize: vertical;
}
.field select {
  background-color: var(--white);
  color: var(--tx);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(197, 106, 58, 0.16);
  outline: none;
}
.field .err {
  font-size: 13px;
  color: #9e3f2d;
}
.field.is-bad input,
.field.is-bad textarea {
  border-color: #9e3f2d;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--s3);
}

/* two-route choice */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.route {
  background: var(--paper);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 0.24s var(--ease);
}
.route:hover {
  background: var(--white);
}
.route b {
  font-family: var(--f-d);
  font-size: 1.16rem;
  font-weight: 620;
  letter-spacing: -0.022em;
}
.route p,
.route__p {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tx-2);
  margin-bottom: 4px;
}
.route .txt {
  margin-top: auto;
  align-self: flex-start;
}


/* --------------------------------------------------------------------------
   19e. ENQUIRY LAYOUT — the form gets the room, the answer gets a face
   -------------------------------------------------------------------------- */
.enq {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.enq__main {
  background: var(--paper);
  padding: clamp(26px, 3.4vw, 48px);
  border-top: 2px solid var(--copper);
}
.enq__side {
  position: sticky;
  top: calc(var(--hdr) + 28px);
}
.enq__fig {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  margin-bottom: var(--s4);
}
.enq__fig img,
.enq__fig video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.enq__fig video {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.enq__fig video.is-ready {
  opacity: 1;
}
.enq__list {
  border-top: 1px solid var(--line);
}
.enq__list > div {
  padding-block: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
}
.enq__list dt {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 8px;
}
.enq__list dd {
  font-size: 16px;
  line-height: 1.55;
  color: var(--tx-2);
  max-width: 42ch;
}
.enq__list dd a {
  border-bottom: 1px solid var(--copper);
}
.enq__list dd a:hover {
  color: var(--copper-2);
}
/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.ftr {
  background: var(--slate);
  color: var(--dx);
  padding-block: clamp(56px, 7vw, 92px) clamp(28px, 3vw, 40px);
}
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--dline);
}
.ftr__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 16px;
  background: var(--white);
  border-radius: var(--r-tile);
  margin-bottom: 22px;
}
.ftr__mark img {
  height: 28px;
  width: auto;
}
.ftr__blurb {
  font-size: 15px;
  color: var(--dx-2);
  max-width: 34ch;
}
.ftr__h {
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dx-3);
  margin-bottom: 18px;
}
.ftr ul {
  list-style: none;
  display: grid;
  gap: 10px;
}
.ftr ul a {
  font-size: 14.5px;
  color: var(--dx-2);
  transition: color 0.2s var(--ease);
}
.ftr ul a:hover {
  color: var(--dx);
}
.ftr__bot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  padding-top: clamp(20px, 2.4vw, 30px);
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dx-3);
}
.ftr__bot a:hover {
  color: var(--dx);
}

/* --------------------------------------------------------------------------
   20b. MOTION CONTROL
   -------------------------------------------------------------------------- */
.motion {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dx-3);
  min-height: 44px;
  padding: 0;
  touch-action: manipulation;
}
.motion:hover {
  color: var(--dx);
}
.motion--float {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 80;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(8, 9, 10, 0.62);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.62);
  opacity: 0.42;
  transition: opacity 0.24s var(--ease), color 0.24s var(--ease);
}
.motion--float:hover,
.motion--float:focus-visible {
  opacity: 1;
  color: #fff;
}
html[data-motion="off"] .motion--float {
  opacity: 1;
}
/* only lift it where a facts rail sits at the base of the opening frame */
body:has(.film__rail) .motion--float {
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 48px);
}
html[data-motion="off"] .cue i::after {
  animation: none;
}
html[data-motion="off"] .film--still .film__media img {
  animation: none;
}

/* --------------------------------------------------------------------------
   21. REVEAL
   -------------------------------------------------------------------------- */
[data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-rise].is-in {
  opacity: 1;
  transform: none;
}
.no-js [data-rise] {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   19b. FORM ROUTES, STATUS, AND UTILITIES
   -------------------------------------------------------------------------- */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.route {
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
}
.route:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.route.active {
  background: var(--white);
}
.route.active::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--copper);
}
.route .txt {
  pointer-events: none;
}
.more-routes {
  margin-top: var(--s3);
}
.more-routes > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-d);
  font-size: 13.5px;
  font-weight: 560;
  color: var(--tx-2);
  touch-action: manipulation;
  transition: color 0.2s var(--ease);
}
.more-routes > button:hover {
  color: var(--tx);
}
.more-routes > button .arr {
  display: inline-block;
  color: var(--copper);
  transition: transform 0.24s var(--ease);
}
.more-routes > button[aria-expanded="true"] .arr {
  transform: rotate(90deg);
}
.routes-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--s2);
}
.route-sm {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--paper);
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s var(--ease);
}
.route-sm:hover,
.route-sm.active {
  background: var(--white);
}
.route-sm input {
  accent-color: var(--copper);
  width: 16px;
  height: 16px;
}
.form fieldset {
  margin-bottom: var(--s5);
}
.form legend {
  font-family: var(--f-d);
  font-weight: 620;
}
.form [data-route-note] {
  margin-top: var(--s3);
}
.form__status {
  padding: 16px 18px;
  border-left: 3px solid var(--copper);
  background: var(--paper-2);
  font-size: 15px;
}
.form__status--ok {
  border-left-color: var(--euco);
}
.form__status--bad {
  border-left-color: #9e3f2d;
}

/* --------------------------------------------------------------------------
   19f. ENQUIRY FORM — an open white form in its existing place on the
   contact page: no card, no outlines, one neutral line under each control.
   Scoped to the form and the box that holds it; the grey section around
   them, the sidebar and every other form are untouched.
   -------------------------------------------------------------------------- */
/* the contact section is one white ground: the form sits straight on it,
   with no box, beside a small photograph and a short note */
.enq-sec {
  background: #fff;
}
.enq-sec .enq {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
}
.enq__main:has(> #enquiryForm) {
  padding: 0;
  background: none;
  border-top: 0;
}
.enq-sec .enq__fig {
  aspect-ratio: 3 / 2;
  max-width: 380px;
  margin-bottom: 24px;
  background: none;
}
.enq-sec .enq__note,
.enq-sec .enq__mail {
  max-width: 36ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tx-2);
}
.enq-sec .enq__mail {
  margin-top: 14px;
}
.enq-sec .enq__mail a {
  color: var(--tx);
  border-bottom: 1px solid var(--copper);
}
.enq-sec .enq__mail a:hover {
  color: var(--copper-2);
}
.enq-sec .enq__mail a:focus-visible {
  outline: 2px solid var(--copper-2);
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .enq-sec .enq {
    grid-template-columns: minmax(0, 1fr);
  }
}
#enquiryForm {
  --eq-line: #7e8780;          /* 3.7:1 on white */
  --eq-focus: var(--copper-2); /* 5.4:1 on white; the site's amber is too faint here */
  --eq-bad: #9e3f2d;
  font-family: var(--f-b);
}
#enquiryForm [hidden] {
  display: none !important;
}
#enquiryForm .eq__body,
#enquiryForm .eq__done {
  display: grid;
  gap: 28px;
}
#enquiryForm .eq__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 20px;
}
#enquiryForm .eq__title {
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.024em;
}
#enquiryForm .eq__intro {
  margin-top: 8px;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--tx-2);
}
#enquiryForm .eq__key {
  padding-top: 4px;
  font-size: 15px;
  color: var(--tx-2);
  white-space: nowrap;
}
#enquiryForm .eq__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 28px 30px;
}
#enquiryForm .eq__field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
#enquiryForm label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tx);
}
#enquiryForm .eq__req,
#enquiryForm .eq__opt {
  font-weight: 400;
  color: var(--tx-2);
}
#enquiryForm .eq__field input:not([type="hidden"]),
#enquiryForm .eq__field select,
#enquiryForm .eq__field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  background: #fff;
  color: var(--tx);
  border: 0;
  border-bottom: 1px solid var(--eq-line);
  border-radius: 0;
  font: 400 16px/1.4 var(--f-b);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s var(--ease);
}
#enquiryForm .eq__field textarea {
  min-height: 150px;
  resize: vertical;
}
#enquiryForm .eq__field :is(input, select, textarea):hover {
  border-bottom-color: var(--tx);
}
/* the same weight as the rules above, so order decides: an error beats
   hover, and focus (below) beats an error */
#enquiryForm .eq__field :is(input, select, textarea)[aria-invalid="true"] {
  padding-bottom: 11px;
  border-bottom: 2px solid var(--eq-bad);
}
/* Focus is drawn the way the field is: its line turns ink and thickens,
   with no box around it. Ink rather than copper, because copper is too
   close to the error red to show focus landing on a field in error. On
   any focus, not only keyboard focus, because a send that finds a problem
   moves focus to that field. */
#enquiryForm .eq__field :is(input, select, textarea):focus {
  outline: none;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--tx);
}
#enquiryForm .eq__select {
  position: relative;
}
#enquiryForm .eq__select select {
  padding-right: 34px;
  cursor: pointer;
}
#enquiryForm .eq__select select:has(option[value=""]:checked) {
  color: var(--tx-2);
}
#enquiryForm .eq__select option {
  color: var(--tx);
}
/* drawn chevron: the CSP allows no data: images */
#enquiryForm .eq__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 2px solid var(--tx);
  border-bottom: 2px solid var(--tx);
  transform: rotate(45deg);
  pointer-events: none;
}
#enquiryForm .eq__err {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--eq-bad);
}
#enquiryForm .eq__service {
  font-size: 15px;
  color: var(--tx-2);
}
#enquiryForm .eq__service strong {
  font-weight: 600;
  color: var(--tx);
}
#enquiryForm .eq__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
}
#enquiryForm .eq__privacy {
  flex: 1 1 240px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx-2);
}
#enquiryForm .eq__privacy a,
#enquiryForm .eq__alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#enquiryForm .eq__privacy a:hover {
  color: var(--tx);
}
#enquiryForm .eq__submit,
#enquiryForm .eq__again,
#enquiryForm .eq__retry {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font: 600 16px/1.1 var(--f-b);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
#enquiryForm .eq__submit {
  background: var(--euco);
  border: 1px solid var(--euco);
  color: #fff;
}
#enquiryForm .eq__submit:hover,
#enquiryForm .eq__submit[aria-disabled="true"] {
  background: var(--euco-2);
  border-color: var(--euco-2);
}
#enquiryForm .eq__submit[aria-disabled="true"] {
  cursor: progress;
}
#enquiryForm .eq__again,
#enquiryForm .eq__retry {
  background: #fff;
  border: 1px solid var(--eq-line);
  color: var(--tx);
}
#enquiryForm .eq__retry {
  min-height: 44px;
  margin-top: 12px;
  padding: 0 20px;
}
#enquiryForm .eq__again:hover,
#enquiryForm .eq__retry:hover {
  border-color: var(--tx);
}
#enquiryForm :is(button, a):focus-visible {
  outline: 2px solid var(--eq-focus);
  outline-offset: 3px;
}
/* an error sits in the flow of the form, not in a box of its own */
#enquiryForm .eq__alert {
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--eq-bad);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tx);
}
#enquiryForm .eq__done {
  justify-items: start;
  gap: 16px;
}
#enquiryForm .eq__done .eq__intro {
  margin-top: 0;
  max-width: 46ch;
}
/* these take focus from the script only, so they are not in the tab order */
#enquiryForm .eq__alert:focus,
#enquiryForm .eq__done .eq__title:focus {
  outline: none;
}
#enquiryForm .eq__tick {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--euco);
}
#enquiryForm .eq__tick::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 9px;
  width: 10px;
  height: 18px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}
@media (max-width: 560px) {
  #enquiryForm .eq__foot {
    flex-direction: column;
    align-items: flex-start;
  }
  #enquiryForm .eq__privacy {
    flex: 0 1 auto; /* in a column the 240px basis would become a height */
  }
}
/* The site's floating Pause motion control would sit over the fields.
   js/contact.js marks the page only while it would cover the form. */
html[data-eq-under-float] .motion--float {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   19c. STILL FRAME — a photograph held and pushed in very slowly
   -------------------------------------------------------------------------- */
.film--still .film__media img {
  animation: hold 26s var(--ease) infinite alternate;
  transform-origin: 62% 46%;
}
@keyframes hold {
  from {
    transform: scale(1.005);
  }
  to {
    transform: scale(1.075);
  }
}

/* --------------------------------------------------------------------------
   19d. LEGAL AND UTILITY PAGES
   -------------------------------------------------------------------------- */
.doc {
  padding-top: clamp(56px, 8vw, 120px);
}
.doc h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin-top: var(--s6);
  margin-bottom: var(--s2);
}
.doc h3 {
  font-size: 1.08rem;
  margin-top: var(--s4);
  margin-bottom: var(--s1);
}
.doc p,
.doc li {
  max-width: 68ch;
  margin-bottom: 0.9em;
  color: var(--tx-2);
}
.doc ul,
.doc ol {
  padding-left: 1.2em;
  margin-bottom: 1.2em;
}
.doc a {
  border-bottom: 1px solid var(--copper);
}
.doc a:hover {
  color: var(--copper-2);
}


/* --------------------------------------------------------------------------
   8b. SCRUBBED FRAME — a film driven entirely by scroll position. It never
   autoplays, and it stops the instant the page stops moving.
   -------------------------------------------------------------------------- */
[data-scrub] .film__media video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
[data-scrub] .film__media video.is-ready {
  opacity: 1;
}
.film[data-scrub] .film__media img,
.film[data-scrub] .film__media video {
  transform: scale(calc(1.045 - var(--p, 0) * 0.045));
  transform-origin: 58% 50%;
}
.film[data-scrub] .film__block {
  opacity: clamp(0, calc(1 - var(--p, 0) * 1.7), 1);
  transform: translateY(calc(var(--p, 0) * -22px));
}
.film[data-scrub].is-flat .film__block {
  opacity: 1;
  transform: none;
}
/* the scrub cue: a hairline that fills as the film runs */
.scrubline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.scrubline::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--copper-lit);
}
.film:has(.film__rail) .scrubline {
  bottom: 48px;
}

/* --------------------------------------------------------------------------
   16b. FEATURE FILM — a real film with sound, given the room it deserves.
   -------------------------------------------------------------------------- */
.feature {
  position: relative;
  isolation: isolate;
  background: var(--black);
  overflow: hidden;
}
.feature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.feature__media img,
.feature__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature__media video {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.feature__media video.is-ready {
  opacity: 1;
}
.feature.is-playing .feature__over {
  opacity: 0;
  pointer-events: none;
}
.feature__over {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(28px, 4vw, 56px) var(--gut);
  background: linear-gradient(to top, rgba(8, 9, 10, 0.86), rgba(8, 9, 10, 0));
  transition: opacity 0.5s var(--ease);
}
.feature__over h2,
.feature__over .t-lg {
  color: #fff;
  max-width: 18ch;
}
.feature__over p {
  margin-top: 14px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
}
.feature__over .feature__fallback {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.feature__fallback a {
  color: var(--copper-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.feature__ctl {
  position: absolute;
  right: var(--gut);
  bottom: 22px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.feature__ctl button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(8, 9, 10, 0.62);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  touch-action: manipulation;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.feature__ctl button:hover {
  background: rgba(8, 9, 10, 0.85);
  color: #fff;
}


/* --------------------------------------------------------------------------
   16c. PRESS BELT — the mastheads that have covered the work, running
   quietly past. Monotone, so it reads as evidence rather than decoration.
   -------------------------------------------------------------------------- */
.belt {
  position: relative;
  overflow: hidden;
  padding-block: clamp(18px, 2.2vw, 28px);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.act--dark .belt,
.on-dark .belt {
  border-block-color: var(--dline);
}
.belt__track {
  display: flex;
  width: max-content;
  animation: belt var(--belt-dur, 46s) linear infinite;
}
.belt__set {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 92px);
  padding-right: clamp(48px, 6vw, 92px);
  list-style: none;
  flex: 0 0 auto;
}
.belt__set img {
  /* 25% larger again in round 2 (R2-SW-02); --s draws wide wordmarks lower
     so every outlet reads at about the same weight */
  height: calc(clamp(31px, 3.6vw, 44px) * var(--s, 1));
  width: auto;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease);
}
.act--dark .belt__set img,
.on-dark .belt__set img {
  opacity: 0.62;
  filter: invert(1);
}
.belt:hover .belt__set img {
  opacity: 0.78;
}
@keyframes belt {
  to {
    transform: translateX(-50%);
  }
}
html[data-motion="off"] .belt__track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   18b. RAIL — horizontal is depth on one subject, vertical is the next
   subject. Native scrolling with snap: no interception, no scroll-jacking.
   -------------------------------------------------------------------------- */
.rail {
  --rail-p: 0;
  position: relative;
}
/* the material keeps going past the right edge, so say so */
.rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(40px, 7vw, 96px);
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right, rgba(240, 240, 238, 0), var(--paper));
}
.act--sunk .rail::after {
  background: linear-gradient(to right, rgba(229, 229, 225, 0), var(--paper-2));
}
.act--dark .rail::after,
.on-dark .rail::after {
  background: linear-gradient(to right, rgba(8, 9, 10, 0), var(--black));
}
.rail__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--copper);
}
.rail__hint i {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.rail__hint i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  animation: railhint 2.4s var(--ease) infinite;
}
@keyframes railhint {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.act--dark .rail__hint,
.on-dark .rail__hint {
  color: var(--copper-lit);
}
.act--dark .rail__hint i::after,
.on-dark .rail__hint i::after {
  background: var(--black);
}
.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  max-width: var(--maxw);
  margin: 0 auto clamp(22px, 3vw, 34px);
  padding-inline: var(--gut);
}
.rail__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.rail__count {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--tx-3);
  min-width: 62px;
}
.act--dark .rail__count,
.on-dark .rail__count {
  color: var(--dx-3);
}
.rail__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--tx);
  touch-action: manipulation;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.rail__nav button:hover:not(:disabled) {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--paper);
}
.rail__nav button:disabled {
  opacity: 0.3;
  cursor: default;
}
.act--dark .rail__nav button,
.on-dark .rail__nav button {
  border-color: var(--dline-2);
  color: var(--dx);
}
.act--dark .rail__nav button:hover:not(:disabled),
.on-dark .rail__nav button:hover:not(:disabled) {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--tx);
}
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(400px, 76vw), 1fr);
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  padding-inline: var(--gut);
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--line);
}
.rail__track::-webkit-scrollbar {
  display: none;
}
.rail__track:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.act--dark .rail__track,
.on-dark .rail__track {
  background: var(--dline);
}
.rail__panel {
  position: relative;
  scroll-snap-align: start;
  cursor: default;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: clamp(26px, 3vw, 38px);
  background: var(--paper);
  transition: background-color 0.4s var(--ease), opacity 0.4s var(--ease);
  opacity: 0.66;
}
.rail__panel.is-current {
  opacity: 1;
  background: #fff;
}
.rail__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease);
}
.rail__panel.is-current::before {
  transform: scaleX(1);
}
.act--sunk .rail__panel.is-current {
  background: #fff;
}
.act--dark .rail__panel.is-current,
.on-dark .rail__panel.is-current {
  background: var(--graphite, #15181a);
}
.act--sunk .rail__panel {
  background: var(--paper-2);
}
.act--dark .rail__panel {
  background: var(--black);
}
.act--ink .rail__panel {
  background: var(--ink);
}
.rail__k {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: 16px;
}
.rail__panel.is-current .rail__k {
  color: var(--copper);
}
.act--dark .rail__panel.is-current .rail__k,
.on-dark .rail__panel.is-current .rail__k {
  color: var(--copper-lit);
}
.rail__t {
  font-family: var(--f-d);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 620;
  letter-spacing: -0.026em;
  line-height: 1.12;
  margin-bottom: 14px;
  max-width: 18ch;
}
.rail__panel p {
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--tx-2);
  max-width: 42ch;
}
.act--dark .rail__panel p,
.on-dark .rail__panel p {
  color: var(--dx-2);
}
.rail__panel .rail__fig {
  position: relative;
  margin-top: auto;
  padding-top: clamp(20px, 3vw, 32px);
  height: 196px;
  overflow: hidden;
}
.rail__fig img,
.rail__fig video {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: calc(100% - clamp(20px, 3vw, 32px));
  object-fit: cover;
}
.rail__fig video {
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.rail__fig video.is-ready {
  opacity: 1;
}
.rail__out {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-3);
}
.act--dark .rail__out,
.on-dark .rail__out {
  border-top-color: var(--dline);
  color: var(--dx-3);
}
/* progress under a rail */
.rail__bar {
  position: relative;
  height: 1px;
  max-width: var(--maxw);
  margin: clamp(20px, 3vw, 30px) auto 0;
  background: var(--line);
}
.act--dark .rail__bar,
.on-dark .rail__bar {
  background: var(--dline);
}
.rail__bar::after {
  content: "";
  position: absolute;
  inset: -1px auto -1px 0;
  width: calc(6% + var(--rail-p) * 94%);
  background: var(--copper);
}

/* a rail of years: the timeline */
.rail--years .rail__track {
  grid-auto-columns: minmax(min(340px, 78vw), 1fr);
}
.rail--years .rail__panel {
  min-height: 440px;
}
.rail__yr {
  font-family: var(--f-d);
  font-size: clamp(3rem, 5.4vw, 4.6rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  opacity: 0.26;
  margin-bottom: 20px;
  transition: opacity 0.45s var(--ease), color 0.45s var(--ease);
}
.rail__panel.is-current .rail__yr {
  opacity: 1;
}
.rail--years .rail__panel {
  opacity: 0.62;
  transition: opacity 0.45s var(--ease);
}
.rail--years .rail__panel.is-current {
  opacity: 1;
}
.act--dark .rail__yr,
.on-dark .rail__yr {
  color: #fff;
}

/* --------------------------------------------------------------------------
   18c. CONSULT SERVICES — four cards in a two-by-two grid. A deliberate,
   scoped exception to "no cards": the essentials sit on the card and the
   detail opens in place in a native disclosure, so the page only ever
   scrolls down. Nothing here is scroll-driven.
   -------------------------------------------------------------------------- */
.svc-wrap {
  max-width: calc(1200px + var(--gut) * 2);
}
.svc-head {
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.svc-head .lead {
  max-width: 60ch;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.2vw, 32px);
}
.svc {
  --svc-pad: clamp(24px, 2.3vw, 32px);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: var(--svc-pad);
  background: #f8f8f7;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* closed cards in a row share a height, so the outcome rules line up. Once
   one opens, its neighbour keeps its own height rather than stretching. */
.svc:nth-child(odd):has(details[open]) + .svc,
.svc:nth-child(odd):has(+ .svc details[open]) {
  align-self: start;
}
.svc__media {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-2);
}
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc__ix {
  margin-top: 22px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--euco);
}
.svc__t {
  margin-top: 6px;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
  /* a #t01 link lands with the whole card in view, photograph included */
  scroll-margin-top: calc(var(--hdr) + 24px + var(--svc-pad) + 43.75cqw + 44px);
}
.svc__p {
  margin-top: 12px;
  font-size: clamp(16.5px, 1.25vw, 18px);
  line-height: 1.56;
  color: var(--tx-2);
}
.svc__foot {
  margin-top: auto;
  padding-top: 22px;
}
.svc__out {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.svc__out dt {
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-2);
}
.svc__out dd {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tx);
}
.svc__more {
  margin-top: 10px;
}
.svc__more > summary {
  display: block;
  width: fit-content;
  padding-block: 11px;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-d);
  font-size: 15px;
  font-weight: 580;
  letter-spacing: -0.006em;
  color: var(--euco);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s var(--ease);
}
.svc__more > summary::-webkit-details-marker {
  display: none;
}
.svc__more > summary:hover {
  color: var(--euco-2);
  text-decoration: underline 1px var(--copper);
  text-underline-offset: 5px;
}
/* plus that closes to a minus */
.svc__icon {
  position: relative;
  display: inline-block;
  vertical-align: -1px;
  width: 12px;
  height: 12px;
  margin-left: 10px;
}
.svc__icon::before,
.svc__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5.25px;
  width: 12px;
  height: 1.5px;
  background: var(--copper);
  transition: transform 0.26s var(--ease);
}
.svc__icon::after {
  transform: rotate(90deg);
}
.svc__more[open] .svc__icon::after {
  transform: rotate(0deg);
}
.svc__body {
  padding: 4px 0 6px;
  animation: svc-open 0.32s var(--ease-out);
}
@keyframes svc-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.svc__body h4 {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.svc__body h4:first-child {
  margin-top: 4px;
}
.svc__body p {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.58;
  color: var(--tx-2);
}
.svc-note {
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.58;
  color: var(--tx-2);
}

/* who we work with: all six settings at once, no rail */
.sectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 52px) clamp(24px, 2.2vw, 32px);
  list-style: none;
}
.sector__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--line);
}
.sector__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sector__t {
  margin-top: 18px;
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sector p {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.56;
  color: var(--tx-2);
}

/* closing contact band on a pale eucalyptus ground: the advisory route */
.cta-euco {
  background: #dae2dd;
}
.cta-euco__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px clamp(32px, 5vw, 80px);
}
.cta-euco__in h2 {
  max-width: 20ch;
}
.cta-euco__p {
  margin-top: 14px;
  max-width: 58ch;
  font-size: clamp(16.5px, 1.25vw, 18px);
  line-height: 1.58;
  color: var(--tx-2);
}
.cta-euco .acts {
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .cta-euco__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .cta-euco .acts {
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .svc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .sectors {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   18d. PRINTED SOLAR — the ledger here carries word labels as well as years,
   so its index column is wider, and it stacks on a phone. The scroll hint
   under the film only shows where scrolling actually opens the film.
   -------------------------------------------------------------------------- */
.ledger--words .ledger__row {
  grid-template-columns: 120px minmax(0, 0.72fr) minmax(0, 1.5fr);
}
.nowrap {
  white-space: nowrap;
}
html[data-motion="off"] .scene__hint {
  display: none;
}
@media (max-width: 1100px) {
  .ledger--words .ledger__row {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .ledger--words .ledger__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .ledger--words .ledger__d {
    grid-column: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene__hint {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   21b. SCROLL-TRIGGERED TEXT — the sentence resolves word by word, and the
   words that carry the point arrive a beat later.
   -------------------------------------------------------------------------- */
[data-text] .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.66s var(--ease-out), transform 0.66s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 32ms);
  will-change: opacity, transform;
}
[data-text].is-in .w {
  opacity: 1;
  transform: none;
}
[data-text] .w--late {
  transition-delay: calc(210ms + var(--i, 0) * 32ms);
}
[data-text]:not(.is-in) {
  pointer-events: none;
}
.no-js [data-text] .w,
.no-js [data-text] {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .head--split,
  .split,
  .split--flip,
  .stmt,
  .docu,
  .chapter__in,
  .run__item {
    grid-template-columns: minmax(0, 1fr);
  }
  .head--split .head__p,
  .head--split .head__t {
    grid-column: 1;
  }
  .split--flip .split__media {
    order: 0;
  }
  .split__media {
    height: clamp(280px, 56vw, 440px);
  }
  .split__body {
    max-width: none;
    padding: clamp(24px, 5vw, 40px) var(--gut) clamp(32px, 6vw, 56px);
  }
  .ftr__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .enq {
    grid-template-columns: minmax(0, 1fr);
  }
  .enq__side {
    position: static;
  }
  .ledger__row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .ledger__d {
    grid-column: 2;
  }
  .note {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .note__t {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .nav__list,
  .hdr__cta {
    display: none;
  }
  .burger {
    display: flex;
    margin-left: auto;
    margin-right: -10px;
  }
  .film__block,
  .film__block .film__p,
  .ftr__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .chapter {
    min-height: 74svh;
  }
}

@media (max-width: 720px) {
  /* the rail header has three parts; on a phone they stack rather than
     push the document wider than the screen */
  .rail__head {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 16px;
  }
  .rail__head > *:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .rail__hint {
    display: none;
  }
  .rail__nav {
    margin-left: auto;
  }
  .rail__track {
    grid-auto-columns: minmax(min(320px, 86vw), 1fr);
  }
  .rail__panel {
    min-height: 340px;
  }
  .rail--years .rail__panel {
    min-height: 380px;
  }
  .feature__ctl {
    right: auto;
    left: var(--gut);
  }
  .feature__over {
    padding-bottom: 78px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }
  .film {
    height: 92svh;
    min-height: 540px;
  }
  .film__rail ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0 18px;
    font-size: 12px;
    padding-block: 11px;
  }
  .film__rail ul::-webkit-scrollbar {
    display: none;
  }
  .film__rail li {
    white-space: nowrap;
  }
  .tile {
    min-height: 320px;
  }
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .routes {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* on a phone the rail is one scrolling line, so the copy above it needs
   a fixed, predictable amount of room */
@media (max-width: 900px) {
  .film:has(.film__rail) .film__in {
    padding-bottom: 76px;
  }
  /* on a phone the copy runs down the left, so the switch moves right */
  .motion--float,
  body:has(.film__rail) .motion--float {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 52px);
  }
  .film__block .acts {
    gap: 10px;
  }
  .film__block .btn {
    min-height: 48px;
    padding: 12px 18px;
  }
  .film__block .acts {
    width: 100%;
  }
  .film__block .acts .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
/* --------------------------------------------------------------------------
   23. REDUCED MOTION — last, so it wins on source order
   -------------------------------------------------------------------------- */
@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;
  }
  [data-rise] {
    opacity: 1;
    transform: none;
  }
  [data-text] .w {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .belt__track {
    animation: none;
  }
  .belt {
    overflow-x: auto;
  }
  .rail__track {
    scroll-snap-type: none;
  }
  .film[data-scrub] .film__media img,
  .film[data-scrub] .film__media video,
  .film[data-scrub] .film__block {
    transform: none;
    opacity: 1;
  }
  .film--pin {
    height: calc(100svh - var(--hdr));
  }
  .film--pin .film__hold {
    position: relative;
    top: 0;
    height: 100%;
  }
  .film__media video,
  .band__media video,
  .chapter__media video,
  .tile__media video,
  .split__media video {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   24. BETWEEN PAGES — a short cross-fade on navigation where the browser
   supports it. Everywhere else the site simply navigates as before.
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: kd-page-out 0.16s var(--ease) both;
}
::view-transition-new(root) {
  animation: kd-page-in 0.34s var(--ease-out) both;
}
@keyframes kd-page-out {
  to {
    opacity: 0;
  }
}
@keyframes kd-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* the bar is the one thing that should not move between pages */
.hdr {
  view-transition-name: kd-header;
}
::view-transition-old(kd-header),
::view-transition-new(kd-header) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* An extra jump target inside a section (e.g. #property on Applications),
   for links that name a market rather than the section's original id. */
.anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* A second, smaller statement inside a band (Home, problem and opportunity). */
.band__sub {
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--f-d);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 24ch;
}
.band__p--tight {
  margin-top: 12px;
}

/* the tour video held inside the Coldplay case study (CS-01, the proposed
   layout): set in the column rather than full bleed, between the opening
   paragraph and the figures */
.feature--inset {
  margin-block: clamp(32px, 4vw, 52px);
  border-radius: 6px;
}
.feature--inset .feature__over {
  padding: clamp(20px, 3vw, 40px);
}
.feature--inset .feature__ctl {
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 22px);
}

/* Round 2 (Anthony, 2 Oct 2026) -------------------------------------------
   An image-led section: an authentic photograph under a dark wash, with the
   section's own content on top (the Coldplay block on Home, R2-H-04). */
.act--photo {
  isolation: isolate;
  overflow: hidden;
}
.act__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.act__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.act__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 9, 10, 0.72), rgba(8, 9, 10, 0.9));
}
/* the press belt sits close under the block above it (R2-H-05) */
.act--snug-end {
  padding-bottom: clamp(44px, 5vw, 72px);
}
.act--snug-start {
  padding-top: clamp(28px, 3vw, 44px);
}
/* a value the technical team still has to confirm; never published */
mark.tbc {
  background: #f3d36b;
  color: #08090a;
  padding: 0 0.25em;
  border-radius: 2px;
  font-family: var(--f-m);
  font-size: 0.86em;
}
/* a wide documentary photograph under a ledger (our proposed image for the
   new approach section on Home, R2-H-12) */
.wide-fig {
  margin-top: clamp(32px, 4vw, 56px);
}
.wide-fig img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.wide-fig figcaption {
  margin-top: 10px;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-2);
}

/* Round 3: the Advisory Board, three across with each name, role and
   biography under the portrait (R3-AB-06). Portraits sit at the executive
   team's size; one column on a phone. Until the portraits arrive, a plain
   panel with initials holds each one's place. */
.team-group__intro {
  margin: calc(clamp(22px, 2.4vw, 32px) * -0.4) 0 clamp(22px, 2.4vw, 32px);
  color: var(--tx-2);
  max-width: 60ch;
}
#team .people--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#team .people--three .person {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}
#team .people--three .person > * {
  grid-column: 1;
}
#team .people--three .person > img,
#team .people--three .person__ph {
  grid-row: auto;
  width: 72%;
  aspect-ratio: 4 / 5;
  margin: 0 0 18px;
}
.person__ph {
  display: grid;
  place-items: center;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  font-family: var(--f-d);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: 0.04em;
  color: var(--tx-2);
}
@media (max-width: 900px) {
  #team .people--three {
    grid-template-columns: minmax(0, 1fr);
  }
  #team .people--three .person > img,
  #team .people--three .person__ph {
    width: min(64%, 260px);
  }
}

/* Photographs from the field and the lab (imagery version, Oct 2026): a
   strip that scrolls sideways, one photograph at a time on a phone, with
   arrows for mouse users and the caption under each frame. */
.gallery {
  margin-top: clamp(32px, 4vw, 56px);
}
.gallery__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gallery__track::-webkit-scrollbar {
  display: none;
}
.gallery__track:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}
.gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
  width: min-content; /* the caption wraps to its photograph */
}
.gallery__item img {
  display: block;
  height: clamp(240px, 34vw, 500px);
  width: auto;
  max-width: none;
  border-radius: 6px;
  background: var(--paper-2);
}
.gallery__item figcaption {
  margin-top: 10px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tx-2);
}
.gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.gallery__credit {
  margin: 0;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-2);
}
.gallery__nav {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.gallery__nav button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.gallery__nav button:hover {
  background: var(--paper-2);
}
.gallery__nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.act--dark .gallery__item figcaption,
.act--dark .gallery__credit {
  color: var(--dx-2);
}
.act--dark .gallery__bar,
.act--dark .gallery__nav button {
  border-color: var(--dline);
}
.act--dark .gallery__nav button:hover {
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 720px) {
  .gallery__item img {
    height: auto;
    width: 82vw;
    max-width: 82vw;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__track {
    scroll-behavior: auto;
  }
}

/* Two short loops side by side (the tour: installed, then packed down) */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(36px, 4.5vw, 64px);
}
.pair__item {
  margin: 0;
  min-width: 0;
}
.pair__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--black);
}
.pair__media img,
.pair__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pair__media video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.pair__media video.is-ready {
  opacity: 1;
}
.pair__item figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tx-2);
}
.act--dark .pair__item figcaption {
  color: var(--dx-2);
}
@media (max-width: 720px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* real photographs are brighter than the generated night scenes, so the
   words over them get a deeper wash */
.chapter--photo .chapter__scrim {
  background: linear-gradient(to top, rgba(8, 9, 10, 0.92) 0%, rgba(8, 9, 10, 0.66) 40%, rgba(8, 9, 10, 0.28) 78%),
    linear-gradient(to right, rgba(8, 9, 10, 0.7) 0%, rgba(8, 9, 10, 0.1) 62%);
}

/* --------------------------------------------------------------------------
   Design audit, October 2026
   - small labels meet WCAG AA (4.5:1) on paper, sunken paper and the dark
     surfaces; the copper index numbers take a deeper copper on light
   - no text below 12px (set above, in place)
   - every link and control has at least a 44px tap area; the visible size
     of underlined text links is unchanged
   -------------------------------------------------------------------------- */
:root {
  --tx-3: #5f6569;
  --dx-3: #8a9095;
  --copper-ink: #9a4d26;
}
.eyebrow .ix,
.ledger__ix {
  color: var(--copper-ink);
}
.act--dark .eyebrow,
.act--ink .eyebrow {
  color: var(--dx-3);
}
.act--dark .eyebrow .ix,
.act--ink .eyebrow .ix,
.film .eyebrow .ix,
.band .eyebrow .ix,
.chapter .eyebrow .ix,
.feature .eyebrow .ix {
  color: var(--copper);
}
.act--dark .ledger__ix,
.act--ink .ledger__ix,
.on-dark .ledger__ix {
  color: var(--copper-lit);
}
.txt,
.ftr__bot a,
.ftr a {
  position: relative;
}
.txt::after {
  content: "";
  position: absolute;
  inset: -5px -4px;
}
.ftr__bot a::after {
  content: "";
  position: absolute;
  inset: -15px -6px;
}
.feature__ctl button,
.motion--float {
  min-height: 44px;
}
/* a film is never shown wider than it was made: the interview is 786px
   wide; it keeps the page's left edge like everything around it */
.feature--native {
  max-width: 900px;
}
.rail__hint {
  color: var(--copper-ink);
}
.act--dark .rail__hint,
.on-dark .rail__hint {
  color: var(--copper-lit);
}
.feature--native {
  max-width: 820px;
}

/* Inset films: the controls sit top right, clear of the caption and of any
   broadcaster's mark in the lower corner; on a phone the caption moves under
   the picture instead of covering it */
.feature--inset .feature__ctl {
  top: clamp(12px, 1.6vw, 20px);
  bottom: auto;
}
@media (max-width: 720px) {
  .feature--inset {
    background: transparent;
    overflow: visible;
  }
  .feature--inset .feature__media {
    border-radius: 6px;
    overflow: hidden;
  }
  .feature--inset .feature__over {
    position: static;
    padding: 14px 0 0;
    background: none;
  }
  .feature--inset.is-playing .feature__over {
    opacity: 1;
    pointer-events: auto;
  }
  .feature--inset .feature__over p {
    font-size: 15px;
    margin-top: 6px;
  }
  .feature--inset .feature__ctl {
    top: 10px;
    right: 10px;
    left: auto;
  }
}

/* Home hero: let the line break fall where the width puts it on a phone,
   rather than leaving "the" alone on a line */
@media (max-width: 480px) {
  #h-home br {
    display: none;
  }
}

/* The fact strip under a hero scrolls sideways on a phone: fade its right
   edge so it reads as more to see, not as text cut off */
@media (max-width: 720px) {
  .film__rail ul {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }
}

/* Case study links inside a ruled row sit in the line, so the paragraph
   keeps its own line spacing */
.ledger__d .txt {
  display: inline;
  padding-block: 0;
}

/* The floating motion switch: on a phone a round 44px button with a pause
   or play mark, so it covers less of the page; the label stays for screen
   readers */
@media (max-width: 720px) {
  .motion--float {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
    display: grid;
    place-items: center;
  }
  .motion--float::before {
    content: "";
    width: 10px;
    height: 12px;
    border-inline: 3px solid rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
  }
  .motion--float[aria-pressed="true"]::before {
    width: 0;
    height: 0;
    border-inline: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
    margin-left: 3px;
  }
}

/* Advisory Board on a phone: the same row as the executive team, the
   portrait beside the name */
@media (max-width: 900px) {
  #team .people--three .person {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }
  #team .people--three .person > * {
    grid-column: 2;
  }
  #team .people--three .person > .person__ph,
  #team .people--three .person > img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Imagery pass, October 2026 (team three): real photographs in place of
   generated frames, placed with the existing components
   -------------------------------------------------------------------------- */
/* a photograph that opens a section, between its head and its ledger: the
   film shown at work before the rows describe it */
.wide-fig--lead {
  margin-top: 0;
  margin-bottom: clamp(40px, 5vw, 72px);
}
/* a letterbox crop, so a landscape photograph reads as a strip of roof
   rather than a second hero */
.wide-fig--crop img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
@media (max-width: 720px) {
  .wide-fig--crop img {
    aspect-ratio: 4 / 3;
  }
}
/* opening photographs: keep the subject in frame when a phone crops the
   sides away */
.film--team .film__media img {
  object-position: 56% 40%;
}
.film--holder .film__media img {
  object-position: 50% 45%;
  transform-origin: 40% 45%;
}
@media (max-width: 900px) {
  .film--holder .film__media img {
    object-position: 38% 50%;
  }
}
/* real daylight photographs behind an opening frame or a band get the same
   deeper neutral wash as .chapter--photo, so the words keep their contrast */
.film--photo .film__scrim {
  background: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.92) 0%,
      rgba(8, 9, 10, 0.7) 30%,
      rgba(8, 9, 10, 0.34) 62%,
      rgba(8, 9, 10, 0.3) 100%
    ),
    linear-gradient(to right, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0.1) 64%);
}
.band--photo .band__scrim {
  background: linear-gradient(to top, rgba(8, 9, 10, 0.9) 0%, rgba(8, 9, 10, 0.62) 40%, rgba(8, 9, 10, 0.3) 80%),
    linear-gradient(to right, rgba(8, 9, 10, 0.82) 0%, rgba(8, 9, 10, 0.5) 44%, rgba(8, 9, 10, 0.06) 72%);
}
@media (max-width: 720px) {
  /* on a phone the words cover the whole frame */
  .film--photo .film__scrim {
    background: linear-gradient(to top, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.74) 46%, rgba(8, 9, 10, 0.4) 100%);
  }
  .band--photo .band__scrim {
    background: rgba(8, 9, 10, 0.74);
  }
  .film--team .film__media img {
    object-position: 34% 40%;
  }
}
/* a tile over a bright photograph: the kicker and title keep AA contrast */
.tile--deep::after {
  background: linear-gradient(to top, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.7) 44%, rgba(8, 9, 10, 0.12) 82%);
}
@media (max-width: 720px) {
  .tile--deep::after {
    background: linear-gradient(to top, rgba(8, 9, 10, 0.94) 0%, rgba(8, 9, 10, 0.82) 62%, rgba(8, 9, 10, 0.3) 100%);
  }
}

/* a strip of photographs run edge to edge (team one), each frame as wide as
   its own proportions allow (set with --ar); on a phone the first runs full width
   and the rest sit two to a row */
.strip {
  display: flex;
  gap: 4px;
  margin-block: clamp(32px, 4vw, 56px);
}
.strip__item {
  margin: 0;
  min-width: 0;
  flex: var(--ar, 1.5) 1 0;
  overflow: hidden;
  background: var(--ink);
}
.strip__item img {
  display: block;
  width: 100%;
  height: clamp(280px, 32vw, 520px);
  object-fit: cover;
}
@media (max-width: 720px) {
  .strip {
    flex-wrap: wrap;
  }
  .strip__item {
    flex: 1 1 calc(50% - 2px);
  }
  .strip__item:first-child {
    flex-basis: 100%;
  }
  .strip__item img {
    height: 64vw;
  }
}

/* --------------------------------------------------------------------------
   Draft for review, 14 Oct 2026 (Anthony's designer narrative)
   -------------------------------------------------------------------------- */
/* SW-03: longer body paragraphs set justified on desktop, with hyphenation
   so the word spacing stays even. Headings, captions, buttons and short
   lines stay left aligned; a one-line paragraph is never stretched. */
@media (min-width: 901px) {
  main p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
  }
  main p.eyebrow,
  main p.ix,
  main p.tiny,
  main .person__d,
  main .rail__panel p,
  main .svc p,
  main .tile__p,
  main .gallery__credit,
  main .eq__privacy,
  main .feature__fallback {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* AP-01: the remote sites chapter in daylight, with a lighter wash */
#remote .chapter__media img,
#remote .chapter__media video {
  filter: brightness(1.32) saturate(1.08);
}
#remote .chapter__scrim {
  background: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.82) 0%,
      rgba(8, 9, 10, 0.4) 34%,
      rgba(8, 9, 10, 0) 66%
    ),
    linear-gradient(to right, rgba(8, 9, 10, 0.42) 0%, rgba(8, 9, 10, 0) 52%);
}

/* H-03: the press photograph behind the research band keeps the material
   and rollers in view; the words sit over the researcher's side */
.band--press .band__media img {
  object-position: 62% 50%;
}

/* Case studies: the Will Champion interview and the ABC News film run the
   full width of the content, edge to edge with the photographs above */
.feature--inset.feature--interview {
  max-width: none;
}
/* Charge Around Australia: the rolls laid out on the field, shown at the
   photograph's own panoramic proportions under the words */
.caa__head {
  max-width: 760px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.caa__head .t-lg {
  margin-top: var(--s2);
}
.caa__head .lead {
  margin-top: var(--s3);
}
.caa__fig {
  margin: 0;
}
.caa__fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
@media (max-width: 720px) {
  .caa__fig img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
}

/* The new Kardinia logo (Oct 2026): navy on the light header, white on the
   dark footer, half as tall again as the old mark */
.hdr__logo img {
  height: clamp(36px, 3.6vw, 45px);
}
.ftr__mark {
  height: auto;
  padding-inline: 0;
  background: none;
  border-radius: 0;
}
.ftr__mark img {
  height: 44px;
}
@media (min-width: 901px) and (max-width: 1180px) {
  .hdr__logo img {
    height: 34px;
  }
  .nav__list {
    gap: 14px;
  }
}

/* Talk to us opens on the team itself, faces kept in frame */
.film--people .film__media img {
  object-position: 50% 38%;
}

/* --------------------------------------------------------------------------
   News (Oct 2026): three lead stories with Kardinia's own photographs, then
   the coverage by year, each story carrying its publisher's mark
   -------------------------------------------------------------------------- */
.news__count {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: clamp(20px, 2.4vw, 32px);
  text-align: left !important;
}
.news__lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.story--lead {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.story__fig {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink);
  margin-bottom: 6px;
}
.story__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.story--lead:hover .story__fig img {
  transform: scale(1.04);
}
.story__src {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 30px;
}
.story__mark {
  height: calc(22px * var(--s, 1));
  width: auto;
  max-width: 140px;
  opacity: 0.72;
  transition: opacity 0.24s var(--ease);
}
.story:hover .story__mark {
  opacity: 1;
}
.story__word {
  font-family: var(--f-d);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--tx-2);
  line-height: 1.15;
}
.story__date {
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-3);
  white-space: nowrap;
}
.story--lead .story__t {
  font-family: var(--f-d);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 620;
  letter-spacing: -0.024em;
  line-height: 1.16;
  text-wrap: balance;
}
.story--lead .story__d {
  font-size: 16px;
  line-height: 1.55;
  color: var(--tx-2);
  text-align: left !important;
}
.story__go {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--f-d);
  font-size: 14px;
  font-weight: 560;
  color: var(--tx);
}
.story__go .arr {
  color: var(--copper-ink, var(--copper));
  display: inline-block;
  transition: transform 0.24s var(--ease);
}
.story:hover .story__go .arr,
.story:hover .story__date .arr {
  transform: translateX(3px);
}

/* the rest of the coverage: one ruled list, newest first */
.news__rows {
  border-top: 1px solid var(--line);
}
.news__rows .story {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 36px);
  align-items: center;
  padding-block: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.24s var(--ease);
}
.news__rows .story > * {
  transition: transform 0.24s var(--ease);
}
.news__rows .story:last-child {
  border-bottom: 0;
}
.news__rows .story:hover {
  background: rgba(197, 106, 58, 0.06);
}
.news__rows .story:hover > * {
  transform: translateX(10px);
}
@media (prefers-reduced-motion: reduce) {
  .news__rows .story > * {
    transition: none;
  }
  .news__rows .story:hover > * {
    transform: none;
  }
}
.story__body {
  display: grid;
  gap: 6px;
}
.news__rows .story__t {
  font-family: var(--f-d);
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.news__rows .story__d {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--tx-2);
  max-width: 62ch;
}
.news__rows .story__date .arr {
  display: inline-block;
  color: var(--copper-ink, var(--copper));
  margin-left: 6px;
  transition: transform 0.24s var(--ease);
}
@media (max-width: 1000px) {
  .news__lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .news__lead .story--lead:first-child {
    grid-column: 1 / -1;
  }
  .news__lead .story--lead:first-child .story__fig {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 720px) {
  .news__lead {
    grid-template-columns: minmax(0, 1fr);
  }
  .news__lead .story--lead:first-child .story__fig {
    aspect-ratio: 4 / 3;
  }
  .news__rows .story {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .news__rows .story:hover {
    padding-left: 0;
  }
}

/* advisory portraits fill the same 4:5 frame as the placeholders */
#team .people--three .person > img {
  object-fit: cover;
  object-position: 50% 20%;
}

/* a profile's LinkedIn link sits under its description */
.person__in {
  justify-self: start;
  margin-top: 12px;
}

/* Home: a wide looping film of the process in each product section */
.wide-loop {
  position: relative;
  margin: clamp(36px, 4.5vw, 64px) 0 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--black);
}
.wide-loop--lead {
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.wide-loop img,
.wide-loop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wide-loop video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.wide-loop video.is-ready {
  opacity: 1;
}
@media (max-width: 720px) {
  .wide-loop {
    aspect-ratio: 16 / 9;
  }
}

/* About, the story: a short film under the heading so the left column is
   not left empty beside the long text */
.story-fig {
  position: relative;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--black);
}
.story-fig img,
.story-fig video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-fig video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.story-fig video.is-ready {
  opacity: 1;
}

/* tighter seams where two light sections meet */
.page-technology section[aria-labelledby="s-what"] {
  padding-bottom: clamp(32px, 4vw, 56px);
}
.page-technology #make {
  padding-top: clamp(40px, 5vw, 72px);
}
.page-insights section[aria-labelledby="s-belt"] {
  padding-bottom: clamp(16px, 2vw, 28px);
}
.page-insights section[aria-labelledby="s-press"] {
  padding-top: clamp(40px, 5vw, 64px);
}

/* Home: the four specifications, two by two with ruled lines between them,
   in white over the film of the web running through the press. The film
   runs edge to edge across the page, so the grid is not a boxed panel. */
.specs-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: #fff;
}
.specs-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.specs-band__media img,
.specs-band__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.specs-band__media video {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.specs-band__media video.is-ready {
  opacity: 1;
}
.specs-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 9, 10, 0.62), rgba(8, 9, 10, 0.8));
}
.specs-band__in {
  padding-block: clamp(40px, 5vw, 72px);
}
.specs-band__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.spec {
  padding: clamp(32px, 4vw, 64px) clamp(24px, 4vw, 64px);
}
.spec:nth-child(odd) {
  padding-left: 0;
}
.spec:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.spec:nth-child(even) {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.spec__k {
  font-family: var(--f-d);
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
  max-width: none;
  text-align: left !important;
}
.spec__t {
  margin: 16px 0 12px;
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.spec__t .ix {
  color: var(--copper-lit);
  margin-right: 8px;
}
.spec__d {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 52ch;
  text-align: left !important;
}
/* the photograph above leads straight into the film */
.wide-fig--lead:last-child {
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .specs-band__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .spec,
  .spec:nth-child(odd) {
    padding: 32px 0;
  }
  .spec:nth-child(even) {
    border-left: 0;
  }
  .spec:nth-child(n + 2) {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .specs-band__scrim {
    background: rgba(8, 9, 10, 0.72);
  }
}

/* Phone: rows read full width (number and title on one line, the
   description under both), and the tour figures sit two to a row */
@media (max-width: 720px) {
  .ledger:not(.ledger--words) .ledger__row,
  .ledger--stack .ledger__row {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 8px;
    align-items: baseline;
  }
  .ledger:not(.ledger--words) .ledger__ix {
    padding-top: 0;
  }
  .ledger:not(.ledger--words) .ledger__d,
  .ledger--stack .ledger__d {
    grid-column: 1 / -1;
    max-width: none;
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts > div {
    padding-right: 14px;
  }
}

/* on a phone the caption sits under the film, so on the light Charge
   Around Australia ground it takes the page's ink */
@media (max-width: 720px) {
  .caa .feature__over p {
    color: var(--tx-2);
  }
  .caa .feature__over .eyebrow {
    color: var(--tx-3) !important;
  }
  .caa .feature__over .eyebrow .ix {
    color: var(--copper-ink);
  }
}

/* Talk to us: a wider side column, the photograph at full column width, and
   the email address never broken across lines */
@media (min-width: 1101px) {
  .enq-sec .enq {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}
.enq-sec .enq__fig {
  max-width: none;
}
.enq__side p {
  text-align: left !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}
.enq__mail a {
  white-space: nowrap;
}
.enq__social {
  margin-top: 18px;
}

/* footer: Kardinia on LinkedIn, with the mark */
.ftr__in {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ftr__in-ico {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* Enquiry type: a styled menu where the browser lets the select be styled
   (the field stays a real select, so keyboard, validation and screen
   readers behave as before); elsewhere the system menu is used */
@supports (appearance: base-select) {
  #enquiryForm .eq__select select,
  #enquiryForm .eq__select select::picker(select) {
    appearance: base-select;
  }
  #enquiryForm .eq__select select {
    display: flex;
    align-items: center;
  }
  #enquiryForm .eq__select select::picker-icon {
    display: none;
  }
  #enquiryForm .eq__select select::picker(select) {
    margin-top: 8px;
    padding: 6px;
    min-width: min(100%, 320px);
    width: max-content;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 22px 48px -22px rgba(8, 9, 10, 0.38), 0 2px 6px rgba(8, 9, 10, 0.06);
  }
  #enquiryForm .eq__select option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px 10px 12px;
    border-radius: 6px;
    font: 400 16px/1.3 var(--f-b);
    color: var(--tx);
    cursor: pointer;
  }
  #enquiryForm .eq__select option[value=""] {
    display: none;
  }
  #enquiryForm .eq__select option:hover,
  #enquiryForm .eq__select option:focus-visible {
    background: var(--paper);
    outline: none;
  }
  #enquiryForm .eq__select option:checked {
    font-weight: 600;
  }
  #enquiryForm .eq__select option::checkmark {
    color: var(--copper-ink);
    order: 1;
    margin-left: auto;
  }
}

/* Home, a new canvas: the words on the left, the roof photograph running
   to the right edge of the page at the section's full height */
.canvas-sec {
  padding-block: 0;
}
.canvas-split {
  align-items: stretch;
}
.canvas-split__media {
  margin: 0;
  height: auto;
  min-height: clamp(460px, 46vw, 680px);
}
.canvas-split__media img {
  position: absolute;
  inset: 0;
}
.canvas-split__body {
  align-self: center;
  padding-block: clamp(64px, 8vw, 120px);
}
.canvas-split__body .t-lg {
  margin: var(--s3) 0;
  max-width: 14ch;
}
.canvas-split__p {
  margin-top: var(--s3);
  color: var(--tx-2);
}
.canvas-split__cap {
  margin-top: var(--s4);
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-3);
}
@media (max-width: 1100px) {
  .canvas-split__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .canvas-split__body {
    padding-block: clamp(40px, 6vw, 64px);
  }
}

/* large intro paragraphs stay ranged left: justified at this size they
   open wide gaps between words */
@media (min-width: 901px) {
  main p.lead,
  main .head__p p,
  main p.head__p {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* About, the story: the belief as the lead, a strip of film, then the
   three steps in columns, each under its year */
.story-strip {
  position: relative;
  margin: 0 0 clamp(40px, 5vw, 72px);
  aspect-ratio: 21 / 6;
  overflow: hidden;
  border-radius: 6px;
  background: var(--black);
}
.story-strip img,
.story-strip video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-strip video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.story-strip video.is-ready {
  opacity: 1;
}
.story__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--line);
}
.story__col {
  padding-top: clamp(22px, 2.6vw, 34px);
}
.story__yr {
  font-family: var(--f-d);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--copper-ink);
  margin-bottom: 16px;
  text-align: left !important;
}
.story__col p:not(.story__yr) {
  font-size: 17px;
  line-height: 1.6;
  color: var(--tx-2);
  text-align: left !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}
@media (max-width: 900px) {
  .story__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .story__col + .story__col {
    border-top: 1px solid var(--line);
    margin-top: 24px;
  }
  .story-strip {
    aspect-ratio: 16 / 9;
  }
}

/* About, the record: an even row of milestones on one line. Each card shows
   its photograph first, then the year on the line with a copper mark, the
   title, the account and, at the foot, the coverage note. Nothing is
   faded: every year reads at full strength. */
.rail--years .rail__hint {
  display: none;
}
.rail--years .rail__track {
  grid-auto-columns: minmax(min(330px, 80vw), 1fr);
  gap: 28px;
  background: none;
  padding-block: 4px 8px;
}
.rail--years .rail__panel,
.rail--years .rail__panel.is-current,
.act--sunk .rail--years .rail__panel,
.act--sunk .rail--years .rail__panel.is-current {
  opacity: 1;
  background: none;
  padding: 0;
  min-height: 0;
}
.rail--years .rail__panel::before {
  display: none;
}
.rail--years .rail__panel .rail__fig {
  order: -1;
  margin: 0;
  padding: 0;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--ink);
}
.rail--years .rail__fig img,
.rail--years .rail__fig video {
  inset: 0;
  height: 100%;
}
.rail--years .rail__yr,
.rail--years .rail__panel.is-current .rail__yr {
  position: relative;
  margin: 26px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  letter-spacing: -0.035em;
  color: var(--copper-ink);
  opacity: 1;
}
.rail--years .rail__yr::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px var(--paper-2);
}
/* the line carries on across the gap to the next year */
.rail--years .rail__yr::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 100%;
  width: 28px;
  border-top: 1px solid var(--line-2);
}
.rail--years .rail__t {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  margin-bottom: 10px;
}
.rail--years .rail__panel p:not(.rail__yr):not(.rail__out) {
  font-size: 16px;
  text-align: left !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}
.rail--years .rail__out {
  margin-top: auto;
  padding-top: 18px;
  border-top: 0;
  text-align: left !important;
}
.rail--years .rail__out::before {
  content: "";
  display: block;
  width: 28px;
  border-top: 1px solid var(--line-2);
  margin-bottom: 12px;
}

/* Printed Solar, a new approach: the three rows with a photograph held in
   view beside them while they are read */
.ledger-fig {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.ledger--stack .ledger__row {
  grid-template-columns: 52px minmax(0, 1fr);
  row-gap: 10px;
}
.ledger--stack .ledger__d {
  grid-column: 2;
  max-width: 60ch;
}
.ledger-fig__fig {
  position: sticky;
  top: calc(var(--hdr) + 28px);
  margin: 0;
}
.ledger-fig__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 60% 50%;
  border-radius: 6px;
}
.ledger-fig__fig figcaption {
  margin-top: 12px;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-3);
}
@media (max-width: 900px) {
  .ledger-fig {
    grid-template-columns: minmax(0, 1fr);
  }
  .ledger-fig__fig {
    position: static;
  }
  .ledger-fig__fig img {
    aspect-ratio: 16 / 10;
  }
}

/* About: the people and the story follow on without a double gap */
.page-about #team {
  padding-bottom: clamp(32px, 4vw, 56px);
}
.page-about section[aria-labelledby="s-story"] {
  padding-top: clamp(32px, 4vw, 56px);
}

/* Home, a new approach: the printing film held beside the three rows */
.ledger-fig__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--black);
}
.ledger-fig__media img,
.ledger-fig__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  aspect-ratio: auto;
}
.ledger-fig__media video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.ledger-fig__media video.is-ready {
  opacity: 1;
}
.ledger-fig__fig--film {
  max-width: 440px;
  justify-self: end;
  width: 100%;
}
@media (max-width: 900px) {
  .ledger-fig__fig--film {
    justify-self: start;
    max-width: 420px;
  }
  .ledger-fig__media img {
    aspect-ratio: auto;
  }
}

/* About, a vision pursued: Paul Dastoor on the roof, at the photograph's
   own proportions so he is not cropped */
.story-strip--photo {
  aspect-ratio: 1346 / 607;
}
.story-strip--photo img {
  object-position: 62% 40%;
}
@media (max-width: 720px) {
  .story-strip--photo {
    aspect-ratio: 4 / 3;
  }
}
/* the canopy photograph behind the specifications: a lighter shade so the
   curved panels still read behind the words */
.specs-band__scrim {
  background: linear-gradient(to bottom, rgba(8, 9, 10, 0.5), rgba(8, 9, 10, 0.68));
}
/* About, what we are building: the spool film is bright, so the words get a
   deeper shade on their side */
section[aria-labelledby="b-work"] .band__scrim {
  background: linear-gradient(to right, rgba(8, 9, 10, 0.78) 0%, rgba(8, 9, 10, 0.5) 50%, rgba(8, 9, 10, 0.2) 100%);
}

/* Home: the opening film, slowed and looped. Its poster is its own first
   frame so it shows at once; with motion paused or reduced the photograph
   underneath is shown instead */
.film .film__media video.film__intro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
html[data-motion="off"] .film .film__media video.film__intro {
  display: none;
}

/* Printed Solar, where it is made: three photographs from inside the pilot
   facility, side by side with no slider */
.pilot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 72px);
}
.pilot-grid figure {
  margin: 0;
}
.pilot-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
}
.pilot-grid figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tx-2);
}
.pilot-grid__credit {
  margin: 18px 0 0;
  font-family: var(--f-m);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tx-2);
}
@media (max-width: 720px) {
  .pilot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* About: the Advisory Board paragraph reads as plain prose, ranged left */
main p.team-group__intro {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  max-width: 62ch;
}