/* =====================================================================
   THINKHUMAN — Company Profile 2026 · interactive presentation
   Design system + scene compositions
   ===================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #070808;
  --char: #0E0F0F;
  --char-2: #161818;
  --paper: #EEEBE6;
  --paper-2: #E6E3DD;
  --white: #F4F2EE;
  --cyan: #00CFD4;
  --cyan-hi: #3FE6EA;
  --orange: #FF4800;

  --f-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-geo: "Jost", "Futura PT", Futura, "Century Gothic", sans-serif;
  --f-serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-ui: .2s;

  /* 1u = 1% of the largest 16:9 stage that fits the viewport */
  --u: min(1vw, 1.7778vh);
  --px: max(22px, calc(var(--u) * 4.2));
  --top: max(70px, calc(var(--u) * 6.2));
  --bot: max(74px, calc(var(--u) * 6.2));

  --fs-micro: max(10px, calc(var(--u) * .7));
  --fs-small: max(12px, calc(var(--u) * .9));
  --fs-body: max(15px, calc(var(--u) * 1.3));
  --fs-lead: max(17px, calc(var(--u) * 1.75));
  --dir: 1;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; text-transform: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
strong { font-weight: 700; }
em { font-style: italic; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--white); color: var(--ink); font-size: 14px; transition: top .2s; }
.skip-link:focus { top: 12px; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: 18px; z-index: 200; }

/* film grain (static, subtle) */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .085; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------- chrome */
.chrome { position: fixed; left: 0; right: 0; z-index: 30; color: var(--white); transition: color .5s ease; pointer-events: none; }
.chrome > * { pointer-events: auto; }
body[data-theme="light"] .chrome { color: #121313; }
@media (min-width: 861px) and (min-aspect-ratio: 1/1) {
  body[data-split="true"] .top-actions, body[data-split="true"] .nav-buttons { color: var(--white); }
  body[data-split="true"] .nav-btn:hover:not(:disabled) { background: var(--white); color: var(--ink); border-color: var(--white); }
}

.chrome-top {
  top: 0; height: var(--top);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--px);
  padding-top: env(safe-area-inset-top);
}
.brand { justify-self: start; display: inline-flex; align-items: center; height: 40px; opacity: .95; transition: opacity var(--t-ui); }
.brand:hover { opacity: 1; }
.brand .wordmark { height: max(14px, calc(var(--u) * 1.15)); width: auto; fill: currentColor; }
body[data-scene="cover"] .brand { opacity: 0; pointer-events: none; }

.chapter-label { justify-self: center; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; display: flex; gap: 1.1em; opacity: .7; white-space: nowrap; }
.chapter-label .ch-num { opacity: .6; }

.top-actions { justify-self: end; display: flex; align-items: center; gap: max(6px, calc(var(--u) * .5)); }
.counter { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .14em; display: flex; gap: .5em; margin-right: max(8px, calc(var(--u) * .8)); opacity: .8; }
.counter b { font-weight: 400; opacity: 1; }
.counter span { opacity: .55; }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background var(--t-ui), transform var(--t-ui); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(127, 127, 127, .16); }
.icon-btn:active { transform: scale(.94); }
#btnFs .fs-off { display: none; }
body.is-fs #btnFs .fs-on { display: none; }
body.is-fs #btnFs .fs-off { display: block; }

.chrome-bottom {
  bottom: 0; height: var(--bot);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: max(14px, calc(var(--u) * 2));
  padding: 0 var(--px);
  padding-bottom: env(safe-area-inset-bottom);
}
.progress { display: flex; gap: 5px; align-items: center; max-width: 520px; width: 100%; }
.pg-seg { position: relative; height: 26px; min-width: 10px; display: flex; align-items: center; }
.pg-track { position: relative; display: block; width: 100%; height: 2px; background: currentColor; opacity: .22; overflow: hidden; transition: opacity var(--t-ui); }
.pg-seg.is-current .pg-track, .pg-seg:hover .pg-track { opacity: .38; }
.pg-fill { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.pg-seg .pg-track { opacity: 1; background: rgba(127, 127, 127, .35); }
.pg-seg .pg-fill { background: currentColor; }
.pg-tip { position: absolute; bottom: 100%; left: 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity var(--t-ui), transform var(--t-ui); pointer-events: none; }
.pg-seg:hover .pg-tip, .pg-seg:focus-visible .pg-tip { opacity: .85; transform: none; }

.nav-hint { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; opacity: .55; transition: opacity .6s; white-space: nowrap; }
body.has-moved .nav-hint { opacity: 0; }

.nav-buttons { display: flex; gap: 8px; }
.nav-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid currentColor; border-color: rgba(127, 127, 127, .45); transition: background var(--t-ui), color var(--t-ui), transform var(--t-ui), opacity var(--t-ui), border-color var(--t-ui); }
.nav-btn { background: rgba(8, 9, 9, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body[data-theme="light"] .nav-btn { background: rgba(255, 255, 255, .45); }
@media (min-width: 861px) and (min-aspect-ratio: 1/1) { body[data-split="true"] .nav-btn { background: rgba(8, 9, 9, .32); } }
.nav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn:hover:not(:disabled) { background: var(--white); color: var(--ink); border-color: var(--white); }
body[data-theme="light"] .nav-btn:hover:not(:disabled) { background: #121313; color: var(--paper); border-color: #121313; }
.nav-btn:active:not(:disabled) { transform: scale(.94); }
.nav-btn:disabled { opacity: .25; }

/* ---------------------------------------------------------------- deck + scenes */
.deck { position: fixed; inset: 0; overflow: hidden; background: var(--ink); outline: none; }
.scene {
  --sbg: var(--ink); --fg: var(--white); --dim: rgba(244, 242, 238, .64); --faint: rgba(244, 242, 238, .38); --rule: rgba(244, 242, 238, .2);
  position: absolute; inset: 0; overflow: hidden;
  background: var(--sbg); color: var(--fg);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .55s, transform .7s var(--ease);
}
.scene[data-theme="light"] { --sbg: var(--paper); --fg: #111212; --dim: rgba(17, 18, 18, .66); --faint: rgba(17, 18, 18, .4); --rule: rgba(17, 18, 18, .2); }
.scene.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .55s ease .06s, visibility 0s, transform .7s var(--ease); }
.scene.is-leaving { z-index: 1; transform: translate3d(calc(var(--dir) * -1.2%), 0, 0) scale(.992); }
.s-inner { position: relative; height: 100%; padding: var(--top) var(--px) var(--bot); z-index: 2; }

/* ---------------------------------------------------------------- reveal system */
.rv { opacity: 0; transform: translate3d(0, calc(var(--u) * 1.2), 0); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv { opacity: 1; transform: none; }
.rv-fade { opacity: 0; transition: opacity 1s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-fade { opacity: 1; }
.line { display: block; overflow: hidden; padding: .04em 0 .21em; margin: -.04em 0 -.21em; }
.line > span { display: inline-block; transform: translate3d(0, 112%, 0); transition: transform .72s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .line > span { transform: none; }
.ltr { display: inline-block; opacity: 0; transform: translate3d(0, .4em, 0); filter: blur(5px); transition: opacity .55s var(--ease), transform .7s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .ltr { opacity: 1; transform: none; filter: blur(0); }

.img-reveal { position: relative; overflow: hidden; width: 100%; height: 100%; }
.img-reveal img { width: 100%; height: 100%; object-fit: cover; }
img { opacity: 0; transition: opacity .5s ease; }
img.is-loaded { opacity: 1; }

.rv-zoom { opacity: 0; transition: opacity 1.1s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.rv-zoom img { transform: scale(1.07); transition: transform 1.8s var(--ease), opacity .5s; transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-zoom { opacity: 1; }
.is-in .rv-zoom img { transform: none; }

.rv-open { clip-path: inset(0 50% 0 50%); transition: clip-path 1s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-open { clip-path: inset(0 0 0 0); }

.rv-wipe-l { clip-path: inset(0 0 0 100%); transition: clip-path .95s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.rv-wipe-l img { transform: scale(1.06) translateX(3%); transition: transform 1.6s var(--ease), opacity .5s; transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-wipe-l { clip-path: inset(0 0 0 0); }
.is-in .rv-wipe-l img { transform: none; }

.rv-rise { clip-path: inset(100% 0 0 0); transition: clip-path .95s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.rv-rise img { transform: translate3d(0, 6%, 0) scale(1.04); transition: transform 1.5s var(--ease), opacity .5s; transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-rise { clip-path: inset(0 0 0 0); }
.is-in .rv-rise img { transform: none; }

.rv-settle img { transform: scale(1.07) translate3d(-1.2%, 1%, 0); transition: transform 2.2s var(--ease), opacity .8s; }
.is-in .rv-settle img { transform: none; }

.rv-door { clip-path: inset(0 0 0 100%); transition: clip-path 1.2s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.rv-door img { filter: brightness(.25); transition: filter 1.8s ease, opacity .5s; transition-delay: calc(var(--d, 0) * 1ms + 300ms); }
.is-in .rv-door { clip-path: inset(0 0 0 0); }
.is-in .rv-door img { filter: none; }

.rv-grow-y { transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-grow-y { transform: none; }

/* finish build instantly when the viewer clicks during the intro */
.is-done .rv, .is-done .rv-fade, .is-done .line > span, .is-done .ltr, .is-done [class*="rv-"], .is-done [class*="rv-"] img,
.is-done [style*="--d"] { transition-delay: 0s !important; transition-duration: .25s !important; }

/* ---------------------------------------------------------------- shared atoms */
.dash { display: block; width: max(22px, calc(var(--u) * 2.2)); height: 2px; background: currentColor; }
.dash-orange { background: var(--orange); }
.dash-cyan { background: var(--cyan); }
.slashes { color: var(--cyan); font-family: var(--f-sans); font-style: italic; font-weight: 700; letter-spacing: -.04em; margin-right: .2em; }
.code { font-family: var(--f-mono); font-style: normal; }
.rule { display: block; height: 1px; background: var(--rule); }
.mono-list { font-family: var(--f-mono); font-weight: 300; font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; line-height: 1.95; color: var(--dim); }
.mono-list.spaced { font-family: var(--f-geo); font-weight: 400; letter-spacing: .42em; }
.mono-list.inline { display: inline-block; vertical-align: top; }
.spaced-label { font-family: var(--f-geo); font-weight: 400; font-size: max(12px, calc(var(--u) * 1.05)); letter-spacing: .56em; text-transform: uppercase; }
.dot-orange { color: var(--orange); font-style: normal; }
.dot-cyan { color: var(--cyan); font-style: normal; }
.hint { display: inline-flex; align-items: center; gap: .8em; margin-top: max(14px, calc(var(--u) * 1.6)); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.hint-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); position: relative; }
.hint-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--cyan); opacity: 0; }
.is-in .hint-dot::after { animation: ping 1.6s var(--ease) 1.4s 2; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 40px; min-width: 40px; padding: 0 .9em;
  border: 1px solid var(--rule); border-radius: 999px; color: var(--fg);
  font-family: var(--f-geo); font-weight: 500; font-size: max(11px, calc(var(--u) * .78)); letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform var(--t-ui);
}
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip:hover { border-color: var(--fg); }
.chip:active { transform: scale(.96); }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--fg); color: var(--sbg); border-color: var(--fg); }
.chip sup { font-family: var(--f-mono); font-size: .78em; letter-spacing: .04em; opacity: .6; vertical-align: super; line-height: 0; }

/* planet / horizon arcs (rebuilt in CSS from the source backgrounds) */
.planet {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, #050505 90%, #0c0c0c 97%, #161616 100%);
  box-shadow: inset var(--rx, 0) var(--ry, 0) var(--rb, 30px) var(--rs, -18px) rgba(255, 255, 255, var(--ra, .5)), 0 0 var(--gb, 80px) var(--gs, 0) rgba(255, 255, 255, var(--ga, .06));
}

/* =====================================================================
   SCENES
   ===================================================================== */

/* 01 · cover -------------------------------------------------------- */
.sc-cover { --sbg: #040405; background: radial-gradient(90% 90% at 72% 40%, #111113 0%, #040405 60%); }
.cover-planet { width: calc(var(--u) * 34); aspect-ratio: 1; left: calc(var(--u) * -24); top: 16%; --rx: calc(var(--u) * -.9); --ry: calc(var(--u) * -.3); --rb: calc(var(--u) * 2.4); --rs: calc(var(--u) * -1.4); --ra: .28; }
.cover-astro { position: absolute; right: 9%; top: auto; bottom: 0; height: 93%; aspect-ratio: 900 / 941; max-width: 60%; z-index: 1; will-change: transform; transition: transform .6s var(--ease); }
.cover-astro .img-reveal { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 90%, transparent 100%), linear-gradient(0deg, transparent 0, #000 6%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 92%, rgba(0,0,0,.4) 100%); }
.cover-astro img { object-position: 40% 50%; }
.cover-inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: calc(var(--px) * 1.15); padding-bottom: calc(var(--bot) + max(56px, calc(var(--u) * 5))); }
.kicker { font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .42em; text-transform: uppercase; color: var(--dim); line-height: 1.95; }
.cover-inner .kicker + .dash { margin: max(12px, calc(var(--u) * 1.1)) 0 max(24px, calc(var(--u) * 3)); }
.cover-title { font-family: var(--f-geo); font-weight: 300; font-size: calc(var(--u) * 6.1); line-height: 1.02; letter-spacing: .38em; text-transform: uppercase; margin-left: -.02em; }
.ct-row { display: block; white-space: nowrap; }
.ct-think { font-weight: 300; color: #DCDCDC; }
.ct-human { font-weight: 400; color: #fff; }
.ct-human sup { font-size: .18em; letter-spacing: 0; vertical-align: top; position: relative; top: .5em; margin-left: -.2em; }
.dash.wide { width: calc(var(--u) * 2.8); margin: max(16px, calc(var(--u) * 2)) 0 max(16px, calc(var(--u) * 2)); }
.cover-sub { font-family: var(--f-geo); font-size: calc(var(--u) * 1.6); letter-spacing: .22em; text-transform: uppercase; }
.cover-tag { margin-top: .9em; display: flex; flex-wrap: wrap; gap: 0 1.6em; font-family: var(--f-geo); font-size: max(11px, calc(var(--u) * .95)); letter-spacing: .3em; text-transform: uppercase; color: var(--faint); }
.cta-enter { margin-top: max(22px, calc(var(--u) * 2.6)); display: inline-flex; align-items: center; gap: 1em; min-height: 48px; padding: 0 1.5em 0 1.7em; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; font-family: var(--f-geo); font-weight: 500; font-size: max(11px, calc(var(--u) * .82)); letter-spacing: .24em; text-transform: uppercase; transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui), opacity .6s var(--ease), transform .7s var(--ease); }
.cta-enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--t-ui); }
.cta-enter:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.cta-enter:hover svg { transform: translateX(4px); }
.corner-list { position: absolute; right: var(--px); top: var(--top); z-index: 3; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .34em; text-transform: uppercase; line-height: 2; color: var(--dim); text-align: left; }
.corner-list .dash { margin-top: .8em; width: 26px; }
.cover-vertical { position: absolute; z-index: 3; right: calc(var(--px) * .9); top: 30%; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .34em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 1.2em; }
.cover-vertical i { font-style: normal; opacity: .6; }
.cover-vertical .vline { width: 1px; height: calc(var(--u) * 5.5); background: var(--faint); }
.cover-foot-l { position: absolute; left: calc(var(--px) * 1.15); bottom: calc(var(--bot) + 4px); z-index: 3; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .34em; text-transform: uppercase; line-height: 2; color: var(--dim); }
.cover-foot-l .dash { width: 24px; margin-bottom: 1em; }
.cover-foot-r { position: absolute; right: var(--px); bottom: calc(var(--bot) + 4px); z-index: 3; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .3em; color: var(--dim); display: flex; align-items: center; gap: 1em; }
.foot-arrow { width: 26px; height: 1px; background: currentColor; position: relative; }
.foot-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }

/* 02 · perspectives ------------------------------------------------- */
.sc-perspectives { --sbg: #E8E8E7; }
.persp-inner { display: grid; grid-template-rows: auto 1fr auto; }
.persp-title { font-family: var(--f-sans); font-weight: 400; font-size: max(16px, calc(var(--u) * 1.75)); letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.persp-year { position: absolute; right: var(--px); top: var(--top); font-family: var(--f-sans); font-size: max(15px, calc(var(--u) * 1.6)); letter-spacing: .12em; }
.persp-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2); min-height: 0; padding: calc(var(--u) * 1) 0; }
.persp-img { height: 100%; width: auto; max-width: calc(100% - var(--u) * 6); aspect-ratio: 1528 / 685; flex: 0 1 auto; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.persp-img img { object-fit: cover; }
.bracket { flex: 0 0 auto; width: calc(var(--u) * 1.3); height: calc(var(--u) * 9); border: max(3px, calc(var(--u) * .34)) solid #121212; opacity: 0; transition: transform 1s var(--ease-io), opacity .4s ease; transition-delay: .26s; }
.b-left { border-right: 0; transform: translateX(calc(var(--u) * 20)); }
.b-right { border-left: 0; transform: translateX(calc(var(--u) * -20)); }
.is-in .bracket { opacity: 1; transform: none; }
.persp-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.persp-foot .wordmark { height: max(16px, calc(var(--u) * 1.7)); width: auto; fill: #111; }
.persp-list { color: #1b1b1b; letter-spacing: .12em; font-family: var(--f-sans); font-weight: 400; font-size: max(12px, calc(var(--u) * 1.05)); line-height: 1.45; }

/* 03 · difference --------------------------------------------------- */
.sc-difference { --sbg: #050505; }
.diff-planet { width: max(90vw, 150vh); aspect-ratio: 1; left: 71%; top: 50%; translate: 0 -50%; --rx: calc(var(--u) * 2.2); --ry: 0px; --rb: calc(var(--u) * 5); --rs: calc(var(--u) * -2.2); --ra: .34; --gb: 160px; --ga: .05; filter: blur(1.5px); }
.diff-inner { display: grid; place-items: center; }
.diff-line { position: relative; z-index: 2; font-family: var(--f-geo); font-weight: 300; font-size: calc(var(--u) * 2.5); letter-spacing: .6em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: baseline; gap: .55em; }
.diff-line .chev { color: var(--orange); font-weight: 400; letter-spacing: 0; }
.dw { display: inline-block; }
.dw3 { color: var(--cyan); }
.dw3 .scramble { display: inline-block; min-width: 9.5ch; font-variant-numeric: tabular-nums; }
.dw3 .scramble.is-set { text-shadow: 0 0 22px rgba(0, 207, 212, .35); transition: text-shadow 1s; }
.diff-marker { position: absolute; left: 50%; width: 1px; height: 24%; z-index: 2; }
.diff-marker.top { top: 13%; }
.diff-marker.bottom { bottom: 13%; }
.m-line { position: absolute; inset: 0; background: rgba(255, 255, 255, .55); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .9s var(--ease-io) .2s; }
.diff-marker.bottom .m-line { transform-origin: 50% 0; }
.m-sq { position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #E8E8E8; transform: scale(0); transition: transform .5s var(--ease) .9s; }
.m-dots { position: absolute; left: 14px; top: 50%; width: 58px; height: 16px; margin-top: -8px; background-image: radial-gradient(circle, rgba(255,255,255,.7) 1.1px, transparent 1.4px); background-size: 7px 6px; -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent); mask-image: linear-gradient(90deg, #000 20%, transparent); opacity: 0; transition: opacity .6s ease 1.1s; }
.is-in .m-line { transform: scaleY(1); }
.is-in .m-sq { transform: scale(1); }
.is-in .m-dots { opacity: 1; }

/* 04 · purpose ------------------------------------------------------ */
.sc-purpose { --sbg: #060606; background: radial-gradient(70% 90% at 85% 30%, #121212 0%, #060606 60%); }
.purpose-inner { display: grid; grid-template-columns: auto 1px minmax(0, 1fr); align-items: end; column-gap: calc(var(--u) * 5); padding-bottom: calc(var(--bot) + var(--u) * 3); padding-left: calc(var(--px) * 1.2); }
.purpose-head { position: relative; align-self: center; }
.purpose-title { font-family: var(--f-sans); font-weight: 400; font-size: calc(var(--u) * 8.4); line-height: .9; letter-spacing: -.05em; color: #F2F1EE; }
.purpose-badge { position: absolute; left: calc(var(--u) * 34.5); top: calc(var(--u) * -1.2); width: calc(var(--u) * 10.8); height: auto; opacity: 0; transform: rotate(-140deg) scale(.6); transition: transform 1.3s var(--ease), opacity .6s ease; transition-delay: .7s; }
.is-in .purpose-badge.is-loaded { opacity: 1; transform: none; }
.purpose-rule { width: 1px; height: 58%; align-self: end; background: var(--rule); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease-io) .45s; margin-bottom: calc(var(--u) * .6); }
.is-in .purpose-rule { transform: none; }
.purpose-body { max-width: calc(var(--u) * 30); font-weight: 300; font-size: max(17px, calc(var(--u) * 1.95)); line-height: 1.2; letter-spacing: -.01em; color: #E9E8E4; }
.purpose-body p + p { margin-top: 1.2em; }

/* 05 · presence ----------------------------------------------------- */
.sc-presence { --sbg: #DEDEDC; background: radial-gradient(80% 90% at 20% 40%, #E7E7E5 0%, #D9D9D7 75%); }
.presence-globe { position: absolute; right: 0; top: 0; bottom: 0; display: flex; justify-content: flex-end; z-index: 1; }
.globe-frame { position: relative; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.rv-globe { opacity: 0; transform: translate3d(calc(var(--u) * 4), 0, 0) scale(1.03); transition: opacity 1s ease, transform 1.4s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .rv-globe { opacity: 1; transform: none; }
.globe-zoom { position: absolute; inset: 0; transform-origin: var(--ox, 60%) var(--oy, 50%); transition: transform 1s var(--ease); }
.globe-zoom.is-zoomed { transform: scale(1.32); }
.globe-zoom > img { width: 100%; height: 100%; object-fit: cover; }
.pin { position: absolute; width: calc(var(--u) * 1.7); min-width: 20px; transform: translate(-50%, -100%); color: var(--cyan); opacity: 0; transition: opacity .4s ease, transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.pin-shape { width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; transition: transform .35s var(--ease); }
.pin-shape path { fill: var(--cyan); }
.pin-shape circle { fill: #0D0F0F; }
.pin-label { position: absolute; left: 130%; top: 18%; font-family: var(--f-sans); font-weight: 500; font-size: max(11px, calc(var(--u) * 1.15)); letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); transition: transform .35s var(--ease), letter-spacing .35s var(--ease); }
.pin-ripple { position: absolute; left: 50%; bottom: -2px; width: 300%; aspect-ratio: 2.4; border: 1.5px solid var(--cyan); border-radius: 50%; transform: translate(-50%, 50%) scale(.2); opacity: 0; pointer-events: none; }
.is-in .pin { opacity: 1; transform: translate(-50%, -100%); }
.pin { transform: translate(-50%, -160%); }
.is-in .pin { transform: translate(-50%, -100%); }
.pin.is-on .pin-shape, .pin.is-hover .pin-shape, .pin:hover .pin-shape { transform: scale(1.22); }
.pin.is-on .pin-label { transform: translateX(4px); letter-spacing: .12em; }
.pin.is-on .pin-ripple { animation: ripple 1.6s var(--ease) 2; }
@keyframes ripple { 0% { transform: translate(-50%, 50%) scale(.2); opacity: .9; } 100% { transform: translate(-50%, 50%) scale(1.3); opacity: 0; } }
.sc-presence[data-city]:not([data-city=""]) .pin:not(.is-on) { opacity: .35; }
.presence-inner { display: flex; flex-direction: column; justify-content: center; max-width: 50%; padding-left: calc(var(--px) * 1.5); }
.presence-inner .spaced-label { margin-bottom: max(14px, calc(var(--u) * 1.8)); }
.city-list { display: flex; flex-direction: column; }
.city-list .line { padding-right: .2em; }
.city-btn { position: relative; font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 5.5); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: #0F1010; transition: color var(--t-ui), transform .35s var(--ease), opacity .3s; padding-left: 0; }
.city-btn::before { content: ""; position: absolute; left: -.5em; top: 50%; width: .22em; height: .22em; margin-top: -.12em; background: var(--cyan); border-radius: 50%; transform: scale(0); transition: transform .3s var(--ease); }
.city-btn:hover { transform: translateX(.12em); }
.city-btn[aria-pressed="true"]::before { transform: scale(1); }
.city-btn[aria-pressed="true"] { transform: translateX(.12em); }
.sc-presence[data-city]:not([data-city=""]) .city-btn[aria-pressed="false"] { opacity: .3; }
.presence-tag { margin-top: max(18px, calc(var(--u) * 2.2)); font-size: max(17px, calc(var(--u) * 1.8)); line-height: 1.22; letter-spacing: -.01em; }

/* 06 · partner ------------------------------------------------------ */
.sc-partner { --sbg: #060606; }
.partner-moon { width: calc(var(--u) * 44); aspect-ratio: 1; left: calc(var(--u) * 31); top: calc(var(--u) * -19); --rx: calc(var(--u) * 1.1); --ry: calc(var(--u) * .2); --rb: calc(var(--u) * 2.2); --rs: calc(var(--u) * -1.2); --ra: .75; --gb: calc(var(--u) * 5); --ga: .12; }
.partner-letters { position: absolute; left: calc(var(--u) * -1.4); top: calc(var(--top) + var(--u) * 1); z-index: 1; font-family: var(--f-serif); font-weight: 400; font-size: calc(var(--u) * 27); line-height: .76; letter-spacing: -.045em; font-variation-settings: "opsz" 96; will-change: transform; transition: transform .6s var(--ease); }
.pl-row { display: flex; white-space: nowrap; }
.pl-row2 { margin-top: -.02em; }
.pl { display: inline-block; background: linear-gradient(178deg, #F4F4F2 8%, #BDBDBD 38%, #7C7C7C 62%, #D8D8D6 92%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transition: opacity .8s ease, transform 1.1s var(--ease), filter .9s ease; transition-delay: calc(var(--d, 0) * 1ms); filter: blur(10px); }
.pl-u { font-style: italic; margin-left: -.06em; transform: translate3d(0, -40%, 0); }
.pl-H { transform: translate3d(-30%, 0, 0); }
.pl-M { transform: translate3d(0, 45%, 0); }
.pl-A { transform: translate3d(0, 60%, 0); margin-left: -.1em; }
.pl-N { transform: translate3d(30%, 0, 0); margin-left: -.06em; }
.is-in .pl { opacity: 1; transform: none; filter: none; }
.partner-list { position: absolute; left: 48.5%; top: 25%; z-index: 2; color: var(--dim); }
.partner-list::after { content: ""; display: block; width: 26px; height: 1px; margin-top: 1.4em; background: currentColor; }
.partner-inner { display: grid; grid-template-columns: 1fr minmax(0, calc(var(--u) * 26)); align-items: center; }
.partner-copy { grid-column: 2; }
.partner-lead { font-size: max(17px, calc(var(--u) * 1.75)); line-height: 1.35; letter-spacing: -.005em; }
.partner-lead strong { color: var(--cyan); font-weight: 700; }
.code-mark { color: var(--cyan); font-weight: 700; margin-right: .3em; }
.partner-body { margin-top: 1.1em; font-weight: 300; font-size: max(15px, calc(var(--u) * 1.35)); line-height: 1.45; color: var(--dim); }
.partner-mark { position: absolute; right: var(--px); bottom: calc(var(--bot) + var(--u) * 1.5); display: flex; flex-direction: column; align-items: center; gap: .8em; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.partner-mark .asterisk { font-size: calc(var(--u) * 3.6); line-height: .8; letter-spacing: 0; font-family: var(--f-sans); font-weight: 900; }

/* 07 · awards ------------------------------------------------------- */
.sc-awards { --sbg: #090909; }
.awards-lion { position: absolute; right: 0; bottom: 0; height: calc(100% - var(--u) * 3); aspect-ratio: 712 / 871; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.awards-inner { display: flex; flex-direction: column; justify-content: center; padding-left: calc(var(--px) * 1.2); }
.awards-title { font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 6.1); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; max-width: 60%; }
.awards-title .strong { font-weight: 800; letter-spacing: -.04em; }
.awards-inner > .dash { margin: max(20px, calc(var(--u) * 2.6)) 0 max(14px, calc(var(--u) * 2)); width: calc(var(--u) * 3); }
.awards-figure { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.af-num { font-family: var(--f-sans); font-weight: 200; font-size: calc(var(--u) * 6.4); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.af-prefix { color: var(--cyan); font-weight: 300; margin-right: .02em; }
.af-label { font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 3); letter-spacing: -.01em; text-transform: uppercase; color: #E2E2E2; }
.awards-logos { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.3) calc(var(--u) * 2.1); margin-top: max(26px, calc(var(--u) * 3.6)); max-width: 68%; position: relative; z-index: 2; }
.awards-logos li { height: max(30px, calc(var(--u) * 4.1)); display: flex; align-items: center; }
.awards-logos img { height: 100%; width: auto; max-width: calc(var(--u) * 9); object-fit: contain; opacity: .88; transition: opacity var(--t-ui), transform var(--t-ui); }
.awards-logos li:hover img { opacity: 1; transform: translateY(-2px); }

/* 08 · services ----------------------------------------------------- */
.sc-services { --sbg: #0D0E0E; --beam: 0deg; }
.svc-beam { position: absolute; left: 53.5%; top: 17%; width: 50%; height: 61%; z-index: 0; pointer-events: none; }
.beam-line { position: absolute; left: 0; bottom: 0; width: 1.5px; height: 118%; background: linear-gradient(to top, var(--cyan-hi), rgba(0, 207, 212, .15)); transform-origin: 0 100%; transform: rotate(calc(34deg + var(--beam))) scaleY(0); transition: transform 1s var(--ease-io) .5s; box-shadow: 0 0 12px rgba(0, 207, 212, .6); }
.beam-glow { position: absolute; left: 0; bottom: 0; width: 170%; height: 150%; transform-origin: 0 100%; background: conic-gradient(from 34deg at 0 100%, rgba(0, 170, 180, .34) 0deg, rgba(0, 120, 130, .12) 18deg, transparent 38deg); filter: blur(22px); opacity: 0; transform: rotate(var(--beam)); transition: opacity 1.2s ease .7s, transform 1s var(--ease-io); }
.is-in .beam-line { transform: rotate(calc(34deg + var(--beam))) scaleY(1); }
.is-in .beam-glow { opacity: 1; }
.sc-services.is-in .beam-line { transition: transform .8s var(--ease-io); }
.svc-inner { display: grid; grid-template-columns: minmax(0, 23%) 1px minmax(0, 34%) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: calc(var(--u) * 3.6); align-items: center; }
.svc-intro { grid-row: 1 / 3; align-self: center; }
.svc-think { font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 3.9); letter-spacing: -.045em; line-height: 1; }
.svc-think .code { color: var(--cyan); font-weight: 400; margin-left: .12em; font-size: .86em; letter-spacing: -.06em; }
.svc-claim { margin-top: max(16px, calc(var(--u) * 2.2)); font-family: var(--f-sans); font-weight: 800; font-size: max(13px, calc(var(--u) * 1.3)); letter-spacing: .02em; text-transform: uppercase; }
.svc-claim .slashes { color: var(--orange); }
.svc-aside { margin-top: .5em; font-weight: 300; font-size: max(14px, calc(var(--u) * 1.3)); line-height: 1.35; color: var(--dim); }
.svc-readout { min-height: 3.4em; margin-top: max(18px, calc(var(--u) * 2.6)); display: flex; flex-direction: column; gap: .2em; }
.ro-n { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .2em; color: var(--cyan); }
.ro-t { font-family: var(--f-sans); font-weight: 300; font-style: italic; font-size: max(18px, calc(var(--u) * 2.2)); text-transform: uppercase; letter-spacing: -.02em; }
.svc-rule { grid-row: 1 / 3; width: 1px; height: 76%; background: var(--rule); align-self: center; }
.svc-list { align-self: center; }
.svc-b { align-self: start; margin-top: calc(var(--u) * 11); position: relative; z-index: 2; }
.svc-li { opacity: 0; transform: translate3d(calc(var(--u) * -2), 0, 0) skewX(-6deg); transition: opacity .55s var(--ease), transform .75s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .svc-li { opacity: 1; transform: none; }
.svc { position: relative; display: flex; align-items: baseline; gap: .6em; font-family: var(--f-sans); font-style: italic; font-weight: 300; font-size: calc(var(--u) * 4.55); line-height: .98; letter-spacing: -.035em; text-transform: uppercase; color: #F1EFEA; transition: opacity .35s ease, color var(--t-ui), transform .35s var(--ease); }
.svc-b .svc { font-size: calc(var(--u) * 3.5); line-height: 1.02; }
.svc-n { position: absolute; left: -2.4em; top: .55em; font-family: var(--f-mono); font-style: normal; font-weight: 400; font-size: max(10px, calc(var(--u) * .7)); letter-spacing: .12em; color: var(--cyan); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-ui), transform var(--t-ui); }
.svc-t { position: relative; }
.svc-t::after { content: ""; position: absolute; left: 0; right: .1em; bottom: .02em; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.svc:hover { transform: translateX(.18em); }
.svc:hover .svc-n, .svc.is-on .svc-n, .svc:focus-visible .svc-n { opacity: 1; transform: none; }
.svc.is-on .svc-t::after { transform: scaleX(1); }
.svc.is-on { color: #fff; transform: translateX(.18em); }
.sc-services.has-sel .svc:not(.is-on) { opacity: .2; }
.sc-services.has-sel .svc:not(.is-on):hover { opacity: .55; }
.svc-tag { grid-column: 4; grid-row: 2; justify-self: end; align-self: end; font-size: max(15px, calc(var(--u) * 1.55)); line-height: 1.2; color: #E6E6E6; position: relative; z-index: 2; }
.svc-tag .dash { margin-bottom: .9em; }

/* 09 · values ------------------------------------------------------- */
.sc-values { --sbg: #050505; }
.values-planet { width: calc(var(--u) * 58); aspect-ratio: 1; left: calc(var(--u) * -20); bottom: calc(var(--u) * -40); --rx: calc(var(--u) * .4); --ry: calc(var(--u) * 1.3); --rb: calc(var(--u) * 2.6); --rs: calc(var(--u) * -1.6); --ra: .3; }
.values-inner { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); column-gap: calc(var(--u) * 4); align-items: center; }
.values-head { align-self: start; padding-top: calc(var(--u) * 3); position: relative; z-index: 2; }
.values-index { font-family: var(--f-geo); font-size: max(13px, calc(var(--u) * 1.05)); letter-spacing: .12em; }
.values-title { margin-top: .25em; font-family: var(--f-serif); font-weight: 400; font-size: calc(var(--u) * 9.4); line-height: .84; letter-spacing: -.035em; text-transform: uppercase; font-variation-settings: "opsz" 96; color: #EFEDE8; }
.values-sub { margin-top: max(18px, calc(var(--u) * 2.3)); display: flex; flex-wrap: wrap; gap: 0 2.2em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .44em; text-transform: uppercase; color: var(--faint); }
.values-explorer { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: calc(var(--u) * 3.6); align-items: center; position: relative; z-index: 2; }
.values-tabs { display: flex; flex-direction: column; gap: max(4px, calc(var(--u) * .4)); border-left: 1px solid var(--rule); }
.vtab { display: grid; grid-template-columns: calc(var(--u) * 3.1) 1fr; align-items: center; gap: calc(var(--u) * 1.3); padding: max(8px, calc(var(--u) * .9)) 0 max(8px, calc(var(--u) * .9)) calc(var(--u) * 1.6); position: relative; color: var(--faint); transition: color var(--t-ui), opacity .6s var(--ease), transform .7s var(--ease); }
.vtab::before { content: ""; position: absolute; left: -1px; top: 18%; bottom: 18%; width: 2px; background: var(--cyan); transform: scaleY(0); transition: transform .3s var(--ease); }
.vtab-icon { width: 100%; height: auto; opacity: .45; transition: opacity var(--t-ui), transform .3s var(--ease); }
.vtab-name { font-family: var(--f-geo); font-weight: 500; font-size: max(11px, calc(var(--u) * .92)); letter-spacing: .26em; text-transform: uppercase; line-height: 1.5; }
.vtab-name .slashes { opacity: 0; transition: opacity var(--t-ui); }
.vtab:hover { color: var(--dim); }
.vtab:hover .vtab-icon { opacity: .75; }
.vtab.is-on { color: var(--fg); }
.vtab.is-on::before { transform: scaleY(1); }
.vtab.is-on .vtab-icon { opacity: 1; transform: scale(1.06); }
.vtab.is-on .vtab-name .slashes { opacity: 1; }
.values-panel { min-height: calc(var(--u) * 26); display: flex; align-items: center; }
.vp-content { transition: opacity .3s ease, transform .45s var(--ease); }
.vp-content.is-out { opacity: 0; transform: translate3d(0, calc(var(--u) * .8), 0); transition-duration: .16s; }
.vp-count { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .2em; color: var(--faint); }
.vp-count b { color: var(--cyan); font-weight: 400; }
.vp-icon { width: calc(var(--u) * 6); height: auto; margin: max(14px, calc(var(--u) * 1.6)) 0 max(12px, calc(var(--u) * 1.3)); }
.vp-name { font-family: var(--f-geo); font-weight: 500; font-size: max(15px, calc(var(--u) * 1.4)); letter-spacing: .3em; text-transform: uppercase; }
.vp-text { margin-top: .8em; font-weight: 300; font-size: max(17px, calc(var(--u) * 2.05)); line-height: 1.3; letter-spacing: -.01em; color: #E3E1DC; max-width: 24em; }
.values-vertical { position: absolute; right: calc(var(--px) * .7); top: 52%; writing-mode: vertical-rl; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .44em; text-transform: uppercase; color: var(--faint); display: flex; gap: 1.4em; align-items: center; }
.values-vertical::before { content: ""; width: 1px; height: calc(var(--u) * 5); background: var(--faint); }

/* 10 · manifesto ---------------------------------------------------- */
.sc-manifesto { --sbg: #EEEBE5; }
.manifesto-img { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; aspect-ratio: 446 / 941; min-width: 30%; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.manifesto-img img { object-position: 0 50%; }
.manifesto-inner { display: grid; grid-template-rows: auto 1fr auto; }
.manifesto-list { color: var(--dim); }
.manifesto-list::before { content: ""; display: block; width: 26px; height: 1px; background: currentColor; margin-bottom: 1.3em; }
.manifesto-title { position: relative; align-self: center; z-index: 2; margin-top: calc(var(--u) * -1); }
.mt-top, .mt-bottom { display: block; line-height: .8; }
.mt-wipe { display: inline-block; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: calc(var(--u) * 12.8); letter-spacing: -.035em; text-transform: uppercase; color: #121212; padding-right: .1em; clip-path: inset(0 100% 0 0); transition: clip-path .95s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); font-variation-settings: "opsz" 96; }
.mt-steps { display: inline-block; font-family: var(--f-sans); font-weight: 900; font-size: calc(var(--u) * 13); letter-spacing: -.055em; text-transform: uppercase; color: #141414; clip-path: inset(0 100% 0 0); transition: clip-path .8s steps(7, end); transition-delay: calc(var(--d, 0) * 1ms); background: linear-gradient(90deg, #141414 62%, rgba(20,20,20,.35) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.is-in .mt-wipe, .is-in .mt-steps { clip-path: inset(-10% -5% -10% 0); }
.mt-code { position: absolute; left: calc(var(--u) * 55); top: calc(var(--u) * 6.4); display: flex; align-items: center; gap: .6em; font-family: var(--f-mono); font-size: max(14px, calc(var(--u) * 1.4)); color: var(--cyan); }
.mt-rule { width: calc(var(--u) * 15); height: 1px; background: rgba(20, 20, 20, .45); transform-origin: left; }
.manifesto-copy { position: relative; z-index: 2; max-width: 46%; }
.m-lead { font-weight: 700; font-size: max(15px, calc(var(--u) * 1.5)); line-height: 1.3; letter-spacing: -.01em; }
.m-body { margin-top: 1em; font-size: max(15px, calc(var(--u) * 1.4)); line-height: 1.32; color: #2A2A2A; }
.manifesto-side { position: absolute; right: var(--px); top: 58%; z-index: 3; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; line-height: 1.6; text-align: right; color: rgba(255, 255, 255, .72); }
.manifesto-side .dash { width: 26px; height: 1px; margin: 0 0 1.2em auto; background: rgba(255, 255, 255, .6); }

/* 11 · talents ------------------------------------------------------ */
.sc-talents { --sbg: #EEEBE5; }
.talents-planet { width: max(88vh, 52vw); aspect-ratio: 1; left: 75%; top: 50%; translate: 0 -50%; background: radial-gradient(closest-side, #050505 0 86%, #151515 92%, rgba(30, 30, 30, .55) 97%, rgba(40, 40, 40, 0) 100%); --rx: calc(var(--u) * 1.4); --ry: 0px; --rb: calc(var(--u) * 3); --rs: calc(var(--u) * -1.8); --ra: .32; --gb: calc(var(--u) * 6); --ga: .0; filter: blur(3px); }
.talents-inner { display: flex; flex-direction: column; justify-content: center; }
.talent-rows { display: flex; flex-direction: column; gap: max(4px, calc(var(--u) * .5)); }
.talent-row { display: grid; grid-template-columns: calc(var(--u) * 2.6) calc(var(--u) * 3.6) calc(var(--u) * 3.6) 1fr; align-items: center; opacity: 0; transform: translate3d(calc(var(--u) * -3), 0, 0); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .talent-row { opacity: 1; transform: none; }
.tr-n { font-family: var(--f-sans); font-size: max(10px, calc(var(--u) * .78)); color: #7D7B77; }
.tr-line { height: 1px; background: #9A9894; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 1ms + 200ms); }
.is-in .tr-line { transform: none; }
.tr-dot { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); min-width: 10px; min-height: 10px; border-radius: 50%; background: #10D8E4; justify-self: center; transform: scale(0); transition: transform .5s var(--ease); transition-delay: calc(var(--d, 0) * 1ms + 380ms); }
.is-in .tr-dot { transform: none; }
.tr-text { font-family: var(--f-geo); font-size: calc(var(--u) * 5.1); line-height: 1.02; text-transform: uppercase; letter-spacing: -.012em; color: #0E0E0E; transition: opacity .3s; }
.tr-text .b { font-weight: 800; letter-spacing: -.02em; }
.tr-text .l { font-weight: 300; }
.tr-text .br { display: block; }
.tr-text [data-count] { font-size: 1.3em; font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.1em; }
.sc-talents.is-hovering .talent-row:not(:hover) .tr-text { opacity: .28; }
.talents-side { position: absolute; right: var(--px); bottom: calc(var(--bot) + var(--u) * 1.5); z-index: 3; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; line-height: 1.7; text-align: right; color: rgba(255, 255, 255, .72); }
.talents-side .dash { width: 22px; height: 1px; margin: 1.2em 0 0 auto; background: rgba(255, 255, 255, .6); }

/* 12 · AI ----------------------------------------------------------- */
.sc-ai { --sbg: #0A0A0A; background: linear-gradient(118deg, #0A0A0A 30%, #1B1B1B 44%, #0C0C0C 58%, #0A0A0A 80%); }
.ai-visual { position: absolute; right: 7.5%; bottom: 0; height: 88%; aspect-ratio: 565 / 829; z-index: 1; will-change: transform; transition: transform .6s var(--ease); }
.ai-visual .img-reveal { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.cross { position: absolute; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); pointer-events: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, .45); }
.cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.cross.c1 { left: -18%; top: 9%; }
.cross.c2 { right: -6%; top: 47%; }
.cross.c3 { left: 42%; bottom: 8%; }
.ai-list-a { position: absolute; right: calc(var(--px) * .9); top: calc(var(--top) + var(--u) * 4); z-index: 2; }
.ai-list-b { position: absolute; left: 48.5%; top: 66%; z-index: 2; display: flex; flex-direction: column; gap: .6em; }
.ai-list-b .slashes { font-size: max(14px, calc(var(--u) * 1.3)); }
.ai-list-b .dash { width: 26px; height: 1px; background: var(--faint); margin-top: .6em; }
.ai-list-c { position: absolute; right: var(--px); bottom: calc(var(--bot) + var(--u) * 3); z-index: 2; }
.ai-inner { display: flex; flex-direction: column; justify-content: center; padding-left: calc(var(--px) * 1.4); }
.ai-title { font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 7.4); line-height: .86; letter-spacing: -.045em; }
.ai-title .line > span { background-image: linear-gradient(100deg, var(--c) 0 42%, #fff 50%, var(--c) 58% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ai-l0 { --c: #F2F2F0; } .ai-l1 { --c: #E3E3E1; } .ai-l2 { --c: #BEBEBC; } .ai-l3 { --c: #A2A2A0; } .ai-l4 { --c: #8E8E8C; }
.is-in .ai-l2 > span, .is-in .ai-l3 > span, .is-in .ai-l4 > span { animation: shine 1.4s var(--ease-io) 1.3s 1 both; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ai-body { margin-top: max(22px, calc(var(--u) * 2.4)); display: flex; gap: .8em; max-width: calc(var(--u) * 29); font-weight: 300; font-size: max(15px, calc(var(--u) * 1.45)); line-height: 1.35; color: #DADAD8; }
.ai-body strong { color: var(--cyan); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }

/* 13 · people ------------------------------------------------------- */
.sc-people { --sbg: #8F8E8B; }
.people-photo { position: absolute; inset: 0; z-index: 0; }
.people-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .1) 34%, transparent 55%), linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 18%); pointer-events: none; }
.people-photo img { object-position: 70% 50%; }
.people-inner { display: flex; flex-direction: column; justify-content: center; max-width: 42%; color: #fff; }
.people-inner .spaced-label { font-size: max(12px, calc(var(--u) * .95)); }
.people-inner .dash { margin: max(14px, calc(var(--u) * 1.8)) 0 max(40px, calc(var(--u) * 6)); width: 32px; height: 1.5px; background: rgba(255, 255, 255, .8); }
.people-title { font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 5.6); line-height: .98; letter-spacing: -.045em; }
.people-body { margin-top: max(20px, calc(var(--u) * 2.6)); max-width: calc(var(--u) * 24); font-weight: 300; font-size: max(15px, calc(var(--u) * 1.3)); line-height: 1.4; color: rgba(255, 255, 255, .88); }
.people-foot { position: absolute; right: var(--px); bottom: calc(var(--bot) + 6px); z-index: 3; display: flex; align-items: center; gap: 1.6em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .44em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.people-foot .rule { width: calc(var(--u) * 9); background: rgba(255, 255, 255, .6); }

/* 14 · CEO ---------------------------------------------------------- */
.sc-ceo { --sbg: #0E0E0D; }
.ceo-portrait { position: absolute; right: 0; bottom: 0; height: 92%; aspect-ratio: 1072 / 861; z-index: 1; will-change: transform; transition: transform .6s var(--ease); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.ceo-slash { position: absolute; z-index: 2; left: calc(75.8% - var(--u) * 1.45); bottom: 34.6%; width: calc(var(--u) * 2.9); height: 45.2%; background: #1FE3F0; transform: skewX(-24deg) scaleY(0); transform-origin: 50% 100%; transition: transform .9s var(--ease-io) .75s; box-shadow: 0 0 24px rgba(31, 227, 240, .25); }
.is-in .ceo-slash { transform: skewX(-24deg) scaleY(1); }
.ceo-list { position: absolute; left: 86%; top: 40%; z-index: 3; font-family: var(--f-sans); font-size: max(12px, calc(var(--u) * 1.35)); letter-spacing: .3em; text-transform: uppercase; line-height: 1.5; color: #E6E6E6; }
.ceo-inner { display: flex; flex-direction: column; justify-content: center; padding-left: calc(var(--px) * 1.5); }
.ceo-title { font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 6.6); line-height: .9; letter-spacing: -.045em; }
.ceo-inner > .dash { margin: max(20px, calc(var(--u) * 3)) 0 max(14px, calc(var(--u) * 2)); width: 26px; height: 1.5px; }
.ceo-sub { font-weight: 300; font-size: max(17px, calc(var(--u) * 2.15)); line-height: 1.2; color: #D6D6D4; letter-spacing: -.01em; }
.ceo-name { position: absolute; left: calc(var(--px) * 1.5); bottom: calc(var(--bot) + var(--u) * 2); display: flex; flex-direction: column; gap: .2em; font-size: max(15px, calc(var(--u) * 1.4)); }
.ceo-name strong { font-weight: 700; }
.ceo-name span { font-weight: 300; color: var(--dim); }

/* 15 · UAE leadership ---------------------------------------------- */
.sc-leaders { --sbg: #0B0B0B; background: radial-gradient(60% 80% at 60% 45%, #151515, #080808 75%); }
.leaders-inner { display: grid; grid-template-columns: minmax(0, 23%) minmax(0, 1fr); column-gap: calc(var(--u) * 2.4); align-items: center; }
.leaders-eyebrow { font-family: var(--f-geo); font-size: max(13px, calc(var(--u) * 1.2)); letter-spacing: .2em; text-transform: uppercase; }
.leaders-eyebrow .slashes { font-size: 2.2em; vertical-align: -.15em; }
.leaders-title { margin-top: .4em; font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 4); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.leaders-title .strong { font-weight: 800; font-size: 1.5em; letter-spacing: -.04em; }
.leaders-head > .dash { margin: max(18px, calc(var(--u) * 2.6)) 0; width: calc(var(--u) * 4); height: 1.5px; }
.strips { display: flex; gap: calc(var(--u) * .8); height: min(76%, calc(var(--u) * 42)); align-self: center; }
.strip { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #151515; transition: flex-grow .7s var(--ease), filter .4s ease, opacity .6s ease; clip-path: inset(100% 0 0 0); transition-property: flex-grow, filter, clip-path; transition-duration: .7s, .4s, .9s; transition-timing-function: var(--ease), ease, var(--ease-io); transition-delay: 0s, 0s, calc(var(--d, 0) * 1ms); }
.is-in .strip { clip-path: inset(0 0 0 0); }
.strip-img { position: absolute; inset: 0; }
.strip-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .8s var(--ease), opacity .5s; }
.strip::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78)); pointer-events: none; }
.strip-cap { position: absolute; left: max(12px, calc(var(--u) * 1.3)); right: 10px; bottom: max(12px, calc(var(--u) * 1.4)); z-index: 2; display: flex; flex-direction: column; gap: .15em; }
.strip-cap strong { font-weight: 600; font-size: max(13px, calc(var(--u) * 1.3)); letter-spacing: -.01em; white-space: nowrap; }
.strip-cap em { font-weight: 300; font-size: max(12px, calc(var(--u) * 1.1)); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.strips.has-on .strip { filter: grayscale(1) brightness(.5); }
.strips.has-on .strip.is-on { flex-grow: 2.1; filter: none; }
.strip.is-on img { transform: scale(1.03); }
.strip:focus-visible { outline-offset: -3px; }
.leaders-foot { position: absolute; right: var(--px); bottom: calc(var(--bot) - var(--u) * 1.4); display: flex; gap: 2.4em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .38em; text-transform: uppercase; color: var(--faint); }

/* 16 · Egypt -------------------------------------------------------- */
.sc-egypt { --sbg: #080808; background: radial-gradient(50% 60% at 0% 100%, #1b1b1b, transparent 70%), radial-gradient(40% 50% at 100% 0%, #191919, transparent 70%), #080808; }
.egypt-inner { display: grid; grid-template-columns: minmax(0, 21%) minmax(0, 1fr) auto; column-gap: calc(var(--u) * 2.2); align-items: center; }
.egypt-head { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 1) 0; }
.egypt-list-a::before { content: ""; display: block; width: 1px; height: 30px; background: var(--faint); margin-bottom: 1.8em; }
.egypt-title { font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 3.6); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; margin-top: calc(var(--u) * 3); }
.egypt-title em { font-weight: 300; color: #A9A9A7; letter-spacing: -.04em; }
.egypt-focus { margin-top: calc(var(--u) * 2.6); min-height: calc(var(--u) * 9); }
.egypt-focus.swap > * { animation: fadeUp .45s var(--ease) both; }
.egypt-focus.swap .ef-name { animation-delay: .05s; }
.egypt-focus.swap .ef-role { animation-delay: .1s; }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.ef-n { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .2em; color: var(--cyan); }
.ef-name { margin-top: .5em; font-weight: 600; font-size: max(18px, calc(var(--u) * 2)); letter-spacing: -.02em; }
.ef-role { margin-top: .3em; font-weight: 300; font-size: max(14px, calc(var(--u) * 1.2)); color: var(--dim); }
.egypt-foot { font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .4em; text-transform: uppercase; line-height: 1.8; color: var(--faint); }
.egypt-grid { position: relative; width: 100%; max-height: calc(100% - var(--u) * 4); aspect-ratio: 1265 / 760; justify-self: center; }
.eg-card { position: absolute; display: block; opacity: 0; transform: translate3d(0, calc(var(--u) * 2), 0); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .eg-card { opacity: 1; transform: none; }
.eg-1 { left: 0; top: 0; width: 41.3%; height: 89.6%; }
.eg-2 { left: 43.6%; top: 3.3%; width: 20.3%; height: 40.4%; }
.eg-3 { left: 54.2%; top: 53.6%; width: 18.7%; height: 38.2%; }
.eg-4 { left: 75.1%; top: 37.7%; width: 24.9%; height: 54.1%; }
.eg-img { position: absolute; inset: 0; overflow: hidden; background: #1a1a1a; }
.eg-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .45s ease, transform .8s var(--ease), opacity .5s; filter: brightness(.55) grayscale(1); }
.eg-card.is-on .eg-img img { filter: none; transform: scale(1.02); }
.eg-card:hover .eg-img img { filter: brightness(.85); }
.eg-card.is-on:hover .eg-img img { filter: none; }
.eg-num { position: absolute; right: 8px; top: 8px; z-index: 2; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .1em; color: rgba(255,255,255,.8); padding-bottom: 5px; border-bottom: 1px solid currentColor; transition: color var(--t-ui); }
.eg-card.is-on .eg-num { color: var(--cyan); }
.eg-cap { position: absolute; left: 0; right: -4px; top: calc(100% + max(6px, calc(var(--u) * .7))); display: flex; flex-direction: column; gap: .15em; line-height: 1.25; }
.eg-cap strong { font-weight: 600; font-size: max(12px, calc(var(--u) * 1.02)); }
.eg-cap em { font-weight: 300; font-style: normal; font-size: max(11px, calc(var(--u) * .92)); color: var(--dim); }
.eg-1 .eg-cap { top: auto; bottom: max(12px, calc(var(--u) * 1.3)); left: max(12px, calc(var(--u) * 1.4)); }
.eg-1::after { content: ""; position: absolute; inset: 60% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); pointer-events: none; }
.eg-1 .eg-cap strong { font-size: max(15px, calc(var(--u) * 1.5)); }
.eg-1 .eg-cap em { font-size: max(12px, calc(var(--u) * 1.1)); color: rgba(255, 255, 255, .8); }
.eg-1 .eg-cap { z-index: 2; }
.egypt-side { align-self: start; padding-top: calc(var(--u) * 3); font-size: var(--fs-micro); }
.egypt-side .slashes { display: block; font-size: max(16px, calc(var(--u) * 1.8)); margin-bottom: .6em; }
.egypt-side .mono-list { letter-spacing: .44em; font-family: var(--f-geo); }

/* 17 · team --------------------------------------------------------- */
.sc-team { --sbg: #E7E4DF; }
.team-inner { display: flex; align-items: center; justify-content: center; }
.team-grid { display: grid; grid-template-columns: repeat(5, auto); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.1); height: 100%; max-height: calc(var(--u) * 52); justify-content: center; }
.team-card { position: relative; height: 100%; aspect-ratio: 717 / 960; overflow: hidden; background: #cfccc7; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .team-card { clip-path: inset(0 0 0 0); }
.team-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .5s; }
.team-card:hover img { transform: scale(1.045); }
.tc-zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #111; font-size: 20px; font-weight: 300; line-height: 1; opacity: 0; transform: scale(.7); transition: opacity var(--t-ui), transform var(--t-ui); }
.team-card:hover .tc-zoom, .team-card:focus-visible .tc-zoom { opacity: 1; transform: none; }
.team-head { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 calc(var(--u) * .6) calc(var(--u) * 1); aspect-ratio: 717 / 960; height: 100%; }
.team-title { margin-top: .6em; font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 2.9); line-height: .98; letter-spacing: -.04em; }
.team-head .hint { margin-top: 1.2em; }

/* 18 · footprint ---------------------------------------------------- */
.sc-footprint { --sbg: #0A0A0A; }
.fp-inner { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); column-gap: calc(var(--u) * 3); align-items: center; }
.fp-head { align-self: stretch; display: flex; flex-direction: column; justify-content: center; position: relative; }
.fp-brand { display: none; }
.fp-title { font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 5); line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.fp-title .accent { color: #3EE3EC; font-weight: 300; }
.fp-sub { margin-top: max(18px, calc(var(--u) * 2.2)); font-family: var(--f-geo); font-size: max(12px, calc(var(--u) * 1.02)); letter-spacing: .34em; text-transform: uppercase; line-height: 1.9; color: #E8E8E6; max-width: 26em; }
.fp-tag { margin-top: max(24px, calc(var(--u) * 4)); font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.fp-tag .dash { width: 30px; height: 1px; margin-bottom: 1.4em; background: var(--faint); }
.fp-web { margin-top: max(20px, calc(var(--u) * 3)); display: flex; align-items: center; gap: 1.2em; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.fp-web svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.fp-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1); align-self: center; width: 100%; max-width: calc((100vh - var(--top) - var(--bot)) * 1.34); justify-self: end; }
.fp-item { opacity: 0; transform: translate3d(0, calc(var(--u) * 1.6), 0) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.is-in .fp-item { opacity: 1; transform: none; }
.fp-tile { position: relative; display: block; width: 100%; border: 1px solid rgba(255, 255, 255, .16); border-radius: max(6px, calc(var(--u) * .7)); overflow: hidden; background: #111; transition: border-color var(--t-ui), transform .35s var(--ease); }
.fp-img { position: relative; display: block; aspect-ratio: 353 / 323; overflow: hidden; }
.fp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .8s var(--ease); }
.fp-img img.c { opacity: 0; }
.fp-tile:hover .fp-img img.c.is-loaded, .fp-tile:focus-visible .fp-img img.c.is-loaded { opacity: 1; }
.fp-tile:hover .fp-img img, .fp-tile:focus-visible .fp-img img { transform: scale(1.04); }
.fp-tile:hover { border-color: rgba(255, 255, 255, .45); }
.fp-idx { position: absolute; right: 10px; top: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: rgba(255, 255, 255, .85); mix-blend-mode: difference; }
.fp-cap { display: flex; flex-direction: column; gap: .35em; padding: max(8px, calc(var(--u) * .8)) max(10px, calc(var(--u) * 1.1)) max(10px, calc(var(--u) * 1)); font-family: var(--f-mono); font-size: max(9px, calc(var(--u) * .62)); letter-spacing: .22em; text-transform: uppercase; color: #E8E8E8; text-align: left; }
.fp-year { color: var(--dim); display: flex; align-items: center; gap: .8em; }
.fp-year i { width: 18px; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.fp-tile:hover .fp-year i { width: 34px; }
.fp-foot { position: absolute; right: var(--px); bottom: calc(var(--bot) - var(--u) * 1.8); font-family: var(--f-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; line-height: 1.5; color: var(--faint); text-align: left; display: none; }

/* 19 · method intro ------------------------------------------------- */
.sc-method { --sbg: #070707; }
.method-door { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; aspect-ratio: 682 / 889; max-width: 62%; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); }
.method-door img { object-position: 70% 50%; }
.method-inner { display: flex; flex-direction: column; justify-content: center; padding-left: calc(var(--px) * 1.2); }
.method-list { display: flex; align-items: center; gap: 2.4em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .5em; text-transform: uppercase; color: var(--dim); margin-bottom: max(28px, calc(var(--u) * 4.4)); }
.method-list .dash { width: calc(var(--u) * 2.8); }
.method-title { font-family: var(--f-sans); font-weight: 300; font-size: calc(var(--u) * 6.8); line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.mt-think { font-weight: 800 !important; letter-spacing: -.05em; }
.mt-think .code { color: var(--orange); font-size: .32em; font-weight: 400; letter-spacing: .02em; margin-left: .3em; vertical-align: .9em; }
.method-title em { color: #10E6EF; font-weight: 300; padding-right: .05em; }
.method-side { position: absolute; right: calc(var(--px) * 1.8); top: 52%; z-index: 3; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .5em; text-transform: uppercase; line-height: 2.1; color: var(--dim); }
.method-side .dash { width: 26px; margin-top: 1em; }

/* 20 · framework ---------------------------------------------------- */
.sc-framework { --sbg: #0B0B0B; background: radial-gradient(40% 50% at 100% 100%, #1c1c1c, transparent 70%), #0B0B0B; }
.fw-inner { display: grid; grid-template-rows: auto 1fr auto auto; row-gap: max(10px, calc(var(--u) * 1.2)); }
.fw-label { display: flex; align-items: center; gap: 2em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .5em; text-transform: uppercase; color: var(--dim); }
.fw-label .dash { width: calc(var(--u) * 2.6); }
.fw-title { margin-top: .5em; font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 3.1); letter-spacing: -.02em; text-transform: uppercase; line-height: 1; }
.fw-sub { margin-top: .35em; font-weight: 400; font-size: max(16px, calc(var(--u) * 1.65)); color: #CFCFCD; letter-spacing: -.01em; }
.fw-side { position: absolute; right: var(--px); top: calc(var(--top) + var(--u) * 1); }
.fw-side::after { content: ""; display: block; width: 26px; height: 2px; background: var(--orange); margin-top: .8em; }
.fw-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 4.4); align-self: center; max-width: calc(var(--u) * 80); width: 100%; justify-self: center; }
.fw-stage { position: relative; border: 1px solid rgba(255, 255, 255, .22); border-radius: max(14px, calc(var(--u) * 1.5)); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8) calc(var(--u) * 1.6); display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translate3d(0, calc(var(--u) * 2), 0); transition: opacity .6s var(--ease), transform .8s var(--ease), border-color .35s, background .35s; transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s; }
.is-in .fw-stage { opacity: .5; transform: none; }
.is-in .fw-stage.is-open { opacity: 1; }
.fw-stage.is-current { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .025); }
.fw-card { width: 100%; display: flex; flex-direction: column; align-items: center; gap: max(8px, calc(var(--u) * 1)); border-radius: 10px; }
.fw-n { align-self: flex-start; font-size: max(12px, calc(var(--u) * 1.1)); color: var(--dim); }
.fw-icon { position: relative; width: calc(var(--u) * 7); aspect-ratio: 1; margin-top: calc(var(--u) * -1.4); }
.fw-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fw-icon .ring { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.4; }
.fw-icon .arc { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(var(--rot, -90deg)); transform-origin: 50% 50%; transition: stroke-dasharray 1s var(--ease-io) .15s; }
.accent-orange .arc { stroke: var(--orange); }
.accent-cyan .arc { stroke: var(--cyan); }
.fw-stage[data-i="2"] .fw-icon { --rot: -50deg; }
.fw-stage.is-open .arc { stroke-dasharray: 25 100; }
.fw-stage[data-i="2"].is-open .arc { stroke-dasharray: 20 100; }
.fw-icon .glyph { inset: 26%; width: 48%; height: 48%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fw-name { font-family: var(--f-sans); font-weight: 700; font-size: max(20px, calc(var(--u) * 2.2)); letter-spacing: .01em; text-transform: uppercase; margin-top: calc(var(--u) * .6); }
.fw-detail { margin-top: max(8px, calc(var(--u) * .8)); display: flex; flex-direction: column; align-items: center; min-height: calc(var(--u) * 10.5); }
.fw-q { font-weight: 400; font-size: max(14px, calc(var(--u) * 1.45)); line-height: 1.35; color: #C9C9C7; max-width: 17em; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .45s ease, transform .6s var(--ease); }
.fw-rule { width: calc(var(--u) * 3.4); height: 1px; background: rgba(255, 255, 255, .45); margin: max(10px, calc(var(--u) * 1.4)) 0 max(8px, calc(var(--u) * 1)); transform: scaleX(0); transition: transform .5s var(--ease) .2s; }
.fw-out { display: flex; flex-direction: column; gap: .4em; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .45s ease .38s, transform .6s var(--ease) .38s; }
.fw-out span { font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .4em; text-transform: uppercase; color: var(--dim); }
.fw-out strong { font-weight: 600; font-size: max(15px, calc(var(--u) * 1.55)); line-height: 1.25; }
.fw-stage.is-open .fw-q, .fw-stage.is-open .fw-out { opacity: 1; transform: none; }
.fw-stage.is-open .fw-rule { transform: none; }
.fw-arrow { position: absolute; right: calc(var(--u) * -3.6); top: 50%; width: calc(var(--u) * 2.8); color: rgba(255, 255, 255, .35); transition: color .4s; }
.fw-arrow svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fw-stage.is-past .fw-arrow, [data-mode="all"] .fw-arrow { color: var(--cyan); }
.fw-controls { display: flex; align-items: center; justify-content: center; gap: max(8px, calc(var(--u) * .8)); }
.fw-step { min-width: 13em; text-align: center; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.fw-controls .chip-text { margin-left: max(10px, calc(var(--u) * 1.2)); }
.fw-foot { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.fw-foot .wordmark { display: none; }
.fw-foot .rule { flex: 1; }
.fw-foot p { font-family: var(--f-geo); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; line-height: 1.5; color: var(--faint); }

/* 21 · venn --------------------------------------------------------- */
.sc-venn { --sbg: #090909; background: linear-gradient(125deg, #1d1d1d 0%, #090909 22%, #090909 70%, #1a1a1a 100%); }
.venn-inner { display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 1fr) minmax(0, 12%); grid-template-rows: 1fr auto; column-gap: calc(var(--u) * 2); }
.venn-head { grid-row: 1 / 3; align-self: center; }
.venn-title { margin-top: .5em; font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 5); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; }
.venn-title .grey { color: #8D8D8B; }
.venn-detail { margin-top: max(24px, calc(var(--u) * 3.6)); min-height: calc(var(--u) * 16); max-width: 25em; }
.venn-detail.swap > * { animation: fadeUp .5s var(--ease) both; }
.venn-detail.swap .vd-name { animation-delay: .05s; }
.venn-detail.swap .vd-text { animation-delay: .12s; }
.vd-kicker { font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .36em; text-transform: uppercase; color: var(--cyan); }
.vd-name { margin-top: .5em; font-weight: 600; font-size: max(20px, calc(var(--u) * 2.3)); letter-spacing: -.02em; }
.vd-text { margin-top: .6em; font-weight: 300; font-size: max(15px, calc(var(--u) * 1.3)); line-height: 1.42; color: #D4D4D2; }
.venn-stage { position: relative; align-self: center; justify-self: center; width: 100%; max-width: calc((100vh - var(--top) - var(--bot)) * .8); aspect-ratio: 640 / 600; }
.venn-svg { width: 100%; height: 100%; overflow: visible; }
.vc { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.82); transition: opacity .7s ease, transform 1s var(--ease), stroke-opacity .3s; stroke-width: 1.4; mix-blend-mode: screen; cursor: pointer; }
.vc-humans { stroke: #22E3EA; transition-delay: .25s; }
.vc-habits { stroke: #FF5A1A; transition-delay: .5s; }
.vc-horizons { stroke: #9AC5CC; stroke-opacity: .7; transition-delay: .75s; }
.vg { opacity: 0; fill: none; stroke-width: 10; transition: opacity .8s ease 1s; }
.vg-humans { stroke: rgba(0, 207, 212, .35); }
.vg-habits { stroke: rgba(255, 72, 0, .35); }
.vg-horizons { stroke: rgba(140, 190, 200, .2); }
.is-in .vc { opacity: 1; transform: none; }
.is-in .vg { opacity: 1; }
.v-truth, .v-truth-glow { opacity: 0; transition: opacity .8s ease 1.15s, filter .4s; cursor: pointer; }
.v-truth-glow { fill: rgba(255, 255, 255, .7); }
.is-in .v-truth { opacity: .96; }
.is-in .v-truth-glow { opacity: .55; }
.venn-stage[data-sel="humans"] .vc:not(.vc-humans), .venn-stage[data-sel="habits"] .vc:not(.vc-habits), .venn-stage[data-sel="horizons"] .vc:not(.vc-horizons) { opacity: .22; }
.venn-stage[data-sel="humans"] .vg:not(.vg-humans), .venn-stage[data-sel="habits"] .vg:not(.vg-habits), .venn-stage[data-sel="horizons"] .vg:not(.vg-horizons) { opacity: .1; }
.venn-stage[data-sel="humans"] .vc-humans, .venn-stage[data-sel="habits"] .vc-habits, .venn-stage[data-sel="horizons"] .vc-horizons { stroke-width: 2.4; }
.venn-stage[data-sel="humans"] .v-truth, .venn-stage[data-sel="habits"] .v-truth, .venn-stage[data-sel="horizons"] .v-truth { opacity: .45; transition-delay: 0s; }
.venn-stage[data-sel="center"] .vc { opacity: .72; transition-delay: 0s; }
.venn-stage[data-sel="center"] .v-truth-glow { animation: truthPulse 1.8s var(--ease) 1; opacity: .9; transition-delay: 0s; }
@keyframes truthPulse { 0% { opacity: .5; } 40% { opacity: 1; } 100% { opacity: .9; } }
.vlabel { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .6em; text-align: center; padding: .6em .8em; border-radius: 8px; opacity: 0; transition: opacity .6s ease, transform .3s var(--ease); }
.vlabel strong { font-family: var(--f-sans); font-weight: 600; font-size: max(12px, calc(var(--u) * 1.15)); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; }
.vlabel span { font-family: var(--f-sans); font-size: max(9px, calc(var(--u) * .72)); letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-right: -.28em; white-space: nowrap; }
.vl-humans { left: 50%; top: 22%; transition-delay: .9s; }
.vl-habits { left: 29%; top: 66%; transition-delay: 1s; }
.vl-horizons { left: 71%; top: 66%; transition-delay: 1.1s; }
.vl-center { left: 50%; top: 51.5%; transition-delay: 1.3s; }
.vl-center strong { color: #111; font-weight: 800; font-size: max(11px, calc(var(--u) * 1.15)); letter-spacing: .12em; margin-right: -.12em; line-height: 1.2; width: 6.2em; }
.is-in .vlabel { opacity: 1; }
.vlabel:hover { transform: translate(-50%, -50%) scale(1.04); }
.vlabel[aria-pressed="true"] strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
.vl-center[aria-pressed="true"] strong { text-decoration: none; }
.venn-foot { grid-column: 2 / 4; text-align: center; display: flex; flex-direction: column; align-items: center; gap: max(8px, calc(var(--u) * 1)); padding-bottom: calc(var(--u) * .5); }
.vf-truth { font-weight: 300; font-size: max(14px, calc(var(--u) * 1.35)); line-height: 1.45; color: #E8E8E6; }
.vf-truth strong { font-weight: 700; }
.vf-truth .o { color: #FF5A1A; font-style: normal; font-weight: 700; }
.venn-foot .rule { width: calc(var(--u) * 3.4); background: rgba(255, 255, 255, .45); }
.vf-found { font-weight: 300; font-size: max(15px, calc(var(--u) * 1.45)); }
.vf-found .c { color: #22E3EA; font-style: normal; font-weight: 700; }
.venn-side { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; margin-bottom: calc(var(--u) * 2); font-family: var(--f-sans); letter-spacing: .44em; }
.venn-side::after { content: ""; display: block; width: 26px; height: 2px; background: var(--orange); margin-top: 1em; }

/* 22 · celebrities -------------------------------------------------- */
.sc-celebs { --sbg: #080808; background: radial-gradient(60% 50% at 50% 0%, #2a2a2a, #080808 70%); }
.celebs-inner { display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--top) - var(--u) * 1); }
.celebs-stage { position: relative; width: 100%; max-height: calc(100% - var(--u) * 10); margin: 0 auto; max-width: calc((100vh - var(--top) - var(--bot) - var(--u) * 10) * 2.75); }
.celebs-stage::after { content: ""; position: absolute; inset: 55% 0 -1px; background: linear-gradient(180deg, transparent, #080808); pointer-events: none; z-index: 2; }
.celebs-stage img { object-position: var(--fx, 50%) 0; transition: object-position .9s var(--ease), opacity .5s; }
.celeb-shade { position: absolute; top: 0; bottom: 0; background: rgba(4, 4, 4, .68); opacity: 0; transition: opacity .55s ease; pointer-events: none; z-index: 1; }
.celeb-shade.is-dim { opacity: 1; }
.celeb-hit { position: absolute; top: 0; bottom: 0; z-index: 3; cursor: pointer; }
.celeb-names { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.celeb-name { position: absolute; left: var(--x); top: 4%; pointer-events: auto; display: flex; flex-direction: column; gap: .15em; padding: .3em .4em; margin-left: -.4em; border-radius: 6px; text-align: left; transition: opacity .35s ease, transform .6s var(--ease); }
.celeb-name[data-edge="right"] { left: auto; right: 1.5%; }
.celeb-name strong { font-family: var(--f-geo); font-weight: 500; font-size: max(12px, calc(var(--u) * 1.15)); letter-spacing: .03em; text-transform: uppercase; }
.celeb-name span { font-family: var(--f-geo); font-weight: 300; font-size: max(11px, calc(var(--u) * 1.02)); color: rgba(255, 255, 255, .85); }
.celeb-name strong::after { content: ""; display: block; height: 1.5px; background: var(--cyan); margin-top: .3em; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.celeb-name.is-on strong::after { transform: scaleX(1); }
.celebs-stage[data-sel]:not([data-sel=""]) .celeb-name:not(.is-on) { opacity: .4; }
.celebs-title { position: relative; z-index: 5; margin-top: calc(var(--u) * -9); padding-left: calc(var(--u) * 1.2); font-family: var(--f-geo); text-transform: uppercase; line-height: 1.02; }
.celebs-title .strong { font-weight: 700; font-size: calc(var(--u) * 3.6); letter-spacing: -.012em; }
.celebs-title .light { font-weight: 300; font-size: calc(var(--u) * 3.2); letter-spacing: -.01em; margin-top: .08em; }

/* 23 · brands ------------------------------------------------------- */
.sc-brands { --sbg: #EBEAE7; }
.brands-inner { display: flex; flex-direction: column; justify-content: center; }
.brands-title { font-family: var(--f-geo); font-weight: 400; font-size: calc(var(--u) * 3.6); line-height: 1.08; letter-spacing: .2em; text-transform: uppercase; color: #121212; }
.brands-title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; font-size: 1.14em; padding-right: .06em; font-optical-sizing: auto; }
.brands-inner > .dash { margin: max(14px, calc(var(--u) * 2)) 0 max(12px, calc(var(--u) * 1.6)); width: calc(var(--u) * 4.4); height: 1.5px; background: #8F8E8B; }
.brands-qual { font-family: var(--f-geo); font-weight: 400; font-size: max(14px, calc(var(--u) * 1.55)); letter-spacing: .28em; color: #1A1A1A; }
.brand-filters { margin-top: max(18px, calc(var(--u) * 2.6)); display: flex; flex-wrap: wrap; gap: 8px; }
.brand-cols { margin-top: max(18px, calc(var(--u) * 2.4)); display: grid; grid-template-columns: .82fr 1.25fr 1fr .95fr 1.15fr; }
.brand-col { position: relative; padding: calc(var(--u) * .4) calc(var(--u) * 1.8) calc(var(--u) * 1); border-left: 1px solid #BDBBB6; opacity: 0; transform: translate3d(0, calc(var(--u) * 1.5), 0); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); cursor: pointer; }
.brand-col:first-child { border-left: 0; padding-left: 0; }
.is-in .brand-col { opacity: 1; transform: none; }
.brand-col::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--cyan); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); }
.brand-col:first-child::before { left: -12px; }
.bc-n { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: #8A8883; }
.bc-name { margin-top: .5em; min-height: 2.9em; font-family: var(--f-geo); font-weight: 500; font-size: max(11px, calc(var(--u) * .98)); letter-spacing: .3em; text-transform: uppercase; line-height: 1.45; color: #121212; }
.bc-list { margin-top: max(8px, calc(var(--u) * 1)); font-family: var(--f-geo); font-weight: 300; font-size: max(14px, calc(var(--u) * 1.45)); line-height: 1.6; color: #1c1c1c; }
.bc-list li { display: inline; white-space: nowrap; }
.bc-list li:not(:last-child)::after { content: "·"; margin: 0 .1em 0 .45em; color: #8a8883; font-weight: 300; }
.brand-col.is-on .bc-list li { display: inline-block; }
.bc-list li { transition: color .3s, transform .45s var(--ease); }
.brands-inner:not([data-filter="all"]) .brand-col { opacity: .16; transition-delay: 0s; }
.brands-inner:not([data-filter="all"]) .brand-col.is-on { opacity: 1; }
.brand-col.is-on::before { transform: scaleY(1); }
.brand-col.is-on .bc-list li { font-weight: 400; animation: liIn .5s var(--ease) both; }
.brand-col.is-on .bc-list li:nth-child(2) { animation-delay: .03s; } .brand-col.is-on .bc-list li:nth-child(3) { animation-delay: .06s; } .brand-col.is-on .bc-list li:nth-child(4) { animation-delay: .09s; } .brand-col.is-on .bc-list li:nth-child(5) { animation-delay: .12s; } .brand-col.is-on .bc-list li:nth-child(6) { animation-delay: .15s; } .brand-col.is-on .bc-list li:nth-child(7) { animation-delay: .18s; } .brand-col.is-on .bc-list li:nth-child(8) { animation-delay: .21s; } .brand-col.is-on .bc-list li:nth-child(9) { animation-delay: .24s; } .brand-col.is-on .bc-list li:nth-child(10) { animation-delay: .27s; } .brand-col.is-on .bc-list li:nth-child(11) { animation-delay: .3s; } .brand-col.is-on .bc-list li:nth-child(12) { animation-delay: .33s; } .brand-col.is-on .bc-list li:nth-child(13) { animation-delay: .36s; }
@keyframes liIn { from { opacity: 0; transform: translate3d(-8px, 0, 0); } to { opacity: 1; transform: none; } }
.brands-side { position: absolute; right: var(--px); top: var(--top); font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .44em; text-transform: uppercase; line-height: 2; color: var(--dim); }
.brands-side .dash { width: 26px; margin-bottom: 1em; }

/* 24 · mobile first ------------------------------------------------- */
.sc-mobile { --sbg: #121212; background: linear-gradient(180deg, #1c1c1c, #0f0f0f); }
.mobile-photo { position: absolute; right: 0; bottom: 0; height: 94.7%; aspect-ratio: 1075 / 891; max-width: 72%; z-index: 1; will-change: transform; transition: transform .6s var(--ease); }
.mobile-photo .img-reveal { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.mobile-photo img { object-position: 0 100%; }
.mobile-inner { display: flex; flex-direction: column; justify-content: center; padding-left: calc(var(--px) * 1.3); position: relative; z-index: 2; }
.mobile-label { display: flex; align-items: center; gap: 1.4em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .5em; text-transform: uppercase; color: var(--dim); }
.mobile-label i { font-style: normal; opacity: .7; letter-spacing: 0; }
.mobile-label .dash { width: calc(var(--u) * 2.4); margin-right: 1em; }
.mobile-title { margin-top: max(24px, calc(var(--u) * 4.2)); font-family: var(--f-sans); font-weight: 800; font-size: calc(var(--u) * 7.8); line-height: .88; letter-spacing: -.05em; }
.mobile-title .accent { color: #10D6E3; }
.mobile-body { margin-top: max(18px, calc(var(--u) * 2.4)); max-width: calc(var(--u) * 22); font-weight: 400; font-size: max(16px, calc(var(--u) * 1.75)); line-height: 1.25; color: #E4E4E2; letter-spacing: -.01em; }
.mobile-inner > .dash { margin: max(18px, calc(var(--u) * 2.4)) 0 max(26px, calc(var(--u) * 4.2)); width: calc(var(--u) * 2.6); }
.mobile-foot { position: absolute; right: var(--px); bottom: calc(var(--bot) + var(--u) * 1); z-index: 3; font-family: var(--f-geo); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.mobile-foot .deg { display: block; font-family: var(--f-sans); font-weight: 600; font-size: 18px; letter-spacing: 0; margin-bottom: .4em; border-top: 2px solid var(--cyan); padding-top: .4em; width: max-content; }

/* 25–27 · selected work -------------------------------------------- */
.sc-work { --sbg: #0C0C0C; }
.work-inner { display: grid; grid-template-columns: minmax(0, 10%) minmax(0, 1fr) minmax(0, 31%); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: calc(var(--u) * 3); row-gap: max(10px, calc(var(--u) * 1.4)); }
.work-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.6em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .34em; text-transform: uppercase; color: var(--dim); }
.work-top .wordmark { display: none; }
.work-top .rule { width: calc(var(--u) * 3.6); background: var(--faint); }
.work-top .spaced { color: var(--fg); }
.work-tags { margin-left: auto; }
.work-tags i { font-style: normal; opacity: .5; margin: 0 .6em; }
.work-count { font-family: var(--f-mono); letter-spacing: .12em; color: var(--fg); }
.work-rail { align-self: center; }
.work-num { font-family: var(--f-sans); font-weight: 200; font-size: calc(var(--u) * 6.4); line-height: 1; letter-spacing: -.04em; }
.work-slash { display: block; width: calc(var(--u) * 3.6); height: 1px; background: var(--dim); transform: rotate(-50deg); transform-origin: left; margin: calc(var(--u) * 4) 0 calc(var(--u) * 4.4); }
.work-disc { font-family: var(--f-geo); font-size: max(10px, calc(var(--u) * .75)); letter-spacing: .3em; text-transform: uppercase; line-height: 2.3; color: var(--faint); }
.work-disc li { position: relative; }
.work-disc li.on { color: var(--fg); font-weight: 500; }
.work-disc li.on::before { content: ""; position: absolute; left: -1.2em; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: currentColor; }
.work-info { align-self: center; max-width: 30em; }
.work-client { font-family: var(--f-geo); font-weight: 500; font-size: max(10px, calc(var(--u) * .78)); letter-spacing: .3em; text-transform: uppercase; }
.sc-work-stage .work-client { color: var(--cyan); }
.work-title { margin-top: max(10px, calc(var(--u) * 1.2)); font-family: var(--f-sans); font-weight: 200; font-size: calc(var(--u) * 3.3); line-height: .98; letter-spacing: -.04em; text-transform: uppercase; }
.work-title .strong { font-weight: 600; letter-spacing: -.035em; }
.work-info > .dash { margin: max(12px, calc(var(--u) * 1.7)) 0; width: calc(var(--u) * 2.6); height: 1px; background: var(--dim); }
.work-meta { display: grid; grid-template-columns: 1.5fr .7fr 1.2fr; }
.work-meta > div { padding: 0 calc(var(--u) * 1.2); border-left: 1px solid var(--rule); }
.work-meta > div:first-child { padding-left: 0; border-left: 0; }
.work-meta dt { font-family: var(--f-geo); font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.work-meta dd { margin-top: .6em; font-weight: 300; font-size: max(13px, calc(var(--u) * 1.02)); line-height: 1.3; }
.work-desc { margin-top: max(12px, calc(var(--u) * 1.7)); font-weight: 300; font-size: max(15px, calc(var(--u) * 1.22)); line-height: 1.38; color: #E6E6E4; }
.view-project { display: inline-flex; align-items: center; gap: 1.2em; min-height: 44px; font-family: var(--f-geo); font-weight: 500; font-size: max(11px, calc(var(--u) * .86)); letter-spacing: .3em; text-transform: uppercase; position: relative; }
.view-project::after { content: ""; position: absolute; left: 0; right: 2.4em; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.view-project:hover::after { transform: scaleX(1); }
.arr-ne { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .3s var(--ease); }
.view-project:hover .arr-ne { transform: translate(3px, -3px); }
.work-end { display: flex; flex-wrap: wrap; gap: 8px; margin-top: max(18px, calc(var(--u) * 2.6)); }
.work-foot { grid-column: 3; justify-self: end; font-family: var(--f-geo); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--faint); text-align: right; max-width: 16em; line-height: 1.6; }
.wg { grid-column: 2; min-height: 0; height: 100%; container-type: size; display: flex; align-items: center; justify-content: center; }
.wg-zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; display: grid; place-items: center; font-size: 20px; font-weight: 300; line-height: 1; opacity: 0; transform: scale(.7); transition: opacity var(--t-ui), transform var(--t-ui); z-index: 2; }
.rv-mask-l, .rv-mask-r { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-io); transition-delay: calc(var(--d, 0) * 1ms); }
.rv-mask-r { clip-path: inset(0 0 0 100%); }
.is-in .rv-mask-l, .is-in .rv-mask-r { clip-path: inset(0 0 0 0); }
/* pair */
.wg-pair { gap: calc(var(--u) * .9); }
.wg-pair .wg-fig { position: relative; height: min(100cqh, calc(100cqw / 1.52)); overflow: hidden; background: #151515; }
.wg-pair .wg-fig:first-child { aspect-ratio: 736 / 635; }
.wg-pair .wg-fig:last-child { aspect-ratio: 221 / 635; }
.wg-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .5s; }
.wg-fig:hover img { transform: scale(1.035); }
.wg-fig:hover .wg-zoom, .wg-fig:focus-visible .wg-zoom, .wg-main:hover .wg-zoom, .wg-main:focus-visible .wg-zoom { opacity: 1; transform: none; }
/* stage */
.wg-stage { gap: calc(var(--u) * 1.2); }
.wg-main { position: relative; height: min(100cqh, calc((100cqw - var(--u) * 13) * 1.05)); aspect-ratio: 1 / 1.05; background: #141414; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.wg-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0 !important; transform: scale(1.03); transition: opacity .5s ease, transform .9s var(--ease); }
.wg-layer.is-on.is-loaded { opacity: 1 !important; transform: none; }
.wg-thumbs { display: flex; flex-direction: column; gap: calc(var(--u) * .9); width: calc(var(--u) * 11.5); }
.wg-thumb { display: flex; flex-direction: column; gap: .6em; opacity: .5; transition: opacity var(--t-ui), transform .7s var(--ease); }
.wg-thumb img { width: 100%; aspect-ratio: 1.25; object-fit: cover; border: 1px solid transparent; transition: border-color var(--t-ui), opacity .5s; }
.wg-thumb span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.wg-thumb:hover { opacity: .85; }
.wg-thumb.is-on { opacity: 1; }
.wg-thumb.is-on img { border-color: var(--cyan); }
/* screens */
.wg-screens { flex-direction: column; gap: calc(var(--u) * 1.4); }
.wg-phones { display: grid; grid-template-columns: 444fr 230fr; grid-template-rows: auto auto; gap: calc(var(--u) * 1.4) calc(var(--u) * 1.5); height: min(calc(100cqh - var(--u) * 5), calc(100cqw * 1.02)); aspect-ratio: 700 / 734; }
.wg-phone { position: relative; border-radius: max(10px, calc(var(--u) * 1.2)); overflow: hidden; opacity: .55; transform: scale(.97); transition: opacity .45s ease, transform .6s var(--ease), box-shadow .45s ease; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.wg-phone:first-child { grid-row: 1 / 3; }
.wg-phone img { width: 100%; height: 100%; object-fit: cover; }
.wg-phone.is-on { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(0, 207, 212, .7), 0 20px 60px rgba(0, 207, 212, .12); }
.wg-phone:hover { opacity: .9; }
.wg-phone { clip-path: inset(100% 0 0 0 round 12px); transition-property: opacity, transform, box-shadow, clip-path; transition-duration: .45s, .6s, .45s, 1s; transition-timing-function: ease, var(--ease), ease, var(--ease-io); transition-delay: 0s, 0s, 0s, calc(var(--d, 0) * 1ms); }
.is-in .wg-phone { clip-path: inset(0 0 0 0 round 12px); }
.wg-tabs { display: flex; gap: 8px; }
.wg-tab { min-height: 36px; padding: 0 1em; border-radius: 999px; border: 1px solid var(--rule); font-family: var(--f-geo); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui), opacity .6s var(--ease), transform .7s var(--ease); }
.wg-tab[aria-selected="true"] { background: var(--fg); color: var(--sbg); border-color: var(--fg); }

/* =====================================================================
   OVERLAYS
   ===================================================================== */
.index-panel, .viewer { position: fixed; inset: 0; z-index: 60; opacity: 0; transition: opacity .28s ease; }
.index-panel.is-open, .viewer.is-open { opacity: 1; }

/* chapter overview */
.index-panel { background: rgba(6, 7, 7, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--white); overflow-y: auto; }
.index-inner { min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--px) max(24px, calc(var(--u) * 2.4)); }
.index-head { display: flex; align-items: center; justify-content: space-between; height: var(--top); position: sticky; top: 0; background: linear-gradient(rgba(6,7,7,.98) 70%, transparent); z-index: 2; }
.index-head h2 { font-family: var(--f-mono); font-weight: 400; font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.index-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(var(--u) * 5); align-items: start; }
.index-list { columns: 2; column-gap: calc(var(--u) * 3); }
.ix-ch { break-inside: avoid; margin-bottom: max(18px, calc(var(--u) * 2.2)); transform: translate3d(0, 10px, 0); opacity: 0; transition: opacity .4s ease, transform .5s var(--ease); }
.index-panel.is-open .ix-ch { opacity: 1; transform: none; }
.index-panel.is-open .ix-ch:nth-child(2) { transition-delay: .03s; } .index-panel.is-open .ix-ch:nth-child(3) { transition-delay: .06s; } .index-panel.is-open .ix-ch:nth-child(4) { transition-delay: .09s; } .index-panel.is-open .ix-ch:nth-child(5) { transition-delay: .12s; } .index-panel.is-open .ix-ch:nth-child(6) { transition-delay: .15s; } .index-panel.is-open .ix-ch:nth-child(7) { transition-delay: .18s; }
.ix-ch-title { display: flex; gap: 1em; font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .34em; text-transform: uppercase; color: var(--cyan); padding-bottom: .8em; border-bottom: 1px solid rgba(255, 255, 255, .14); margin-bottom: .4em; }
.ix-ch-title span { color: rgba(255, 255, 255, .45); }
.ix-item { width: 100%; display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; padding: .42em 0; font-size: max(14px, calc(var(--u) * 1.15)); font-weight: 300; color: rgba(255, 255, 255, .72); transition: color var(--t-ui), transform var(--t-ui); }
.ix-n { font-family: var(--f-mono); font-size: .72em; letter-spacing: .08em; color: rgba(255, 255, 255, .4); }
.ix-item:hover, .ix-item:focus-visible { color: #fff; transform: translateX(4px); }
.ix-item.is-current { color: #fff; font-weight: 500; }
.ix-item.is-current .ix-n { color: var(--cyan); }
.index-preview { position: sticky; top: calc(var(--top) + 10px); }
.ip-frame { position: relative; aspect-ratio: 16 / 10; background: #111; overflow: hidden; display: grid; place-items: center; }
.ip-frame img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.ip-type { padding: 1.4em; font-family: var(--f-sans); font-weight: 300; font-size: max(20px, calc(var(--u) * 2.6)); letter-spacing: -.03em; text-align: center; line-height: 1.05; }
.index-preview figcaption { margin-top: .9em; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.index-foot { margin-top: max(20px, calc(var(--u) * 2)); font-family: var(--f-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; opacity: .4; }

/* viewer */
.viewer { background: rgba(5, 5, 5, .97); color: var(--white); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 var(--px) max(16px, env(safe-area-inset-bottom)); }
.viewer-bar { height: var(--top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.viewer-count { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .2em; opacity: .7; }
.viewer-title { font-family: var(--f-geo); font-weight: 500; font-size: var(--fs-micro); letter-spacing: .34em; text-transform: uppercase; text-align: center; }
.viewer-bar .close-btn { justify-self: end; }
.viewer-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 3); min-height: 0; }
.viewer.has-info .viewer-main { grid-template-columns: minmax(0, 1fr) minmax(260px, 26%); }
.viewer-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; gap: 12px; }
.viewer-figure { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .16s ease, transform .3s var(--ease); }
.viewer.is-swapping .viewer-figure { opacity: 0; transform: scale(.985); }
.viewer-figure img { max-width: 100%; max-height: calc(100% - 64px); width: auto; height: auto; object-fit: contain; opacity: 1; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.viewer-figure figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.2em; max-width: 56em; text-align: center; font-size: max(13px, calc(var(--u) * 1)); color: rgba(255, 255, 255, .8); }
.viewer-figure figcaption strong { font-family: var(--f-geo); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; font-size: .86em; color: #fff; }
.viewer-figure figcaption span { font-family: var(--f-mono); font-size: .82em; letter-spacing: .12em; opacity: .7; }
.viewer-figure figcaption em { flex-basis: 100%; font-style: normal; font-weight: 300; opacity: .85; }
.viewer-arrow { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: grid; place-items: center; transition: background var(--t-ui), color var(--t-ui); }
.viewer-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.viewer-arrow:hover { background: #fff; color: #111; }
.viewer-info { align-self: center; padding-bottom: 10%; }
.vi-client { font-family: var(--f-geo); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); }
.vi-title { margin-top: .6em; font-weight: 300; font-size: max(22px, calc(var(--u) * 2.4)); line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; }
.vi-meta { margin-top: 1.6em; display: grid; gap: .9em; }
.vi-meta div { display: grid; grid-template-columns: 5.5em 1fr; gap: 1em; padding-bottom: .9em; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.vi-meta dt { font-family: var(--f-geo); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .55); padding-top: .2em; }
.vi-meta dd { font-weight: 300; font-size: 15px; }
.vi-desc { margin-top: 1.4em; font-weight: 300; font-size: max(15px, calc(var(--u) * 1.2)); line-height: 1.45; color: rgba(255, 255, 255, .86); }
.vi-disc { margin-top: 1.4em; font-family: var(--f-geo); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.vi-disc::before { content: "● "; color: #fff; }
.viewer-thumbs { display: flex; justify-content: center; gap: 8px; padding-top: 10px; overflow-x: auto; }
.vt { flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border: 1px solid transparent; opacity: .5; transition: opacity var(--t-ui), border-color var(--t-ui); }
.vt img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.vt:hover { opacity: .85; }
.vt.is-on { opacity: 1; border-color: var(--cyan); }

/* =====================================================================
   STACK MODE — phones, portrait tablets, narrow windows
   Scenes become vertically scrollable columns; swipe / arrows move scenes.
   ===================================================================== */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  :root {
    --u: min(1.9vw, 1.2vh);
    --px: 20px;
    --top: 64px;
    --bot: 84px;
  }
  .chrome-top { background: linear-gradient(var(--chrome-bg, rgba(7,8,8,.9)) 55%, transparent); }
  body[data-theme="light"] .chrome-top { --chrome-bg: rgba(238, 235, 230, .92); }
  .chrome-bottom { grid-template-columns: minmax(0, 1fr) auto; background: linear-gradient(transparent, var(--chrome-bg, rgba(7,8,8,.92)) 45%); }
  body[data-theme="light"] .chrome-bottom { --chrome-bg: rgba(238, 235, 230, .94); }
  .nav-hint { display: none; }
  .chapter-label { display: none; }
  .chrome-top { grid-template-columns: 1fr auto; }
  .progress { max-width: none; }
  .pg-tip { display: none; }

  .scene { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .s-inner { height: auto; min-height: 100%; display: flex !important; flex-direction: column; justify-content: center; gap: 0; padding: calc(var(--top) + 8px) var(--px) calc(var(--bot) + 16px) !important; }
  .s-inner > * { align-self: stretch !important; justify-self: auto !important; }
  .s-inner > .cta-enter, .s-inner > .hint, .s-inner > .view-project { align-self: flex-start !important; }

  /* images become part of the flow */
  .cover-astro, .presence-globe, .awards-lion, .manifesto-img, .ai-visual, .people-photo, .ceo-portrait, .method-door, .mobile-photo { position: relative; right: auto; left: auto; top: auto; bottom: auto; height: auto; width: 100%; max-width: none; }

  /* cover */
  .sc-cover { display: flex; flex-direction: column; }
  .sc-cover .s-inner { justify-content: flex-start !important; min-height: auto; padding-top: 0 !important; margin-top: -9vh; padding-bottom: 12px !important; }
  .cover-astro { height: 50vh; width: 100%; aspect-ratio: auto; flex: 0 0 auto; }
  .cover-astro .img-reveal { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .cover-astro img { object-position: 45% 30%; }
  .cover-title { font-size: 9.6vw; letter-spacing: .3em; }
  .cover-sub { font-size: 4.1vw; }
  .corner-list, .cover-vertical, .cover-foot-r { display: none; }
  .cover-foot-l { position: static; margin: 26px 0 0 calc(var(--px) * 1.15); padding-bottom: calc(var(--bot) + 10px); }
  .cover-planet { display: none; }

  /* perspectives */
  .persp-inner { justify-content: space-between !important; }
  .persp-stage { margin: 28px -8px; padding: 0; }
  .persp-img { width: 100%; height: auto; max-width: none; }
  .bracket { display: none; }
  .persp-year { top: calc(var(--top) + 8px); }
  .persp-title { font-size: 4.4vw; }

  /* difference */
  .diff-line { flex-direction: column; align-items: center; white-space: normal; font-size: 6.4vw; gap: .5em; text-align: center; }
  .diff-marker { height: 14%; }
  .diff-planet { left: 58%; }

  /* purpose */
  .purpose-title { font-size: 13.4vw; }
  .purpose-badge { position: relative; left: auto; top: auto; width: 110px; margin: 18px 0 0 auto; }
  .purpose-rule { width: 60px; height: 1px; margin: 26px 0; transform-origin: left; }
  .purpose-body { font-size: 18px; }

  /* presence */
  .sc-presence .s-inner { order: -1; max-width: none; padding-bottom: 0 !important; min-height: auto; padding-left: var(--px) !important; }
  .sc-presence { display: flex; flex-direction: column; }
  .presence-globe { height: 64vh; justify-content: flex-end; flex: 0 0 auto; margin-bottom: calc(var(--bot) + 10px); }
  .globe-frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
  .city-btn { font-size: 12vw; }
  .globe-zoom.is-zoomed { transform: scale(1.12); }
  .pin-label { font-size: 11px; }
  .presence-tag { font-size: 18px; }

  /* partner */
  .partner-letters { position: relative; left: -2vw; top: auto; margin: calc(var(--top) + 6px) 0 0; font-size: 36vw; }
  .partner-moon { width: 90vw; left: 30vw; top: -30vw; }
  .partner-list { position: static; margin: 20px var(--px) 0; }
  .partner-inner { display: block !important; min-height: auto !important; padding-top: 24px !important; }
  .partner-mark { position: static; margin-top: 34px; align-items: flex-start; text-align: left; }
  .sc-partner { display: flex; flex-direction: column; }

  /* awards */
  .sc-awards { display: flex; flex-direction: column; }
  .awards-lion { order: 2; height: 50vh; aspect-ratio: auto; margin-top: 0; margin-bottom: calc(var(--bot)); }
  .awards-lion img { object-fit: contain; object-position: right bottom; }
  .awards-inner { min-height: auto !important; padding-bottom: 0 !important; }
  .awards-title { font-size: 11vw; max-width: none; }
  .af-num { font-size: 16vw; }
  .af-label { font-size: 5.2vw; }
  .awards-logos { max-width: none; gap: 16px 20px; }
  .awards-logos li { height: 34px; }

  /* services */
  .svc-beam { left: 40%; top: 30%; width: 80%; height: 60%; opacity: .6; }
  .svc-rule { display: none; }
  .svc-think { font-size: 10vw; }
  .svc { font-size: 10.4vw; }
  .svc-b { margin-top: 0; }
  .svc-b .svc { font-size: 8.4vw; }
  .svc-list { margin-top: 12px; }
  .svc-intro { margin-bottom: 20px; }
  .svc-readout { min-height: 0; margin-top: 12px; }
  .svc-n { display: none; }
  .svc-tag { align-self: flex-end; margin-top: 26px; }

  /* values */
  .values-planet { display: none; }
  .values-head { padding-top: 0; }
  .values-title { font-size: 20vw; }
  .values-explorer { display: block; margin-top: 28px; }
  .values-tabs { flex-direction: row; border-left: 0; border-bottom: 1px solid var(--rule); gap: 0; justify-content: space-between; }
  .vtab { display: flex; flex-direction: column; padding: 10px 4px 12px; gap: 6px; flex: 1; }
  .vtab::before { left: 20%; right: 20%; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .vtab.is-on::before { transform: scaleX(1); }
  .vtab-icon { width: 38px; }
  .vtab-name { display: none; }
  .values-panel { min-height: 0; padding-top: 18px; }
  .vp-icon { display: none; }
  .vp-name { margin-top: 10px; }
  .vp-text { font-size: 19px; }
  .values-vertical { display: none; }

  /* manifesto */
  .sc-manifesto { display: flex; flex-direction: column; }
  .manifesto-img { order: 2; height: 46vh; width: 100%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%); mask-image: linear-gradient(180deg, transparent 0, #000 35%); margin-bottom: calc(var(--bot)); }
  .manifesto-img img { object-position: 30% 40%; }
  .manifesto-inner { min-height: auto !important; padding-bottom: 20px !important; }
  .mt-wipe { font-size: 19vw; }
  .mt-steps { font-size: 18.6vw; }
  .mt-code { display: none; }
  .manifesto-title { margin: 24px 0; }
  .manifesto-copy { max-width: none; }
  .manifesto-side { display: none; }

  /* talents */
  .talents-planet { left: 30%; top: auto; bottom: -95vw; translate: none; width: 130vw; opacity: .95; }
  .talent-row { grid-template-columns: 22px 20px 22px 1fr; }
  .tr-dot { width: 10px; height: 10px; }
  .tr-text { font-size: 7.6vw; }
  .talents-side { display: none; }

  /* ai */
  .sc-ai { display: flex; flex-direction: column; }
  .ai-visual { order: 2; height: 60vh; aspect-ratio: auto; width: 86%; margin: -4vh 0 calc(var(--bot)) auto; }
  .ai-visual img { object-fit: contain; object-position: 70% 100%; }
  .ai-inner { min-height: auto !important; padding-bottom: 0 !important; }
  .ai-title { font-size: 14.4vw; }
  .ai-list-a, .ai-list-b, .ai-list-c, .cross { display: none; }

  /* people */
  .sc-people { display: flex; flex-direction: column; background: #8F8E8B; }
  .people-photo { height: 56vh; }
  .people-photo img { object-position: 64% 40%; }
  .people-photo::after { background: linear-gradient(180deg, transparent 55%, #8F8E8B); }
  .people-inner { max-width: none; min-height: auto !important; padding-top: 10px !important; justify-content: flex-start !important; }
  .people-inner .dash { margin: 14px 0 22px; }
  .people-title { font-size: 12.5vw; }
  .people-foot { position: static; margin: 0 var(--px) calc(var(--bot) + 16px); }
  .sc-people .s-inner { padding-bottom: 20px !important; }

  /* ceo */
  .sc-ceo { display: flex; flex-direction: column; }
  .ceo-portrait { order: 2; height: 58vh; aspect-ratio: auto; margin-bottom: calc(var(--bot)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .ceo-portrait img { object-position: 38% 0; }
  .ceo-inner { min-height: auto !important; padding-bottom: 0 !important; }
  .ceo-title { font-size: 15vw; }
  .ceo-name { position: static; margin-top: 26px; }
  .ceo-slash { left: auto; right: 16%; top: auto; bottom: 26vh; width: 22px; height: 30vh; }
  .ceo-list { display: none; }

  /* leaders */
  .leaders-title { font-size: 9vw; }
  .strips { height: 64vh; width: calc(100% + var(--px) * 2); margin: 26px calc(var(--px) * -1) 0; padding: 0 var(--px); overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; }
  .strip { flex: 0 0 64vw; scroll-snap-align: center; }
  .strips.has-on .strip { filter: none; }
  .strips.has-on .strip.is-on { flex-grow: 0; }
  .leaders-foot { position: static; margin-top: 22px; flex-wrap: wrap; gap: 10px 20px; }
  .leaders-inner .hint { display: none; }

  /* egypt */
  .egypt-head { padding: 0; }
  .egypt-list-a, .egypt-foot, .egypt-side { display: none; }
  .egypt-title { font-size: 9vw; margin-top: 0; }
  .egypt-focus { min-height: 0; margin: 14px 0 20px; }
  .egypt-grid { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; max-height: none; }
  .eg-card { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; aspect-ratio: 3 / 4; margin-bottom: 48px; }
  .eg-1 { grid-column: 1 / -1; aspect-ratio: 4 / 4.6; margin-bottom: 0; }

  /* team */
  .team-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; height: auto; max-height: none; gap: 8px; }
  .team-card { width: 100%; height: auto; }
  .team-head { grid-column: 1 / -1; order: -1; aspect-ratio: auto; height: auto; padding: 0 0 16px; }
  .team-title { font-size: 9vw; }

  /* footprint */
  .fp-title { font-size: 12vw; }
  .fp-wall { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; max-width: none; }
  .fp-tag, .fp-web { margin-top: 18px; }

  /* method */
  .sc-method { display: flex; flex-direction: column; }
  .method-door { order: 2; height: 48vh; aspect-ratio: auto; margin: -6vh 0 calc(var(--bot)) 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
  .method-inner { min-height: auto !important; padding-bottom: 0 !important; }
  .method-title { font-size: 12.4vw; }
  .method-list { gap: 1.1em; letter-spacing: .3em; flex-wrap: wrap; }
  .method-side { display: none; }

  /* framework */
  .fw-side, .fw-foot { display: none; }
  .fw-title { font-size: 7.4vw; }
  .fw-stages { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .fw-stage { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; padding: 14px 16px; }
  .fw-card { flex-direction: row; gap: 14px; }
  .fw-n { align-self: center; }
  .fw-icon { width: 58px; margin: 0; }
  .fw-name { margin: 0; font-size: 20px; }
  .fw-detail { min-height: 0; align-items: flex-start; width: 100%; margin-top: 0; max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin .5s var(--ease); }
  .fw-stage.is-open .fw-detail { max-height: 260px; margin-top: 12px; }
  .fw-q { max-width: none; }
  .fw-arrow { display: none; }
  .fw-controls { flex-wrap: wrap; margin-top: 18px; }
  .fw-step { min-width: 0; flex: 1; }
  .fw-controls .chip-text { margin-left: 0; }

  /* venn */
  .venn-head, .venn-foot, .venn-side { grid-column: auto; grid-row: auto; }
  .venn-title { font-size: 11vw; }
  .venn-detail { min-height: 0; margin: 16px 0 0; order: 2; }
  .venn-stage { max-width: 440px; margin: 10px auto 0; }
  .venn-side { display: none; }
  .venn-foot { margin-top: 16px; }
  .venn-head .hint { display: none; }

  /* celebs */
  .celebs-stage { width: calc(100% + var(--px) * 2); margin: 0 calc(var(--px) * -1); max-width: none; aspect-ratio: auto !important; height: 50vh; display: contents; }
  .celebs-stage > .img-reveal { order: 0; height: 50vh; width: calc(100% + var(--px) * 2); margin: 0 calc(var(--px) * -1); -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent); mask-image: linear-gradient(180deg, #000 65%, transparent); }
  .celeb-names { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 16px; pointer-events: auto; }
  .celeb-name, .celeb-name[data-edge="right"] { position: static; left: auto; right: auto; margin: 0; padding: 8px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; }
  .celeb-name.is-on { border-color: var(--cyan); }
  .celeb-shade, .celeb-hit { display: none; }
  .celebs-stage::after { display: none; }
  .celebs-stage { order: 0; }
  .celebs-title { order: 1; }
  .celeb-names { order: 2; }
  .celebs-title { margin-top: -12vh; padding-left: 0; }
  .celebs-title .strong { font-size: 6.6vw; }
  .celebs-title .light { font-size: 5.8vw; }
  .celebs-inner { gap: 14px; }

  /* brands */
  .brands-title { font-size: 6.2vw; letter-spacing: .12em; }
  .brands-qual { font-size: 15px; letter-spacing: .16em; }
  .brand-filters { flex-wrap: nowrap; overflow-x: auto; margin: 18px calc(var(--px) * -1) 0; padding: 0 var(--px) 4px; scrollbar-width: none; }
  .brand-filters .chip { flex: 0 0 auto; }
  .brand-cols { grid-template-columns: 1fr; gap: 16px 0; }
  .brand-col { border-left: 0; padding: 0 0 14px; border-bottom: 1px solid #CFCCC7; }
  .brand-col::before, .brand-col:first-child::before { left: -10px; }
  .bc-name { min-height: 0; }
  .brands-inner:not([data-filter="all"]) .brand-col:not(.is-on) { display: none; }
  .brands-inner:not([data-filter="all"]) .brand-col.is-on { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .brands-side { display: none; }

  /* mobile first */
  .sc-mobile { display: flex; flex-direction: column; }
  .mobile-photo { order: 2; height: 50vh; aspect-ratio: auto; margin-bottom: calc(var(--bot)); }
  .mobile-photo img { object-position: 20% 60%; }
  .mobile-inner { min-height: auto !important; padding-bottom: 12px !important; padding-left: var(--px) !important; }
  .mobile-title { font-size: 15vw; }
  .mobile-label { gap: .9em; letter-spacing: .3em; }
  .mobile-foot { display: none; }
  .mobile-list { display: none; }

  /* work */
  .work-top { flex-wrap: wrap; row-gap: 8px; }
  .work-tags { display: none; }
  .work-count { margin-left: auto; }
  .work-rail { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; }
  .work-num { font-size: 12vw; }
  .work-slash { margin: 0; transform: rotate(-50deg); width: 26px; }
  .work-disc { display: none; }
  .wg { height: auto; container-type: inline-size; margin: 10px 0 20px; }
  .wg-pair .wg-fig { height: auto; width: auto; }
  .wg-pair .wg-fig:first-child { flex: 3.33; }
  .wg-pair .wg-fig:last-child { flex: 1; }
  .wg-stage { flex-direction: column; }
  .wg-main { width: 100%; height: auto; }
  .wg-thumbs { flex-direction: row; width: 100%; }
  .wg-thumb { flex: 1; }
  .wg-phones { width: 100%; height: auto; }
  .work-title { font-size: 9vw; }
  .work-meta { grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .work-meta > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .work-foot { display: none; }

  /* overlays */
  .index-body { grid-template-columns: 1fr; }
  .index-list { columns: 1; }
  .index-preview { display: none; }
  .viewer { padding-left: 12px; padding-right: 12px; }
  .viewer.has-info .viewer-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; overflow-y: auto; }
  .viewer-info { padding: 12px 6px 0; }
  .viewer-arrow { width: 40px; height: 40px; position: absolute; bottom: 70px; z-index: 2; background: rgba(0, 0, 0, .5); }
  .viewer-arrow.prev { left: 6px; }
  .viewer-arrow.next { right: 6px; }
  .viewer-figure img { max-height: calc(100% - 90px); }
  .vt { width: 52px; height: 52px; }
}

/* short landscape phones */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  :root { --top: 54px; --bot: 60px; }
  .nav-btn { width: 40px; height: 40px; }
}

/* =====================================================================
   REDUCED MOTION — content and controls remain fully usable
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .rv, .ltr, .line > span, .svc-li, .talent-row, .fp-item, .eg-card, .fw-stage, .brand-col, .pl, .pin,
  .rv-zoom img, .rv-wipe-l img, .rv-rise img, .rv-settle img, .rv-door img, .rv-globe {
    transform: none !important; filter: none !important; transition: opacity .25s linear !important; transition-delay: 0s !important;
  }
  .pin { transform: translate(-50%, -100%) !important; }
  .rv-open, .rv-wipe-l, .rv-rise, .rv-door, .rv-mask-l, .rv-mask-r, .team-card, .strip, .wg-phone, .mt-wipe, .mt-steps { clip-path: none !important; transition: none !important; }
  .bracket, .purpose-badge, .purpose-rule, .m-line, .m-sq, .tr-line, .tr-dot, .ceo-slash, .beam-line, .rv-grow-y, .fw-rule { transition: none !important; }
  .scene { transition: opacity .2s linear, visibility 0s linear .2s !important; transform: none !important; }
  .scene.is-active { transition: opacity .2s linear !important; }
  .globe-zoom { transition: none !important; }
  .ai-title .line > span { background-position: 0 0 !important; }
}