/* ============ ALTORA ============ */
@font-face{font-family:"BlurWeb";src:url(../assets/fonts/BlurWeb-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Medeo Sans";src:url(../assets/fonts/MedeoSans.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Medeo Sans";src:url(../assets/fonts/MedeoSans-Italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Medeo Mono";src:url(../assets/fonts/MedeoMono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Medeo Pixel";src:url(../assets/fonts/MedeoPixel.woff2) format("woff2");font-display:swap}

:root{
  --ink:#000007;
  --navy:#001641;
  --accent:#ff5337;
  --paper:#e9e9e9;
  /* 1 design px @1440 — used for layout + display type only; UI text stays at fixed sizes */
  --px:clamp(.62px, calc(100vw / 1440), 1.4px);
  --pad:32px;
  --h1:calc(64 * var(--px));
  --body:16px;
  --small:12px;
  --ease:cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--ink);font-family:"Medeo Sans",system-ui,sans-serif;font-size:var(--body);line-height:1.2;overflow-x:hidden}
body.is-loading{overflow:hidden}
img,video,canvas,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

/* ---------- type ---------- */
.mono{font-family:"Medeo Mono",ui-monospace,monospace;font-size:var(--small);line-height:normal;text-transform:uppercase}
.body{font-size:var(--body);letter-spacing:-.06em;line-height:1.2;text-transform:uppercase}

/* ---------- display headline (Figma: BlurWeb 64 / -2% / white→transparent fill / progressive blur 0→8 / difference)
   five stacked copies with increasing blur, each masked to its own band and added together
   (plus-lighter) → a smooth progressive blur with no ghosting. Padding gives the blur room so
   nothing gets clipped; negative margins keep the layout identical to Figma.
   --k = blur hand-off position (0% all blurred → 100% final) · --a reveal edge · --o exit edge */
.hb{
  --a:125%;--o:-60%;--k:100%;--sh:calc(var(--k) - 100%);
  --blur:calc(4.5 * var(--px));
  position:relative;display:block;
  padding:.24em .45em .3em;margin:-.24em -.45em -.3em;
  font-family:"BlurWeb",sans-serif;font-weight:500;font-size:var(--h1);
  line-height:1;letter-spacing:-.02em;text-transform:uppercase;
  mix-blend-mode:difference;isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent var(--o),#000 calc(var(--o) + 26%),#000 var(--a),transparent calc(var(--a) + 26%));
          mask-image:linear-gradient(90deg,transparent var(--o),#000 calc(var(--o) + 26%),#000 var(--a),transparent calc(var(--a) + 26%));
}
.hb__l{
  display:block;color:transparent;
  background:linear-gradient(100deg,#fff 51%,rgba(255,255,255,.12) 100%);
  -webkit-background-clip:text;background-clip:text;
  mix-blend-mode:plus-lighter;will-change:transform;
}
.hb__l:not(:first-child){position:absolute;inset:0;padding:inherit}
.hb__l--0{-webkit-mask-image:linear-gradient(90deg,#000 calc(42% + var(--sh)),transparent calc(56% + var(--sh)));mask-image:linear-gradient(90deg,#000 calc(42% + var(--sh)),transparent calc(56% + var(--sh)))}
.hb__l--1{filter:blur(calc(var(--blur) * .22));-webkit-mask-image:linear-gradient(90deg,transparent calc(42% + var(--sh)),#000 calc(56% + var(--sh)),transparent calc(68% + var(--sh)));mask-image:linear-gradient(90deg,transparent calc(42% + var(--sh)),#000 calc(56% + var(--sh)),transparent calc(68% + var(--sh)))}
.hb__l--2{filter:blur(calc(var(--blur) * .48));-webkit-mask-image:linear-gradient(90deg,transparent calc(56% + var(--sh)),#000 calc(68% + var(--sh)),transparent calc(80% + var(--sh)));mask-image:linear-gradient(90deg,transparent calc(56% + var(--sh)),#000 calc(68% + var(--sh)),transparent calc(80% + var(--sh)))}
.hb__l--3{filter:blur(calc(var(--blur) * .74));-webkit-mask-image:linear-gradient(90deg,transparent calc(68% + var(--sh)),#000 calc(80% + var(--sh)),transparent calc(91% + var(--sh)));mask-image:linear-gradient(90deg,transparent calc(68% + var(--sh)),#000 calc(80% + var(--sh)),transparent calc(91% + var(--sh)))}
.hb__l--4{filter:blur(var(--blur));-webkit-mask-image:linear-gradient(90deg,transparent calc(80% + var(--sh)),#000 calc(91% + var(--sh)));mask-image:linear-gradient(90deg,transparent calc(80% + var(--sh)),#000 calc(91% + var(--sh)))}

/* Safari: composited layers break background-clip:text, and a blended full-screen
   animated grain forces a backdrop repaint every frame → plain layers there */
.is-safari .hb__l{will-change:auto}
.is-safari .grain{mix-blend-mode:normal;opacity:.05}
.is-safari .hb__l--0{-webkit-mask-image:linear-gradient(90deg,#000 calc(42% + var(--sh)),transparent calc(62% + var(--sh)));mask-image:linear-gradient(90deg,#000 calc(42% + var(--sh)),transparent calc(62% + var(--sh)))}
.is-safari .hb__l--2{filter:blur(calc(var(--blur) * .5));-webkit-mask-image:linear-gradient(90deg,transparent calc(42% + var(--sh)),#000 calc(62% + var(--sh)),transparent calc(84% + var(--sh)));mask-image:linear-gradient(90deg,transparent calc(42% + var(--sh)),#000 calc(62% + var(--sh)),transparent calc(84% + var(--sh)))}
.is-safari .hb__l--4{-webkit-mask-image:linear-gradient(90deg,transparent calc(62% + var(--sh)),#000 calc(84% + var(--sh)));mask-image:linear-gradient(90deg,transparent calc(62% + var(--sh)),#000 calc(84% + var(--sh)))}

/* line breaks that only exist on one breakpoint */
@media (min-width: 761px){.br-m{display:none}}
@media (max-width: 760px){.br-d{display:none}}

/* ---------- grain ---------- */
.grain{position:fixed;inset:-220px;pointer-events:none;z-index:200;opacity:.11;mix-blend-mode:overlay;background-size:220px 220px;animation:grain .9s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}17%{transform:translate(-88px,66px)}33%{transform:translate(66px,-110px)}
  50%{transform:translate(-132px,-44px)}67%{transform:translate(110px,88px)}83%{transform:translate(-44px,132px)}100%{transform:translate(0,0)}
}

/* ---------- preloader ---------- */
.pl{position:fixed;inset:0;z-index:150;background:var(--paper)}
.pl__img{position:absolute;inset:0;clip-path:inset(50% 50% 50% 50%);will-change:clip-path}
.pl__img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%}
.pl__seq{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 50%;opacity:0}
.pl.is-descent .pl__img img{visibility:hidden}
.pl.is-descent .pl__seq{opacity:1}
.pl__time{transition:none}
.pl__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;mix-blend-mode:difference}
.pl__mark{width:28px;height:28px}
.pl__time{font-family:"Medeo Mono",monospace;font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- logo (own fixed layer so difference blends with the page) ---------- */
.logo{position:fixed;top:var(--pad);left:var(--pad);z-index:100;display:flex;align-items:center;gap:8px;color:#fff;mix-blend-mode:difference}
.logo__mark{width:28px;height:28px}
.logo__word{font-weight:500;font-size:18px;letter-spacing:-.02em;text-transform:uppercase;line-height:1}

/* ---------- sound switch (own fixed layer → difference blend, like the logo) ---------- */
.snd{position:fixed;z-index:101;top:calc(var(--pad) + 10px - 10px);right:calc(var(--pad) + 81px + 24px - 8px);padding:10px 8px;cursor:pointer;display:flex;align-items:center;gap:6px;color:#fff;mix-blend-mode:difference;font-size:12px;line-height:12px;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.snd__l{display:block;min-width:4.6em;text-align:right}
.snd__t{position:relative;width:24px;height:12px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.snd__t i{position:absolute;left:2px;top:2px;width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.3);transition:transform .5s var(--ease),background .4s}
.snd.is-on .snd__t i{transform:translateX(12px);background:#fff}
.snd:hover .snd__t{background:rgba(255,255,255,.2)}

/* ---------- header (menu pill) ---------- */
.hdr{position:fixed;top:0;right:0;z-index:100;padding:var(--pad);display:flex;pointer-events:none}
.hdr>*{pointer-events:auto}
.pill{display:flex;align-items:center;gap:6px;background:#fff;color:#000;border-radius:99px;padding:8px 12px;font-size:12px;line-height:16px;letter-spacing:-.02em;text-transform:uppercase;transition:background .4s,color .4s}
.pill__dots{position:relative;width:16px;height:16px}
.pill__dots i{position:absolute;width:3px;height:3px;background:currentColor;transition:transform .5s var(--ease)}
.pill__dots i:nth-child(1){left:3px;top:3px}.pill__dots i:nth-child(2){left:10px;top:3px}
.pill__dots i:nth-child(3){left:3px;top:10px}.pill__dots i:nth-child(4){left:10px;top:10px}
.pill:hover .pill__dots i:nth-child(1){transform:translate(3.5px,3.5px)}
.pill:hover .pill__dots i:nth-child(2){transform:translate(-3.5px,3.5px)}
.pill:hover .pill__dots i:nth-child(3){transform:translate(3.5px,-3.5px)}
.pill:hover .pill__dots i:nth-child(4){transform:translate(-3.5px,-3.5px)}
.menu-open .pill{background:var(--accent)}

/* ---------- bottom HUD bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--pad);pointer-events:none;color:#fff}
.bar>*{opacity:.6;transition:opacity .5s}
.bar__l{justify-self:start;font-variant-numeric:tabular-nums;white-space:pre}
.bar__c{justify-self:center;text-align:center;white-space:pre}
.bar__r{justify-self:end;display:flex;gap:8px;align-items:center;pointer-events:auto}
.bar__r:hover{opacity:1}
.bar__arrow{font-size:12px;line-height:1;display:inline-block;animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(3px)}}
.bar.is-hidden>*{opacity:0!important;pointer-events:none}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:95;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:var(--pad);clip-path:inset(0 0 100% 0);visibility:hidden}
.menu__list{display:flex;flex-direction:column;gap:0}
.menu__list a{display:flex;align-items:baseline;gap:calc(24 * var(--px));width:max-content}
.menu__list .mono{opacity:.5}
.menu__t{font-family:"BlurWeb";font-size:calc(80 * var(--px));letter-spacing:-.02em;text-transform:uppercase;line-height:.88;transition:filter .5s,opacity .5s}
.menu__list:hover .menu__t{filter:blur(4px);opacity:.35}
.menu__list a:hover .menu__t{filter:none;opacity:1}
.menu__foot{position:absolute;left:var(--pad);bottom:var(--pad);opacity:.5}

/* ---------- buttons ---------- */
.link{font-size:12px;letter-spacing:-.02em;text-transform:uppercase;text-decoration:underline;text-underline-offset:2px}
.dot{width:4px;height:4px;background:#fff;display:block}
.btn{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 8px 4px 12px;border-radius:99px;background:var(--accent);color:#000;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;transition:background-color .45s var(--ease)}
.btn__t{display:block;height:16px;line-height:16px;overflow:hidden}
.btn__t>span{display:block;color:#000;text-shadow:0 16px 0 #000;transition:transform .55s var(--ease)}
.btn svg{width:16px;height:16px;transition:transform .55s var(--ease)}
.btn:hover{background:#ff6b52}
.btn:hover .btn__t>span{transform:translateY(-16px)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn--wide{width:100%;justify-content:center}

/* ---------- shared stage ---------- */
.scene{position:relative;height:720vh;z-index:1}
.sec{position:relative;height:360vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* each scene starts 200vh before the previous one ends: the previous stage stays pinned underneath
   for the first 100vh of the next one, so the next one opens over a still frame */
#capsule{z-index:2;margin-top:-200vh;margin-top:-200svh}
#edge{z-index:3;margin-top:-200vh;margin-top:-200svh}
#turn{z-index:4;margin-top:-200vh;margin-top:-200svh;height:300vh}

.media,.sky,.hud,.pic,.shade,.black,.sun,.flash{position:absolute;inset:0}
.media__seq,.media__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

.sky{background:var(--ink);opacity:0}
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.sky__glow{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,22,65,0) 0%,var(--navy) 100%)}

/* ---------- hero ---------- */
.hero{position:absolute;left:50%;top:calc(160 / 900 * 100%);transform:translateX(-50%);width:min(calc(828 * var(--px)),92vw);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__tag{display:flex;gap:10px;align-items:center;font-size:12px;white-space:nowrap}
.sq{width:8px;height:8px;background:#fff;display:block}
.hero__title{margin-top:calc(24px - .24em);white-space:nowrap;width:max-content}
.hero__sub{margin-top:16px;width:432px;max-width:100%}
.hero__cta{margin-top:40px;display:flex;align-items:center;gap:16px}

/* ---------- HUD (ascent) ---------- */
.hud{pointer-events:none}
.hud__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.phase{position:absolute;inset:0}
.hud__top,.hud__bot{position:absolute;left:50%;translate:-50% 0;white-space:nowrap;width:max-content;margin:0;margin-top:-.24em}
.hud__top{top:calc(160 / 900 * 100%)}
.hud__bot{top:calc(676 / 900 * 100%)}
.hud__lab{position:absolute;top:50%;translate:-50% -50%;width:max-content;font-family:"Medeo Pixel",monospace;font-size:16px;letter-spacing:-.06em;line-height:1.2;text-transform:uppercase}
.hud__lab--l{left:calc(50% - 450 * var(--px))}
.hud__lab--r{left:calc(50% + 450 * var(--px))}

/* ---------- pictures ---------- */
.pic__in{position:absolute;inset:0;will-change:transform}
.pic__in img,.pic__in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pic__in video{opacity:0;transition:opacity .8s}
.pic__in video.is-on{opacity:1}
.pic--capsule{clip-path:inset(50% 50% 50% 50%);will-change:clip-path}
.pic--capsule .pic__in img,.pic--capsule .pic__in video{object-position:30% 50%}
.pic--edge .pic__in img,.pic--edge .pic__in video{object-position:30% 50%}
.pic--turn{opacity:0}
.pic--turn .pic__in img,.pic--turn .pic__in video{object-position:50% 40%}
.shade--capsule{opacity:0;background:linear-gradient(90deg,rgba(0,0,7,0) 40%,rgba(0,0,7,.35) 100%),linear-gradient(0deg,rgba(0,0,7,.55) 0%,rgba(0,0,7,0) 25%)}
.black{background:var(--ink);opacity:0;pointer-events:none}

/* ---------- capsule ---------- */
.cap{position:absolute;left:calc(50% + (688 - 720) * var(--px));top:calc(278 / 900 * 100%);width:calc(628 * var(--px));display:flex;flex-direction:column;align-items:center;text-align:center}
.cap__body{margin-top:16px;width:506px;max-width:100%}
.cap__rows{margin-top:32px;width:420px;max-width:100%}

/* rows (capsule specs + dates) */
.rows{display:flex;flex-direction:column;gap:12px}
.rows__line{height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 20%,rgba(255,255,255,.55) 80%,rgba(255,255,255,0));transform-origin:left center}
.rows__row{display:flex;justify-content:space-between;align-items:center;padding:0 44px;text-transform:uppercase;line-height:1.2}
.rows__k{font-family:"BlurWeb";font-size:16px;letter-spacing:-.06em;min-width:90px;text-align:left}
.rows__v{font-family:"Medeo Pixel";font-size:12px;letter-spacing:-.06em}

/* ---------- edge ---------- */
.pic--edge{--r:-35%;-webkit-mask-image:radial-gradient(circle at 89% 70%,#000 var(--r),transparent calc(var(--r) + 35%));mask-image:radial-gradient(circle at 89% 70%,#000 var(--r),transparent calc(var(--r) + 35%))}
.sun{background:radial-gradient(circle at 89% 70%,rgba(255,110,40,.85) 0%,rgba(255,83,55,.25) 12%,rgba(255,83,55,0) 32%);mix-blend-mode:screen;opacity:0}
.quote{position:absolute;left:50%;top:calc(365 / 900 * 100%);translate:-50% 0;width:calc(742 * var(--px));text-align:center;display:flex;flex-direction:column;gap:24px;align-items:center}
.quote__t{width:calc(100% + .9em)}

/* ---------- your turn ---------- */
.flash{z-index:2;background:#dfe8ff;opacity:0}
.shade--turn{z-index:2;opacity:0;background:linear-gradient(to top,#000007 0%,rgba(0,0,7,.88) 12%,rgba(0,0,7,.45) 26%,rgba(0,0,7,0) 42%)}
.turn{position:absolute;inset:0;z-index:3}
.turn__l{position:absolute;left:calc(44 * var(--px));top:calc(381 / 900 * 100%);width:calc(368 * var(--px));text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.turn__title{--h1:calc(52 * var(--px));width:calc(326 * var(--px) + .9em)}
.turn__rows{position:absolute;right:var(--pad);top:calc(386 / 900 * 100%);width:368px}
.turn__rows .rows__row{padding:0 80px;justify-content:flex-start;gap:44px}
.turn__rows .rows__k{min-width:90px}
.rows__row.is-out .rows__k{text-decoration:line-through;text-decoration-thickness:1px;opacity:.55}
.rows__row.is-out .rows__v{opacity:.55}

/* ---------- footer / reserve (Figma 19:1261) ---------- */
.foot{position:relative;z-index:5;min-height:100vh;min-height:100svh;background:#040305;overflow:hidden;display:flex;flex-direction:column;padding:96px var(--pad) 0}
/* planet loop: 16:9 box, 108% wide, placed so the top of the curve sits at y≈114 (Figma);
   its lower part dissolves into the background */
.foot__bg{position:absolute;inset:0;pointer-events:none}
.foot__bg-in{position:absolute;left:-4%;right:-4%;top:calc(114 * var(--px) - 20.53vw);aspect-ratio:16/9;will-change:transform}
/* fade to the background with an overlay, not a mask (a mask over a playing video is costly in Safari) */
.foot__bg-in::after{content:"";position:absolute;inset:-2px;background:linear-gradient(to bottom,rgba(4,3,5,0) 50%,#040305 96%)}
.foot__bg img,.foot__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* darkening from below + behind the form, so the copy reads over the bright cloud deck */
.foot__shade{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 48% at 24% 42%,rgba(4,3,5,.7) 0%,rgba(4,3,5,.4) 55%,rgba(4,3,5,0) 100%),
    linear-gradient(to top,#040305 0%,#040305 22%,rgba(4,3,5,.86) 40%,rgba(4,3,5,.6) 58%,rgba(4,3,5,.26) 76%,rgba(4,3,5,0) 88%)}
/* over the planet the headline stays plain white (difference would invert on the clouds) */
.foot .hb{mix-blend-mode:normal}
.foot__bg video{opacity:0;transition:opacity 1s}
.foot__bg video.is-on{opacity:1}
/* centred a little below the middle of the free space, as in Figma (title at y 251 of 900) */
.foot__form{position:relative;width:calc(681 * var(--px));max-width:100%;margin:auto 0;padding:calc(48px + 82 * var(--px)) 0 48px}
/* single-line headlines size to their text: the reveal mask never cuts the last word */
.foot__title{white-space:nowrap;width:max-content}
.foot__sub{margin-top:16px}
.form{margin-top:44px;display:grid;grid-template-columns:331fr 310fr;column-gap:40px;row-gap:40px}
.field{display:flex;flex-direction:column;justify-content:space-between;height:48px;border-bottom:1px solid rgba(255,255,255,.45);position:relative}
.field::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field__l{font-size:16px;letter-spacing:-.02em;color:rgba(255,255,255,.4);line-height:1}
.field input{font:inherit;font-size:16px;letter-spacing:-.02em;color:#fff;background:none;border:0;outline:0;padding:0 0 6px;line-height:1;border-radius:0;-webkit-appearance:none;appearance:none}
.field input::placeholder{color:rgba(255,255,255,.18)}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.field--btn{border:0;justify-content:flex-end}
.field--btn::after{display:none}
.form__ok{grid-column:1/-1;color:var(--accent);min-height:1em}
.field.is-err{border-color:var(--accent)}

/* the wordmark sits in the flow under the form → the form can never touch it */
.foot__bottom{position:relative;flex:none;display:flex;flex-direction:column}
.foot__copy{position:absolute;right:0;top:0;color:rgba(255,255,255,.4)}
.foot__big{align-self:center;flex:none;margin-bottom:calc(-112 * var(--px));display:flex;align-items:center;gap:calc(117 * var(--px));color:rgba(255,255,255,.08);pointer-events:none}
.foot__mark{width:calc(409 * var(--px));height:calc(409 * var(--px));color:rgba(255,255,255,.1);flex:none}
.foot__word{font-weight:500;font-size:calc(263 * var(--px));letter-spacing:-.02em;line-height:1;text-transform:uppercase;white-space:nowrap}

/* ---------- mobile (Figma 390 frames) ---------- */
@media (max-width: 760px){
  :root{--px:1px;--pad:16px;--h1:42px;--body:14px;--small:10px}
  .snd{right:calc(var(--pad) + 81px + 16px - 8px);top:calc(var(--pad) + 10px - 10px)}
  .bar{grid-template-columns:1fr 1fr}
  .bar__c{display:none}
  .bar__arrow{font-size:12px}
  .menu__t{font-size:40px}

  /* hero */
  .hero{top:144px;width:358px;max-width:calc(100vw - 32px)}
  .hero__title{white-space:normal;width:calc(100% + .9em)}
  .hero__sub{width:100%}
  .hero__cta{margin-top:32px}

  /* HUD: ring geometry at the Figma mobile scale (306 / 366), no outer ring */
  .hud__svg{inset:auto;left:50%;top:50%;width:1361px;height:850px;translate:-50% -50%}
  .ring--3{display:none}
  .hud__top,.hud__bot{width:calc(358px + .9em);max-width:calc(100vw - 32px + .9em);white-space:normal;text-align:center}
  .hud__top{top:calc(121 / 844 * 100%)}
  .hud__bot{top:calc(639 / 844 * 100%)}
  .hud__lab{font-size:14px;left:50%!important}
  .hud__lab--l{top:calc(50% - 144px)}
  .hud__lab--r{top:calc(50% + 145px)}

  /* capsule */
  .pic--capsule .pic__in img,.pic--capsule .pic__in video{object-position:50% 100%}
  .shade--capsule{background:linear-gradient(to top,#000007 0%,rgba(0,0,7,0) 32.65%),rgba(0,0,7,.18)}
  .cap{left:50%;top:50%;width:358px;max-width:calc(100vw - 32px);translate:-50% -50%}
  .cap__title{width:calc(100% + .9em)}
  .cap__body,.cap__rows{width:100%}
  .rows__row{padding:0 16px}

  /* edge */
  .pic--edge .pic__in img,.pic--edge .pic__in video{object-position:50% 100%}
  .pic--edge .pic__in::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,7,0) 81.5%,#000007 100%)}
  .quote{top:50%;width:358px;max-width:calc(100vw - 32px);translate:-50% -50%;gap:16px}

  /* your turn */
  .pic--turn .pic__in img,.pic--turn .pic__in video{object-position:50% 50%}
  .shade--turn{background:linear-gradient(to bottom,rgba(0,0,7,0) 72%,#000007 95.4%)}
  .turn__l{left:16px;right:16px;width:auto;top:116px;gap:20px}
  .turn__title{--h1:42px;width:calc(100% + .9em)}
  .turn__rows{left:16px;right:16px;width:auto;top:calc(623 / 844 * 100%)}
  .turn__rows .rows__row{padding:0 16px;justify-content:space-between}

  /* footer */
  .foot{padding:72px 16px 0}
  .foot__bg{inset:auto;left:50%;top:-82px;width:958px;height:539px;translate:-50% 0}
  .foot__bg-in{inset:0;top:0;aspect-ratio:auto}
  .foot__shade{background:linear-gradient(to top,#040305 0%,#040305 40%,rgba(4,3,5,.88) 58%,rgba(4,3,5,.72) 72%,rgba(4,3,5,.38) 84%,rgba(4,3,5,0) 92%)}
  .foot__form{width:100%;padding:40px 0 48px}
  .foot__title{white-space:normal;width:calc(100% + .9em)}
  .form{grid-template-columns:1fr;row-gap:40px}
  .form .field:nth-child(1){order:1}.form .field:nth-child(3){order:2}.form .field:nth-child(2){order:3}.form .field--btn{order:4;height:auto}
  .form__ok{order:5}
  .foot__bottom{align-items:center}
  .foot__copy{position:static;margin-bottom:12px;text-align:center;font-size:10px}
  .foot__big{margin-bottom:-30px;gap:32px}
  .foot__mark{width:111px;height:111px}.foot__word{font-size:71px}
}

@media (prefers-reduced-motion: reduce){
  .grain,.bar__arrow{animation:none}
}