/* =========================================================================
   Cloudlaunch — landing page.

   The editorial system: alternating navy and off-white bands, light-weight
   display type, thin rules. Motion is scroll-driven and lives in main.js:
   word-by-word heading reveals, staggered fade-ups, a hero that parallaxes
   and dims as it leaves, stacked sticky service cards, a process list whose
   steps light up as they pass the middle of the screen, animated counters,
   and a marquee. Everything stops under prefers-reduced-motion.

   Loaded after styles.css. Nothing shared is restyled.
   ========================================================================= */

.home { overflow-x: clip; }

.cw { max-width: var(--cw); margin: 0 auto; padding: 0 var(--gutter); }

.band { padding: 128px 0; position: relative; }
.band--ink   { background: var(--ink);     color: var(--on-ink); }
.band--ink-2 { background: var(--ink-2);   color: var(--on-ink); }
.band--paper { background: var(--paper);   color: var(--on-paper); }
.band--paper-2 { background: var(--paper-2); color: var(--on-paper); }

/* ------------------------------------------------------------------ type */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: clamp(2.75rem, 6vw, 5rem); line-height: 0.98; }
.display--l  { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.display--m  { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.display strong { font-weight: 500; }
.display .ac { color: var(--accent); }

.lede { font-size: 1.0625rem; line-height: 1.7; margin: 0; }
.band--ink .lede, .band--ink-2 .lede { color: var(--on-ink-mid); }
.band--paper .lede, .band--paper-2 .lede { color: var(--on-paper-mid); }

/* Small mono label above a heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.band--ink .eyebrow, .band--ink-2 .eyebrow { color: var(--on-ink-mid); }
.band--paper .eyebrow, .band--paper-2 .eyebrow { color: var(--on-paper-dim); }

.head-split { display: grid; gap: 24px; align-items: end; margin-bottom: 72px; }
@media (min-width: 900px) { .head-split { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.head-split .lede { font-size: 1.3125rem; font-weight: 300; line-height: 1.5; max-width: 30ch; }

.centered { text-align: center; }
.centered .display { margin-inline: auto; }
.centered .lede { max-width: 56ch; margin: 24px auto 0; }

.band--paper .btn-outline:hover, .band--paper-2 .btn-outline:hover { background: var(--on-paper); color: var(--paper); }
.band--ink .btn-outline:hover, .band--ink-2 .btn-outline:hover { background: var(--on-ink); color: var(--ink); }

/* ---------------------------------------------------------- reveal (js) */

/* Anything with data-reveal starts a little low and transparent and is
   released when it enters the viewport. Siblings stagger by their index. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }

/* Word-by-word heading reveal. main.js wraps each word in .w > span. */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-split] .w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 45ms);
}
[data-split].is-in .w > span { transform: none; }

/* A thin rule that draws itself from the left. */
.rule-draw {
  height: 1px;
  background: currentColor;
  opacity: 0.18;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.rule-draw.is-in { transform: scaleX(1); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h) + 32px) 0 96px;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}

/* The desert photograph behind the hero. It sits under every other layer and
   is darkened twice: once flat so the type holds its contrast wherever the
   dunes are bright, and once as a gradient that sinks into the page ground at
   the bottom so the hero and the band below it meet without a seam. */
.hero--photo .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("../../static/images/hero/desert-dunes.jpg") center 55% / cover no-repeat;
}
.hero--photo .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 16, 32, 0.82) 0%, rgba(11, 16, 32, 0.72) 45%, var(--ink) 100%),
    linear-gradient(90deg, rgba(11, 16, 32, 0.75) 0%, rgba(11, 16, 32, 0.35) 55%, rgba(11, 16, 32, 0.5) 100%);
}

/* With a photograph behind it the dot grid and the glow would only muddy the
   image, so they are dialled right back. */
.hero--photo .hero-dots { opacity: 0.35; }
.hero--photo .hero-glow { opacity: 0.55; }

/* The stack needs a little more weight of its own to read against the dunes. */
.hero--photo .layer { background: rgba(11, 16, 32, 0.9); }
.hero--photo .layer.top { background: rgba(255, 106, 61, 0.22); }

/* Layers that parallax at different speeds: a dot grid, a slow glow, and a
   single thin orbit line. */
.hero-layer { position: absolute; inset: -10% 0; z-index: -1; pointer-events: none; will-change: transform; }
.hero-dots {
  background-image: radial-gradient(rgba(242, 241, 236, 0.13) 1px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 45%, #000 0%, transparent 70%);
}
.hero-glow {
  background:
    radial-gradient(ellipse 40% 45% at 72% 42%, rgba(255, 106, 61, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 35% at 20% 80%, rgba(255, 180, 138, 0.08), transparent 70%);
  filter: blur(30px);
}
.hero-orbit { display: grid; place-items: center; }
.hero-orbit svg { width: min(110vw, 1100px); height: auto; opacity: 0.16; }
.hero-orbit circle { fill: none; stroke: var(--on-ink); stroke-width: 0.6; }
.hero-orbit .sat { fill: var(--accent); stroke: none; transform-origin: 50% 50%; animation: orbit 36s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

.hero-inner {
  display: grid;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1000px) { .hero-inner { grid-template-columns: 1.15fr 0.85fr; gap: 64px; } }

.hero .eyebrow { color: var(--on-ink-mid); }
.hero .display { margin-bottom: 28px; max-width: 15ch; }
.hero .lede { max-width: 48ch; margin-bottom: 40px; color: var(--on-ink-mid); font-size: 1.125rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero-meta {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.hero-meta b { color: var(--on-ink-mid); font-weight: 500; }

/* The terminal card: a plausible dry-run of the platform, typed line by
   line when the page opens. */
.term {
  position: relative;
  background: rgba(17, 26, 46, 0.72);
  border: 1px solid var(--rule-dark);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 106, 61, 0.05) inset;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--on-ink-mid);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.6s ease;
}
.term:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-dark);
}
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-dark); }
.term-bar i:first-child { background: var(--accent); opacity: 0.8; }
.term-bar span { margin-left: auto; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-dim); }
.term-body { padding: 18px 20px 22px; min-height: 250px; }
.term-body .ln { display: flex; gap: 12px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; white-space: pre-wrap; }
.term-body .ln.is-on { opacity: 1; transform: none; }
.term-body .ln .k { color: var(--on-ink-dim); flex: none; width: 14px; text-align: center; }
.term-body .ln.ok .k { color: #7BD88F; }
.term-body .ln.warn .k { color: var(--accent); }
.term-body .ln.cmd { color: var(--on-ink); }
.term-body .ln.cmd .k { color: var(--accent); }
.term-body .ln.sum { color: var(--on-ink); margin-top: 10px; }
.term-body .r { margin-left: auto; color: var(--on-ink-dim); padding-left: 16px; flex: none; }
.term-cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* The isometric stack: the platform as four layers, tilted into 3D and
   breathing slowly, with the security layer on top in the accent. Each
   layer's height is --z; the whole stack floats and each layer drifts a
   little further apart on a delay, so the stack seems to loosen and settle. */
.iso {
  position: relative;
  height: 440px;
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.iso-stack {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
  animation: iso-float 8s ease-in-out infinite;
}
@keyframes iso-float {
  0%, 100% { transform: rotateX(58deg) rotateZ(-42deg) translateZ(0); }
  50%      { transform: rotateX(58deg) rotateZ(-42deg) translateZ(18px); }
}
.layer {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid var(--rule-dark);
  background: rgba(17, 26, 46, 0.85);
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
  --lift: 70px;
  --lift-2: 86px;
  transform: translateZ(calc(var(--z) * var(--lift)));
  animation: layer-breathe 8s ease-in-out infinite;
  animation-delay: calc(var(--z) * -0.6s);
}
@keyframes layer-breathe {
  0%, 100% { transform: translateZ(calc(var(--z) * var(--lift))); }
  50%      { transform: translateZ(calc(var(--z) * var(--lift-2))); }
}
.layer::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 6px;
  background-image: radial-gradient(rgba(242, 241, 236, 0.16) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.6;
}
.layer.top {
  border-color: rgba(255, 106, 61, 0.7);
  background: rgba(255, 106, 61, 0.14);
  color: var(--on-ink);
}
/* The pinging dot on the security layer, switched off.
.layer.top::after {
  content: "";
  position: absolute;
  top: 22px; right: 22px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255, 106, 61, 0.6);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping { to { box-shadow: 0 0 0 18px rgba(255, 106, 61, 0); } }
*/
.iso-legend {
  position: absolute;
  right: 0; bottom: 8px;
  display: grid;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.iso-legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border: 1px solid var(--on-ink-dim);
  margin-right: 10px;
  vertical-align: 1px;
}
.iso-legend .a i { background: var(--accent); border-color: var(--accent); }

/* Scroll cue, bottom-left. */
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
}
.scroll-cue i {
  position: relative;
  width: 1px; height: 48px;
  background: var(--rule-dark);
  overflow: hidden;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--accent);
  animation: cue 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* --------------------------------------------------------------- marquee */

.marquee {
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  background: var(--ink);
  color: var(--on-ink-dim);
  overflow: hidden;
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track ul { display: flex; list-style: none; gap: 0; }
.marquee-track li {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.marquee-track li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ facts */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule-light);
}
@media (min-width: 800px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact { padding: 36px 28px 40px 0; border-right: 1px solid var(--rule-soft); }
.fact:last-child { border-right: 0; }
@media (max-width: 799px) { .fact:nth-child(2n) { border-right: 0; } }

.fact b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.fact b small { font-size: 0.5em; color: var(--accent); margin-left: 2px; font-weight: 500; }
.fact b small.pre { margin-left: 0; margin-right: 2px; }
.fact b small.lg { font-size: 1em; }
.fact > span { display: block; font-size: 0.875rem; color: var(--on-paper-mid); line-height: 1.5; max-width: 22ch; }

/* --------------------------------------------------------------- clients */

/* A second marquee, on paper, of the companies whose infrastructure we run.
   It drifts the other way from the tools strip and a touch slower. Logos
   are flattened to ink so the row reads as one line rather than eight
   brands shouting; the real colours come back on hover. */
.clients {
  padding: 48px 0 0;
  border-top: 1px solid var(--rule-light);
}
.clients-caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-paper-dim);
  margin-bottom: 36px;
}
.clients-marquee {
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track {
  display: flex;
  width: max-content;
  animation: marquee-rev 56s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-track ul { display: flex; list-style: none; gap: 20px; padding-right: 20px; }
@keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.client {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 72px;
  padding: 0 28px;
  border: 1px solid var(--rule-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.client:hover { border-color: var(--on-paper-dim); background: #fff; }
.client img {
  height: 26px;
  width: auto;
  max-width: 150px;
  filter: brightness(0);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.client:hover img { filter: none; opacity: 1; }
.client .name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);
}
.client .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-paper-dim);
}
.client .pill {
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--on-paper);
  color: var(--paper);
  letter-spacing: 0.08em;
}
.client .pill--accent { background: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------- called for */

.pains {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-light);
}
@media (min-width: 760px) { .pains { grid-template-columns: repeat(3, 1fr); } }

.pain {
  position: relative;
  padding: 40px 32px 44px 0;
  border-bottom: 1px solid var(--rule-light);
  counter-increment: p;
}
@media (min-width: 760px) {
  .pain { padding-right: 40px; border-right: 1px solid var(--rule-soft); }
  .pain:nth-child(3n) { border-right: 0; padding-right: 0; }
  .pain:nth-child(n+4) { padding-left: 0; }
  .pain:nth-child(3n+2), .pain:nth-child(3n) { padding-left: 40px; }
}
.pain .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--on-paper-dim);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pain .n::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); }
.pain h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.pain p { font-size: 0.9375rem; line-height: 1.7; color: var(--on-paper-mid); max-width: 36ch; }

/* -------------------------------------------------------------- services */

/* Stacked sticky cards. Each card sticks below the navbar and the next one
   slides up over it, so the reader sees the stack build as they scroll.
   main.js scales the cards underneath as they are covered. */
.stack { display: grid; gap: 24px; }

.svc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  background: var(--ink-2);
  border: 1px solid var(--rule-dark);
  border-radius: 10px;
  padding: 48px 48px 52px;
  display: grid;
  gap: 32px;
  transform-origin: 50% 0;
  will-change: transform;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 900px) { .svc { grid-template-columns: 0.9fr 1.1fr; gap: 64px; padding: 56px 56px 60px; } }
.svc:nth-child(2) { top: calc(var(--nav-h) + 40px); }
.svc:nth-child(3) { top: calc(var(--nav-h) + 56px); }
.svc:nth-child(4) { top: calc(var(--nav-h) + 72px); }
.svc:nth-child(5) { top: calc(var(--nav-h) + 88px); }

/* A spotlight that follows the pointer; --mx/--my are set by main.js. */
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 106, 61, 0.11), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.svc:hover::before { opacity: 1; }

.svc .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 22px;
}
.svc h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.svc .lede { max-width: 38ch; font-size: 1rem; }

.svc-right { display: grid; gap: 28px; align-content: start; }
.svc ul { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--rule-dark); }
.svc li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-ink-mid);
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
}
.svc li::before { content: "→"; color: var(--accent); font-family: var(--font-mono); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  color: var(--on-ink-mid);
}

/* Scrollspy layout for the services: a narrow sticky list on the left, the
   cards in normal flow on the right. The card crossing the middle of the
   screen is lit and its row in the list highlights; the rest sit back.
   Inside .spy the cards are not sticky, and they keep their two-column
   inner layout so they stay as wide as the list allows. */
.spy { display: grid; gap: 48px; }
@media (min-width: 900px) { .spy { grid-template-columns: 200px 1fr; gap: 40px; align-items: start; } }

.spy .svc { position: relative; top: auto; }
.spy .svc:nth-child(n) { top: auto; }

.spy-list { list-style: none; }

/* Desktop: the list is a column that stays put beside the cards. */
@media (min-width: 900px) {
  .spy-list {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 56px);
    border-top: 1px solid var(--rule-dark);
  }
  .spy-list li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-dark);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--on-ink-dim);
    transition: color 0.3s ease, padding-left 0.3s ease;
  }
  .spy-list li b { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--on-ink-dim); transition: color 0.3s ease; }
  .spy-list li.is-active { color: var(--on-ink); padding-left: 8px; }
  .spy-list li.is-active b { color: var(--accent); }
}

/* Phone: the same idea turned on its side. The list becomes a rail that
   sticks under the navbar and scrolls sideways, the active service sliding
   itself into view as the cards go past. A progress line under the rail
   shows how far through the five you are, so the section reads as one
   journey rather than five long cards in a row. */
@media (max-width: 899px) {
  .spy-list {
    position: sticky;
    top: calc(var(--nav-h) - 16px);
    z-index: 20;
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 12px var(--gutter) 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: rgba(11, 16, 32, 0.92);
    border-bottom: 1px solid var(--rule-dark);
    scroll-behavior: smooth;
  }
  .spy-list::-webkit-scrollbar { display: none; }

  /* the progress line */
  .spy-list::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: calc(var(--p, 0) * 100%);
    background: var(--accent);
    transition: width 0.3s ease;
  }

  .spy-list li {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--rule-dark);
    border-radius: 999px;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--on-ink-dim);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  }
  .spy-list li b { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; color: var(--on-ink-dim); transition: color 0.25s ease; }
  .spy-list li.is-active {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
  }
  .spy-list li.is-active b { color: var(--accent-ink); opacity: 0.75; }

  /* The cards get room to breathe under the rail, and the dimming is
     gentler so a card is never unreadable mid-scroll on a small screen. */
  .spy { gap: 8px; }
  .spy-cards { gap: 20px; }
  .spy-cards .svc { opacity: 0.55; transform: translateY(12px); scroll-margin-top: calc(var(--nav-h) + 56px); }
}

.spy-cards { display: grid; gap: 24px; }
.spy-cards .svc {
  opacity: 0.35;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.spy-cards .svc.is-active { opacity: 1; transform: none; }

/* --------------------------------------------------------------- process */

.process { display: grid; gap: 56px; }
@media (min-width: 900px) { .process { grid-template-columns: 0.8fr 1.2fr; gap: 96px; } }

.process-left { align-self: start; }
@media (min-width: 900px) { .process-left { position: sticky; top: calc(var(--nav-h) + 56px); } }
.process-left .display { margin-bottom: 24px; max-width: 12ch; }
.process-left .lede { max-width: 36ch; margin-bottom: 40px; }

/* The vertical progress rail: a hairline with an accent fill that grows as
   the steps go by. --p is set by main.js. */
.steps { position: relative; padding-left: 40px; }
.steps::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule-light);
}
.steps::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: calc(var(--p, 0) * 100%);
  background: var(--accent);
  transition: height 0.2s linear;
}

.step {
  position: relative;
  padding: 8px 0 64px;
  transition: opacity 0.5s ease;
  opacity: 0.35;
}
.step:last-child { padding-bottom: 8px; }
.step.is-active { opacity: 1; }
.step::before {
  content: "";
  position: absolute;
  left: -44px; top: 16px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--on-paper-dim);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.step.is-active::before { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }

.step .n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--on-paper-dim); margin-bottom: 14px; }
.step h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.step p { font-size: 1rem; line-height: 1.7; color: var(--on-paper-mid); max-width: 48ch; }
.step .out {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--on-paper-dim);
  letter-spacing: 0.04em;
}
.step .out b { color: var(--on-paper); font-weight: 500; }

/* ------------------------------------------------------------------- why */

.why-statement {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 26ch;
  margin-bottom: 96px;
}
.why-statement .ac { color: var(--accent); }

.why { display: grid; gap: 0 56px; }
@media (min-width: 760px) { .why { grid-template-columns: repeat(2, 1fr); } }
.why-item { padding: 36px 0; border-top: 1px solid var(--rule-dark); }
.why-item h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.why-item p { color: var(--on-ink-mid); font-size: 0.9375rem; line-height: 1.7; max-width: 44ch; }

/* --------------------------------------------------------------- founder */

/* Photo, bio, and a side column of the companies he has run infrastructure
   for, separated by a hairline the way the rest of the page separates
   things. No card chrome. */
.founder {
  display: grid;
  gap: 40px;
  padding-top: 48px;
  border-top: 1px solid var(--rule-light);
}
@media (min-width: 760px) { .founder { grid-template-columns: 180px 1fr; } }
@media (min-width: 1000px) { .founder { grid-template-columns: 180px 1fr 280px; gap: 56px; } }

.founder-photo img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  filter: saturate(0.9);
}

.founder-role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.founder-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 8px;
}
.founder-line { font-size: 0.9375rem; color: var(--on-paper-dim); margin-bottom: 22px; }
.founder-line a { color: var(--on-paper); text-decoration: none; border-bottom: 1px solid var(--rule-light); }
.founder-line a:hover { border-color: var(--accent); }
.founder-bio { font-size: 1.0625rem; line-height: 1.7; color: var(--on-paper-mid); max-width: 58ch; margin-bottom: 26px; }

.tags--paper span { border-color: var(--rule-light); color: var(--on-paper-mid); }

.founder-aside { padding-top: 4px; }
@media (min-width: 1000px) { .founder-aside { border-left: 1px solid var(--rule-light); padding-left: 40px; } }
.founder-aside-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-paper-dim);
  line-height: 1.6;
  margin-bottom: 20px;
}
.worked { display: grid; gap: 12px; }
@media (min-width: 760px) and (max-width: 999px) { .worked { grid-template-columns: repeat(2, 200px); } }
.worked-item {
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
}
.worked-item img { height: 40px; width: auto; }
.worked-item span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

/* The team, under the founder: four facts about who does the work. */
.team {
  display: grid;
  gap: 0 48px;
  margin-top: 72px;
  border-top: 1px solid var(--rule-light);
}
@media (min-width: 760px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team { grid-template-columns: repeat(4, 1fr); gap: 0 40px; } }
.team-item { padding: 32px 0 36px; border-bottom: 1px solid var(--rule-soft); }
.team-item h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.team-item p { font-size: 0.9375rem; line-height: 1.7; color: var(--on-paper-mid); }

/* ---------------------------------------------------------- testimonials */

/* Two quotes side by side on the dark ground. A large coral quotation mark
   hangs in the top-left of each; the person and their company sit below a
   hairline, with the client's logo (already in the marquee) at the right. */
.quotes { display: grid; gap: 24px; }
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; gap: 32px; } }

.quote {
  position: relative;
  margin: 0;
  padding: 48px 40px 36px;
  border: 1px solid var(--rule-dark);
  border-radius: 10px;
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 8px; left: 28px;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;
  font-weight: 500;
  color: var(--accent);
  opacity: 0.35;
  pointer-events: none;
}
.quote blockquote { margin: 0; flex: 1; position: relative; }
.quote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--on-ink);
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-dark);
}
.quote figcaption > img:first-child {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.quote figcaption b { display: block; font-size: 0.9375rem; font-weight: 600; }
.quote figcaption span { display: block; font-size: 0.8125rem; color: var(--on-ink-mid); margin-top: 2px; }
.quote-logo {
  margin-left: auto;
  height: 22px;
  width: auto;
  max-width: 120px;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

@media (max-width: 760px) {
  .quote { padding: 40px 24px 28px; }
  .quote::before { font-size: 5rem; left: 16px; }
}

/* Editorial rows, the live layout: no card chrome. Each quote is a row
   between hairlines, set in light display type with coral quotation marks;
   the person sits beside it and swaps sides on every other row. */
.rows-q { border-top: 1px solid var(--rule-dark); }

.row-q {
  margin: 0;
  display: grid;
  gap: 24px;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 900px) {
  .row-q { grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
  .row-q:nth-child(even) { grid-template-columns: 1fr 260px; }
  .row-q:nth-child(even) .who { order: 2; }
}

.row-q .who { display: flex; align-items: center; gap: 16px; }
.row-q .who > img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.row-q .who b { display: block; font-size: 0.9375rem; font-weight: 600; }
.row-q .who span { display: block; font-size: 0.8125rem; color: var(--on-ink-mid); margin-top: 2px; }
.row-q .who .logo {
  display: block;
  height: 18px;
  width: auto;
  max-width: 120px;
  margin-top: 10px;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

.row-q blockquote { margin: 0; }
.row-q blockquote p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  max-width: 30em;
  color: var(--on-ink);
}
.row-q blockquote p::before { content: "\201C"; color: var(--accent); }
.row-q blockquote p::after  { content: "\201D"; color: var(--accent); }

@media (max-width: 760px) {
  .row-q { padding: 40px 0; }
}

/* ------------------------------------------------------------------- uae */

.uae { display: grid; gap: 48px; }
@media (min-width: 900px) { .uae { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.uae .display { max-width: 12ch; margin-bottom: 24px; }
.uae .lede { max-width: 40ch; }

.uae-list { list-style: none; border-top: 1px solid var(--rule-light); }
.uae-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule-light);
}
.uae-list .k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--on-paper-dim); padding-top: 4px; }
.uae-list h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.uae-list p { font-size: 0.9375rem; line-height: 1.65; color: var(--on-paper-mid); }

/* -------------------------------------------------------------- closing */

.closing {
  position: relative;
  padding: 160px 0;
  overflow: hidden;
}
.closing-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 106, 61, 0.18), transparent 70%);
  pointer-events: none;
}
.closing .cw { position: relative; z-index: 1; }
.closing .display { max-width: 14ch; margin-inline: auto; margin-bottom: 28px; }
.closing .lede { max-width: 44ch; margin: 0 auto 44px; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.closing-mail {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--on-ink-dim);
}
.closing-mail a { color: var(--on-ink-mid); text-decoration: none; border-bottom: 1px solid var(--rule-dark); }
.closing-mail a:hover { color: var(--on-ink); border-color: var(--accent); }

/* ------------------------------------------------------------- small */

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  .band { padding: 88px 0; }
  .hero { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 96px; }
  .hero .display { max-width: none; }
  .term { transform: none; font-size: 0.75rem; }
  /* The layers lift up out of the box, so on a phone the box gets more
     headroom above the stack and the layers sit closer together. */
  .iso { height: 400px; padding-top: 90px; }
  .layer { --lift: 40px; --lift-2: 50px; }
  .iso-stack { width: 230px; height: 230px; }
  .iso-legend { display: none; }

  /* The stack holds still on a phone. The float and the breathing read as
     drift on a small screen, and they cost battery for nothing. */
  .iso-stack, .layer { animation: none; }
  .term-body { min-height: 0; }
  .svc { padding: 32px 24px 36px; }
  .client { height: 60px; padding: 0 20px; gap: 14px; }
  .client img { height: 22px; }
  .uae-list li { grid-template-columns: 1fr; gap: 8px; }
  .closing { padding: 112px 0; }
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-split] .w > span, .rule-draw { opacity: 1; transform: none; transition: none; }
  .hero-layer { transform: none !important; }
  .marquee-track, .clients-track { animation: none; }
  .term { transform: none; }
  .iso-stack, .layer, .layer.top::after { animation: none; }
  .step { opacity: 1; }
  .svc { transform: none !important; }
  .spy-cards .svc { opacity: 1; transform: none; }
}