/* Self-hosted type. size-adjust on the fallbacks keeps the 130 px headline
   from shifting when the real face arrives. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/bricolage-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; }
@font-face { font-family: "Instrument Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 96%; }

:root {
  color-scheme: dark;
  --ink: #0b0a0a;
  --coal: #161413;
  --ash: #6f6862;
  --fog: #b5ada4;
  --cream: #f3ede4;
  --ember: #ff6a2a;
  --ember-deep: #c8390f;
  --blush: #ffb27a;
  --display: "Bricolage Grotesque", "Bricolage Fallback", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Instrument Fallback", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--ink);
  color: var(--cream);
  font: 400 17px/1.55 var(--body);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blush); outline-offset: 4px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: var(--pad); top: 12px; z-index: 70; width: auto; height: auto; clip: auto; padding: 12px 18px; background: var(--cream); color: var(--ink); border-radius: 999px; font: 600 14px/1 var(--body); text-decoration: none; }

/* Grain over everything, 4 percent */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
}

/* Type tracks */
.eyebrow { margin: 0 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--blush); animation: ember 5s ease-in-out infinite; }
@keyframes ember { 0%, 100% { color: #ffb27a; } 50% { color: #ff8a4a; } }
.eyebrow-center { text-align: center; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; margin: 0; font-variation-settings: "opsz" 96; }
h1 em, h2 em, .line em { font: italic 400 1.04em/1 var(--serif); color: var(--blush); letter-spacing: 0; }
h2 { font-size: clamp(38px, 5.6vw, 76px); line-height: .98; }
.lede { font-size: clamp(17px, 1.5vw, 21px); color: var(--cream); opacity: .9; max-width: 36ch; margin: 0 0 22px; text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.quiet { margin: 14px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.texture {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font: italic 400 clamp(220px, 40vw, 640px)/1 var(--serif); color: var(--cream); opacity: .05;
  left: -.04em; bottom: -.18em; white-space: nowrap;
}

/* Loader: the wordmark for 600 ms, out by 900 ms, and the film is held
   dark until it is gone so the mark never floats over faces. Skipped for a
   repeat visitor (script adds .seen to html). */
.loader {
  position: fixed; inset: 0; z-index: 60; background: var(--ink);
  display: grid; place-items: center; pointer-events: none;
  animation: loader-out .3s var(--ease) .6s forwards;
}
.loader-mark { display: inline-flex; align-items: center; gap: 16px; font: 600 clamp(22px, 3vw, 34px)/1 var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: 0; animation: mark-in .45s var(--ease) forwards; }
.film-wrap { opacity: 0; transition: opacity .8s var(--ease); }
.film-wrap.in, html.seen .film-wrap { opacity: 1; }
html.seen .loader { display: none; }

/* The mark is the app icon itself, melting on a six second loop. The
   poster is the still for reduced motion and for anything that cannot play. */
.mark { display: block; flex: none; overflow: hidden; border-radius: 27.5%; background: var(--ink); box-shadow: 0 0 0 1px rgba(255,178,122,.12); }
.mark-sm, .mark-sm .mark-i { width: 40px; height: 40px; }
.mark-lg, .mark-lg .mark-v { width: 96px; height: 96px; }
.mark-i { display: block; object-fit: cover; }
.mark-v { display: block; object-fit: cover; background: var(--ink); }
/* The loader plays the melting film, cut so the cube fills its frame edge to
   edge; scaled down a touch it sits inset in ink like the header icon, and
   its own corners are rounded to match the cube. The header carries the icon
   itself, breathing. */
.loader .mark-v { transform: scale(.88); border-radius: 14%; }
.mark-v img { width: 100%; height: 100%; object-fit: cover; }
.brand .mark { filter: drop-shadow(0 0 10px rgba(255,106,42,.45)); animation: glow 4.5s ease-in-out infinite; }
.loader .mark { filter: drop-shadow(0 0 26px rgba(255,106,42,.55)); }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,106,42,.35)); } 50% { filter: drop-shadow(0 0 16px rgba(255,140,60,.6)); } }
@keyframes mark-in { from { opacity: 0; transform: translateY(10px); letter-spacing: .2em; } to { opacity: 1; transform: none; letter-spacing: .06em; } }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
.loader.done { display: none; }

/* Cursor dot, pointer devices only. Hidden over the primary button so the
   difference blend never covers the label. */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
    width: 10px; height: 10px; border-radius: 50%; background: var(--cream);
    mix-blend-mode: difference; transform: translate(-50%, -50%);
    transition: width .25s var(--ease), height .25s var(--ease), opacity .3s;
    opacity: 0;
  }
  .cursor.on { opacity: 1; }
  .cursor.big { width: 44px; height: 44px; }
  .cursor.hide { opacity: 0; width: 6px; height: 6px; }
}

/* Header: wordmark left, sound and download right */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: calc(16px + var(--safe-t)) var(--pad) 16px;
  background: linear-gradient(to bottom, rgba(11,10,10,.55), rgba(11,10,10,0));
}
.top-actions { display: flex; align-items: center; justify-content: end; gap: 14px; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 14px; background: var(--cream); color: var(--ink); }
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  text-decoration: none; font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--fog); transition: color .3s var(--ease); white-space: nowrap;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  text-decoration: none; font: 600 15px/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.brand span { display: inline-block; }
.sound {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 0; border: 0; background: transparent; color: var(--cream); cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.sound .label { text-shadow: 0 1px 14px rgba(0,0,0,.7); white-space: nowrap; }
.sound .ring {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11,10,10,.5); border: 1px solid rgba(243,237,228,.3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .25s var(--ease), transform .18s var(--ease);
}
.sound:hover .ring { transform: scale(1.05); }
.sound.nudge .ring { animation: nudge 1.4s var(--ease) 1; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(255,178,122,.7); } 60% { box-shadow: 0 0 0 18px rgba(255,178,122,0); } 100% { box-shadow: 0 0 0 0 rgba(255,178,122,0); } }
.sound svg { width: 20px; height: 20px; }
.sound .ic-on { display: none; }
.sound[aria-pressed="true"] .ring { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sound[aria-pressed="true"] .ic-on { display: block; }
.sound[aria-pressed="true"] .ic-off { display: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 30px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer;
  max-width: 100%; text-align: center;
  transition: transform .5s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--cream); color: var(--ink); box-shadow: 0 12px 40px rgba(255,106,42,.26); animation: pulse 3.6s ease-in-out 1.6s 3; }
.btn-primary:hover { box-shadow: 0 18px 56px rgba(255,106,42,.5); }
@keyframes pulse { 0%, 100% { box-shadow: 0 12px 40px rgba(255,106,42,.26); } 50% { box-shadow: 0 18px 60px rgba(255,120,50,.5); } }
.btn-primary svg { width: 22px; height: 22px; flex: none; }

/* Story: pinned film, three statements */
.story { position: relative; height: 340svh; }
.stage {
  position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  display: grid; align-items: end;
}
.film-wrap { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.film-poster, .film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.film { background: transparent; transform: scale(var(--film-scale, 1)); transform-origin: 50% 45%; transition: opacity .4s var(--ease); }
.film.out { opacity: 0; }
.film::cue { opacity: 0; font-size: 1px; }
.film::-webkit-media-text-track-display { display: none; }
.shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,10,10,.92) 0%, rgba(11,10,10,.6) 28%, rgba(11,10,10,.16) 50%, rgba(11,10,10,0) 64%),
    linear-gradient(to bottom, rgba(11,10,10,.45), rgba(11,10,10,0) 24%);
}
.tags { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
.tag {
  position: absolute; top: 34%; display: grid; gap: 6px; justify-items: center; text-align: center; max-width: 22ch;
  color: var(--cream); opacity: 0; animation: rise .8s var(--ease) 1.6s forwards;
}
.tag b { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; padding: 8px 12px; border: 1px solid rgba(243,237,228,.28); border-radius: 999px; background: rgba(11,10,10,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.tag .say { display: block; font: 400 14px/1.4 var(--body); font-style: normal; color: var(--cream); text-shadow: 0 1px 12px rgba(0,0,0,.8); opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.tag[data-on] b { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tag[data-on] .say { opacity: 1; transform: none; }
.tag-maya { left: 38%; translate: -50% 0; }
.tag-kai { left: 63%; translate: -50% 0; animation-delay: 1.75s; }
.lines { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(230px, 34svh, 330px); z-index: 1; }
.caption {
  position: absolute; left: var(--pad); top: clamp(88px, 13svh, 124px); z-index: 2; margin: 0; max-width: 34ch;
  font: 400 14px/1.4 var(--body); color: var(--cream);
  text-shadow: 0 1px 12px rgba(0,0,0,.8); opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.caption.on { opacity: 1; transform: none; }
.caption b { color: var(--blush); font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-right: 10px; }
.line {
  position: absolute; left: 0; bottom: 0; margin: 0; max-width: 12ch;
  font: 700 clamp(52px, 9vw, 132px)/.92 var(--display); letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s cubic-bezier(.34, 1.4, .5, 1), filter .7s var(--ease);
  pointer-events: none;
}
.line .nb { white-space: nowrap; }
.line em { display: inline-block; transform-origin: 50% 0; transition: transform .9s var(--ease), filter .9s var(--ease), opacity .9s var(--ease); }
.line.active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.line.melt { transition-delay: .4s, 0s, .4s; opacity: 0; }
.line.melt em { transform: translateY(.55em) scaleY(1.7) scaleX(.88); filter: blur(7px); opacity: 0; transition-duration: 1.1s; }
.line.drip em { transform: translateY(-.3em) scaleY(1.3); filter: blur(3px); opacity: 0; transition: none; }
/* The melt carries on past the hero: the accent word in a chapter heading
   drips out (.melt) or drips in from above (.drip), same rule as the hero. */
.h-melt em { display: inline-block; transform-origin: 50% 0; transition: transform .9s var(--ease), filter .9s var(--ease), opacity .9s var(--ease); }
.h-melt.melt em { transform: translateY(.55em) scaleY(1.7) scaleX(.88); filter: blur(7px); opacity: 0; transition-duration: 1.1s; }
.h-melt.drip em { transform: translateY(-.3em) scaleY(1.3); filter: blur(3px); opacity: 0; transition: none; }
.cta {
  position: relative; z-index: 1; padding: 0 var(--pad) calc(clamp(36px, 6vh, 72px) + var(--safe-b));
  display: grid; justify-items: start; max-width: 720px;
}
.cta > * { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) 1.2s forwards; }
.cta > :nth-child(2) { animation-delay: 1.32s; }
.cta > :nth-child(3) { animation-delay: 1.44s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.progress { position: absolute; right: var(--pad); bottom: calc(clamp(36px, 6vh, 72px) + var(--safe-b)); z-index: 1; display: grid; gap: 8px; }
.progress i { width: 28px; height: 2px; background: rgba(243,237,228,.28); transition: background .4s var(--ease), width .4s var(--ease); }
.progress i.active { background: var(--cream); width: 44px; }

/* Reel: pinned, moves sideways with vertical scroll */
.reel { position: relative; margin-top: -6svh; z-index: 1; }
.reel-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(to bottom, rgba(11,10,10,0), var(--ink) 55%); z-index: -1; pointer-events: none; }
.reel-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: grid; align-content: center; gap: clamp(22px, 4vh, 44px); padding-top: 8svh; background: transparent; }
.reel-head { position: relative; z-index: 1; padding: 0 var(--pad); }
.track { display: flex; gap: clamp(14px, 2vw, 28px); width: max-content; padding: 0 var(--pad); will-change: transform; }
.clip {
  position: relative; margin: 0; flex: none;
  height: 62svh; min-height: 360px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
  background: var(--coal); box-shadow: inset 0 0 0 1px rgba(243,237,228,.07);
  transition: transform .6s var(--ease), filter .6s var(--ease), opacity .6s var(--ease);
}
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,10,10,.85), rgba(11,10,10,0) 50%); pointer-events: none; }
.clip figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: grid; gap: 4px;
  color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,.75);
  opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.clip.active figcaption { opacity: 1; transform: none; }
.clip small { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--blush); }
.clip b { font: 700 clamp(22px, 2.2vw, 30px)/1.05 var(--display); letter-spacing: -.02em; }
.clip span { font-size: 14px; color: var(--fog); }
.track:hover .clip:not(:hover) { filter: saturate(.35) brightness(.7); }
.track .clip:hover { transform: translateY(-8px); }
.clip.active { box-shadow: inset 0 0 0 1px rgba(243,237,228,.18), 0 30px 80px rgba(0,0,0,.5); }
.clip:nth-child(odd) video { animation: float 7s ease-in-out infinite; }
.clip:nth-child(even) video { animation: float 9s ease-in-out -3s infinite; }
@keyframes float { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.06) translateY(-1.5%); } }

/* Promise: copy on the left, the product on the right, one enormous word behind */
.proof { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 160px) var(--pad); margin-top: -10svh; background: linear-gradient(to bottom, rgba(11,10,10,0), var(--ink) 18%); }
.proof > :not(.texture) { position: relative; z-index: 1; }
.proof .texture { position: absolute; z-index: 0; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.proof h2 { max-width: 14ch; margin: 0 0 clamp(36px, 5vw, 64px); }
.proof-row { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.proof-row li { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(243,237,228,.16); }
.proof-row b { font: 700 clamp(22px, 2vw, 30px)/1.08 var(--display); letter-spacing: -.02em; }
.proof-row span { color: var(--fog); font-size: 16px; }
.phones { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.phone {
  position: relative; margin: 0; aspect-ratio: 1320 / 2868; border-radius: 40px; overflow: hidden;
  background: var(--coal); box-shadow: inset 0 0 0 2px rgba(243,237,228,.14), 0 40px 90px rgba(0,0,0,.55);
  transform: translateY(-6%);
}
.phone-2 { transform: translateY(6%); }
.phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Final: its own frame, full bleed, centred, clear of the header */
.final { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; display: grid; align-items: end; justify-items: center; text-align: center; }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; transform: scale(1.04); }
.final-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 62%, rgba(11,10,10,.5), rgba(11,10,10,.88)), linear-gradient(to bottom, var(--ink), rgba(11,10,10,0) 22%); }
.final-copy { padding: calc(120px + var(--safe-t)) var(--pad) clamp(80px, 12vh, 150px); display: grid; justify-items: center; max-width: 760px; }
.final h2 { margin-bottom: 16px; }
.final .lede { text-align: center; margin-bottom: 28px; }

/* Persistent store action on phones once the hero has scrolled away */
.store-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 12px var(--pad) calc(12px + var(--safe-b)); display: none; background: linear-gradient(to top, rgba(11,10,10,.92), rgba(11,10,10,.7) 70%, rgba(11,10,10,0)); transform: translateY(110%); transition: transform .45s var(--ease); }
.store-bar .btn { width: 100%; min-height: 56px; animation: none; }
.store-bar.on { transform: none; }

/* Footer */
footer { padding: 40px var(--pad) calc(64px + var(--safe-b)); color: var(--ash); font-size: 14px; display: grid; gap: 14px; border-top: 1px solid rgba(243,237,228,.08); }
footer p { margin: 0; max-width: 70ch; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 26px; }
footer nav a { text-decoration: none; color: var(--fog); min-height: 44px; display: inline-flex; align-items: center; }
footer nav a:hover { color: var(--cream); }

/* Landscape screens from 900 px (iPad landscape, small laptops, desktops):
   the copy gets its own dark ground, the coaches shift right, the headline
   sets on two lines and the name tags replace the caption. Under 1200 the
   desktop cut is anchored at 75 percent so the pair clears the headline. */
@media (min-width: 900px) and (orientation: landscape) {
  .tags { display: block; }
  .film-poster, .film { object-position: 40% 40%; }
  .shade { background:
    linear-gradient(to right, rgba(11,10,10,.72), rgba(11,10,10,.38) 30%, rgba(11,10,10,0) 46%),
    linear-gradient(to top, rgba(11,10,10,.92) 0%, rgba(11,10,10,.6) 28%, rgba(11,10,10,.16) 50%, rgba(11,10,10,0) 64%),
    linear-gradient(to bottom, rgba(11,10,10,.45), rgba(11,10,10,0) 24%); }
  .film-wrap.desktop .film-poster, .film-wrap.desktop .film { object-position: 75% 40%; }
  .caption { display: none; }
  .tag-maya { left: 52%; }
  .tag-kai { left: 78%; }
  .film-wrap.desktop ~ .tags .tag-maya { left: 60%; }
  .film-wrap.desktop ~ .tags .tag-kai { left: 85%; }
  .line { max-width: 10ch; }
  .lines, .cta { max-width: 44vw; }
}
@media (min-width: 1200px) {
  .film-wrap.desktop .film-poster, .film-wrap.desktop .film { object-position: 50% 40%; }
  .film-wrap.desktop ~ .tags .tag-maya { left: 64%; }
  .film-wrap.desktop ~ .tags .tag-kai { left: 86%; }
}
@media (min-width: 1700px) {
  .film-poster, .film { object-position: 36% 40%; }
  .tag-maya { left: 54%; }
  .tag-kai { left: 80%; }
  .film-wrap.desktop ~ .tags .tag-maya { left: 63%; }
  .film-wrap.desktop ~ .tags .tag-kai { left: 84%; }
}

/* Laptops: labels off the sound control before they can wrap */
@media (max-width: 1180px) {
  .sound .label { display: none; }
}
@media (max-width: 860px) {
  .shade { background:
    linear-gradient(to top, rgba(11,10,10,.94) 0%, rgba(11,10,10,.7) 32%, rgba(11,10,10,.24) 54%, rgba(11,10,10,0) 68%),
    linear-gradient(to bottom, rgba(11,10,10,.45), rgba(11,10,10,0) 24%); }
  .top { grid-template-columns: 1fr auto; gap: 8px; background: linear-gradient(to bottom, rgba(11,10,10,.84), rgba(11,10,10,.42) 58%, rgba(11,10,10,0)); }
  .eyebrow { font-size: 14px; letter-spacing: .18em; }
  .quiet { font-size: 14px; }
  .caption b, .clip small { font-size: 14px; letter-spacing: .14em; }
  .btn-small { display: none; }
  .stage-eyebrow { display: none; }
  .tags { display: none; }
  .story { height: 260svh; }
  .lines { bottom: clamp(250px, 36svh, 340px); }
  .caption { max-width: 100%; top: calc(88px + var(--safe-t)); }
  .line { font-size: clamp(46px, 13vw, 84px); max-width: 9ch; }
  .progress { display: none; }
  .reel { margin-top: 0; }
  .reel-stage { align-content: start; padding-top: calc(88px + var(--safe-t)); gap: 18px; min-height: 0; }
  .clip { height: min(calc((100vw - 2 * var(--pad)) * 16 / 9), calc(100svh - 236px - var(--safe-t))); width: auto; min-height: 0; }
  .proof { margin-top: 0; padding-top: 128px; }
  .proof-grid { grid-template-columns: 1fr; gap: 48px; }
  .phones { width: min(100%, 420px); justify-self: center; margin: 0; }
  .final-bg { object-position: 50% 0; }
  .track:hover .clip:not(:hover) { filter: none; }
  .track .clip:hover { transform: none; }
  .store-bar { display: block; }
}
/* Portrait phones get the portrait cut, top anchored and fitted to the width,
   so both faces stay whole and the copy sits on the ink beneath the frame. */
@media (max-aspect-ratio: 3/4) {
  .film-poster, .film { object-fit: contain; object-position: 50% 34%; }
  .film-wrap.portrait .film-poster, .film-wrap.portrait .film { object-fit: contain; object-position: 50% 0%; transform-origin: 50% 22%; }
}
@media (max-width: 600px) {
  .brand > span:last-child { display: none; }
}
@media (max-width: 480px) {
  .btn { width: 100%; }
  .cta { max-width: none; width: 100%; }
}
@media (hover: none) {
  .track:hover .clip:not(:hover) { filter: none; }
  .track .clip:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; display: none; }
  .film-wrap { opacity: 1; transition: none; }
  .story { height: 100svh; }
  .stage { position: relative; }
  .film { transform: none; }
  .line, .line em { transition: none; }
  .caption { transition: none; }
  .cta > *, .tag { opacity: 1; transform: none; animation: none; }
  .line.drip em, .line.melt em { transition: none; }
  .h-melt em, .h-melt.drip em, .h-melt.melt em { transition: none; transform: none; filter: none; opacity: 1; }
  .tag-maya, .tag-kai { transform: none; }
  .reel-stage { position: relative; height: auto; min-height: 0; padding: clamp(56px, 8vw, 100px) 0; }
  .track { transform: none !important; overflow-x: auto; width: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .clip { scroll-snap-align: start; transition: none; }
  .clip figcaption { opacity: 1; transform: none; transition: none; }
  .btn, .sound .ring, .store-bar { transition: none; }
  .brand .mark, .btn-primary, .eyebrow, .clip video, .sound.nudge .ring { animation: none; }
}