/* ==========================================================================
   Nomada Studio — site.css
   Ink on paper. One continuous scroll.
   ========================================================================== */

/* --- Fonts (self-hosted, latin subset, no external requests) -------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Paper & ink. --paper matches the original splash background exactly. */
  --paper: #f8f6f1;
  --paper-warm: #f2eee5;
  --ink: #14120e;
  --ink-70: #4a453b;
  --ink-45: #857e70;
  --ink-20: rgba(20, 18, 14, 0.2);
  --rule: rgba(20, 18, 14, 0.13);
  --rule-soft: rgba(20, 18, 14, 0.07);

  /* Kaya's own blue. Used only inside the Kaya section. */
  --kaya: #42a5f5;

  --font-display: 'Fraunces', ui-serif, 'Iowan Old Style', 'Palatino Linotype',
    Palatino, 'Hoefler Text', Georgia, serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Fluid measures.
     NOTE: `ch` resolves against the element's OWN font-size, so any measure
     meant for display type must be set on the display element itself — never
     on a wrapper running at body size. */
  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --measure: 52ch;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

/* --- Topographic map ------------------------------------------------------
   One continuous procedural landscape behind the whole page. Because it also
   draws the section band fills, it must sit above nothing and below
   everything: content lives at z-index 1, the map at 0.
   -------------------------------------------------------------------------- */

body {
  position: relative;
}

main,
.contact {
  position: relative;
  z-index: 1;
}

.topo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.topo__slot {
  position: absolute;
  left: 0;
  width: 100%;
}

/* No content-visibility here, deliberately. It defers rendering until content
   is "relevant" — which means the viewport edge, rather than the moment a tile
   is inserted. On a phone that turned into the map arriving a block at a time.
   Tiles are inserted during idle time until the whole map is present, so
   letting them paint straight away is what makes the landscape simply be
   there rather than assemble itself as you scroll. */

.topo__tile {
  display: block;
  width: 100%;
  height: 100%;
  /* A CSS animation, not a JS-driven transition: it fires when the element is
     inserted, so a tile that does arrive on screen dissolves in rather than
     snapping — even on a browser that has suspended rAF mid-scroll. */
  animation: tile-in 0.55s var(--ease) both;
}

@keyframes tile-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hairlines. vector-effect keeps them crisp at any tile scale. */
.topo__minor,
.topo__major,
.topo__dashed {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topo__major {
  stroke-width: 1.15;
}

.topo__dashed {
  stroke-dasharray: 5 7;
}

/* Contour weight, per background tone. These six numbers are the whole dial —
   nothing here needs the geometry regenerated. Index (major) contours stay a
   step stronger than the rest, as on a printed map. */
.topo__band--paper .topo__minor,
.topo__band--warm .topo__minor {
  stroke-opacity: 0.17;
}

.topo__band--paper .topo__major,
.topo__band--warm .topo__major {
  stroke-opacity: 0.25;
}

.topo__band--paper .topo__dashed,
.topo__band--warm .topo__dashed {
  stroke-opacity: 0.14;
}

.topo__band--ink .topo__minor {
  stroke-opacity: 0.058;
}

.topo__band--ink .topo__major {
  stroke-opacity: 0.1;
}

.topo__band--ink .topo__dashed {
  stroke-opacity: 0.045;
}

.topo__route {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.topo__route svg {
  display: block;
  width: 100%;
}

/* The route should read as a quiet thread through the landscape, not as the
   loudest thing on the page. Weight is tuned here, in one place. */
.topo__route-line {
  stroke-width: 1.7;
  stroke-opacity: 0.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Ink bands swallow a little more, so the emerald gets a touch back. */
.topo__route-line--ink {
  stroke-opacity: 0.29;
}

@media (max-width: 56rem) {
  .topo__route-line {
    stroke-width: 1.3;
  }
}

.topo__node {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

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

.topo__node-halo {
  fill-opacity: 0.05;
}

.topo__node-core {
  fill-opacity: 0.34;
}

/* Until the map reports for duty — and if it never does — CSS keeps the band
   backgrounds, so the page is never left with paper text on paper. */
html:not(.topo-ready) .kaya,
html:not(.topo-ready) .contact {
  background: var(--ink);
}

html:not(.topo-ready) .independent {
  background: var(--paper-warm);
}

/* --- Accessibility -------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: 0.7rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 0 0 3px 3px;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: 4px;
  border-radius: 1px;
}

/* --- Type utilities ------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
}

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-45);
  line-height: 1.4;
}

.lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 3.1vw, 3.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  text-wrap: balance;
}

.prose {
  max-width: var(--measure);
  color: var(--ink-70);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
}

/* --- Layout --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(6rem, 16vh, 12rem);
}

/* --- Progress rail (the "route") ------------------------------------------ */

.rail {
  position: fixed;
  left: clamp(1rem, 2.4vw, 2.25rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.rail.is-visible {
  opacity: 1;
}

.rail__line {
  position: relative;
  width: 1px;
  height: 34vh;
  background: var(--rule);
}

/* The drawn segment — scaled by --progress (0–1) set from JS. */
.rail__line::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  height: 100%;
  background: var(--ink);
  transform: scaleY(var(--progress, 0));
  transform-origin: top;
}

/* Same inversion as the masthead, so the rail survives the ink sections. */
.rail.is-inverted .rail__line {
  background: rgba(248, 246, 241, 0.22);
}

.rail.is-inverted .rail__line::after {
  background: var(--paper);
}

.rail.is-inverted .rail__label {
  color: rgba(248, 246, 241, 0.5);
}

.rail__line,
.rail__line::after,
.rail__label {
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.rail__label {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  writing-mode: vertical-rl;
  white-space: nowrap;
  transition: opacity 0.35s var(--ease), color 0.4s var(--ease);
}

@media (max-width: 60rem) {
  .rail {
    display: none;
  }
}

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--gutter);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.masthead.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Over the ink sections (Kaya, contact) the masthead flips to paper. */
.masthead.is-inverted {
  color: var(--paper);
}

.masthead.is-inverted .masthead__link {
  color: rgba(248, 246, 241, 0.72);
  border-bottom-color: rgba(248, 246, 241, 0.28);
}

.masthead.is-inverted .masthead__link:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

.masthead__mark {
  transition: color 0.4s var(--ease);
}

.masthead__mark {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.masthead__link {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-70);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ink-20);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.masthead__link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* --- Reveal --------------------------------------------------------------- */

.r {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}

.r.is-in {
  opacity: 1;
  transform: none;
}

/* Stagger delays as classes rather than inline style attributes — the site's
   Content-Security-Policy omits 'unsafe-inline', which blocks style="" in
   markup. (Setting element.style from JS is CSSOM and stays allowed.) */
.d-1 { --d: 80ms; }
.d-2 { --d: 160ms; }
.d-3 { --d: 240ms; }
.d-4 { --d: 320ms; }
.d-5 { --d: 400ms; }
.d-6 { --d: 480ms; }
.d-7 { --d: 560ms; }
.d-8 { --d: 900ms; }
.d-9 { --d: 1150ms; }

/* Same reason: beat counts come from the stage's data attribute. */
[data-beats='3'] .stage__track { --beats: 3; }
[data-beats='4'] .stage__track { --beats: 4; }
[data-beats='5'] .stage__track { --beats: 5; }

/* Line-art strokes draw themselves in. */
.draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.4s var(--ease);
  transition-delay: var(--d, 0ms);
}

.is-in .draw,
.draw.is-in {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   1 — Opening
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 6rem 2rem;
}

.hero__art {
  width: clamp(9rem, 22vw, 15rem);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
  color: var(--ink);
}

.hero__title {
  font-size: clamp(3.25rem, 1.4rem + 11.5vw, 10.5rem);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.035em;
}

.hero__tagline {
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
  font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-70);
}

.hero__cue-wrap {
  display: flex;
  justify-content: center;
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  opacity: 0;
  animation: cue-in 1.2s var(--ease) 1.9s forwards;
}

/* Borrowed from .kaya__badge so the page has one pill, not two. */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem 0.6rem 1.05rem;
  border: 1px solid var(--ink-20);
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-70);
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}

.hero__cue:hover {
  color: var(--ink);
  border-color: var(--ink);
  background-color: rgba(20, 18, 14, 0.035);
}

.hero__cue-arrow {
  width: 0.7rem;
  height: 0.875rem;
  flex: none;
  animation: cue-drop 2.8s var(--ease) infinite;
}

/* Nudging the arrow only — the pill itself holds still. */
@keyframes cue-in {
  to {
    opacity: 1;
  }
}

@keyframes cue-drop {
  0%,
  100% {
    transform: translateY(-1px);
    opacity: 0.5;
  }
  45% {
    transform: translateY(2px);
    opacity: 1;
  }
}

/* ==========================================================================
   2 — Who we are
   ========================================================================== */

.manifesto {
  padding-block: clamp(8rem, 26vh, 18rem);
}

.manifesto__beat + .manifesto__beat {
  margin-top: clamp(8rem, 30vh, 20rem);
}

/* Measures live on the .lead itself so `ch` tracks the display size. */
.manifesto__beat--a .lead {
  max-width: 22ch;
}

.manifesto__beat--b {
  text-align: right;
}

.manifesto__beat--b .lead {
  max-width: 19ch;
  margin-left: auto;
}

.manifesto__beat .eyebrow {
  display: block;
  margin-bottom: clamp(1.5rem, 4vh, 2.75rem);
}

/* Word-by-word rise. */
.rise {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.rise > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease);
  transition-delay: var(--d, 0ms);
}

.is-in .rise > i {
  transform: none;
}

@media (max-width: 48rem) {
  .manifesto__beat--b {
    text-align: left;
  }

  .manifesto__beat--b .lead {
    margin-left: 0;
  }
}

/* ==========================================================================
   3 — What we build (sticky stage)
   ========================================================================== */

.stage {
  position: relative;
}

/* Track height decides how long the pin stays put: one viewport per beat. */
.stage__track {
  position: relative;
  height: calc(var(--beats, 3) * 100svh);
}

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

.build__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  width: 100%;
}

.build__aside .eyebrow {
  display: block;
  margin-bottom: 1.5rem;
}

.build__aside p {
  max-width: 30ch;
  color: var(--ink-70);
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
}

.build__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 1.5vh, 1rem);
}

.build__item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.875rem, 2vw, 1.75rem);
  color: var(--ink);
  opacity: 0.22;
  transition: opacity 0.7s var(--ease);
}

.build__item.is-active {
  opacity: 1;
}

.build__num {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ink-45);
  flex: none;
  width: 2ch;
}

.build__word {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 1rem + 9vw, 7rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
}

.build__note {
  display: block;
  /* The display words are set at line-height 1.05, so descenders (g, p) hang
     well past the box. Clear them explicitly. */
  margin-top: 0.9rem;
  font-family: var(--font-text);
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-70);
  max-width: 30ch;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.build__item.is-active .build__note {
  opacity: 1;
  transform: none;
}

@media (max-width: 52rem) {
  .build__grid {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vh, 3.5rem);
  }

  .build__item {
    opacity: 1;
  }

  .build__note {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   4 — Kaya (ink stage)
   ========================================================================== */

/* Band fill comes from the topo layer — see html:not(.topo-ready) fallback. */
.kaya {
  color: var(--paper);
  --rule: rgba(248, 246, 241, 0.16);
  --rule-soft: rgba(248, 246, 241, 0.08);
  --ink-70: rgba(248, 246, 241, 0.68);
  --ink-45: rgba(248, 246, 241, 0.46);
  --ink-20: rgba(248, 246, 241, 0.24);
}

.kaya__intro {
  padding-block: clamp(7rem, 20vh, 13rem) clamp(4rem, 12vh, 8rem);
}

.kaya__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 5vh, 3rem);
}

.kaya__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.7rem;
  border: 1px solid var(--ink-20);
  border-radius: 100px;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
}

.kaya__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kaya);
}

.kaya__name {
  font-size: clamp(3.5rem, 1.5rem + 11vw, 10rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.kaya__subtitle {
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 0.9rem + 1.7vw, 2.25rem);
  letter-spacing: -0.015em;
  color: var(--ink-70);
  font-variation-settings: 'opsz' 72;
}

.kaya__blurb {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.75rem, 5vh, 2.75rem);
  border-top: 1px solid var(--rule);
}

.kaya__blurb p {
  color: var(--ink-70);
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
}

/* Sticky product stage */
.kaya__stage .stage__pin {
  align-items: center;
}

.kaya__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  width: 100%;
}

.kaya__device {
  justify-self: center;
  position: relative;
  width: min(17rem, 62vw);
}

/* Phone frame — placeholder screens swap via .kaya-screen img/svg */
.device {
  position: relative;
  aspect-ratio: 1320 / 2868;
  border-radius: 13% / 6%;
  background: #1d1b16;
  padding: 2.4%;
  box-shadow: 0 0 0 1px rgba(248, 246, 241, 0.14),
    0 2.5rem 5rem rgba(0, 0, 0, 0.55);
}

.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11% / 5.2%;
  overflow: hidden;
  background: #f4f7fb;
}

.device__island {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 3.4%;
  border-radius: 100px;
  background: #16150f;
  z-index: 3;
}

.kaya-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.kaya-screen.is-active {
  opacity: 1;
  transform: none;
}

.kaya-screen > img,
.kaya-screen > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kaya__beats {
  position: relative;
  min-height: 13rem;
}

.kaya__beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}

.kaya__beat.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.kaya__beat h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 96;
}

.kaya__beat p {
  margin-top: clamp(0.875rem, 2.5vh, 1.5rem);
  max-width: 32ch;
  color: var(--ink-70);
}

.kaya__ticks {
  display: flex;
  gap: 0.5rem;
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
}

.kaya__ticks i {
  width: 2rem;
  height: 1px;
  background: var(--ink-20);
  transition: background 0.5s var(--ease);
}

.kaya__ticks i.is-active {
  background: var(--paper);
}

.kaya__outro {
  padding-block: clamp(4rem, 12vh, 8rem) clamp(7rem, 20vh, 13rem);
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 10vh, 6rem);
}

.kaya__outro p {
  max-width: 46ch;
  color: var(--ink-70);
}

.kaya__outro .eyebrow {
  display: block;
  margin-bottom: 1.25rem;
}

@media (max-width: 52rem) {
  .kaya__layout {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 7vh, 4rem);
  }

  .kaya__device {
    width: min(13rem, 48vw);
  }

  .kaya__beats {
    min-height: 15rem;
  }
}

/* ==========================================================================
   5 — Approach
   ========================================================================== */

.approach__head {
  padding-block: clamp(7rem, 20vh, 12rem) clamp(2rem, 6vh, 4rem);
}

.approach__head .eyebrow {
  display: block;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.approach__pin {
  display: grid;
  grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}

.approach__index {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.approach__index button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font: inherit;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--ink-45);
  text-align: left;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}

.approach__index button.is-active {
  opacity: 1;
  color: var(--ink);
}

.approach__panels {
  position: relative;
  min-height: clamp(16rem, 42vh, 24rem);
}

.approach__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  pointer-events: none;
}

.approach__panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.approach__panel h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1rem + 5.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144;
  max-width: 15ch;
}

.approach__panel p {
  margin-top: clamp(1.25rem, 3.5vh, 2rem);
  max-width: 38ch;
  color: var(--ink-70);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
}

/* Phones: shorten each beat's scroll zone so multi-beat stages don't turn
   into an endurance test. */
@media (max-width: 52rem) {
  .stage__track {
    height: calc(var(--beats, 3) * 82svh);
  }
}

@media (max-width: 52rem) {
  .approach__pin {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .approach__index {
    flex-direction: row;
    gap: 0.875rem;
  }

  .approach__panels {
    min-height: clamp(18rem, 48vh, 26rem);
  }
}

/* ==========================================================================
   6 — Independent
   ========================================================================== */

.independent {
  padding-block: clamp(7rem, 20vh, 13rem);
}

.independent__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}

.independent .lead {
  max-width: 16ch;
}

.independent .eyebrow {
  display: block;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.independent .lead + .prose {
  margin-top: clamp(1.75rem, 5vh, 2.75rem);
}

.independent .prose + .prose {
  margin-top: 1.15rem;
}

.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.4fr) minmax(0, 1fr);
  gap: 1rem;
  padding-block: clamp(0.875rem, 2.4vh, 1.25rem);
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding-top: 0.35em;
}

.facts dd {
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
}

.facts a {
  text-decoration: none;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}

.facts a:hover {
  border-color: var(--ink);
}

@media (max-width: 52rem) {
  .independent__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7 — More to come
   ========================================================================== */

.next {
  position: relative;
  padding-block: clamp(9rem, 26vh, 16rem);
  overflow: hidden;
}

.next__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.next__inner .lead {
  max-width: 18ch;
}

.next__inner .eyebrow {
  display: block;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.next__inner p.prose {
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  max-width: 42ch;
  text-align: center;
}

/* ==========================================================================
   8 — Contact / colophon
   ========================================================================== */

.contact {
  color: var(--paper);
  --rule: rgba(248, 246, 241, 0.16);
  --ink-70: rgba(248, 246, 241, 0.68);
  --ink-45: rgba(248, 246, 241, 0.46);
  --ink-20: rgba(248, 246, 241, 0.24);
  padding-block: clamp(7rem, 20vh, 13rem) clamp(2.5rem, 6vh, 4rem);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.contact__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.2rem + 6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144;
}

.contact__role {
  margin-top: 1rem;
  color: var(--ink-70);
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
}

.contact__email {
  display: inline-block;
  margin-top: clamp(2rem, 6vh, 3.25rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 0.9rem + 2.1vw, 2.75rem);
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 72;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 0.1em;
  transition: border-color 0.3s var(--ease);
  overflow-wrap: anywhere;
}

.contact__email:hover {
  border-color: var(--paper);
}

.contact__address {
  display: block;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-45);
}

.contact__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}

.contact__col h3 {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 1.1rem;
}

.contact__col li + li {
  margin-top: 0.6rem;
}

.contact__col a,
.contact__col span {
  font-size: 0.9375rem;
  color: var(--paper);
  text-decoration: none;
  line-height: 1.5;
}

.contact__col a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}

.contact__col a:hover {
  border-bottom-color: var(--ink-20);
}

.contact__col address {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink-70);
  line-height: 1.6;
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  margin-top: clamp(4rem, 12vh, 8rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-45);
}

@media (max-width: 52rem) {
  .contact__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Document pages (privacy / terms / support)
   ========================================================================== */

.doc {
  padding-block: clamp(7rem, 18vh, 11rem) clamp(5rem, 14vh, 9rem);
}

.doc__head {
  max-width: 46rem;
  padding-bottom: clamp(2.5rem, 7vh, 4rem);
  margin-bottom: clamp(2.5rem, 7vh, 4rem);
  border-bottom: 1px solid var(--rule);
}

.doc__head h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144;
  margin-top: 1.25rem;
}

.doc__head p {
  margin-top: 1.5rem;
  color: var(--ink-70);
  max-width: 44ch;
}

.doc__body {
  max-width: 42rem;
}

.doc__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 36;
  margin-top: clamp(3rem, 8vh, 4.5rem);
  margin-bottom: 1rem;
}

.doc__body h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.doc__body p,
.doc__body li {
  color: var(--ink-70);
  font-size: clamp(0.9375rem, 0.92rem + 0.2vw, 1.0625rem);
  line-height: 1.72;
}

.doc__body p + p {
  margin-top: 1rem;
}

.doc__body ul {
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
}

.doc__body ul li {
  position: relative;
  padding-left: 1.35rem;
}

.doc__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--ink-45);
}

.doc__body a {
  text-decoration: none;
  border-bottom: 1px solid var(--ink-20);
  transition: border-color 0.25s var(--ease);
}

.doc__body a:hover {
  border-color: var(--ink);
}

.doc__body strong {
  color: var(--ink);
  font-weight: 600;
}

.doc__address {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: clamp(0.9375rem, 0.92rem + 0.2vw, 1.0625rem);
  line-height: 1.72;
  color: var(--ink-70);
}

.doc__note {
  margin-top: clamp(3rem, 8vh, 4.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper-warm);
}

.doc__note p {
  font-size: 0.9375rem;
}

.docnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}

.docnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.125rem;
}

.docnav a {
  text-decoration: none;
}

.docnav__back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  transition: color 0.25s var(--ease);
}

.docnav__back:hover {
  color: var(--ink);
}

.docnav__mark {
  font-family: var(--font-display);
  font-size: 0.9375rem;
}

.docfoot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-45);
}

.docfoot a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.docfoot a:hover {
  color: var(--ink);
}

.docfoot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* ==========================================================================
   Reduced motion — everything resolves instantly, nothing moves.
   ========================================================================== */

@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;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .r {
    opacity: 1;
    transform: none;
  }

  .rise > i {
    transform: none;
  }

  .draw {
    stroke-dashoffset: 0;
  }

  .hero__cue-wrap {
    opacity: 1;
    animation: none;
  }

  .hero__cue-arrow {
    animation: none;
    transform: none;
  }

  .build__item {
    opacity: 1;
  }

  .build__note {
    opacity: 1;
    transform: none;
  }
}

/* No-JS: reveal everything rather than hiding content behind observers. */
.no-js .r,
.no-js .kaya__beat,
.no-js .approach__panel {
  opacity: 1;
  transform: none;
}

.no-js .rise > i {
  transform: none;
}

.no-js .draw {
  stroke-dashoffset: 0;
}

.no-js .build__item {
  opacity: 1;
}

.no-js .build__note {
  opacity: 1;
  transform: none;
}

/* Without JS the absolutely-positioned beat/panel stacks would overlap, so
   fall back to normal flow. */
.no-js .kaya__beat,
.no-js .approach__panel {
  position: relative;
  inset: auto;
  pointer-events: auto;
}

.no-js .kaya__beat + .kaya__beat,
.no-js .approach__panel + .approach__panel {
  margin-top: 3rem;
}

.no-js .kaya__beats,
.no-js .approach__panels {
  min-height: 0;
}

.no-js .stage__pin {
  position: static;
  min-height: 0;
  padding-block: 5rem;
}

.no-js .stage__track {
  height: auto;
}

.no-js .kaya-screen {
  opacity: 1;
  transform: none;
}

.no-js .kaya-screen + .kaya-screen {
  display: none;
}