/* Digital Shack v3: components. Built to the reference video, white baseline. */

/* ───────── Dark surfaces re-scope the ink tokens ─────────
   Anything inside a navy stage inherits these, so eyebrows, pills, links and
   muted text stay legible without per-component overrides. */
.on-stage, .card--stage, .board, .process-stage, .interstitial, .marquee {
  --text: var(--on-stage);
  --text-muted: var(--on-stage-muted);
  --text-faint: var(--on-stage-faint);
  --border: var(--border-on-stage);
  --border-strong: rgba(255,255,255,.22);
  --surface: var(--stage-2);
  --surface-2: rgba(255,255,255,.08);
  color: var(--on-stage);
}

/* ───────── Layout ───────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--s7); }
.section--tight { padding-top: 0; }
@media (max-width: 760px) { .section { padding-block: var(--s6); } }

.section-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s4); }
.section-head--split .lede { justify-self: end; text-align: right; max-width: 46ch; }
@media (max-width: 860px) {
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split .lede { justify-self: start; text-align: left; }
}
.section-head .eyebrow { margin-bottom: 0; }
.section-head h2 { margin-top: var(--s1); }
.section-head h2 + .lede { margin-top: var(--s2); }
.head-aside { justify-self: end; }
@media (max-width: 860px) { .head-aside { justify-self: start; } }

/* Reading column, keeps body copy off the rail on wide screens. */
@media (min-width: 1100px) { body { padding-right: 0; } }

/* ───────── Navigation ───────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--nav-height);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--border); background: rgba(255,255,255,.86); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--s1h); text-decoration: none; color: var(--text); }
.nav__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: var(--white); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; line-height: 1; }
.nav__name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.nav__links { display: flex; align-items: center; gap: var(--s3); list-style: none; padding: 0; margin: 0; }
.nav__links li + li { margin: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s0);
  font-size: var(--size-ui); font-weight: 500; color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link[aria-current="true"], .nav__link:hover { color: var(--text); }
.nav__toggle { display: none; }
@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2);
    background: transparent; color: var(--text); border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill); font: inherit; font-weight: 500; font-size: var(--size-ui); cursor: pointer;
  }
  .nav__links {
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s2) var(--gutter) var(--s4);
    background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-2);
    display: none;
  }
  .nav[data-open="true"] .nav__links { display: flex; }
  .nav__link { display: flex; min-height: 52px; font-size: var(--size-body); border-bottom: 1px solid var(--border); }
}

/* ───────── The rail ───────── */
.rail {
  position: fixed; right: var(--s4); top: 50%; transform: translateY(-50%); z-index: 50;
  display: grid; gap: 14px; list-style: none; padding: 0; margin: 0;
}
.rail li + li { margin: 0; }
.rail__item {
  display: grid; grid-template-columns: 36px auto; align-items: center; gap: var(--s1h);
  text-decoration: none; color: var(--text-faint); font-size: 11px; letter-spacing: .12em; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rail__item::before { content: ""; height: 1px; width: 18px; background: currentColor; transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.rail__label { display: grid; line-height: 1.1; }
.rail__label small { font-size: 11px; letter-spacing: .04em; text-transform: none; color: var(--text-faint); opacity: 0; transition: opacity var(--dur) var(--ease); }
.rail__item[aria-current="true"] { color: var(--text); }
.rail__item[aria-current="true"]::before { width: 36px; background: var(--nx-blue); }
.rail__item[aria-current="true"] .rail__label small { opacity: 1; }
.rail.on-dark .rail__item { color: var(--on-stage-faint); }
.rail.on-dark .rail__item[aria-current="true"] { color: var(--on-stage); }
@media (max-width: 1100px) { .rail { display: none; } }

/* ───────── Scroll to top ───────── */
.to-top {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 50;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: var(--white); border: 0; cursor: pointer;
  box-shadow: var(--shadow-2);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon-arrow-up) center/contain no-repeat; mask: var(--icon-arrow-up) center/contain no-repeat; }
.to-top:hover { background: var(--nx-blue-deep); }
.to-top:active { transform: scale(.96); }
@media (max-width: 760px) { .to-top { right: var(--s2); bottom: var(--s2); } }

/* ───────── Buttons and pills ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 52px; padding: 0 var(--s3);
  background: var(--nx-blue); color: var(--on-accent);
  font: inherit; font-weight: 600; font-size: var(--size-ui); line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn, .btn:hover, .btn:active, .btn:focus-visible { color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--nx-blue-deep); box-shadow: var(--shadow-2); } }
.btn:active { transform: scale(.97); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn--lg { min-height: 60px; padding: 0 var(--s4); font-size: var(--size-body); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: none; border: 1px solid var(--border-strong); }
.btn--ghost, .btn--ghost:hover { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--surface-2); box-shadow: none; } }
.on-stage .btn--ghost { color: var(--on-stage); border-color: var(--border-on-stage); }
.on-stage .btn--ghost:hover { background: rgba(255,255,255,.08); color: var(--on-stage); }
@media (max-width: 480px) { .btn:not(.btn--inline) { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 14px; } }

.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 var(--s1h);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  text-decoration: none; white-space: nowrap; background: transparent;
}
.on-stage .pill { color: var(--on-stage-muted); border-color: var(--border-on-stage); }
.pills { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; padding: 0; margin: 0; }
.pills li + li { margin: 0; }

/* Text action with an arrow */
.link-action {
  display: inline-flex; align-items: center; gap: var(--s0); min-height: 44px;
  font-size: var(--size-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.link-action::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon-arrow-ne) center/contain no-repeat; mask: var(--icon-arrow-ne) center/contain no-repeat; transition: transform var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .link-action:hover::after { transform: translate(2px,-2px); } }
.on-stage .link-action { color: var(--on-stage); }

/* ───────── Cards ───────── */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--s4); position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .card.is-hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--border-strong); } }
.card--stage { background: var(--stage); color: var(--on-stage); border-color: var(--border-on-stage); box-shadow: var(--shadow-stage); }
.card__num { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.on-stage .card__num, .card--stage .card__num { color: var(--on-stage-faint); }
.card__title { font-family: var(--font-display); font-size: var(--size-card-title); letter-spacing: var(--tracking-display); line-height: 1.05; margin-bottom: var(--s1h); }
.card p { color: var(--text-muted); }
.card p.display, .card .display { color: var(--text); }
.card--stage p { color: var(--on-stage-muted); }
@media (max-width: 640px) { .card { padding: var(--s3); } }

/* A labelled placeholder slot. Never ships. */
.slot {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, rgba(10,24,38,.04) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  color: var(--text-faint); font-size: var(--size-small); font-weight: 500; letter-spacing: .04em;
  padding: var(--s3);
}
.slot--media { aspect-ratio: 16/10; }
.slot--square { aspect-ratio: 1; }
.card--stage .slot { border-color: var(--border-on-stage); color: var(--on-stage-faint); background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); }

/* ───────── Hero ───────── */
.hero {
  min-height: 100dvh; display: grid; place-items: center; text-align: center;
  padding: calc(var(--nav-height) + var(--s5)) 0 var(--s6);
  position: relative; overflow: hidden;
}
.hero__inner { display: grid; justify-items: center; gap: var(--s3); position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 0; }
.wordmark {
  font-family: var(--font-display); font-size: var(--size-wordmark); line-height: .9; letter-spacing: -0.01em;
  position: relative; display: inline-block; padding-top: var(--s4);
}
.wordmark__tile {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -10%);
  width: clamp(44px, 5.6vw, 80px); aspect-ratio: 1; border-radius: 22%;
  background: linear-gradient(145deg, var(--nx-blue), var(--nx-blue-deep));
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.5);
  display: grid; place-items: center; color: var(--on-accent);
  font-size: clamp(24px, 3vw, 44px); line-height: 1;
}
.wordmark__dot {
  position: absolute; left: 50%; bottom: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); opacity: .9; transform: translateX(-50%);
}
.hero__desc { max-width: 56ch; font-size: var(--size-body-lg); color: var(--text-muted); line-height: 1.55; }
.hero__meta { font-size: var(--size-small); color: var(--text-faint); font-weight: 500; }
.hero__meta span + span::before { content: " · "; margin: 0 var(--s0); }
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--s1);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-faint);
}
.scroll-cue::after { content: ""; width: 1px; height: 28px; background: var(--text-faint); }
/* soft field behind the hero */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 50% 40%, rgba(66,181,247,.14), transparent 70%),
    radial-gradient(900px 500px at 50% 110%, rgba(10,24,38,.05), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark__dot { animation: orbit 9s linear infinite; }
  .scroll-cue::after { animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
  .wordmark__tile { animation: float 6s ease-in-out infinite; }
}
@keyframes orbit {
  0%   { transform: translate(-50%, 0) rotate(0deg)   translateX(0) }
  50%  { transform: translate(calc(-50% + 140px), -40px) }
  100% { transform: translate(-50%, 0) }
}
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }
@keyframes float { 0%,100% { translate: 0 0 } 50% { translate: 0 -8px } }

/* ───────── Interstitial ───────── */
.interstitial {
  min-height: 70dvh; display: grid; place-items: center; text-align: center; padding: var(--s6) var(--gutter);
  background: var(--stage); color: var(--on-stage);
}
.interstitial .display { font-size: var(--size-statement); letter-spacing: .01em; }

/* ───────── Marquee ───────── */
.marquee {
  overflow: hidden; background: var(--stage); color: var(--on-stage);
  border-top: 1px solid var(--border-on-stage); border-bottom: 1px solid var(--border-on-stage);
  padding: var(--s3) 0; white-space: nowrap;
}
.marquee__track { display: inline-flex; gap: var(--s5); padding-left: var(--s5); will-change: transform; }
.marquee__item { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .02em; color: var(--on-stage-muted); }
.marquee__item i { font-style: normal; color: var(--nx-blue); margin-left: var(--s5); }
@media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee var(--marquee) linear infinite; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────── Work ───────── */
.work-featured {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; overflow: hidden;
  padding: 0;
}
.work-featured__media { min-height: 360px; position: relative; }
.work-featured__media .slot { height: 100%; border-radius: 0; border: 0; }
.work-featured__body { padding: var(--s5); display: grid; align-content: center; gap: var(--s2); }
.work-featured__body .card__title { font-size: clamp(30px, 3.4vw, 46px); }
.work-featured__tag { position: absolute; top: var(--s3); left: var(--s3); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.work-card { padding: 0; overflow: hidden; }
.work-card__media { position: relative; }
.work-card__media .pill { position: absolute; top: var(--s2); left: var(--s2); background: rgba(255,255,255,.85); }
.work-card__media .slot { border-radius: 0; border: 0; }
.work-card__body { padding: var(--s3) var(--s3) var(--s2); }
.work-card__year { font-size: var(--size-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--text-faint); font-weight: 500; }
.work-card__links { display: flex; gap: var(--s3); padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--border); margin-top: var(--s1); }
@media (max-width: 960px) { .work-featured { grid-template-columns: 1fr; } .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }

/* ───────── Stat bar ───────── */
.statbar { margin-top: var(--s3); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); }
.statbar__num { font-family: var(--font-display); font-size: 28px; margin-right: var(--s1h); }

/* ───────── Perspective ───────── */
.perspective { position: relative; overflow: hidden; }
.perspective .display { font-size: var(--size-statement); max-width: 18ch; }
.perspective .display span { display: block; color: var(--text-faint); }
.perspective p { margin-top: var(--s3); max-width: 52ch; }
.shape {
  position: absolute; border-radius: 22%; background: linear-gradient(145deg, var(--surface-2), var(--surface)); border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.shape--a { width: 120px; height: 100px; right: 12%; top: 20%; transform: rotate(-18deg); }
.shape--b { width: 90px; height: 90px; right: 26%; top: 62%; transform: rotate(22deg); border-radius: 50%; }
.shape--c { width: 70px; height: 60px; right: 6%; top: 70%; transform: rotate(8deg); }
@media (prefers-reduced-motion: no-preference) { .shape { animation: float 7s ease-in-out infinite; } .shape--b { animation-delay: -2s; } .shape--c { animation-delay: -4s; } }
@media (max-width: 860px) { .shape { display: none; } }

/* ───────── Toggle (Normal / 3D) ───────── */
.toggle { display: inline-flex; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); gap: 2px; }
.toggle__opt {
  min-height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--radius-pill); background: transparent;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); cursor: pointer;
}
.toggle__opt[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.toggle__opt[disabled] { cursor: not-allowed; color: var(--text-faint); }
.toggle__note { font-size: var(--size-small); color: var(--text-faint); margin-left: var(--s2); }

/* ───────── Process toy ───────── */
.process-stage {
  position: relative; min-height: 380px; overflow: hidden; padding: var(--s4);
  background: radial-gradient(500px 300px at 50% 50%, var(--stage-2), var(--stage));
  border-radius: var(--radius-card); border: 1px solid var(--border-on-stage); box-shadow: var(--shadow-stage);
  color: var(--on-stage);
}
.process-stage__path { position: absolute; inset: 0; width: 100%; height: 100%; }
.process-stage__disc {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(200px, 26vw, 260px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.22), rgba(255,255,255,.06) 60%, transparent 70%);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; text-align: center;
}
.process-stage__disc .eyebrow { margin: 0 0 var(--s0); }
.process-stage__disc .display { font-size: clamp(36px, 4vw, 56px); }
.process-stage__caption { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); font-size: var(--size-small); color: var(--on-stage-muted); text-align: center; max-width: 40ch; }
.process-pill {
  position: absolute; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--stage-2); border: 1px solid var(--border-on-stage); color: var(--on-stage);
  font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.process-pill.is-out { opacity: 0; transform: translateY(8px) scale(.96); }
.process-pill:nth-child(odd) { animation-delay: -3s; }
@media (prefers-reduced-motion: no-preference) { .process-pill { animation: float 6s ease-in-out infinite; } }
.process-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--nx-blue); box-shadow: 0 0 0 6px rgba(66,181,247,.18); }
.process-tri { position: absolute; width: 20px; height: 18px; background: var(--nx-blue); clip-path: polygon(50% 0, 0 100%, 100% 100%); opacity: .9; }
.process-ring { position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.5); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.step {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s3);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step[aria-pressed="true"] { border-color: var(--navy); background: var(--white); box-shadow: var(--shadow-1); }
.step__num { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 18px; color: var(--text-faint); margin-bottom: var(--s2); }
.step__num i { font-style: normal; color: var(--nx-blue-deep); }
.step .card__title { font-size: 22px; margin-bottom: var(--s1); }
.step p { color: var(--text-muted); font-size: var(--size-ui); }
.now-playing { text-align: center; margin-top: var(--s3); font-size: var(--size-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .process-stage { min-height: 300px; } .process-pill { display: none; } }

/* ───────── Stacks board ───────── */
.board {
  background: var(--stage); color: var(--on-stage); border-radius: var(--radius-card); border: 1px solid var(--border-on-stage);
  box-shadow: var(--shadow-stage); padding: var(--s4); display: grid; gap: var(--s4); position: relative; overflow: hidden;
}
.board__head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-stage-faint); font-weight: 500; }
.board__dots { display: flex; gap: 6px; }
.board__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.board__dots i.is-on { background: var(--nx-blue); }
.eq { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 72px; }
.eq i { width: 6px; background: var(--nx-blue); border-radius: 3px 3px 0 0; height: 30%; transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) { .eq i { animation: eq 1.4s ease-in-out infinite; } }
.eq i:nth-child(2n) { animation-delay: -.3s; } .eq i:nth-child(3n) { animation-delay: -.6s; } .eq i:nth-child(5n) { animation-delay: -.9s; }
@keyframes eq { 0%,100% { transform: scaleY(.5) } 50% { transform: scaleY(2.2) } }
.board__name { text-align: center; font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 40px); letter-spacing: .32em; padding-left: .32em; }
.board__line { text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--on-stage-faint); }
.board__line::after { content: "▌"; color: var(--nx-blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.board .pills { justify-content: center; }
.stacks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
@media (max-width: 960px) { .stacks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stacks { grid-template-columns: 1fr; } }

/* ───────── Services ───────── */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.service .card__num { font-size: 18px; }
.service .pills { margin-top: var(--s3); }
.service .link-action { margin-top: var(--s2); }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }
.custom { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s2); }
.custom .card__title { margin-bottom: var(--s1); }

/* ───────── Partner card ───────── */
.partner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
.partner > div { padding: var(--s5); }
.partner > div + div { border-left: 1px solid var(--border); background: var(--white); }
.partner .display { font-size: clamp(34px, 4vw, 56px); margin-bottom: var(--s2); }
.partner__cta { margin-top: var(--s4); }
.partner__get { list-style: none; padding: 0; display: grid; gap: var(--s2); margin-top: var(--s2); }
.partner__get li { display: flex; align-items: flex-start; gap: var(--s1h); }
.partner__get li + li { margin: 0; }
.partner__get li { position: relative; padding-left: 34px; }
.partner__get li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); }
.partner__get li::after  { content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; background: var(--ok); -webkit-mask: var(--icon-tick) center/contain no-repeat; mask: var(--icon-tick) center/contain no-repeat; }
@media (max-width: 860px) { .partner { grid-template-columns: 1fr; } .partner > div + div { border-left: 0; border-top: 1px solid var(--border); } .partner > div { padding: var(--s4); } }

/* ───────── Team and testimonials ───────── */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.team--one { grid-template-columns: minmax(0, 520px); }
.person { padding: 0; overflow: hidden; }
.person .slot { border-radius: 0; border: 0; }
.person__body { padding: var(--s3) var(--s4) var(--s4); }
.person__role { font-size: var(--size-small); color: var(--text-faint); font-weight: 500; letter-spacing: .04em; margin-bottom: var(--s1h); }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.quote .slot { min-height: 180px; }
.quote blockquote { font-size: var(--size-body); color: var(--text); margin-bottom: var(--s3); }
.quote cite { font-style: normal; display: grid; }
.quote cite b { font-weight: 600; }
.quote cite span { font-size: var(--size-small); color: var(--text-faint); }
@media (max-width: 760px) { .team, .quotes { grid-template-columns: 1fr; } }

/* ───────── FAQ ───────── */
.faq { display: grid; gap: var(--s2); max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 0 var(--s4); }
.faq details[open] { background: var(--white); border-color: var(--border-strong); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s3) 0; font-weight: 600; font-size: var(--size-body); display: flex; justify-content: space-between; gap: var(--s3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 4px; background: var(--navy); -webkit-mask: var(--icon-chevron) center/contain no-repeat; mask: var(--icon-chevron) center/contain no-repeat; transition: transform var(--dur-fast) var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details > p { padding: 0 0 var(--s3); color: var(--text-muted); }

/* ───────── Let's talk and footer ───────── */
.talk { text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.talk .display { font-size: var(--size-statement); }
.talk a { font-size: var(--size-body-lg); }
.footer { border-top: 1px solid var(--border); padding: var(--s5) 0 var(--s4); color: var(--text-muted); font-size: var(--size-ui); }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s4); }
.footer__blurb { margin-top: var(--s2); max-width: 36ch; }
.footer h3 { font-size: var(--size-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--text-faint); margin-bottom: var(--s2); }
.footer ul { list-style: none; padding: 0; }
.footer li + li { margin-top: var(--s1); }
.footer a { text-decoration: none; }
.footer__legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); font-size: var(--size-small); color: var(--text-faint); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); justify-content: space-between; }
@media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; } }

/* ───────── Reveal ───────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }
}


/* ═══════════ Edition 2.1: closing the gap to the reference ═══════════
   Capitals on every display line, slide-height sections, a staged hero
   entrance, headings that tighten as they reveal, a cursor dot, stronger
   reveals with stagger, and a hero whose tile and dot sit clear of the type. */

h1, h2, .display, .card__title, .stage__name, .board__name { text-transform: uppercase; }
.wordmark { letter-spacing: 0; line-height: .88; }
h2 { font-size: clamp(40px, 5vw, 72px); letter-spacing: 0; }
.card__title { letter-spacing: .005em; }
.card p { font-size: var(--size-ui); }

.section--slide { min-height: 100dvh; display: grid; align-content: center; padding-block: var(--s6); }
.section--slide > .container { width: 100%; }
@media (max-width: 760px) { .section--slide { min-height: 0; } }
.section-head { margin-bottom: var(--s5); }

.hero__inner { gap: var(--s2); }
.wordmark { padding-top: 0; margin-top: var(--s1); }
.wordmark__tile { position: static; transform: none; margin: 0 auto var(--s3); }
.wordmark__dot { position: static; transform: none; margin: var(--s3) auto 0; width: 20px; height: 20px; }
.hero__desc { margin-top: var(--s2); }
@media (prefers-reduced-motion: no-preference) {
  .wordmark__dot { animation: orbit2 7s ease-in-out infinite; }
  @keyframes orbit2 {
    0%,100% { translate: 0 0; }
    25%     { translate: 120px -22px; }
    50%     { translate: 0 -44px; }
    75%     { translate: -120px -22px; }
  }
  .hero .eyebrow, .hero .wordmark__tile, .hero .wordmark, .hero__desc, .hero__meta { opacity: 0; translate: 0 18px; animation: enter 900ms var(--ease) forwards; }
  .hero .wordmark__tile { animation-delay: 60ms; }
  .hero .wordmark { animation-delay: 160ms; letter-spacing: .06em; animation-name: enter-tight; }
  .hero__desc { animation-delay: 420ms; }
  .hero__meta { animation-delay: 560ms; }
  .scroll-cue { opacity: 0; animation: enter-cue 900ms var(--ease) 1000ms forwards; }
  @keyframes enter { to { opacity: 1; translate: 0 0; } }
  @keyframes enter-tight { to { opacity: 1; translate: 0 0; letter-spacing: 0; } }
  @keyframes enter-cue { to { opacity: 1; } }

  .reveal { transform: translateY(28px); transition-duration: 800ms; }
  .reveal h2, .reveal .display { letter-spacing: .08em; transition: letter-spacing 900ms var(--ease); }
  .reveal.is-visible h2, .reveal.is-visible .display { letter-spacing: 0; }
  .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
  .card.is-hoverable:hover { transform: translateY(-6px) scale(1.01); }
  .marquee { --marquee: 28s; }
  .process-pill { animation-duration: 5s; }
}
.marquee__item { font-size: clamp(26px, 3vw, 40px); }

.cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 70; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10,24,38,.18); border: 1px solid rgba(10,24,38,.25);
  pointer-events: none; margin: -13px 0 0 -13px; opacity: 0;
  transition: opacity var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease), margin var(--dur) var(--ease), background-color var(--dur) var(--ease);
  mix-blend-mode: multiply;
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(66,181,247,.22); border-color: rgba(66,181,247,.5); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-dot { display: none; } }


/* ═══════════ Edition 2.2: review fixes ═══════════ */

/* Slide sections: grid children must not expand to min-content */
.section--slide { grid-template-columns: minmax(0, 1fr); }
.section--slide > .container { min-width: 0; }

/* Icons: drawn, one stroke, as masks */
.ico { display: inline-block; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; vertical-align: middle; }
.ico--spark   { -webkit-mask-image: var(--icon-spark);   mask-image: var(--icon-spark); }
.ico--target  { -webkit-mask-image: var(--icon-target);  mask-image: var(--icon-target); }
.ico--refresh { -webkit-mask-image: var(--icon-refresh); mask-image: var(--icon-refresh); }
.ico--code    { -webkit-mask-image: var(--icon-code);    mask-image: var(--icon-code); }
.ico--play    { -webkit-mask-image: var(--icon-play);    mask-image: var(--icon-play); }
.ico--cog     { -webkit-mask-image: var(--icon-cog);     mask-image: var(--icon-cog); }
.ico--ne      { -webkit-mask-image: var(--icon-arrow-ne); mask-image: var(--icon-arrow-ne); }
.step__num i, .card__num .ico { color: var(--nx-blue-deep); }
.step__body { display: block; color: var(--text-muted); font-size: var(--size-ui); line-height: var(--leading-body); }

/* The real N. mark */
.nav__mark { background: none; border-radius: 0; width: 30px; height: 30px; }
.nav__mark img { width: 100%; height: 100%; object-fit: contain; }
.wordmark__tile { background: none; box-shadow: none; border-radius: 0; width: clamp(64px, 8vw, 120px); filter: drop-shadow(0 14px 28px rgba(10,24,38,.22)); }
.wordmark__tile img { width: 100%; height: 100%; object-fit: contain; }

/* Nav carries the one call to action */
.btn--nav { min-height: 44px; padding: 0 18px; font-size: 15px; box-shadow: none; }
@media (max-width: 900px) { .nav__links .btn--nav { margin-top: var(--s2); width: 100%; } }

/* Split heads: only the direct lede goes right */
.section-head--split .lede { justify-self: start; text-align: left; max-width: none; }
.section-head--split > .lede { justify-self: end; text-align: right; max-width: 46ch; }

/* Toggle note, visible */
.toggle-wrap { display: grid; justify-items: end; gap: var(--s1); }
.toggle__note { margin: 0; }
@media (max-width: 860px) { .toggle-wrap { justify-items: start; } }

/* Stacks board: the stack says what it delivers, not a terminal prompt */
.board__head { flex-wrap: wrap; gap: var(--s2); }
.board__line { font-family: var(--font-body); font-size: var(--size-ui); color: var(--on-stage-muted); }
.board__line::after { content: none; }

/* Process toy on a phone: composed, not hidden */
@media (max-width: 860px) {
  .process-stage { display: grid; gap: var(--s3); min-height: 0; padding: var(--s4) var(--s3); justify-items: center; }
  .process-stage__path, .process-dot, .process-tri, .process-ring { display: none; }
  .process-stage__disc { position: static; transform: none; width: 200px; }
  .process-stage__caption { position: static; transform: none; max-width: 36ch; }
  .process-stage [data-pills] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1); }
  .process-pill { display: inline-flex; position: static !important; animation: none; }
  .process-pill.is-out { display: none; }
}

/* One person: photo left, text right */
.team--one { grid-template-columns: minmax(0, 820px); }
.person { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.person .slot { height: 100%; min-height: 260px; }
.person__body { padding: var(--s4); }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } }

/* Cursor dot reads on white and on navy */
.cursor-dot { background: rgba(235,240,245,.9); border: 0; mix-blend-mode: difference; }
.cursor-dot.is-link { background: rgba(66,181,247,.9); }

/* Hero halo was a zero offset glow; a soft field only */
.hero::before { background: radial-gradient(900px 500px at 50% 30%, rgba(66,181,247,.08), transparent 70%); }


/* ═══════════ Edition 2.3: secondary pages and forms ═══════════ */

/* Page hero: left aligned, statement sized, under the fixed nav */
.page-hero { padding: calc(var(--nav-height) + var(--s6)) 0 var(--s5); }
.page-hero h1 { font-size: var(--size-statement); max-width: 16ch; }
.page-hero .lede { max-width: 52ch; margin-top: var(--s3); }

/* A service passage: text left, what is included right */
.svc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s4) var(--s6); align-items: start; }
.svc h2 { margin-top: var(--s1); }
.svc__body { margin-top: var(--s3); }
.svc__num { font-family: var(--font-display); font-size: 20px; color: var(--text-faint); letter-spacing: .04em; }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } }

/* Ticked list, the partner card's list generalised */
.ticks { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.ticks li { position: relative; padding-left: 34px; max-width: none; }
.ticks li + li { margin: 0; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); }
.ticks li::after  { content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 14px; background: var(--ok); -webkit-mask: var(--icon-tick) center/contain no-repeat; mask: var(--icon-tick) center/contain no-repeat; }
.card .ticks li::before { background: var(--white); }

/* Note that stays on the page */
.note { border-left: 2px solid var(--nx-blue); padding: var(--s1) 0 var(--s1) var(--s3); color: var(--text-muted); margin-top: var(--s3); }

/* Facts list, the boring but important part */
.facts { list-style: none; padding: 0; display: grid; }
.facts li { padding: var(--s2) 0; border-top: 1px solid var(--border); max-width: none; }
.facts li + li { margin: 0; }
.facts li:last-child { border-bottom: 1px solid var(--border); }

/* ───────── Forms: label above, helper under label, error under field ───────── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s4); }
@media (max-width: 640px) { .panel { padding: var(--s3); } }
.field { display: grid; gap: var(--s0); }
.field + .field, .field + fieldset, fieldset + .field { margin-top: var(--s3); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.field__label { font-weight: 600; font-size: var(--size-ui); }
.field__help  { font-size: var(--size-small); color: var(--text-muted); font-weight: 400; }
.field__error { font-size: var(--size-small); color: var(--error); font-weight: 500; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: var(--s1h) var(--s2);
  background: var(--white); color: var(--text); font: inherit; font-size: var(--size-ui);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: rgba(10,24,38,.32); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--nx-blue-deep); box-shadow: var(--focus-ring); }
.field[data-invalid="true"] .input, .field[data-invalid="true"] .select, .field[data-invalid="true"] .textarea { border-color: var(--error); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: var(--text-muted); -webkit-mask: var(--icon-chevron) center/contain no-repeat; mask: var(--icon-chevron) center/contain no-repeat; pointer-events: none; }
.checks { display: grid; gap: var(--s1); }
.check { display: flex; align-items: center; gap: var(--s1h); min-height: 44px; font-size: var(--size-ui); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--nx-blue-deep); flex: 0 0 auto; }
.check input:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
.form__actions { margin-top: var(--s4); }
.form__note { margin-top: var(--s2); font-size: var(--size-small); color: var(--text-muted); max-width: 52ch; }


/* ═══════════ Edition 2.4 ═══════════ */
/* On a phone the one action sits in the bar beside Menu, not behind it */
.nav__cta { display: none; }
@media (max-width: 900px) {
  .nav__cta { display: inline-flex; min-height: 40px; padding: 0 14px; font-size: 14px; margin-left: auto; margin-right: var(--s1); }
  .nav__links .btn--nav { display: none; }
}
@media (max-width: 400px) { .nav__name { display: none; } }


/* ═══════════ Edition 2.5: nav and rail over dark sections ═══════════ */
.nav.on-dark { background: rgba(10,24,38,.78); border-bottom-color: var(--border-on-stage); }
.nav.on-dark .nav__name, .nav.on-dark .nav__toggle { color: var(--on-stage); }
.nav.on-dark .nav__toggle { border-color: var(--border-on-stage); }
.nav.on-dark .nav__link { color: var(--on-stage-muted); }
.nav.on-dark .nav__link[aria-current="true"], .nav.on-dark .nav__link:hover { color: var(--on-stage); }
.rail.on-dark .rail__label small { color: var(--on-stage-faint); }


/* ═══════════ Edition 2.6: secondary page review fixes ═══════════ */
/* Sibling passages on a Read page sit one step closer than distinct sections */
.section--passage { padding-block: var(--s5); }
@media (max-width: 760px) { .section--passage { padding-block: var(--s4); } }
.page-hero--tight { padding-bottom: var(--s4); }

/* Three promises in a row */
.services--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .services--three { grid-template-columns: 1fr; } }

/* Step cards used as links on pages where nothing drives them */
a.step { text-decoration: none; color: inherit; display: block; }
a.step:focus-visible { box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) { a.step:hover { border-color: var(--navy); transform: translateY(-3px); } }

/* The face carries the About page */
.person--large { grid-template-columns: 420px minmax(0, 1fr); }
@media (max-width: 900px) { .person--large { grid-template-columns: 1fr; } }

/* Form polish and states */
fieldset.field legend { padding-inline: 0; }
.select-wrap::after { background: var(--navy); }
.form__done { display: grid; gap: var(--s2); }
.form__done[hidden] { display: none; }
.form__done .slot { min-height: 120px; }

/* Focused controls clear the fixed nav */
.input, .select, .textarea, .check input, .form__done { scroll-margin-top: calc(var(--nav-height) + var(--s3)); }


/* ═══════════ Edition 2.7: the water scene behind the hero ═══════════
   ThreeUI ElementsCollection, water. The scene fills the hero; the hero
   content sits over it and lets pointer events through to the water so the
   ripples follow the cursor, except on anything pressable. */
.hero--scene { background: #060708; }
.hero--scene::before { display: none; }
.hero--scene .shader-frame { position: absolute; inset: 0; z-index: 0; }
.hero--scene .shader-frame .threeui-background { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero--scene .hero__inner { position: relative; z-index: 1; pointer-events: none; }
.hero--scene .hero__inner a, .hero--scene .hero__inner button { pointer-events: auto; }
.hero--scene .wordmark { color: var(--on-stage); text-shadow: 0 2px 40px rgba(0,0,0,.35); }
.hero--scene .hero__desc { color: var(--on-stage-muted); }
.hero--scene .hero__meta { color: var(--on-stage-faint); }
.hero--scene .eyebrow { color: var(--on-stage-faint); }
.hero--scene .wordmark__dot { background: var(--nx-blue); }
.hero--scene .scroll-cue { color: var(--on-stage-faint); z-index: 1; pointer-events: none; }
.hero--scene .scroll-cue::after { background: var(--on-stage-faint); }
.nav.on-dark { background: rgba(6,7,8,.55); }


/* ═══════════ Edition 2.8: bare hero, floating nav ═══════════
   Bradley, 26 October 2026: the hero is the water and the N. mark alone. No wordmark,
   no line, no scroll cue, no rail. The nav keeps no bar of its own; its text floats. */
.nav, .nav.is-scrolled, .nav.on-dark {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.hero--scene .hero__inner { display: none; }

/* The hero's message now lives in the Let's build interstitial */
.interstitial__inner { display: grid; justify-items: center; gap: var(--s2); max-width: 62ch; }
.interstitial__inner .eyebrow { margin: 0; color: var(--on-stage-faint); }
.interstitial__inner .display { margin: 0; }
.interstitial__desc { margin: 0; font-size: var(--size-body-lg); line-height: 1.55; color: var(--on-stage-muted); }
.interstitial__meta { margin: 0; font-size: var(--size-small); font-weight: 500; color: var(--on-stage-faint); }
.interstitial__meta span + span::before { content: " · "; margin: 0 var(--s0); }
.interstitial__inner .btn { margin-top: var(--s2); }


/* ═══════════ Edition 2.9: the 3D scenes ═══════════
   js/scenes3d.js, loaded on the first press of a 3D toggle. Labels are HTML laid over the
   canvas so they stay crisp; the step and stack cards remain the accessible controls. */
.scene3d { position: absolute; inset: 0; display: none; }
.scene3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.scene3d__labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene3d__label {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-stage-faint);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scene3d__label.is-on { color: var(--on-stage); background: rgba(10,24,38,.72); border-color: rgba(66,181,247,.65); }

.process-stage.is-3d .scene3d { display: block; }
.process-stage.is-3d .process-stage__path,
.process-stage.is-3d [data-pills],
.process-stage.is-3d .process-dot,
.process-stage.is-3d .process-tri,
.process-stage.is-3d .process-ring { display: none; }
.process-stage.is-3d .process-stage__disc { background: none; border-color: transparent; pointer-events: none; z-index: 1; }
.process-stage.is-3d .process-stage__disc .display { font-size: clamp(30px, 3.2vw, 44px); text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.process-stage.is-3d .process-stage__caption { z-index: 2; bottom: var(--s2); pointer-events: none; padding: var(--s1) var(--s2); border-radius: var(--radius); background: rgba(10,24,38,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.process-stage.is-3d { min-height: 480px; }

.board .scene3d--stacks { position: relative; height: clamp(240px, 24vw, 300px); margin: calc(-1 * var(--s2)) calc(-1 * var(--s4)); }
.board.is-3d .scene3d--stacks { display: block; }
.board.is-3d .eq { display: none; }

.toggle__opt[aria-busy="true"] { cursor: progress; opacity: .6; }
/* On a phone the 2D stage is a stacked grid; in 3D the scene takes a fixed square-ish
   area, the stage name sits over the core, and the caption follows below it. */
@media (max-width: 860px) {
  .process-stage.is-3d { display: block; min-height: 0; padding: 0 0 var(--s3); }
  .process-stage.is-3d .scene3d { position: relative; inset: auto; width: 100%; height: 320px; }
  .process-stage.is-3d .process-stage__disc { position: absolute; left: 50%; top: 160px; transform: translate(-50%, -50%); width: auto; }
  .process-stage.is-3d .process-stage__caption { position: static; transform: none; margin: 0 var(--s3); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ═══════════ Edition 2.10: the squish button ═══════════
   Apple style: a lit pill with a bright top edge, a navy arrow chip, and a spring
   press (js/site.js, "Squish"). Transform is driven by --sx / --sy from the spring;
   CSS only handles light and shadow, never the transform, so the spring is never fought. */
.btn--squish {
  min-height: 60px; padding: 0 8px 0 28px; gap: 16px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  background: linear-gradient(180deg, #7ccdfb 0%, var(--nx-blue) 46%, #36a6ec 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(10,24,38,.16),
    0 1px 2px rgba(0,0,0,.28),
    0 14px 34px -10px rgba(66,181,247,.6);
  transform: scale(var(--sx, 1), var(--sy, 1));
  transition: box-shadow 220ms var(--ease), filter 160ms var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; will-change: transform;
}
.btn--squish:active { transform: scale(var(--sx, 1), var(--sy, 1)); }
@media (hover: hover) and (pointer: fine) {
  .btn--squish:hover {
    background: linear-gradient(180deg, #8ad3fb 0%, #4dbaf8 46%, #36a6ec 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      inset 0 -1px 0 rgba(10,24,38,.16),
      0 2px 4px rgba(0,0,0,.28),
      0 20px 44px -10px rgba(66,181,247,.75);
  }
  .btn--squish:hover .btn__chip::before { transform: translateX(2px); }
}
.btn--squish[data-pressed] { filter: brightness(.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(10,24,38,.2), 0 1px 1px rgba(0,0,0,.3), 0 6px 16px -8px rgba(66,181,247,.5); }
.btn--squish:focus-visible { box-shadow: var(--focus-ring), 0 14px 34px -10px rgba(66,181,247,.6); }
.btn__chip {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,24,38,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.btn__chip::before {
  content: ""; width: 18px; height: 18px; background: var(--nx-blue);
  -webkit-mask: var(--icon-arrow) center/contain no-repeat; mask: var(--icon-arrow) center/contain no-repeat;
  transition: transform 260ms var(--ease);
}
.interstitial__inner .btn--squish { margin-top: var(--s3); }
@media (prefers-reduced-motion: reduce) { .btn--squish { transform: none; } }
@media (max-width: 860px) { .interstitial__inner .btn--squish { width: auto; align-self: center; } }


/* ═══════════ Edition 2.11: liquid buttons, site wide ═══════════
   Every .btn is driven by the springs in site.js once it carries [data-liquid]. CSS owns
   light and colour only; the transform belongs to the springs and is never transitioned. */
.btn[data-liquid] {
  position: relative; isolation: isolate; overflow: hidden;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1));
  transition: background-color var(--dur-fast) var(--ease), box-shadow 220ms var(--ease), filter 160ms var(--ease), color var(--dur-fast) var(--ease);
  will-change: transform; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.btn[data-liquid]:active { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sx, 1), var(--sy, 1)); }
/* the light inside the liquid: follows the pointer, swells and brightens on press */
.btn[data-liquid]::after {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(calc(90px + 70px * var(--g, 0)) circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,calc(.22 + .26 * var(--g, 0))), transparent 70%);
  opacity: 0; transition: opacity 280ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .btn[data-liquid]:hover::after { opacity: 1; } }
.btn[data-liquid][data-pressed]::after { opacity: 1; }
.btn[data-liquid][data-pressed] { filter: brightness(.96); }
.btn--ghost[data-liquid]::after {
  background: radial-gradient(calc(90px + 70px * var(--g, 0)) circle at var(--mx, 50%) var(--my, 50%),
              rgba(66,181,247,calc(.12 + .16 * var(--g, 0))), transparent 70%);
}
.btn--squish[data-liquid] { overflow: visible; }
.btn--squish[data-liquid]::after { inset: 0; }


/* ═══════════ Edition 2.12: stock photography ═══════════
   Unsplash, free licence, credits in img/stock/CREDITS.md. Used only as scene setting:
   never in a slot that stands for a client, a person on the team, or a quote. */
.svc__media { margin: var(--s3) 0 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); box-shadow: var(--shadow-1); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.perspective__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.perspective__tiles { position: relative; height: 460px; }
.tile { position: absolute; margin: 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface-2);
  box-shadow: 0 2px 6px rgba(10,24,38,.08), 0 24px 48px -18px rgba(10,24,38,.38); border: 4px solid var(--white); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--a { width: 220px; left: 0;   top: 46px;  rotate: -6deg; z-index: 1; }
.tile--b { width: 240px; left: 32%; top: 0;     rotate: 3deg;  z-index: 2; }
.tile--c { width: 200px; right: 0;  top: 150px; rotate: -2deg; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .tile { animation: tile-float 9s ease-in-out infinite; }
  .tile--b { animation-delay: -3s; } .tile--c { animation-delay: -6s; }
}
@keyframes tile-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 900px) {
  .perspective__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .perspective__tiles { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1h); padding: var(--s1) var(--s0); }
  .tile { position: static; width: auto; border-width: 3px; }
  .tile--b { translate: 0 -10px; }
}


/* ═══════════ Edition 2.13: blue headlines, no numbering, open service lists ═══════════
   Bradley, 26 October 2026. Headlines take the brand dark blue on light grounds and stay
   white on navy. Anton only; Poppins sub heads and body keep the navy ink. No section,
   step, stage or stack numbers anywhere. The Services "What is included" lists sit open,
   without a box. */
h1, h2, .display, .card__title { color: var(--heading); }
.on-stage, .card--stage, .board, .process-stage, .interstitial, .marquee { --heading: var(--on-stage); --heading-deep: var(--on-stage); }
.hero--scene { --heading: var(--on-stage); }
.card__num { justify-content: flex-end; }
.step__num { justify-content: flex-start; }
.board__head { justify-content: center; }
.svc__list { padding-top: var(--s1); }
.svc__list .ticks { margin-top: var(--s2); }
/* Card level titles sit on the grey surface, where the swatch blue is 2.86:1; they take the
   deeper shade of the same blue, which also reads as one heading level down. */
.card .card__title, .card .display, .card h2, .panel h2, .step .card__title { color: var(--heading-deep); }


/* ═══════════ Edition 2.14: scroll edge fade behind the floating nav ═══════════
   No bar. A soft blurred fade, solid behind the links and gone by 48px below them, so
   content never reads through the nav. Two layers, light and dark, cross fade as the
   nav passes over light or dark ground (site.js reads the colour directly beneath it). */
.nav::before, .nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 48px);
  z-index: -1; pointer-events: none;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  transition: opacity 320ms var(--ease);
}
.nav::before { background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.78) 58%, rgba(255,255,255,0)); opacity: 1; }
.nav::after  { background: linear-gradient(to bottom, rgba(7,14,22,.9), rgba(7,14,22,.72) 58%, rgba(7,14,22,0)); opacity: 0; }
.nav.on-dark::before { opacity: 0; }
.nav.on-dark::after  { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .nav::before, .nav::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ═══════════ Edition 2.15: the work, with video ═══════════
   Bradley's screen recordings of real builds. Card loops are eight second muted clips
   that play only while on screen (site.js); the walkthrough opens in a dialog with
   controls. Reduced motion: posters only until someone presses play. */
.work-media { position: relative; aspect-ratio: 2 / 1; background: var(--stage); overflow: hidden; }
.work-media--fill { position: absolute; inset: 0; aspect-ratio: auto; }
.work-media__loop { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 700ms var(--ease); }
.work-featured__media, .work-card__media { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.work-featured__media { min-height: 380px; }
.work-featured__media .pill, .work-card__media .pill { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .work-featured__media:hover .work-media__loop, .work-card__media:hover .work-media__loop { transform: scale(1.03); }
  .work-play:hover .work-play__icon, .work-card:hover .work-play__icon { opacity: 1; scale: 1; }
}
.work-play__icon {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(10,24,38,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px -10px rgba(0,0,0,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .85; scale: .92;
  transition: opacity 200ms var(--ease), scale 240ms var(--ease);
}
.work-play__icon::before { content: ""; width: 22px; height: 22px; margin-left: 3px; background: var(--white); -webkit-mask: var(--icon-play) center/contain no-repeat; mask: var(--icon-play) center/contain no-repeat; }
.work-card__kind { font-size: var(--size-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.work-card__body .card__title { margin-top: var(--s1); }
.work-card__body p { color: var(--text-muted); font-size: var(--size-ui); }
button.link-action { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.work-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s4); }
@media (max-width: 760px) { .work-grid--all { grid-template-columns: minmax(0, 1fr); } .work-featured__media { min-height: 0; aspect-ratio: 2 / 1; } }
.partner--single { grid-template-columns: minmax(0, 1fr); }

.clip { margin: auto; inset: 0; width: min(1180px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--stage); color: var(--on-stage); overflow: hidden; box-shadow: 0 40px 120px -20px rgba(0,0,0,.6); }
.clip::backdrop { background: rgba(6,10,16,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.clip[open] { animation: clip-in 420ms cubic-bezier(.2,.9,.25,1); }
@keyframes clip-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .clip[open] { animation: none; } }
.clip__frame { background: #000; }
.clip__video { width: 100%; max-height: 70vh; display: block; }
.clip__meta { display: flex; gap: var(--s3); align-items: flex-start; justify-content: space-between; padding: var(--s3) var(--s4) var(--s4); --text: var(--on-stage); --text-muted: var(--on-stage-muted); --text-faint: var(--on-stage-faint); --heading: var(--on-stage); --border-strong: rgba(255,255,255,.22); }
.clip__title { font-size: var(--size-card-title); color: var(--on-stage); margin: var(--s1) 0; }
.clip__note { color: var(--on-stage-muted); max-width: 64ch; margin: 0; }
.clip__close { flex: 0 0 auto; color: var(--on-stage); border-color: rgba(255,255,255,.3); }
.clip__close:hover { color: var(--on-stage); background: rgba(255,255,255,.1); }
@media (max-width: 640px) { .clip__meta { flex-direction: column; padding: var(--s3); } }

/* Perspective, Bradley 26 October 2026: the headline is one colour, and the photos larger */
.perspective .display span { color: var(--heading); }
@media (min-width: 901px) {
  .perspective__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s4); }
  .perspective__tiles { height: 620px; }
  .tile--a { width: 300px; left: 0;   top: 70px; }
  .tile--b { width: 320px; left: 30%; top: 0; }
  .tile--c { width: 280px; right: 0;  top: 230px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .perspective__tiles { height: 520px; }
  .tile--a { width: 240px; } .tile--b { width: 260px; } .tile--c { width: 225px; top: 190px; }
}


/* ═══════════ Edition 2.16: blue sector tags, concepts, the liquid glass call ═══════════ */
/* Sector tags on the work: a blue box, white type. The deeper brand blue so white 11px
   type stays readable (5.4:1); the swatch blue would be 3.05:1. */
.work-card__media .pill, .work-featured__tag, .concept__media .pill {
  background: var(--heading-deep); color: var(--white); border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(10,24,38,.45);
}

/* Concepts: masonry by columns, each still at its own shape, nothing cropped */
.concepts { columns: 4 260px; column-gap: var(--s3); margin-top: var(--s4); }
.concept { break-inside: avoid; margin: 0 0 var(--s4); }
.concept__media { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--surface-2);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-1);
  transition: box-shadow 260ms var(--ease), translate 260ms var(--ease); }
.concept__media img { display: block; width: 100%; height: auto; }
.concept__media .pill { position: absolute; top: var(--s2); left: var(--s2); }
.concept--tall .concept__media { aspect-ratio: 4 / 5; }
.concept--tall .concept__media img { height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 7s cubic-bezier(.45,0,.55,1); }
@media (hover: hover) and (pointer: fine) {
  .concept__media:hover { box-shadow: var(--shadow-2); translate: 0 -4px; }
  .concept--tall .concept__media:hover img { object-position: 50% 100%; }
}
.concept figcaption { display: grid; gap: 2px; padding: var(--s1h) var(--s0) 0; font-size: var(--size-small); color: var(--text-muted); }
.concept figcaption strong { color: var(--heading-deep); font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .01em; text-transform: uppercase; }
.clip__img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; }
.clip--still .clip__frame { background: var(--stage-2); }

/* The call to start: a liquid glass pill floating on a slow pool of brand blue */
/* Web approximation of Apple Liquid Glass (backdrop-filter, layered borders, highlights).
   Apple publishes Liquid Glass for its own platforms only; this is not an Apple asset. */
.cta-glass { padding-block: var(--s6); overflow: hidden; }
.cta-glass__wrap { position: relative; display: grid; place-items: center; min-height: 320px; isolation: isolate; }
.cta-glass__pool { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-glass__pool i { position: absolute; left: 50%; top: 50%; width: 360px; height: 220px; border-radius: 50%; filter: blur(48px); opacity: .55; }
.cta-glass__pool i:nth-child(1) { background: #42B5F7; translate: -78% -58%; }
.cta-glass__pool i:nth-child(2) { background: #2E9BE0; translate: -18% -38%; width: 300px; }
.cta-glass__pool i:nth-child(3) { background: #9fdcff; translate: -52% -8%; width: 420px; height: 180px; }
@media (prefers-reduced-motion: no-preference) {
  .cta-glass__pool i { animation: pool 14s ease-in-out infinite alternate; }
  .cta-glass__pool i:nth-child(2) { animation-duration: 17s; animation-delay: -5s; }
  .cta-glass__pool i:nth-child(3) { animation-duration: 20s; animation-delay: -9s; }
}
@keyframes pool { 50% { transform: translate(40px, -24px) scale(1.12); } 100% { transform: translate(-36px, 18px) scale(.94); } }
.btn--glass {
  min-height: 72px; padding: 0 10px 0 34px; gap: 18px; font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--navy);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 52%, rgba(255,255,255,.34) 100%),
    rgba(66,181,247,.16);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -14px 28px -10px rgba(46,155,224,.35),
    inset 0 0 0 1px rgba(66,181,247,.18),
    0 1px 2px rgba(10,24,38,.12),
    0 24px 60px -20px rgba(46,155,224,.65);
  backdrop-filter: blur(20px) saturate(190%); -webkit-backdrop-filter: blur(20px) saturate(190%);
}
.btn--glass, .btn--glass:hover, .btn--glass:active, .btn--glass:focus-visible { color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .btn--glass:hover { background:
      linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.22) 52%, rgba(255,255,255,.4) 100%),
      rgba(66,181,247,.24); }
}
.btn--glass .btn__chip { width: 52px; height: 52px; background: var(--navy); }
.btn--glass[data-liquid]::after { background: radial-gradient(calc(110px + 80px * var(--g, 0)) circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,calc(.5 + .3 * var(--g, 0))), transparent 70%); }
@media (prefers-reduced-transparency: reduce) { .btn--glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: #dff2fe; } }

/* ═══════════ Edition 2.17: commercial grade pass (emil-design-eng checklist) ═══════════ */
/* Touch screens: a tap must not leave a card lifted */
@media (hover: none) { .card.is-hoverable:hover { transform: none; } }
/* Stagger within 30 to 80ms a step, so a row lands together rather than trickling */
@media (prefers-reduced-motion: no-preference) {
  .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
  .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
  .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
}


/* ═══════════ Edition 2.18: commercial grade fixes (finish reviewer, 26 October 2026) ═══════════ */
/* 1. The featured tag sits inside a navy stage, where --heading-deep is re-scoped to white */
.card--stage .work-featured__tag, .work-featured__tag { background: #1A6FAE; color: #FFFFFF; }

/* 2. One section rhythm: no slide padded out to the viewport, one gap between sections */
.section { padding-block: var(--s6); }
.section--tight { padding-top: 0; }
.section--slide { min-height: 0; display: block; padding-block: var(--s6); }
@media (max-width: 760px) {
  .section, .section--slide { padding-block: var(--s5); }
  .section--tight { padding-top: 0; }
  .page-hero, .page-hero--tight { padding-bottom: var(--s4); }
}

/* 3. Cards in a row share their internals: actions sit on one line at the foot */
.work-card, .service { display: flex; flex-direction: column; }
.work-card__links { margin-top: auto; }
.service .link-action { margin-top: auto; padding-top: var(--s2); }
.service .pills { margin-top: var(--s2); }
.service { position: relative; }
.service .card__num { position: absolute; top: var(--s4); right: var(--s4); margin: 0; }
.service .card__title { padding-right: 32px; }

/* 4. Services: the photo is a full width row under each service, no empty column */
.svc > .svc__media { grid-column: 1 / -1; aspect-ratio: 21 / 8; margin-top: var(--s4); }
.svc > .svc__media img { object-position: 50% 45%; }
@media (max-width: 860px) { .svc > .svc__media { aspect-ratio: 16 / 10; } }

/* 5. Split heads align right only where there are two columns */
@media (max-width: 860px) { .section-head--split > .lede { justify-self: start; text-align: left; max-width: none; } }

/* 6. Larchfold: keep the poster's own headline in frame */
.work-featured .work-media__loop { object-position: 8% 50%; }

/* 8. The partner statement takes the blue like every other Anton headline */
.partner .display { color: var(--heading-deep); }

/* 9. Text actions never wrap */
.link-action { white-space: nowrap; }
button.link-action { text-align: left; }
@media (max-width: 480px) { .work-featured__body .link-action { letter-spacing: .08em; } }

/* 10. The closing glass call: no stacked padding above it */
.cta-glass { padding-block: 0 var(--s6); }
.cta-glass__wrap { min-height: 240px; }

/* 11. The founder card spans the container, so its edges meet the quotes below */
.team--one { grid-template-columns: minmax(0, 1fr); }
/* keep the Services passages tighter than full sections */
.section--passage { padding-block: var(--s5); }
@media (max-width: 760px) { .section--passage { padding-block: var(--s4); } }

/* Concepts, Bradley 26 October 2026: three concepts only, and in the viewer only the
   mock up is sharp. The same image, blown up and blurred, fills the frame as a haze;
   no video bar shows for a still. */
.concepts { columns: 3 280px; }
.clip__video[hidden], .clip__img[hidden] { display: none; }
.clip__frame { position: relative; overflow: hidden; }
.clip__haze { display: none; }
.clip--still .clip__haze { display: block; position: absolute; inset: -40px; background: center / cover no-repeat;
  filter: blur(34px) saturate(120%) brightness(.8); transform: scale(1.15); }
.clip--still .clip__frame { background: var(--stage); padding: var(--s3) 0; }
.clip--still .clip__img { position: relative; z-index: 1; border-radius: 12px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.6); max-height: 66vh; }

/* Concept cards: the device mock up floats sharp over a haze of its own poster */
.concept__media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--stage); isolation: isolate; }
.concept__haze { position: absolute; inset: -30px; z-index: -1; background: center / cover no-repeat;
  filter: blur(26px) saturate(120%) brightness(.85); transform: scale(1.1); }
.concept__media img { width: 92%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); transition: transform 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .concept__media:hover img { transform: scale(1.03); } }
.clip--still .clip__img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 28px 40px rgba(0,0,0,.5)); max-width: 92%; }
/* feather the crop so its own backdrop melts into the haze; only the devices read sharp */
.concept__media img, .clip--still .clip__img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
  filter: none;
}
.concept__media img { width: 100%; }
/* confirmation round: the partner statement beats .card p.display; the glass pool is never sliced */
.card.partner p.display { color: var(--heading-deep); }
.cta-glass { overflow-x: clip; overflow-y: visible; padding-block: var(--s5) var(--s6); }
@media (max-width: 760px) { .cta-glass__pool i { width: 220px; height: 150px; filter: blur(40px); } }


/* ═══════════ Edition 2.19: Services as a stage, ThreeUI 3D Paper ═══════════
   The four services as a list beside a navy stage holding the translucent glass sheet.
   The sheet (ThreeUI 3D Paper, exact source, NX colours and type) shows the chosen service. */
.paper-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); align-items: stretch; }
.paper-svcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.paper-svcs li + li { margin: 0; }
.paper-svc { border-radius: var(--radius-card); padding: var(--s2) var(--s3) var(--s3); border: 1px solid transparent;
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease); }
.paper-svc.is-on { background: var(--surface); border-color: var(--border); }
.paper-svc__btn { display: grid; gap: var(--s1); width: 100%; padding: var(--s1) 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer; }
.paper-svc__title { font-family: var(--font-display); font-size: var(--size-card-title); line-height: 1.05; letter-spacing: var(--tracking-display);
  text-transform: uppercase; color: var(--heading-deep); transition: color 260ms var(--ease); }
.paper-svc:not(.is-on) .paper-svc__title { color: var(--text-faint); }
@media (hover: hover) and (pointer: fine) { .paper-svc:not(.is-on) .paper-svc__btn:hover .paper-svc__title { color: var(--heading-deep); } }
.paper-svc__body { color: var(--text-muted); font-size: var(--size-ui); line-height: 1.6; }
.paper-svc:not(.is-on) .paper-svc__body { display: none; }
.paper-svc .link-action { display: none; margin-top: var(--s1); }
.paper-svc.is-on .link-action { display: inline-flex; }
.paper-svc__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

.paper-stage__scene { position: relative; min-height: 640px; border-radius: var(--radius-card); overflow: hidden; background: #0A1826;
  box-shadow: var(--shadow-stage); border: 1px solid var(--border-on-stage); }
.three-d-paper { position: absolute; inset: 0; overflow: hidden; background: #0A1826; }
.three-d-paper__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #0A1826;
  opacity: 0; transition: opacity 240ms ease-out; }
.three-d-paper[data-state="ready"] .three-d-paper__frame { opacity: 1; }
.paper-stage__hint { display: none; }
@media (max-width: 900px) {
  .paper-stage { grid-template-columns: minmax(0, 1fr); }
  .paper-stage__scene { order: -1; min-height: 520px; }
}
/* touch screens: the sheet must not trap the page scroll; it keeps its idle motion */
@media (hover: none), (pointer: coarse) { .three-d-paper__frame { pointer-events: none; } }


/* ═══════════ Edition 2.20: each service is a 3D Paper sheet ═══════════
   The Services section is a navy band; four borderless glass sheets sit straight on it.
   Each sheet's scene is the band's exact navy with no vignette, grain or wordmark, so no
   edge shows: no cards, no frames, just the paper. */
.services-band { background: var(--stage); }
.services-band .section-head .lede { color: var(--on-stage-muted); }
.paper-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
.paper-tile { display: grid; justify-items: center; gap: var(--s1); }
.paper-tile__sheet { position: relative; width: 100%; aspect-ratio: 5 / 6; max-height: 640px; overflow: hidden; background: #0A1826; }
.paper-tile__link { color: var(--on-stage); }
.paper-tile__link:hover { color: var(--nx-blue); }
.paper-tiles__hint { text-align: center; margin-top: var(--s3); font-size: var(--size-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--on-stage-faint); }
@media (hover: none), (pointer: coarse) { .paper-tiles__hint { display: none; } }
.services-band .card.custom { margin-top: var(--s4); }
@media (max-width: 760px) { .paper-tiles { grid-template-columns: minmax(0, 1fr); } .paper-tile__sheet { aspect-ratio: 6 / 7; } }
/* the sheet fills about three quarters of its scene; bring the link up under the paper */
.paper-tile__link { margin-top: calc(-1 * var(--s5)); position: relative; z-index: 1; }
@media (max-width: 760px) { .paper-tile__link { margin-top: calc(-1 * var(--s4)); } }

/* White again (Bradley, 26 October 2026): the sheets float on the page itself. Their scenes
   are see-through and each sheet carries its own brand blue, so no box or band is needed. */
.services-sheets .paper-tile__sheet, .services-sheets .three-d-paper, .services-sheets .three-d-paper__frame { background: transparent; }
.services-sheets .three-d-paper__frame { color-scheme: normal; }
.services-sheets .paper-tile__link { color: var(--text); }
.services-sheets .paper-tile__link:hover { color: var(--heading-deep); }
.services-sheets .paper-tiles__hint { color: var(--text-faint); }

/* The sheets carry each card's content in full (Bradley, 26 October 2026). Feather each
   sheet's frame so nothing of its edge shows on white; the real link stays for keyboards
   and appears on focus; pressing the sheet itself opens the service. */
.services-sheets .paper-tile__sheet {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
  cursor: pointer;
}
.services-sheets .paper-tile__link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.services-sheets .paper-tile__link:focus-visible { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-top: calc(-1 * var(--s5)); }
.services-sheets .paper-tile { position: relative; }
.paper-tiles__hint { display: block; width: 100%; text-align: center; }
/* touch screens cannot press the sheet (it lets the page scroll), so the link shows */
@media (hover: none), (pointer: coarse) {
  .services-sheets .paper-tile__link { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-top: calc(-1 * var(--s4)); }
}
.paper-tiles__hint { max-width: none; margin-inline: auto; }

/* ═══════════ Edition 2.22: headlines stand in front of the page ═══════════
   Bradley, 26 October 2026: the site should feel more 3D. Every Anton headline gets a short
   extruded edge in deeper shades of its own blue and a soft shadow cast on the page below,
   so it reads as standing off the surface, not printed on it. Sizes in em so the depth
   scales with the type. On desktop the big headlines lean a few degrees towards the
   pointer (site.js); never under reduced motion, never on touch screens. */
h1, h2, .display {
  text-shadow:
    0 .010em 0 #2b93d6, 0 .020em 0 #2788c9, 0 .030em 0 #237dbc, 0 .040em 0 #1f73b1, 0 .050em 0 #1A6FAE,
    0 .09em .10em rgba(10,24,38,.22), 0 .22em .30em rgba(10,24,38,.14);
}
.card__title, .paper-svc__title, .concept figcaption strong {
  text-shadow:
    0 .02em 0 #155f97, 0 .04em 0 #114f80, 0 .06em 0 #0d406a,
    0 .12em .14em rgba(10,24,38,.20), 0 .26em .34em rgba(10,24,38,.10);
}
/* white headlines on navy: the extrusion goes into blue grey and the shadow into the dark */
.on-stage h1, .on-stage h2, .on-stage .display, .card--stage .card__title, .card--stage .display,
.interstitial .display, .clip__title, .hero--scene .wordmark {
  text-shadow:
    0 .012em 0 #d6ecfb, 0 .024em 0 #a9d6f4, 0 .036em 0 #7cbfeb, 0 .048em 0 #4fa7df,
    0 .10em .12em rgba(0,0,0,.45), 0 .24em .34em rgba(0,0,0,.35);
}
.lean { transform: perspective(1100px) rotateX(var(--lx, 0deg)) rotateY(var(--ly, 0deg)); transform-origin: 30% 60%; will-change: transform; }


/* ═══════════ Edition 2.23: every button is the Apple pill ═══════════
   Bradley, 27 October 2026: all clickable buttons match "Let's start building". A lit
   pill with a bright top edge and a navy arrow chip; primary glossy blue, secondary
   glossy white (frosted on navy). The liquid springs (site.js) drive every one. The Work
   page's liquid glass call keeps its own material. */
.btn:not(.btn--glass) {
  gap: 14px; padding: 0 7px 0 24px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--navy);
  background: linear-gradient(180deg, #7ccdfb 0%, var(--nx-blue) 46%, #36a6ec 100%);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(10,24,38,.16),
    0 1px 2px rgba(0,0,0,.18),
    0 12px 28px -12px rgba(46,155,224,.6);
}
.btn:not(.btn--glass), .btn:not(.btn--glass):hover, .btn:not(.btn--glass):active, .btn:not(.btn--glass):focus-visible { color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--glass):not(.btn--ghost):hover {
    background: linear-gradient(180deg, #8ad3fb 0%, #4dbaf8 46%, #36a6ec 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(10,24,38,.16), 0 2px 4px rgba(0,0,0,.18), 0 18px 40px -12px rgba(66,181,247,.7);
  }
  .btn:hover .btn__chip::before { transform: translateX(2px); }
  .btn:hover .btn__chip--close::before { transform: rotate(135deg); }
}
.btn:not(.btn--glass):focus-visible { box-shadow: var(--focus-ring), 0 12px 28px -12px rgba(46,155,224,.6); }

/* the chip, sized to each button */
.btn .btn__chip { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10,24,38,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn .btn__chip::before { content: ""; width: 16px; height: 16px; background: var(--nx-blue);
  -webkit-mask: var(--icon-arrow) center/contain no-repeat; mask: var(--icon-arrow) center/contain no-repeat;
  transition: transform 240ms var(--ease); }
.btn .btn__chip--close::before { -webkit-mask-image: var(--icon-plus); mask-image: var(--icon-plus); transform: rotate(45deg); }
.btn--lg:not(.btn--glass) { min-height: 60px; padding-left: 28px; font-size: var(--size-body); }
.btn--lg .btn__chip { width: 46px; height: 46px; }
.btn--lg .btn__chip::before { width: 18px; height: 18px; }
.btn--nav { min-height: 46px; padding: 0 5px 0 18px; gap: 10px; font-size: 15px; }
.btn--nav .btn__chip { width: 36px; height: 36px; }
.btn--nav .btn__chip::before { width: 14px; height: 14px; }
.nav__cta { min-height: 42px; padding: 0 4px 0 14px; gap: 8px; }
.nav__cta .btn__chip { width: 34px; height: 34px; }
@media (max-width: 900px) { .nav__links .btn--nav { justify-content: space-between; } }

/* secondary: glossy white, same chip */
.btn.btn--ghost {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 55%, #e8f1f9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(10,24,38,.08),
    inset 0 -1px 0 rgba(10,24,38,.08),
    0 1px 2px rgba(10,24,38,.08),
    0 12px 26px -14px rgba(10,24,38,.28);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn--ghost:hover {
    background: linear-gradient(180deg, #ffffff 0%, #eaf5fe 55%, #dcedfb 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(46,155,224,.25), 0 2px 4px rgba(10,24,38,.08), 0 16px 32px -14px rgba(46,155,224,.4);
  }
}
/* secondary on navy: frosted, white type, white chip */
.on-stage .btn--ghost, .card--stage .btn--ghost, .clip .btn--ghost {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 26px -14px rgba(0,0,0,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.on-stage .btn--ghost, .on-stage .btn--ghost:hover, .card--stage .btn--ghost, .card--stage .btn--ghost:hover, .clip .btn--ghost, .clip .btn--ghost:hover { color: #fff; }
.on-stage .btn--ghost .btn__chip, .card--stage .btn--ghost .btn__chip, .clip .btn--ghost .btn__chip { background: #fff; }
.on-stage .btn--ghost .btn__chip::before, .card--stage .btn--ghost .btn__chip::before, .clip .btn--ghost .btn__chip::before { background: var(--navy); }
.clip__close { min-height: 50px; }
/* the open phone menu is a white panel: its links are always navy, whatever the nav sits on */
.nav[data-open="true"] .nav__link, .nav.on-dark[data-open="true"] .nav__link { color: var(--text); }
.nav[data-open="true"] .nav__link[aria-current="true"] { color: var(--heading-deep); }
/* the Menu toggle is a pill too: secondary gloss, frosted over dark ground */
.nav__toggle {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); font-weight: 600; color: var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 55%, #e8f1f9 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(10,24,38,.08), 0 1px 2px rgba(10,24,38,.08), 0 10px 22px -14px rgba(10,24,38,.28);
}
.nav.on-dark .nav__toggle {
  color: #fff; border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.12) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 22px -14px rgba(0,0,0,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}


/* ═══════════ Edition 2.24: no pre-headlines, a cleaner homepage ═══════════
   Bradley, 27 October 2026. The ribbons read in white; the three How we work cards are
   plain cards now the stage they drove is gone. */
.marquee__item { color: #FFFFFF; }
.marquee__item i { color: var(--nx-blue); }
.step--static { cursor: default; background: var(--surface); border-color: var(--border); box-shadow: none; }
.step--static:hover { transform: none; }
.section-head h2:first-child, .page-hero h1:first-child { margin-top: 0; }


/* ═══════════ Edition 2.25: About, stripped back ═══════════
   "Who we are" opens the page with no box and no photograph slot; its text is set large. */
.about-intro .about-intro__text { max-width: 58ch; margin-top: var(--s3); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.6; color: var(--text-muted); }
.about-intro .about-intro__text:first-of-type { margin-top: var(--s4); }
/* Who you deal with is now a headline and one line: no extra air under it */
#team { padding-bottom: var(--s6); }
#team .section-head { margin-bottom: 0; }


/* ═══════════ Edition 2.26: fewer boxes ═══════════
   Bradley, 27 October 2026: the text and buttons stay, the boxes around them go. */
.statbar--open, .custom--open, .partner--open { background: none; border: 0; box-shadow: none; border-radius: 0; }
.statbar--open { padding: 0; margin-top: var(--s4); }
.custom--open { padding: 0; margin-top: var(--s5); }
.partner--open > div { padding: 0; }
.partner--open { gap: var(--s5); }
.partner--open > div + div { border: 0; }
@media (max-width: 860px) { .partner--open { gap: var(--s4); } .partner--open > div + div { border: 0; } }
.steps--open { gap: var(--s5); }
.steps--open .step { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.steps--open .step:hover { transform: none; background: none; box-shadow: none; }
.steps--open .step .card__title { margin-top: 0; }
@media (max-width: 860px) { .steps--open { gap: var(--s4); } }

/* ═══════════ Edition 2.27: headlines are GLOSS (Bradley, 27 October 2026) ═══════════
   The pill buttons' material: Anton capitals in a blue gradient lit from the top, with a
   soft drop shadow, so they sit just above the page. On navy: white to pale blue.
   (Lift and Layer were previewed and dropped.) Placed last so it beats the earlier
   extruded text-shadow rules. */
h1, h2, .display,
.card__title, .paper-svc__title, .concept figcaption strong {
  background: linear-gradient(180deg, #8fd6fc 0%, #42B5F7 42%, #2E9BE0 70%, #1A6FAE 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none; filter: drop-shadow(0 .06em .07em rgba(10,24,38,.22)) drop-shadow(0 .22em .32em rgba(46,155,224,.22));
}
.on-stage h1, .on-stage h2, .on-stage .display, .interstitial .display,
.card--stage .card__title, .clip__title {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #bfe6fd 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .08em .12em rgba(0,0,0,.5));
}
#process { padding-bottom: var(--s6); }

/* Edition 2.28 (Bradley, 27 October 2026): the 3D paper sheets made the page lag, so the
   services are plain floating text again: no boxes, no WebGL. Titles in Gloss, a soft
   lift on hover, the text links and tags in brand colours. */
.svc-floats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.svc-float { display: grid; align-content: start; gap: var(--s1h); transition: translate 260ms var(--ease); }
.svc-float p { color: var(--text-muted); max-width: 46ch; }
.svc-float .link-action { margin-top: var(--s1); color: var(--heading-deep); }
.svc-float .pills { margin-top: var(--s1); }
.svc-float .pill { border-color: rgba(46,155,224,.35); color: var(--heading-deep); }
@media (hover: hover) and (pointer: fine) { .svc-float:hover { translate: 0 -4px; } }
@media (max-width: 760px) { .svc-floats { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
/* the ribbons sit with equal space above and below: 96px on desktop, 64px on phones */
#perspective { padding-bottom: 80px; }
@media (max-width: 760px) { #perspective { padding-bottom: 58px; } #process { padding-bottom: var(--s5); } }

/* Services: each sits on a soft tinted panel, no border, for texture (Bradley, 27 October 2026).
   A light brand blue wash, brighter in the top corner, with a faint lift shadow. */
.svc-floats { gap: var(--s3); }
.svc-float {
  padding: var(--s5) var(--s5) var(--s4);
  border-radius: var(--radius-card);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #eef7fe 0%, #e3f1fc 100%);
  box-shadow: 0 1px 2px rgba(10,24,38,.04), 0 18px 40px -26px rgba(46,155,224,.45);
  transition: translate 260ms var(--ease), box-shadow 260ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .svc-float:hover { box-shadow: 0 2px 4px rgba(10,24,38,.05), 0 24px 48px -24px rgba(46,155,224,.55); }
}
.svc-float .pill { background: rgba(255,255,255,.7); }
@media (max-width: 760px) { .svc-float { padding: var(--s4) var(--s3) var(--s3); } }
.svc-float .card__title { background: linear-gradient(180deg, #42B5F7 0%, #2E9BE0 45%, #1A6FAE 100%); -webkit-background-clip: text; background-clip: text; }

/* Services panels go dark navy with white type (Bradley, 27 October 2026): contrast on the
   white page. Titles keep the gloss, white into pale blue; links and tags in Nx Blue. */
.svc-float {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(66,181,247,.16) 0%, rgba(66,181,247,0) 55%),
    linear-gradient(160deg, #112436 0%, #0A1826 100%);
  box-shadow: 0 1px 2px rgba(10,24,38,.2), 0 22px 44px -24px rgba(10,24,38,.65);
}
@media (hover: hover) and (pointer: fine) {
  .svc-float:hover { box-shadow: 0 2px 4px rgba(10,24,38,.2), 0 28px 54px -24px rgba(46,155,224,.5); }
}
.svc-float .card__title { background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #bfe6fd 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .08em .12em rgba(0,0,0,.5)); }
.svc-float p { color: rgba(255,255,255,.86); }
.svc-float .link-action, .svc-float .link-action:hover { color: #FFFFFF; }
.svc-float .link-action::after { background: var(--nx-blue); }
.svc-float .pill { background: rgba(255,255,255,.06); border-color: rgba(66,181,247,.5); color: #FFFFFF; }

/* Questions go dark navy with white type, matching the service panels (Bradley, 27 October 2026) */
.faq details, .faq details[open] {
  border: 0;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(66,181,247,.14) 0%, rgba(66,181,247,0) 55%),
    linear-gradient(160deg, #112436 0%, #0A1826 100%);
  box-shadow: 0 1px 2px rgba(10,24,38,.2), 0 18px 36px -24px rgba(10,24,38,.6);
}
.faq summary { color: #FFFFFF; }
.faq summary::after { background: var(--nx-blue); }
.faq details > p { color: rgba(255,255,255,.86); }
.faq details > p a { color: #FFFFFF; }
.faq summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* each service panel opens with its stock photo, edge to edge, fading into the navy */
.svc-float { overflow: hidden; }
.svc-float__media { position: relative; margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s2); aspect-ratio: 16 / 9; overflow: hidden; }
.svc-float__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.svc-float__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,24,38,0) 45%, rgba(13,30,46,.85) 100%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .svc-float:hover .svc-float__media img { transform: scale(1.04); } }
@media (max-width: 760px) { .svc-float__media { margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) var(--s2); } }


/* ═══════════ Edition 2.29: reveal panels, scroll effect, one colour code ═══════════ */

/* 1. Service panels: the photo covers the panel, the title sits on it, the rest waits
      underneath and comes up on hover, focus, or (touch) the middle of the screen */
.svc-float { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; padding: 0; overflow: hidden; isolation: isolate; outline: none; }
.svc-float .svc-float__media { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; z-index: -1; }
.svc-float .svc-float__media img { width: 100%; height: 100%; object-fit: cover;
  transition: opacity 520ms var(--ease), transform 900ms var(--ease), filter 520ms var(--ease); }
.svc-float .svc-float__media::after { background: linear-gradient(180deg, rgba(10,24,38,.05) 20%, rgba(10,24,38,.55) 62%, rgba(10,24,38,.96) 100%);
  transition: background-color 520ms var(--ease); }
.svc-float__body { padding: var(--s5); }
.svc-float__body .card__title { margin: 0; }
.svc-float__more { display: grid; grid-template-rows: 0fr; opacity: 0; translate: 0 12px;
  transition: grid-template-rows 520ms var(--ease), opacity 360ms var(--ease), translate 520ms var(--ease); }
.svc-float__more > div { overflow: hidden; display: grid; gap: var(--s1h); padding-top: 0; transition: padding-top 520ms var(--ease); }
.svc-float:hover .svc-float__more, .svc-float:focus-within .svc-float__more, .svc-float.is-open .svc-float__more {
  grid-template-rows: 1fr; opacity: 1; translate: 0 0; }
.svc-float:hover .svc-float__more > div, .svc-float:focus-within .svc-float__more > div, .svc-float.is-open .svc-float__more > div { padding-top: var(--s2); }
.svc-float:hover .svc-float__media img, .svc-float:focus-within .svc-float__media img, .svc-float.is-open .svc-float__media img {
  opacity: .28; transform: scale(1.06); filter: blur(2px) saturate(.8); }
.svc-float:hover .svc-float__media::after, .svc-float:focus-within .svc-float__media::after, .svc-float.is-open .svc-float__media::after {
  background-color: rgba(10,24,38,.35); }
.svc-float:focus-visible { box-shadow: var(--focus-ring), 0 22px 44px -24px rgba(10,24,38,.65); }
.svc-float:hover { translate: 0 -4px; }
@media (max-width: 760px) { .svc-float { min-height: 400px; } .svc-float__body { padding: var(--s4) var(--s3); } }
@media (prefers-reduced-motion: reduce) {
  .svc-float__more, .svc-float__more > div, .svc-float .svc-float__media img { transition: none; }
  .svc-float:hover { translate: none; }
}

/* 2. Scroll effect, every page */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* a thin Nx Blue line along the top shows how far down the page you are */
    body::before {
      content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none;
      background: linear-gradient(90deg, #2E9BE0, #42B5F7);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: ds-progress linear both; animation-timeline: scroll(root);
    }
    @keyframes ds-progress { to { transform: scaleX(1); } }

    /* media and panels settle into place as they enter */
    .work-media__loop, .tile img, .svc__media img, .concept__media img, .svc-float, .faq details {
      animation: ds-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 90%;
    }
    @keyframes ds-settle { from { opacity: .25; scale: .94; } to { opacity: 1; scale: 1; } }

    /* big headlines drift a touch slower than the page, for depth */
    .section-head h2, .page-hero h1, .perspective .display {
      animation: ds-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    @keyframes ds-drift { from { translate: 0 28px; } to { translate: 0 -28px; } }
  }
}

/* 3. One colour code: every heading is brand blue; text stays navy */
.svc__list h3, .partner--open h3, .partner h3, .footer h3, footer h3 { color: var(--heading-deep); }
.interstitial__desc { color: #FFFFFF; opacity: 1; }

/* Services page: all body text one dark navy, clearly blue (Bradley, 28 October 2026).
   Headlines, buttons and links keep their own colours. #163A5F is 11.7:1 on white. */
.page-services main p:not(.display), .page-services main li, .page-services main .step__body,
.page-services main .lede, .page-services main .muted, .page-services main .note { color: #163A5F; }
/* Every page: body text on white is the same dark navy (Bradley, 28 October 2026).
   Text inside navy panels stays white; headlines, buttons and links keep their colours. */
main :is(p, li, .step__body, .lede, .muted, .note, .about-intro__text, figcaption span):not(.display):not(:is(.on-stage, .card--stage, .svc-float, .faq, .clip, .interstitial, .marquee, .hero) *) { color: #163A5F; }

/* Services hero: three floating photo tiles beside the headline, in the homepage style */
@media (min-width: 901px) {
  .svc-hero .perspective__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
  .svc-hero .svc-hero__tiles { height: 500px; }
  .svc-hero .tile--a { width: 230px; left: 0; top: 60px; }
  .svc-hero .tile--b { width: 250px; left: 32%; top: 0; }
  .svc-hero .tile--c { width: 215px; right: 0; top: 190px; }
}
@media (max-width: 900px) { .svc-hero .svc-hero__tiles { margin-top: var(--s4); } }


/* ═══════════ Edition 2.7: the N. mark is a back key to NX Tech ═══════════ */
.nav__lead { display: inline-flex; align-items: center; gap: var(--s1h); }
.nav__back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }