/* Self-hosted faces: Archivo (variable width and weight) and Geist. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Takyonics: page-local styles. Six colours, two faces, own markup.
   Nothing in here restyles .sc-stage, .sc-copy or any [data-sc-*] selector. */

:root {
  --sc-canvas:      #070A0F;
  --sc-surface:     #0E131B;
  --sc-ink:         #EEF2F6;
  --sc-ink-soft:    #8E9AAB;
  --sc-accent:      #5AD3F5;
  --sc-accent-ink:  #06111A;
  --sc-font-display: "Archivo", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 215 45% 3%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;

  /* the signature move publishes these */
  --tk-vc: 0;        /* scroll velocity as a fraction of c */
  --tk-px: 0;        /* pointer offset in the hero, -0.5..0.5 */
  --tk-py: 0;
}

/* Light on dark is compensated on three axes: a touch more leading, a touch
   more tracking, one step more weight. */
.sc-display { font-variation-settings: "wdth" 106; font-weight: 560; }
.sc-display--xl { line-height: 0.96; }
.sc-body { line-height: 1.66; letter-spacing: 0.002em; }
.sc-lede { color: var(--sc-ink); }
h3 { margin: 0; }

/* Skip link: first tab stop, visible only when focused. */
.skip {
  position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: 0.7em 1.1em; border-radius: var(--sc-r-md);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ----------------------------------------------------------------- chrome -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.mark { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.mark__icon { width: 2rem; height: 2rem; }
.mark__word { width: auto; height: 0.8rem; }
.mark--foot { opacity: 0.7; }

.cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.72em 1.2em; border-radius: var(--sc-r-md);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.01em; white-space: nowrap;
  text-decoration: none; box-shadow: var(--sc-e1);
  transition: background-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.cta:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
.cta:active { transform: translateY(1px) scale(0.98); }
.cta--big { font-size: var(--sc-t-base); padding: 0.9em 1.6em; border-radius: 10px; }

/* the instrument */
.barrier {
  position: fixed; left: var(--sc-gutter); bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: auto 8rem auto; align-items: center; gap: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.08em;
  color: var(--sc-ink-soft);
}
.barrier__track { position: relative; height: 2px; background: var(--sc-hairline-strong); border-radius: 1px; overflow: visible; }
.barrier__fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--sc-ink-soft); border-radius: 1px;
  transition: background-color 200ms var(--sc-ease-out);
}
.barrier__tick { position: absolute; left: 50%; top: -4px; width: 1px; height: 10px; background: var(--sc-ink-soft); }
.barrier__read { min-width: 3.2em; text-align: right; }
.barrier.is-over { color: var(--sc-accent); }
.barrier.is-over .barrier__fill { background: var(--sc-accent); }
.barrier.is-over .barrier__tick { background: var(--sc-accent); }

.streaks {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 50; pointer-events: none; mix-blend-mode: screen;
}

/* Before the engine mounts, hold each stage at one viewport with its media
   already in place, so nothing jumps when the engine takes over. These stop
   matching the moment the engine adds .sc-stage, so they never fight it. */
[data-sc-stage]:not(.sc-stage) { position: relative; height: 100vh; height: 100svh; overflow: clip; }
[data-sc-stage]:not(.sc-stage) :is(.sc-stage__poster, video[data-sc-scrub]) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ------------------------------------------------------------------ hero -- */
.hero__stage { background: var(--sc-canvas); }
.hero__plane { position: absolute; inset: 0; pointer-events: none; }
.hero__plane > .p { position: absolute; inset: 0; }

.hero__haze { z-index: 2; mix-blend-mode: screen; }
.hero__haze > .p {
  transform: translate3d(calc(var(--tk-px) * 14px), calc(var(--tk-py) * 10px), 0);
  background:
    radial-gradient(48% 34% at 68% 62%, rgba(120, 214, 240, 0.16), transparent 70%),
    radial-gradient(70% 30% at 50% 100%, rgba(90, 211, 245, 0.10), transparent 70%);
  filter: blur(28px);
}

/* The tachyon. One thin line crossing the frame ahead of everything else:
   it travels on X from --sc-p, on Y from the engine's parallax rate, and
   leans a little with the pointer. */
.hero__streak { z-index: 3; mix-blend-mode: screen; }
.hero__streak > .p {
  inset: auto; top: 13%; left: -30vw; width: 160vw; height: 2px;
  transform: translate3d(calc((var(--sc-p, 0) - 0.5) * 56vw + var(--tk-px) * 26px), calc(var(--tk-py) * 8px), 0);
  background: linear-gradient(90deg,
    transparent 0%, rgba(90, 211, 245, 0) 34%, rgba(90, 211, 245, 0.55) 48%,
    rgba(214, 244, 255, 1) 56%, rgba(90, 211, 245, 0.7) 60%, transparent 68%);
}
.hero__streak > .p::after {
  content: ""; position: absolute; inset: -9px 0; border-radius: 999px;
  background: linear-gradient(90deg, transparent 38%, rgba(90, 211, 245, 0.28) 56%, transparent 66%);
  filter: blur(8px);
}

.hero__fg { z-index: 21; }
/* The ledge plate is black where it is not the ledge, the same tone as the
   scene's own ground, so it occludes the film for real. The mask fades its
   cut edges so the crop never shows. */
.hero__fg > .p {
  inset: auto -8vw -3vh auto; width: 58vw; max-width: none;
  transform: translate3d(calc(var(--tk-px) * -36px), calc(var(--tk-py) * -18px), 0);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%), linear-gradient(to right, transparent 0%, #000 28%);
          mask-image: linear-gradient(to top, #000 55%, transparent 100%), linear-gradient(to right, transparent 0%, #000 28%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__fg img { width: 100%; height: auto; max-width: none; }

/* A second corner of density, sized to the copy block and nothing else. It is
   a sibling of the copy so the verification pass measures it. */
.hero__plate {
  position: absolute; left: 0; bottom: 0; z-index: 4; pointer-events: none;
  width: min(76rem, 92vw); height: min(36rem, 64vh);
  background: radial-gradient(farthest-side at 22% 90%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 55%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 82%,
    transparent 100%);
}
.hero__floor {
  position: absolute; inset: auto 0 0 0; height: 220px; z-index: 22; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-canvas));
}
.hero__copy { display: grid; gap: var(--sc-5); justify-items: start; }
.hero__copy .sc-display--xl { max-width: 12ch; }
.hero__copy .sc-lede { max-width: 34ch; }

/* ----------------------------------------------------------------- limit -- */
.limit {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center;
  gap: var(--sc-8); padding-inline: var(--sc-gutter); background: transparent;
}
.limit__lines { position: relative; min-height: 40vh; }
.limit__lines p {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; margin: 0;
  max-width: 16ch; text-wrap: balance;
}
.limit__ring {
  position: relative; justify-self: center;
  width: min(38vw, 26rem); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--sc-accent) calc(var(--sc-p, 0) * 360deg), var(--sc-hairline) 0);
  -webkit-mask: radial-gradient(circle, transparent 65.5%, #000 66.5%);
          mask: radial-gradient(circle, transparent 65.5%, #000 66.5%);
}
.limit__ring-label { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; }

/* ------------------------------------------------------------------ turn -- */
.turn { padding-top: var(--sc-7); position: relative; }
.turn__copy .sc-display--lg { max-width: 16ch; }
.turn__copy .sc-body { max-width: 56ch; }
.turn__silence { height: 68vh; }
.turn__constant { margin-top: 0; padding-bottom: var(--sc-6); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ peak -- */
.peak__streaks {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  pointer-events: none; mix-blend-mode: screen;
}
.peak__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(52% 46% at 50% 88%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 50%,
    transparent 100%);
}
/* Off the vanishing point: a corridor of light is brightest dead centre, so the
   copy sits in the lower band and the scrim follows it. */
.peak__copy {
  inset-inline: auto; left: 50%; bottom: clamp(3rem, 12vh, 9rem); translate: -50% 0;
  display: grid; gap: var(--sc-5); justify-items: center; text-align: center; max-width: min(52rem, 84vw);
}
.peak__copy .sc-display--xl { max-width: 13ch; }
.peak__copy .sc-lede { max-width: 40ch; }

/* ----------------------------------------------------------------- build -- */
.build { background: transparent; }
.rail { align-items: center; height: 100%; gap: var(--sc-8); padding-inline: var(--sc-gutter); }
.rail__lead { flex: 0 0 auto; width: min(32rem, 72vw); }
.rail__lead .sc-display--lg { max-width: 10ch; }
.thing { flex: 0 0 auto; width: clamp(15rem, 23vw, 21rem); display: block; color: inherit; text-decoration: none; }
.thing figure {
  position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
}
.thing figure img { width: 100%; height: 100%; object-fit: cover; }
/* The ambient clip sits over the still and fades in once it is actually
   playing, so a slow network or a blocked autoplay just leaves the still. */
.thing__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
.thing__clip.is-playing { opacity: 1; }
.thing h3 { margin-top: var(--sc-5); }
.thing__more {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--sc-4);
  font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
.thing__arrow { transition: transform 160ms var(--sc-ease-out); }
.thing:hover .thing__more, .thing:focus-visible .thing__more { text-decoration-color: var(--sc-accent); }
.thing:hover .thing__arrow { transform: translateX(3px); }
.thing:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: var(--sc-r-md); }
.thing .sc-body { margin-top: var(--sc-3); font-size: var(--sc-t-sm); }
.rail__note { flex: 0 0 auto; width: min(24rem, 72vw); display: grid; gap: var(--sc-5); justify-items: start; padding-right: var(--sc-gutter); }
@media (prefers-reduced-motion: no-preference) {
  .thing, .rail__note .sc-lede { opacity: clamp(0.8, 0.8 + (var(--sc-p, 0) - var(--at, 0)) * 3, 1); }
}

/* ---------------------------------------------------------------- method -- */
.method { padding-top: var(--sc-8); }
.method__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sc-9); align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.steps li {
  counter-increment: step; position: relative;
  padding: var(--sc-5) 0 var(--sc-5) 3.2rem; border-top: 1px solid var(--sc-hairline);
}
.steps li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--sc-5) + 0.3em);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.08em; color: var(--sc-accent);
}
.steps h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 560; letter-spacing: var(--sc-track-snug); }
.steps .sc-body { margin-top: var(--sc-2); max-width: 44ch; }
.method__place { margin-top: var(--sc-6); }
.method__fig { margin: 0; border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e3), var(--sc-edge); }
.method__fig img { width: 100%; height: auto; }

/* ----------------------------------------------------------------- close -- */
.close { display: grid; place-items: center; }
.close__inner { display: grid; gap: var(--sc-5); justify-items: center; text-align: center; padding-inline: var(--sc-gutter); }
.close__inner .sc-lede { max-width: 30ch; }
.close__mark { width: clamp(5.5rem, 11vw, 9rem); height: auto; margin-bottom: var(--sc-3); }
.foot {
  position: absolute; inset: auto 0 0 0; z-index: var(--sc-z-copy);
  display: grid; gap: var(--sc-3);
  padding: var(--sc-5) var(--sc-gutter) max(1.1rem, env(safe-area-inset-bottom));
  padding-left: calc(var(--sc-gutter) + 15rem);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.foot__nav { display: flex; gap: var(--sc-5); flex-wrap: wrap; }
.foot__nav a { text-decoration: none; color: var(--sc-ink-soft); }
.foot__nav a:hover { color: var(--sc-ink); }
.foot__legal { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-wrap: pretty; }
.mark--foot { color: var(--sc-ink-soft); }

/* --------------------------------------------------------------- contact -- */
.contact {
  width: min(38rem, calc(100vw - 2 * var(--sc-4))); max-width: none;
  padding: 0; border: 0; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); color: var(--sc-ink);
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.contact::backdrop { background: color-mix(in oklab, var(--sc-canvas) 78%, transparent); backdrop-filter: blur(6px); }
.contact__form { display: grid; gap: var(--sc-5); padding: var(--sc-6); }
.contact__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sc-4); }
.contact__close {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  background: transparent; color: var(--sc-ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.contact__close:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.field { display: grid; gap: var(--sc-2); }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.field__label em { font-style: normal; opacity: 0.7; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.7em 0.85em; border-radius: var(--sc-r-md);
  border: 1px solid var(--sc-hairline-strong); background: var(--sc-canvas); color: var(--sc-ink);
  font-size: var(--sc-t-base); line-height: 1.4; transition: border-color 140ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--sc-ink-soft); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 0; border-color: var(--sc-accent); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #F08A7A; }
.contact__actions { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.contact__actions .cta { border: 0; cursor: pointer; }
.contact__actions .cta[disabled] { opacity: 0.6; cursor: default; }
.contact__status { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-wrap: pretty; }
.contact__status.is-error { color: #F08A7A; }
.contact__note { margin: 0; text-transform: none; letter-spacing: 0; }
.contact__nojs { margin: 0; padding: var(--sc-6); color: var(--sc-ink); }
.contact__nojs a { color: var(--sc-accent); }
.contact__note a { color: inherit; }

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .hero__copy .sc-display--xl { font-size: var(--sc-t-2xl); max-width: none; }
  .hero__copy .sc-lede { font-size: var(--sc-t-base); }
  .hero__streak > .p { top: 9%; }
  /* Full-width copy needs a full-width band, not a corner. */
  .hero__plate {
    width: 100vw; height: 62vh;
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 40%,
      color-mix(in oklab, var(--sc-canvas) 55%, transparent) 72%,
      transparent 100%);
  }
  /* The ledge plane is dropped on phones: the copy spans the full width in
     the bottom band and the ledge's rim light has nowhere to go but under it.
     Depth on a phone comes from the clip, the haze and the streak. */
  .hero__fg { display: none; }

  .limit { grid-template-columns: 1fr; align-content: center; gap: var(--sc-6); padding-top: 4rem; }
  .limit__lines { min-height: 34vh; order: 2; }
  .limit__lines p { max-width: none; font-size: var(--sc-t-xl); }
  .limit__ring { width: min(46vw, 12rem); order: 1; }

  .peak__copy .sc-display--xl { font-size: var(--sc-t-2xl); }
  .peak__copy .sc-lede { font-size: var(--sc-t-base); max-width: 30ch; }
  .peak__scrim {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 46%,
      color-mix(in oklab, var(--sc-canvas) 50%, transparent) 74%,
      transparent 100%);
  }

  .rail { gap: var(--sc-6); }
  .rail__lead { width: 78vw; }
  .thing { width: min(19rem, 74vw); }
  .rail__note { width: 78vw; }

  .method__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .method__fig { order: -1; }

  .close__inner .sc-display--xl { font-size: var(--sc-t-3xl); }
  .foot { padding-left: var(--sc-gutter); padding-bottom: 3.6rem; font-size: var(--sc-t-xs); gap: var(--sc-2); }
  .foot__row { gap: var(--sc-3) var(--sc-4); }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__form { padding: var(--sc-5); }
  .barrier { grid-template-columns: auto 5.5rem auto; }
}

@media (max-height: 700px) and (max-width: 860px) {
  .peak__copy .sc-display--xl { font-size: var(--sc-t-xl); }
  .peak__copy { bottom: 2.5rem; }
}

@media (max-width: 400px) {
  .bar { padding-inline: var(--sc-4); }
  .cta--bar { padding-inline: 0.9em; }
}

/* ---------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .streaks, .peak__streaks { display: none; }
  .thing__clip { display: none; }
  .barrier__fill { transform: scaleX(0.12) !important; }
  .hero__streak > .p { transform: none; }
  .hero__haze > .p, .hero__fg > .p { transform: none; }
  .thing, .rail__note .sc-lede { opacity: 1; }
}