/* ============================================================
   FREAKUENCY — Experiential Creative Technology Studio
   Design tokens → components → sections
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — never pure #000 (OLED smear) */
  --bg: #08090b;
  --bg-1: #0d0f12;
  --bg-2: #14171b;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hi: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-hi: rgba(255, 255, 255, 0.18);

  /* Text */
  --fg: #f2f4f7;
  --fg-muted: #9aa3ad;
  --fg-dim: #6b747e;

  /* Accent — signal red + chromatic cyan (drives the glitch) */
  --accent: #ff3d24;
  --accent-soft: #ff6a55;
  --cyan: #22e6ff;

  /* Type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing rhythm (8pt) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* Easing — built-in curves are too weak */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Z-scale */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-cursor: 900;
  --z-overlay: 1000;

  --container: 1320px;
  --nav-h: 76px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

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

button { font: inherit; cursor: pointer; }

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

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

/* Film grain over everything — cheap, gives the premium cinema feel */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 800;
  opacity: 0.035;
  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 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4%, -4%); }
  30% { transform: translate(3%, -2%); }
  50% { transform: translate(-2%, 4%); }
  70% { transform: translate(4%, 2%); }
  90% { transform: translate(-3%, 3%); }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 768px) { .container { padding-inline: var(--space-5); } }

.section {
  position: relative;
  padding-block: var(--space-7);
}

@media (min-width: 900px) { .section { padding-block: var(--space-8); } }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: 820px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.section-title {
  font-size: clamp(2rem, 5.2vw, 3.75rem);
}

.section-sub {
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  max-width: 60ch;
}

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

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: opacity 500ms var(--ease-out), visibility 500ms;
}

.preloader[data-done='true'] {
  opacity: 0;
  visibility: hidden;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.preloader__word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.preloader__bar {
  width: min(280px, 60vw);
  height: 2px;
  background: var(--border);
  overflow: hidden;
}

.preloader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 200ms linear;
}

.preloader__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
}

/* ---------- Page transition curtain ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.curtain span {
  background: var(--bg-1);
  transform: scaleY(0);
  transform-origin: bottom;
}

.curtain[data-state='in'] span {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 460ms var(--ease-in-out);
}

.curtain[data-state='out'] span {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms var(--ease-out);
}

.curtain span:nth-child(2) { transition-delay: 50ms; }
.curtain span:nth-child(3) { transition-delay: 100ms; }
.curtain span:nth-child(4) { transition-delay: 150ms; }
.curtain span:nth-child(5) { transition-delay: 200ms; }

/* ---------- Custom cursor ---------- */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: difference;
}

.cursor {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: width 220ms var(--ease-out), height 220ms var(--ease-out),
    margin 220ms var(--ease-out), background-color 220ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

.cursor-dot {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: #fff;
}

/* The native arrow has to go, or it rides alongside the ring and dot.
   Gated on a class that JS only adds when the custom cursor actually
   initialises — if the script fails or the device is touch/reduced-motion,
   the real cursor is never hidden. */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [role='button'],
.has-custom-cursor label { cursor: none; }

/* Text fields keep their caret: a ring can't express where typing lands. */
.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor select { cursor: auto; }

.cursor-dot { transition: opacity 200ms var(--ease-out); }

.cursor[data-press='true'] { opacity: 0.55; }

/* Declared after the press rule so hiding always wins at equal specificity. */
.cursor[data-hidden='true'],
.cursor-dot[data-hidden='true'] { opacity: 0; }

.cursor[data-variant='hover'] {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}

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

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

.nav[data-scrolled='true'] {
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (min-width: 768px) { .nav__inner { padding-inline: var(--space-5); } }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.logo__mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
  animation: logo-spin 9s linear infinite;
}

@keyframes logo-spin {
  to { transform: rotate(360deg); }
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 900px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  padding-block: 6px;
  transition: color 200ms var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms var(--ease-out);
}

.nav__link[aria-current='page'] { color: var(--fg); }
.nav__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--fg); }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
}

.nav__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Below ~560px the logo, CTA and burger fight for the bar and the burger gets
   clipped. Drop the CTA — the mobile menu carries Contact, and the CTA repeats
   at the foot of every page. */
.nav__actions .btn { display: none; }

@media (min-width: 560px) { .nav__actions .btn { display: inline-flex; } }

/* Burger */
.burger {
  --burger-size: 44px;
  width: var(--burger-size);
  height: var(--burger-size);
  display: grid;
  place-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}

.burger:active { transform: scale(0.97); }

@media (min-width: 900px) { .burger { display: none; } }

.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 240ms var(--ease-out), opacity 160ms var(--ease-out);
}

.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(8, 9, 11, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: calc(var(--nav-h) + var(--space-5)) var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 260ms;
}

.mobile-menu[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  transition: color 200ms var(--ease-out), padding-left 240ms var(--ease-out);
}

.mobile-menu a:active { color: var(--fg); }

@media (hover: hover) and (pointer: fine) {
  .mobile-menu a:hover { color: var(--fg); padding-left: var(--space-2); }
}

@media (min-width: 900px) { .mobile-menu { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 160ms var(--ease-out), background-color 220ms var(--ease-out),
    border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}

.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 260ms var(--ease-out);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-hi);
  color: var(--fg);
}

.btn--quiet {
  background: var(--surface);
  border-color: var(--border);
  color: var(--fg);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { color: var(--bg); }
  .btn--primary:hover::before { clip-path: inset(0 0 0 0); }
  .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .btn--quiet:hover { background: var(--surface-hi); border-color: var(--border-hi); }
}

.btn__icon { width: 16px; height: 16px; flex: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + var(--space-5)) var(--space-5);
  overflow: hidden;
}

.hero__spline {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  border: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  /* Melt the embed's rectangular edges into the page so the canvas never
     reads as a pasted-in box, whatever the scene's own background is. */
  mask-image: radial-gradient(75% 75% at 55% 45%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 55% 45%, #000 35%, transparent 100%);
}

.hero__spline[data-loaded='true'] { opacity: 1; }

/* The scene covers the whole hero, and a cross-origin iframe swallows every
   pointer event inside it — so the frequency tail could never track the cursor
   while the frame stayed interactive. The tail gets the pointer instead; the
   scene keeps its own idle motion. Delete this rule to hand it back. */
.hero__spline { pointer-events: none; }

/* Cursor frequency readout — above the scrim, below the copy.
   width/height are explicit because a canvas is a replaced element: with
   `inset: 0` alone it lays out at its attribute size (the backing store),
   not the hero's box, which draws the trace at dpr× the pointer position. */
.hero__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* Fallback canvas draws only if the Spline embed can't load */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background:
    radial-gradient(70% 60% at 70% 30%, rgba(255, 61, 36, 0.18), transparent 70%),
    radial-gradient(60% 50% at 20% 70%, rgba(34, 230, 255, 0.12), transparent 70%);
}

/* Vignette + floor gradient so the type always stays legible over the 3D scene */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(8, 9, 11, 0.75) 26%, rgba(8, 9, 11, 0.12) 55%, rgba(8, 9, 11, 0.55) 100%),
    radial-gradient(120% 80% at 50% 60%, transparent 40%, rgba(8, 9, 11, 0.7) 100%);
}

/* Spline watermark cover — soft-edged so it reads as vignette, not a patch */
.hero__patch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 160px;
  z-index: 2;
  background: radial-gradient(150% 150% at 100% 100%, var(--bg) 58%, transparent 82%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--space-3);
}

.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }

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

.hero__title {
  font-size: clamp(2.9rem, 11.5vw, 9.5rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.hero__title-row { display: block; }

.hero__lede {
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  max-width: 54ch;
  margin-bottom: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Hint toward the robot hiding on the contact page */
.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 220ms var(--ease-out);
}

.hero__hint svg {
  width: 14px;
  height: 14px;
  transition: transform 260ms var(--ease-out);
}

.hero__hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: ping 2.4s var(--ease-out) infinite;
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 61, 36, 0.5); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(255, 61, 36, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .hero__hint:hover { color: var(--fg); }
  .hero__hint:hover svg { transform: translateX(4px); }
}

.hero__scroll {
  display: none;
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-content);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  writing-mode: vertical-rl;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 1100px) { .hero__scroll { display: flex; } }

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scroll-hint 2.2s var(--ease-in-out) infinite;
}

@keyframes scroll-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Glitch word (FREAK ⇄ FREQ) ---------- */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--fg);
  vertical-align: top;
  white-space: nowrap;
  /* No width transition: the slot resizes on the exact frame the burst fires,
     so the tail's jump is absorbed by the glitch instead of reading as reflow.
     (overflow stays visible — the RGB-split pseudo-elements need to escape.) */
}

.glitch__text { position: relative; z-index: 2; }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}

.glitch::before { color: var(--accent); }
.glitch::after { color: var(--cyan); }

/* Burst state — driven from JS around the word swap */
.glitch[data-glitching='true']::before {
  opacity: 0.9;
  animation: glitch-r 320ms steps(2, end) 2;
}

.glitch[data-glitching='true']::after {
  opacity: 0.9;
  animation: glitch-c 320ms steps(2, end) 2;
}

.glitch[data-glitching='true'] .glitch__text {
  animation: glitch-slice 320ms steps(3, end) 2;
}

@keyframes glitch-r {
  0% { transform: translate3d(-5px, 2px, 0); clip-path: inset(12% 0 58% 0); }
  25% { transform: translate3d(6px, -3px, 0); clip-path: inset(64% 0 12% 0); }
  50% { transform: translate3d(-8px, 1px, 0); clip-path: inset(34% 0 40% 0); }
  75% { transform: translate3d(4px, 3px, 0); clip-path: inset(5% 0 78% 0); }
  100% { transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes glitch-c {
  0% { transform: translate3d(5px, -2px, 0); clip-path: inset(70% 0 8% 0); }
  25% { transform: translate3d(-7px, 3px, 0); clip-path: inset(18% 0 62% 0); }
  50% { transform: translate3d(8px, -1px, 0); clip-path: inset(48% 0 26% 0); }
  75% { transform: translate3d(-4px, -3px, 0); clip-path: inset(80% 0 4% 0); }
  100% { transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes glitch-slice {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(3px, -1px, 0) skewX(-3deg); }
  66% { transform: translate3d(-3px, 1px, 0) skewX(2deg); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Scanline sheet that sweeps during a burst */
.glitch[data-glitching='true'] .glitch__text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.11) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Word cycler + level meter ----------
   Replaces the old horizontal marquee. Motion is vertical and rhythmic
   rather than a continuous sideways crawl: one word at a time, held long
   enough to actually read, with a meter keeping time beside it. */
.ticker {
  border-block: 1px solid var(--border);
  background: var(--bg-1);
  padding-block: var(--space-5);
  overflow: hidden;
}

.ticker__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 900px) {
  .ticker__inner { grid-template-columns: 1fr auto; gap: var(--space-6); }
}

.ticker__head { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.ticker__slot {
  position: relative;
  height: 1.15em;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.ticker__word {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  transform: translateY(105%);
  opacity: 0;
  filter: blur(7px);
  /* Blur masks the swap: without it you read two words overlapping. */
  transition: transform 600ms var(--ease-out), opacity 420ms var(--ease-out),
    filter 420ms var(--ease-out);
}

.ticker__word[data-state='in'] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

/* Exit runs at ~65% of the enter duration so the slot feels responsive. */
.ticker__word[data-state='out'] {
  transform: translateY(-105%);
  opacity: 0;
  filter: blur(7px);
  transition-duration: 390ms, 260ms, 260ms;
}

.ticker__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* Level meter — the "frequency" made literal */
.ticker__meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  justify-self: start;
}

@media (min-width: 900px) { .ticker__meter { justify-self: end; } }

.ticker__meter i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(to top, var(--accent), var(--accent-soft));
  transform: scaleY(0.16);
  transform-origin: bottom;
  animation: eq calc(760ms + var(--i) * 90ms) var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i) * -137ms);
}

.ticker__meter i:nth-child(3n) { background: linear-gradient(to top, var(--cyan), var(--accent-soft)); }

@keyframes eq {
  from { transform: scaleY(0.16); }
  to { transform: scaleY(1); }
}

/* ---------- Name grid (clients, coverage) ---------- */
.namegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 4 columns from tablet up: with 8 cells the grid always fills whole rows,
   so no orphan cell reads as a hole in the table. */
@media (min-width: 700px) { .namegrid { grid-template-columns: repeat(4, 1fr); } }

.namegrid__cell {
  background: var(--bg);
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--fg-dim);
  transition: color 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .namegrid__cell:hover { color: var(--fg); background: var(--bg-2); }
}

/* ---------- Reveal (scroll-in) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.reveal[data-visible='true'] {
  opacity: 1;
  transform: none;
}

.reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-in-out);
}

.reveal-clip[data-visible='true'] { clip-path: inset(0 0 0 0); }

/* ---------- Manifesto ---------- */
.manifesto {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .manifesto { grid-template-columns: 1fr 1.15fr; gap: var(--space-7); align-items: start; }
}

.manifesto__lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.manifesto__lead em {
  font-style: normal;
  color: var(--accent);
}

.manifesto__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--fg-muted);
  font-size: 1.0625rem;
  max-width: 62ch;
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-6);
}

@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--bg);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- Signal (distorting typography Spline) ---------- */
.signal {
  position: relative;
  padding-block: var(--space-6);
  border-block: 1px solid var(--border);
  background: var(--bg-1);
}

.signal__stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 62vh, 680px);
  overflow: hidden;
}

.signal__stage--tall { height: clamp(420px, 78vh, 760px); }

/* The robot scene has a "Get in touch" button modelled into it, which we can't
   reach from here — it has to be deleted in the Spline file itself. Until then
   this floor gradient covers the lower band it sits in and reads as the robot
   standing in fog. Height is a share of the stage so it holds at any size. */
.signal__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--bg-1) 0%,
    var(--bg-1) 52%,
    rgba(13, 15, 18, 0.82) 72%,
    transparent 100%
  );
}

.signal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.signal__frame[data-loaded='true'] { opacity: 1; }

.signal__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(255, 61, 36, 0.16), transparent 70%),
    var(--bg-1);
  transition: opacity 700ms var(--ease-out);
}

/* Covers the Spline badge in the corner of the embed */
.signal__patch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 160px;
  background: radial-gradient(150% 150% at 100% 100%, var(--bg-1) 58%, transparent 82%);
  pointer-events: none;
}

.signal__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  max-width: 760px;
}

/* ---------- Capability cards ---------- */
.cards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out),
    background-color 260ms var(--ease-out);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

/* Pointer-following glow — position fed by JS custom props */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 61, 36, 0.14),
    transparent 70%
  );
  transition: opacity 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--border-hi);
    background: var(--surface-hi);
    transform: translateY(-4px);
  }
  .card:hover::before { opacity: 1; }
}

.card__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  margin-bottom: var(--space-3);
}

.card__icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.card__title {
  font-size: 1.35rem;
  margin-bottom: var(--space-2);
}

.card__text {
  color: var(--fg-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}

.card__tags {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.card__tags li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------- Floating 3D capability cards ----------
   Two nested layers on purpose: the outer element owns the idle float so it
   never fights the cursor-driven rotation written to the inner one. */
.fcards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) { .fcards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .fcards { grid-template-columns: repeat(4, 1fr); } }

.fcard {
  perspective: 1000px;
  animation: float 7s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i, 0) * -900ms);
}

@keyframes float {
  from { transform: translate3d(0, 6px, 0); }
  to { transform: translate3d(0, -6px, 0); }
}

.fcard__inner {
  position: relative;
  height: 100%;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%),
    var(--bg-1);
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  /* Long, soft return when the pointer leaves; the tilt itself is set per-frame. */
  transition: transform 600ms var(--ease-out), border-color 300ms var(--ease-out),
    box-shadow 400ms var(--ease-out);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  isolation: isolate;
}

.fcard[data-active='true'] .fcard__inner {
  border-color: var(--border-hi);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 1);
  transition-duration: 90ms, 300ms, 400ms;
}

/* Sheen that tracks the pointer — sells the surface as a physical panel */
.fcard__glare {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 61, 36, 0.22),
    rgba(34, 230, 255, 0.07) 42%,
    transparent 68%
  );
  transition: opacity 340ms var(--ease-out);
}

.fcard[data-active='true'] .fcard__glare { opacity: 1; }

/* Depth layers — each lifts a different distance off the card face */
.fcard__index,
.fcard__icon,
.fcard__title,
.fcard__text,
.fcard__tags { transform: translateZ(var(--z, 0px)); transform-style: preserve-3d; }

.fcard__index {
  --z: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  margin-bottom: var(--space-2);
}

.fcard__icon {
  --z: 40px;
  width: 24px;
  height: 24px;
  color: var(--accent);
  margin-bottom: var(--space-2);
  filter: drop-shadow(0 8px 14px rgba(255, 61, 36, 0.35));
}

.fcard__title {
  --z: 28px;
  font-size: 1.02rem;
  line-height: 1.2;
  margin-bottom: 6px;
}

.fcard__text {
  --z: 16px;
  color: var(--fg-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.fcard__tags {
  --z: 22px;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
}

.fcard__tags li {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
}


@media (prefers-reduced-motion: reduce) {
  .fcard { animation: none; }
  .fcard__inner { transform: none !important; }
  .fcard__index, .fcard__icon, .fcard__title,
  .fcard__text, .fcard__tags { transform: none; }
}

/* ---------- Work ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.filter {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}

.filter:active { transform: scale(0.97); }

.filter[aria-pressed='true'] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

@media (hover: hover) and (pointer: fine) {
  .filter:not([aria-pressed='true']):hover { color: var(--fg); border-color: var(--border-hi); }
}

.work-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

.work-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-1);
  transform-style: preserve-3d;
  transition: transform 360ms var(--ease-out), border-color 260ms var(--ease-out),
    opacity 300ms var(--ease-out);
}

.work-card[hidden] { display: none; }

.work-card--wide { grid-column: 1 / -1; }

.work-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.work-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 11, 0.9), rgba(8, 9, 11, 0.1) 60%);
}

.work-card__art {
  position: absolute;
  inset: 0;
  transition: transform 700ms var(--ease-out), filter 500ms var(--ease-out);
}

/* Generated gradient artwork — no external images, no layout shift */
.art-1 { background: radial-gradient(80% 90% at 25% 20%, #ff3d24 0%, #7a1206 42%, #0d0f12 78%); }
.art-2 { background: radial-gradient(75% 85% at 75% 25%, #22e6ff 0%, #0b4f66 40%, #0d0f12 78%); }
.art-3 { background: linear-gradient(135deg, #2a1a4d 0%, #ff3d24 55%, #0d0f12 100%); }
.art-4 { background: conic-gradient(from 200deg at 40% 50%, #0d0f12, #ff6a55, #22e6ff, #0d0f12); }
.art-5 { background: radial-gradient(60% 70% at 50% 100%, #ffb020 0%, #6b2c00 40%, #0d0f12 80%); }
.art-6 { background: linear-gradient(200deg, #0d0f12 0%, #1f3a5f 45%, #22e6ff 130%); }

.work-card__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
}

.work-card__body {
  position: relative;
  z-index: 2;
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.work-card__title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.work-card__arrow {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--fg-dim);
  transition: transform 300ms var(--ease-out), color 300ms var(--ease-out);
}

.work-card__text {
  color: var(--fg-muted);
  font-size: 0.95rem;
  max-width: 56ch;
}

@media (hover: hover) and (pointer: fine) {
  .work-card:hover { border-color: var(--border-hi); }
  .work-card:hover .work-card__art { transform: scale(1.06); filter: saturate(1.25); }
  .work-card:hover .work-card__arrow { transform: translate(4px, -4px); color: var(--accent); }
}

/* ---------- Orbital wheel (selected work) ----------
   A tall scroll section with a pinned viewport. A wheel far larger than the
   screen sits mostly below the fold; scrolling rotates it, and whichever card
   reaches the top is pulled into focus while the rest blur back. */
.wheel {
  position: relative;
  width: 100%;
  height: 200vh; /* scroll runway — the pinned frame lasts this long */
}

.wheel__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}

.wheel__head {
  position: absolute;
  top: calc(var(--nav-h) + var(--space-4));
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  pointer-events: none;
}

.wheel__stage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  perspective: 1200px;
}

.wheel__card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  will-change: transform, filter;
  backface-visibility: hidden;
}

.wheel__art {
  position: absolute;
  inset: 0;
}

.wheel__cardgrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 10%, transparent 80%);
}

.wheel__index {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.85);
  mix-blend-mode: difference;
}

/* Caption block */
.wheel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15vh;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.wheel__captioninner { padding-inline: var(--space-3); text-align: center; width: 100%; }

.wheel__sub {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
  min-height: 1.2em;
}

/* Title rail — the active pill is centred; edges fade out */
.wheel__titles {
  pointer-events: auto;
  margin-inline: auto;
  width: min(92vw, 760px);
  overflow: hidden;
  padding-block: 4px;
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.wheel__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  transition: transform 620ms var(--ease-out);
}

.wheel__spacer { display: block; height: 1px; flex: none; }

.wheel__pill {
  flex: none;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 44px; /* stays tappable at the smallest size */
  padding: 8px 26px;
  border-radius: 999px;
  border: 1px solid rgba(242, 244, 247, 0.28);
  background: transparent;
  color: rgba(242, 244, 247, 0.45);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.25vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0.16;
  transform: scale(0.96);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out),
    color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}

.wheel__pill[data-near='0'] { opacity: 1; transform: scale(1); }
.wheel__pill[data-near='1'] { opacity: 0.58; }
.wheel__pill[data-near='2'] { opacity: 0.32; }

.wheel__pill[aria-current='true'] {
  color: var(--fg);
  border-color: rgba(242, 244, 247, 0.4);
}

.wheel__pill:active { transform: scale(0.97); }

/* Reduced motion: no pinning, no rotation — the same projects as a plain grid */
@media (prefers-reduced-motion: reduce) {
  .wheel { height: auto; }
  .wheel__viewport { position: static; height: auto; overflow: visible; padding-block: var(--space-6); }
  .wheel__head { position: static; margin-bottom: var(--space-5); }
  .wheel__stage {
    position: static;
    transform: none;
    width: 100% !important;
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }
  .wheel__card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: 260px !important;
    transform: none !important;
    filter: none !important;
  }
  .wheel__caption { position: static; margin-top: var(--space-4); }
}

/* ---------- Process ---------- */
.process { display: flex; flex-direction: column; }

.process__row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
  transition: background-color 300ms var(--ease-out);
}

.process__row:last-child { border-bottom: 1px solid var(--border); }

@media (min-width: 900px) {
  .process__row {
    grid-template-columns: 90px 1fr 1.2fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .process__row:hover { background: var(--surface); }
}

.process__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.process__title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }

.process__text { color: var(--fg-muted); font-size: 0.98rem; max-width: 60ch; }

/* ---------- Events ---------- */
.events { display: flex; flex-direction: column; }

.event {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
  align-items: center;
  transition: background-color 300ms var(--ease-out), padding-inline 300ms var(--ease-out);
}

.event:last-child { border-bottom: 1px solid var(--border); }

@media (min-width: 900px) {
  .event { grid-template-columns: 140px 1.4fr 1fr auto; gap: var(--space-4); }
}

@media (hover: hover) and (pointer: fine) {
  .event:hover { background: var(--surface); padding-inline: var(--space-2); }
}

.event__date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.event__name { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

.event__place { color: var(--fg-muted); font-size: 0.95rem; }

.badge {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.badge--live { color: var(--accent); border-color: rgba(255, 61, 36, 0.4); }

.badge--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s var(--ease-in-out) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

/* ---------- Testimonials ---------- */
.quotes {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quote__text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.quote__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bg);
  background: linear-gradient(140deg, var(--accent), var(--accent-soft));
}

.quote__name { font-size: 14px; font-weight: 600; }
.quote__role { font-size: 12px; color: var(--fg-dim); }

/* The deliberately blank one — a caret waiting for someone to type in it */
.quote--empty { border-style: dashed; }

.quote--empty .quote__text { color: var(--fg-dim); }

.quote__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-inline: 2px;
  background: var(--accent);
  animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.quote__avatar--empty {
  background: none;
  border: 1px dashed var(--border-hi);
  color: var(--fg-dim);
}

/* The invitation card */
.quote--cta {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 61, 36, 0.16), transparent 62%),
    var(--surface);
  border-color: rgba(255, 61, 36, 0.32);
  transition: border-color 260ms var(--ease-out), transform 260ms var(--ease-out),
    background-color 260ms var(--ease-out);
}

.quote--cta .quote__text { color: var(--fg); }

.quote__ctatext {
  color: var(--fg-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.quote__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.quote__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 300ms var(--ease-out);
}

.quote--cta:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
  .quote--cta:hover { border-color: var(--accent); transform: translateY(-3px); }
  .quote--cta:hover .quote__cta svg { transform: translate(4px, -4px); }
}

@media (prefers-reduced-motion: reduce) {
  .quote__caret { animation: none; opacity: 1; }
}

/* ---------- CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(90% 140% at 15% 0%, rgba(255, 61, 36, 0.18), transparent 60%),
    radial-gradient(80% 120% at 90% 100%, rgba(34, 230, 255, 0.12), transparent 60%),
    var(--bg-1);
  padding: var(--space-6) var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 768px) { .cta { padding: var(--space-8) var(--space-5); } }

.cta__title {
  font-size: clamp(2.2rem, 7vw, 5rem);
  text-transform: uppercase;
  letter-spacing: -0.04em;
}

.cta__text { color: var(--fg-muted); max-width: 48ch; }

/* ---------- Forms ---------- */
.form {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .form { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: 8px; }

.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.field label .req { color: var(--accent); }

.field input,
.field textarea,
.field select {
  min-height: 48px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--fg);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: var(--fg-dim); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--border-hi);
  background: var(--bg-2);
}

.field__help { font-size: 12px; color: var(--fg-dim); }

.field__error {
  font-size: 12px;
  color: var(--accent);
  display: none;
  align-items: center;
  gap: 6px;
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea {
  border-color: var(--accent);
}

.field[data-invalid='true'] .field__error { display: flex; }

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}

.form__status {
  font-size: 14px;
  color: var(--fg-muted);
  min-height: 20px;
}

.form__status[data-state='success'] { color: #4ade80; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-6) var(--space-4);
  background: var(--bg-1);
}

.footer__top {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
}

@media (min-width: 900px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__brand { display: flex; flex-direction: column; gap: var(--space-2); max-width: 38ch; }
.footer__brand p { color: var(--fg-muted); font-size: 0.95rem; }

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--space-2);
}

.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.footer__col a {
  color: var(--fg-muted);
  font-size: 0.95rem;
  transition: color 200ms var(--ease-out);
  display: inline-block;
  padding-block: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover { color: var(--fg); }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Giant footer wordmark */
.footer__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 16vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--border-hi);
  margin-bottom: var(--space-4);
  user-select: none;
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--space-7)) var(--space-6);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 100% at 20% 0%, rgba(255, 61, 36, 0.14), transparent 65%),
    radial-gradient(50% 90% at 90% 20%, rgba(34, 230, 255, 0.09), transparent 65%);
  pointer-events: none;
}

.page-hero__inner { position: relative; z-index: 1; }

.page-hero__title {
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  text-transform: uppercase;
  letter-spacing: -0.045em;
  margin-block: var(--space-2);
}

.page-hero__text { color: var(--fg-muted); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 60ch; }

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

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1001;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

.split-line { display: block; overflow: hidden; }

.split-line > span {
  display: block;
  transform: translateY(100%);
  transition: transform 800ms var(--ease-out);
}

[data-visible='true'] .split-line > span,
.split-line[data-visible='true'] > span { transform: translateY(0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .reveal-clip { clip-path: inset(0 0 0 0); }
  .split-line > span { transform: none; }
  body::after { animation: none; }
  .cursor, .cursor-dot { display: none; }

  /* Cycler keeps working, but crossfades in place with no travel or blur. */
  .ticker__word { transform: none; filter: none; }
  .ticker__word[data-state='out'] { transform: none; filter: none; }
  .ticker__meter i { transform: scaleY(0.55); animation: none; }
}