/*
 * Dwellers, version C "Beyond the certificate".
 * Night water over daylight footage. Builds on scrub-core.css (the shared engine styles).
 * Only transform, opacity and stroke-dashoffset animate.
 */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("../fonts/SourceCodePro-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --canvas: #15212C;
  --panel: #1B2B3A;
  --accent: #B5553A;
  --accent-hover: #A64B31;
  --accent-muted: rgba(181, 85, 58, .30);
  --text-secondary: #A9B6C2;
  --text-primary: #F1ECE4;
  --canvas-deep: #101A23;
  --panel-raised: #27384A;
  --on-accent: #FFFFFF;
  --focus: #E37A55;
  --data: #E6A87C;
  --text-meta: #97A4B1;
  --line: rgba(169, 182, 194, .16);
  --line-strong: #708396;
  --sig-red: #CF4E33;
  --sig-cyan: #48A095;
  --sig-green: #75C457;
  --sig-yellow: #E2B33C;
  --scrim-rgb: 13, 21, 30;
  --tshadow: 0 1px 2px rgba(10, 16, 23, .95), 0 3px 12px rgba(10, 16, 23, .78), 0 10px 44px rgba(10, 16, 23, .8);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --hero-h: 1000vh;
  --stage-bg: #15212C;
  --scrim-edge: .55;
  --ring: rgba(241, 236, 228, .9);
  /* the side gutter clears the notch on iPhones held sideways (viewport-fit=cover) */
  --gut: max(clamp(16px, 4.2vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gauge-w: 56px;
  --nav-h: 72px;
  --sec-pad: clamp(72px, 7vw, 112px);
  --radius: 20px;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wave-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M1 4.5C6 .5 9 .5 14 4.5S22 8.5 27 4.5 35 .5 39 4.5' fill='none' stroke='%23708396' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* html carries the footer's deep navy, so iOS overscroll bands match the footer; body paints the page itself */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--canvas-deep); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: clamp(17px, 1.1vw, 19px);
  line-height: 1.6;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  animation: page-in .9s var(--ease) both;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--text-primary); font-weight: 900; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p, li, dd { text-wrap: pretty; }
.nw { white-space: nowrap; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(181, 85, 58, .45); color: var(--text-primary); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
/* over footage the terracotta ring sits on a navy halo, so it keeps 3:1 against a bright sky */
.nav :focus-visible, .hero :focus-visible { box-shadow: 0 0 0 7px rgba(13, 21, 30, .88); }
main:focus { outline: none; }
.mono { font-family: var(--mono); }
.num-data { color: var(--data); font-variant-numeric: tabular-nums lining-nums; }

.skip-link {
  position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 999px;
  background: var(--text-primary); color: var(--canvas); font-weight: 600; font-size: 15px;
  transform: translateY(-160%); transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gut); }
@media (min-width: 1100px) and (min-height: 561px) {
  .wrap { padding-right: calc(var(--gut) + var(--gauge-w)); }
}

/* type */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-weight: 500; font-size: 12.5px; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-meta);
  margin-bottom: 22px;
}
.kicker::before { content: ""; flex: none; width: 40px; height: 8px; background: var(--wave-glyph) center / contain no-repeat; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1; letter-spacing: -.032em; max-width: 18ch; }
h3 { font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 52ch; color: var(--text-secondary); margin-top: 22px; }
.source { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--text-meta); letter-spacing: 0; }
.sec-head { margin-bottom: clamp(48px, 6vw, 80px); }

/* buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 24px; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: .005em;
  text-shadow: none; white-space: nowrap;
  transition: transform .45s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 34px rgba(181, 85, 58, .45), 0 0 0 6px var(--accent-muted);
  opacity: 0; transition: opacity .45s var(--ease);
}
.btn-ghost { color: var(--text-primary); border: 1px solid rgba(169, 182, 194, .5); background: rgba(var(--scrim-rgb), .35); }
/* hover lifts only where a pointer can hover, so a tapped button never stays lifted on iOS */
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
  .btn-primary:hover::after { opacity: 1; }
  .btn-ghost:hover { border-color: var(--text-primary); transform: translateY(-2px); }
}
.btn-small { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.btn-pill { min-height: 40px; padding: 9px 18px; font-size: 14.5px; }
.btn-wide { width: 100%; }
.text-link {
  color: var(--text-primary); font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size .4s var(--ease-out), color .3s var(--ease);
}
@media (hover: hover) { .text-link:hover { background-size: 0% 1px; background-position: 100% 100%; } }
.funnel { margin-top: clamp(40px, 5vw, 64px); font-size: 1.05rem; color: var(--text-secondary); text-wrap: pretty; }
@media (min-width: 721px) { .funnel .text-link { white-space: nowrap; } }

/* chips (navy scrim chips over footage and on the page) */
.chip {
  background: rgba(var(--scrim-rgb), .62);
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  text-shadow: 0 1px 3px rgba(10, 16, 23, .85);
}

/* ---------- the fixed environment layer: night water ---------- */
.env { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--canvas); }
.env-deep {
  position: absolute; inset: 0; opacity: var(--depth-o, 0);
  background: radial-gradient(ellipse 80% 60% at 20% 90%, rgba(95, 113, 131, .06), transparent 70%), var(--canvas-deep);
}
.env-glow { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; }
.env-glow-a { right: -30vmax; top: -40vmax; background: radial-gradient(circle, rgba(126, 144, 173, .10) 0%, rgba(126, 144, 173, 0) 62%); animation: drift-a 96s var(--ease) infinite alternate; animation-delay: -31s; }
.env-glow-b { left: -38vmax; bottom: -46vmax; background: radial-gradient(circle, rgba(95, 113, 131, .08) 0%, rgba(95, 113, 131, 0) 62%); animation: drift-b 96s var(--ease) infinite alternate; animation-delay: -64s; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-14vw, 18vh, 0); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(16vw, -14vh, 0); } }
.env-contours { position: absolute; left: 0; right: 0; top: 0; height: 200%; opacity: .05; animation: contours 140s linear infinite; animation-delay: -40s; will-change: transform; }
.env-contours svg { width: 100%; height: 50%; }
.env-contours svg + svg { display: none; }
@keyframes contours { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
.env-grain {
  position: absolute; inset: -50%; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.env-motes i {
  position: absolute; bottom: -10px; width: 2px; height: 2px; border-radius: 50%;
  background: var(--text-primary); opacity: 0;
  animation: mote var(--d, 36s) linear infinite; animation-delay: var(--dl, -10s);
}
.env-motes i:nth-child(1) { left: 6%; --d: 34s; --dl: -4s; }
.env-motes i:nth-child(2) { left: 14%; --d: 42s; --dl: -20s; }
.env-motes i:nth-child(3) { left: 23%; --d: 31s; --dl: -12s; }
.env-motes i:nth-child(4) { left: 31%; --d: 39s; --dl: -30s; }
.env-motes i:nth-child(5) { left: 42%; --d: 44s; --dl: -7s; }
.env-motes i:nth-child(6) { left: 51%; --d: 30s; --dl: -25s; }
.env-motes i:nth-child(7) { left: 60%; --d: 37s; --dl: -15s; }
.env-motes i:nth-child(8) { left: 68%; --d: 33s; --dl: -2s; }
.env-motes i:nth-child(9) { left: 76%; --d: 41s; --dl: -36s; }
.env-motes i:nth-child(10) { left: 84%; --d: 35s; --dl: -18s; }
.env-motes i:nth-child(11) { left: 91%; --d: 43s; --dl: -9s; }
.env-motes i:nth-child(12) { left: 97%; --d: 32s; --dl: -27s; }
@keyframes mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .22; }
  85% { opacity: .22; }
  100% { transform: translate3d(14px, -105vh, 0); opacity: 0; }
}
main, .footer { position: relative; z-index: 1; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h); padding-inline: var(--gut);
  display: flex; align-items: center; gap: 28px;
  /* deep enough under the links that the bone text holds 4.5:1 over the brightest sky of the film */
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), .88) 0%, rgba(var(--scrim-rgb), .74) 64%, rgba(var(--scrim-rgb), 0) 100%) no-repeat;
  box-shadow: 0 1px 0 rgba(169, 182, 194, 0);
  transition: box-shadow .5s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(21, 33, 44, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .5s var(--ease);
}
.nav.solid { box-shadow: 0 1px 0 var(--line); }
/* the gradient and the link shadow stay under the fill while it fades in, so the links never sit bare on the end frame */
.nav .nav-links a { text-shadow: 0 1px 2px rgba(10, 16, 23, .9), 0 2px 10px rgba(10, 16, 23, .7); }
.nav:not(.solid) .nav-links a { color: var(--text-primary); }
.nav.solid::before { opacity: 1; transition-duration: .15s; }
.nav-logo { display: block; flex: none; padding: 8px 0; }
.nav-logo img { height: 24px; width: auto; }
.nav-primary { margin-left: auto; }
.nav-links { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px;
  font-size: 15px; font-weight: 600; color: var(--text-secondary); transition: color .3s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--text-primary); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
@media (hover: hover) { .nav-links a:hover { color: var(--text-primary); } }
.nav-links a[aria-current="true"] { color: var(--text-primary); }
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-cta { flex: none; }
.nav-menu {
  display: none; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(169, 182, 194, .5); color: var(--text-primary); font-size: 14.5px; font-weight: 600;
}
/* over the static hero photograph the clear bar gives the Menu label its own navy backing */
.nav:not(.solid) .nav-menu { background: rgba(var(--scrim-rgb), .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 899px) {
  .nav { gap: 10px; }
  .nav-primary { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-menu { display: inline-flex; align-items: center; }
}
@media (max-width: 380px) { .nav-cta { padding-inline: 14px; font-size: 14px; } .nav-logo img { height: 20px; } }
/* 320px: logo, pill and Menu fit with the full gutter on both sides */
@media (max-width: 359px) { .nav { gap: 8px; } .nav-cta { padding-inline: 12px; font-size: 13px; } .nav-menu { padding-inline: 12px; } .nav-logo img { height: 18px; } }
/* without JavaScript the Menu button cannot open anything: the footer's Explore links carry the navigation */
html:not(.js) .nav-menu { display: none !important; }

/* mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(16, 26, 35, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.sheet.open { opacity: 1; }
.sheet-inner {
  /* a fixed-height scroller: every link stays reachable on short screens, and its scroll never chains to the page */
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  padding: max(14px, env(safe-area-inset-top, 0px)) var(--gut) max(32px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 36px; }
.sheet-logo { height: 22px; width: auto; }
.sheet-close { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(169, 182, 194, .5); color: var(--text-primary); font-weight: 600; font-size: 15px; }
.sheet-links { display: grid; gap: 6px; margin-bottom: 36px; }
.sheet-links a {
  display: block; padding: 8px 0; font-size: clamp(2rem, 9vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  color: var(--text-primary); opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}
.sheet.open .sheet-links a { opacity: 1; transform: none; }
.sheet.open .sheet-links li:nth-child(2) a { transition-delay: .05s; }
.sheet.open .sheet-links li:nth-child(3) a { transition-delay: .1s; }
.sheet.open .sheet-links li:nth-child(4) a { transition-delay: .15s; }
.sheet.open .sheet-links li:nth-child(5) a { transition-delay: .2s; }
.sheet.open .sheet-links li:nth-child(6) a { transition-delay: .25s; }
.sheet .btn { align-self: flex-start; }
.sheet-contact { margin-top: auto; padding-top: 32px; font-size: 13px; color: var(--text-meta); }
.sheet-contact a { color: var(--text-secondary); }
/* the scroll lock sits on the root: html, body { overflow-x: clip } in scrub-core.css keeps body overflow from reaching the
   viewport, so only html can lock it. overflow-x stays clipped (it computes to hidden here, never scrollable), and the
   gutter stays reserved so desktop scrollbars do not shift the page when the lock engages */
html.sheet-open { overflow-y: hidden; scrollbar-gutter: stable; }

/* ---------- the depth gauge ---------- */
.gauge {
  position: fixed; right: 0; top: 50%; z-index: 40;
  width: var(--gauge-w); height: min(62vh, 560px);
  transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease);
}
.gauge.on { opacity: 1; pointer-events: auto; }
.gauge-line { position: absolute; right: 22px; top: 0; bottom: 0; width: 1px; background: rgba(112, 131, 150, .55); }
.gauge-mark { position: absolute; right: 12px; top: -4px; width: 21px; height: 8px; color: rgba(241, 236, 228, .7); will-change: transform; }
.gauge-mark svg { width: 21px; height: 8px; }
.gauge-ticks { position: absolute; inset: 0; }
.gauge-ticks li { position: absolute; right: 0; top: var(--y, 0%); transform: translateY(-50%); }
.gauge-ticks button {
  position: relative; display: block; width: var(--gauge-w); height: 22px;
}
.gauge-ticks button::before {
  content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 1px;
  background: rgba(112, 131, 150, .9); transform-origin: right; transition: transform .4s var(--ease-out), background-color .3s;
}
.gauge-ticks button span {
  position: absolute; right: 44px; top: 50%; transform: translate(6px, -50%); white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease-out);
  padding: 2px 8px; border-radius: 6px; background: rgba(var(--scrim-rgb), .7);
}
.gauge-ticks button:hover::before, .gauge-ticks button:focus-visible::before { transform: scaleX(1.6); background: var(--text-primary); }
.gauge-ticks button:hover span, .gauge-ticks button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.gauge-ticks button[aria-current="true"]::before { transform: scaleX(2.2); background: var(--text-primary); }
.gauge-ticks button[aria-current="true"] span { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 1099px), (max-height: 560px) { .gauge { display: none; } }
/* touch tablets: the gauge reads depth only; its labels need hover and its ticks sit closer than a fingertip */
@media (pointer: coarse) { .gauge-ticks { pointer-events: none; } }

/* ---------- hero ---------- */
.hero .stage { z-index: 1; }
.hero .poster { background-color: #7E90AD; }
.hero .scrim { background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(var(--scrim-rgb), 0) 35%, rgba(var(--scrim-rgb), var(--scrim-edge)) 100%); z-index: 1; }
.deck-panel {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* the deck cover's own device: a held navy panel with a short, deliberate edge, not a haze */
  background: linear-gradient(90deg, rgba(var(--scrim-rgb), .80) 0%, rgba(var(--scrim-rgb), .79) 38%, rgba(var(--scrim-rgb), .70) 41%, rgba(var(--scrim-rgb), .48) 44.5%, rgba(var(--scrim-rgb), .28) 48%, rgba(var(--scrim-rgb), .12) 52%, rgba(var(--scrim-rgb), .03) 56%, rgba(var(--scrim-rgb), 0) 59%);
  opacity: var(--panel-o, 1);
}
.hero .band { color: var(--text-primary); }
.hero .band::before { inset: -34% -26%; background: radial-gradient(closest-side, rgba(var(--scrim-rgb), var(--band-a, .4)) 0%, rgba(var(--scrim-rgb), calc(var(--band-a, .4) * .66)) 55%, rgba(var(--scrim-rgb), 0) 100%); }
.band.b1 { opacity: 1; visibility: visible; }
.hero .band { left: 6%; }
.b-line {
  font-weight: 900; font-size: clamp(2.3rem, 5vw, 4.75rem); line-height: .98; letter-spacing: -.035em;
  color: var(--text-primary); font-variant-numeric: lining-nums;
}
.b1 { top: 34%; width: 32%; --band-a: .40; }
.b1 .b-line { max-width: 12ch; }
.b2 { top: 14%; width: 34%; --band-a: .45; }
.b2 .b-line { max-width: 12ch; }
.b3 { top: 16%; width: 34%; --band-a: .40; }
.b3 .b-line { max-width: 11ch; }
.b4 { top: 14%; left: 5% !important; width: 25%; --band-a: .30; }
.b5 { top: 12%; left: 5% !important; width: 39%; --band-a: .36; }

/* band 1: heat-haze resolve */
.hz { display: grid; }
.hz > span { grid-area: 1 / 1; }
.hz-soft { filter: blur(10px); opacity: calc((1 - var(--k, 1)) * .9); }
.hz-sharp { opacity: var(--k, 1); transform: translateY(calc((1 - var(--k, 1)) * 10px)); }

/* band 2: glare sweep (grid snap-align characters + a light bar) */
.fx-glare { position: relative; }
.fx-glare::after {
  content: ""; position: absolute; top: -8%; bottom: -8%; left: 0; width: 18%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 246, 232, 0), rgba(255, 246, 232, .22) 50%, rgba(255, 246, 232, 0));
  mix-blend-mode: soft-light;
  opacity: calc(min(var(--k, 1), 1 - var(--k, 1)) * 2);
  transform: translateX(calc(-100% + var(--k, 1) * 640%));
}
.hero-chip {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 22px; padding: 12px 16px; max-width: 38ch;
  font-size: 15px; line-height: 1.45; color: var(--text-primary); text-shadow: none;
}
.hero-chip .num-data { font-weight: 900; font-size: 1.15em; }
.hero-chip-src { font-family: var(--mono); font-size: 12px; color: var(--text-meta); }
.b2 .hero-chip { --kc: clamp(0, (var(--k, 1) - .7) * 4, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 10px)); }

/* band 3: frame, then skin */
.fs { display: grid; }
.fs > span { grid-area: 1 / 1; }
.fs .c { display: inline-block; }
.fs-out .c {
  color: transparent; -webkit-text-stroke: 1.5px var(--text-primary);
  --kc: clamp(0, (var(--k, 1) - var(--th, 0)) * 9, 1);
  opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 14px));
}
.fs-fill .c { --kf: clamp(0, (var(--k, 1) - .45 - var(--th2, 0)) * 7, 1); opacity: var(--kf); }
.fs-out, .fs-fill { position: relative; }
.fs-out { z-index: 0; }
.fs-fill { z-index: 1; }
.fs .w { display: inline-block; white-space: nowrap; }

/* band 4: hinge swing */
.b4-head {
  font-weight: 900; font-size: clamp(1.6rem, 2.5vw, 2.45rem); line-height: 1.04; letter-spacing: -.028em; color: var(--text-primary);
  --kh: clamp(0, var(--k, 1) * 4, 1); opacity: var(--kh); transform: translateY(calc((1 - var(--kh)) * 18px));
}
.lens { display: grid; gap: 10px; margin-top: 26px; perspective: 600px; }
.lens-chip {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 18px 13px 14px;
  font-size: clamp(15px, 1.15vw, 17.5px); font-weight: 600; line-height: 1.25; color: var(--text-primary);
}
.lens-chip::before { content: ""; flex: none; width: 4px; align-self: stretch; min-height: 22px; border-radius: 2px; background: var(--sig); }
.lens-hero .lens-chip {
  --kc: clamp(0, (var(--k, 1) - var(--t0, 0)) * 7, 1);
  --ks: clamp(0, (var(--k, 1) - var(--t0, 0) - .12) * 7, 1);
  transform-origin: 0 50%;
  transform: rotateY(calc(-72deg + 78deg * var(--kc) - 6deg * var(--ks)));
  opacity: clamp(0, var(--kc) * 2.2, 1);
  backface-visibility: hidden;
}

/* band 5: exposure settle */
.b5 .b5-title, .b5 .ex { font-size: clamp(2.75rem, 6.2vw, 6rem); line-height: .95; letter-spacing: -.035em; font-weight: 900; color: var(--text-primary); }
.ex { display: grid; }
.ex > span { grid-area: 1 / 1; }
.ex-glow { filter: blur(14px); color: var(--text-primary); opacity: calc(.55 * (1 - var(--k, 1))); }
.ex-sharp { --kh: clamp(0, var(--k, 1) / .6, 1); opacity: var(--kh); transform: scale(calc(.9 + .1 * var(--kh))); transform-origin: 0 60%; }
.b5 .sub { margin-top: 24px; max-width: 34ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--text-primary); font-weight: 400; }
.b5 .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.js .hero .b5:not(.cta-live) .cta-row { visibility: hidden; }

/* hero furniture */
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.hud-progress i { display: block; height: 100%; background: rgba(169, 182, 194, .4); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.hud-chapter {
  position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary);
}
.hud-pips { display: flex; gap: 5px; }
.hud-pips i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(241, 236, 228, .55); transition: background-color .4s var(--ease); }
.hud-pips i.on { background: var(--text-primary); border-color: var(--text-primary); }
.skip-film { position: absolute; right: 24px; bottom: 24px; z-index: 3; background: rgba(var(--scrim-rgb), .66); border-color: rgba(241, 236, 228, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ring { z-index: 3; bottom: 26px; }
.cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 3; display: none; flex-direction: column; align-items: center; gap: 4px;
  transform: translateX(-50%); color: var(--text-primary);
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.cue svg { width: 18px; height: 11px; }
.cue.on svg { animation: bob 4.4s var(--ease) infinite; animation-delay: -1s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.stage.video-failed .cue { display: flex; }
.stage.video-failed .poster { background-image: url("../img/hero-poster.jpg"); }
/* complete without the film: three stills carry the journey (glass box, finished facade, courtyard) */
.still { position: absolute; inset: 0; display: none; background-size: cover; background-position: center; opacity: 0; will-change: opacity; }
.stage.video-failed .still { display: block; }
.stage.video-failed .still-mid { background-image: url("../img/same-after.jpg"); }
.stage.video-failed .still-end { background-image: url("../img/hero-ending.webp"); }
@media (max-height: 560px) { .hud, .skip-film, .ring, .cue { display: none !important; } }

/* the designed static hero (the five gates) */
.static { position: relative; min-height: 100svh; width: 100%; align-items: flex-end; }
.static-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; }
.static-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--scrim-rgb), .92) 0%, rgba(var(--scrim-rgb), .78) 34%, rgba(var(--scrim-rgb), .3) 58%, rgba(var(--scrim-rgb), 0) 74%);
}
.static-copy { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin-inline: auto; padding: calc(var(--nav-h) + 48px) var(--gut) clamp(48px, 9vh, 96px); }
.static-copy > * { max-width: 560px; }
.static-h1 { font-size: clamp(2.75rem, 6.2vw, 6rem); line-height: .95; letter-spacing: -.035em; max-width: 10ch; text-shadow: var(--tshadow); font-weight: 900; color: var(--text-primary); text-wrap: balance; }
.static .lede { color: var(--text-primary); max-width: 40ch; text-shadow: 0 1px 2px rgba(10, 16, 23, .8); }
/* the kicker sits on the photograph in every static layout: primary colour, a dark halo, and a cap that breaks it after the dot so it stays inside the dark side of the panel */
.static .kicker { color: var(--text-primary); text-shadow: 0 1px 2px rgba(10, 16, 23, .95), 0 2px 12px rgba(10, 16, 23, .8); max-width: 27.5em; }
.static-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .hero .deck-panel, .hero .scrim, .hero .poster, .hero .still, .hero .skip-film, .hero .cue { display: none !important; }
  .static-img { background-image: url("../img/hero-ending.webp"); }
}
/* without JavaScript: the designed static hero, never a 1000vh empty stage */
html:not(.js) .hero { height: auto; }
html:not(.js) .hero .stage { position: relative; height: auto; min-height: 100svh; }
html:not(.js) .hero .band, html:not(.js) .hero .hud, html:not(.js) .hero .ring, html:not(.js) .hero video, html:not(.js) .hero .skip-film,
html:not(.js) .hero .cue, html:not(.js) .hero .deck-panel, html:not(.js) .hero .scrim, html:not(.js) .hero .poster, html:not(.js) .hero .still { display: none !important; }
html:not(.js) .hero .static { display: flex; }
html:not(.js) .static-img { background-image: url("../img/hero-ending.webp"); }
/* landscape phones and small desktop windows: the copy column is a larger share of the width, so hold the scrim deep across it */
@media (min-width: 721px) and (max-width: 1100px) {
  .static-img::after { background: linear-gradient(90deg, rgba(var(--scrim-rgb), .94) 0, rgba(var(--scrim-rgb), .86) 400px, rgba(var(--scrim-rgb), .66) 560px, rgba(var(--scrim-rgb), .22) 760px, rgba(var(--scrim-rgb), 0) 880px); }
}
@media (orientation: portrait) and (max-width: 1024px), (max-width: 720px) {
  .static-img { inset: 0 0 auto 0; height: 60svh; background-position: 50% 50%; }
  /* the kicker's first line sits 168px above the foot of the picture: the scrim holds deep to just above it, so the
     moving phone film (its brightest sky and concrete) stays under the copy at 4.5:1; the clear end never comes closer
     than 300px, so a short picture (320px phones) still fades instead of meeting a hard edge */
  .static-img::after { background: linear-gradient(0deg, var(--canvas) 0%, rgba(21, 33, 44, .9) 24%, rgba(21, 33, 44, .74) 186px, rgba(21, 33, 44, .36) 250px, rgba(21, 33, 44, 0) max(72%, 300px)); }
  .static-copy { padding-top: max(calc(var(--nav-h) + 24px), calc(60svh - 168px)); padding-bottom: 40px; }
  .static-h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}
/* phones: the call to action follows the lede inside the first screen; the Vestian chip follows it */
@media (max-width: 720px) {
  .static-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .static-cta { order: 1; }
  .static-chip { order: 2; margin-top: 24px; }
}

/* the impact panel: portrait phones only, in the picture above the copy; it takes the room the copy used to start
   below (60svh - 168px), so on tall phones the H1 does not move; on short ones it pushes the copy down a little */
.impact, .impact-alt { display: none; }
@media (max-width: 720px) and (orientation: portrait) {
  .static-copy { padding-top: calc(var(--nav-h) + 24px); }
  .static-copy > .impact { order: 1; max-width: 460px; } /* below the copy and CTA */
  .impact {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px; width: 100%;
    margin: 28px 0 0;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px;
    background: rgba(var(--scrim-rgb), .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .impact-gauge { position: relative; width: 108px; height: 108px; }
  .impact-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
  .impact-ring circle { fill: none; stroke-width: 5; }
  .impact-track { stroke: rgba(169, 182, 194, .22); }
  .impact-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 30 100; }
  .impact-centre { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .impact-num { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--text-primary); }
  .impact-num::after { content: ""; display: block; width: 32px; height: 7px; margin: 5px auto 4px; background: var(--wave-glyph) center / contain no-repeat; }
  .impact-cap { font-family: var(--mono); font-size: 8.5px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); max-width: 76px; }
  .impact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
  .impact-list li { display: flex; align-items: center; gap: 10px; }
  .impact-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--data); }
  .impact-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .impact-list p { font-family: var(--mono); font-size: 9.5px; line-height: 1.35; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); min-width: 0; }
  .impact-list b { display: block; font-weight: 600; color: var(--text-primary); font-size: 10.5px; }
  .impact-note { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; line-height: 1.45; color: var(--text-secondary); }
}
/* short phones (iPhone SE): keep the H1 in the first screen; the ring and its source stay, the list goes */
@media (max-width: 720px) and (orientation: portrait) and (max-height: 640px) {
  .impact { --impact-h: 100px; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 12px; }
  .impact-list, .impact-note-tr, .impact-cap { display: none; }
  .impact-gauge { grid-row: span 2; width: 76px; height: 76px; }
  .impact-centre { inset: 8px; }
  .impact-num { font-size: 21px; }
  .impact-num::after { width: 26px; height: 6px; margin: 4px auto 0; }
  .impact-alt { display: block; align-self: end; font-size: 14px; line-height: 1.35; color: var(--text-primary); }
  .impact-note { grid-column: 2; align-self: start; border-top: 0; padding-top: 0; }
}

/* portrait phones, mobile-first hero (client review, 16 Oct): the film is a clean 16:9 strip under the bar, then the
   kicker and a two-word headline, then the impact panel, and both calls to action side by side at the foot of the
   first screen. The lede and the Vestian chip stay for tablets and desktop. */
@media (max-width: 720px) and (orientation: portrait) {
  .hero .static { flex-direction: column; align-items: stretch; min-height: 100svh; }
  /* the clear bar floats over the top of the film (a soft top shade keeps the logo and Menu readable); it turns solid on scroll */
  /* the film takes whatever height the copy does not need: at least 16:9, at most 58% of the screen */
  .static-img { position: relative; inset: auto; flex: 1 1 auto; width: 100%; height: auto; min-height: 56.25vw; max-height: 58svh; background-position: 50% 50%; }
  .static-img::after { background: linear-gradient(180deg, rgba(var(--scrim-rgb), .72) 0, rgba(var(--scrim-rgb), 0) 46%), linear-gradient(0deg, var(--canvas) 0, rgba(var(--scrim-rgb), 0) 20%); }
  .static-copy { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; padding: 14px var(--gut) max(16px, env(safe-area-inset-bottom, 0px)); }
  .static-copy > * { max-width: none; }
  .static .kicker { order: 0; margin: 0; text-shadow: none; font-size: 11.5px; letter-spacing: .12em; gap: 10px; white-space: nowrap; }
  .kicker-more { display: none; }
  .static .kicker::before { width: 28px; }
  .static-h1 { order: 1; margin-top: 6px; font-size: clamp(2.3rem, 10.5vw, 3.1rem); line-height: .92; max-width: none; text-shadow: none; }
  .static .lede, .static-chip { display: none; }
  /* the panel takes the middle of any spare height, so tall phones never show one big gap above the buttons */
  .static-copy > .impact { order: 2; max-width: none; margin: 16px 0 0; padding: 10px 12px; gap: 10px 12px; background: rgba(var(--scrim-rgb), .84); }
  .static-copy > .impact .impact-gauge { width: 100px; height: 100px; }
  .static-copy > .impact .impact-centre { inset: 9px; }
  /* the range sits well inside the ring on any phone font: smaller digits, a reduced %, a short caption */
  .static-copy > .impact .impact-num { font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
  .static-copy > .impact .impact-pct { font-size: .64em; margin-left: 1px; vertical-align: .32em; }
  .static-copy > .impact .impact-cap { max-width: none; white-space: nowrap; }
  .static-copy > .impact .impact-num::after { width: 26px; height: 6px; margin: 3px auto 3px; }
  .static-copy > .impact .impact-list { gap: 6px; }
  .static-copy > .impact .impact-note { padding-top: 6px; }
  .static-cta { order: 3; margin-top: 0; padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 10px; }
  .static-cta .btn, .static-cta .static-cta-alt { min-height: 50px; padding: 10px 12px; font-size: 14.5px; white-space: normal; text-align: center; }
  .static-cta .static-cta-alt {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    font-weight: 600; line-height: 1.2; color: var(--text-primary); background: rgba(var(--scrim-rgb), .35);
    border: 1px solid rgba(169, 182, 194, .5); padding-bottom: 10px;
  }
  .cta-opt { display: none; }
}
@media (max-width: 720px) and (orientation: portrait) and (max-height: 640px) {
  .static-copy { padding-top: 12px; }
  .static .kicker { font-size: 10.5px; letter-spacing: .1em; }
  .static-h1 { font-size: clamp(2.1rem, 10vw, 2.7rem); }
  .static-copy > .impact .impact-gauge { width: 72px; height: 72px; }
  .static-copy > .impact .impact-num { font-size: 14px; }
  .static-cta { padding-top: 12px; }
}

/* ---------- section scaffolding ---------- */
.sec { position: relative; padding-block: var(--sec-pad); scroll-margin-top: 0; }
.rise .part { --i: 0; }
.group-tag {
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-meta);
  margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.group-tag::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- S1 market ---------- */
.market { overflow: hidden; }
.market-bg, .start-bg, .scan-bg {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
}
.market-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .22; }
.market-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 33, 44, .96) 0%, rgba(21, 33, 44, .78) 42%, rgba(21, 33, 44, .2) 100%); }
.market-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.market-copy { grid-column: 1 / span 5; }
.market-copy h2 { font-size: clamp(2rem, 3.3vw, 3.15rem); max-width: 19ch; }
.market-stat { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.stat-num { font-weight: 900; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.04em; }
.stat-label { margin-top: 10px; color: var(--text-primary); font-size: 1.1rem; max-width: 30ch; }
/* short display lines balance, so none ends on one stranded word */
.stat-label, .srow-new, .count-label, .svc-name, .closing { text-wrap: balance; }
.market-stat .source { margin-top: 10px; }
.plaques {
  grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px 10px;
  align-self: center;
}
.pq { position: relative; aspect-ratio: 14 / 9; border-radius: 4px; border: 1px solid rgba(112, 131, 150, .55); }
.pq::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(180deg, #F4F0E9, #DCD6CC);
  box-shadow: inset 0 -2px 0 rgba(21, 33, 44, .18), inset 0 1px 0 rgba(255, 255, 255, .75);
  opacity: 0; transform: scale(.7); transition: opacity .5s var(--ease), transform .6s var(--ease-out);
  transition-delay: var(--dl, 0ms);
}
.pq::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -3px 0 0 -2.5px; border-radius: 50%;
  border: 1px solid rgba(21, 33, 44, .42); opacity: 0; transition: opacity .5s var(--ease); transition-delay: var(--dl, 0ms);
}
.pq.lit::before { opacity: 1; transform: none; }
.pq.lit::after { opacity: 1; }
.pq .gl { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); opacity: 0; mix-blend-mode: soft-light; }
.plaques.on .pq.lit .gl { animation: glint 9s var(--ease) infinite; animation-delay: calc(var(--col) * 140ms + var(--row) * 70ms - 9s); }
@keyframes glint { 0%, 72%, 100% { opacity: 0; } 78% { opacity: 1; } 84% { opacity: 0; } }
.lens-recap { display: none; margin-top: 72px; }
html.static-hero .lens-recap { display: block; }
.lens-recap-head { color: var(--text-primary); font-weight: 600; font-size: 1.15rem; max-width: 40ch; }
.lens-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; max-width: 760px; }
.lens-flat .lens-chip { background: rgba(27, 43, 58, .7); }
.market-close { margin-top: clamp(56px, 7vw, 96px); }
.closing { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.closing .text-link { font-size: .7em; margin-left: 14px; white-space: nowrap; }

/* ---------- S2 the waterline ---------- */
.waterline { padding-bottom: clamp(56px, 7vw, 96px); }
.wl-head h2 { max-width: 16ch; }
.wl-label { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); }
.tip-items li { font-weight: 600; color: var(--text-primary); font-size: 1.05rem; line-height: 1.6; }
.wl-title { font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.wl-value { margin-top: 4px; font-weight: 900; white-space: nowrap; font-size: clamp(2.25rem, 3vw, 3.25rem); line-height: 1; letter-spacing: -.035em; }
.wl-value-text { color: var(--text-primary); font-weight: 600; font-size: clamp(1.4rem, 1.8vw, 1.75rem); letter-spacing: -.01em; line-height: 1.15; }
.wl-unit { font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--data); }
.wl-q { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--text-secondary); }
.wl-src {
  margin-top: 6px; display: inline-flex; align-items: center; min-height: 26px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--text-meta);
  text-decoration: underline; text-decoration-color: rgba(151, 164, 177, .5); text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.wl-src[aria-expanded="true"] { color: var(--text-primary); text-decoration-color: var(--text-primary); }
@media (hover: hover) { .wl-src:hover { color: var(--text-primary); text-decoration-color: var(--text-primary); } }
html:not(.js) .wl-src { display: none; }
.js .wl-pop { display: none; }
.wl-pop { margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--panel-raised); border: 1px solid rgba(169, 182, 194, .22); font-size: 15px; line-height: 1.5; color: var(--text-secondary); text-align: left; }
.wl-pop p + p { margin-top: 8px; }
.wl-pop-deck { color: var(--text-primary); font-weight: 600; }
.js .wl-item.pop-open .wl-pop { display: block; }
.wl-done-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 40px; padding-bottom: 12px; }
.js .wl-done { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); }
.js .waterline.is-done .wl-done { grid-template-rows: 1fr; }
.js .wl-done-in { min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease-out), visibility 0s linear .8s; }
.js .waterline.is-done .wl-done-in { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease) .15s, transform 1s var(--ease-out) .15s, visibility 0s; }
.wl-done-line { font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--text-primary); font-weight: 600; max-width: 44ch; line-height: 1.35; }

/* no-JS and phones: the plain list */
.wl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 24px; }
.wl-item { padding: 22px; border-radius: 16px; background: rgba(27, 43, 58, .62); border: 1px solid var(--line); }
.wl-panel { display: none; }
html:not(.js) .wl-panel { display: block; position: relative; height: 380px; margin-top: 24px; }
html:not(.js) .wl-panel > :not(.berg) { display: none; }
.wl-below-static { display: block; margin-top: 32px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); }
.wl-stage { padding-inline: var(--gut); }

/* the interactive stage */
.js .wl-panel { display: block; }
.js .wl-stage { position: relative; }
.wl-water, .wl-line, .wl-rider { will-change: transform; }
.berg { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 400 / 1000; transform: translateX(-50%); overflow: visible; }
.berg-rim { stroke: rgba(126, 144, 173, .55); stroke-width: 1.4; }
.berg-tip-rim { stroke: rgba(126, 144, 173, .3); stroke-width: 1.4; }
.facet { fill: none; stroke: rgba(241, 236, 228, .9); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--fo, 1); }
.wl-water {
  position: absolute; left: 0; right: 0; top: 0; height: 110%; z-index: 3; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 26, 35, .64) 0%, rgba(16, 26, 35, .74) 30%, rgba(16, 26, 35, .84) 100%);
  transform: translateY(var(--ly, 26cqh));
}
.bub { position: absolute; left: var(--x); top: 70%; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(169, 182, 194, .35); opacity: 0; animation: bubble var(--dur) linear infinite; animation-delay: var(--dl); }
@keyframes bubble { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .7; } 80% { opacity: .5; } 100% { transform: translate3d(8px, -64vh, 0); opacity: 0; } }
.wl-line { position: absolute; left: 0; right: 0; top: -12px; height: 24px; z-index: 4; overflow: hidden; pointer-events: none; transform: translateY(var(--ly, 26cqh)); }
.wl-wave { width: 200%; height: 24px; max-width: none; animation: wave-drift 9s linear infinite; animation-delay: -3s; }
@keyframes wave-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.wl-wave-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wl-wave-glow { fill: none; stroke: var(--accent-muted); stroke-width: 7; vector-effect: non-scaling-stroke; filter: blur(3px); opacity: .9; }
.wl-stage.just-done .wl-wave-glow { animation: glow-once 1.8s var(--ease) 1; }
@keyframes glow-once { 0% { opacity: .9; } 30% { opacity: 1; stroke-width: 14; } 100% { opacity: .9; } }
.wl-rider { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 6; transform: translateY(var(--ly, 26cqh)); }
.wl-handle {
  position: absolute; left: 50%; top: 0; width: 68px; height: 44px; margin: -22px 0 0 -34px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgba(21, 33, 44, .92); border: 1.5px solid var(--accent); color: var(--text-primary);
  box-shadow: 0 6px 24px rgba(10, 16, 23, .5), 0 0 0 5px var(--accent-muted);
  cursor: grab; touch-action: none; transition: transform .35s var(--ease-out);
}
.wl-handle svg { width: 30px; height: 10px; }
@media (hover: hover) { .wl-handle:hover { transform: scale(1.06); } }
.wl-stage.dragging .wl-handle { cursor: grabbing; transform: scale(1.08); }
.wl-stage.kbd .wl-handle { outline: 2px solid var(--focus); outline-offset: 4px; }
.wl-hint {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
  padding: 7px 12px; border-radius: 10px; white-space: nowrap;
  background: rgba(var(--scrim-rgb), .82); border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary);
  opacity: 0; transition: opacity .5s var(--ease);
}
.wl-hint .hint-keys { display: none; }
.wl-stage[data-state="idle"] .wl-hint, .wl-stage[data-state="demo"] .wl-hint { opacity: 1; }
.wl-stage.kbd .wl-hint { opacity: 1; }
.wl-stage.kbd .wl-hint .hint-drag { display: none; }
.wl-stage.kbd .wl-hint .hint-keys { display: inline; }
.wl-pips { position: absolute; left: calc(50% + 48px); top: 0; transform: translateY(-50%); display: flex; gap: 6px; }
.wl-pips i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(241, 236, 228, .6); background: rgba(var(--scrim-rgb), .6); transition: background-color .35s var(--ease), border-color .35s; }
.wl-pips i.on { background: var(--text-primary); border-color: var(--text-primary); }
.wl-below { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); width: max-content; max-width: 30cqh; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); text-shadow: 0 1px 3px rgba(10, 16, 23, .85); }
.wl-mobile-ctrl { display: none; }
.wl-range { pointer-events: none; }

@media (min-width: 721px) {
  .js .wl-stage {
    height: clamp(700px, 100svh, 980px); container-type: size; padding: 0; margin-top: 8px; overflow: hidden; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 93%, transparent 100%);
  }
  .js .wl-panel { position: absolute; inset: 0; }
  .js .wl-below-static { display: none; }
  .js .wl-tip { position: absolute; z-index: 2; left: calc(50% + 12cqh); top: 9cqh; }
  .js .tip-items { margin-top: 8px; }
  .js .tip-items li { display: flex; align-items: center; gap: 10px; line-height: 1.75; }
  .js .tip-items li::before { content: ""; width: 14px; height: 1px; background: var(--line-strong); }
  .js .wl-controls { position: absolute; z-index: 2; right: calc(50% + 12cqh); top: 11cqh; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 34vw; }
  .js .wl-items { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .js .wl-item {
    /* never wider than the room beside the berg, so neither column runs off the stage on portrait tablets */
    position: absolute; z-index: 2; bottom: calc(100% - (26% + 66% * var(--d))); width: min(31vw, 360px, calc(50cqw - 18cqh - 12px));
    padding: 0 0 10px; background: none; border: 0; border-radius: 0; pointer-events: auto;
    opacity: .14; will-change: transform, opacity;
  }
  .js .wl-item:nth-child(odd) { right: calc(50% + 18cqh); text-align: right; }
  .js .wl-item:nth-child(even) { left: calc(50% + 18cqh); }
  .js .wl-item .wl-pop { position: absolute; bottom: calc(100% + 8px); width: min(34vw, 380px); z-index: 8; box-shadow: 0 18px 50px rgba(10, 16, 23, .55); }
  .js .wl-item:nth-child(odd) .wl-pop { right: 0; }
  .js .wl-item:nth-child(even) .wl-pop { left: 0; }
  .js .wl-item.pop-open { z-index: 9; }
}
/* narrow wide-layout screens (portrait tablets, small landscape tablets): popovers open inward over the berg, never past the stage edge */
@media (min-width: 721px) and (max-width: 1100px), (min-width: 721px) and (orientation: portrait) {
  .js .wl-item:nth-child(odd) .wl-pop { right: auto; left: 0; }
  .js .wl-item:nth-child(even) .wl-pop { left: auto; right: 0; }
  /* the columns keep 16px clear of the berg's widest edge (and 12px from the stage edge) */
  .js .wl-item { width: min(31vw, 360px, calc(50cqw - 18cqh - 28px)); }
  .js .wl-item:nth-child(odd) { right: calc(50% + 18cqh + 16px); }
  .js .wl-item:nth-child(even) { left: calc(50% + 18cqh + 16px); }
}

/* phones: the sticky panel with cards below */
@media (max-width: 720px) {
  .js .wl-stage { padding: 0; }
  .js .wl-panel {
    position: sticky; top: var(--nav-h); z-index: 4; height: min(44svh, 320px); container-type: size; overflow: hidden;
    background: var(--canvas); border-bottom: 1px solid var(--line); touch-action: pan-y;
  }
  .js .wl-tip { position: absolute; right: var(--gut); top: 6cqh; text-align: right; z-index: 2; max-width: 34vw; }
  .js .wl-tip .wl-label { font-size: 11px; letter-spacing: .1em; }
  .js .tip-items li { font-size: 13px; line-height: 1.45; }
  .js .wl-controls, .js .wl-hint, .js .wl-pips, .js .wl-below { display: none; }
  .js .wl-handle { left: auto; right: var(--gut); margin: -22px 0 0 0; }
  .js .wl-mobile-ctrl { display: flex; flex-direction: column; gap: 8px; position: absolute; left: var(--gut); top: 6cqh; z-index: 7; }
  .js .wl-mobile-ctrl .btn { min-width: 112px; min-height: 44px; }
  .js .wl-below-static { padding-inline: var(--gut); }
  .js .wl-items { display: grid; grid-template-columns: 1fr; gap: 14px; padding-inline: var(--gut); margin-top: 16px; }
  /* cards dim only slightly before they are revealed, so a reader who scrolls past still gets 4.5:1; a lit edge marks each revealed card */
  .js .wl-item { opacity: .86; scroll-margin-top: calc(var(--nav-h) + min(44svh, 320px) + 12px); }
  .js .wl-item.shown { border-color: rgba(181, 85, 58, .6); }
}
/* the ghost Raise button sits on the line at rest: an opaque fill keeps the wave out of its label */
.js .wl-mobile-ctrl .btn-ghost { background: var(--canvas); }

/* ---------- S3 business case (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.tile {
  position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius);
  background: rgba(27, 43, 58, .74); border: 1px solid var(--line);
  transition: transform .5s var(--ease-out), border-color .4s var(--ease);
}
@media (hover: hover) { .tile:hover { transform: translateY(-3px); border-color: rgba(169, 182, 194, .3); } }
.tile-a { grid-column: span 7; }
.tile-b { grid-column: span 5; }
.tile-c { grid-column: span 4; }
.tile-d { grid-column: span 3; }
.tile-e { grid-column: span 5; }
.tile-num { font-weight: 900; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.04em; }
.num-pre { font-size: .4em; font-weight: 600; letter-spacing: 0; vertical-align: .95em; margin-right: .05em; }
/* the chart and its source settle at the foot of the tile, so spare height sits between the claim and the evidence */
.tile-a .chart, .tile-b .chart, .tile-c .chart { margin-top: auto; padding-top: 26px; }
.tile-b .tile-num { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
.tile-c .tile-num { font-size: clamp(2.6rem, 4.2vw, 4.2rem); }
.tile-text { margin-top: 14px; color: var(--text-primary); max-width: 36ch; font-size: 1.05rem; line-height: 1.45; }
.tile .source { margin-top: 18px; }
.tile-title { font-size: 1.15rem; font-weight: 600; line-height: 1.3; max-width: 30ch; }
.tile-line { margin-top: 16px; color: var(--text-primary); font-weight: 600; line-height: 1.4; }
.tile-d { display: flex; flex-direction: column; justify-content: space-between; }
.tile-d blockquote p { font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.35; color: var(--text-primary); font-weight: 600; letter-spacing: -.01em; }
.tile-d .num-data { font-weight: 900; }
.case-divider { height: 1px; background: var(--line); margin: 44px 0 28px; }
.chart { margin-top: 26px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--mono); font-size: 13px; fill: var(--text-meta); }
.chart .val { fill: var(--text-primary); font-family: var(--sans); font-weight: 600; font-size: 16px; }
.chart .cat { fill: var(--text-secondary); font-family: var(--sans); font-size: 15px; }
.chart .axis line { stroke: rgba(169, 182, 194, .14); stroke-width: 1; }
.chart .axis line.baseline { stroke: var(--line-strong); }
.chart .axis-unit { fill: var(--text-meta); }
.col, .bar, .ranges .range, .chart-mini .range { transform-box: fill-box; transition: transform 1.2s var(--ease-out) .25s; }
.col { transform-origin: 50% 100%; transform: scaleY(0); }
.bar, .ranges .range, .chart-mini .range { transform-origin: 0 50%; transform: scaleX(0); }
.chart-vac .bar-grey, .chart-rent .col-grey { transition-delay: .4s; }
.ranges .range:nth-child(2) { transition-delay: .4s; }
.ranges .range:nth-child(3) { transition-delay: .55s; }
.tile.in .col, .tile.in .bar, .tile.in .range { transform: none; }
.col-green, .bar-green { fill: var(--text-primary); }
.col-grey, .bar-grey { fill: var(--line-strong); }
.ranges .range, .chart-mini .range { fill: var(--text-primary); }
.chart-mini .track { stroke: rgba(169, 182, 194, .3); stroke-width: 2; stroke-linecap: round; }
.bracket line, .bracket path { fill: none; stroke: var(--data); stroke-width: 1.4; }
.bracket .bracket-ref { stroke-dasharray: 3 4; stroke: rgba(230, 168, 124, .7); }
.bracket .bracket-label { fill: var(--data); font-family: var(--sans); font-weight: 600; font-size: 16px; }
.bracket { opacity: 0; transition: opacity .8s var(--ease) 1.3s; }
.tile.in .bracket { opacity: 1; }
.tile.in.on .bracket { animation: breathe 7s var(--ease) infinite; animation-delay: -2.5s; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- S4 same frame ---------- */
.same-head { margin-bottom: clamp(36px, 4vw, 56px); }
.compare-wrap { padding-inline: var(--gut); }
.compare {
  position: relative; max-width: 1680px; margin-inline: auto; aspect-ratio: 1920 / 1070; border-radius: 24px; overflow: hidden;
  container-type: inline-size; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
  background: var(--panel); box-shadow: 0 40px 100px rgba(10, 16, 23, .5);
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-after { position: absolute; inset: 0; clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--text-primary); box-shadow: 0 0 18px rgba(10, 16, 23, .6); transform: translateX(calc(var(--pos, 50) * 1cqw)); will-change: transform; }
.cmp-grip {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 64px; margin: -32px 0 0 -23px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--scrim-rgb), .82); border: 1.5px solid var(--text-primary); color: var(--text-primary);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cmp-grip svg { width: 12px; height: 40px; overflow: visible; }
.cmp-grip.on svg { animation: ripple 5s var(--ease) infinite; animation-delay: -1.5s; }
@keyframes ripple { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.5); } }
.cmp-hud { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); width: min(360px, 60%); padding: 16px 18px; color: var(--text-primary); }
.hud-state { transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.hud-state p { font-size: 15px; line-height: 1.45; }
.hud-k { font-size: 12px !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); margin-bottom: 4px; }
.cmp-hud { display: grid; }
.hud-state { grid-area: 1 / 1; }
.hud-after { opacity: 0; transform: translateY(6px); }
.compare.is-after .hud-after { opacity: 1; transform: none; }
.compare.is-after .hud-before { opacity: 0; transform: translateY(-6px); }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; pointer-events: none; }
.compare:has(.cmp-range:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.same-cap { margin-top: 22px; max-width: 110ch; font-size: 12.5px; line-height: 1.6; color: var(--text-meta); }
.same .funnel { margin-top: 28px; }

/* ---------- S5 how we fit in (Gantt) ---------- */
.gantt { position: relative; container-type: inline-size; padding-bottom: 8px; }
.g-cols { position: absolute; inset: 0 0 56px 0; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.g-cols i { border-left: 1px solid var(--line); background: rgba(241, 236, 228, 0); transition: background-color .5s var(--ease); }
.g-cols i:last-child { border-right: 1px solid var(--line); }
.gantt[data-col="0"] .g-cols i:nth-child(1), .gantt[data-col="1"] .g-cols i:nth-child(2), .gantt[data-col="2"] .g-cols i:nth-child(3),
.gantt[data-col="3"] .g-cols i:nth-child(4), .gantt[data-col="4"] .g-cols i:nth-child(5), .gantt[data-col="5"] .g-cols i:nth-child(6) { background: rgba(241, 236, 228, .045); }
.g-head { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 18px; }
.g-phase { padding: 0 14px 16px; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; color: var(--text-meta); transition: color .4s var(--ease); }
.g-phase svg { width: 28px; height: 16px; fill: none; stroke: var(--line-strong); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.gantt[data-col="0"] .g-phase:nth-child(1), .gantt[data-col="1"] .g-phase:nth-child(2), .gantt[data-col="2"] .g-phase:nth-child(3),
.gantt[data-col="3"] .g-phase:nth-child(4), .gantt[data-col="4"] .g-phase:nth-child(5), .gantt[data-col="5"] .g-phase:nth-child(6) { color: var(--text-primary); }
.g-bars { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); row-gap: 10px; }
.g-bar:nth-child(1) { grid-row: 1; } .g-bar:nth-child(2) { grid-row: 2; } .g-bar:nth-child(3) { grid-row: 3; } .g-bar:nth-child(4) { grid-row: 4; }
.g-bar:nth-child(5) { grid-row: 5; } .g-bar:nth-child(6) { grid-row: 6; } .g-bar:nth-child(7) { grid-row: 7; }
.g-bar { grid-column: var(--s) / span var(--n); padding-inline: 6px; }
/* bars stay opaque so the grid never cuts through them; only their words dim off the playhead */
.g-bar .g-txt, .g-bar b { transition: opacity .5s var(--ease); }
.g-bar:not(.on) .g-txt, .g-bar:not(.on) b { opacity: .5; }
.gantt.pinned .g-bar .g-txt, .gantt.pinned .g-bar b { opacity: 1; }
.g-bar > a, .g-bar > span {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 16px; border-radius: 12px;
  font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text-primary);
  background: #22313F; border: 1px solid rgba(241, 236, 228, .3);
  transform-origin: 0 50%; transform: scaleX(.04); opacity: 0;
  transition: transform 1.1s var(--ease-out), opacity .6s var(--ease), background-color .3s var(--ease);
}
.g-bar:nth-child(2) > * { transition-delay: .08s; }
.g-bar:nth-child(3) > * { transition-delay: .16s; }
.g-bar:nth-child(4) > * { transition-delay: .24s; }
.g-bar:nth-child(5) > * { transition-delay: .32s; }
.g-bar:nth-child(6) > * { transition-delay: .40s; }
.g-bar:nth-child(7) > * { transition-delay: .48s; }
.gantt.in .g-bar > * { transform: none; opacity: 1; }
.gantt.done .g-bar > * { transition-delay: 0s; }
@media (hover: hover) { .g-bar > a:hover { background: #2C3C4B; } }
.g-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.g-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text-primary); }
.g-scope { font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--text-secondary); }
.g-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.g-cert .g-name { color: var(--text-secondary); }
.g-bar b { font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--text-meta); }
.g-cert > span { background: #192632; border: 0; color: var(--text-secondary); overflow: hidden; }
.g-cert > span::before, .g-cert > span::after {
  content: ""; position: absolute; left: -18px; right: -18px; height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 9px, transparent 9px 18px);
}
.g-cert > span::before { top: 0; }
.g-cert > span::after { bottom: 0; }
.gantt.on .g-cert > span::before, .gantt.on .g-cert > span::after { animation: crawl 12s linear infinite; animation-delay: -4s; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(18px); } }
.g-cert > span { box-shadow: inset 1.5px 0 0 var(--line-strong), inset -1.5px 0 0 var(--line-strong); }
.g-playhead { position: absolute; z-index: 1; top: 0; bottom: 56px; left: 0; width: 1.5px; margin-left: -.75px; background: var(--text-primary); opacity: .9; transform: translateX(calc(var(--ph, 0) * 100cqw)); will-change: transform; pointer-events: none; }
.g-playhead i { position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--text-primary); box-shadow: 0 0 0 4px rgba(241, 236, 228, .14); }
.g-legend { display: flex; gap: 28px; margin-top: 26px; padding-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--text-meta); }
.g-legend li { display: flex; align-items: center; gap: 10px; }
.g-legend li::before { content: ""; width: 26px; height: 12px; border-radius: 4px; }
.lg-dw::before { background: rgba(241, 236, 228, .1); border: 1px solid rgba(241, 236, 228, .4); }
.lg-cert::before { border: 1.5px dashed var(--line-strong); }
.g-chips { display: none; }

.strikes { margin-top: clamp(64px, 7vw, 96px); }
.strike-key { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-bottom: 26px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.sk-old { color: var(--text-meta); }
.sk-old span { position: relative; }
.sk-old span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--accent); }
.sk-new { color: var(--text-primary); }
.strike-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.srow { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.srow-label { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); }
.srow-old { position: relative; display: inline-block; margin-top: 8px; font-size: 1.05rem; color: var(--text-secondary); transition: opacity .6s var(--ease); }
.srow-old .strike { position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); overflow: hidden; }
.srow-old .strike::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 220, 200, .8), transparent); transform: translateX(-120%); }
.srow.struck .srow-old .strike::after { animation: sheen 6s var(--ease) infinite; animation-delay: -2s; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.srow-new { margin-top: 10px; font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); max-width: 22ch; opacity: .0; transform: translateX(24px); transition: opacity .7s var(--ease) .15s, transform .9s var(--ease-out) .15s; }
.srow.struck .srow-old { opacity: .5; }
.srow.struck .strike { transform: scaleX(1); }
.srow.struck .srow-new { opacity: 1; transform: none; }
.fit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(56px, 6vw, 80px); }
.fit-q { padding: 28px; border-radius: var(--radius); background: rgba(27, 43, 58, .6); border: 1px solid var(--line); }
.fit-q h3 { font-size: 1.3rem; line-height: 1.25; }
.fit-q p { margin-top: 8px; }

@media (max-width: 899px) {
  .g-cols, .g-head, .g-playhead { display: none; }
  .g-bars { grid-template-columns: 1fr; row-gap: 12px; }
  .g-bar { grid-column: 1 / -1 !important; padding: 0; }
  .g-bar:not(.on) .g-txt, .g-bar:not(.on) b { opacity: 1; }
  .g-bar > a, .g-bar > span { flex-wrap: wrap; transform: none; opacity: 1; }
  .g-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .g-chips span { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(112, 131, 150, .7); }
  .strike-rows { grid-template-columns: 1fr; }
  .fit-pair { grid-template-columns: 1fr; }
}

/* ---------- S6 services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.svc-rail { grid-column: 1 / span 4; }
.svc-rail-in { position: sticky; top: calc(var(--nav-h) + 32px); }
.svc-rail h2 { max-width: 12ch; }
.svc-rows { grid-column: 6 / span 7; padding-top: 6px; }
.pl { position: relative; isolation: isolate; margin-top: 40px; padding: 22px 22px 96px; border-radius: var(--radius); background: rgba(27, 43, 58, .74); border: 1px solid var(--line); --lh: 42px; }
.pl-title { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); margin-bottom: 12px; }
.pl-lines { margin: 0; }
.pl-lines li { display: flex; align-items: center; height: var(--lh); padding-inline: 14px; border-bottom: 1px dashed rgba(169, 182, 194, .16); }
.pl-name { font-size: 15.5px; font-weight: 600; color: var(--text-secondary); transition: color .4s var(--ease); }
.pl-lines li[data-dir]::after { content: ""; width: 9px; height: 11px; margin-left: 10px; opacity: .8; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M4.5 1v9M1 6.5l3.5 3.5L8 6.5' fill='none' stroke='%2397A4B1' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pl-lines li[data-dir="up"]::after { transform: rotate(180deg); }
.pl-lines li.is-active .pl-name { color: var(--text-primary); }
.pl-out { position: absolute; left: 22px; right: 22px; bottom: 22px; font-size: 1.05rem; line-height: 1.35; font-weight: 600; color: var(--text-primary); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.pl-lines li.is-active .pl-out { opacity: 1; transform: none; }
.pl-bar { position: absolute; z-index: -1; left: 22px; right: 22px; top: calc(22px + 12.5px * 1.4 + 12px); height: var(--lh); border-radius: 10px; background: rgba(241, 236, 228, .08); border: 1px solid rgba(241, 236, 228, .22); transform: translateY(calc(var(--row, 0) * var(--lh))); transition: transform .7s var(--ease-out); }
.pl-marker { position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--text-primary); }
.pl-marker::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(241, 236, 228, .6); opacity: 0; }
.pl-marker.on::after { animation: marker 6s var(--ease) infinite; animation-delay: -2s; }
@keyframes marker { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.svc { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.svc:last-of-type { border-bottom: 1px solid var(--line); }
.svc-btn { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; width: 100%; padding: 26px 0; text-align: left; }
.svc-name { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); transition: color .3s; }
.svc-tag { grid-column: 1; font-size: 1.02rem; color: var(--text-secondary); }
.svc-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(169, 182, 194, .45); transition: transform .5s var(--ease-out), border-color .3s; }
.svc-icon::before, .svc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--text-primary); transition: transform .5s var(--ease-out); }
.svc-icon::after { transform: rotate(90deg); }
.svc-btn[aria-expanded="true"] .svc-icon::after { transform: rotate(0deg); }
@media (hover: hover) { .svc-btn:hover .svc-icon { border-color: var(--text-primary); } }
.svc.is-active .svc-name { color: var(--text-primary); }
.svc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.svc.is-open .svc-panel { grid-template-rows: 1fr; }
.svc-in { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .45s var(--ease); }
.svc.is-open .svc-in { opacity: 1; transition-delay: .12s; }
.svc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; padding-bottom: 8px; }
.svc-f dt { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); margin-bottom: 8px; }
.svc-f li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.5; margin-bottom: 6px; color: var(--text-secondary); }
.svc-f li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--line-strong); }
.svc-when { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.svc-when dt { margin: 0; }
.svc-when dd { color: var(--text-primary); font-weight: 600; }
.svc-proof { margin: 10px 0 28px; padding: 14px 16px; border-radius: 12px; background: rgba(241, 236, 228, .05); font-size: .98rem; color: var(--text-secondary); }
.svc-in > .svc-fields:last-child { padding-bottom: 28px; }
.svc-rows .funnel { margin-top: 36px; }
@media (max-width: 960px) {
  .svc-rail, .svc-rows { grid-column: 1 / -1; }
  .svc-rail-in { position: static; }
  .pl { display: none; }
  .svc-rows { margin-top: 32px; }
}

/* ---------- S7 proof ---------- */
.proof-label { margin-top: 18px; font-size: 13px; color: var(--text-secondary); max-width: 70ch; }
.proof-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard h3 { margin-top: 20px; font-size: 1.3rem; line-height: 1.2; }
.pcard p:last-child { margin-top: 10px; font-size: 1rem; line-height: 1.5; }
.pcard-img { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--panel); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-img.on img { animation: drift-img 14s var(--ease) infinite alternate; animation-delay: -4s; }
@keyframes drift-img { from { transform: scale(1); } to { transform: scale(1.03); } }
.pcard-img img.img-swiss { transform: scale(1.1); transform-origin: 50% 100%; }
.pcard-img.on img.img-swiss { animation-name: drift-img-swiss; }
@keyframes drift-img-swiss { from { transform: scale(1.1); } to { transform: scale(1.133); } }
.rating-chip { display: inline-block; margin-top: 10px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(112, 131, 150, .8); font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.ledger { margin-top: clamp(64px, 7vw, 96px); }
.ledger-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.ledger-h { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.filters { display: flex; gap: 8px; }
.fchip { min-height: 40px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(112, 131, 150, .9); font-size: 14.5px; font-weight: 600; color: var(--text-secondary); transition: background-color .3s var(--ease), color .3s, border-color .3s; }
@media (hover: hover) { .fchip:hover { color: var(--text-primary); border-color: var(--text-primary); } }
.fchip[aria-pressed="true"] { background: var(--text-primary); color: var(--canvas); border-color: var(--text-primary); }
.ledger-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.lcol-h { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.lrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; padding: 15px 0; border-bottom: 1px solid var(--line); transition: opacity .17s var(--ease), transform .45s var(--ease-out); }
.lrow.out { opacity: 0; }
.lrow.pre { opacity: 0; transform: translateY(8px); }
.lr-name { font-weight: 600; color: var(--text-primary); }
.lr-rate { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--text-secondary); text-align: right; }
.status-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line-strong); font-style: normal; font-size: 12px; color: var(--text-meta); }
.lnote { display: none; padding: 18px 0; color: var(--text-primary); font-weight: 600; }
.ledger[data-filter="gold"] .lnote { display: block; }

/* ---------- S8 reach ---------- */
.reach-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.reach-big { grid-column: 1 / span 6; display: flex; align-items: flex-end; gap: 24px; }
.big8 { font-weight: 900; font-size: clamp(9rem, 17vw, 16rem); line-height: .78; letter-spacing: -.06em; color: var(--text-primary); font-variant-numeric: lining-nums; }
.big8-line { font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--text-primary); font-weight: 600; line-height: 1.3; max-width: 22ch; }
.countries { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); letter-spacing: .02em; }
.counts { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.count { padding: 26px 24px; background: rgba(27, 43, 58, .92); }
.count-num { font-weight: 900; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: .95; letter-spacing: -.04em; color: var(--text-primary); font-variant-numeric: tabular-nums lining-nums; }
.count-label { margin-top: 8px; font-size: .98rem; line-height: 1.35; color: var(--text-secondary); }
.reach-note { margin-top: 22px; font-size: 14px; line-height: 1.5; color: var(--text-meta); }
.arc { position: relative; margin-top: clamp(56px, 6vw, 88px); }
.arc svg { width: 100%; height: auto; overflow: visible; }
.arc-path { fill: none; stroke: rgba(169, 182, 194, .55); stroke-width: 1.3; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.2s var(--ease-out); vector-effect: non-scaling-stroke; }
.arc.drawn .arc-path { stroke-dashoffset: 0; }
.arc-pulse, .arc-pulse-glow { fill: none; stroke-linecap: round; stroke-dasharray: 46 1100; stroke-dashoffset: 46; opacity: 0; }
.arc-pulse { stroke: var(--text-primary); stroke-width: 2.4; }
.arc-pulse-glow { stroke: rgba(241, 236, 228, .35); stroke-width: 8; filter: blur(4px); }
.arc.pulse.on .arc-pulse, .arc.pulse.on .arc-pulse-glow { animation: pulse-travel 8.4s linear infinite; animation-delay: -.4s; }
@keyframes pulse-travel { 0% { stroke-dashoffset: 46; opacity: 0; } 4% { opacity: 1; } 66% { opacity: 1; } 70% { stroke-dashoffset: -1000; opacity: 0; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
.arc-dot { fill: var(--text-primary); }
.arc-ping { fill: none; stroke: var(--text-primary); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.arc.pulse.on .arc-ping { animation: ping 8.4s linear infinite; animation-delay: -.4s; }
@keyframes ping { 0%, 67% { opacity: 0; transform: scale(.6); } 70% { opacity: .9; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(4.2); } }
.arc-label { position: absolute; top: calc(168 / 200 * 100% + 14px); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); transform: translateX(-50%); white-space: nowrap; }
.arc-label-in { left: calc(1090 / 1200 * 100%); }
.arc-label-sa { left: calc(110 / 1200 * 100%); }
.rail-wrap { margin-top: clamp(80px, 8vw, 112px); }
.rail-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 28px; }
.rail-id { display: flex; align-items: center; gap: 20px; }
.gbsc { width: auto; height: 56px; opacity: .8; }
.rail-id h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.rail-id p { margin-top: 6px; }
.rail-quote blockquote p { font-size: 1.05rem; color: var(--text-primary); line-height: 1.45; }
.rail-quote .source { margin-top: 8px; }
.rail { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior-x: contain; }
.rail:focus-visible { outline-offset: 6px; }
.rcard { scroll-snap-align: start; padding: 24px; border-radius: 18px; background: rgba(27, 43, 58, .78); border: 1px solid var(--line); min-height: 196px; display: flex; flex-direction: column; transition: transform .5s var(--ease-out), border-color .3s; }
@media (hover: hover) { .rcard:hover { transform: translateY(-3px); border-color: rgba(169, 182, 194, .32); } }
.rise .rcard.part { transition: opacity .9s var(--ease) calc(var(--i, 0) * 90ms), transform .5s var(--ease-out) calc(var(--i, 0) * 90ms), border-color .3s var(--ease); }
@media (hover: hover) { .rise.in .rcard.part:hover { transform: translateY(-3px); } }
/* wide screens: all five Saudi cards in view, no hidden fifth card under a fade */
@media (min-width: 1200px) {
  .rail { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 0; }
}
.rc-status { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.rc-status i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--text-primary); background: transparent; }
.rcard-done .rc-status i { background: var(--text-primary); }
.rcard h4 { margin-top: 18px; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.rc-rate { margin-top: auto; padding-top: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.logos-wrap { margin-top: clamp(80px, 8vw, 120px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.logos-wrap h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; max-width: 26ch; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 40px; margin-top: 40px; }
/* the nine logos always fill even rows: one row from 1100px (the gap is only a minimum under space-between), 5 + 4 on
   tablets, 3 x 3 on phones; a logo wider than its cell scales down whole */
@media (min-width: 1100px) { .logos { justify-content: space-between; column-gap: 24px; } }
@media (min-width: 721px) and (max-width: 1099px) {
  .logos { justify-content: center; column-gap: 24px; }
  .logos li { flex: 0 0 calc((100% - 100px) / 5); }
}
@media (max-width: 720px) {
  .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
}
/* the clients' original coloured logos, each on its own light tile so every colour reads on the dark page */
.logos li { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 96px; padding: 16px 14px; border-radius: 12px; background: #F7F6F2; }
.logos img { height: var(--h, 36px); width: auto; max-width: 100%; object-fit: contain; }
@media (min-width: 1100px) { .logos { column-gap: 12px; } .logos li { flex: 1 1 0; } }
@media (min-width: 721px) and (max-width: 1099px) { .logos { gap: 12px; } .logos li { flex: 0 0 calc((100% - 48px) / 5); } }
@media (max-width: 720px) { .logos { gap: 10px; } .logos li { min-height: 84px; padding: 12px 10px; } .logos img { max-height: 46px; } }
.logos-note { margin-top: 32px; font-size: 12.5px; color: var(--text-meta); }
.network { margin-top: 12px; max-width: 80ch; font-size: .98rem; }

/* ---------- S9 ways to start ---------- */
.start { overflow: clip; }
.start-bg video { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.start-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 33, 44, .94) 0%, rgba(21, 33, 44, .7) 50%, rgba(21, 33, 44, .55) 100%); }
.offers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.offer { position: relative; padding: clamp(24px, 2.4vw, 34px); border-radius: var(--radius); background: rgba(27, 43, 58, .82); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.offer-lead { grid-column: 1 / span 7; padding: clamp(28px, 3.4vw, 48px); background: rgba(39, 56, 74, .86); border-color: rgba(169, 182, 194, .26); }
@media (min-width: 961px) { .offer-lead { position: sticky; top: calc(var(--nav-h) + 32px); } }
.offer-stack { grid-column: 8 / span 5; display: grid; gap: 24px; }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.offer-icon { width: 56px; height: 56px; fill: none; stroke: var(--text-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.offer-lead .offer-icon { width: 72px; height: 72px; }
.offer-stack .offer-icon { width: 44px; height: 44px; }
.pill { position: relative; white-space: nowrap; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--text-primary); color: var(--text-primary); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pill::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 6px rgba(241, 236, 228, .12), 0 0 26px rgba(241, 236, 228, .35); opacity: 0; }
.offer-lead.in .pill::after { animation: pill-glow 2.4s var(--ease) 1 .9s; }
@keyframes pill-glow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.offer h3 { margin-top: 22px; font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.offer-lead h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.offer-desc { margin-top: 12px; color: var(--text-primary); max-width: 46ch; line-height: 1.5; }
.offer-dl { margin: 20px 0 24px; display: grid; gap: 14px; }
.offer-dl dt { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); }
.offer-dl dd { margin-top: 4px; line-height: 1.5; }

/* ---------- S10 team ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.trio::before { content: ""; position: absolute; left: 0; right: 0; top: 260px; height: 1px; background: var(--line-strong); z-index: 2; }
.portrait-stage { position: relative; height: 260px; overflow: hidden; padding-top: 8px; }
.portrait {
  position: absolute; left: 0; bottom: -40px; width: 224px; height: 224px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #4E6278 0%, #34475B 40%, #1F3143 78%);
  transform: translateY(70%); opacity: 0; transition: transform 1.2s var(--ease-out), opacity .8s var(--ease);
}
.person-mid .portrait { bottom: -16px; }
.portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(169, 182, 194, .35), inset 0 20px 40px -10px rgba(186, 204, 224, .35); opacity: .6; }
.portrait.on::after { animation: rim 7s var(--ease) infinite; animation-delay: var(--dl, -1s); }
@keyframes rim { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.portrait img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translateY(var(--py, 0%)) scale(var(--ps, 1)); transform-origin: 50% 40%;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 56%, rgba(0, 0, 0, 0) 74%); mask-image: radial-gradient(circle at 50% 42%, #000 56%, rgba(0, 0, 0, 0) 74%);
}
.person.in .portrait { transform: none; opacity: 1; }
.person-copy { padding-top: 26px; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease) .12s, transform .9s var(--ease-out) .12s; }
.person.in .person-copy { opacity: 1; transform: none; }
.pname { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
.prole { margin-top: 8px; font-weight: 600; color: var(--text-primary); font-size: 15.5px; line-height: 1.4; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pchips li { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(112, 131, 150, .8); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.pline { margin-top: 14px; font-size: 1rem; line-height: 1.5; }
.pbio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.pbio-in { overflow: hidden; min-height: 0; }
.pbio p { padding-top: 10px; font-size: 1rem; line-height: 1.55; opacity: 0; transition: opacity .4s var(--ease); }
.person.bio-open .pbio { grid-template-rows: 1fr; }
.person.bio-open .pbio p { opacity: 1; }
.pmore { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(241, 236, 228, .5); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.team-funnel { margin-top: clamp(48px, 5vw, 72px); }

/* ---------- S11 FAQ ---------- */
.faq-col { width: 100%; max-width: calc(820px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.faq-head { margin-bottom: 40px; }
.faq-head p:last-child { margin-top: 18px; }
.ask-arrow { display: inline-block; margin-left: 4px; }
.ask-link.on .ask-arrow { animation: nudge 5s var(--ease) infinite; animation-delay: -1s; }
@keyframes nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } 90% { transform: translateX(0); } }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa-btn { position: relative; display: block; width: 100%; padding: 24px 56px 24px 0; text-align: left; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.qa-icon { position: absolute; right: 0; top: 22px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(169, 182, 194, .45); transition: border-color .3s; }
.qa-icon::before, .qa-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--text-primary); transition: transform .5s var(--ease-out); }
.qa-icon::after { transform: rotate(90deg); }
.qa-btn[aria-expanded="true"] .qa-icon::after { transform: rotate(0); }
@media (hover: hover) { .qa-btn:hover .qa-icon { border-color: var(--text-primary); } }
.qa-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.qa.is-open .qa-panel { grid-template-rows: 1fr; }
.qa-in { overflow: hidden; min-height: 0; }
.qa-in > p { max-width: 68ch; opacity: 0; transition: opacity .4s var(--ease); }
.qa.is-open .qa-in > p { opacity: 1; transition-delay: .1s; }
.qa-in > p:first-child { padding-bottom: 4px; }
.qa-src { margin: 12px 0 28px; font-size: 12px; line-height: 1.6; color: var(--text-meta); }
.qa-in > p:only-child { padding-bottom: 28px; }

/* ---------- S12 the Value Scan ---------- */
.scan { overflow: clip; padding-bottom: clamp(96px, 10vw, 140px); }
.scan-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .5; }
.scan-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 26, 35, .97) 0%, rgba(16, 26, 35, .9) 40%, rgba(16, 26, 35, .62) 100%); }
.scan-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.scan-left { grid-column: 1 / span 5; }
@media (min-width: 961px) { .scan-left { position: sticky; top: var(--sticky-top, calc(var(--nav-h) + 32px)); } }
.scan-left h2, .scan-left h1 { max-width: 14ch; }
.scan-panel { margin-top: 32px; padding: 22px 24px; border-radius: 16px; background: rgba(27, 43, 58, .7); border: 1px solid var(--line); }
.scan-panel-t { font-weight: 600; color: var(--text-primary); font-size: 1.1rem; }
.scan-panel li { position: relative; margin-top: 10px; padding-left: 20px; font-size: 1rem; line-height: 1.5; }
.scan-panel li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--line-strong); }
.scan-contact { margin-top: 30px; display: grid; gap: 6px; }
.clock { display: none; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--text-secondary); }
.js .clock { display: flex; }
.clock-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary); }
.clock-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(241, 236, 228, .6); opacity: 0; }
.clock.on .clock-dot::after { animation: tick 4s var(--ease) infinite; animation-delay: var(--dl, -1s); }
@keyframes tick { 0%, 100% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1); } }
.scan-phone { margin-top: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 900; letter-spacing: -.01em; color: var(--text-primary); }
@media (hover: hover) { .scan-phone a:hover { color: #fff; } }
.scan-card {
  grid-column: 7 / span 6; position: relative; padding: clamp(26px, 3vw, 44px); border-radius: 28px;
  background: rgba(27, 43, 58, .78); border: 1px solid rgba(169, 182, 194, .2);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 100px rgba(10, 16, 23, .45);
}
.scan-draw { position: absolute; right: clamp(20px, 2.6vw, 36px); top: clamp(20px, 2.6vw, 34px); width: 150px; text-align: center; }
.scan-draw svg { width: 84px; height: 105px; margin-inline: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sd-ground { stroke: var(--line-strong); stroke-width: 1.2; }
.sd-ghost path { stroke: var(--text-primary); stroke-width: 1.4; stroke-opacity: .18; }
.sd-floor { stroke: var(--text-primary); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out); }
.sd-floor.on { stroke-dashoffset: 0; }
.sd-water { stroke: var(--accent); stroke-width: 1.2; opacity: .8; }
.sd-cap { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--text-meta); }
.form-title { font-size: clamp(1.45rem, 2vw, 1.85rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; padding-right: 150px; }
.interest-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 4px 6px 4px 14px; border-radius: 999px; border: 1px solid rgba(112, 131, 150, .9); background: rgba(16, 26, 35, .5); font-size: 14px; }
.interest-k { color: var(--text-meta); font-weight: 600; }
.interest-chip select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--text-primary); font-size: 16px; font-weight: 600; padding: 6px 26px 6px 2px; min-height: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F1ECE4' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px; }
.interest-chip select option { background: var(--panel); color: var(--text-primary); }
.interest-chip:focus-within { border-color: var(--focus); }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 30px; }
.field-wide { grid-column: 1 / -1; }
.field label, .chips-field legend { display: block; margin-bottom: 7px; padding: 0; font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 15px; border-radius: 12px;
  background: rgba(16, 26, 35, .62); border: 1px solid rgba(112, 131, 150, .9); color: var(--text-primary);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #8796A4; opacity: 1; }
/* a focused field (Edit details, a failed submit) lands below the fixed bar with its label in view */
.scan-form :is(input, select, textarea) { scroll-margin-top: calc(var(--nav-h) + 48px); }
.field input:focus, .field textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(227, 122, 85, .22); outline: none; }
.field.invalid input { border-color: #E58A6B; }
.f-err { min-height: 0; margin-top: 6px; font-size: 13.5px; color: #F0A488; }
.f-err:empty { display: none; }
.chips-field { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchip { position: relative; display: inline-flex; }
.cchip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cchip span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(112, 131, 150, .9); font-size: 14.5px; font-weight: 600; color: var(--text-secondary); transition: background-color .25s var(--ease), color .25s, border-color .25s; pointer-events: none; }
@media (hover: hover) { .cchip:hover span { border-color: var(--text-primary); color: var(--text-primary); } }
.cchip input:checked + span { background: var(--text-primary); color: var(--canvas); border-color: var(--text-primary); }
.cchip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.f-help { margin-top: 8px; font-size: 13.5px; color: var(--text-meta); }
.msg-field { margin-top: 24px; }
.f-submit { margin-top: 28px; }
.f-note { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-meta); text-align: center; }
.scan-form.portfolio .stage-field { display: none; }
.form-done { padding-top: 4px; }
.form-done:focus { outline: none; }
.done-h { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; padding-right: 150px; }
.form-done > p { margin-top: 14px; color: var(--text-primary); max-width: 52ch; }
.form-done > p:first-of-type { padding-right: 150px; }
.scan-card.is-sent .sd-cap { visibility: hidden; }
.form-done .done-fallback { color: var(--text-secondary); }
.done-text { width: 100%; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(16, 26, 35, .62); border: 1px solid var(--line); color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; resize: vertical; }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.done-copied { min-height: 1.4em; margin-top: 10px; font-size: 12.5px; color: var(--text-primary) !important; }
.done-web { font-size: 15px; }

/* ---------- footer ---------- */
.footer { background: var(--canvas-deep); border-top: 1px solid var(--line); padding: clamp(56px, 6vw, 88px) 0 32px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px 32px; }
.foot-logo { height: 30px; width: auto; }
.foot-tag { margin-top: 10px; font-size: 12.5px; letter-spacing: .14em; color: var(--text-meta); }
.foot-line { margin-top: 20px; max-width: 40ch; font-size: 1rem; line-height: 1.55; }
.foot-h { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); margin-bottom: 14px; }
.foot-col li { margin-bottom: 4px; font-size: 1rem; }
.foot-col a { display: inline-flex; min-height: 32px; align-items: center; color: var(--text-secondary); transition: color .3s var(--ease); }
@media (hover: hover) { .foot-col a:hover { color: var(--text-primary); } }
.foot-col li:not(:has(a)) { color: var(--text-secondary); padding: 4px 0; }
.foot-notes { margin-top: 48px; padding-top: 24px; background: linear-gradient(var(--line), var(--line)) 0 -24px / 100% 1px no-repeat; background-origin: content-box; background-clip: border-box; display: grid; gap: 8px; font-size: 12px; line-height: 1.6; color: var(--text-meta); }
.foot-notes p { max-width: 130ch; }
.foot-bottom { margin-top: 24px; font-size: 12px; color: var(--text-meta); }

/* ---------- responsive layout ---------- */
@media (max-width: 1100px) {
  .tile-c { grid-column: span 6; }
  .tile-d { grid-column: span 6; }
  .tile-e { grid-column: span 12; }
}
@media (max-width: 960px) {
  .market-copy, .plaques { grid-column: 1 / -1; }
  .plaques { margin-top: 48px; }
  .tile-a, .tile-b { grid-column: span 12; }
  .proof-cards { grid-template-columns: 1fr 1fr; }
  .reach-big, .counts { grid-column: 1 / -1; }
  .counts { margin-top: 40px; }
  .rail-head { grid-template-columns: 1fr; }
  .offer-lead, .offer-stack { grid-column: 1 / -1; }
  .scan-left, .scan-card { grid-column: 1 / -1; }
  .scan-card { margin-top: 48px; }
  .trio { grid-template-columns: 1fr; gap: 56px; }
  .trio::before { display: none; }
  .portrait-stage { border-bottom: 1px solid var(--line-strong); }
  .person-mid .portrait { bottom: -40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 721px) and (max-width: 960px) {
  /* the third proof card spans the row with its photo beside the text, so the 828px source is never enlarged past its pixels */
  .pcard:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 24px; align-content: start; }
  .pcard:last-child .pcard-img { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .pcard:last-child > :not(.pcard-img) { grid-column: 2; }
  .pcard:last-child h3 { margin-top: 0; }
  .pcard:last-child .rating-chip { justify-self: start; }
  /* the team keeps its three columns on portrait tablets and phones held sideways, with smaller portraits */
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .trio::before { display: block; top: 200px; }
  .portrait-stage { height: 200px; border-bottom: 0; }
  .portrait { width: 168px; height: 168px; }
  .person-mid .portrait { bottom: -16px; }
}
/* tablets and small laptops: the scan card's drawing takes its phone size and drops its caption (as on phones), so it never collides with the interest chip */
@media (min-width: 721px) and (max-width: 1279px) {
  .scan-draw { width: 84px; }
  .scan-draw svg { width: 64px; height: 80px; }
  .sd-cap { display: none; }
  .form-title, .done-h { padding-right: 96px; }
  .interest-chip { margin-top: 30px; }
}
@media (max-width: 720px) {
  .tile-c, .tile-d { grid-column: span 12; }
  /* the charts scale down with their viewBox: sizes below land at 12px or more on a 375px phone */
  .chart-rent text { font-size: 23px; }
  .chart-rent .val, .chart-rent .bracket-label, .chart-rent .cat { font-size: 26px; }
  .chart-vac text { font-size: 17.5px; }
  .chart-vac .val { font-size: 21px; }
  .chart-vac .cat { font-size: 20px; }
  .chart-range text { font-size: 19px; }
  .chart-range .val { font-size: 22px; }
  .chart-range .cat { font-size: 21px; }
  .chart-mini text { font-size: 16px; }
  .proof-cards { grid-template-columns: 1fr; }
  .ledger-cols { grid-template-columns: 1fr; gap: 40px; }
  .lens-flat { grid-template-columns: 1fr; }
  .reach-big { flex-direction: column; align-items: flex-start; gap: 12px; }
  .arc-label { font-size: 12px; letter-spacing: .08em; }
  .arc-label-sa { left: 0; transform: none; }
  .arc-label-in { left: auto; right: 0; transform: none; }
  .f-grid { grid-template-columns: 1fr; }
  .form-title, .done-h { padding-right: 96px; }
  .scan-draw { width: 84px; }
  .scan-draw svg { width: 64px; height: 80px; }
  .sd-cap { font-size: 11px; display: none; }
  .scan-card.is-sent .scan-draw { display: none; }
  .form-done > p:first-of-type, .done-h { padding-right: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  p.closing .text-link { display: block; width: max-content; margin: 10px 0 0; }
  /* running explanatory text stays at 13px or more on phones */
  .same-cap, .proof-label, .logos-note { font-size: 14px; }
  .foot-notes { font-size: 13px; }
  /* the interest chip wraps inside the card at 320px */
  .interest-chip { flex-wrap: wrap; max-width: 100%; margin-top: 30px; border-radius: 16px; }
  .interest-k { white-space: nowrap; }
  .interest-chip select { min-width: 0; max-width: 100%; }
  /* the Saudi rail shows a real peek of the next card, edge to edge like the proof cards, with no fade over it */
  .rail { grid-auto-columns: 84%; -webkit-mask-image: none; mask-image: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  /* phones: the HUD sits under the frame, so the after state keeps its entrance and people in view */
  .compare { border-radius: 16px; aspect-ratio: auto; display: flex; flex-direction: column; }
  .compare::before { content: ""; display: block; aspect-ratio: 4 / 3; }
  .compare > img, .cmp-after { bottom: auto; height: auto; aspect-ratio: 4 / 3; }
  .cmp-line { bottom: auto; height: 75cqw; }
  .cmp-hud { position: relative; left: auto; right: auto; bottom: auto; width: auto; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-chip { font-size: 14px; }
}


/* waterline tip on phones and without JavaScript */
.wl-tip-m { display: block; margin-top: 26px; }
.wl-tip-m .tip-items { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.js .wl-tip-m { display: none; }
/* phones held sideways and other short landscape screens: the panel sticks beside the cards, so the line, the buttons and
   each revealed card share one screen (site.js uses the same query for the phone mechanics) */
@media (orientation: landscape) and (max-height: 560px) {
  .js .wl-tip-m { display: block; }
  .js .wl-stage {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 20px; align-items: start;
    height: auto; margin-top: 8px; padding: 0 var(--gut) 16px; overflow: visible; container-type: normal;
    -webkit-mask-image: none; mask-image: none;
  }
  .js .wl-panel {
    position: sticky; inset: auto; top: var(--nav-h); z-index: 4; grid-column: 1; grid-row: 1 / span 2;
    height: calc(100svh - var(--nav-h)); container-type: size; overflow: hidden;
    background: var(--canvas); border-bottom: 0; touch-action: pan-y;
  }
  .js .wl-panel .wl-tip, .js .wl-controls, .js .wl-hint, .js .wl-pips, .js .wl-below { display: none; }
  .js .wl-below-static { display: block; grid-column: 2; grid-row: 1; margin-top: 0; padding: 0; }
  .js .wl-items { grid-column: 2; grid-row: 2; position: static; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 12px 0 0; padding: 0; pointer-events: auto; }
  .js .wl-item, .js .wl-item:nth-child(odd), .js .wl-item:nth-child(even) {
    position: static; bottom: auto; left: auto; right: auto; width: auto; z-index: auto;
    padding: 22px; text-align: left; background: rgba(27, 43, 58, .62); border: 1px solid var(--line); border-radius: 16px; opacity: .86;
  }
  .js .wl-item.shown { border-color: rgba(181, 85, 58, .6); }
  .js .wl-item .wl-pop { position: static; width: auto; box-shadow: none; }
  .js .wl-handle { left: auto; right: 12px; margin: -22px 0 0 0; }
  .js .wl-mobile-ctrl { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 12px; top: 6cqh; z-index: 7; }
  /* 96px keeps Raise clear of the handle in a 200px panel (568x320) */
  .js .wl-mobile-ctrl .btn { min-width: 96px; min-height: 44px; }
}
@media (max-width: 720px) {
  .js .wl-tip-m { display: block; }
  .js .wl-panel .wl-tip { display: none; }
  .cmp-hud { padding: 12px 14px; }
  .svc-fields { grid-template-columns: 1fr; }
  .svc-when { flex-direction: column; gap: 4px; }
  .proof-cards { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 8px; scrollbar-width: none; }
  .proof-cards::-webkit-scrollbar { display: none; }
  .pcard { scroll-snap-align: start; }
}

/* phones held sideways (wider than 720px): the comparison frame fits under the bar with its HUD, and the plaque field stays compact */
@media (min-width: 721px) and (orientation: landscape) and (max-height: 500px) {
  .compare { aspect-ratio: auto; height: calc(100svh - var(--nav-h) - 16px); }
  .plaques { max-width: 520px; }
}

/* ---------- touch targets on coarse pointers ---------- */
@media (pointer: coarse) {
  /* .nav-menu takes only the height here: its display stays with the 899px rule, so touch screens 900px and wider show the link row alone */
  .btn, .fchip, .pmore, .wl-src, .sheet-close { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nav-menu { min-height: 44px; }
  .text-link { display: inline; min-height: 0; padding-block: 13px; background-origin: content-box; background-clip: content-box; }
  .cchip span { min-height: 44px; }
  .interest-chip select { min-height: 44px; }
  .nav-links a, .foot-col a { min-height: 44px; }
  .nav-links a { min-width: 44px; justify-content: center; }
  /* the read-only request is 16px, so iOS does not zoom when it is focused for copying */
  .done-text { font-size: 16px; }
  .foot-col a { min-width: 44px; }
  .nav-logo { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .scan-phone a, .sheet-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .gauge-ticks button { height: 44px; }
  .closing .text-link { display: inline-block; padding-block: 12px; min-height: 44px; }
}

/* the sheet's contact line below 384px: the two links stack, so the separator never dangles at a line end */
@media (max-width: 383px) {
  .sheet-contact .sep { display: none; }
  .sheet-contact a { display: flex; align-items: center; width: max-content; max-width: 100%; }
}
/* the message placeholder (four lines at 320px) fits the box on the narrowest phones */
@media (max-width: 359px) { .msg-field textarea { min-height: 132px; } }
/* the request text on narrow phones: the proportional face keeps the email address whole on one line (16px, so iOS never zooms) */
@media (max-width: 380px) {
  .done-text.mono { font-family: var(--sans); font-size: 16px; padding: 12px 10px; margin-inline: -8px; width: calc(100% + 16px); }
}
/* phones held sideways with the keyboard up: the bar slides away while a text field has focus, so the field and its label
   share the little height that is left (touch screens only: a short desktop window keeps its bar) */
.nav { transition: box-shadow .5s var(--ease), transform .3s var(--ease); }
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  html:has(.scan-form :is(input:not([type="radio"]):not([type="checkbox"]), textarea):focus) .nav { transform: translateY(-100%); }
  .scan-form :is(input:not([type="radio"]):not([type="checkbox"]), textarea) { scroll-margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: box-shadow .5s var(--ease); } }

/* ---------- without JavaScript: every entrance shows its final state ---------- */
html:not(.js) .rise .part, html:not(.js) .person .portrait, html:not(.js) .person-copy,
html:not(.js) .g-bar > a, html:not(.js) .g-bar > span, html:not(.js) .srow-new { opacity: 1; transform: none; }
html:not(.js) .g-bar .g-txt, html:not(.js) .g-bar b { opacity: 1; }
html:not(.js) .col, html:not(.js) .bar, html:not(.js) .ranges .range, html:not(.js) .chart-mini .range { transform: none; }
html:not(.js) .bracket { opacity: 1; }
html:not(.js) .arc-path, html:not(.js) .draw, html:not(.js) .sd-floor { stroke-dashoffset: 0; }
html:not(.js) .srow .strike { transform: scaleX(1); }
html:not(.js) .srow-old { opacity: .5; }
html:not(.js) .lens-recap { display: block; }
html:not(.js) .plaques { display: none; }
html:not(.js) .nav::before { opacity: 1; }
/* every disclosure shows its content; the toggles that need JavaScript step aside */
html:not(.js) .svc-panel, html:not(.js) .qa-panel, html:not(.js) .pbio { grid-template-rows: 1fr; }
html:not(.js) .svc-in, html:not(.js) .qa-in > p, html:not(.js) .pbio p { opacity: 1; }
html:not(.js) .svc-icon, html:not(.js) .qa-icon, html:not(.js) .pmore, html:not(.js) .filters { display: none; }

/* ---------- reduced motion: final states everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .col, .bar, .ranges .range, .chart-mini .range { transform: none !important; }
  .bracket { opacity: 1; }
  .g-bar > a, .g-bar > span { transform: none; opacity: 1; }
  .portrait { transform: none; opacity: 1; }
  .person-copy { transform: none; opacity: 1; }
  .sd-floor { stroke-dashoffset: 0; }
  .arc-path { stroke-dashoffset: 0; }
  .srow-new { opacity: 1; transform: none; }
  .pq::before { transform: none; }
  .sheet-links a { opacity: 1; transform: none; }
  .env-contours, .env-glow, .env-motes { animation: none !important; }
  .env-motes { display: none; }
  .bub { display: none; }
}


/* ---------- S1. Global Sustainability Delivery Centre: mobile-first, the films carry the story ---------- */
.gsdc .kicker { margin-bottom: 10px; }
.gsdc-h { font-size: clamp(2rem, 8.4vw, 3.6rem); font-weight: 900; line-height: .98; letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
.gsdc-film { margin: 22px calc(var(--gut) * -1) 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1720 center / cover no-repeat; }
.gsdc-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.gsdc-lede { margin-top: 18px; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--text-primary); }
.gsdc-geo { margin-top: 12px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 480px) { .gsdc-geo { font-size: 11px; letter-spacing: .05em; } }
.gsdc-svcs {
  list-style: none; margin: 26px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gsdc-svcs::-webkit-scrollbar { display: none; }
.gsdc-svc { scroll-snap-align: start; min-width: 0; }
.gsdc-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #0E1720; border: 1px solid var(--line); }
.gsdc-num { margin-top: 12px; font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.gsdc-svc-h { margin-top: 4px; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.gsdc-svc-p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.gsdc-foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.gsdc-live { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.gsdc-dot { width: 8px; height: 8px; border-radius: 50%; background: #5FBF7A; box-shadow: 0 0 0 4px rgba(95, 191, 122, .18); }
@media (min-width: 721px) {
  .gsdc-film { margin-inline: 0; border-radius: 16px; }
  .gsdc-svcs { margin-inline: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; }
}
@media (min-width: 721px) and (max-width: 899px) { .gsdc-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .gsdc .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px);
    grid-template-areas: ". film" "k film" "h film" "lede film" "geo film" ". film" "svcs svcs" "foot foot"; grid-template-rows: 1fr auto auto auto auto 1fr auto auto; }
  .gsdc .kicker { grid-area: k; }
  .gsdc-h { grid-area: h; font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
  .gsdc-film { grid-area: film; margin-top: 0; }
  .gsdc-lede { grid-area: lede; }
  .gsdc-geo { grid-area: geo; }
  .gsdc-svcs { grid-area: svcs; margin-top: clamp(36px, 4vw, 56px); }
  .gsdc-foot { grid-area: foot; }
}


/* trust ticker: portrait phones only, right below the first fold; the logos scroll, and sit still as a grid under reduced motion */
/* the client logo strip under the hero, at every width: a light band so the clients' own coloured logos read as designed */
.trust-ticker { display: block; position: relative; z-index: 2; padding: 22px 0 24px; background: #F7F6F2; border-top: 1px solid rgba(21, 33, 44, .12); border-bottom: 1px solid rgba(21, 33, 44, .12); }
.trust-ticker.tt-slim { display: none; }
.tt-h { margin: 0 var(--gut, 20px) 14px; font-size: 12px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #3B4A58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-view { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tt-run { display: flex; align-items: center; gap: 64px; width: max-content; margin: 0; padding: 0 0 0 64px; list-style: none; animation: tt-scroll 40s linear infinite; }
.tt-run li { flex: none; }
.tt-run img { display: block; height: 44px; width: auto; max-width: 150px; object-fit: contain; }
@keyframes tt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) and (orientation: portrait) {
  .trust-ticker { order: 0; padding: 16px 0 18px; }
  .trust-ticker.tt-slim { display: block; }
  .tt-h { margin-bottom: 12px; font-size: 11px; letter-spacing: .12em; }
  .tt-view { -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .tt-run { gap: 40px; padding-left: 40px; animation-duration: 32s; }
  .tt-run img { height: 34px; max-width: 112px; }
  .tt-note { margin: 12px var(--gut, 20px) 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.72); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-run { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 18px 28px; padding: 0 var(--gut, 20px); }
  .tt-run li[aria-hidden="true"] { display: none; }
  .tt-view { -webkit-mask: none !important; mask: none !important; }
}
body.paused .tt-run { animation-play-state: paused; }
@media (max-width: 720px) and (orientation: portrait) { main#main > .trust-ticker { order: 0; } }
@media (max-width: 720px) and (orientation: portrait) { .trust-ticker.tt-slim { padding: 12px 0; } }

/* ================================================================
   Global Sustainability Delivery Centre page (gsdc.html). Mobile first: one column, film before words;
   wider screens get the columns.
   ================================================================ */
.page-gsdc .sec { padding-block: clamp(56px, 7vw, 104px); }
.page-gsdc main > .sec + .sec { border-top: 1px solid var(--line); }
.page-gsdc .kicker { margin-bottom: 14px; }
@media (min-width: 1100px) and (min-height: 561px) { .page-gsdc .wrap { padding-right: var(--gut); } }
.gp-h2 { font-size: clamp(1.9rem, 7.2vw, 3.3rem); max-width: 20ch; }
.gp-note { margin-top: 22px; max-width: 64ch; font-size: 12.5px; line-height: 1.55; color: var(--text-meta); }
p.gp-note:not(.mono) { font-family: var(--sans); font-size: 15px; color: var(--text-secondary); }

/* hero: the studio film under the bar, then the name */
.gp-hero { padding-top: var(--nav-h); }
.gp-hero-film { aspect-ratio: 16 / 9; overflow: hidden; background: #0E1720 url("../img/gsdc-studio.jpg") center / cover no-repeat; }
.gp-hero-copy { padding-top: 24px; padding-bottom: 8px; }
.gp-h1 { font-size: clamp(2.3rem, 10vw, 5rem); line-height: .96; letter-spacing: -.035em; max-width: 13ch; }
.gp-lede { margin-top: 16px; max-width: 44ch; font-size: 17px; line-height: 1.5; color: var(--text-primary); }
.gp-hero .gsdc-geo { margin-top: 14px; }
.gp-ctas { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-ctas .btn { padding-inline: 12px; }
@media (min-width: 600px) { .gp-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .gp-ctas .btn { padding-inline: 24px; } }
@media (min-width: 900px) {
  .gp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4vw, 64px);
    max-width: 1320px; margin-inline: auto; padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) var(--gut) clamp(40px, 5vw, 72px); }
  .gp-hero-film { order: 2; border-radius: 18px; border: 1px solid var(--line); }
  .gp-hero-copy { order: 1; padding: 0; }
  .gp-h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); max-width: 15ch; }
}

/* why: three short rows */
.gp-why-list { margin-top: 28px; display: grid; gap: 0; }
.gp-why-list li { padding: 18px 0; border-top: 1px solid var(--line); }
.gp-why-list h3 { font-size: 19px; line-height: 1.25; }
.gp-why-list p { margin-top: 4px; font-size: 15.5px; line-height: 1.5; }
.gp-why-close { margin-top: 18px; max-width: 46ch; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.35; color: var(--text-primary); }
@media (min-width: 721px) {
  .gp-why-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .gp-why-list li { padding-top: 22px; }
}

/* services: each one told by its film */
.gp-svc-list { margin-top: 30px; display: grid; gap: 44px; }
.gp-svc { display: grid; gap: 16px; scroll-margin-top: calc(var(--nav-h) + 12px); }
.gp-svc-media { aspect-ratio: 4 / 5; max-height: 64svh; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #0E1720; }
.gp-svc-h { margin-top: 2px; font-size: clamp(1.4rem, 5.6vw, 2.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.gp-svc-p { margin-top: 8px; max-width: 44ch; font-size: 16.5px; line-height: 1.5; color: var(--text-primary); }
.gp-ticks { margin-top: 14px; display: grid; gap: 8px; }
.gp-ticks li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; }
.gp-ticks li::before { content: ""; position: absolute; left: 0; top: .66em; width: 10px; height: 2px; border-radius: 2px; background: var(--accent); }
.gp-also { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 60ch; font-size: 15.5px; line-height: 1.5; }
@media (min-width: 900px) {
  .gp-svc-list { gap: clamp(48px, 6vw, 88px); }
  .gp-svc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
  .gp-svc-media { max-height: none; max-width: 460px; width: 100%; }
  .gp-svc:nth-child(even) .gp-svc-media { order: 2; justify-self: end; }
}

/* engagement models: six small tiles */
.gp-models { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gp-model { padding: 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(27, 43, 58, .55); }
.gp-model h3 { font-size: 16.5px; line-height: 1.25; }
.gp-model p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
@media (min-width: 721px) { .gp-models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .gp-model { padding: 22px 20px; } }

/* two-column comparisons (keep / hand over, quality / confidentiality) */
.gp-split { margin-top: 28px; display: grid; gap: 14px; }
.gp-col { padding: 20px 18px; border: 1px solid var(--line); border-radius: 16px; }
.gp-col-h { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-meta); }
.gp-col .gp-ticks { margin-top: 12px; }
@media (min-width: 721px) { .gp-split { grid-template-columns: 1fr 1fr; gap: 18px; } .gp-col { padding: 26px 24px; } }

/* getting started: a numbered sequence */
.gp-steps { margin-top: 28px; display: grid; counter-reset: none; }
.gp-steps li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--text-primary); }
.gp-step-n { flex: none; width: 2ch; font-size: 13px; font-weight: 500; color: var(--accent); }
@media (min-width: 900px) {
  .gp-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .gp-steps li { flex-direction: column; gap: 10px; padding-top: 18px; border-top-width: 2px; line-height: 1.3; }
  .gp-steps li:first-child { border-top-color: var(--accent); }
}

/* the live engagement */
.gp-live-card { display: grid; gap: 20px; }
.gp-live-logo { width: 84px; height: auto; padding: 12px; border-radius: 14px; background: #F7F6F2; }
.gp-live .gp-h2 { margin-top: 10px; }
.gp-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.gp-chips li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 1.2; color: var(--text-primary); background: rgba(27, 43, 58, .55); }
@media (min-width: 721px) { .gp-live-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 32px; } .gp-live-logo { width: 120px; } }

/* numbers */
.gp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.gp-stats li { padding-top: 14px; border-top: 1px solid var(--line); }
.gp-stats b { display: block; font-size: clamp(2.4rem, 10vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.gp-stats span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.4; }
@media (min-width: 721px) { .gp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* contact */
.gp-contact .gp-lede { color: var(--text-secondary); }

/* ================================================================
   S2. Where we have worked: the project map. Dots are Natural Earth land; the eight delivery countries are lit, pins
   mark the cities with named projects. --u (map units per CSS pixel, set by site.js) keeps pins, labels and arcs one
   on-screen size at every zoom.
   ================================================================ */
.pm-h { font-size: clamp(1.9rem, 7.6vw, 3.4rem); max-width: 16ch; }
.pm-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pm-map { position: relative; margin: 0 calc(var(--gut) * -1); aspect-ratio: 3 / 2; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 62% 45%, rgba(230, 168, 124, .07), transparent 70%); }
.pm-svg { --u: 1; display: block; width: 100%; height: 100%; }
.pm-c { fill: none; stroke: var(--data); stroke-width: 5; stroke-linecap: round; opacity: .9; cursor: pointer; transition: opacity .45s var(--ease), stroke .45s var(--ease); }
.pm-map:not([data-sel="all"]) .pm-c { opacity: .32; }
.pm-map:not([data-sel="all"]) .pm-c.on { opacity: 1; stroke: #F6CDA6; }
.pm-arc { fill: none; stroke: var(--data); stroke-width: calc(1.4px * var(--u)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7;
  transition: stroke-dashoffset 1.2s var(--ease) calc(var(--i) * .18s), opacity .45s var(--ease); }
html:not(.js) .pm-arc, .pm-map.drawn .pm-arc { stroke-dashoffset: 0; }
.pm-map:not([data-sel="all"]) .pm-arc { opacity: .14; }
.pm-map:not([data-sel="all"]) .pm-arc.on { opacity: .9; }
.pm-end { fill: var(--data); r: calc(3px * var(--u)); opacity: 0; transition: opacity .5s var(--ease) calc(var(--i) * .18s + 1s); }
html:not(.js) .pm-end, .pm-map.drawn .pm-end { opacity: .95; }
.pm-pin { cursor: pointer; }
.pm-pin-s { transform: scale(var(--u)); }
.pm-dot { fill: #F1ECE4; stroke: #15212C; stroke-width: 1.5; }
.pm-pin-live .pm-dot { fill: #5FBF7A; }
.pm-ping { fill: none; stroke: var(--data); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* in the overview only the live engagement pulses; a chosen country's own pins pulse with it */
.pm-pin-live .pm-ping, .pm-pin.on .pm-ping { animation: pm-ping 2.6s var(--ease) infinite; }
.pm-pin-live .pm-ping { stroke: #5FBF7A; }
@keyframes pm-ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(2); opacity: 0; } }
.pm-map:not([data-sel="all"]) .pm-pin:not(.on) { opacity: .35; }
.pm-lbl, .pm-name { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; fill: var(--text-primary); pointer-events: none;
  paint-order: stroke; stroke: rgba(13, 21, 30, .88); stroke-width: calc(3px * var(--u)); stroke-linejoin: round; transition: opacity .4s var(--ease); }
.pm-lbl { font-size: calc(12px * var(--u)); opacity: 0; }
.pm-pin.on .pm-lbl { opacity: 1; }
.pm-lbl-r { transform: translate(calc(9px * var(--u)), calc(4px * var(--u))); }
.pm-lbl-l { text-anchor: end; transform: translate(calc(-9px * var(--u)), calc(4px * var(--u))); }
.pm-lbl-lb { text-anchor: end; transform: translate(calc(-7px * var(--u)), calc(15px * var(--u))); }
.pm-name { font-size: calc(11px * var(--u)); text-transform: uppercase; letter-spacing: .12em; fill: var(--text-secondary); opacity: 0; }
.pm-name-m { text-anchor: middle; }
.pm-map.wide[data-sel="all"] .pm-name { opacity: 1; }
.pm-chips { display: none; }
.js .pm-chips { display: flex; gap: 8px; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gut); }
.pm-chips::-webkit-scrollbar { display: none; }
.pm-chip { flex: none; min-height: 40px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(169, 182, 194, .35); background: rgba(27, 43, 58, .55);
  font-size: 14.5px; font-weight: 600; line-height: 1.2; color: var(--text-primary); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.pm-chip[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--canvas); }
@media (hover: hover) { .pm-chip:hover { border-color: var(--text-primary); } }
.pm-panels { margin-top: 6px; }
.pm-panel + .pm-panel { margin-top: 28px; }
.js .pm-panel { display: none; margin-top: 0; }
.js .pm-panel.is-on { display: block; animation: pm-in .45s var(--ease-out); }
@keyframes pm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .pm-panel.is-on { animation: none; } .pm-ping { animation: none; opacity: 0; } .pm-arc, .pm-end { transition: none; } }
.pm-ph { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.pm-meta { margin-top: 4px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-meta); }
.pm-live { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.pm-city { margin-top: 18px; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--data); }
.pm-list { margin-top: 8px; }
.pm-ph + .pm-meta + .pm-list, .pm-live + .pm-list { margin-top: 14px; }
.pm-list li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.pm-pn { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.pm-pr { font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.pm-gen { margin-top: 12px; font-size: 15.5px; color: var(--text-secondary); }
.pm-sum li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.pm-sum li:first-child { border-top: 0; }
.pm-sum b { flex: none; min-width: 3.4ch; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pm-sum span { font-size: 15.5px; line-height: 1.4; }
.pm-note { margin-top: 24px; max-width: 72ch; font-size: 12px; line-height: 1.55; color: var(--text-meta); }
@media (min-width: 721px) {
  .pm-map { margin: 0; aspect-ratio: 16 / 10; border-radius: 18px; border: 1px solid var(--line); }
  .js .pm-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
}
@media (min-width: 1000px) {
  .pm-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: 32px; }
  .pm-map { position: sticky; top: calc(var(--nav-h) + 20px); }
}

/* ================================================================
   S3. The projects, on film: real project photographs brought to life, the name and rating over the film
   ================================================================ */
.pf-title { font-size: clamp(1.9rem, 7.2vw, 3.3rem); max-width: 18ch; }
.pf-list { margin-top: 24px; display: grid; gap: 14px; }
.pf-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #0E1720; }
.pf-media { aspect-ratio: 16 / 10; }
.pf-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 14px; background: linear-gradient(to top, rgba(10, 16, 23, .92), rgba(10, 16, 23, .5) 58%, rgba(10, 16, 23, 0)); }
.pf-h { font-size: 18px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 8px rgba(10, 16, 23, .6); }
.pf-rate { margin-top: 4px; font-size: 12px; letter-spacing: .05em; color: #E6E0D6; }
@media (min-width: 721px) {
  .pf-list { grid-template-columns: 1fr 1fr; gap: 18px; }
  .pf-cap { padding: 64px 22px 18px; }
  .pf-h { font-size: 21px; }
}

/* ================================================================
   S4 to S8, rebuilt film first (16 Oct night): market, business case, how we fit in, services.
   Shared film boxes; the stats and lines sit on or under the film.
   ================================================================ */
.mk-h, .cs-h, .ft-h, .sv-h { font-size: clamp(1.8rem, 7vw, 3.2rem); max-width: 20ch; }
@media (min-width: 900px) { .mk-h { max-width: 26ch; } }
.mk-film, .cs-film, .ft-film { position: relative; margin: 22px calc(var(--gut) * -1) 0; overflow: hidden; background: #0E1720; }
.mk-film, .cs-film { aspect-ratio: 1 / 1; }
.ft-film { aspect-ratio: 16 / 9; }
.mk-film video, .cs-film video, .ft-film video, .sv-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 721px) {
  .mk-film, .cs-film, .ft-film { margin-inline: 0; border-radius: 18px; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
}

/* market: the figure sits on the film */
.mk-stat { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 64px var(--gut) 18px;
  background: linear-gradient(to top, rgba(10, 16, 23, .94), rgba(10, 16, 23, .6) 55%, rgba(10, 16, 23, 0)); }
.mk-stat b { font-size: clamp(3.2rem, 15vw, 5.4rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; }
.mk-stat span { max-width: 30ch; font-size: 16px; line-height: 1.4; color: var(--text-primary); }
.mk-stat .source { color: #B9C3CD; }
.mk-close { margin-top: 18px; max-width: 44ch; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.4; color: var(--text-primary); }
@media (min-width: 721px) { .mk-stat { padding: 90px 28px 24px; } }

/* business case: four numbers under the film */
.cs-stats { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.cs-stat { display: grid; align-content: start; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs-stat b { font-size: clamp(1.8rem, 8vw, 2.8rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.cs-stat b small { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--text-secondary); }
.cs-l { font-size: 14.5px; line-height: 1.35; color: var(--text-primary); }
.cs-stat .source { font-size: 11px; }
.cs-cta { margin-top: 22px; }
@media (min-width: 900px) {
  .cs .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 56px);
    grid-template-areas: "k k" "h h" "film stats" "film cta"; grid-template-rows: auto auto 1fr auto; }
  .cs .kicker { grid-area: k; } .cs-h { grid-area: h; } .cs-film { grid-area: film; margin-top: 28px; } .cs-cta { grid-area: cta; }
  .cs-stats { grid-area: stats; margin-top: 28px; align-content: center; gap: 26px 20px; }
}

/* how we fit in: the film, then one timeline */
.ft-line { margin-top: 22px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 8px; }
.ft-phases { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.ft-phases li { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; text-transform: uppercase; color: var(--text-meta); padding: 0 2px 6px; border-left: 1px solid var(--line); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-bar { position: relative; height: 34px; border-radius: 999px; display: flex; align-items: center; padding: 0 14px; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  transform-origin: left center; transform: scaleX(1); transition: transform 1.1s var(--ease-out); }
.ft-dw { grid-column: 1 / 7; background: var(--accent); color: #fff; }
.ft-cert { grid-column: 2 / 6; background: transparent; border: 1px dashed rgba(169, 182, 194, .6); color: var(--text-secondary); transition-delay: .25s; }
.js .ft-line:not(.in) .ft-bar { transform: scaleX(.04); }
@media (max-width: 360px) { .ft-phases li { font-size: 8.5px; letter-spacing: 0; padding-left: 3px; } }
.ft-pair { margin-top: 22px; display: grid; gap: 10px; }
.ft-pair p { font-size: 15.5px; line-height: 1.45; }
.ft-pair b { color: var(--text-primary); font-weight: 600; }
@media (min-width: 721px) { .ft-phases li { font-size: 12px; } .ft-bar { height: 40px; font-size: 15px; } .ft-pair { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* services: six film cards, swiped on phones, three across on wider screens */
.sv-cards { list-style: none; margin: 24px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; align-items: start;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.sv-cards::-webkit-scrollbar { display: none; }
.sv-card { scroll-snap-align: start; min-width: 0; scroll-margin-top: calc(var(--nav-h) + 12px); }
.sv-media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #0E1720; }
.sv-card .gsdc-num { margin-top: 12px; }
.sv-name { margin-top: 4px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.sv-tag { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.sv-more { margin-top: 10px; }
.sv-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sv-more summary::-webkit-details-marker { display: none; }
.sv-more summary::after { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(169, 182, 194, .5); font-size: 14px; line-height: 1; transition: transform .3s var(--ease); }
.sv-more[open] summary::after { transform: rotate(45deg); }
.sv-more .gp-ticks { margin-top: 6px; }
.sv-more .gp-ticks li { font-size: 14.5px; }
.sv-when { margin-top: 12px; display: grid; gap: 2px; font-size: 14.5px; color: var(--text-primary); }
.sv-when .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-meta); }
.sv-proof { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-meta); }
@media (min-width: 721px) {
  .sv-cards { margin-inline: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 34px 22px; }
}

/* ================================================================
   From the Master Company Profile (16 Oct, late): sectors, the approach, the seven-stage lifecycle, the practice,
   and the design-innovation row. Same film system as the sections above.
   ================================================================ */
.sc-h, .ap-h, .pr-h { font-size: clamp(1.8rem, 7vw, 3.2rem); max-width: 20ch; }

/* projects: material and design innovation */
.pf-sub { margin-top: 44px; font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 800; line-height: 1.15; }
.pf-innov { margin-top: 16px; }
.pf-more { margin-top: 16px; max-width: 64ch; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
@media (min-width: 900px) { .pf-innov { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-innov .pf-h { font-size: 18px; } }

/* sectors: eight film tiles, two across on phones, four on wider screens */
.sc-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
.sc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #0E1720; }
.sc-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 10px; font-size: 15px; font-weight: 700; line-height: 1.2;
  background: linear-gradient(to top, rgba(10, 16, 23, .92), rgba(10, 16, 23, .55) 55%, rgba(10, 16, 23, 0)); }
.sc-tags { margin-top: 7px; font-size: 10.5px; line-height: 1.5; letter-spacing: .01em; color: var(--text-meta); }
@media (min-width: 721px) {
  .sc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
  .sc-name { padding: 56px 16px 14px; font-size: 17px; }
  .sc-tags { font-size: 11.5px; }
}

/* the approach: one film and a stepped scale from green buildings to portfolios */
.ap-lede { margin-top: 14px; max-width: 52ch; font-size: 16.5px; line-height: 1.5; color: var(--text-primary); }
.ap-grid { margin-top: 22px; display: grid; gap: 20px; }
.ap-film { margin: 0 calc(var(--gut) * -1); aspect-ratio: 16 / 9; overflow: hidden; background: #0E1720; }
.ap-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-rows { display: grid; gap: 4px; }
.ap-row { position: relative; display: grid; gap: 2px; padding: 10px 0 14px; }
.ap-k { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.ap-v { font-size: 11.5px; line-height: 1.45; letter-spacing: .02em; color: var(--text-secondary); }
/* each step reaches further than the one before: the bar grows with --i */
.ap-row::after { content: ""; position: absolute; left: 0; bottom: 4px; height: 4px; border-radius: 4px;
  width: calc((var(--i) + 1) / 7 * 100%); background: linear-gradient(90deg, var(--sig-green), var(--sig-cyan) 45%, var(--data));
  transform-origin: left center; transition: transform .9s var(--ease-out) calc(var(--i) * .09s); }
.js .ap-rows:not(.in) .ap-row::after { transform: scaleX(0); }
@media (min-width: 721px) { .ap-film { margin-inline: 0; border-radius: 18px; border: 1px solid var(--line); } }
@media (min-width: 1000px) {
  .ap-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 40px; }
  .ap-k { font-size: 18px; }
}

/* how we fit in: the seven stages, Dwellers along the whole rail, certification-only bracketed */
.lc { margin-top: 22px; }
.lc-key { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta); }
.lc-key span { display: inline-flex; align-items: center; gap: 8px; }
.lc-key-dw::before { content: ""; width: 22px; height: 4px; border-radius: 4px; background: var(--accent); }
.lc-key-cert::before { content: ""; width: 22px; height: 0; border-top: 2px dashed rgba(169, 182, 194, .7); }
.lc-list { margin-top: 14px; display: grid; }
.lc-st { position: relative; display: grid; gap: 2px; padding: 11px 26px 11px 28px; }
.lc-st::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 4px; background: var(--accent); transform-origin: top center; transition: transform .5s var(--ease-out) calc(var(--i) * .1s); }
.lc-st:first-child::before { top: 16px; border-radius: 4px 4px 0 0; }
.lc-st:last-child::before { bottom: calc(100% - 22px); border-radius: 0 0 4px 4px; }
.lc-st::after { content: ""; position: absolute; left: 1px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--accent); }
.lc-cert { border-right: 2px dashed rgba(169, 182, 194, .6); }
.lc-st:nth-child(2) { border-top-right-radius: 10px; }
.lc-k { font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.lc-v { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.js .lc:not(.in) .lc-st::before { transform: scaleY(0); }
@media (min-width: 1000px) {
  .ft .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px;
    grid-template-areas: "k k" "h h" "film lc" "pair pair"; }
  .ft .kicker { grid-area: k; } .ft-h { grid-area: h; } .ft-film { grid-area: film; align-self: start; margin-top: 28px; }
  .lc { grid-area: lc; margin-top: 28px; } .ft-pair { grid-area: pair; margin-top: 30px; }
}

/* services: eight cards, four across on wide screens */
@media (min-width: 1100px) { .sv-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the practice: one line of positioning and three pillar films */
.pr-lede { margin-top: 14px; max-width: 52ch; font-size: 16.5px; line-height: 1.5; color: var(--text-primary); }
.pr-cards { list-style: none; margin: 24px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
.pr-cards::-webkit-scrollbar { display: none; }
.pr-card { scroll-snap-align: start; min-width: 0; }
.pr-card .sv-name { margin-top: 12px; }
@media (min-width: 721px) {
  .pr-cards { margin-inline: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ap-row::after, .lc-st::before { transition: none; } }
/* phones: the design-innovation films swipe sideways so the project section stays short */
@media (max-width: 720px) {
  .pf-innov { margin: 16px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .pf-innov::-webkit-scrollbar { display: none; }
  .pf-innov .pf-card { scroll-snap-align: start; }
}

/* ================================================================
   Multi-page site (client feedback, 19 Oct): a lean homepage and inner pages. No scroll engine any more, so no depth
   gauge: the wrap takes its normal right gutter everywhere.
   ================================================================ */
@media (min-width: 1100px) and (min-height: 561px) { .wrap { padding-right: var(--gut); } }
.nav-links a[aria-current="page"] { color: var(--text-primary); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.sheet-links a[aria-current="page"] { color: var(--data); }

/* the hero, same film on every screen: the "Beyond certification" building.
   Phones: the film as a strip under the bar, then the name, the impact panel and both calls to action.
   Wide screens: the film fills the screen and the copy sits over its dark left side. */
.hh { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: var(--nav-h); }
.hh-film { position: relative; flex: 1 1 auto; min-height: 52vw; max-height: 58svh; margin: 0; overflow: hidden; background: #0E1720 url("../img/hero-beyond.jpg") center / cover no-repeat; }
/* the video sits absolutely so the strip takes the room the copy leaves, never the video's own height */
.hh-film video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hh-film::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(to top, var(--canvas), rgba(21, 33, 44, 0)); }
.hh-copy { position: relative; flex: 0 0 auto; padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.hh-kicker { margin-bottom: 8px; font-size: 11.5px; white-space: nowrap; }
.hh-kicker .kicker-more { display: none; }
.hh-h { font-size: clamp(2.3rem, 10.5vw, 3.1rem); line-height: .94; letter-spacing: -.035em; }
.hh-lede { display: none; }
.hh-impact { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--scrim-rgb), .84); }
.hh-gauge { position: relative; width: 96px; height: 96px; }
.hh-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.hh-ring circle { fill: none; stroke-width: 5; }
.hh-track { stroke: rgba(169, 182, 194, .22); }
.hh-arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 30 100; }
.hh-centre { position: absolute; inset: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hh-num { font-size: 17px; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--text-primary); }
.hh-pct { font-size: .64em; margin-left: 1px; vertical-align: .32em; }
.hh-cap { margin-top: 5px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--text-secondary); }
.hh-list { display: grid; gap: 7px; }
.hh-list li { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.hh-list b { font-size: 17px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.hh-list span { font-family: var(--mono); font-size: 9.5px; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: var(--text-secondary); }
@media (min-width: 900px) { .hh-list li { display: grid; gap: 2px; } .hh-list span { letter-spacing: .04em; } }
.hh-note { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.45; color: var(--text-secondary); }
.hh-cta { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hh-cta .btn { padding-inline: 10px; }
.hh-cta .cta-opt { display: none; }
@media (max-height: 640px) and (max-width: 720px) {
  /* short phones: the footer carries the previous-roles note on every page, so the hero keeps only the energy source */
  .hh-note-tr { display: none; }
  .hh-film { min-height: 44vw; }
  .hh-h { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .hh-impact { margin-top: 12px; padding: 10px; }
  .hh-gauge { width: 76px; height: 76px; }
  .hh-num { font-size: 14px; }
  .hh-cap { display: none; }
  .hh-list b { font-size: 15px; }
}
@media (min-width: 600px) { .hh-kicker .kicker-more { display: inline; } }
@media (min-width: 900px) {
  .hh { display: grid; align-items: center; padding-top: 0; }
  .hh-film { position: absolute; inset: 0; min-height: 0; max-height: none; }
  .hh-film::after { top: 0; height: auto; background:
    linear-gradient(90deg, rgba(21, 33, 44, .94) 0%, rgba(21, 33, 44, .78) 30%, rgba(21, 33, 44, .2) 58%, rgba(21, 33, 44, 0) 78%),
    linear-gradient(to top, rgba(21, 33, 44, .85), rgba(21, 33, 44, 0) 26%); }
  .hh-copy { z-index: 1; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 64px; }
  .hh-copy > * { max-width: 540px; }
  .hh-kicker { font-size: 12.5px; }
  .hh-h { font-size: clamp(3.4rem, 6vw, 5.8rem); }
  .hh-lede { display: block; margin-top: 18px; font-size: 18.5px; line-height: 1.5; color: var(--text-primary); max-width: 36ch; }
  .hh-impact { margin-top: 26px; padding: 16px 18px; gap: 12px 20px; }
  .hh-gauge { width: 112px; height: 112px; }
  .hh-num { font-size: 20px; }
  .hh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
  .hh-cta .btn { padding-inline: 24px; }
  .hh-cta .cta-opt { display: inline; }
}

/* inner pages: a plain header with the page's name and one line */
.ph { padding: calc(var(--nav-h) + clamp(36px, 7vw, 88px)) 0 clamp(4px, 1.5vw, 16px); }
.ph .kicker { margin-bottom: 14px; }
.ph-h { font-size: clamp(2.2rem, 8.5vw, 4.4rem); line-height: .98; letter-spacing: -.035em; max-width: 18ch; }
.ph-lede { margin-top: 16px; max-width: 56ch; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--text-primary); }
.ph + .sec { padding-top: clamp(28px, 4vw, 52px); }

/* homepage: the teaser blocks, film tiles that link to their pages */
.hs-h { font-size: clamp(1.8rem, 7vw, 3.2rem); max-width: 20ch; }
.ht-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
.ht-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.ht { display: block; }
.ht-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #0E1720; }
.ht-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.ht-num { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ht-name { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--text-primary); transition: color .3s var(--ease); }
.ht-three .ht-name { font-size: 13px; }
.ht-over { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 12px 10px; background: linear-gradient(to top, rgba(10, 16, 23, .92), rgba(10, 16, 23, .55) 55%, rgba(10, 16, 23, 0)); }
@media (hover: hover) { .ht:hover .ht-media video { transform: scale(1.04); } .ht:hover .ht-name { color: var(--data); } }
.hm-more { margin-top: 24px; }
.hm-row { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hm-row .pm-note { margin: 0; flex: 1 1 300px; }
.hab-lede { margin-top: 14px; max-width: 52ch; font-size: 16.5px; line-height: 1.5; color: var(--text-primary); }
.pm-grid-home { grid-template-columns: minmax(0, 1fr) !important; }
.pmap-home .pm-map { position: relative !important; top: auto !important; }
@media (min-width: 721px) {
  .ht-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
  .ht-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .ht-name, .ht-three .ht-name { font-size: 17px; }
  .ht-over { padding: 56px 16px 14px; }
}

/* the closing band on every page: one ask */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.cta-bg { position: absolute; inset: 0; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 33, 44, .96), rgba(21, 33, 44, .7)); }
.cta-band .wrap { position: relative; }
.cta-h { font-size: clamp(1.9rem, 7vw, 3.4rem); max-width: 18ch; }
.cta-lede { margin-top: 14px; max-width: 48ch; font-size: 16.5px; line-height: 1.5; color: var(--text-primary); }
.cta-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* services page: the step of the ladder beside each number; on phones the cards stack, film beside the words */
.sv-step { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 720px) {
  .sv-page .sv-cards { margin: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: 26px; }
  .sv-page .sv-card { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .sv-page .sv-media { grid-row: 1 / span 4; }
  .sv-page .sv-card .gsdc-num { margin-top: 0; }
  .sv-page .sv-more { grid-column: 1 / -1; }
}

/* contact: the Value Scan section is the page header */
.scan-top { padding-top: calc(var(--nav-h) + clamp(36px, 7vw, 88px)); }
.scan-top h1 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1; letter-spacing: -.032em; }