/* ==========================================================================
   Team of Keys — styles
   Palette: near-black, warm white, orange #FF6428. Two typefaces.
   ========================================================================== */

:root {
  --ink: #050505;
  --paper: #FFFFFF;
  --paper-dim: rgba(255, 255, 255, 0.72);
  --ink-dim: rgba(5, 5, 5, 0.66);
  --orange: #FF6428;
  --orange-deep: #D94E18;
  --line-on-ink: rgba(255, 255, 255, 0.16);
  --line-on-paper: rgba(5, 5, 5, 0.16);
  --line-on-orange: rgba(5, 5, 5, 0.28);

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 4.5rem;

  --fg: var(--paper);
  --fg-dim: var(--paper-dim);
  --line: var(--line-on-ink);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { overflow-x: clip; }
/* no CSS smooth scrolling: it breaks ScrollTrigger refreshes mid-page. main.js smooths anchor links. */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
::selection { background: var(--orange); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.mono {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--orange); color: var(--ink); padding: 0.6rem 1rem;
  font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { top: 1rem; }

/* ---------- preloader: 3D word drum ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: grid; place-items: center; background: #030303; color: var(--paper);
  clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 0%);
  animation: preloader-failsafe 0.6s ease 4s forwards; /* if scripts never run, get out of the way */
}
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
/* film grain, barely there */
.preloader::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: preloader-grain 0.9s steps(4) infinite;
}
@keyframes preloader-grain {
  25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); }
}
.preloader__glow {
  position: absolute; left: 50%; top: 50%; width: min(70vw, 60rem); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 100, 40, 0.16), rgba(255, 100, 40, 0.04) 55%, transparent 75%);
  opacity: 0;
}
/* every word and the logo share one spot; the stage gives the letters depth */
.preloader__stage { position: relative; display: grid; place-items: center; perspective: 900px; }
.preloader__stage > * { grid-area: 1 / 1; }
/* the words and the logo share one spot, so they are hidden until the intro has
   split them into letters and placed them — otherwise they flash stacked on load */
.preloader__word, .preloader__logo { visibility: hidden; }
.preloader.is-ready .preloader__word, .preloader.is-ready .preloader__logo { visibility: visible; }
.preloader__word {
  white-space: nowrap; transform-style: preserve-3d;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: clamp(3.2rem, 8.5vw, 7.5rem); line-height: 1; letter-spacing: -0.02em;
}
.preloader__word i { font-style: italic; color: var(--orange); }
.preloader__word .ch { display: inline-block; opacity: 0; backface-visibility: hidden; will-change: transform, opacity; }
.preloader__logo {
  position: relative; display: grid; padding: 0.385em 0.577em 0.32em; transform-style: preserve-3d; color: var(--paper);
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.02; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase;
}
.preloader__box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.preloader__box rect { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-dasharray: 0 100000; } /* invisible until JS draws it */
.preloader__letters { display: grid; }
.preloader__letters .ch { display: inline-block; opacity: 0; }
.preloader__dot { position: absolute; left: -0.28em; top: -0.28em; width: 0.46em; height: 0.46em; background: var(--orange); transform: scale(0); } /* same proportions as the nav logo's square */
.preloader__caption {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4svh, 2.5rem); text-align: center;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
  opacity: 0;
}
.preloader__caption span { color: var(--orange); }
html.motion-paused .preloader::after { animation-play-state: paused; }

/* ---------- canvas ---------- */
.keys-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: block; pointer-events: none;
}
html.no-webgl .keys-canvas { display: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--paper);
  transition: color 0.4s var(--ease), opacity 0.6s var(--ease);
  --nav-bg: rgba(5, 5, 5, 0.72);
  --nav-rule: var(--line-on-ink);
}
/* soft backdrop once the page moves, so content never reads through the logo and links */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 -1px 0 var(--nav-rule);
  opacity: 0; transition: opacity 0.5s var(--ease), background-color 0.4s var(--ease);
}
html.is-scrolled .nav::before { opacity: 1; }
html[data-nav="light"] .nav,
html[data-nav="orange"] .nav { color: var(--ink); }
html[data-nav="light"] .nav { --nav-bg: rgba(255, 255, 255, 0.8); --nav-rule: var(--line-on-paper); }
html[data-nav="orange"] .nav { --nav-bg: rgba(255, 100, 40, 0.86); --nav-rule: var(--line-on-orange); }
.nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; letter-spacing: -0.01em; }
/* boxed, stacked wordmark with an orange corner dot */
.nav__logo {
  position: relative; display: grid; padding: 0.3rem 0.45rem 0.25rem;
  border: 1.5px solid currentColor;
  font-size: 0.78rem; line-height: 1.02; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase;
}
.nav__logo::before {
  content: ""; position: absolute; left: -0.22rem; top: -0.22rem; width: 0.36rem; height: 0.36rem; background: var(--orange);
  animation: logo-breathe 4.2s ease-in-out infinite;
}
/* a thin orange glint travels round the outline, one lap every eight seconds */
@property --logo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nav__logo::after {
  content: ""; position: absolute; inset: -1.5px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--logo-angle), transparent 0deg 250deg, rgba(255, 100, 40, 0) 262deg, rgba(255, 130, 80, 0.95) 300deg, rgba(255, 100, 40, 0) 338deg, transparent 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: logo-sweep 8s linear infinite;
}
@keyframes logo-sweep { to { --logo-angle: 360deg; } }
@keyframes logo-breathe { 50% { box-shadow: 0 0 0 0.16rem rgba(255, 100, 40, 0.14), 0 0 0.7rem rgba(255, 100, 40, 0.5); } }
html.motion-paused .nav__logo::before, html.motion-paused .nav__logo::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .nav__logo::after { display: none; } }
.nav__logo { transition: opacity 0.35s var(--ease); }
html.is-loading .nav__logo { opacity: 0; }
.nav__right { display: flex; align-items: center; gap: clamp(0.6rem, 1.2vw, 1rem); }

/* Start a project: an orange pill with a dark badge that turns on hover */
.nav__cta {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0.5rem 0.45rem 1.15rem; border-radius: 999px;
  background: var(--orange); color: var(--ink);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.01em;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), transform 0.5s var(--ease);
}
.nav__cta-label { position: relative; z-index: 1; }
.nav__cta-badge {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  transition: transform 0.55s var(--ease), background 0.45s var(--ease), color 0.45s var(--ease);
}
.nav__cta:hover { background: var(--paper); color: var(--ink); }
.nav__cta:hover .nav__cta-badge { background: var(--orange); color: var(--ink); transform: rotate(45deg) scale(1.06); }
.nav__cta:active { transform: scale(0.97); }
html[data-nav="orange"] .nav__cta { background: var(--ink); color: var(--paper); }
html[data-nav="orange"] .nav__cta .nav__cta-badge { background: var(--orange); color: var(--ink); }
html[data-nav="orange"] .nav__cta:hover { background: var(--paper); color: var(--ink); }
html[data-nav="light"] .nav__cta:hover { background: var(--ink); color: var(--paper); }

/* Menu: a circle with two lines; the ring sweeps round on hover */
.nav__menu { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; }
.nav__menu::before { /* the resting outline */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px currentColor; opacity: 0.45;
  transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.nav__menu::after { /* the ring that travels round it */
  content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ring-angle, 0deg), transparent 0deg 250deg, rgba(255, 100, 40, 0) 265deg, var(--orange) 305deg, rgba(255, 100, 40, 0) 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
@property --ring-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes nav-ring { to { --ring-angle: 360deg; } }
.nav__menu:hover::after, .nav__menu:focus-visible::after { opacity: 1; animation: nav-ring 1.6s linear infinite; }
.nav__menu:hover::before { opacity: 1; transform: scale(1.06); }
.nav__burger { display: grid; gap: 0.32rem; width: 0.95rem; }
.nav__burger i { display: block; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transform-origin: right; transition: transform 0.5s var(--ease); }
.nav__burger i:last-child { transform: scaleX(0.7); }
.nav__menu:hover .nav__burger i:last-child, .nav__menu:focus-visible .nav__burger i:last-child { transform: scaleX(1); }
.nav__menu:hover .nav__burger i:first-child, .nav__menu:focus-visible .nav__burger i:first-child { transform: scaleX(0.7); }
.nav__menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav__menu:active { transform: scale(0.95); }

@media (max-width: 760px) {
  .nav__cta { display: none; }
}

/* ---------- full-screen menu: ink panel, orange sheet wiping across it ---------- */
.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  --line: var(--line-on-ink);
}
.menu.is-open { visibility: visible; }
.menu__sheet { /* the orange sheet that leads the reveal */
  position: absolute; inset: 0; z-index: 3; background: var(--orange); pointer-events: none;
  clip-path: inset(100% 0 0 0);
}
.menu__inner {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: auto 1fr;
  padding: 0 var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
}
.menu__inner::before { /* a warm pool of light behind the list */
  content: ""; position: absolute; inset: auto -20% -30% -10%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 100, 40, 0.16), transparent 70%);
}
.menu__bar { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; font-weight: 500; letter-spacing: -0.01em; }
.menu__close { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.78rem; }
.menu__close span:first-child { position: relative; padding-bottom: 2px; }
.menu__close span:first-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform 0.4s var(--ease); }
.menu__close:hover span:first-child::after { transform: scaleX(0); }
.menu__x { position: relative; width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background 0.4s var(--ease), transform 0.6s var(--ease); }
.menu__x::before, .menu__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1px; background: currentColor; translate: -50% -50%; }
.menu__x::before { rotate: 45deg; }
.menu__x::after { rotate: -45deg; }
.menu__close:hover .menu__x { background: var(--orange); transform: rotate(90deg); }

.menu__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-content: center; padding-block: clamp(1rem, 4vh, 3rem); }
.menu__list { width: 100%; border-top: 1px solid var(--line); }
.menu__list li { border-bottom: 1px solid var(--line); overflow: hidden; }
.menu__list a {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem;
  padding: clamp(0.55rem, 1.5vh, 1.1rem) 0;
  font-size: clamp(2rem, 6vh, 4.5rem); line-height: 1.04; letter-spacing: -0.045em; font-weight: 500;
}
.menu__list a::before { /* orange sweeps in from the left on hover */
  content: ""; position: absolute; inset: 0 -100vw 0 -2rem; z-index: -1; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.menu__num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.01em; color: var(--paper-dim); transition: color 0.35s var(--ease); padding-left: 0.25rem; }
.menu__label { display: block; transition: transform 0.6s var(--ease); }
.menu__go { font-size: 1.25rem; opacity: 0; transform: translateX(-0.75rem); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.menu__list a:hover::before, .menu__list a:focus-visible::before { transform: scaleX(1); }
.menu__list a:hover, .menu__list a:focus-visible { color: var(--ink); }
.menu__list a:hover .menu__num, .menu__list a:focus-visible .menu__num { color: rgba(5, 5, 5, 0.6); }
.menu__list a:hover .menu__label { transform: translateX(1rem); }
.menu__list a:hover .menu__go { opacity: 1; transform: translateX(-0.5rem); }
.menu__list a[aria-current] .menu__num { color: var(--orange); }

.menu__side { display: grid; align-content: center; gap: clamp(1.25rem, 3vh, 2rem); }
.menu__side-head { color: var(--paper-dim); }
.menu__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1.5rem; }
.menu__services a { position: relative; display: inline-block; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--paper-dim); transition: color 0.3s var(--ease); }
.menu__services a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.menu__services a:hover { color: var(--paper); }
.menu__services a:hover::after { transform: scaleX(1); }
.menu__meta { display: grid; gap: 0.35rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; color: var(--paper-dim); padding-top: clamp(1rem, 2.5vh, 1.75rem); border-top: 1px solid var(--line); }
.menu__meta a { color: var(--paper); }
.menu__meta a:hover { color: var(--orange); }
@media (max-width: 899px) {
  .menu__body { grid-template-columns: minmax(0, 1fr); gap: 2rem; align-content: start; overflow-y: auto; }
  .menu__list a { grid-template-columns: 2.75rem 1fr auto; font-size: clamp(1.9rem, 8vw, 3rem); }
  .menu__services { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 0.9rem; }
  .menu__side { align-content: start; }
}

/* ---------- stage (hero + assembly + services, over the fixed canvas) ---------- */
.stage { position: relative; z-index: 1; }

.hero {
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--nav-h) + clamp(2rem, 7svh, 5rem)) var(--gutter) clamp(1.25rem, 3svh, 2rem);
  gap: 2rem;
}
/* two short lines, the second dimmer */
.hero__intro {
  display: flex; flex-wrap: wrap; gap: 0.5rem clamp(2rem, 3.2vw, 3.5rem);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--paper);
}
.hero__intro-dim { color: rgba(255, 255, 255, 0.5); }
.hero__main { align-self: end; position: relative; }
.hero__title {
  font-size: clamp(3rem, 7.6vw, 7.6rem);
  line-height: 0.92; letter-spacing: -0.06em; font-weight: 400;
  max-width: 12ch;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__line > span { display: block; }
.hero__accent {
  display: inline-block; padding-right: 0.06em;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: 1.04em; letter-spacing: -0.02em; color: var(--orange);
}
.hero__services { margin-top: clamp(1.75rem, 4svh, 2.75rem); font-size: clamp(0.9rem, 1vw, 1rem); color: var(--paper-dim); letter-spacing: -0.01em; }
.hero__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
}
.scroll-cue { display: inline-flex; align-items: center; gap: 1rem; font-size: 0.95rem; color: var(--paper-dim); transition: color 0.3s var(--ease); }
.scroll-cue:hover { color: var(--paper); }
.scroll-cue__btn {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--line-on-ink); color: var(--orange);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.scroll-cue__btn svg { animation: cue-nudge 2.2s var(--ease) infinite; }
.scroll-cue:hover .scroll-cue__btn { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@keyframes cue-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
html.motion-paused .scroll-cue__btn svg { animation-play-state: paused; }

/* starfield: fixed behind the key canvas; the stage's dark sections show it */
.stars-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

@media (max-width: 760px) {
  .hero { padding-top: calc(var(--nav-h) + 1.25rem); gap: 1.25rem; }
  .hero__main { align-self: start; }
  .hero__intro { font-size: 1rem; }
}

/* assembly: tall section with a sticky viewport so the keys converge on scroll */
.assembly { height: 240vh; position: relative; }
html.services-flight .assembly { height: 270vh; } /* runway for both lines to leave before the services pin */
.assembly__sticky {
  position: sticky; top: 0; height: 100svh;
  padding: calc(var(--nav-h) + 1rem) var(--gutter) 2.5rem;
  display: grid; grid-template-rows: 1fr 1fr; align-content: space-between;
}
.assembly__line {
  font-size: clamp(1.9rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500;
  overflow: hidden; padding-bottom: 0.1em;
}
.assembly__line > span { display: block; }
.assembly__line--1 { grid-area: 1 / 1; align-self: start; justify-self: start; max-width: 12ch; }
.assembly__line--2 { grid-area: 2 / 1; align-self: end; justify-self: end; text-align: right; max-width: 14ch; color: var(--orange); }
@media (max-width: 760px) {
  .assembly { height: 200vh; }
  .assembly__line--2 { justify-self: start; text-align: left; }
}

/* WebGL fallback: a static arrangement of styled keys */
.fallback { display: none; position: absolute; inset: 0; z-index: -1; align-items: center; justify-content: center; padding: 0 var(--gutter); }
html.no-webgl .fallback { display: flex; }
.fallback__grid { display: grid; grid-template-columns: repeat(3, 5.5rem); gap: 0.6rem; }
.fallback__key {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--orange); border-radius: 0.45rem;
  background: #111; color: var(--paper);
  font-family: var(--mono); font-size: 0.7rem;
  box-shadow: inset 0 0 0 1px rgba(255, 100, 40, 0.25), 0 0 24px rgba(255, 100, 40, 0.15);
}
.fallback__key--main { background: var(--orange); color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .fallback__grid { grid-template-columns: repeat(3, 4rem); } }

/* services: the assembled keys fly apart and land on these keycap slots.
   The HTML keycap mirrors the 3D label layout (keys.js labelTexture), in units of
   the cap height, so the swap from 3D key to HTML key is not visible. */
.services {
  position: relative;
  padding: var(--section-y) var(--gutter);
  background: var(--ink);
  --fg: var(--paper); --fg-dim: var(--paper-dim); --line: var(--line-on-ink);
  --cap: 4.5rem;
}
.services .section__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.services .section__label { margin-bottom: 0.75rem; }
.services .h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.services .h2 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -0.02em; color: var(--orange); }
.services__runway { display: none; }
.services__pin { position: relative; } /* sticky in flight mode */
.services__hint, .services__panel, .services__word { display: none; }

/* ---- list (narrow screens, and before JS): cap on the left, copy on the right ---- */
.svc { position: relative; display: flex; align-items: flex-start; gap: clamp(1.25rem, 3vw, 2rem); padding-block: 1.5rem; border-top: 1px solid var(--line); }
.svc__text { position: relative; flex: 1 1 auto; min-width: 0; }
.svc__num { color: var(--orange); }
.svc__title { margin-top: 0.4rem; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.svc__short { margin-top: 0.5rem; color: var(--fg-dim); max-width: 44ch; font-size: 0.98rem; line-height: 1.55; }
.svc__more {
  margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 3px; box-shadow: inset 0 -1px 0 var(--line);
  transition: color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.svc__more::after { content: "+"; transition: transform 0.45s var(--ease); }
.svc__more:hover { color: var(--orange); box-shadow: inset 0 -1px 0 var(--orange); }
.svc.is-open .svc__more::after { transform: rotate(45deg); }
.svc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.svc.is-open .svc__body { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; min-height: 0; }
.svc__inner > p { padding-top: 1.1rem; color: var(--fg-dim); font-size: 0.98rem; line-height: 1.6; max-width: 58ch; }
.svc__list { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.45rem; color: var(--fg-dim); }
.svc__list li {
  padding: 0.4rem 0.8rem; border-radius: 99px; font-size: 0.72rem; line-height: 1.3;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line);
}
.svc__inner > .link { margin: 1.25rem 0 0.25rem; }

/* ---- keycaps ---- */
.svc__cap {
  container-type: size;
  position: relative; flex: none;
  width: var(--cap); height: var(--cap);
  border-radius: 13%/13%;
  background: linear-gradient(160deg, #2c2a28 0%, #221f1e 55%, #1a1918 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 100, 40, 0.5),
    inset 0 0 0 calc(var(--cap) * 0.05) rgba(10, 9, 9, 0.35),
    0 calc(var(--cap) * 0.06) 0 -1px #3a1a0c,
    0 0 1.5rem rgba(255, 100, 40, 0.12);
}
.svc__cap--main {
  width: calc(var(--cap) * 3.4 / 1.4);
  border-radius: calc(var(--cap) * 0.13);
  background: linear-gradient(165deg, #ff8a55 0%, #f4692f 60%, #e45a22 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 176, 138, 0.55),
    0 calc(var(--cap) * 0.06) 0 -1px #8a3210,
    0 0 2rem rgba(255, 100, 40, 0.25);
}
.svc__cap::before { /* index mark */
  content: ""; position: absolute; left: 20.8cqh; top: 20.8cqh;
  width: 3cqh; height: 3cqh; background: rgba(255, 100, 40, 0.9);
}
.svc__cap--main::before { background: rgba(5, 5, 5, 0.55); }
.svc__cap > span {
  position: absolute; left: 20.8cqh; bottom: 28.1cqh; transform: translateY(50%);
  font-family: var(--mono); font-weight: 500; font-size: 16.3cqh; line-height: 1;
  color: var(--paper); white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.svc__cap--long > span { font-size: 9.9cqh; }
.svc__cap--main > span { color: var(--ink); }

/* ============================================================================
   Type to explore (wide screens, set up by initServiceExplore)
   Left: heading over a staggered keyboard. Right: one glass panel holding the active
   service. Behind the panel: the active service's name in large italic type.
   ============================================================================ */
.services.is-explore {
  --cap: clamp(4.5rem, min(6.4vw, 10.5svh), 7rem);
  --kg: calc(var(--cap) * 0.17);            /* gap between keys */
  --u: calc((var(--cap) + var(--kg)) / 4);  /* keyboard column: a key is four of them */
  --board-w: calc(var(--u) * 18);
}
.services.is-explore .services__pin {
  display: grid; grid-template-columns: max-content minmax(22rem, 36rem);
  grid-template-areas: "head panel" "board panel";
  grid-template-rows: auto auto;
  justify-content: space-between; align-content: center;
  column-gap: clamp(3rem, 6vw, 7rem);
}
.services.is-explore .section__head { grid-area: head; align-self: end; margin-bottom: clamp(1.75rem, 5svh, 3.25rem); position: relative; z-index: 1; }

.services.is-explore .services__board { grid-area: board; position: relative; z-index: 1; align-self: start; }
.services.is-explore .services__grid {
  display: grid;
  grid-template-columns: repeat(18, var(--u));
  grid-auto-rows: var(--cap);
  row-gap: var(--kg);
}
.services.is-explore .svc { display: block; padding: 0; border: 0; grid-row: 2; }
.services.is-explore .svc:nth-child(1) { grid-row: 1; grid-column: 1 / span 10; }  /* TEAM OF KEYS */
.services.is-explore .svc:nth-child(2) { grid-row: 1; grid-column: 11 / span 4; }  /* DESIGN */
.services.is-explore .svc:nth-child(3) { grid-row: 1; grid-column: 15 / span 4; }  /* WEB */
.services.is-explore .svc:nth-child(4) { grid-column: 3 / span 4; }                /* APP */
.services.is-explore .svc:nth-child(5) { grid-column: 7 / span 4; }                /* AI */
.services.is-explore .svc:nth-child(6) { grid-column: 11 / span 4; }               /* MARKETING */
.services.is-explore .svc:nth-child(7) { grid-column: 15 / span 4; }               /* XR */
.services.is-explore .svc:nth-child(8) { grid-row: 3; grid-column: 5 / span 4; }   /* 3D */
.services.is-explore .svc:nth-child(9) { grid-row: 3; grid-column: 9 / span 4; }   /* GAMES */

/* a warm pool of light under the active key */
.services.is-explore .svc::before {
  content: ""; position: absolute; left: -30%; right: -30%; top: 35%; height: 110%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 100, 40, 0.32), transparent);
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.services.is-explore .svc.is-active::before { opacity: 1; }
.services.is-explore .svc--main::before { left: 0; right: 30%; }

/* the key presses down (translate, not transform: keys.js measures these boxes) */
.services.is-explore .svc__cap {
  cursor: pointer; outline: none;
  transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s var(--ease), filter 0.6s var(--ease);
}
.services.is-explore .svc.is-active .svc__cap {
  translate: 0 calc(var(--cap) * 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 120, 60, 0.95),
    inset 0 0 0 calc(var(--cap) * 0.05) rgba(10, 9, 9, 0.3),
    0 calc(var(--cap) * 0.015) 0 -1px #3a1a0c,
    0 0 2.5rem rgba(255, 100, 40, 0.35);
}
.services.is-explore .svc.is-active .svc__cap:not(.svc__cap--main) > span { color: #ff8a55; }
.services.is-explore .svc.is-active .svc__cap--main {
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 170, 0.8),
    0 calc(var(--cap) * 0.015) 0 -1px #8a3210,
    0 0 3.5rem rgba(255, 100, 40, 0.5);
  filter: brightness(1.06);
}
.services.is-explore .svc.is-pressed .svc__cap { translate: 0 calc(var(--cap) * 0.07); transition-duration: 0.08s; }
.services.is-explore .svc__cap:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--orange); }

.services.is-explore .services__hint {
  display: block;
  position: absolute; left: calc(var(--u) * 13 + var(--kg) * 0.5); bottom: calc(var(--cap) / 2); translate: 0 50%;
  width: max-content; font-size: 0.72rem; line-height: 1.8; letter-spacing: 0.04em; color: var(--paper-dim);
}
.services__hint kbd {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-inline: 0.15em;
  border-radius: 0.3em; font: inherit; color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 rgba(255, 255, 255, 0.12);
}

/* ---- the glass panel ---- */
.services.is-explore .services__panel {
  grid-area: panel; align-self: center; position: relative; z-index: 1;
  display: block;
  padding: clamp(1.5rem, 3.6svh, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.25rem, 3svh, 2rem);
  border-radius: 1.75rem;
  background:
    radial-gradient(120% 80% at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.045));
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.75);
}
.services.is-explore .services__panel::before { /* hairline edge that catches the light */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 35%, rgba(255, 140, 90, 0.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* every service's copy sits in the same cell, so the panel is as tall as the longest one and never resizes */
.services__stack { display: grid; }
.services__stack > .svc__text {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; filter: blur(8px); translate: 0 0.75rem;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), translate 0.35s var(--ease), visibility 0s linear 0.35s;
}
.services__stack > .svc__text.is-active {
  opacity: 1; visibility: visible; filter: none; translate: 0 0;
  transition: opacity 0.8s var(--ease) 0.12s, filter 0.8s var(--ease) 0.12s, translate 0.8s var(--ease) 0.12s, visibility 0s;
}
.services__stack .svc__num { font-size: 0.78rem; letter-spacing: 0.06em; }
.services__stack .svc__num::after { content: " / 09"; color: var(--paper-dim); opacity: 0.6; }
.services__stack .svc__title { margin-top: 0.9rem; font-size: clamp(1.9rem, 2.8vw, 2.9rem); letter-spacing: -0.035em; line-height: 1.02; }
.services__stack .svc__short { margin-top: 0.7rem; color: var(--paper); font-size: clamp(1rem, 1.15vw, 1.12rem); max-width: 34ch; }
.services__stack .svc__more { display: none; } /* the panel always shows the details */
.services__stack .svc__body { grid-template-rows: 1fr; }
.services__stack .svc__inner > p { padding-top: 0.9rem; font-size: 0.92rem; line-height: 1.6; }
.services__stack .svc__list { margin-top: 1.1rem; }

.services__meter { display: flex; gap: 0.35rem; margin-top: clamp(1.25rem, 3svh, 1.75rem); }
.services__meter i {
  position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.services__meter i::after {
  content: ""; position: absolute; inset: 0; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
}
.services__meter i.is-done::after { transform: scaleX(1); opacity: 0.35; }
.services__meter i.is-active::after { transform: scaleX(1); transition: transform 0.6s var(--ease); }
.services__meter.is-playing i.is-active::after { transition: transform var(--dwell, 4.5s) linear; }
.services__meter.is-playing.is-starting i.is-active::after { transform: scaleX(0); transition: none; }

/* ---- the name, in large type behind the glass ---- */
.services.is-explore .services__word {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--board-w) + clamp(1rem, 3vw, 3rem)); top: 50%; translate: 0 -44%; /* starts beside the keyboard, runs under the glass */
  margin: 0; white-space: nowrap; line-height: 0.9;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: var(--word-size, clamp(9rem, 19vw, 22rem)); letter-spacing: -0.03em;
}
.services__word .word {
  display: block; overflow: clip; overflow-clip-margin: 0.25em; padding-inline: 0.1em;
  color: rgba(255, 112, 58, 0.62);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, 0.3) 60%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 10%, rgba(0, 0, 0, 0.3) 60%, transparent 92%);
}
.services__word .word + .word { position: absolute; inset: 0 0 auto auto; }
.services__word .ch { display: inline-block; padding-right: 0.06em; } /* italic overhang */

/* short desktop windows (e.g. 1280x720): tighten so the pinned viewport still fits */
@media (max-height: 780px) {
  .services.is-explore .h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .services.is-explore .section__head { margin-bottom: 1.5rem; }
  .services__stack .svc__inner > p { font-size: 0.88rem; }
  .services__stack .svc__title { font-size: clamp(1.7rem, 2.4vw, 2.4rem); }
}

/* flight mode: the services viewport pins exactly where the assembly pin releases (negative
   margin), stays hidden until then, and holds still over the runway while every key lands.
   Caps stay empty until their key lands; copy, glass and type wait for the last landing,
   so nothing sits over a flying key. */
html.services-flight .services {
  background: transparent;
  margin-top: -100svh; padding-block: 0;
}
html.services-flight .services__pin {
  position: sticky; top: var(--pin-top, 0px);
  min-height: 100svh; align-content: center;
  padding: calc(var(--nav-h) + 1rem) 0 clamp(1rem, 3svh, 2rem);
  visibility: hidden;
}
html.services-flight .services.is-engaged .services__pin { visibility: visible; }
html.services-flight .services__runway { display: block; height: 150svh; }
html.services-flight .svc:not(.is-landed) .svc__cap { visibility: hidden; }
html.services-flight .svc > .svc__text,
html.services-flight .services__panel,
html.services-flight .services__hint,
html.services-flight .services__word {
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s linear, visibility 0s linear 0.2s;
}
html.services-flight .services.is-revealed .svc > .svc__text,
html.services-flight .services.is-revealed .services__panel,
html.services-flight .services.is-revealed .services__hint,
html.services-flight .services.is-revealed .services__word {
  opacity: 1; visibility: visible;
  transition: opacity 1s var(--ease) 0.15s, visibility 0s;
}
html.services-flight .services.is-revealed .services__hint { transition-delay: 0.9s; }
/* the heading arrives with the section head (main.js initServices scrubs it in as the pin
   engages), so the cluster is never a bare screen; only the card copy waits for the keys */
html.services-flight .services.is-explore:not(.is-revealed) .svc::before { opacity: 0; }

@media (max-width: 760px) {
  .svc { gap: 1.1rem; padding-block: 1.3rem; }
  .svc__short { font-size: 0.95rem; }
}

/* ---------- generic section ---------- */
.section {
  position: relative; z-index: 3;
  padding: var(--section-y) var(--gutter);
}
.section--paper { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-dim: var(--ink-dim); --line: var(--line-on-paper); }
.section--ink { background: var(--ink); color: var(--paper); --fg: var(--paper); --fg-dim: var(--paper-dim); --line: var(--line-on-ink); }

.section__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section__head--split { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: end; }
.section__label { color: var(--fg-dim); }
.h2 {
  font-size: clamp(2.2rem, 5.2vw, 5.2rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500;
}
@media (max-width: 760px) { .section__head--split { grid-template-columns: 1fr; gap: 0.75rem; } }

.link { position: relative; display: inline-block; padding-bottom: 2px; font-family: var(--mono); font-size: 0.78rem; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transition: transform 0.35s var(--ease); transform-origin: left; }
.link:hover::after { transform: scaleX(0.35); }
.link--orange { color: var(--orange); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.6rem; border-radius: 999px; border: 1px solid currentColor;
  font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn--paper { color: var(--paper); }
.btn--paper:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* ---------- the collective (about) ---------- */
.collective { padding-bottom: calc(var(--section-y) + 14vh); } /* room for the pillars panel's curved edge */

/* top: a small label on the left, the statement on the right with an indented first line */
.about__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 2rem; align-items: start; }
.about__label { display: inline-flex; align-items: center; gap: 0.9rem; padding-top: 0.6rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.about__dot { position: relative; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--ink); }
.about__dot::after {
  content: ""; position: absolute; inset: -0.35rem; border-radius: 50%; border: 1px solid var(--orange);
  animation: about-pulse 2.4s var(--ease) infinite;
}
@keyframes about-pulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
html.motion-paused .about__dot::after { animation-play-state: paused; }
.statement {
  font-size: clamp(1.7rem, 3.1vw, 3.3rem); line-height: 1.14; letter-spacing: -0.035em; font-weight: 500;
  text-indent: 3.4em; max-width: 34ch;
}
/* each word sits in a mask and rises into it; its colour then follows the scroll */
.statement .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; text-indent: 0; }
.statement .w > span { display: inline-block; }

/* middle: a two-tone lead and two dotted lists */
.about__mid {
  margin-top: clamp(4rem, 8vw, 7rem);
  display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.9fr); gap: 2rem;
}
.about__lede { grid-column: 2; max-width: 26ch; font-size: clamp(1.2rem, 1.55vw, 1.5rem); line-height: 1.3; letter-spacing: -0.02em; font-weight: 500; }
.about__lede span { color: rgba(5, 5, 5, 0.5); }
.about__list { display: grid; gap: 0.95rem; align-content: start; font-size: 1.05rem; color: rgba(5, 5, 5, 0.72); }
.about__list li { position: relative; padding-left: 1.4rem; transition: translate 0.45s var(--ease), color 0.3s var(--ease); } /* translate, not transform: GSAP owns transform */
.about__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 0.28rem; height: 0.28rem; border-radius: 50%;
  background: currentColor; transition: transform 0.45s var(--ease), background-color 0.3s var(--ease);
}
.about__list li:hover { color: var(--ink); translate: 0.35rem 0; }
.about__list li:hover::before { background: var(--orange); transform: scale(2.2); }

/* bottom: four pills */
.about__pills {
  margin-top: clamp(4rem, 8vw, 7rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.pill {
  position: relative; isolation: isolate; height: clamp(9rem, 12.5vw, 11.5rem); border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0 1.5rem; cursor: default; will-change: transform;
  --mx: 50%; --my: 50%; --sheen: rgba(255, 255, 255, 0.22);
}
/* a soft light that follows the pointer across the surface (the touch itself is GSAP: initAbout) */
.pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), var(--sheen), transparent 55%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.pill.is-touched::after { opacity: 1; }
.pill > * { will-change: transform; }
.pill__value { font-size: clamp(2.8rem, 4.3vw, 4.2rem); line-height: 1; letter-spacing: -0.04em; font-weight: 400; font-variant-numeric: tabular-nums; }
.pill__value--word { font-size: clamp(2rem, 3.1vw, 3rem); }
.pill__label { margin-top: 0.7rem; font-size: clamp(0.9rem, 1.05vw, 1.05rem); }
.pill--ink { background: var(--ink); color: var(--paper); box-shadow: 0 1.75rem 2rem -1.25rem rgba(5, 5, 5, 0.55); --sheen: rgba(255, 255, 255, 0.14); }
.pill--line { border: 1px solid var(--line-on-paper); perspective: 500px; --sheen: rgba(255, 100, 40, 0.1); }
.pill--orange { background: var(--orange); color: var(--ink); box-shadow: 0 1.75rem 2rem -1.25rem rgba(255, 100, 40, 0.55); --sheen: rgba(255, 230, 210, 0.45); }
.pill--stone { background: #e4ded3; color: var(--ink); --sheen: rgba(255, 255, 255, 0.75); }

/* the floating keycap in the outlined pill */
.pill__key { position: relative; width: 5.2rem; height: 5.2rem; transform-style: preserve-3d; }
.pill__cap {
  position: absolute; inset: 0.4rem; border-radius: 1rem;
  background: linear-gradient(160deg, #ffa274 0%, #ff6f35 45%, #e2511b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 160, 0.6),
    inset 0 -0.45rem 0.6rem rgba(120, 35, 5, 0.35),
    0 0.35rem 0 #a33a10,
    0 0.55rem 0 #7c2a0a;
  transform: rotateX(22deg) rotateZ(-12deg);
  animation: key-float 5s ease-in-out infinite;
}
.pill__cap i { position: absolute; left: 22%; top: 22%; width: 0.35rem; height: 0.35rem; background: rgba(5, 5, 5, 0.55); }
.pill__shadow {
  position: absolute; left: 18%; right: 18%; bottom: -0.55rem; height: 0.7rem; border-radius: 50%;
  background: rgba(5, 5, 5, 0.25); filter: blur(4px);
  animation: key-shadow 5s ease-in-out infinite;
}
@keyframes key-float { 50% { transform: rotateX(28deg) rotateZ(-4deg) translateY(-0.55rem); } }
@keyframes key-shadow { 50% { transform: scale(0.75); opacity: 0.6; } }
html.motion-paused .pill__cap, html.motion-paused .pill__shadow { animation-play-state: paused; }

@media (max-width: 1000px) {
  .about__top { grid-template-columns: 1fr; gap: 1.5rem; }
  .about__mid { grid-template-columns: 1fr 1fr; }
  .about__lede { grid-column: 1 / -1; max-width: 32ch; }
  .about__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .statement { text-indent: 1.5em; }
  .pill { height: 7.5rem; padding: 0 0.75rem; }
  .pill__value { font-size: 2.3rem; }
  .pill__value--word { font-size: 1.6rem; }
  .pill__label { font-size: 0.78rem; }
}

/* a small keycap set into the sentence, after "key" */
.kchip {
  display: inline-block; width: 0.72em; height: 0.72em; margin: 0 0.06em 0 0.14em; vertical-align: -0.02em;
  border-radius: 0.14em; background: linear-gradient(165deg, #ff8a55 0%, #f4692f 60%, #e45a22 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 138, 0.55), 0 0.08em 0 #8a3210, 0 0.2em 0.6em rgba(255, 100, 40, 0.35);
  position: relative;
}
.kchip::before { content: ""; position: absolute; left: 22%; top: 22%; width: 9%; height: 9%; background: rgba(5, 5, 5, 0.55); }

/* ---------- what sets us apart (pillars) ---------- */
/* Static (no motion): a dark band with the three pillars side by side. */
.pillars {
  position: relative; z-index: 4;
  margin-top: -14vh;
  background: var(--ink); color: var(--paper);
  --fg: var(--paper); --fg-dim: var(--paper-dim); --line: var(--line-on-ink);
  border-radius: 2.5rem 2.5rem 0 0;
  padding: var(--section-y) var(--gutter);
}
.pillars__label, .pillars__hint { color: var(--fg-dim); }
.pillars__list { margin-top: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pillar { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.pillar__title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; }
.pillar__text { margin-top: 1rem; color: var(--fg-dim); max-width: 36ch; }
.pillar__title .ch--dot { color: var(--orange); }
/* the full stop is drawn as a real square, so the card can open from exactly what the eye sees */
.pillar__title .ch--dot b { display: inline-block; width: 0.13em; height: 0.13em; margin: 0 0.02em 0 0.05em; background: currentColor; vertical-align: baseline; }
.pillars__meta, .pillars__hint, .pillars__card { display: none; }
@media (max-width: 900px) { .pillars__list { grid-template-columns: 1fr; } }

/* Kinetic (JS + motion): a tall pinned stage. The curved top flattens as it arrives. */
html.pillars-kinetic .pillars {
  height: 560vh; padding: 0; /* a 460vh pin: three phrases, then a long, slow opening */
  border-radius: 50% 50% 0 0 / var(--curve, 16vh) var(--curve, 16vh) 0 0;
}
html.pillars-kinetic .pillars__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: radial-gradient(70% 45% at 50% 108%, rgba(255, 100, 40, 0.16), transparent 70%);
}
html.pillars-kinetic .pillars__label { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 1.5rem); text-align: center; }
html.pillars-kinetic .pillars__hint { display: block; position: absolute; left: 0; right: 0; bottom: 1.75rem; text-align: center; }
html.pillars-kinetic .pillars__list { margin: 0; display: block; position: absolute; inset: 0; }
html.pillars-kinetic .pillar {
  position: absolute; inset: 0; border: 0; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
html.pillars-kinetic .pillar__title {
  position: relative; white-space: nowrap;
  font-size: clamp(2rem, 8.4vw, 8.5rem); line-height: 1; letter-spacing: -0.045em;
}
html.pillars-kinetic .pillar__title .ch { display: inline-block; will-change: transform, opacity; }
html.pillars-kinetic .pillar__text {
  position: absolute; top: calc(50% + clamp(2.5rem, 7vw, 6.5rem)); left: 50%; width: min(38ch, calc(100% - 2 * var(--gutter)));
  transform: translateX(-50%); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; will-change: transform, opacity;
}
html.pillars-kinetic .pillars__meta {
  display: flex; align-items: center; gap: 0.9rem;
  position: absolute; left: var(--gutter); bottom: 1.75rem; color: var(--fg-dim);
}
.pillars__count { color: var(--paper); min-width: 2ch; }
.pillars__bar { position: relative; width: clamp(4rem, 10vw, 9rem); height: 1px; background: var(--line); overflow: hidden; }
.pillars__bar > span { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }
/* finale: a paper card opens from the centre to full screen and becomes the work section's ground */
html.pillars-kinetic .pillars__card {
  display: grid; place-content: center; justify-items: center; gap: 0.75rem;
  position: absolute; inset: 0; background: var(--paper); color: var(--ink);
  clip-path: inset(50% 50% round 1.5rem); visibility: hidden;
}
.pillars__card .mono { color: var(--ink-dim); }
.pillars__card-title { font-size: clamp(2.6rem, 10vw, 10rem); line-height: 0.95; letter-spacing: -0.05em; font-weight: 500; }
@media (max-width: 760px) {
  html.pillars-kinetic .pillars__meta { left: 50%; transform: translateX(-50%); bottom: 3.75rem; }
}

/* ---------- expandable rows (FAQ) ---------- */
.rows { border-bottom: 1px solid var(--line); }
.row { border-top: 1px solid var(--line); }
.row__h { font-size: inherit; font-weight: inherit; }
.row__head {
  display: grid; grid-template-columns: 4.5rem 1fr 2rem; align-items: center;
  width: 100%; text-align: left; padding: clamp(1.25rem, 2.6vw, 2.2rem) 0;
  transition: color 0.3s var(--ease);
}
.row--faq .row__head { grid-template-columns: 1fr 2rem; }
.row__head:hover { color: var(--orange); }
.row__num { color: var(--fg-dim); transition: color 0.3s var(--ease); }
.row__head:hover .row__num { color: inherit; }
.row__title { font-size: clamp(1.5rem, 3.4vw, 3.3rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 500; }
.row--faq .row__title { font-size: clamp(1.25rem, 2.4vw, 2.2rem); }
.row__icon { position: relative; width: 1.25rem; height: 1.25rem; justify-self: end; }
.row__icon::before, .row__icon::after {
  content: ""; position: absolute; background: currentColor; top: 50%; left: 50%;
  transition: transform 0.4s var(--ease);
}
.row__icon::before { width: 100%; height: 1px; transform: translate(-50%, -50%); }
.row__icon::after { width: 1px; height: 100%; transform: translate(-50%, -50%); }
.row.is-open .row__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.row__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.row.is-open .row__body { grid-template-rows: 1fr; }
.row__inner { overflow: hidden; min-height: 0; }
.row__inner > * { margin-left: 4.5rem; }
.row--faq .row__inner > * { margin-left: 0; max-width: 60ch; }
.row__inner > :first-child { padding-top: 0.25rem; }
.row__inner > :last-child { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.row__value { max-width: 58ch; color: var(--fg-dim); font-size: 1.05rem; }
.row__list { margin-top: 1.25rem; color: var(--fg-dim); }
.row__list li { padding: 0.35rem 0; border-top: 1px solid var(--line); max-width: 40ch; }
.row__list + .link, .row__value + .link { margin-top: 1.5rem; }
@media (max-width: 760px) {
  .row__head { grid-template-columns: 2.5rem 1fr 1.5rem; }
  .row__inner > * { margin-left: 2.5rem; }
}

/* ---------- work ---------- */
/* Static (phones, reduced motion, no WebGL): a swipeable strip of tiles. */
.work { padding-inline: 0; padding-top: clamp(3rem, 6vw, 5rem); overflow-x: clip; } /* clip, not hidden: hidden would break the sticky stage */
.work__head { display: flex; justify-content: space-between; gap: 2rem; margin: 0 var(--gutter); padding-top: 1rem; border-top: 1px solid var(--line); }
.work__bgtitle, .work__gl, .work__foot { display: none; }
.work__track {
  display: flex; gap: clamp(1.25rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vw, 3.5rem); padding: 0 var(--gutter) 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.work__track::-webkit-scrollbar { display: none; }
.tile { flex: none; width: clamp(15rem, 70vw, 24rem); scroll-snap-align: start; }
.tile__link { display: block; color: inherit; text-decoration: none; }
.tile__link:hover .tile__title, .tile__link:focus-visible .tile__title { color: var(--orange-deep); }
.tile__title { transition: color 0.4s var(--ease); }
.tile__fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0.25rem; background: #0b0b0b; }
.tile__img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s var(--ease); }
.tile__content { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding-top: 1.1rem; }
.tile__num { grid-row: span 2; color: var(--orange); padding-top: 0.45rem; }
.tile__title { font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; }
.tile__meta { margin-top: 0.35rem; color: var(--fg-dim); }

/* Gooey (desktop, JS + motion + WebGL): pinned stage; the strip moves sideways with the scroll,
   a giant faint title drifts behind, and WebGL planes replace the images. */
html.work-gooey .work { height: var(--work-h, 400vh); padding: 0; }
html.work-gooey .work__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.work-gooey .work__head { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 1.25rem); z-index: 3; }
html.work-gooey .work__bgtitle {
  display: block; position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: clamp(8rem, 24vw, 26rem); line-height: 0.9; letter-spacing: -0.06em; font-weight: 500;
  color: var(--ink); opacity: 0.05; will-change: transform; pointer-events: none;
}
html.work-gooey .work__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
html.work-gooey .work__track {
  position: absolute; left: 0; top: 50%; z-index: 1; margin: 0;
  overflow: visible; scroll-snap-type: none;
  padding: 0 var(--gutter) 0 max(var(--gutter), 34vw); /* the strip stops with the last tile at the right gutter */
  gap: clamp(3rem, 6vw, 7rem); align-items: flex-start;
  transform: translateY(-46%); will-change: transform;
}
html.work-gooey .tile { width: clamp(15rem, 21vw, 24rem); }
html.work-gooey .tile:nth-child(even) { margin-top: clamp(3rem, 9svh, 6rem); } /* a gentle stagger */
html.work-gooey .tile__fig { background: transparent; border-radius: 0; overflow: visible; }
html.work-gooey .tile__img { cursor: pointer; }
html.work-gooey .tile__img.is-gl { opacity: 0; } /* the WebGL plane draws it */
html.work-gooey .work__foot {
  display: flex; align-items: center; gap: 1.5rem;
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.75rem; z-index: 3;
}
.work__progress { position: relative; flex: 1; max-width: 16rem; height: 1px; background: var(--line); overflow: hidden; }
.work__progress > span { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.work__hint { color: var(--fg-dim); }

/* ---------- our clients: logo keycaps in two drifting rows ---------- */
.clients { padding-inline: 0; overflow: hidden; }
.clients__head { text-align: center; display: grid; justify-items: center; padding: 0 var(--gutter); }
.clients__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; }
.clients__title { margin-top: 1.1rem; font-size: clamp(2.3rem, 4.4vw, 4.4rem); line-height: 1.04; letter-spacing: -0.05em; font-weight: 400; }
.clients__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.06em; letter-spacing: -0.02em; color: var(--orange); }
.clients__rows {
  margin-top: clamp(2.25rem, 4.5vw, 4rem); display: grid; gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients__row { overflow: hidden; padding-block: 0.5rem 1.75rem; } /* room for the keycap shadow inside the fade mask */
.clients__track { display: flex; width: max-content; gap: clamp(0.9rem, 1.6vw, 1.4rem); will-change: transform; }
.client { flex: none; }
/* each logo sits on a pale keycap */
.client__cap {
  --press: 0px;
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: clamp(12rem, 17vw, 16rem); height: clamp(5.5rem, 7.5vw, 7rem);
  border-radius: 1rem; background: linear-gradient(170deg, #fbf9f5 0%, #efeae1 100%);
  box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0.07), 0 calc(0.4rem - var(--press)) 0 #ddd6ca, 0 calc(0.9rem - var(--press)) 1.4rem -0.6rem rgba(5, 5, 5, 0.25);
  transform: translateY(var(--press));
  color: rgba(5, 5, 5, 0.55); filter: grayscale(1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease), filter 0.35s var(--ease);
}
.client__cap:hover { --press: 0.28rem; color: var(--ink); filter: grayscale(0); }
.client__mark { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.client__mark .acc { stroke: var(--orange); fill: rgba(255, 100, 40, 0.18); }
.client__name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.03em; }
/* a real logo fills the same box on every key, whatever size the file is; wide marks stay inside 74% of the width */
.client__logo { display: block; height: 58%; width: auto; max-width: 80%; object-fit: contain; }
.client__cap:has(.client__logo) { color: var(--ink); filter: grayscale(1) contrast(1.15); } /* a trimmed mark reads at a glance even in grey */
.clients__note { margin-top: clamp(1.25rem, 2.5vw, 2rem); text-align: center; color: var(--ink-dim); padding: 0 var(--gutter); }
.clients__note .link { color: var(--ink); margin-left: 0.3rem; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  .clients__rows { -webkit-mask-image: none; mask-image: none; }
  .clients__row { overflow-x: auto; }
}

/* ---------- stats (after Monod's stats section) ---------- */
/* Measurements follow the reference: 1400px column, 20px gutters, 10px card radius,
   14/600 labels with tight tracking, 60/500 figures. */
.stats {
  --card-h: clamp(17rem, 22.5vw, 20rem); --step: 12.5rem; --gap: 1.25rem;
  position: relative; padding-inline: clamp(1rem, 2.1vw, 1.875rem); padding-bottom: clamp(4rem, 8vw, 7.5rem);
  background: #000; letter-spacing: -0.02em;
}
.stats__wrap { position: relative; z-index: 1; max-width: 87.5rem; margin: 0 auto; }
.stats__head { text-align: center; display: grid; justify-items: center; padding-top: clamp(1rem, 3vw, 3rem); }
.stats__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.stats__title {
  margin-top: 1.25rem; color: #fff;
  font-size: clamp(2.6rem, 4.6vw, 4.5rem); line-height: 1.08; letter-spacing: -0.045em; font-weight: 600;
}
.stats__line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.stats__line > span { display: inline-block; }
.stats__chip { width: 0.86em; height: 0.86em; margin: 0 0.12em 0 0; vertical-align: -0.1em; border-radius: 50%; }
.stats__chip::before { display: none; }
.stats__lede { margin-top: 1.9rem; color: #fff; font-size: 1rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.03em; }
.stats__cta {
  margin-top: 2.5rem; padding: 0.85rem 1.5rem; border-radius: 999px;
  background: #1f1f1f; color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: -0.03em;
  box-shadow: -1.5rem 2.5rem 3rem -1rem rgba(255, 255, 255, 0.06);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.stats__cta:hover { background: #fff; color: #000; }

/* Cards: each is sticky at the same top but starts one --step lower than the last, so they
   arrive as a staircase and lock into a row one by one; the row then leaves together. */
.stats__cards {
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  align-items: start;
  height: calc(var(--card-h) + 3 * var(--step));
}
.stat {
  position: sticky; top: calc(var(--nav-h) + 2rem);
  margin-top: calc(var(--i, 0) * var(--step)); height: var(--card-h);
  perspective: 1200px; outline: none;
}
.stat__inner {
  position: relative; height: 100%; transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.44, 0, 0.1, 1);
}
.stat:hover .stat__inner, .stat:focus-visible .stat__inner, .stat.is-flipped .stat__inner { transform: rotateY(180deg); }
.stat:focus-visible .stat__face { box-shadow: 0 0 0 2px var(--orange); }
.stat__face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 1.25rem; border-radius: 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.035em; line-height: 1.3;
}
.stat__front { background: #141414; color: #fff; }
.stat__back { background: #fff; color: #000; transform: rotateY(180deg); }
.stat__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.stat__front .stat__top p { color: rgba(255, 255, 255, 0.8); }
.stat__back .stat__top p { color: rgba(0, 0, 0, 0.7); }
.stat__dots { display: inline-flex; flex: none; gap: 0.2rem; }
.stat__dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #3a3a3a; }
.stat__dots i.on { background: #fff; }
.stat__logo { width: 1.5rem; height: 1.5rem; color: #000; }
.stat__value { margin-top: auto; font-size: clamp(2.8rem, 4.2vw, 3.75rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; }
.stat__caption { margin-top: 0.4rem; color: rgba(255, 255, 255, 0.8); }
.stat__result { margin-top: 1.75rem; font-size: 1rem; }
.stat__quote-wrap { margin-top: auto; }
.stat__stars { font-size: 1rem; letter-spacing: 0.05em; }
.stat__quote { margin-top: 0.35rem; font-size: 1rem; line-height: 1.3; }
.stat__who { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.stat__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb08a, var(--orange) 55%, #b83e14); }

/* success story: an image card and a quote card, side by side */
.stats__story { margin-top: 3.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.stats__story-media { margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 690 / 560; background: #0b0b0b; }
.stats__story-media img { width: 100%; height: 100%; object-fit: cover; }
.stats__story-card {
  margin: 0; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.8vw, 2.5rem); border-radius: 10px; background: #141414; color: #fff;
}
.stats__story-quote { margin-top: auto; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.035em; max-width: 30ch; }
.stats__story-who { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; letter-spacing: -0.03em; }
.stats__story-who strong { display: block; font-weight: 600; }
.stats__story-who span span { display: block; color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.stats__story-avatar { flex: none; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb08a, var(--orange) 55%, #b83e14); }

/* crosshair cursor (desktop pointer only): hairlines through the pointer and a dot that inverts */
.stats__cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.stats-cursor .stats { cursor: none; }
  html.stats-cursor .stats a, html.stats-cursor .stats .stat { cursor: none; }
  html.stats-cursor .stats__cursor {
    display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
    opacity: 0; transition: opacity 0.4s var(--ease);
  }
  html.stats-cursor .stats.is-pointer .stats__cursor { opacity: 1; }
  .stats__cursor i { position: absolute; left: 0; top: 0; will-change: transform; }
  .stats__cursor-x { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.12); }
  .stats__cursor-y { width: 1px; height: 100%; background: rgba(255, 255, 255, 0.12); }
  .stats__cursor-dot { width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
}

@media (max-width: 900px) {
  .stats__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .stat { position: relative; top: auto; margin-top: 0; }
  .stats__story { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stat__inner { transform: none !important; }
  .stat__back { transform: none; opacity: 0; transition: opacity 0.3s; }
  .stat:hover .stat__back, .stat:focus-visible .stat__back, .stat.is-flipped .stat__back { opacity: 1; }
}

/* ---------- our keys (team carousel) ---------- */
.team {
  position: relative; z-index: 3; background: var(--paper); color: var(--ink); overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
  border-radius: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem) 0 0; /* a light panel rising out of the black stats */
  box-shadow: 0 -1px 0 #000;
}
.team__head { text-align: center; display: grid; justify-items: center; padding: 0 var(--gutter); }
.team__label { font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; }
.team__title {
  margin-top: 1.1rem;
  font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -0.05em; font-weight: 400;
}
.team__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.06em; letter-spacing: -0.02em; color: var(--orange); }
.team__lede { margin-top: 1.4rem; max-width: 44ch; color: var(--ink-dim); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.45; }

.team__stage {
  position: relative; margin-top: clamp(2rem, 4vw, 3.25rem);
  height: clamp(20rem, 48svh, 28rem); cursor: grab; touch-action: pan-y; user-select: none;
}
.team__stage.is-dragging { cursor: grabbing; }
.team__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.team__hint { position: absolute; right: var(--gutter); top: 0; z-index: 1; font-family: var(--mono); font-size: 0.72rem; color: rgba(5, 5, 5, 0.45); pointer-events: none; }
.team__stage.is-hovering { cursor: pointer; }
/* the hovered person: frosted glass over the bottom of their portrait */
.team__tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; color: var(--paper);
  display: grid; gap: 0.2rem; padding: 1rem 1.1rem 1.05rem;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(20, 18, 16, 0.62), rgba(8, 8, 8, 0.78));
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.6);
  will-change: transform;
}
.team__tip-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.team__tip-index { font-family: var(--mono); font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); }
.team__tip-key {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ink); background: var(--orange);
  padding: 0.18rem 0.5rem; border-radius: 0.3rem; box-shadow: 0 0.18rem 0 #8a3210;
}
.team__tip-name { font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.1; letter-spacing: -0.035em; }
.team__tip-role { font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); }
.team__tip-focus { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }

/* the member list is the source of truth and the accessible version; visually hidden when the carousel runs */
.team__members {
  margin: 2.5rem var(--gutter) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem;
}
.team__members li { display: grid; gap: 0.15rem; padding-top: 0.9rem; border-top: 1px solid var(--line-on-paper); }
.team__members .team__role { color: var(--ink-dim); font-size: 0.9rem; }
.team__members .team__focus { font-family: var(--mono); font-size: 0.72rem; color: rgba(5, 5, 5, 0.45); }
.team__stage { display: none; }
html.team-carousel .team__stage { display: block; }
html.team-carousel .team__members {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- process ---------- */
/* four panels: the open one takes the room it needs, the rest stay as a number and a title */
.steps { display: flex; gap: clamp(0.5rem, 1vw, 0.9rem); min-height: clamp(19rem, 42svh, 26rem); }
.step {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.1rem, 2vw, 1.75rem); border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line);
  transition: flex-grow 0.9s var(--ease), background 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.step::before { /* a warm pool of light in the open panel */
  content: ""; position: absolute; inset: auto -20% -40% -20%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 100, 40, 0.22), transparent 70%);
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.step.is-open { flex-grow: 3.4; background: rgba(255, 100, 40, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 100, 40, 0.3); }
.step.is-open::before { opacity: 1; }
.step__open { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 6vh, 4rem); width: 100%; text-align: left; }
.step__num { color: var(--orange); }
.step__title {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 500;
  transition: font-size 0.7s var(--ease);
}
.step.is-open .step__title { font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.step__text {
  position: relative; z-index: 1; margin-top: 1rem; max-width: 36ch; color: var(--fg-dim);
  opacity: 0; translate: 0 0.75rem; transition: opacity 0.6s var(--ease), translate 0.7s var(--ease);
}
.step.is-open .step__text { opacity: 1; translate: 0 0; transition-delay: 0.12s; }
.step:not(.is-open) .step__text { pointer-events: none; height: 0; margin: 0; overflow: hidden; }
.step__rail { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.step.is-open .step__rail { transform: scaleX(1); }
@media (max-width: 900px) {
  .steps { flex-direction: column; min-height: 0; }
  .step { flex: none; }
  .step.is-open { flex-grow: 0; }
  .step__open { gap: 1rem; grid-template-columns: 3rem 1fr; align-items: baseline; }
  .step__title, .step.is-open .step__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .step__text, .step:not(.is-open) .step__text { height: auto; opacity: 1; translate: 0 0; margin-top: 1rem; overflow: visible; }
}

/* ---------- contact ---------- */
/* ---------- contact: ink ground, orange only as light ---------- */
.contact {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--ink); color: var(--paper);
  --fg: var(--paper); --fg-dim: var(--paper-dim); --line: var(--line-on-ink);
  padding: var(--section-y) var(--gutter);
}
.contact__glow {
  position: absolute; left: -12%; bottom: -35%; width: min(78vw, 58rem); aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 100, 40, 0.32), rgba(255, 100, 40, 0.1) 46%, transparent 72%);
  filter: blur(6px);
}
.contact__art {
  position: absolute; right: -6%; top: 8%; width: min(34vw, 26rem); z-index: -1; opacity: 0.16;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
.contact__head { max-width: 62rem; }
.contact .eyebrow { color: var(--paper-dim); font-family: var(--mono); font-size: 0.8rem; }
.contact__title { margin-top: 0.8rem; font-size: clamp(2.6rem, 6.4vw, 6.5rem); line-height: 0.94; letter-spacing: -0.05em; font-weight: 500; }
.contact__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--orange); letter-spacing: -0.03em; }
.contact__intro { margin-top: 1.5rem; max-width: 54ch; color: var(--paper-dim); line-height: 1.65; }
.contact__inline { color: var(--orange); box-shadow: inset 0 -1px 0 currentColor; }
.contact__facts { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.contact__facts li { display: grid; gap: 0.4rem; align-content: start; }
.contact__facts span { color: var(--paper-dim); }
.contact__facts a { font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -0.02em; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.28); transition: color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.contact__facts a:hover { color: var(--orange); box-shadow: inset 0 -1px 0 var(--orange); }
.contact__facts address { color: var(--paper-dim); line-height: 1.55; }

.contact__body { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact .cform { display: grid; gap: clamp(1.25rem, 2.4vw, 1.8rem); }
.contact .cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 1.8rem); }
.contact .cfield { position: relative; display: grid; gap: 0.45rem; align-content: start; }
.contact .cfield label { font-family: var(--mono); font-size: 0.78rem; color: var(--paper-dim); }
.contact .cfield input, .contact .cfield textarea, .contact .cfield select {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--paper); font: inherit; padding: 0.6rem 0; border-radius: 0;
  transition: border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.contact .cfield textarea { resize: vertical; min-height: 6.5rem; }
.contact .cfield input::placeholder, .contact .cfield textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.contact .cfield input:focus, .contact .cfield textarea:focus, .contact .cfield select:focus { outline: none; border-color: var(--orange); box-shadow: 0 8px 20px -14px rgba(255, 100, 40, 0.95); }
.contact .cfield.is-invalid input, .contact .cfield.is-invalid textarea { border-color: var(--orange); }
.contact .cfield .field__error { font-family: var(--mono); font-size: 0.75rem; color: var(--orange); min-height: 1.1em; }
/* the native select stays for forms and tests; the button below is what people see */
.contact .cfield select[data-pick] { position: absolute; opacity: 0; pointer-events: none; height: 1px; }
.contact .pick { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--paper); text-align: left; transition: border-color 0.4s var(--ease); }
.contact .pick i { flex: none; width: 0.55rem; height: 0.55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.15rem; transition: rotate 0.4s var(--ease); }
.contact .pick[aria-expanded="true"] { border-color: var(--orange); }
.contact .pick[aria-expanded="true"] i { rotate: 225deg; translate: 0 0.1rem; }
.contact .pick__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.45rem); z-index: 6; max-height: 17rem; overflow: auto; padding: 0.4rem;
  background: #131110; border-radius: 0.9rem;
  box-shadow: 0 1.6rem 3rem -1rem rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.contact .pick__list li { padding: 0.65rem 0.8rem; border-radius: 0.55rem; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.contact .pick__list li:hover, .contact .pick__list li:focus, .contact .pick__list li[aria-selected="true"] { background: rgba(255, 100, 40, 0.16); color: var(--orange); outline: none; }
.contact .cform__privacy { color: var(--paper-dim); line-height: 1.7; max-width: 62ch; }
.contact .cform__privacy a { color: var(--paper); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.35); }
.contact .cform__send {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.4rem; border-radius: 999px; background: var(--orange); color: var(--ink);
  font-family: var(--mono); font-size: 0.8rem; transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.contact .cform__badge { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform 0.5s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease); }
.contact .cform__send:hover { background: var(--paper); }
.contact .cform__send:hover .cform__badge { background: var(--orange); color: var(--ink); transform: rotate(45deg); }
.contact .form__status { color: var(--paper-dim); min-height: 1.4em; }
.contact .form__status a { color: var(--orange); }

.contact .cnext {
  position: sticky; top: calc(var(--nav-h) + 2rem); padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 1.5rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2rem 4rem -2rem rgba(0, 0, 0, 0.8);
}
.contact .cnext__title { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.03em; font-weight: 500; }
.contact .cnext__steps { margin-top: 1.6rem; display: grid; gap: 1.4rem; }
.contact .cnext__steps li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.contact .cnext__steps li:not(:last-child)::after { content: ""; position: absolute; left: 1.12rem; top: 2.5rem; bottom: -1.4rem; width: 1px; background: rgba(255, 255, 255, 0.18); }
.contact .cnext__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); font-family: var(--mono); font-size: 0.85rem; }
.contact .cnext__steps li:first-child .cnext__num { background: var(--orange); color: var(--ink); box-shadow: none; }
.contact .cnext__steps p { color: var(--paper-dim); line-height: 1.6; font-size: 0.97rem; }
.contact .cnext__reply { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: rgba(255, 255, 255, 0.45); }

@media (max-width: 899px) {
  .contact__facts { grid-template-columns: minmax(0, 1fr); }
  .contact__body, .contact .cform__row { grid-template-columns: minmax(0, 1fr); }
  .contact .cnext { position: static; }
}

/* ---------- footer ---------- */
.footer { position: relative; z-index: 3; background: var(--ink); color: var(--paper); padding: 3rem var(--gutter) 2rem; }
.footer__row { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; flex-wrap: wrap; }
.footer__brand { font-weight: 500; letter-spacing: -0.01em; }
.footer__row--meta { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line-on-ink); color: var(--paper-dim); }

/* ---------- motion helpers ---------- */
/* Hero text is hidden until the entrance timeline runs; if JS fails, it stays visible. */
html.js .hero__line > span { visibility: hidden; }
html.js [data-hero-fade] { opacity: 0; }
html.js .assembly__line > span { visibility: hidden; }
html.js.reduced-motion .hero__line > span,
html.js.reduced-motion .assembly__line > span { visibility: visible; }
html.js.reduced-motion [data-hero-fade] { opacity: 1; }