/* Story preview: one working diagram per section. Tokens only (assets/css/tokens.css). */
.st { --rule: rgb(var(--color-navy-rgb) / .14); --rule-strong: rgb(var(--color-navy-rgb) / .28); width: 100%; overflow-x: clip; background: var(--color-white); color: var(--color-navy); }
.st-blue { --rule: rgb(var(--color-white-rgb) / .2); --rule-strong: rgb(var(--color-white-rgb) / .4); background: var(--color-blue); color: var(--color-white); }
.st-white { background: var(--color-white); color: var(--color-navy); }
.st-section { position: relative; padding-block: var(--space-120); }
.st-on-blue-muted { color: var(--color-blue-100); }
/* same container as index.html */
@media (min-width: 900px) { .st .gi-container { max-width: 1440px; padding-inline: var(--space-64); } }

/* Reveal: once, on entering the viewport. Only hidden when JS runs. */
.js [data-reveal] { opacity: 0; transform: translateY(var(--space-16)); transition: opacity var(--dur-700) var(--ease-out-quart), transform var(--dur-700) var(--ease-out-quart); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Engineering-drawing structure: dashed column guides, hairline frames, corner squares */
.st-guides { position: relative; }
.st-guides::before, .st-guides::after { content: ""; position: absolute; top: calc(var(--space-120) * -1); bottom: calc(var(--space-120) * -1); width: 1px; background: linear-gradient(to bottom, var(--rule) 50%, transparent 0) 0 0 / 1px var(--space-8); pointer-events: none; }
.st-guides::before { left: var(--space-24); }
.st-guides::after { right: var(--space-24); }
.st-frame { position: relative; border: 1px solid var(--rule); }
.st-corner { position: absolute; width: var(--space-8); height: var(--space-8); border: 1px solid var(--rule-strong); background: inherit; background-color: var(--color-white); z-index: var(--z-2); }
.st-blue .st-corner { background-color: var(--color-blue); }
.st-corner--tl { top: calc(var(--space-4) * -1); left: calc(var(--space-4) * -1); }
.st-corner--tr { top: calc(var(--space-4) * -1); right: calc(var(--space-4) * -1); }
.st-corner--bl { bottom: calc(var(--space-4) * -1); left: calc(var(--space-4) * -1); }
.st-corner--br { bottom: calc(var(--space-4) * -1); right: calc(var(--space-4) * -1); }

/* Section heads: centred, calm weight */
.st-head { max-width: 46rem; margin: 0 auto var(--space-64); text-align: center; }
.st .st-eyebrow { margin-bottom: var(--space-20); }
.st-white .st-eyebrow { color: var(--color-blue); }
.st-title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-fluid-54); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.st-title--left { text-align: left; }
.st-title--xl { font-size: var(--text-fluid-88); letter-spacing: -0.045em; }
.st .st-sub { margin-top: var(--space-20); font-size: var(--text-18); line-height: 1.6; color: var(--color-slate); text-wrap: pretty; }

/* ── HERO ── */
/* the hero fills the screen: header on top, content sits near the top and the free space falls below it */
.st-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.st-hero > .st-hero__inner { margin-bottom: auto; width: 100%; }
.st-matrix { position: absolute; inset: 0; background-image: radial-gradient(rgb(var(--color-white-rgb) / .16) 1px, transparent 1.2px); background-size: var(--space-6) var(--space-6); -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); pointer-events: none; }
/* footer: same dots, fading in from the top so the CTA above stays clean */
.st-matrix--footer { -webkit-mask-image: linear-gradient(to bottom, transparent, black 35%); mask-image: linear-gradient(to bottom, transparent, black 35%); }
/* Glow colour is one variable: set --st-glow-rgb on .st-hero to any *-rgb channel token, e.g. var(--color-blue-300-rgb). */
.st-hero { --st-glow-rgb: var(--color-gold-rgb); }
.st-hero__sun { position: absolute; left: 50%; bottom: -46%; width: 120%; aspect-ratio: 2 / 1; transform: translateX(-50%); transform-origin: 50% 100%; background: radial-gradient(closest-side, rgb(var(--st-glow-rgb) / .8), rgb(var(--st-glow-rgb) / .22) 45%, transparent 72%); filter: blur(var(--space-8)); pointer-events: none; animation: st-breathe var(--dur-3200) ease-in-out infinite; }
/* same rhythm as the primary button's inner light (gi-btn-breathe in site-chrome.css) */
@keyframes st-breathe { 0%, 100% { opacity: .65; transform: translateX(-50%) scale(.95); } 50% { opacity: 1; transform: translateX(-50%) translateY(-8%) scale(1.06); } }
.st-hero .h-globe { z-index: var(--z-raised); }
.st-hero__inner { position: relative; z-index: var(--z-2); padding-top: var(--space-48); padding-bottom: var(--space-64); }
.st .st-hero__title { margin-top: var(--space-28); font-family: var(--font-display); font-weight: 500; font-size: var(--text-fluid-80); line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; }
.st .st-hero__lede { margin-top: var(--space-40); font-size: var(--text-fluid-19); line-height: 1.6; color: var(--color-blue-100); max-width: 54ch; }
.st .st-hero__swap { margin-top: var(--space-28); font-family: var(--font-display); font-weight: 500; font-size: var(--text-26); letter-spacing: -0.02em; }
.st-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-36); }
.st-blue .gi-btn--secondary { color: var(--color-white); border-color: rgb(var(--color-white-rgb) / .6); }
.st-blue .gi-btn--secondary:hover { background: rgb(var(--color-white-rgb) / .1); }
.st-blue .gi-btn--primary { background: var(--color-white); color: var(--color-navy); border-color: var(--color-white); }

/* phrase swap with a highlighter sweep */
.st-swap { position: relative; display: inline-block; padding: 0 var(--space-6); white-space: nowrap; }
.st-swap::before { content: ""; position: absolute; inset: 8% 0 4%; background: rgb(var(--color-gold-rgb) / .9); border-radius: var(--radius-4); transform-origin: left; transform: scaleX(1); transition: transform var(--dur-600) var(--ease-out-quart); z-index: 0; }
.st-swap__text { position: relative; z-index: 1; color: var(--color-navy); display: inline-block; transition: opacity var(--dur-300) ease, filter var(--dur-300) ease, transform var(--dur-300) ease; }
.st-swap.is-out::before { transform: scaleX(0); transform-origin: right; transition-duration: var(--dur-350); }
.st-swap.is-out .st-swap__text { opacity: 0; filter: blur(var(--space-4)); transform: translateY(var(--space-6)); }

/* ── CHALLENGES: elsewhere vs here ── */
.st-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 30rem; }
.st-split__elsewhere, .st-split__here { position: relative; overflow: hidden; padding: var(--space-40); }
.st-split__title { position: relative; z-index: var(--z-2); font-family: var(--font-display); font-weight: 500; font-size: var(--text-36); letter-spacing: -0.03em; text-align: center; }
.st-split__here { background: var(--color-blue); color: var(--color-white); display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.st-wave { position: absolute; left: 0; right: 0; top: 50%; height: 40%; transform: translateY(-50%); display: flex; align-items: center; gap: var(--space-2); opacity: .9; }
.st-wave i { flex: 1; height: var(--h, 30%); background: radial-gradient(rgb(var(--color-blue-rgb) / .35) 1px, transparent 1.3px) center / var(--space-4) var(--space-4); animation: st-jitter var(--d, 1.4s) var(--ease-in-out-cubic) infinite alternate; transform-origin: center; }
@keyframes st-jitter { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.st-toasts { position: absolute; inset: var(--space-96) var(--space-24) var(--space-24); list-style: none; margin: 0; padding: 0; }
.st-toast { position: absolute; left: var(--x, 10%); top: var(--y, 20%); max-width: 17rem; display: flex; gap: var(--space-10); align-items: flex-start; padding: var(--space-12) var(--space-14); background: rgb(var(--color-white-rgb) / .94); border: 1px solid var(--rule); border-radius: var(--radius-8); font-size: var(--text-14); line-height: 1.4; color: var(--color-navy); box-shadow: var(--shadow-hairline); transform: rotate(var(--r, 0deg)); animation: st-toast-in var(--dur-500) var(--ease-out-quart) both; }
.st-toast b { flex: none; font-weight: 600; font-size: var(--text-12); letter-spacing: .04em; color: var(--color-white); background: var(--color-navy-soft); border-radius: var(--radius-4); padding: var(--space-2) var(--space-6); }
.st-toast.is-old { opacity: .38; filter: blur(.5px); transition: opacity var(--dur-600) ease, filter var(--dur-600) ease; }
@keyframes st-toast-in { from { opacity: 0; transform: translateY(var(--space-12)) rotate(var(--r, 0deg)) scale(.96); } }
.st-chipline { position: absolute; left: 0; right: 0; top: 58%; height: 1px; background: linear-gradient(to right, rgb(var(--color-white-rgb) / .45) 50%, transparent 0) 0 0 / var(--space-8) 1px; }
.st-chip { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-14) var(--space-20); background: rgb(var(--color-white-rgb) / .12); border: 1px solid rgb(var(--color-white-rgb) / .35); border-radius: var(--radius-8); font-size: var(--text-16); white-space: nowrap; -webkit-backdrop-filter: blur(var(--space-8)); backdrop-filter: blur(var(--space-8)); }
.st-chip__text { display: inline-block; transition: opacity var(--dur-300) ease, filter var(--dur-300) ease; }
.st-chip.is-out .st-chip__text { opacity: 0; filter: blur(var(--space-4)); }
.st-check { width: var(--space-16); height: var(--space-16); border-radius: var(--radius-round); background: var(--color-gold); position: relative; flex: none; }
.st-check::after { content: ""; position: absolute; left: 35%; top: 22%; width: 26%; height: 44%; border: solid var(--color-navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.st .st-row3 { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.st-row3 li { padding: var(--space-32); }
.st-row3 li + li { border-left: 1px solid var(--rule); }
.st-row3__n { font-size: var(--text-13); font-weight: 600; color: var(--color-blue); font-variant-numeric: tabular-nums; }
.st .st-row3 h3, .st .st-row2 h3, .st .st-track__cols h3, .st .st-panel__copy h3 { margin-top: var(--space-12); font-family: var(--font-display); font-weight: 600; font-size: var(--text-24); letter-spacing: -0.02em; }
.st .st-row3 p, .st .st-row2 p, .st .st-panel__copy p { margin-top: var(--space-8); font-size: var(--text-16); line-height: 1.55; color: var(--color-slate); }

/* ── HOW WE WORK: a problem travels the line ── */
.st-track { padding: var(--space-48) 0 0; }
.st-track__rail { position: relative; height: var(--space-96); }
.st-track__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgb(var(--color-white-rgb) / .45); }
.st-track__seg { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--color-white); transform-origin: left; transform: scaleX(0); transition: transform 80ms linear; }
.st-track__seg--1 { left: 16.666%; width: 33.333%; }
.st-track__seg--2 { left: 50%; width: 33.333%; background: var(--color-gold); }
.st-track__seg--1 { transform: scaleX(var(--seg1, 0)); }
.st-track__seg--2 { transform: scaleX(var(--seg2, 0)); }
.st-track__station { position: absolute; left: var(--at); top: 50%; width: var(--space-28); height: var(--space-28); margin: calc(var(--space-14) * -1) 0 0 calc(var(--space-14) * -1); border-radius: var(--radius-round); background: var(--color-blue); border: 2px solid rgb(var(--color-white-rgb) / .6); }
.st-track__runner { position: absolute; inset: 0; transform: translateX(calc(var(--x, 16.666) * 1%)); transition: transform 80ms linear; pointer-events: none; }
.st-track__token { position: absolute; left: 0; top: 50%; width: var(--space-16); height: var(--space-16); margin: calc(var(--space-8) * -1) 0 0 calc(var(--space-8) * -1); border-radius: var(--radius-round); background: var(--color-gold); box-shadow: 0 0 0 var(--space-6) rgb(var(--color-gold-rgb) / .25), 0 0 var(--space-28) rgb(var(--color-gold-rgb) / .7); }
.st-track__status { position: absolute; left: 0; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-14); font-weight: 500; padding: var(--space-6) var(--space-12); border: 1px solid rgb(var(--color-white-rgb) / .35); border-radius: var(--radius-pill); background: var(--color-blue); transition: opacity var(--dur-300) ease, filter var(--dur-300) ease; }
.st-track__status.is-out { opacity: 0; filter: blur(var(--space-4)); }
.st-track.is-reset .st-track__runner, .st-track.is-reset .st-track__seg { transition: none; }
.st .st-track__cols { list-style: none; margin: var(--space-32) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.st-track__cols li { padding: 0 var(--space-24); opacity: .68; transition: opacity var(--dur-500) ease; }
.st-track__cols li.is-on { opacity: 1; }
.st .st-track__cols p { margin: var(--space-8) auto 0; max-width: 30ch; font-size: var(--text-16); line-height: 1.55; color: var(--color-blue-100); }
.st-tag { display: inline-block; font-size: var(--text-13); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-blue-100); }
.st-tag--live { color: var(--color-gold-on-blue); } /* #FFDC94: 5:1 on blue; plain gold is only 3.9:1 */

/* ── AREAS: tabs that advance on their own ── */
.st-tabs__list { display: flex; justify-content: center; gap: var(--space-4); width: max-content; max-width: 100%; margin: 0 auto var(--space-24); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-pill); overflow-x: auto; scrollbar-width: none; }
.st-tabs__list button { flex: none; position: relative; overflow: hidden; min-height: var(--space-44); padding: 0 var(--space-20); border: 0; border-radius: var(--radius-pill); background: transparent; font: 500 var(--text-15) / 1 var(--font-body); color: var(--color-navy); cursor: pointer; white-space: nowrap; transition: background var(--dur-200) ease, color var(--dur-200) ease; }
.st-tabs__list button[aria-selected="true"] { background: var(--color-blue); color: var(--color-white); }
.st-tabs__bar { position: absolute; left: var(--space-20); right: var(--space-20); bottom: var(--space-8); height: 2px; border-radius: var(--radius-pill); background: rgb(var(--color-white-rgb) / .9); transform-origin: left; transform: scaleX(0); }
.st-tabs__list button[aria-selected="true"] .st-tabs__bar { animation: st-progress var(--tab-ms, 7000ms) linear forwards; }
.st-tabs.is-paused .st-tabs__bar { animation-play-state: paused; }
@keyframes st-progress { to { transform: scaleX(1); } }
@media (hover: hover) { .st-tabs__list button[aria-selected="false"]:hover { background: rgb(var(--color-blue-rgb) / .08); } }
.st-tabs__list button:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.st-tabs__panels { min-height: 24rem; }
.st-panel { display: grid; grid-template-columns: 2fr 3fr; align-items: center; gap: var(--space-40); padding: var(--space-48); }
.st-panel[hidden] { display: none; }
.st-panel.is-active { animation: st-panel-in var(--dur-500) var(--ease-out-quart); }
@keyframes st-panel-in { from { opacity: 0; transform: translateY(var(--space-8)); } }
.st-panel__copy .gi-link { margin-top: var(--space-16); }
.st .st-panel__copy h3 { margin-top: 0; font-size: var(--text-36); font-weight: 500; letter-spacing: -0.03em; }

/* diagrams share one drawing language */
.st-dia { width: 100%; height: auto; overflow: visible; }
.st-dia * { vector-effect: non-scaling-stroke; }
.st-dia__route { fill: none; stroke: var(--color-navy); stroke-width: 1.5; stroke-dasharray: 4 6; }
.st-dia__stop { fill: var(--color-white); stroke: var(--color-navy); stroke-width: 1.5; }
.st-dia__t { font: 500 var(--text-14) var(--font-body); fill: var(--color-slate); }
.st-dia__t--k { fill: var(--color-navy); font-weight: 600; }
.st-dia__box { fill: var(--color-white); stroke: var(--rule-strong); stroke-width: 1; }
.st-dia__ping { fill: none; stroke: var(--color-blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.is-active .st-dia__ping { animation: st-ping 6s var(--ease-out-quart) infinite; }
.is-active .st-dia__ping--2 { animation-delay: 2.1s; }
.is-active .st-dia__ping--3 { animation-delay: 3.9s; }
@keyframes st-ping { 0%, 10% { opacity: 0; transform: scale(1); } 14% { opacity: 1; } 34% { opacity: 0; transform: scale(3.2); } 100% { opacity: 0; } }
.st-dia__bus { fill: var(--color-gold); stroke: var(--color-navy); stroke-width: 2; offset-path: path("M40 220 H150 C190 220 190 90 230 90 H330 C370 90 370 170 410 170 H450"); offset-rotate: 0deg; }
.is-active .st-dia__bus { animation: st-ride 6s var(--ease-in-out-cubic) infinite; }
@keyframes st-ride { 0% { offset-distance: 0%; } 90%, 100% { offset-distance: 100%; } }
.st-dia__bar-bg { fill: var(--rule); }
.st-dia__bar { fill: var(--color-blue); transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.is-active .st-dia__bar { animation: st-fill 6s linear infinite; }
@keyframes st-fill { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
.st-dia__line { fill: var(--color-white); stroke: var(--rule-strong); }
.st-dia__tick { fill: var(--color-white); stroke: var(--rule-strong); }
.is-active .st-dia__row .st-dia__tick { animation: st-tick 6s var(--ease-out-quart) infinite; }
.is-active .st-dia__row--2 .st-dia__tick { animation-delay: 1.6s; }
.is-active .st-dia__row--3 .st-dia__tick { animation-delay: 3.2s; }
@keyframes st-tick { 0%, 14% { fill: var(--color-white); stroke: var(--rule-strong); } 20%, 92% { fill: var(--color-blue); stroke: var(--color-blue); } 100% { fill: var(--color-white); } }
.st-dia__field { fill: var(--color-white); stroke: var(--rule-strong); }
.st-dia__fill { fill: rgb(var(--color-blue-rgb) / .16); transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.is-active .st-dia__fill { animation: st-form 6s var(--ease-out-quart) infinite; }
.is-active .st-dia__fill--2 { animation-delay: .7s; }
.is-active .st-dia__fill--3 { animation-delay: 1.4s; }
@keyframes st-form { 0% { transform: scaleX(0); } 14%, 80% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
.st-dia__arrow { fill: none; stroke: var(--color-navy); stroke-width: 1.5; stroke-dasharray: 4 6; }
.st-dia__rec { fill: var(--color-white); stroke: var(--rule-strong); }
.st-dia__new { transform: translate(-60px, 0); opacity: 0; }
.is-active .st-dia__new { animation: st-file 6s var(--ease-out-quart) infinite; }
@keyframes st-file { 0%, 32% { opacity: 0; transform: translate(-60px, 0); } 44%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.st-dia__seal { fill: var(--color-gold); stroke: var(--color-navy); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.is-active .st-dia__seal { animation: st-seal 6s var(--ease-out-quart) infinite; }
@keyframes st-seal { 0%, 50% { transform: scale(0); } 58%, 100% { transform: scale(1); } }
.st-dia__border { stroke: var(--color-navy); stroke-width: 1; stroke-dasharray: 2 5; }
.st-dia__wire { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.st-dia__coin { fill: var(--color-gold); stroke: var(--color-navy); stroke-width: 1.5; opacity: 0; }
.is-active .st-dia__coin--a { animation: st-send-a 3.2s var(--ease-in-out-cubic) infinite; }
.is-active .st-dia__coin--b { animation: st-send-b 3.2s var(--ease-in-out-cubic) 1.6s infinite; }
@keyframes st-send-a { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 80% { opacity: 1; transform: translateX(120px); } 100% { opacity: 0; transform: translateX(120px); } }
@keyframes st-send-b { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 80% { opacity: 1; transform: translateX(-120px); } 100% { opacity: 0; transform: translateX(-120px); } }
.st-dia__route--flat { stroke-dasharray: none; stroke: var(--rule-strong); }
.st-dia__docbox { fill: var(--color-gold); stroke: var(--color-navy); stroke-width: 1.5; }
.st-dia__docline { stroke: var(--color-navy); stroke-width: 1.5; }
.st-dia__doc { transform: translate(60px, 110px); }
.is-active .st-dia__doc { animation: st-route3 6s var(--ease-in-out-cubic) infinite; }
@keyframes st-route3 { 0%, 8% { transform: translate(60px, 110px); } 30%, 50% { transform: translate(240px, 110px); } 72%, 92% { transform: translate(420px, 110px); } 100% { transform: translate(420px, 110px); opacity: 0; } }

/* ── WHO: real faces, real place ── */
.st-who__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-64); align-items: end; }
.st-who__copy p { font-size: var(--text-18); line-height: 1.6; color: var(--color-blue-100); }
.st-faces { position: relative; margin-block: var(--space-72); overflow: hidden; border-block: 1px solid var(--rule); }
.st-faces__track { display: flex; width: max-content; animation: st-marquee 70s linear infinite; }
.st-faces.is-paused .st-faces__track { animation-play-state: paused; }
@keyframes st-marquee { to { transform: translateX(-50%); } }
.st-face { position: relative; width: 11rem; aspect-ratio: 4 / 5; flex: none; background: var(--color-blue-deep); border-right: 1px solid var(--rule); }
.st-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; opacity: .85; transition: filter var(--dur-400) ease, opacity var(--dur-400) ease, mix-blend-mode var(--dur-400); }
@media (hover: hover) { .st-face:hover img { filter: none; mix-blend-mode: normal; opacity: 1; } }
.st-faces__pause { position: absolute; right: var(--space-16); bottom: var(--space-16); width: var(--space-44); height: var(--space-44); border-radius: var(--radius-round); border: 1px solid rgb(var(--color-white-rgb) / .5); background: rgb(var(--color-navy-rgb) / .6); cursor: pointer; display: grid; place-items: center; }
.st-faces__pause span { width: var(--space-10); height: var(--space-12); border-inline: 3px solid var(--color-white); }
.st-faces__pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: var(--space-10) solid var(--color-white); border-block: var(--space-6) solid transparent; margin-left: var(--space-2); }
.st .st-quote { display: grid; grid-template-columns: auto 1fr; gap: var(--space-40); align-items: start; margin: 0; }
.st-quote__mark { width: var(--space-96); height: auto; transform: rotate(-90deg) scale(.6); opacity: 0; transition: transform var(--dur-1600) var(--ease-out-quart), opacity var(--dur-800) ease; }
.st-quote.is-in .st-quote__mark { transform: none; opacity: 1; }
.st .st-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-fluid-62); line-height: 1.06; letter-spacing: -0.035em; max-width: 20ch; }
.st-quote figcaption { grid-column: 2; font-size: var(--text-16); color: var(--color-blue-100); }

/* ── WORK WITH US ── */
.st-row2 { display: grid; grid-template-columns: 1fr 1fr; }
.st-row2 > div { padding: var(--space-48); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.st-row2 > div + div { border-left: 1px solid var(--rule); }
.st-row2 .gi-btn, .st-row2 .gi-link { margin-top: var(--space-16); }

/* ── Mobile ── */
@media (max-width: 899px) {
  .st-section { padding-block: var(--space-96); }
  .st-guides::before, .st-guides::after { display: none; }
  .st-head { text-align: left; margin-inline: 0; margin-bottom: var(--space-40); }
  .st-split, .st .st-row3, .st-who__head, .st-panel { grid-template-columns: 1fr; }
  .st-split__elsewhere { min-height: 28rem; }
  .st-split__title { font-size: var(--text-28); }
  .st-toasts { top: var(--space-112); }
  .st-toast { max-width: 15rem; }
  .st-split__here { min-height: 18rem; }
  .st-chip { white-space: normal; width: max-content; max-width: 85%; }
  .st-row3 li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .st-panel { padding: var(--space-28); gap: var(--space-24); }
  .st-tabs__list { justify-content: flex-start; width: auto; border-radius: var(--radius-16); }
  .st-track__cols { grid-template-columns: 1fr; gap: var(--space-28); text-align: left; }
  .st-track__cols li { padding: 0; }
  .st-track__status { font-size: var(--text-13); }
  .st .st-quote { grid-template-columns: 1fr; gap: var(--space-24); }
  .st-quote figcaption { grid-column: 1; }
  .st-quote__mark { width: var(--space-56); }
}

/* ── Reduced motion: every story holds its final, readable state ── */
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .st-quote__mark { transform: none; opacity: 1; }
  .st-faces__track { overflow-x: auto; }
  .st-dia__bus { offset-distance: 100%; }
  .st-dia__bar, .st-dia__fill, .st-tabs__bar { transform: scaleX(1); }
  .st-dia__tick { fill: var(--color-blue); }
  .st-dia__new, .st-dia__coin { opacity: 1; transform: none; }
  .st-dia__seal { transform: scale(1); }
  .st-dia__doc { transform: translate(420px, 110px); }
}

/* Primary button on white grounds (preview only): a crisp 1px ring instead of the 6px pale halo,
   and a smaller, fainter inner light so it reads as light, not a smudge. Breathe loop is kept.
   Blue grounds (.gi-dark, #top) keep the shared site-chrome.css button. */
.st .st-white .gi-btn--primary { border-color: transparent; background-origin: border-box; box-shadow: 0 0 0 1px rgb(var(--color-blue-700-rgb) / .9), var(--shadow-hairline), inset 0 1px 0 rgb(var(--color-white-rgb) / .28); }
.st .st-white .gi-btn--primary::before { left: 22%; right: 22%; bottom: -62%; height: 80%; opacity: .45; }
.st .st-white .gi-btn--primary:hover { box-shadow: 0 0 0 1px rgb(var(--color-blue-700-rgb) / .9), 0 10px 24px -10px rgb(var(--color-blue-700-rgb) / .55), inset 0 1px 0 rgb(var(--color-white-rgb) / .34); }
.st .st-white .gi-btn--primary:hover::before { opacity: .7; }

/* ── HERO GLOBE (story mode, assets/js/hero-globe.js) ── */
/* Bigger than index.html, cropped by the hero's right and bottom edges, and it takes the pointer. */
.st-hero .st-globe { inset: 0 !important; width: auto !important; height: auto !important; pointer-events: auto; cursor: grab; touch-action: pan-y; z-index: var(--z-2); }
.st-hero .st-globe.is-grabbing { cursor: grabbing; }
.st-hero .st-globe.is-pin { cursor: pointer; }
.st-hero__inner { pointer-events: none; }
.st-hero__inner a, .st-hero__inner button, .st-hero__inner .h-hero-text { pointer-events: auto; }
.gl-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gl-callout, .gl-card { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-16); color: var(--color-white); font-size: var(--text-14); line-height: 1.4; white-space: nowrap; will-change: transform; }
.gl-callout { min-width: 13rem; border: 1px solid rgb(var(--color-gold-rgb) / .7); background: rgb(var(--color-navy-rgb) / .55); -webkit-backdrop-filter: blur(var(--space-6)); backdrop-filter: blur(var(--space-6)); opacity: 0; translate: 0 var(--space-6); transition: opacity var(--dur-400) var(--ease-out-quart), translate var(--dur-400) var(--ease-out-quart); }
.gl-callout.is-on { opacity: 1; translate: 0 0; }
.gl-callout .st-corner { background-color: var(--color-navy); border-color: var(--color-gold); }
.gl-callout strong, .gl-card strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-16); letter-spacing: -0.01em; }
.gl-callout span, .gl-card span { color: var(--color-blue-100); font-variant-numeric: tabular-nums; }
.gl-callout.is-waiting strong::after { content: ""; display: inline-block; width: var(--space-6); height: var(--space-6); margin-left: var(--space-8); border-radius: var(--radius-round); background: var(--color-blue-100); vertical-align: middle; animation: gl-wait var(--dur-1000) ease-in-out infinite; }
@keyframes gl-wait { 50% { opacity: .2; } }
.gl-card { border: 1px solid rgb(var(--color-white-rgb) / .35); border-radius: var(--radius-8); background: rgb(var(--color-navy-rgb) / .82); box-shadow: var(--shadow-float-lg); opacity: 0; transition: opacity var(--dur-200) ease; }
.gl-card.is-on { opacity: 1; }
.gl-card__clock { color: var(--color-gold) !important; }
@media (max-width: 899px) {
  .st-hero { display: flex; flex-direction: column; }
  .st-hero .gi-site-header { order: 0; }
  .st-hero__inner { order: 1; }
  .st-hero .st-globe { order: 2; position: relative; inset: auto !important; right: auto !important; top: auto !important; bottom: auto; width: 100% !important; height: auto !important; aspect-ratio: 1; margin: var(--space-24) 0 0; opacity: 1; cursor: default; }
}
/* while WebGL loads, the placeholder sphere sits exactly where the globe will draw (same maths as layout() in the globe source) */
@media (min-width: 900px) {
  html.gl-ok .st-hero .st-globe::before { --d: clamp(56rem, calc(100vw - 16rem), 84rem); inset: auto; left: calc(100vw - max(0px, (100vw - 1440px) / 2) - var(--d) * .524); top: calc(56px + var(--d) * .096); width: calc(var(--d) * .808); height: calc(var(--d) * .808); }
}


/* ── HERO TEXT: interactive ── */
/* headline: each word rises out of its own line box, staggered */
.st-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.st-w > span { display: inline-block; transform: translateY(105%); transition: transform var(--dur-900) var(--ease-out-quart); transition-delay: calc(var(--i) * 45ms + 120ms); }
.st-hero__title.is-in .st-w > span { transform: none; }

/* sector words link to their tab in the areas section: no underline, gold fill on hover */
.st-sector { color: var(--color-white); text-decoration: none; background-image: linear-gradient(var(--color-gold), var(--color-gold)); background-position: 0 100%; background-size: 100% 0; background-repeat: no-repeat; transition: background-size var(--dur-250) var(--ease-out-quart), color var(--dur-200) ease; }
@media (hover: hover) { .st-sector:hover { color: var(--color-navy); background-size: 100% 100%; } }
.st-sector:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius-2); }

/* the phrase is a button: hover pauses, click moves on */
.st-swap { border: 0; font: inherit; letter-spacing: inherit; cursor: pointer; background: none; color: inherit; }
.st-swap:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; border-radius: var(--radius-4); }

/* cursor spotlight on the dot texture */
.st-matrix--lit { background-image: radial-gradient(rgb(var(--color-white-rgb) / .7) 1px, transparent 1.3px); -webkit-mask-image: radial-gradient(circle 15rem at var(--mx, -999px) var(--my, -999px), black, transparent 70%); mask-image: radial-gradient(circle 15rem at var(--mx, -999px) var(--my, -999px), black, transparent 70%); }

/* buttons lean towards the cursor (translate is separate from the button's own transform) */
.st-hero .st-hero__ctas .gi-btn { transition: translate var(--dur-300) var(--ease-out-quart), transform .2s ease, box-shadow .25s ease, filter .25s ease, background-position .9s var(--ease-out-expo); }

/* drag hint: a dot slides along a short track; hidden after the first drag and on touch */
.st-globe-hint { position: absolute; right: var(--space-64); bottom: var(--space-40); z-index: var(--z-3); display: inline-flex; align-items: center; gap: var(--space-10); padding: var(--space-8) var(--space-14); border: 1px solid rgb(var(--color-white-rgb) / .3); border-radius: var(--radius-pill); background: rgb(var(--color-navy-rgb) / .5); -webkit-backdrop-filter: blur(var(--space-8)); backdrop-filter: blur(var(--space-8)); font-size: var(--text-13); font-weight: 500; color: var(--color-white); pointer-events: none; transition: opacity var(--dur-500) ease; }
.st-globe-hint__track { position: relative; width: var(--space-28); height: 2px; border-radius: var(--radius-pill); background: rgb(var(--color-white-rgb) / .35); }
.st-globe-hint__dot { position: absolute; top: 50%; left: 0; width: var(--space-8); height: var(--space-8); margin-top: calc(var(--space-4) * -1); border-radius: var(--radius-round); background: var(--color-gold); animation: st-hint 2.4s var(--ease-in-out-cubic) infinite; }
@keyframes st-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--space-20)); } }
.st-hero.has-dragged .st-globe-hint { opacity: 0; }
@media (hover: none), (pointer: coarse) { .st-globe-hint, .st-matrix--lit { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .st-w > span { transform: none; }
}

/* ── HOW WE WORK: pinned while you scroll; a live scene above each stage ── */
.st-scrolly { height: 300vh; padding-block: 0; }
.st-pin { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-64); overflow: hidden; }
.st-scrolly .st-head { margin-bottom: var(--space-32); }
.st-scene { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto var(--space-20); overflow: visible; transition: opacity var(--dur-500) ease; }
.st-track__cols li:not(.is-on) .st-scene { opacity: .55; }
/* research: pins drop onto a dotted map, notes fill in */
.st-scene__map circle { fill: rgb(var(--color-white-rgb) / .45); }
.st-scene__pin circle { fill: var(--color-gold); stroke: var(--color-navy); stroke-width: 2; }
.st-scene__pin { animation: st-pin-drop 4.8s var(--ease-out-quart) infinite; }
.st-scene__pin--2 { animation-delay: .8s; }
.st-scene__pin--3 { animation-delay: 1.6s; }
@keyframes st-pin-drop { 0% { opacity: 0; transform: translateY(-14px); } 10%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
.st-scene__card { fill: rgb(var(--color-navy-rgb) / .55); stroke: rgb(var(--color-white-rgb) / .4); }
.st-scene__line { fill: var(--color-blue-100); transform-box: fill-box; transform-origin: left; animation: st-write 4.8s var(--ease-out-quart) infinite; }
.st-scene__line--2 { animation-delay: .5s; }
.st-scene__line--3 { animation-delay: 1s; }
.st-scene__line--4 { animation-delay: 1.5s; }
@keyframes st-write { 0% { transform: scaleX(0); } 14%, 80% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
/* build: blocks slide in and snap into the phone */
.st-scene__phone { fill: rgb(var(--color-navy-rgb) / .55); stroke: var(--color-white); stroke-width: 2; }
.st-scene__notch { fill: rgb(var(--color-white-rgb) / .5); }
.st-scene__block { fill: var(--color-blue-100); animation: st-snap 4.8s var(--ease-out-quart) infinite; }
.st-scene__block--2 { animation-delay: .6s; fill: rgb(var(--color-white-rgb) / .75); }
.st-scene__block--3 { animation-delay: 1.2s; fill: var(--color-gold); }
@keyframes st-snap { 0% { opacity: 0; transform: translateX(60px); } 14% { opacity: 1; transform: translateX(-3px); } 18%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
/* operate: a steady heartbeat runs along the line, marked Running */
.st-scene__base { fill: none; stroke: rgb(var(--color-white-rgb) / .25); stroke-width: 1; }
.st-scene__beat { fill: none; stroke: var(--color-gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 90 400; animation: st-beat 2.4s linear infinite; }
@keyframes st-beat { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -400; } }
.st-scene__live { fill: var(--color-gold); transform-box: fill-box; transform-origin: center; animation: st-live 1.6s ease-in-out infinite; }
@keyframes st-live { 50% { opacity: .35; transform: scale(.7); } }
.st-scene__t { font: 600 var(--text-14) var(--font-body); fill: var(--color-white); }
@media (max-width: 899px) {
  .st-scrolly { height: 260vh; }
  .st-pin { padding-block: var(--space-40); }
  /* one stage at a time on phones, so the pinned view fits the screen */
  .st-scrolly .st-track__cols { display: grid; grid-template-columns: 1fr; text-align: center; }
  .st-scrolly .st-track__cols li { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-400) ease; }
  .st-scrolly .st-track__cols li.is-on { opacity: 1; }
  .st-scrolly .st-track__status { display: none; } /* the open stage below already names it */
}
@media (prefers-reduced-motion: reduce) {
  .st-scrolly { height: auto; }
  .st-pin { position: static; min-height: 0; padding-block: var(--space-120); }
}

/* ── REAL PEOPLE AND PRODUCTS ── */
/* challenge cards open with a photo of the condition they describe */
.st-row3__photo { display: block; width: calc(100% + var(--space-64)); max-width: none; height: auto; margin: calc(var(--space-32) * -1) calc(var(--space-32) * -1) var(--space-24); aspect-ratio: 4 / 3; object-fit: cover; }
/* areas: the product behind the sector is named under the copy */
.st .st-panel__product { margin-top: var(--space-12); font-size: var(--text-15); color: var(--color-slate); }
.st-panel__product strong { color: var(--color-navy); font-weight: 600; }
@media (max-width: 899px) {
  .st-row3__photo { width: calc(100% + var(--space-64)); }
}

/* ── INNER PAGES (about, products, team, contact, 404) ── */
/* page hero: same blue, texture and glow as the homepage, sized to its content */
.st-hero--page { min-height: 0; }
.st-hero--page > .st-hero__inner { margin-bottom: 0; padding-top: var(--space-96); padding-bottom: var(--space-120); }
.st-hero--page .st-hero__title { font-size: var(--text-fluid-62); max-width: 18ch; }
.st-head--left { text-align: left; margin: 0 0 var(--space-28); max-width: none; }
.st-head--spaced { margin-top: var(--space-96); }
.st-head__ctas { justify-content: center; }
/* products: one framed row per product, copy left, real screen or mechanism diagram right */
.st-prods { display: grid; gap: var(--space-40); }
.st-prod { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-48); align-items: center; padding: var(--space-48); scroll-margin-top: var(--space-24); }
.st-prod__sector { font-size: var(--text-13); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-blue); }
.st .st-prod h2 { margin-top: var(--space-12); font-family: var(--font-display); font-weight: 500; font-size: var(--text-36); letter-spacing: -0.03em; }
.st .st-prod__copy > p:last-child { margin-top: var(--space-12); font-size: var(--text-17); line-height: 1.6; color: var(--color-slate); max-width: 40ch; }
.st-prod__visual { min-width: 0; }
.st-prod__dia .st-dia { max-width: 30rem; margin-inline: auto; }
.st-shot { margin: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-10); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-hairline); }
.st-shot__bar { display: flex; align-items: center; gap: var(--space-6); height: var(--space-32); padding: 0 var(--space-12); border-bottom: 1px solid var(--rule); background: var(--color-ice); }
.st-shot__bar i { width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: rgb(var(--color-navy-rgb) / .18); }
.st-shot__bar span { margin-left: var(--space-8); font-size: var(--text-13); font-weight: 600; color: var(--color-slate); }
.st-shot img { display: block; width: 100%; height: auto; }
/* team: photo, name, role, LinkedIn when there is one */
.st .st-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-40) var(--space-24); }
.st-person__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-8); background: var(--color-ice); }
.st-person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.st-person__initials { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 600; font-size: var(--text-36); color: var(--color-blue); }
.st .st-person h3 { margin-top: var(--space-16); font-family: var(--font-display); font-weight: 600; font-size: var(--text-18); letter-spacing: -0.01em; }
.st .st-person p { margin-top: var(--space-4); font-size: var(--text-15); color: var(--color-slate); }
.st-person__link { display: inline-flex; align-items: center; min-height: var(--space-44); font-size: var(--text-15); font-weight: 600; color: var(--color-blue); text-decoration: none; }
@media (hover: hover) { .st-person__link:hover { text-decoration: underline; } }
/* about */
.st-about { max-width: 52rem; }
.st .st-about__lead { font-family: var(--font-display); font-weight: 500; font-size: var(--text-fluid-2p4r); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-navy); }
.st .st-about__coords { margin-top: var(--space-24); font-size: var(--text-15); color: var(--color-slate); font-variant-numeric: tabular-nums; }
.st-row3--onblue li + li { border-left-color: var(--rule); }
.st-row3--onblue p { color: var(--color-blue-100) !important; }
.st-areas-list { list-style: none; margin: 0; padding: 0; }
.st-areas-list li + li { border-top: 1px solid var(--rule); }
.st-areas-list a { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-24); align-items: baseline; padding: var(--space-24) var(--space-32); color: var(--color-navy); text-decoration: none; transition: background var(--dur-200) ease; }
.st-areas-list a span:first-child { font-family: var(--font-display); font-weight: 500; font-size: var(--text-24); letter-spacing: -0.02em; }
.st-areas-list a span:last-child { color: var(--color-slate); }
@media (hover: hover) { .st-areas-list a:hover { background: var(--color-ice); } }
.st-about__ctas { margin-top: var(--space-48); }
/* contact */
.st .st-contact__big { font-family: var(--font-display); font-weight: 500; font-size: var(--text-fluid-2p4r); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.st-contact__big a { color: var(--color-blue); text-decoration: none; }
@media (hover: hover) { .st-contact__big a:hover { text-decoration: underline; } }
.st-contact__more { margin-top: var(--space-24); }
@media (max-width: 899px) {
  .st-hero--page > .st-hero__inner { padding-top: var(--space-48); padding-bottom: var(--space-72); }
  .st-prod { grid-template-columns: 1fr; padding: var(--space-28); gap: var(--space-28); }
  .st-areas-list a { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-20); }
  .st .st-people { grid-template-columns: repeat(2, 1fr); gap: var(--space-28) var(--space-16); }
}
.st .st-blue .st-sub { color: var(--color-blue-100); }

/* ── FOOTER SKYLINE: African landmarks in three depths (assets/story/skyline.svg, injected by story.js) ── */
.st-skyline { position: relative; z-index: 1; margin-top: var(--space-8); line-height: 0;
  --sky-back: rgb(var(--color-white-rgb) / .10); --sky-back-hi: rgb(var(--color-white-rgb) / .2);
  --sky-face: var(--color-blue-light); --sky-mid: var(--color-blue-700); --sky-deep: var(--color-globe-core); --sky-ground: var(--color-blue-deep);
  --sky-line: rgb(var(--color-blue-200-rgb) / .75); --sky-dim: rgb(var(--color-white-rgb) / .16); --sky-dot: rgb(var(--color-blue-200-rgb) / .85);
  --sky-star: var(--color-gold); }
.st-skyline svg { display: block; width: 100%; height: clamp(9rem, 21vw, 24rem); }
.st-skyline .f-back { fill: var(--sky-back); } .st-skyline .f-back-hi { fill: var(--sky-back-hi); }
.st-skyline .f-face { fill: var(--sky-face); } .st-skyline .f-mid { fill: var(--sky-mid); } .st-skyline .f-deep { fill: var(--sky-deep); }
.st-skyline .f-ground { fill: var(--sky-ground); } .st-skyline .f-dot { fill: var(--sky-dot); } .st-skyline .f-star { fill: var(--sky-star); }
.st-skyline .s-line { stroke: var(--sky-line); } .st-skyline .s-dim { stroke: var(--sky-dim); } .st-skyline .s-back-hi { stroke: var(--sky-back-hi); }
.st-skyline .s-mid { stroke: var(--sky-mid); } .st-skyline .s-ground { stroke: var(--sky-ground); }
/* the old corona needed the footer to be 40vh tall; the skyline does not */
.st .bespoke-footer .footer-content { min-height: 0; }
/* white primary button on blue sections: site-chrome's .gi-dark hover swaps in a dark gradient, which hid the navy text.
   Keep it white on hover too (the hero, #top, keeps its own dark pill). */
.st .st-blue .gi-btn--primary:hover { background-image: none; background-color: var(--color-ice); border-color: var(--color-white); color: var(--color-navy); }
.st .st-blue .gi-btn--secondary:hover { color: var(--color-white); border-color: var(--color-white); }
/* outlines stay thin at any footer width: 1px on screen, finer for the dim inner lines */
.st-skyline .s-line, .st-skyline .s-back-hi, .st-skyline .s-ground { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.st-skyline .s-dim { stroke-width: .75px; vector-effect: non-scaling-stroke; }

/* ── TEAM PAGE (team.html) ── */
/* faces share one navy duotone so different photo backgrounds read as one set (same treatment as the homepage .st-faces) */
/* 1. the map sits in the hero, drawn like the homepage globe (deep blue, fine white dots, hairline edge).
      It is enlarged and cropped hard: by the header's bottom line, the hero's bottom and its right side. */
.st-hero--page.tm-hero { min-height: 40rem; }
.tm-hero > .st-hero__inner { position: relative; z-index: var(--z-2); margin-block: auto; padding-top: var(--space-64); padding-bottom: var(--space-64); }
.st .tm-hero .st-hero__lede { max-width: 40ch; }
.tm-map-crop { position: absolute; top: var(--gi-header-h); right: 0; bottom: 0; left: 45%; overflow: hidden; pointer-events: none; }
.tm-map { position: absolute; margin: 0; right: 6%; bottom: -5rem; height: 60rem; }
.tm-map__svg { display: block; height: 100%; width: auto; overflow: visible; }
.tm-map__ghana { fill: var(--color-blue-deep); fill-opacity: .55; stroke: rgb(var(--color-white-rgb) / .3); stroke-width: 1.5; }
.tm-map__dot { fill: rgb(var(--color-white-rgb) / .38); }
.tm-map__pin { fill: var(--color-gold); stroke: var(--color-navy); stroke-width: 2.5; }
.tm-map__pulse { fill: none; stroke: var(--color-gold); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: tm-pulse 2.4s var(--ease-out-quart) infinite; }
@keyframes tm-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.tm-map__label { font: 600 var(--text-18) var(--font-body); fill: var(--color-white); }
@media (max-width: 899px) {
  /* phones: the whole country, below the text, nothing cropped */
  .st-hero--page.tm-hero { min-height: 0; }
  .tm-hero > .st-hero__inner { margin-block: 0; padding-top: var(--space-40); padding-bottom: var(--space-24); }
  .tm-map-crop { order: 2; position: relative; inset: auto; overflow: visible; padding: 0 var(--space-16) var(--space-48); }
  .tm-map-crop { display: flex; justify-content: center; }
  .tm-map { position: relative; right: auto; bottom: auto; height: 24rem; margin: 0; }
  /* the svg is drawn about 0.37x here, so the label is set larger in svg units to land near 15px */
  .tm-map__label { font-size: calc(var(--text-36) + var(--space-4)); }
}
/* 2. grouped by discipline: one hairline frame per group */
.tm-groups { display: grid; gap: var(--space-48); }
.tm-group { padding: var(--space-40); }
.tm-group__head { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--space-8) var(--space-24); padding-bottom: var(--space-24); margin-bottom: var(--space-28); border-bottom: 1px solid var(--rule); }
.st .tm-group__head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-36); letter-spacing: -0.03em; }
.st .tm-group__count { font-size: var(--text-15); font-weight: 600; color: var(--color-blue); font-variant-numeric: tabular-nums; }
.st .tm-group__desc { justify-self: end; font-size: var(--text-16); color: var(--color-slate); }
.tm-group--lead .tm-group__head { border-bottom-color: var(--color-gold); }

/* 3. duotone faces edge to edge, hover or focus reveals colour and the name */
.st .tm-faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.tm-face { position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); outline: none; }
.tm-face__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-blue-deep); }
.tm-face__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 20%); filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; opacity: .9; transition: filter var(--dur-400) ease, opacity var(--dur-400) ease; }
.tm-face__ini { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 600; font-size: var(--text-36); color: var(--color-blue-100); }
.tm-face__cap { padding: var(--space-14) var(--space-16) var(--space-16); }
.st .tm-face h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-17); letter-spacing: -0.01em; color: var(--color-navy); }
.st .tm-face p { margin-top: var(--space-4); font-size: var(--text-14); color: var(--color-slate); }
.tm-face__link { display: inline-flex; align-items: center; min-height: var(--space-44); font-size: var(--text-14); font-weight: 600; color: var(--color-blue); text-decoration: none; }
.tm-face:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; z-index: 1; }
.tm-face__link:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .tm-face__cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgb(var(--color-navy-rgb) / .9); transform: translateY(100%); opacity: 0; transition: transform var(--dur-300) var(--ease-out-quart), opacity var(--dur-200) ease; }
  .st .tm-face__cap h3, .tm-face__link { color: var(--color-white); }
  .st .tm-face__cap p { color: var(--color-blue-100); }
  .tm-face__media { overflow: hidden; }
  .tm-face:hover .tm-face__cap, .tm-face:focus-within .tm-face__cap { transform: none; opacity: 1; }
  .tm-face:hover img, .tm-face:focus-within img { filter: none; mix-blend-mode: normal; opacity: 1; }
  .tm-face { overflow: hidden; }
}
.js .tm-face[data-reveal] { transition-delay: calc(var(--d) * 50ms); }
@media (max-width: 899px) {
  .tm-group { padding: var(--space-20); }
  .tm-group__head { grid-template-columns: 1fr; gap: var(--space-6); }
  .st .tm-group__head h2 { font-size: var(--text-28); line-height: 1.15; }
  .st .tm-group__desc { grid-column: 1 / -1; justify-self: start; }
  .st .tm-faces, .st .tm-faces--board { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-map__pulse { display: none; }
}

/* ── MOBILE PASS ─────────────────────────────────────────────────────────────
   Small-screen fixes for every page. Desktop (900px and up) is unchanged except
   where a rule says so; 899px is the same switch the header uses. */

/* AREAS · the panels share one grid cell, so the tallest sets the height and the content below
   stops jumping each time a tab advances (on desktop every panel is already the same height) */
.st-tabs__panels { display: grid; }
.st-panel { grid-area: 1 / 1; }
.st-panel[hidden] { display: grid; visibility: hidden; }

/* TEAM · equal columns: one long name can no longer widen its column (desktop columns are already equal) */
.st .tm-faces { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }

/* HOME HERO · tablet landscape: the intro stops before the globe and the Ghana pin */
@media (min-width: 900px) and (max-width: 1279px) {
  .st .st-hero:not(.st-hero--page) .st-hero__lede { max-width: 40ch; }
}

/* TEAM · seven engineering faces in one row are too narrow under 1200px: four per row */
@media (min-width: 900px) and (max-width: 1199px) {
  .st .tm-faces--engineering { grid-template-columns: repeat(4, minmax(0, 1fr)); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .st .tm-faces--engineering > .tm-face:nth-child(4n) { border-right: 0; }
  .st .tm-faces--engineering > .tm-face:nth-child(4n+1):nth-last-child(-n+4),
  .st .tm-faces--engineering > .tm-face:nth-child(4n+1):nth-last-child(-n+4) ~ .tm-face { border-bottom: 0; }
}

@media (max-width: 899px) {
  /* HOME HERO · the globe is capped so it never grows taller than the screen on tablets and landscape phones */
  .st-hero .st-globe { width: min(100%, 32rem, calc(100svh - var(--gi-header-h))) !important; margin: var(--space-24) auto 0; }

  /* HOW WE WORK · the pinned view starts below the fixed header */
  .st-pin { padding-top: calc(var(--gi-header-h) + var(--space-16)); }

  /* CHALLENGES · more room inside the two panels, toasts start below the heading and stay inside the panel */
  .st-split__elsewhere, .st-split__here { padding: var(--space-24); }
  .st-split__here { min-height: 22rem; }
  .st-toasts { top: var(--space-120); }
  .st-toast { width: min(15rem, 100%); left: min(var(--x), calc(100% - 15rem)); }


  /* WORK WITH US / CONTACT · cards use the same padding as the area panels */
  .st-row2 > div { padding: var(--space-28); }
  .st .st-contact__big { font-size: var(--text-24); }

  /* inner pages · the CTA under a left-aligned heading lines up with it */
  .st-head__ctas { justify-content: flex-start; }

  /* PRODUCTS · product names get heading line height, not body */
  .st .st-prod h2 { line-height: 1.1; text-wrap: balance; }

  /* TEAM · three faces per row from 600px; two below. The frame is closed on the list itself,
     so a short last row ends in a clean empty cell instead of a broken hairline grid */
  .st .tm-faces, .st .tm-faces--board { grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .st .tm-face h3 { line-height: 1.25; }
}
@media (max-width: 599px) {
  .st .tm-faces > .tm-face:nth-child(2n) { border-right: 0; }
  .st .tm-faces > .tm-face:nth-child(2n+1):nth-last-child(-n+2),
  .st .tm-faces > .tm-face:nth-child(2n+1):nth-last-child(-n+2) ~ .tm-face { border-bottom: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .st .tm-faces, .st .tm-faces--board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st .tm-faces > .tm-face:nth-child(3n) { border-right: 0; }
  .st .tm-faces > .tm-face:nth-child(3n+1):nth-last-child(-n+3),
  .st .tm-faces > .tm-face:nth-child(3n+1):nth-last-child(-n+3) ~ .tm-face { border-bottom: 0; }
}
@media (max-width: 480px) {
  /* the longest single name ("Ashiangmor") fits the caption at 320px */
  .tm-face__cap { padding-inline: var(--space-12); }
}
/* touch at desktop widths (tablet landscape): captions sit under the photo, so names get heading line height there too */
@media (pointer: coarse) {
  .st .tm-face h3 { line-height: 1.25; }
}

/* phones · diagrams: the drawing runs to the card edges and its labels are set larger in drawing units:
   20.8 units is the largest size that keeps every label inside its box (measured), 14.1px on screen at 360px,
   15.3px at 390px (12.4px on 320px screens: a known deviation in DESIGN_SYSTEM.md). Labels under a stop or inside a box are centred on it (--dx in the markup),
   so the larger text stays inside its box. Desktop and tablets draw them at the original size and position. */
@media (max-width: 599px) {
  .st-panel .st-dia, .st-prod__dia .st-dia { width: calc(100% + var(--space-28) * 2); max-width: none; margin-inline: calc(var(--space-28) * -1); }
  .st-dia__t { font-size: var(--text-1p3r); }
  .st-dia__t--mid { text-anchor: middle; transform: translateX(calc(var(--dx) * 1px)); }
}

/* phones · the phrase swap sits on its own line, so the hero no longer reflows by a line every 3 seconds */
@media (max-width: 599px) {
  .st .st-hero__swap .st-swap { display: block; width: max-content; min-height: var(--space-44); }
  .st-row2 { grid-template-columns: 1fr; }
  .st-row2 > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}

/* HOW WE WORK · short screens (landscape phones) and reduced motion: the stages stack in normal flow
   instead of pinning, because the pinned view would not fit or the three would draw on top of each other */
@media (max-width: 899px) and (max-height: 700px), (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .st-scrolly { height: auto; }
  .st-pin { position: static; min-height: 0; padding-block: var(--space-96); }
  .st-scrolly .st-track__cols { gap: var(--space-40); }
  .st-scrolly .st-track__cols li { grid-area: auto; opacity: 1; }
  /* stacked, every stage is already shown, so the travelling rail above them would only repeat it */
  .st-scrolly .st-track__rail { display: none; }
}

/* PRODUCTS + AREAS · landscape phones: copy and visual side by side again, so the visual fits the screen.
   The diagrams then draw at about 0.9x, so their labels go up to 16 units (14.5px on screen).
   The home hero heading steps down so the intro and buttons reach the first screen.
   From 600px only: smaller landscape phones keep the stacked phone layout. */
@media (min-width: 600px) and (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .st-prod, .st-panel { grid-template-columns: 2fr 3fr; }
  .st-dia__t { font-size: var(--text-16); }
  .st .st-hero:not(.st-hero--page) .st-hero__title { font-size: var(--text-36); max-width: 24ch; }
}

/* touch · 44px targets that would shift the desktop layout for mouse users */
@media (pointer: coarse) {
  .st-contact__big a { display: inline-block; min-height: var(--space-44); }
  .st .st-swap { min-height: var(--space-44); }
}

/* very narrow phones: the email stays on one line */
@media (max-width: 359px) { .st .st-contact__big { font-size: var(--text-1p3r); } }

/* phones and tablets · card and panel headings that wrap get heading line height, not body */
@media (max-width: 899px) {
  .st .st-row3 h3, .st .st-row2 h3, .st .st-panel__copy h3 { line-height: 1.15; }
}
/* 320px phones: the challenge panel is tall enough for the lowest toast (toast positions are % of the panel) */
@media (max-width: 359px) { .st-split__elsewhere { min-height: 35rem; } }