/* ========================================================
   Hippocampus — final
   One typeface (Schibsted Grotesk). Pure white. Blue dither.
   The dots are the story; type only supports them.
   ======================================================== */

:root {
  --ink:        #0b0b10;
  --ink-mid:    #46464f;
  --ink-soft:   #87878f;
  --ink-faint:  #b6b6bd;
  --line:       #ececef;
  --bg:         #ffffff;
  --blue:       #1b4be5;
  --blue-deep:  #0e2db8;

  --nav-h:      68px;
  --max:        1180px;
  --gutter:     clamp(22px, 4vw, 60px);
  --font:       "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease:       cubic-bezier(.22,.8,.24,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
html, body {
  margin: 0; padding: 0;
  background: #fff; color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }

.blue { color: var(--blue); }

#dots-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 1;
  transition: opacity .5s ease;
}

/* ===================== NAV ===================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h); z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(255,255,255,0);
  transition: background .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(255,255,255,0.82); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom-color: var(--line); }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.nav-mark { width: 20px; height: 20px; display: inline-flex; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-link { position: relative; font-size: 15px; font-weight: 450; color: var(--ink-mid); letter-spacing: -0.01em; transition: color .2s; padding: 4px 0; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-access { color: var(--ink); font-weight: 500; }
.nav-access::after { background: var(--ink); }

/* ===================== MODAL ===================== */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11,11,16,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(440px, calc(100vw - 40px)); background: #fff; border-radius: 22px; padding: clamp(28px, 4vw, 40px); box-shadow: 0 50px 120px -40px rgba(11,11,16,0.5); animation: modalIn .35s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translate(-50%,-46%); } to { opacity: 1; transform: translate(-50%,-50%); } }
.modal-x { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 8px; transition: background .15s, color .15s; }
.modal-x:hover { background: var(--line); color: var(--ink); }
.modal-title { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 8px; }
.modal-sub { font-size: 15.5px; line-height: 1.45; color: var(--ink-mid); margin: 0 0 24px; letter-spacing: -0.01em; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-field span { font-size: 13px; font-weight: 500; color: var(--ink-soft); letter-spacing: -0.01em; }
.modal-field input { height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.modal-field input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(27,75,229,0.08); }
.modal-submit { height: 48px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s; }
.modal-submit:hover { background: var(--blue); }
.modal-done { text-align: center; }
.modal-check { width: 56px; height: 56px; margin: 4px auto 18px; border-radius: 50%; background: #e7f6ec; color: #1f8a4c; font-size: 26px; display: flex; align-items: center; justify-content: center; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 17px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 8px 22px -10px rgba(11,11,16,0.5);
  transition: background .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(27,75,229,0.55); }
.nav-cta .ar { transition: transform .2s; }
.nav-cta:hover .ar { transform: translateX(3px); }
@media (max-width: 720px) { .nav-link { display: none; } }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 50px; padding: 0 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease);
}
.btn .ar { transition: transform .2s; }
.btn:hover .ar { transform: translateX(3px); }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 10px 26px -12px rgba(11,11,16,0.55); }
.btn-primary:hover { background: var(--blue); transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(27,75,229,0.5); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { color: var(--blue); }
.btn-ghost .ar { color: var(--blue); }

/* ===================== STEP INDEX ===================== */
.step {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: -0.01em; margin-bottom: 20px;
}
.step .n { color: var(--blue); font-variant-numeric: tabular-nums; }
.step .bar { width: 26px; height: 1px; background: var(--ink-faint); }

/* ===================== CINEMA ===================== */
.cinema { position: relative; z-index: 2; }
.scene { position: relative; height: 112vh; }
.scene-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* HERO — split layout */
.hero-sticky { display: flex; align-items: center; padding: var(--nav-h) var(--gutter) 0; }
.hero-grid {
  width: 100%; max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px, 4vw, 64px); align-items: center;
  min-height: calc(100vh - var(--nav-h));
}
.hero-cue { min-height: 60vh; pointer-events: none; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.hero-h1 {
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.06; letter-spacing: -0.035em; font-weight: 600;
  margin: 0; max-width: 15ch; text-wrap: balance;
}
.hero-sub {
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5;
  letter-spacing: -0.012em; color: var(--ink-mid); margin: 0; max-width: 44ch;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.scroll-cue { position: absolute; left: var(--gutter); bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.scroll-cue .lbl { font-size: 12px; color: var(--ink-faint); letter-spacing: -0.01em; }
.scroll-track { width: 20px; height: 32px; border: 1px solid var(--ink-faint); border-radius: 999px; display: flex; justify-content: center; }
.scroll-dot { width: 3px; height: 7px; margin-top: 5px; border-radius: 999px; background: var(--ink-faint); animation: sd 2s var(--ease) infinite; }
@keyframes sd { 0%,100% { transform: translateY(0); opacity:.35; } 50% { transform: translateY(8px); opacity:1; } }

/* BEAT — dot painting (upper) + clean lower caption */
.beat-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56vh;
  background: linear-gradient(to top, #fff 30%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.78) 72%, rgba(255,255,255,0) 100%);
  pointer-events: none; z-index: 2;
}
.beat-cap {
  position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%);
  width: 100%; max-width: 720px; padding: 0 var(--gutter);
  text-align: center; z-index: 3; transition: opacity .12s linear;
}
.beat-h2 {
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04;
  letter-spacing: -0.035em; font-weight: 600; margin: 0 0 16px; text-wrap: balance;
}
.beat-sub {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5;
  letter-spacing: -0.012em; color: var(--ink-mid); margin: 0 auto; max-width: 50ch; text-wrap: pretty;
}
.beat-cap .step { justify-content: center; }

/* ===================== CLOSE (white, minimal) ===================== */
.close { position: relative; z-index: 2; background: #fff; }

/* ===================== APP (menu bar + daily brief) ===================== */
.app { padding: 16vh var(--gutter) 12vh; border-top: 1px solid var(--line); background: #fff; }
.app-inner { max-width: var(--max); margin: 0 auto; }
.app-head { max-width: 44ch; margin-bottom: 8vh; }
.app-title { font-size: clamp(30px, 3.6vw, 50px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; margin: 0 0 16px; }
.app-sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-mid); margin: 0; max-width: 52ch; letter-spacing: -0.012em; }
.app-show { display: grid; grid-template-columns: 320px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }

.menubar { width: 320px; border-radius: 14px; background: rgba(250,250,252,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(11,11,16,0.3); padding: 8px; font-size: 14.5px; letter-spacing: -0.01em; }
.mb-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px 4px; font-weight: 600; color: var(--ink-soft); }
.mb-rec { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,0.5); animation: rec 2s ease-out infinite; }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.45); } 70%,100% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } }
.mb-meta { padding: 0 12px 10px; font-size: 12.5px; color: var(--ink-faint); }
.mb-meta span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mb-div { height: 1px; background: var(--line); margin: 6px 8px; }
.mb-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-radius: 7px; color: var(--ink); cursor: default; transition: background .15s, color .15s; }
.mb-row:hover { background: var(--blue); color: #fff; }
.mb-row:hover .mb-key { color: rgba(255,255,255,0.82); }
.mb-key { color: var(--ink-faint); font-size: 13px; }
.mb-hot { color: var(--blue); font-weight: 500; }
.mb-hot:hover { color: #fff; }

.brief { border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); background: #fff; box-shadow: 0 24px 60px -34px rgba(11,11,16,0.18); }
.brief-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.brief-title { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.brief-date { color: var(--ink-soft); font-size: 14px; }
.brief-row { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.brief-row p { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); letter-spacing: -0.01em; }
.bb { flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; margin-top: 1px; }
.bb-ship { background: #e7f6ec; color: #1f8a4c; }
.bb-dec { background: #eef2fe; color: #1b4be5; }
.bb-risk { background: #fdf0e6; color: #c2620f; }
.bb-foll { background: #f3eefe; color: #6b3fd6; }
.src { color: var(--ink-soft); }
.brief-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; }
@media (max-width: 760px) { .app-show { grid-template-columns: 1fr; } .menubar { width: 100%; max-width: 340px; } }

/* ===================== WHY (dither-dot cards) ===================== */
.why { padding: 15vh var(--gutter); border-top: 1px solid var(--line); background: #fff; }
.why-inner { max-width: var(--max); margin: 0 auto; }
.why-head { max-width: 24ch; margin-bottom: 6vh; }
.why-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--blue); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 9px; }
.why-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.why-card { position: relative; border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 3vw, 40px); background: #fff; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.why-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.why-card:hover { transform: translateY(-5px); box-shadow: 0 36px 80px -40px rgba(11,11,16,0.24); border-color: rgba(27,75,229,0.28); }
.why-card:hover::after { transform: scaleX(1); }
.why-n { position: absolute; top: clamp(24px, 2.6vw, 34px); right: clamp(26px, 3vw, 38px); font-size: 13px; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.why-ico { width: 52px; height: 52px; margin-bottom: 24px; display: block; transition: transform .4s var(--ease); }
.why-card:hover .why-ico { transform: scale(1.06); }
.why-card h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -0.025em; margin: 0 0 11px; }
.why-card p { font-size: 15.5px; line-height: 1.55; color: var(--ink-mid); margin: 0; max-width: 38ch; letter-spacing: -0.01em; text-wrap: pretty; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }

/* handoff card additions */
.ho-q { font-size: 16px; line-height: 1.5; color: var(--ink); margin: 2px 0 14px; letter-spacing: -0.01em; }
.bb-stop { background: #fdeaea; color: #c43d3d; }
.ho-ok { color: #1f8a4c; font-weight: 700; margin-right: 4px; }
.brief-foot { font-weight: 500; color: var(--ink); }

/* handoff reveal animation */
.brief.anim .ho-q, .brief.anim .brief-row, .brief.anim .brief-foot { opacity: 0; }
.brief.anim.run .ho-q, .brief.anim.run .brief-row, .brief.anim.run .brief-foot { animation: revealUp .6s var(--ease) forwards; }
@keyframes revealUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.brief.anim.run .brief-foot .ho-ok { animation: popIn .5s var(--ease) both; animation-delay: inherit; }
@keyframes popIn { 0% { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.mb-hot { animation: hotPulse 2.4s var(--ease) infinite; }
@keyframes hotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ===================== DEMO ===================== */
.demo { padding: 14vh var(--gutter); border-top: 1px solid var(--line); background: #fff; }
.demo-inner { max-width: 980px; margin: 0 auto; }
.demo-head { text-align: center; max-width: 30ch; margin: 0 auto 6vh; align-items: center; }
.demo-head .step { justify-content: center; }
.demo-frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; aspect-ratio: 16/9; width: 100%; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(120% 120% at 50% 0%, #f7f8fb, #edf0f7); overflow: hidden; transition: box-shadow .35s var(--ease); }
.demo-frame:hover { box-shadow: 0 44px 100px -48px rgba(11,11,16,0.32); }
.demo-frame::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(27,75,229,0.16) 1.2px, transparent 1.3px); background-size: 15px 15px; opacity: 0.7; }
.demo-play { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 16px 40px -12px rgba(27,75,229,0.55); transition: transform .3s var(--ease); }
.demo-frame:hover .demo-play { transform: scale(1.07); }
.demo-cap { position: relative; font-size: 15px; color: var(--ink-mid); letter-spacing: -0.01em; }

/* ===================== FINALE ===================== */
.finale { padding: 20vh var(--gutter) 13vh; text-align: center; border-top: 1px solid var(--line); background: #fff; }
.finale-inner { max-width: 920px; margin: 0 auto; }
.finale h2 { font-size: clamp(40px, 6.6vw, 104px); line-height: 1.0; letter-spacing: -0.042em; font-weight: 600; margin: 0 0 42px; text-wrap: balance; }
.finale-actions { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
.finale-dl { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; letter-spacing: -0.01em; transition: color .2s, border-color .2s; }
.finale-dl:hover { color: var(--blue); border-color: var(--blue); }
.finale-req { font-size: 16px; color: var(--ink-soft); letter-spacing: -0.01em; transition: color .2s; }
.finale-req:hover { color: var(--ink); }

.manifesto { padding: 26vh var(--gutter) 24vh; text-align: center; border-top: 1px solid var(--line); }
.manifesto-inner { max-width: 980px; margin: 0 auto; }
.manifesto h2 {
  font-size: clamp(40px, 6.4vw, 100px); line-height: 1.04;
  letter-spacing: -0.04em; font-weight: 600; margin: 0 0 30px; text-wrap: balance;
}
.manifesto p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--ink-mid); margin: 0 auto; max-width: 58ch; letter-spacing: -0.012em; text-wrap: pretty; }

.trust { padding: 14vh var(--gutter); border-top: 1px solid var(--line); }
.trust-inner { max-width: var(--max); margin: 0 auto; }
.trust h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.03em; margin: 0 0 9vh; max-width: 20ch; line-height: 1.1; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.trust-item { border-top: 1px solid var(--ink); padding-top: 20px; }
.trust-item .ti-k { font-size: 15px; font-weight: 600; color: var(--blue); letter-spacing: -0.01em; margin-bottom: 12px; }
.trust-item p { font-size: 16px; line-height: 1.5; color: var(--ink-mid); margin: 0; letter-spacing: -0.01em; }
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; gap: 0; } .trust-item { border-top: 1px solid var(--line); padding: 22px 0; } .trust-item:first-child { border-top: 1px solid var(--ink); } }

.team { padding: 16vh var(--gutter); border-top: 1px solid var(--line); }
.team-inner { max-width: var(--max); margin: 0 auto; }
.team h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 24px; max-width: 22ch; }
.team p { font-size: 17px; line-height: 1.55; color: var(--ink-mid); margin: 0; max-width: 56ch; letter-spacing: -0.01em; }

.cta { padding: 18vh var(--gutter) 16vh; text-align: center; border-top: 1px solid var(--line); }
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta h2 { font-size: clamp(40px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 22px; text-wrap: balance; }
.cta p { font-size: 18px; line-height: 1.5; color: var(--ink-mid); margin: 0 auto 38px; max-width: 46ch; letter-spacing: -0.012em; }
.cta-actions { display: flex; justify-content: center; margin: 0 auto 16px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.cta-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.cta-form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(27,75,229,0.08); }
.cta-form input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 15.5px; padding: 0 16px; outline: none; color: var(--ink); }
.cta-form input::placeholder { color: var(--ink-faint); }
.cta-form button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; background: var(--ink); color: #fff; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s; white-space: nowrap; }
.cta-form button:hover { background: var(--blue); }
.cta-form button:disabled { background: var(--blue); cursor: default; }

.footer { border-top: 1px solid var(--line); padding: 44px var(--gutter); background: #fff; position: relative; z-index: 2; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--ink-soft); font-size: 14px; letter-spacing: -0.01em; }
.footer-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; font-size: 16px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cue { min-height: 42vh; order: -1; }
  .scroll-cue { display: none; }
  .scene { height: 108vh; }
  .beat-cap { bottom: 10vh; }
}