/* ==========================================================================
   4K Consultants
   Plain CSS. No framework, no build step, no utility classes.
   Dark, wide, type-led. The WebGL layer does the spectacle; everything else
   stays quiet so it reads expensive rather than busy.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ground */
  --bg: #08090b;
  --bg-1: #0d0f13;
  --bg-2: #131720;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.055);

  /* ink */
  --fg: #f3f5f8;
  --fg-2: #a3aab6;
  --fg-3: #6d7480;

  /* the client's mark, brightened for a dark ground */
  --b1: #2e7dff;
  --b2: #22d3ee;
  --grad: linear-gradient(100deg, var(--b1), var(--b2));

  --edge: clamp(1.75rem, 4.2vw, 4.5rem);
  --maxw: 88rem;
  --measure: 46rem;

  --r: 6px;
  --r-lg: 18px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 104px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.17vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

img,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--b1);
  color: #fff;
}

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

/* film grain, sits over everything, costs nothing */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -4%); }
  60% { transform: translate(-3%, -3%); }
  80% { transform: translate(4%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.section--tight {
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line-2);
}

/* ------------------------------------------------------------- typography */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

p { margin: 0; }

.d1 { font-size: clamp(2.9rem, 9.2vw, 9.5rem); }
.d2 { font-size: clamp(2.4rem, 6.4vw, 6.2rem); }
.d3 { font-size: clamp(1.9rem, 3.9vw, 3.6rem); }
.d4 { font-size: clamp(1.4rem, 2.3vw, 2.05rem); line-height: 1.06; }
.d5 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.2; letter-spacing: -0.025em; }

.lede {
  max-width: var(--measure);
  font-size: clamp(1.1rem, 1.02rem + 0.42vw, 1.4rem);
  line-height: 1.5;
  color: var(--fg-2);
}

.mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* the one accent device */
.tick {
  display: block;
  width: 3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--fg-3);
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--grad);
}

/* --------------------------------------------------------------- reveals */

/* Start visible and offset. Nothing waits at opacity 0 behind a trigger, so a
   screenshot, a crawler and a no-JS render all show the whole page. */
[data-rise] {
  transform: translate3d(0, 22px, 0);
  transition: transform 1s var(--ease);
}

[data-rise].is-in {
  transform: none;
}

[data-rise-d="1"] { transition-delay: 0.07s; }
[data-rise-d="2"] { transition-delay: 0.14s; }
[data-rise-d="3"] { transition-delay: 0.21s; }
[data-rise-d="4"] { transition-delay: 0.28s; }

/* per-line heading build */
.split-line {
  display: block;
  overflow: hidden;
}

.split-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--ease);
}

.is-in .split-line > span,
.split-line.is-in > span {
  transform: none;
}

.split-line:nth-child(2) > span { transition-delay: 0.08s; }
.split-line:nth-child(3) > span { transition-delay: 0.16s; }
.split-line:nth-child(4) > span { transition-delay: 0.24s; }

/* ---------------------------------------------------------------- cursor */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, width 0.3s var(--ease), height 0.3s var(--ease),
    margin 0.3s var(--ease), background-color 0.3s, border-color 0.3s;
  will-change: transform;
}

.cursor.is-on { opacity: 1; }

.cursor.is-hot {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-color: transparent;
  background: rgba(46, 125, 255, 0.18);
  backdrop-filter: blur(2px);
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* -------------------------------------------------------------- controls */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.7rem;
  border: 0;
  border-radius: 100px;
  background: var(--grad);
  color: #fff;
  font-size: 0.97rem;
  font-weight: 520;
  letter-spacing: -0.012em;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--b2), var(--b1));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.98); }

.btn svg { flex: none; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
}

.btn--ghost::after { background: rgba(255, 255, 255, 0.06); }

/* text link with a rule that wipes in */
.tlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  color: var(--fg);
  font-weight: 480;
}

.tlink::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--ease);
}

.tlink:hover::after,
.tlink:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.tlink svg { transition: transform 0.5s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.5s, backdrop-filter 0.5s, border-color 0.5s, height 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  height: 74px;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--line-2);
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* -------------------------------------------------------------- the logo */

/* Inline SVG, so it is crisp at any size and inherits the surrounding colour.
   Height is the only thing set; the aspect ratio does the rest. */
.logo {
  display: block;
  height: 1em;
  width: auto;
  aspect-ratio: 1394 / 266;
  color: var(--fg);
  overflow: visible;
}

.logo__k { transform-origin: 50% 50%; }

/* The two arms of the K wipe in on first paint, upper then lower. */
@keyframes logo-arm {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(-30% 0, 100% 0, 100% 100%, -30% 100%); }
}

.logo__k--a { animation: logo-arm 0.9s var(--ease) 0.15s both; }
.logo__k--b { animation: logo-arm 0.9s var(--ease) 0.32s both; }

.nav__logo {
  font-size: 46px;          /* the logo reads this as its height */
  display: block;
  transition: opacity 0.3s;
  --logo-k1: #1668dd;
  --logo-k2: #22d3ee;
}

.nav__logo .logo { transition: transform 0.7s var(--ease); }
.nav__logo:hover .logo { transform: translateX(2px); }

/* Hovering re-runs the arm wipe, which is the whole flourish. */
.nav__logo:hover .logo__k--a { animation: logo-arm 0.7s var(--ease) 0s both; }
.nav__logo:hover .logo__k--b { animation: logo-arm 0.7s var(--ease) 0.1s both; }

.nav.is-stuck .nav__logo { font-size: 34px; }

@media (max-width: 900px) {
  /* nav height matches the side gutter above and below the logo, so the
     header sits in the page rather than clinging to its corner */
  .nav { height: 88px; }
  .nav.is-stuck { height: 68px; }
  .nav__logo { font-size: 32px; }
  .nav.is-stuck .nav__logo { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo__k--a, .logo__k--b,
  .nav__logo:hover .logo__k--a, .nav__logo:hover .logo__k--b { animation: none; }
}

.nav__links {
  display: none;
  gap: 2.1rem;
}

.nav__link {
  position: relative;
  padding: 0.4rem 0;
  color: var(--fg-2);
  font-size: 0.88rem;
  letter-spacing: -0.006em;
  transition: color 0.3s;
}

.nav__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--fg); }

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__cta { display: none; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: flex-end;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.4s var(--ease), opacity 0.3s, width 0.4s var(--ease);
}

.burger span:last-child { width: 14px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:last-child { width: 22px; transform: translateY(-6.5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--edge) 3rem;
  background: var(--bg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease);
}

.menu.is-open { clip-path: inset(0 0 0 0); }

.menu a {
  display: block;
  padding: 0.5rem 0;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 560;
  letter-spacing: -0.04em;
  border-bottom: 1px solid var(--line-2);
}

.menu .btn { margin-top: 2rem; align-self: flex-start; }

@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .menu { display: none; }
}

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

.hero {
  position: relative;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #05060a;
}

.hero__canvas,
.hero__fallback,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The floor. A plain <img>, so it paints whatever happens to WebGL or to the
   film: Safari will not draw a poster attribute on a video it has not started
   loading, which left the hero black on iOS. */
.hero__poster {
  z-index: 0;
  filter: brightness(0.44) saturate(0.72) contrast(1.08);
}

/* The fallback shows until WebGL paints, and stays if WebGL is absent, so it
   carries the same dark grade the shader applies. The film is a bright
   near-white world; on a dark page it has to be brought right down or white
   headline copy has nothing to sit on. */
.hero__fallback {
  z-index: 1;
  filter: brightness(0.44) saturate(0.72) contrast(1.08);
}

.hero__canvas {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero__canvas.is-live { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(5, 6, 10, 0.92) 0%, rgba(5, 6, 10, 0.66) 34%, rgba(5, 6, 10, 0.12) 62%, transparent 100%),
    radial-gradient(125% 80% at 50% 45%, transparent 28%, rgba(5, 6, 10, 0.6) 100%),
    linear-gradient(to bottom, rgba(5, 6, 10, 0.72) 0%, transparent 26%, transparent 58%, rgba(8, 9, 11, 0.96) 100%);
}

.hero__chapters {
  position: relative;
  z-index: 4;
  margin-top: -100svh;
  pointer-events: none;
}

.chapter {
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: var(--nav-h) 4rem;
}

.chapter__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
  pointer-events: auto;
}

.chapter__copy {
  max-width: 54rem;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.8s ease, transform 1s var(--ease);
}

.chapter.is-active .chapter__copy {
  opacity: 1;
  transform: none;
}

.chapter h1,
.chapter h2 {
  max-width: 19ch;
  font-size: clamp(2.5rem, 6.6vw, 6.4rem);
}

.chapter .lede { margin-top: 1.6rem; }

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.hero__tags li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(10, 12, 16, 0.5);
  backdrop-filter: blur(6px);
  font-size: 0.85rem;
  color: var(--fg);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.4rem;
}

/* chapter index, bottom right of the stage */
.hero__index {
  position: absolute;
  right: var(--edge);
  bottom: 2.2rem;
  z-index: 4;
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-end;
}

.hero__index button {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.2rem 0;
  background: none;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  transition: color 0.4s;
}

.hero__index button i {
  display: block;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--ease), background 0.4s;
}

.hero__index button[aria-current="true"] { color: var(--fg); }
.hero__index button[aria-current="true"] i { width: 3.2rem; background: var(--b2); }

.hero__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: var(--grad);
}

@media (min-width: 62rem) {
  .hero__index { display: flex; }
}

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

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: 1.9rem;
  border-block: 1px solid var(--line-2);
  background: var(--bg-1);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__row {
  display: flex;
  flex: none;
  gap: 3.5rem;
  padding-right: 3.5rem;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__row { animation-play-state: paused; }

.marquee__row span {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 520;
  letter-spacing: -0.03em;
  color: var(--fg-2);
}

.marquee__row span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b2);
}

@keyframes slide {
  to { transform: translateX(-100%); }
}

/* ------------------------------------------------------------- statement */

.stmt { max-width: 26ch; }

.stmt--wide { max-width: 32ch; }

/* phrase stack */
.phrases {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 34rem;
}

.phrases li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg-3);
  transition: color 0.45s, padding-left 0.55s var(--ease);
}

.phrases li:hover {
  color: var(--fg);
  padding-left: 1rem;
}

/* ------------------------------------------------------- pinned outcomes */

.pin { position: relative; }

.pin__stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100svh;
  overflow: hidden;
}

.pin__track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-inline: var(--edge);
  will-change: transform;
}

.case {
  position: relative;
  flex: none;
  width: min(84vw, 34rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  transition: border-color 0.5s;
}

.case:hover { border-color: rgba(255, 255, 255, 0.2); }

.case__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-2);
}

.case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.78);
  transition: filter 0.9s ease, transform 1.2s var(--ease);
}

.case:hover .case__media img {
  filter: none;
  transform: scale(1.04);
}

.case__body { padding: clamp(1.5rem, 2.6vw, 2.25rem); }

.case__metric {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.case__label {
  margin-top: 0.6rem;
  color: var(--fg-3);
  font-size: 0.88rem;
}

.case__title {
  margin-top: 1.5rem;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: -0.03em;
}

.case__lede {
  margin-top: 0.8rem;
  color: var(--fg-2);
  font-size: 0.97rem;
}

.case__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-2);
}

.case__chain {
  color: var(--fg-3);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

/* mobile: the pin is dropped and the track becomes a swipe rail */
@media (max-width: 61.99rem) {
  .pin__stage {
    position: static;
    height: auto;
    padding-block: 1rem 2rem;
  }
  .pin__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.25rem;
  }
  .case { scroll-snap-align: center; }
}

/* ---------------------------------------------------------- capabilities */

.caps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}

.cap {
  border-bottom: 1px solid var(--line-2);
}

.cap__head {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: clamp(1.35rem, 2.6vw, 2.1rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color 0.4s;
}

.cap__no {
  color: var(--fg-3);
  font-family: "Geist Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  transition: color 0.4s;
}

.cap__name {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 540;
  letter-spacing: -0.035em;
  transition: transform 0.6s var(--ease);
}

.cap__head:hover .cap__name { transform: translateX(0.6rem); }
.cap__head:hover .cap__no { color: var(--b2); }

.cap__sign {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}

.cap__sign::before,
.cap__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--fg-2);
  transition: transform 0.5s var(--ease);
}

.cap__sign::after { transform: rotate(90deg); }
.cap[data-open="true"] .cap__sign::after { transform: rotate(0deg); }

.cap__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease);
}

.cap[data-open="true"] .cap__panel { grid-template-rows: 1fr; }

.cap__inner { overflow: hidden; }

.cap__grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin: 0 0 2.2rem;
  padding: 0 0 0 3.85rem;
  list-style: none;
}

.cap__grid p { color: var(--fg-2); font-size: 0.95rem; margin-top: 0.3rem; }
.cap__grid strong { font-weight: 520; letter-spacing: -0.02em; }

@media (min-width: 48rem) {
  .cap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .cap__grid { padding-left: 0; }
}

/* ------------------------------------------------------------- diptych */

.dip {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
}

@media (min-width: 56rem) {
  .dip { grid-template-columns: 1fr 1fr; }
}

.dip__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-height: 19rem;
  padding: clamp(1.75rem, 3.4vw, 3rem);
  background: var(--bg-1);
}

.dip__side--alt {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(46, 125, 255, 0.16), transparent 60%),
    var(--bg-2);
}

.dip__line {
  font-size: clamp(1.4rem, 2.7vw, 2.2rem);
  font-weight: 540;
  line-height: 1.12;
  letter-spacing: -0.035em;
  transition: opacity 0.4s, transform 0.55s var(--ease);
}

.dip.is-swapping .dip__line {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.dots {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.9rem;
}

.dots button {
  position: relative;
  width: 34px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.4s;
}

.dots button::after {
  content: "";
  position: absolute;
  inset: -14px 0;
}

.dots button[aria-selected="true"] { background: var(--b2); }

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

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
}

.step {
  display: grid;
  gap: 0.9rem 2.5rem;
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--line-2);
}

@media (min-width: 56rem) {
  .step { grid-template-columns: 5rem minmax(0, 20rem) minmax(0, 1fr); }
}

.step__no {
  color: var(--b2);
  font-family: "Geist Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.step__name { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.035em; }

.step__body { color: var(--fg-2); }

.step__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.step__items li {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--fg-2);
}

.step__close { margin-top: 1.1rem; color: var(--fg-3); }

/* ---------------------------------------------------------- philosophy */

.philo {
  position: relative;
  overflow: hidden;
}

.philo__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.philo__in { position: relative; z-index: 1; }

.verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verbs li {
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(8, 9, 11, 0.45);
  backdrop-filter: blur(8px);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------ card grid */

.grid {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (min-width: 44rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.grid > li {
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  background: var(--bg);
  transition: background 0.5s;
}

.grid > li:hover { background: var(--bg-1); }

.grid h3 { font-size: 1.18rem; letter-spacing: -0.028em; }
.grid p { margin-top: 0.55rem; color: var(--fg-2); font-size: 0.95rem; }

/* Standalone figures. The plates are shot dark, so they need lifting rather
   than grading down: a touch of contrast, and more of it on hover. */
.shot {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  filter: contrast(1.04) saturate(1.02);
  transition: filter 1.1s var(--ease), transform 1.1s var(--ease);
}

.shot:hover {
  filter: contrast(1.1) saturate(1.12) brightness(1.1);
}

/* ------------------------------------------------------------------ cta */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 5rem);
  background:
    radial-gradient(90% 140% at 15% 0%, rgba(46, 125, 255, 0.2), transparent 55%),
    radial-gradient(80% 130% at 95% 100%, rgba(34, 211, 238, 0.16), transparent 55%),
    var(--bg-1);
}

/* ---------------------------------------------------------------- form */

.form { display: grid; gap: 0; }

.field { padding-block: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line-2); }

.field__q {
  display: block;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 540;
  letter-spacing: -0.03em;
}

.field__help { display: block; margin-top: 0.45rem; color: var(--fg-3); font-size: 0.92rem; }

.field__row { display: grid; gap: 1.1rem; margin-top: 1.3rem; }

@media (min-width: 44rem) { .field__row--2 { grid-template-columns: 1fr 1fr; } }

label.lbl {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--fg-3);
  font-size: 0.82rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  color: var(--fg);
  font: inherit;
  transition: border-color 0.3s, background 0.3s;
}

textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--fg-3); }

input:focus, textarea:focus {
  outline: none;
  border-color: var(--b1);
  background: var(--bg-2);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }

.chips button {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--fg-2);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.chips button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
}

.err { display: block; margin-top: 0.6rem; color: #ff6b6b; font-size: 0.85rem; }

.form__foot { padding-top: 2.2rem; }

/* -------------------------------------------------------------- article */

.prose { max-width: 38rem; }
.prose p { margin-top: 1.4rem; color: var(--fg-2); font-size: 1.07rem; line-height: 1.68; }
.prose p:first-child { margin-top: 0; }

/* --------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line-2);
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
  background: var(--bg-1);
}

.foot__grid { display: grid; gap: 2.75rem; }

@media (min-width: 56rem) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

.foot__logo { font-size: 40px; --logo-k1: #1668dd; --logo-k2: #22d3ee; }
@media (max-width: 700px) { .foot__logo { font-size: 30px; } }

.foot ul { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.foot a:hover { color: var(--b2); }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-2);
  color: var(--fg-3);
  font-size: 0.82rem;
}

/* ------------------------------------------------------------- utility */

.stack > * + * { margin-top: var(--gap, 1.5rem); }
.center { text-align: center; margin-inline: auto; }
.hide { display: none !important; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The honeypot is an <input>, and the form rules above match on the type
   attribute, which outranks a bare class. Matching element plus class here
   keeps it genuinely 1px instead of full width and off the side of the page. */
input.sr,
textarea.sr {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  body::after { animation: none; }
  .marquee__row { animation: none; }
  [data-rise] { transform: none; }
  .split-line > span { transform: none; }
  .chapter__copy { opacity: 1; transform: none; }
  .cursor { display: none; }

  /* the journey becomes a plain stack of readable chapters, no video fetch */
  .hero__stage { position: static; height: 62svh; }
  .hero__chapters { margin-top: 0; }
  .chapter { min-height: auto; padding-block: 3.5rem; }
  .pin__stage { position: static; height: auto; }
  .pin__track { overflow-x: auto; }
}

/* =====================================================================
   The interactive set pieces
   ===================================================================== */

/* ------------------------------------------------------ 1. the funding plate

   Fragments of an idea, scattered, pulled into the shape of the mark as the
   section passes. The still sits underneath as a bed and as the fallback for
   anyone who has asked for less motion. */

.fund__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 58rem) {
  .fund__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

.fund__close {
  margin-top: 2.2rem;
  max-width: 26ch;
  color: var(--fg);
}

.fund__result {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-2);
  max-width: 62ch;
  color: var(--fg-2);
}

.fund__fig {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(120% 100% at 70% 20%, #10141d 0%, #08090b 70%);
}

.fund__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  filter: saturate(0.7) brightness(0.6);
  transition: opacity 1.2s var(--ease);
}

.fund__fig:hover .fund__plate { opacity: 0.15; }

.fund__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Nothing to assemble without motion, so the still carries it alone. */
@media (prefers-reduced-motion: reduce) {
  .fund__plate { opacity: 1; filter: none; }
  .fund__canvas { display: none; }
}

/* ------------------------------------------------- 2. attention and action */

.philo__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.9);
}

.philo__canvas { opacity: 0.95; }

@media (prefers-reduced-motion: reduce) {
  .philo__plate { opacity: 0.8; }
  .philo__canvas { display: none; }
}

/* The statement has to win over both layers. */
.philo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 22% 50%, rgba(8, 9, 11, 0.92) 0%, rgba(8, 9, 11, 0.66) 45%, rgba(8, 9, 11, 0.18) 100%);
  pointer-events: none;
}

/* ---------------------------------------------------- 3. the capability map

   The list says what a group contains; this draws it. Sticky, so it stays put
   while the reader works down the accordion. */

.caps__grid { display: grid; gap: 0; }

@media (min-width: 68rem) {
  .caps__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}

.capmap { display: none; }

@media (min-width: 68rem) {
  .capmap {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    align-self: start;
  }
}

.capmap__svg { width: 100%; height: auto; overflow: visible; }

.capmap__hub {
  fill: rgba(46, 125, 255, 0.10);
  stroke: var(--b1);
  stroke-width: 1;
}

.capmap__hublabel {
  fill: var(--fg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.capmap__link {
  fill: none;
  stroke: var(--b1);
  stroke-width: 1;
  opacity: 0;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: capline 1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms);
}

@keyframes capline {
  to { opacity: 0.34; stroke-dashoffset: 0; }
}

.capmap__leaf {
  opacity: 0;
  animation: capleaf 0.6s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 220ms);
}

@keyframes capleaf { to { opacity: 1; } }

.capmap__dot { fill: var(--b2); }

.capmap__leaflabel {
  fill: var(--fg-2);
  font-size: 12.5px;
  letter-spacing: -0.005em;
}

@media (prefers-reduced-motion: reduce) {
  .capmap__link { animation: none; opacity: 0.34; stroke-dashoffset: 0; }
  .capmap__leaf { animation: none; opacity: 1; }
}

/* --------------------------------------------------------- 4. the spine

   One line down the left of the process, filling as you read past each step.
   It sits behind the list rather than inside it, so the grid is untouched. */

.steps-hold { position: relative; }

.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line-2);
  pointer-events: none;
}

@media (max-width: 56rem) { .spine { display: none; } }

.spine__fill {
  display: block;
  width: 1px;
  height: 100%;
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
  transition: transform 0.25s linear;
}

.step__no { transition: color 0.6s var(--ease), transform 0.6s var(--ease); }
.step.is-reached .step__no { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .spine__fill { transform: scaleY(1); }
}

/* ------------------------------------------------------------ the plates

   Three more places where the page had type and nothing else. */

.cta__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.cta__in { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .cta__field { display: none; } }

/* The pivot line, sitting on the lattice. */
.pivot { overflow: hidden; }

.pivot__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  mask-image: radial-gradient(75% 120% at 50% 50%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 120% at 50% 50%, #000 10%, transparent 78%);
}

.pivot__in { position: relative; z-index: 1; }

/* A wide plate, cropped short, used as a divider with something in it. */
.band {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.band .shot {
  display: block;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  filter: brightness(1.02) contrast(1.05) saturate(0.98);
}

.band .shot:hover { filter: brightness(1.18) contrast(1.08) saturate(1.06); }

@media (max-width: 40rem) { .band .shot { aspect-ratio: 16 / 9; } }