/* ============================================================
   RIV//LUX MEDIA — living universe
   ============================================================ */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:block; src:url('../fonts/inter-900.woff2') format('woff2'); }

:root {
  --ink:#020203;
  --night:#08090d;
  --panel:rgba(16,17,22,.66);
  --paper:#f5f1e8;
  --muted:#aaa7a0;
  --line:rgba(245,241,232,.14);
  --line-hot:rgba(245,241,232,.34);
  --ember:#ff5337;
  --gold:#f3ac3f;
  --aqua:#18c2a8;
  --violet:#a98aff;
  --white:#fffaf0;
  --grad:linear-gradient(100deg,var(--ember) 0%,var(--gold) 34%,var(--aqua) 68%,var(--violet) 100%);
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.9,.24,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
html, body { background:var(--ink); }
body {
  font-family:var(--font);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.lock { overflow:hidden; }
::selection { background:var(--ember); color:var(--ink); }

.mono { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; }

/* ---------- canvas ---------- */
#gl {
  position:fixed; inset:0; width:100vw; height:100vh; height:100dvh;
  display:block; z-index:0; outline:none;
}
body.no-webgl #gl { display:none; }
body.no-webgl { background:radial-gradient(120vh 90vh at 70% 12%,#141017 0%,var(--ink) 60%); }

/* ---------- loader ---------- */
#loader {
  position:fixed; inset:0; z-index:60; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
#loader.done { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; }
.loader-mark {
  font-weight:900; font-size:clamp(1.2rem,2.6vw,1.7rem); letter-spacing:.32em;
  margin-bottom:2.2rem; color:var(--white);
}
.loader-count {
  font-weight:900; font-size:clamp(4rem,14vw,9rem); line-height:1; letter-spacing:-.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.loader-count i { font-style:normal; font-size:.35em; vertical-align:.6em; opacity:.75; }
.loader-word {
  margin-top:1.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted); min-height:1em;
}
.loader-bar {
  margin:1.6rem auto 0; width:min(320px,60vw); height:1px; background:var(--line); overflow:hidden;
}
.loader-bar span { display:block; height:100%; width:0%; background:var(--grad); transition:width .25s linear; }

/* ---------- shared type ---------- */
.slash {
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900; padding:0 .04em;
}
.grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:normal; }
.outline {
  color:transparent; -webkit-text-stroke:1.5px var(--line-hot);
}
.eyebrow {
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.eyebrow .tick { width:34px; height:1px; background:var(--grad); flex:none; }

/* ---------- nav ---------- */
.nav {
  position:fixed; z-index:50; inset:0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.2rem,4vw,3rem);
  transition:background .5s,border-color .5s,backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled { background:rgba(2,2,3,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line); }
.brand {
  font-weight:900; letter-spacing:.26em; font-size:.95rem; color:var(--white);
  text-decoration:none; display:flex; align-items:baseline; gap:.45em;
}
.brand em { font-style:normal; font-weight:500; font-size:.52rem; letter-spacing:.5em; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:clamp(1rem,2.6vw,2.2rem); }
.nav-links a {
  color:var(--paper); text-decoration:none; font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; opacity:.72; transition:opacity .3s;
  padding:.4rem 0; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav-links a:hover, .nav-links a.active { opacity:1; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.motion-toggle {
  display:flex; align-items:center; gap:.55rem; background:rgba(245,241,232,.06);
  border:1px solid var(--line); border-radius:99px; color:var(--paper);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.55rem 1rem; cursor:pointer; transition:border-color .3s;
}
.motion-toggle:hover { border-color:var(--line-hot); }
.motion-toggle .dot { width:7px; height:7px; border-radius:50%; background:var(--aqua); box-shadow:0 0 10px var(--aqua); transition:.3s; }
.motion-toggle[aria-pressed="false"] .dot { background:var(--muted); box-shadow:none; }

/* ---------- panels / stages ---------- */
main { position:relative; z-index:10; }
.panel { position:relative; }
.stage {
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.2rem,5vw,4.5rem);
  pointer-events:none;
}
.stage a, .stage button, .stage input, .stage .glass { pointer-events:auto; }

.panel-hero      { height:250vh; }
.panel-services  { height:520vh; }
.panel-playground{ height:260vh; }
.panel-manifesto { height:220vh; }
.panel-contact   { height:260vh; }

/* ---------- hero ---------- */
.panel-hero .stage { justify-content:flex-end; padding-bottom:11vh; }
.hero-copy { max-width:880px; }
.hero-title {
  font-weight:900; font-size:clamp(3rem,9.6vw,8.2rem); line-height:.95;
  letter-spacing:-.035em; text-transform:uppercase; margin:1.6rem 0 1.5rem;
}
.hero-title .line { display:block; overflow:hidden; }
.hero-sub { max-width:560px; color:var(--muted); font-size:clamp(.95rem,1.35vw,1.12rem); line-height:1.65; }
.hero-ctas { display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero-hint {
  position:absolute; left:clamp(1.2rem,5vw,4.5rem); right:clamp(1.2rem,5vw,4.5rem); bottom:2.2vh;
  display:flex; align-items:center; gap:1.2rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
}
.hint-line { flex:1; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hint-line::after {
  content:''; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:var(--grad); animation:hintsweep 2.8s var(--ease) infinite;
}
@keyframes hintsweep { to { left:130%; } }

/* reveal (staggered intro) */
.reveal { opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
body.ready .reveal { opacity:1; transform:none; }
body.ready .reveal:nth-child(1){transition-delay:.05s} body.ready .reveal:nth-child(2){transition-delay:.15s}
body.ready .reveal:nth-child(3){transition-delay:.25s} body.ready .reveal:nth-child(4){transition-delay:.35s}
.hero-title .reveal:nth-child(1){transition-delay:.2s} .hero-title .reveal:nth-child(2){transition-delay:.32s}

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.9rem; border-radius:99px; text-decoration:none; cursor:pointer;
  font-weight:600; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s, border-color .35s;
  will-change:transform;
}
.btn-primary {
  background:var(--grad); color:var(--ink); border:none;
  box-shadow:0 8px 40px rgba(255,83,55,.28);
}
.btn-primary:hover { box-shadow:0 12px 56px rgba(243,172,63,.42); }
.btn-ghost {
  background:rgba(245,241,232,.05); color:var(--paper); border:1px solid var(--line);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover { border-color:var(--line-hot); background:rgba(245,241,232,.09); }
.btn-small { padding:.7rem 1.3rem; font-size:.68rem; }
.btn-big { padding:1.25rem 2.6rem; font-size:.95rem; }

/* ---------- services beats ---------- */
.panel-services .stage { justify-content:center; }
.stage-eyebrow { position:absolute; top:14vh; }
.beats { position:relative; min-height:46vh; }
.beat {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(46px); pointer-events:none;
  transition:opacity .001s, transform .001s; /* driven by JS each frame */
  max-width:760px;
}
.beat::before {
  /* The horizontal bleed matches .stage's own padding, so the scrim reaches
     exactly the screen edge and never past it. It used to be -18%, a
     percentage of a box that fills the viewport on anything under ~1000px —
     which pushed up to 86px of phantom scroll width onto the page (worst on
     a 768 tablet, invisible on desktop, which is why it went unnoticed).
     Fixing it here rather than with overflow on an ancestor: .stage is
     position:sticky and the whole site is choreographed off native scroll. */
  content:''; position:absolute; z-index:-1; border-radius:40%;
  inset:-8% calc(-1 * clamp(1.2rem,5vw,4.5rem));
  background:radial-gradient(closest-side, rgba(2,2,3,.78), rgba(2,2,3,.42) 55%, transparent);
  filter:blur(6px);
}
.beat-title, .beat-sub, .beat-num { text-shadow:0 2px 26px rgba(2,2,3,.85); }
.beat-num {
  font-family:var(--mono); font-size:.8rem; letter-spacing:.4em; color:var(--gold);
  margin-bottom:1.1rem;
}
.beat-title {
  font-weight:900; font-size:clamp(2.6rem,7.8vw,6.4rem); line-height:.95;
  letter-spacing:-.03em; text-transform:uppercase;
}
.beat-sub { margin-top:1.3rem; max-width:480px; color:var(--muted); font-size:clamp(.92rem,1.25vw,1.06rem); line-height:1.6; }
.beat-rail {
  position:absolute; right:clamp(1.2rem,5vw,4.5rem); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.55rem;
}
.rail-seg { width:2px; height:34px; background:var(--line); border-radius:2px; overflow:hidden; position:relative; }
.rail-seg::after { content:''; position:absolute; inset:0; background:var(--grad); transform:scaleY(var(--fill,0)); transform-origin:top; }

/* ---------- work ---------- */
.panel-flow {
  position:relative; padding:16vh clamp(1.2rem,5vw,4.5rem) 14vh;
}
.flow-head { max-width:900px; margin-bottom:7vh; }
.flow-title, .play-title {
  font-weight:900; font-size:clamp(2.8rem,8.4vw,7rem); line-height:.95;
  letter-spacing:-.03em; text-transform:uppercase; margin:1.4rem 0 1.2rem;
}
.flow-sub, .play-sub { max-width:540px; color:var(--muted); line-height:1.65; font-size:clamp(.92rem,1.25vw,1.06rem); }
.cards {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:1.1rem;
}
.card {
  position:relative; display:flex; flex-direction:column; gap:.4rem;
  padding:1.8rem 1.7rem 1.6rem; min-height:212px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line);
  text-decoration:none; color:var(--paper);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));
  transition:border-color .4s, box-shadow .4s, opacity .8s var(--ease);
  overflow:hidden;
}
.card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(120deg,var(--ember),var(--gold),var(--aqua),var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s;
}
.card::after {
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  left:var(--gx,50%); top:var(--gy,50%); transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,250,240,.13),transparent);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.card:hover { border-color:transparent; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.card:hover::before, .card:hover::after { opacity:1; }
.card.hidden-y { opacity:0; --ty:44px; }
.card-cat {
  font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.card-name { font-weight:900; font-size:clamp(1.7rem,2.8vw,2.3rem); letter-spacing:-.02em; margin-top:.4rem; }
.card-blurb { color:var(--muted); font-size:.92rem; }
.card-go {
  margin-top:auto; padding-top:1.2rem; font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; display:flex; gap:.5rem; align-items:center;
  color:var(--paper); opacity:.75; transition:opacity .3s;
}
.card-go i { font-style:normal; transition:transform .35s var(--ease); }
.card:hover .card-go { opacity:1; }
.card:hover .card-go i { transform:translate(3px,-3px); }

/* ---------- playground ---------- */
.panel-playground .stage {
  flex-direction:row; align-items:center; justify-content:space-between; gap:4vw; flex-wrap:wrap;
}
.play-copy { max-width:620px; }
.readout { margin-top:2rem; color:var(--aqua); opacity:.85; }
.glass {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:2rem 1.9rem; box-shadow:0 28px 90px rgba(0,0,0,.46);
}
.play-panel { width:min(380px,92vw); display:flex; flex-direction:column; gap:1.5rem; }
.ctl label {
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper);
  margin-bottom:.7rem;
}
.ctl output { color:var(--gold); font-variant-numeric:tabular-nums; }
input[type="range"] {
  -webkit-appearance:none; appearance:none; width:100%; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold) var(--pct,50%),rgba(245,241,232,.16) var(--pct,50%));
  outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--white); border:none; box-shadow:0 0 0 4px rgba(245,241,232,.12), 0 0 18px rgba(243,172,63,.55);
  transition:transform .2s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.2); }
input[type="range"]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; background:var(--white); border:none;
  box-shadow:0 0 0 4px rgba(245,241,232,.12), 0 0 18px rgba(243,172,63,.55);
}

/* ---------- manifesto ---------- */
.panel-manifesto .stage { align-items:center; text-align:center; }
.manifesto-title {
  margin-top:1.6rem; max-width:1100px;
  font-weight:900; font-size:clamp(2.4rem,6.8vw,5.6rem); line-height:1.04;
  letter-spacing:-.03em; text-transform:uppercase;
}
.manifesto-title .w { display:inline-block; opacity:.12; transform:translateY(.35em); transition:none; }
.manifesto-sub { margin-top:2rem; max-width:620px; color:var(--muted); line-height:1.7; font-size:clamp(.92rem,1.25vw,1.06rem); }

/* ---------- contact ---------- */
.panel-contact .stage { align-items:center; text-align:center; justify-content:center; gap:1.4rem; }
.contact-title {
  font-weight:900; font-size:clamp(3rem,10vw,8.6rem); line-height:.95;
  letter-spacing:-.035em; text-transform:uppercase; margin-bottom:1.2rem;
  /* .panel-contact .stage centres its items, so this h2 sizes to its own
     content instead of stretching. Without a cap, one long word makes the
     box wider than the screen and break-word never gets a chance. */
  max-width:100%;
}
.contact-mail { color:var(--muted); text-decoration:none; font-size:.8rem; transition:color .3s; }
.contact-mail:hover { color:var(--paper); }
.foot {
  position:absolute; bottom:3vh; left:clamp(1.2rem,5vw,4.5rem); right:clamp(1.2rem,5vw,4.5rem);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.7rem; letter-spacing:.12em; color:var(--muted);
}
.foot a { color:var(--paper); text-decoration:none; letter-spacing:.22em; text-transform:uppercase; font-size:.66rem; }
.foot a:hover { color:var(--gold); }
.foot-tech { opacity:.6; }

/* ---------- intake portal ---------- */
.intake {
  position:fixed; inset:0; z-index:55; display:flex; flex-direction:column;
  background:rgba(2,2,3,.72); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  opacity:0; transition:opacity .45s var(--ease);
}
/* `hidden` must win over display:flex, or the closed overlay eats every click on the page */
.intake[hidden] { display:none; }
.intake:not(.on) { pointer-events:none; }
.intake.on { opacity:1; pointer-events:auto; }
.intake-chrome {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem clamp(1.2rem,4vw,3rem);
}
.intake-brand { font-weight:900; letter-spacing:.26em; font-size:.9rem; color:var(--white); }
.intake-progress { color:var(--gold); }
.intake-close {
  background:rgba(245,241,232,.06); border:1px solid var(--line); color:var(--paper);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:.9rem;
  transition:border-color .3s, transform .3s;
}
.intake-close:hover { border-color:var(--line-hot); transform:rotate(90deg); }
.intake-bar { height:1px; background:var(--line); margin:0 clamp(1.2rem,4vw,3rem); }
.intake-bar span { display:block; height:100%; width:0; background:var(--grad); transition:width .5s var(--ease); }
.intake-stage {
  flex:1; display:flex; align-items:center; overflow-y:auto;
  padding:4vh clamp(1.2rem,6vw,7rem);
}
.intake-step {
  width:100%; max-width:880px; opacity:0; transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.intake-step.from-right { transform:translateX(46px); }
.intake-step.from-left { transform:translateX(-46px); }
.intake-step.in { opacity:1; transform:none; }
.intake-title {
  font-weight:900; font-size:clamp(2.2rem,6.4vw,4.8rem); line-height:1.0;
  letter-spacing:-.03em; text-transform:uppercase; margin:1.3rem 0 .9rem;
}
.intake-sub { color:var(--muted); max-width:520px; line-height:1.6; margin-bottom:1.2rem; }
.intake-body { margin-top:1.6rem; display:flex; flex-direction:column; gap:1rem; }
.intake-input {
  width:100%; max-width:560px; background:rgba(245,241,232,.05);
  border:1px solid var(--line); border-radius:12px; color:var(--paper);
  font-family:var(--font); font-size:1.05rem; padding:1.05rem 1.2rem;
  outline:none; transition:border-color .3s, background .3s;
}
.intake-input:focus { border-color:var(--gold); background:rgba(245,241,232,.08); }
.intake-input::placeholder { color:rgba(170,167,160,.55); }
.intake-area { max-width:720px; resize:vertical; min-height:9rem; line-height:1.6; }
.chip-grid { display:flex; flex-wrap:wrap; gap:.7rem; max-width:760px; border-radius:14px; }
.chip {
  background:rgba(245,241,232,.05); border:1px solid var(--line); border-radius:99px;
  color:var(--paper); font-family:var(--font); font-weight:600; font-size:.86rem;
  letter-spacing:.04em; padding:.85rem 1.4rem; cursor:pointer;
  transition:border-color .25s, background .25s, transform .25s, color .25s;
}
.chip:hover { border-color:var(--line-hot); transform:translateY(-2px); }
.chip.on {
  background:var(--grad); color:var(--ink); border-color:transparent; font-weight:700;
  box-shadow:0 6px 30px rgba(243,172,63,.3);
}
.chip-other-wrap { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.chip-other-wrap.show { max-height:90px; }
.intake-hp { position:absolute !important; left:-6000px; width:1px; height:1px; opacity:0; pointer-events:none; }
.nudge { animation:nudge .45s; border-color:var(--ember) !important; }
@keyframes nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 60%{transform:translateX(6px)} }
.intake-nav {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1.2rem,4vw,3rem) calc(1.3rem + env(safe-area-inset-bottom));
}
.intake-hint { color:var(--muted); }
.intake-brief {
  background:rgba(2,2,3,.55); border:1px solid var(--line); border-radius:12px;
  padding:1.2rem 1.4rem; max-width:720px; max-height:30vh; overflow:auto;
  white-space:pre-wrap; color:var(--muted); font-size:.72rem; line-height:1.55; letter-spacing:.04em;
  margin:1.2rem 0;
}
.intake-done-ctas { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
@media (max-width:820px) {
  .intake-stage { align-items:flex-start; padding-top:6vh; }
  .intake-hint { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .intake-step.from-right, .intake-step.from-left { transform:none; }
}

/* ---------- cursor ---------- */
.cursor { position:fixed; inset:0; pointer-events:none; z-index:80; display:none; opacity:0; transition:opacity .4s; }
@media (pointer:fine) { body.cursor-seen .cursor { opacity:1; } .cursor { display:block; } }
.cursor-dot {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--white); transform:translate(-50%,-50%);
}
.cursor-ring {
  position:absolute; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-hot); transform:translate(-50%,-50%) scale(var(--cs,1));
  transition:transform .18s ease-out, border-color .3s;
}
body.cursor-hot .cursor-ring { --cs:1.7; border-color:var(--gold); }
body.hide-cursor .cursor { opacity:0; }

/* ---------- no-webgl fallback ---------- */
body.no-webgl .panel-hero, body.no-webgl .panel-services,
body.no-webgl .panel-playground, body.no-webgl .panel-manifesto, body.no-webgl .panel-contact { height:auto; min-height:100vh; }
body.no-webgl .stage { position:relative; height:auto; min-height:100vh; padding-top:16vh; padding-bottom:10vh; }
body.no-webgl .beat { position:relative; opacity:1; transform:none; margin-bottom:8vh; pointer-events:auto; }
body.no-webgl .beats { min-height:0; }
body.no-webgl .beat-rail, body.no-webgl .panel-playground, body.no-webgl .hero-hint { display:none; }
body.no-webgl .manifesto-title .w { opacity:1; transform:none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .hint-line::after { animation:none; }
  .reveal { transition:opacity .6s; transform:none; }
  .card { transform:none !important; }
  .cursor { display:none; }
}

/* ---------- small screens ---------- */
/* phones: the nav must fit — the motion toggle was overflowing the right edge */
@media (max-width:560px) {
  .nav { padding-left:1rem; padding-right:1rem; gap:.6rem; }
  .brand { font-size:.78rem; letter-spacing:.16em; }
  .brand em { display:none; }
  .nav-links { gap:.85rem; }
  .nav-links a { font-size:.66rem; letter-spacing:.1em; }
  /* fixed-size circle: deterministic width, no text-metric guessing */
  .motion-toggle { width:34px; height:34px; padding:0; gap:0; border-radius:50%; justify-content:center; flex:none; }
  #motion-label { display:none; }
  .hero-hint { font-size:.55rem; letter-spacing:.18em; }
  .foot { font-size:.62rem; }
  /* the intake headline bottoms out at its clamp minimum and overflowed; lower the floor */
  .intake-title { font-size:clamp(1.55rem,7.4vw,2.4rem); }
  .intake-stage { padding-left:1.1rem; padding-right:1.1rem; }
  .intake-chrome, .intake-nav { padding-left:1.1rem; padding-right:1.1rem; }
  .intake-bar { margin-left:1.1rem; margin-right:1.1rem; }
  /* nav budget is tight on phones — Journal stays reachable from the footer */
  .nav-links a.nav-journal { display:none; }
}
/* The nav runs out of room at 320px, on BOTH the homepage and the generated
   pages — and it runs out in Spanish first, because "Proyectos Contacto" is
   wider than "Work Contact". Tuning this against the English nav leaves the ES
   pages spilling (the homepage clipped its motion toggle by 26px, the doc
   pages their language pill). These values fit both languages everywhere. */
@media (max-width:360px) {
  .nav-links { gap:.5rem; }
  .nav-links a { font-size:.6rem; letter-spacing:.05em; }
  /* At 320px the display clamps bottom out above what a single long word can
     fit, so break-word splits them: "IMPOSSIBLE." (295px in 282px) in English,
     "CONSTRUIMOS" and "APLICACIONES" in Spanish. Lower floors, both languages. */
  .hero-title { font-size:clamp(2.7rem,9.6vw,8.2rem); }
  .beat-title { font-size:clamp(2.3rem,7.8vw,6.4rem); }
}

/* never let a long unbroken word push the layout sideways */
.intake-title, .hero-title, .beat-title, .flow-title, .play-title, .contact-title,
.manifesto-title, .card-name { overflow-wrap:break-word; }

/* Spanish words are longer, and a display clamp tuned to English bottoms out
   at a floor Spanish cannot fit: "CONSTRUYAMOS" at the 3rem floor is 408px,
   which overflowed a 360px phone by 24px. Scoped to phones so the desktop
   type scale is identical in both languages. */
@media (max-width:560px) {
  html[lang="es"] .contact-title { font-size:clamp(2rem,8.6vw,3rem); }
  /* "LANZAMIENTOS" is 358px at the 2.8rem floor against 351px of room on a
     390px phone — a 7px miss, so break-word split it and left an orphan "S"
     on its own line. English's "RECENT" never gets close. */
  html[lang="es"] .flow-title { font-size:clamp(2.1rem,10.4vw,2.8rem); }
}

@media (max-width:820px) {
  .nav-links a[data-nav="services"] { display:none; }
  .panel-hero { height:200vh; }
  .panel-services { height:440vh; }
  .beat-rail { right:.9rem; }
  .panel-playground .stage { flex-direction:column; align-items:flex-start; justify-content:center; gap:2rem; }
  .play-panel { width:100%; }
  .foot { flex-direction:column; gap:.5rem; }
  .hero-hint .hint-right { display:none; }
}

/* ---------- language switch + linked service beats ---------- */
/* Loaded by every page, including the two homepages, which do not load blog.css. */
.nav-lang {
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  padding:.32rem .5rem; border:1px solid var(--line); border-radius:999px;
  line-height:1; align-self:center; text-decoration:none; color:inherit;
}
.nav-lang:hover { border-color:var(--gold); color:var(--gold); }

/* Beats stack at inset:0 and are faded in/out by JS. `.stage a{pointer-events:auto}`
   would otherwise keep all four links live at once, so an invisible beat could eat a
   click meant for the visible one. main.js adds .is-live to the beat in view. */
.beat-title a { color:inherit; text-decoration:none; pointer-events:none; }
.beat.is-live .beat-title a { pointer-events:auto; }
.beat-title a:hover { color:var(--gold); }

.beats-more {
  margin-top:2.4rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.beats-more a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.3rem; }
.beats-more a:hover { color:var(--gold); border-bottom-color:var(--gold); }
.beats-more i { font-style:normal; margin-left:.4rem; }

/* Spanish hero: "CONSTRUIMOS" is 3 characters longer than "WE BUILD" and overflows
   .hero-copy (901px needed vs 880px available at 1280w). Scale the Spanish headline
   down ~8% so the longest word sets on one line at every width. */
html[lang="es"] .hero-title { font-size:clamp(2.6rem,8.5vw,7.4rem); }
/* That floor was set from the DESKTOP overflow case and does not hold at the
   narrow end: at 320px "CONSTRUIMOS" still split across two lines. Measured by
   rendering rather than arithmetic — it splits at 40px and sets on one line at
   38px, so 2.25rem (36px) has margin. This rule must stay AFTER the one above,
   which outranks the generic .hero-title media query further up the file. */
@media (max-width:360px) { html[lang="es"] .hero-title { font-size:2.25rem; } }

/* The work section is a scrolling flow, not a sticky stage — so its "more" link
   needs its own spacing and must sit inside the flow's horizontal rhythm. */
.flow-more { margin:3.5rem auto 0; padding:0 clamp(1.2rem,5vw,4.5rem); max-width:1400px; }