/* liximiya v4: black stage, one blue light, grotesk + serif italic */
@font-face { font-family: 'Onest'; src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; src: url('/assets/fonts/onest-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; src: url('/assets/fonts/literata-cyrillic.woff2') format('woff2'); font-weight: 200 400; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Literata'; src: url('/assets/fonts/literata-latin.woff2') format('woff2'); font-weight: 200 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 101%; ascent-override: 104%; descent-override: 28%; }


:root {
  --bg: #000;
  --fg: #f1f0ea;
  --mute: #8e8d88;
  --dim: #2b2b29;
  --line: rgba(255, 255, 255, .13);
  --blue: #1d6cff;
  --blue-deep: #0a33d8;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --pad: clamp(20px, 3.4vw, 52px);
  --sans: 'Onest', 'Onest Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --vh: 1vh;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, blockquote, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.03em; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 400; padding: 10px 16px; background: var(--fg); color: #000; border-radius: 999px; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }
.wrap { padding-inline: var(--pad); max-width: 1720px; margin-inline: auto; }
.label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- type ---------- */
.display { font-size: clamp(54px, 9.8vw, 158px); font-weight: 500; letter-spacing: -.058em; line-height: .92; }
.display em { font-weight: 300; letter-spacing: -.04em; padding-right: .04em; }

/* rolling label: a second copy slides in from below */
.roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.2; height: 1.2em; }
.roll__in { display: block; position: relative; transition: transform .7s var(--ease); }
.roll__in::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; }
a:hover .roll__in, button:hover .roll__in, a:focus-visible .roll__in, button:focus-visible .roll__in { transform: translateY(-100%); }

/* word reveal for headings */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.rw__in { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 70ms); }
.is-in .rw__in, .rw.is-in .rw__in { transform: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.btn .ico { width: 14px; height: 14px; flex: none; transition: transform .6s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--solid { background: var(--fg); color: #000; }
.btn--solid:hover { background: #fff; }
.btn--ghost { border: 1px solid rgba(255, 255, 255, .24); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.1em; }
.ulink { display: inline-flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .3s; }
.ulink:hover { border-color: var(--fg); }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 80; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 24px var(--pad); font-size: 14px; font-weight: 500; mix-blend-mode: difference; color: #fff; transition: transform .7s var(--ease); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { justify-self: start; font-size: 17px; font-weight: 600; letter-spacing: -.04em; }
.nav__links { display: flex; gap: 34px; }
.nav__a { position: relative; color: rgba(255, 255, 255, .78); transition: color .3s; }
.nav__a:hover, .nav__a.is-on { color: #fff; }
.nav__a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav__a.is-on::after { transform: scaleX(1); transform-origin: left; }
.lang { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .04em; }
.lang__a { color: rgba(255, 255, 255, .45); transition: color .3s; padding: 4px 0; }
.lang__a:hover, .lang__a.is-on { color: #fff; }
.lang__sep { color: rgba(255, 255, 255, .3); }
.nav__menu { display: none; justify-self: end; font-size: 14px; font-weight: 500; padding: 6px 0; }

.menu { position: fixed; inset: 0; z-index: 79; background: #000; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--pad) 32px; }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; gap: 4px; }
.menu__a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(48px, 15vw, 96px); font-weight: 500; letter-spacing: -.055em; line-height: 1.02; opacity: 0; transform: translateY(40px); transition: opacity .6s var(--ease) calc(var(--i) * 70ms + 80ms), transform .9s var(--ease) calc(var(--i) * 70ms + 80ms); }
.menu__n { font-size: 13px; letter-spacing: 0; color: var(--mute); font-weight: 400; transform: translateY(-1.6em); }
.menu.is-open .menu__a { opacity: 1; transform: none; }
.menu__foot { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; color: var(--mute); font-size: 15px; }
.menu__foot .lang { margin-right: auto; font-size: 15px; }

/* ---------- curtain (page transitions) + cursor ---------- */
.curtain { position: fixed; inset: 0; z-index: 300; display: flex; pointer-events: none; }
.curtain i { flex: 1; height: 100%; background: linear-gradient(180deg, #000 0%, #000 62%, #071c6e 88%, #1d6cff 100%); transform: scaleY(0); transform-origin: top; transition: transform .75s var(--ease-io) calc(var(--i) * 38ms); margin-right: -1px; }
.pt-in .curtain i { transform: scaleY(1); transition: none; }
.is-leaving .curtain { pointer-events: auto; }
.is-leaving .curtain i { transform: scaleY(1); transform-origin: bottom; transition: transform .6s var(--ease-io) calc(var(--i) * 32ms); }

.cursor { position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: transform .45s var(--ease), opacity .3s; }
.cursor__label { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; background: var(--fg); color: #000; display: grid; place-items: center; font-size: 13px; font-weight: 500; letter-spacing: -.01em; transform: scale(0); transition: transform .5s var(--ease); }
.cursor.is-link .cursor__dot { transform: scale(3.2); }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-label .cursor__label { transform: scale(1); }
.cursor.is-hidden { opacity: 0; }
.cursor.is-down .cursor__dot { transform: scale(.6); }

/* ---------- preloader: counter + a blue beam that splits the screen open ---------- */
.pre { position: fixed; inset: 0; z-index: 290; display: none; pointer-events: auto; }
.has-pre .pre, .pre.is-open { display: block; }
.pre__half { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: #000; transition: transform 1.35s var(--ease-io); will-change: transform; }
.pre__half--top { top: 0; }
.pre__half--bot { bottom: 0; }
.pre.is-open .pre__half--top { box-shadow: 0 1px 0 rgba(150, 190, 255, .95), 0 18px 90px 6px rgba(29, 108, 255, .55); }
.pre.is-open .pre__half--bot { box-shadow: 0 -1px 0 rgba(150, 190, 255, .95), 0 -18px 90px 6px rgba(29, 108, 255, .55); }
.pre__beam { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 1; }
.pre__beam i { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent 0%, #1d6cff 18%, #dfe9ff 50%, #1d6cff 82%, transparent 100%); transform: scaleX(var(--k, 0)); box-shadow: 0 0 14px 1px rgba(29, 108, 255, .9), 0 0 60px 6px rgba(29, 108, 255, .35); }
.pre__beam::after { content: ''; position: absolute; left: 10%; right: 10%; top: -60px; height: 120px; background: radial-gradient(50% 50% at 50% 50%, rgba(29, 108, 255, .28), transparent 70%); transform: scaleX(var(--k, 0)); opacity: .8; }
.pre.is-full .pre__beam i { animation: beamFlare .5s var(--ease) both; }
.pre.is-open .pre__beam { opacity: 0; transition: opacity .7s .15s; }
@keyframes beamFlare { 0% { filter: none; } 40% { filter: brightness(1.8); transform: scaleY(2.2); } 100% { filter: brightness(1.3); transform: scaleY(1); } }
.pre__num { position: absolute; z-index: 2; left: var(--pad); bottom: 22px; font-size: clamp(72px, 13vw, 200px); font-weight: 600; letter-spacing: -.065em; line-height: .78; font-variant-numeric: tabular-nums; transition: opacity .5s, transform 1s var(--ease); }
.pre__name { position: absolute; z-index: 2; right: var(--pad); bottom: 26px; font-size: 14px; font-weight: 500; color: var(--mute); transition: opacity .5s; }
.pre.is-open { pointer-events: none; }
.pre.is-open .pre__half--top { transform: translateY(-101%); }
.pre.is-open .pre__half--bot { transform: translateY(101%); }
.pre.is-open .pre__num { opacity: 0; transform: translateY(40%); }
.pre.is-open .pre__name { opacity: 0; }

/* ---------- hero ---------- */
.hero { position: relative; height: 190vh; }
.hero__pin { position: sticky; top: 0; height: 100vh; height: calc(var(--vh) * 100); overflow: hidden; --p: 0; isolation: isolate; background: radial-gradient(22% 20% at 50% 50%, rgba(29, 108, 255, .13), transparent 72%); }
.hero__light { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; display: flex; gap: 2px; align-items: flex-end; z-index: 0; opacity: calc(1 - var(--p) * 1.15); pointer-events: none; transform-origin: 50% 100%; }
.js .hero .hero__light { scale: 1 0; transition: scale 2.2s var(--ease) .25s; }
.js .hero.is-on .hero__light { scale: 1 1; }
.hero__pin::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 46%, transparent 55%, rgba(0, 0, 0, .7) 100%); }
.hero__pin::after { content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.hero__light i { flex: 1; height: calc(var(--h, .4) * 100%); background: linear-gradient(0deg, rgba(29, 108, 255, calc(.62 * var(--glow, .6))) 0%, rgba(10, 51, 216, calc(.26 * var(--glow, .6))) 46%, rgba(10, 51, 216, 0) 100%); transform-origin: bottom; transform: scaleY(calc((1 + var(--p) * 1.1) * var(--lift, 1))); transition: height 1.2s var(--ease); }
.hero .hero__light { gap: 1px; height: 70%; z-index: 1; }
.hero__lens { position: absolute; left: 0; top: 0; z-index: 0; width: 84vmin; height: 84vmin; margin: -42vmin 0 0 -42vmin; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(80, 140, 255, .5), rgba(29, 108, 255, .2) 38%, rgba(10, 51, 216, .05) 70%, transparent); will-change: transform, opacity; }
.hero__lens::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14vmin; height: 14vmin; margin: -7vmin 0 0 -7vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 200, 255, .35), transparent); }
/* the preloader beam settles into the floor line the columns rise from */
.hero__beam { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3; pointer-events: none; --bx: 50%; background: radial-gradient(28% 100% at var(--bx) 50%, #dfe9ff, rgba(29, 108, 255, .9) 40%, rgba(29, 108, 255, .35) 100%); box-shadow: 0 0 16px 1px rgba(29, 108, 255, .7), 0 -10px 60px 4px rgba(29, 108, 255, .3); opacity: calc(1 - var(--p) * 1.6); }
.js .hero__beam { transition: top 1.7s var(--ease-io) .1s; }
.js .hero.is-on .hero__beam, .no-js .hero__beam, .reduce .hero__beam { top: calc(100% - 1px); }
.hero__word { position: absolute; left: 0; right: 0; top: 50%; z-index: 5; text-align: center; font-size: 23vw; font-weight: 600; letter-spacing: -.072em; line-height: .76; color: #fff; mix-blend-mode: difference; pointer-events: none; transform: translateY(-58%); white-space: nowrap; padding-right: .07em; }
.hero__chars { display: inline-block; padding: .04em .02em .14em; margin-bottom: -.1em; clip-path: inset(-.2em -50vw 0 -50vw); }
.hero.is-ready .hero__chars { clip-path: none; }
.hero__word .ch { display: inline-block; will-change: transform; }
.no-js .hero__word .ch, .reduce .hero__word .ch { transform: translate3d(calc((var(--i) - 3.5) * var(--p) * 7vw), calc(var(--p) * -6vh * (1 + var(--i) * .15)), 0); opacity: calc(1 - var(--p) * 1.1); }
.hero__word .ch { animation: chIn 1.3s var(--ease) both; animation-delay: calc(var(--i) * 55ms + var(--intro, 300ms)); animation-play-state: var(--play, running); }
@keyframes chIn { from { translate: 0 108%; rotate: x 70deg; } to { translate: 0 0; rotate: x 0deg; } }
.has-pre .hero__word .ch, .has-pre .hero__row > * { --play: paused; }
.hero__row { position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font-size: 15px; opacity: calc(1 - var(--p) * 4); }
.hero__row > * { animation: fadeUp 1.2s var(--ease) both; animation-delay: calc(var(--intro, 300ms) + 500ms); animation-play-state: var(--play, running); }
@keyframes fadeUp { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
.hero__role { font-size: 15px; color: var(--fg); }
.hero__role em { font-size: 1.32em; letter-spacing: -.02em; }

/* ---------- statement ---------- */
.statement { padding: clamp(80px, 13vh, 170px) 0 clamp(60px, 10vh, 120px); }
.statement__text { font-size: clamp(38px, 6.6vw, 104px); font-weight: 500; letter-spacing: -.055em; line-height: .98; max-width: 12.8em; }
.statement__text em { letter-spacing: -.035em; }
[data-scrub].is-scrub .w { color: #2d2d2b; transition: color .5s; }
[data-scrub].is-scrub .w.is-lit { color: var(--fg); }

/* ---------- stack: two full-bleed marquee rows ---------- */
.stack { position: relative; padding: 0 0 clamp(64px, 11vh, 130px); overflow: hidden; }
.stack__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: clamp(12px, 2vh, 20px); }
.stack__rows { display: grid; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(12px, 2vh, 22px) 0; }
.mrow { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.mrow__track { display: flex; align-items: center; flex: none; }
.mrow__item { display: inline-flex; align-items: center; transition: color .4s; }
.mrow--core .mrow__item { font-size: clamp(32px, 5.4vw, 92px); font-weight: 600; letter-spacing: -.055em; line-height: 1; padding-bottom: .06em; color: var(--fg); }
.mrow--core .mrow__item::after { content: ''; flex: none; width: .15em; height: .15em; margin: 0 .38em 0 .44em; border-radius: 50%; background: var(--blue); box-shadow: 0 0 .25em .04em rgba(29, 108, 255, .9), 0 0 1em .1em rgba(29, 108, 255, .35); translate: 0 .06em; }
.mrow--tools .mrow__item { font-family: var(--serif); font-style: italic; font-weight: 200; font-size: clamp(26px, 3.8vw, 64px); letter-spacing: -.03em; line-height: 1.2; color: var(--mute); }
.mrow--tools .mrow__item::after { content: '/'; font-family: var(--sans); font-style: normal; font-weight: 200; font-size: .62em; color: #3c3c3a; margin: 0 .5em 0 .45em; }
.mrow__item:hover { color: #fff; }
/* static fallback: no JS or reduced motion */
.no-js .mrow, .reduce .mrow { width: auto; flex-wrap: wrap; white-space: normal; padding-inline: var(--pad); transform: none !important; }
.no-js .mrow__track, .reduce .mrow__track { flex-wrap: wrap; flex: 1 1 auto; row-gap: .1em; }
.no-js .mrow__dup, .reduce .mrow__dup { display: none; }
.no-js .mrow--core .mrow__item, .reduce .mrow--core .mrow__item { font-size: clamp(28px, 4vw, 64px); }
.no-js .mrow--tools .mrow__item, .reduce .mrow--tools .mrow__item { font-size: clamp(22px, 3vw, 48px); }
.no-js .mrow__track .mrow__item:last-child::after, .reduce .mrow__track .mrow__item:last-child::after { display: none; }

/* ---------- work stage ---------- */
.work { position: relative; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: clamp(24px, 4vh, 48px); }
.work__total { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; padding-bottom: .8em; }
.stage { position: relative; --stage-c: var(--blue); }
.stage__pin { position: relative; }
.stage__floor, .stage__index, .stage__progress { display: none; }

/* flow layout (no JS / reduced motion): one scene per screen, stacked */
.scene { position: relative; min-height: 100vh; min-height: calc(var(--vh) * 100); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto; gap: 24px; padding: 56px var(--pad); border-top: 1px solid var(--line); overflow: hidden; }
.scene__count { grid-column: 1 / -1; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.scene__count b { color: var(--fg); font-weight: 500; }
.scene__name { grid-column: 1 / -1; font-size: min(14.5vw, calc(168vw / var(--len))); font-weight: 600; letter-spacing: -.06em; line-height: .86; color: #fff; white-space: nowrap; text-align: center; }
.scene__name a { display: inline-block; overflow: hidden; padding: .02em .06em .12em .02em; vertical-align: top; }
.scene__chars { display: inline-block; }
.scene__chars .ch { display: inline-block; }
.scene__device { grid-column: 1 / -1; justify-self: center; position: relative; width: min(60vw, 900px); display: block; perspective: 1600px; }
.scene__info { max-width: 440px; align-self: end; }
.scene__type { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.scene__desc { font-size: 15px; line-height: 1.55; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scene__cta { display: flex; gap: 12px; align-items: center; align-self: end; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
.scene__status { font-size: 14px; color: var(--mute); padding: 0 8px; }

.frame { position: relative; border-radius: 12px; background: #0c0c0c; border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9), 0 30px 140px -40px rgba(29, 108, 255, .42); transform-style: preserve-3d; }
.frame__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); position: relative; }
.frame__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.frame__bar span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--mute); letter-spacing: .01em; }
.frame__screen { position: relative; aspect-ratio: 840 / 400; overflow: hidden; background: #111; }
.frame__screen img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.frame__empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 600; color: var(--fg); letter-spacing: -.04em; }
.scene__reflect { position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 30%; overflow: hidden; transform: scaleY(-1); opacity: .2; -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 75%); mask-image: linear-gradient(0deg, #000 0%, transparent 75%); pointer-events: none; border-radius: 12px 12px 0 0; }
.scene__reflect img { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 840 / 400; object-fit: cover; object-position: top; }
.stage.is-pinned .scene__reflect { opacity: 0; transition: opacity .8s; }
.stage.is-pinned .scene.is-active .scene__reflect { opacity: .2; transition-delay: .6s; }

/* pinned mode (JS + motion) */
.stage.is-pinned .stage__pin { position: sticky; top: 0; height: 100vh; height: calc(var(--vh) * 100); overflow: hidden; --mx: 0; --my: 0; --sv: 0; }
.stage.is-pinned .stage__floor { display: block; position: absolute; left: -10%; right: -10%; bottom: 0; height: 48%; background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--stage-c) 46%, transparent) 0%, color-mix(in srgb, var(--stage-c) 14%, transparent) 42%, transparent 72%), radial-gradient(40% 40% at 50% 100%, rgba(29, 108, 255, .35), transparent 70%); pointer-events: none; }
.stage.is-pinned .stage__floor::before { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stage-c) 50%, transparent) 30%, color-mix(in srgb, var(--stage-c) 50%, transparent) 70%, transparent); opacity: .6; }
.stage.is-pinned .scene { position: absolute; inset: 0; min-height: 0; display: block; padding: 0; border: 0; overflow: visible; pointer-events: none; }
.stage.is-pinned .scene.is-active { pointer-events: auto; }
.stage.is-pinned .scene__count { position: absolute; left: var(--pad); top: 104px; opacity: 0; transition: opacity .6s; }
.stage.is-pinned .scene.is-active .scene__count { opacity: 1; transition-delay: .2s; }
.stage.is-pinned .scene__name { position: absolute; left: 0; right: 0; top: 13.5%; z-index: 1; }
.stage.is-pinned .scene__name .ch { transform: translateY(132%); opacity: 0; transition: transform 1s var(--ease), opacity .5s; transition-delay: calc(var(--i) * 26ms); }
.stage.is-pinned .scene.is-active .scene__name .ch { transform: none; opacity: 1; transition-delay: calc(var(--i) * 26ms + 120ms); }
.stage.is-pinned .scene.is-past .scene__name .ch { transform: translateY(-132%); }
.stage.is-pinned .scene__device { position: absolute; left: 50%; top: 53%; width: min(58vw, 860px, 96vh); margin: 0; z-index: 2; opacity: 0; transform: translate(-50%, -42%) translateY(14vh) rotateX(22deg) scale(.92); transition: opacity .7s, transform 1.2s var(--ease); }
.stage.is-pinned .scene.is-active .scene__device { opacity: 1; transform: translate(-50%, -42%); transition-delay: .08s; }
.stage.is-pinned .scene.is-past .scene__device { transform: translate(-50%, -42%) translateY(-12vh) rotateX(-14deg) scale(.94); }
/* Keep screenshots on a flat plane so small text stays legible. */
.stage.is-pinned .scene__device .frame { transform: none; }
.stage.is-pinned .frame__screen img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-io); }
.stage.is-pinned .scene.is-active .frame__screen img { clip-path: inset(0 0 0 0); transform: none; transition-delay: .18s; }
.stage.is-pinned .scene__info { position: absolute; left: var(--pad); bottom: 64px; z-index: 3; }
.stage.is-pinned .scene__cta { position: absolute; right: var(--pad); bottom: 64px; z-index: 3; }
.stage.is-pinned .scene__info, .stage.is-pinned .scene__cta { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .9s var(--ease); }
.stage.is-pinned .scene.is-active .scene__info, .stage.is-pinned .scene.is-active .scene__cta { opacity: 1; transform: none; transition-delay: .3s; }
.stage.is-pinned .stage__index { display: flex; flex-direction: column; gap: 2px; position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 4; font-size: 12px; }
.stage__index button { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; color: rgba(255, 255, 255, .32); transition: color .4s, transform .6s var(--ease); text-align: left; }
.stage__index button span { font-variant-numeric: tabular-nums; font-size: 11px; }
.stage__index button:hover { color: var(--fg); }
.stage__index button.is-on { color: var(--fg); transform: translateX(-8px); }
.stage.is-pinned .stage__progress { display: block; position: absolute; left: var(--pad); right: var(--pad); bottom: 30px; height: 1px; background: var(--line); z-index: 3; }
.stage__progress i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--k, 0)); }

/* ---------- archive ---------- */
.archive { padding: clamp(120px, 20vh, 240px) 0 clamp(80px, 12vh, 160px); position: relative; }
.archive__list { margin-top: clamp(40px, 7vh, 72px); border-top: 1px solid var(--line); }
.arow__a { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 300px) 170px; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); position: relative; transition: opacity .5s; }
.arow__n { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.arow__name { font-size: clamp(34px, 5.4vw, 86px); font-weight: 500; letter-spacing: -.055em; line-height: 1; transition: transform .8s var(--ease), color .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .06em; }
.arow__type { font-size: 15px; color: var(--mute); }
.arow__meta { font-size: 14px; color: var(--mute); text-align: right; }
.arow__thumb { display: none; }
.archive__list:hover .arow__a { opacity: .3; }
.archive__list .arow__a:hover, .archive__list .arow__a:focus-visible { opacity: 1; }
.arow__a:hover .arow__name, .arow__a:focus-visible .arow__name { transform: translateX(1.4vw); color: var(--fg); }
.peek { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(280px, 26vw, 420px); pointer-events: none; display: none; }
.has-cursor .peek { display: block; }
.peek__in { aspect-ratio: 840 / 400; border-radius: 10px; overflow: hidden; transform: scale(.6); opacity: 0; transition: transform .6s var(--ease), opacity .35s; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.peek.is-on .peek__in { transform: scale(1); opacity: 1; }
.peek__in img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- reviews ---------- */
.reviews { padding: clamp(110px, 18vh, 220px) 0; }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.quotes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); margin-top: clamp(48px, 9vh, 96px); column-gap: 24px; }
.quotes__mark { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(120px, 16vw, 260px); line-height: .7; color: var(--blue); grid-row: 1 / 3; }
.quotes__track { display: grid; }
.quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.quote.is-on { opacity: 1; visibility: visible; transition: opacity .5s; }
.quote__text { font-size: clamp(26px, 3.4vw, 52px); font-weight: 400; letter-spacing: -.038em; line-height: 1.12; max-width: 21em; text-wrap: pretty; }
.quote .qw { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s, transform .9s var(--ease); transition-delay: calc(var(--i) * 14ms); }
.quote.is-on .qw { opacity: 1; transform: none; }
.no-js .quote .qw, .quote.is-static .qw { opacity: 1; transform: none; }
.quote__by { margin-top: 36px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.quote__by b { font-weight: 500; }
.quote__by span { color: var(--mute); }
.quotes__nav { grid-column: 2; display: flex; align-items: center; gap: 14px; margin-top: 56px; }
.quotes__count { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; min-width: 64px; }
.quotes__count b { color: var(--fg); font-weight: 500; }
.quotes__bar { flex: 1; height: 1px; background: var(--line); position: relative; margin-right: 14px; }
.quotes__bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--k)); transition: transform .9s var(--ease); }
.qbtn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); display: grid; place-items: center; transition: background-color .35s, color .35s, border-color .35s; }
.qbtn .ico { width: 16px; height: 16px; }
.qbtn:hover { background: var(--fg); color: #000; border-color: var(--fg); }
.no-js .quotes__nav { display: none; }
.no-js .quote { position: static; opacity: 1; visibility: visible; grid-area: auto; margin-bottom: 48px; }

/* ---------- contact + footer ---------- */
.contact { position: relative; padding-top: clamp(120px, 22vh, 260px); overflow: hidden; isolation: isolate; }
.contact__light { position: absolute; left: 0; right: 0; bottom: 0; height: 82%; display: flex; gap: 2px; align-items: flex-end; z-index: -1; pointer-events: none; }
.contact__light i { flex: 1; height: calc(var(--h, .5) * 100% * var(--rise, 0)); background: linear-gradient(0deg, rgba(29, 108, 255, .58) 0%, rgba(10, 51, 216, .2) 50%, rgba(10, 51, 216, 0) 100%); transition: height 1.6s var(--ease); transition-delay: calc(var(--i) * 30ms); }
.contact.is-in .contact__light i { --rise: 1; }
.contact__title { font-size: clamp(64px, 13.5vw, 230px); }
.contact__rows { margin-top: clamp(48px, 8vh, 88px); border-top: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 24px; width: 100%; padding: 24px 0; border-bottom: 1px solid var(--line); position: relative; isolation: isolate; text-align: left; transition: color .4s, padding .7s var(--ease); cursor: pointer; }
.crow__fill { position: absolute; inset: 0 calc(var(--pad) * -1); background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.crow__name { font-size: clamp(32px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.crow__name .roll { height: 1.1em; line-height: 1.1; }
.crow__val { font-size: 16px; color: var(--mute); transition: color .4s; }
.crow__ico { width: 22px; height: 22px; transition: transform .6s var(--ease); }
.crow__ico .ico { width: 22px; height: 22px; }
.crow:hover, .crow:focus-visible { color: #000; padding-left: 20px; padding-right: 8px; }
.crow:hover .crow__fill, .crow:focus-visible .crow__fill { transform: scaleY(1); transform-origin: top; }
.crow:hover .crow__val, .crow:focus-visible .crow__val { color: #000; }
.crow:hover .crow__ico { transform: rotate(45deg); }
.crow__toast { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--blue); color: #fff; opacity: 0; transition: opacity .3s; pointer-events: none; }
.crow__toast.is-on { opacity: 1; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: clamp(80px, 14vh, 160px); padding-bottom: 28px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.foot__top { display: inline-flex; gap: 8px; align-items: center; color: #fff; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; }
.modal__box { position: relative; width: min(640px, 100%); max-height: calc(100% - 16px); overflow: auto; background: #0b0b0b; border: 1px solid var(--line); border-radius: 22px; padding: clamp(28px, 4vw, 44px); opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .4s, transform .7s var(--ease); }
.modal.is-open .modal__back { opacity: 1; }
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal__x { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: border-color .3s; }
.modal__x:hover { border-color: var(--fg); }
.modal__x svg { width: 14px; height: 14px; }
.modal__title { font-size: clamp(32px, 4vw, 44px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.modal__sub { color: var(--mute); margin-top: 10px; font-size: 15px; }
.rform { margin-top: 32px; display: grid; gap: 26px; }
.rform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: grid; gap: 6px; }
.field__l { font-size: 13px; color: var(--mute); display: flex; gap: 8px; justify-content: space-between; }
.field__l i { font-style: normal; color: #5b5b58; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); color: var(--fg); font: inherit; font-size: 17px; padding: 10px 0; border-radius: 0; transition: border-color .3s; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--fg); }
.field input::placeholder, .field textarea::placeholder { color: #4d4d4a; }
.field.is-bad input, .field.is-bad textarea { border-color: #ff5a4f; }
.field__err { font-size: 13px; color: #ff7a70; min-height: 1em; }
.stars { display: flex; gap: 6px; }
.stars button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #3b3b39; transition: color .25s, transform .4s var(--ease); }
.stars button svg { width: 26px; height: 26px; fill: currentColor; }
.stars button.is-on { color: var(--fg); }
.stars button:hover { transform: scale(1.12); }
.rform__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rform__note { font-size: 14px; color: #ff7a70; }
.rform.is-busy button[type=submit] { opacity: .6; pointer-events: none; }
.modal__done { text-align: left; display: grid; gap: 22px; justify-items: start; }
.modal__view[hidden] { display: none; }

/* ---------- case page ---------- */
.case__head { padding-top: 112px; }
.case__bar { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.case__back { display: inline-flex; gap: 10px; align-items: center; color: var(--fg); }
.case__back .ico { transition: transform .6s var(--ease); }
.case__back:hover .ico { transform: translateX(-4px); }
.case__num { color: var(--mute); font-variant-numeric: tabular-nums; }
.case__num b { color: var(--fg); font-weight: 500; }
.case__title { margin-top: clamp(40px, 9vh, 110px); overflow: hidden; font-size: clamp(88px, 17vw, 300px); font-weight: 600; letter-spacing: -.062em; line-height: .9; color: var(--fg); white-space: nowrap; padding-bottom: .06em; }
.mq { display: flex; width: max-content; will-change: transform; }
.mq__track { display: flex; align-items: baseline; flex: none; }
.mq__item { padding-right: .22em; }
.mq__sep { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: .3em; letter-spacing: -.02em; color: var(--fg); padding-right: .8em; transform: translateY(-.2em); }
.no-js .mq, .reduce .mq { animation: none; }
.case__title .mq { animation: mq 46s linear infinite; }
.js .case__title .mq { animation: none; }
@keyframes mq { to { transform: translateX(-50%); } }
.case__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(36px, 6vh, 64px); }
.case__meta > div { border-top: 1px solid var(--line); padding-top: 16px; }
.case__meta dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.case__meta dd { font-size: 17px; }
.case__shot { position: relative; margin-top: clamp(56px, 10vh, 120px); perspective: 1600px; }
.case__shot .frame { transform: none; }
.case__shot .frame__screen { aspect-ratio: auto; }
.case__shot .frame__screen img { height: auto; }
.case__shot .frame__screen:has(.frame__empty) { aspect-ratio: 840 / 400; }
.frame--xl .frame__bar { height: 40px; }
.frame--xl .frame__bar i { width: 9px; height: 9px; }
.frame--xl .frame__bar span { font-size: 13px; }
.case__glow { position: absolute; left: 10%; right: 10%; bottom: -12%; height: 40%; background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 70%); filter: blur(30px); z-index: -1; pointer-events: none; }
.case__body { padding-top: clamp(100px, 18vh, 200px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 24px; }
.case__desc { grid-column: 2; font-size: clamp(28px, 3.5vw, 54px); font-weight: 400; letter-spacing: -.04em; line-height: 1.1; max-width: 20em; }
.case__visit { grid-column: 2; justify-self: start; margin-top: 40px; }
.case__review { padding-top: clamp(100px, 16vh, 180px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 24px; }
.case__review .label { padding-top: 1.1em; }
.case__review .quote { opacity: 1; visibility: visible; grid-area: auto; }
.case__review .quote__text { color: var(--fg); }
.next { display: block; position: relative; margin-top: clamp(120px, 20vh, 240px); padding: clamp(80px, 16vh, 180px) var(--pad); border-top: 1px solid var(--line); text-align: center; overflow: hidden; isolation: isolate; }
.next__label { display: block; font-size: 14px; color: var(--mute); }
.next__label b { color: var(--fg); font-weight: 500; }
.next__name { display: block; margin-top: 18px; font-size: min(17vw, calc(165vw / var(--len))); font-weight: 600; letter-spacing: -.062em; line-height: .88; transition: color .5s, letter-spacing .9s var(--ease); white-space: nowrap; }
.next__type { display: block; margin-top: 18px; font-size: 15px; color: var(--mute); }
.next__img { position: absolute; left: 50%; top: 50%; width: min(46vw, 640px); z-index: -1; transform: translate(-50%, -50%) scale(.85) rotate(-3deg); opacity: 0; transition: opacity .5s, transform 1s var(--ease); border-radius: 10px; overflow: hidden; }
.next__img img { width: 100%; aspect-ratio: 840 / 400; object-fit: cover; object-position: top; filter: brightness(.55); }
.next:hover .next__name, .next:focus-visible .next__name { letter-spacing: -.05em; }
.next:hover .next__img, .next:focus-visible .next__img { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }

/* ---------- 404 ---------- */
.nf { position: relative; min-height: 100vh; min-height: calc(var(--vh) * 100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; overflow: hidden; isolation: isolate; padding: 120px var(--pad) 80px; }
.nf__light { height: 56%; z-index: -2; }
.nf__light i { --p: 0; }
.nf__code { font-size: clamp(150px, 36vw, 560px); font-weight: 600; letter-spacing: -.075em; line-height: .78; mix-blend-mode: difference; color: #fff; padding-right: .075em; }
.nf__text { font-size: clamp(24px, 2.6vw, 36px); }
.nf__float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nf__float img { position: absolute; width: clamp(130px, 17vw, 260px); aspect-ratio: 840 / 400; object-fit: cover; object-position: top; border-radius: 8px; opacity: .55; filter: grayscale(.6) brightness(.7); animation: drift 14s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2.3s); }
.nf__float img:nth-child(1) { left: 6%; top: 16%; }
.nf__float img:nth-child(2) { right: 8%; top: 12%; width: clamp(110px, 13vw, 200px); }
.nf__float img:nth-child(3) { left: 14%; bottom: 14%; width: clamp(110px, 12vw, 190px); }
.nf__float img:nth-child(4) { right: 12%; bottom: 20%; }
.nf__float img:nth-child(5) { left: 42%; top: 7%; width: clamp(90px, 9vw, 150px); }
.nf__float img:nth-child(6) { left: 56%; bottom: 6%; width: clamp(90px, 10vw, 160px); }
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(-2deg); } to { transform: translate3d(2vw, -3vh, 0) rotate(2deg); } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .arow__a { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 220px); }
  .arow__meta { display: none; }
  .stage.is-pinned .stage__index { display: none; }
}
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; padding: 18px var(--pad); }
  .nav__links, .nav > .lang { display: none; }
  .nav__menu { display: block; }
  .hero { height: 165vh; }
  .hero__word { font-size: 24vw; transform: translateY(-62%); }
  .hero__row { bottom: 22px; font-size: 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__light { height: 50%; }
  .mrow--core .mrow__item { font-size: 9.5vw; }
  .mrow--tools .mrow__item { font-size: 7vw; }
  .stage.is-pinned .scene__count { top: 84px; }
  .stage.is-pinned .scene__name { top: 15%; font-size: min(18vw, calc(150vw / var(--len2, var(--len)))); white-space: normal; line-height: .9; padding: 0 var(--pad); }
  .stage.is-pinned .scene__name a { display: inline; overflow: visible; padding: 0; }
  .stage.is-pinned .scene__chars { display: inline; }
  .stage.is-pinned .scene__device { width: calc(100vw - var(--pad) * 2); top: 47%; }
  .stage.is-pinned .scene__info { left: var(--pad); right: var(--pad); bottom: 128px; max-width: none; }
  .stage.is-pinned .scene__cta { left: var(--pad); right: auto; bottom: 52px; justify-content: flex-start; }
  .stage.is-pinned .stage__progress { bottom: 26px; }
  .scene__desc { font-size: 14px; }
  .btn { height: 48px; padding: 0 20px 0 22px; font-size: 14px; }
  .scene { grid-template-columns: 1fr; }
  .scene__cta { justify-self: start; justify-content: flex-start; }
  .scene__device { width: 100%; }
  .arow__a { grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: auto auto; gap: 6px 16px; padding: 20px 0; }
  .arow__n { display: none; }
  .arow__name { font-size: clamp(30px, 9vw, 44px); grid-column: 1; }
  .arow__type { grid-column: 1; grid-row: 2; font-size: 13px; }
  .arow__thumb { display: block; grid-column: 2; grid-row: 1 / 3; border-radius: 6px; overflow: hidden; }
  .arow__thumb img { width: 100%; aspect-ratio: 840 / 400; object-fit: cover; object-position: top; }
  .archive__list:hover .arow__a { opacity: 1; }
  .quotes { grid-template-columns: 1fr; }
  .quotes__mark { grid-row: auto; font-size: 120px; height: .5em; }
  .quotes__nav { grid-column: 1; margin-top: 40px; }
  .qbtn { width: 50px; height: 50px; }
  .crow { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 12px; padding: 20px 0; }
  .crow__val { grid-column: 1; grid-row: 2; font-size: 14px; }
  .crow__ico { grid-column: 2; grid-row: 1 / 3; }
  .crow__toast { right: 40px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .case__head { padding-top: 92px; }
  .case__meta { grid-template-columns: 1fr 1fr; }
  .case__meta > div:first-child { grid-column: 1 / -1; }
  .case__body, .case__review { grid-template-columns: 1fr; }
  .case__desc, .case__visit { grid-column: 1; }
  .case__review .label { padding-top: 0; }
  .frame--xl .frame__bar { height: 30px; }
  .rform__row { grid-template-columns: 1fr; }
  .modal { place-items: end center; padding: 0; }
  .modal__box { border-radius: 22px 22px 0 0; max-height: 92vh; }
}
@media (max-height: 560px) and (min-width: 761px) {
  .stage.is-pinned .scene__name { top: 9%; }
  .stage.is-pinned .scene__info, .stage.is-pinned .scene__cta { bottom: 40px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero { height: auto; }
  .hero__pin { position: relative; height: 100vh; height: calc(var(--vh) * 100); }
  .rw__in { transform: none; }
  .mq { transform: none !important; }
  .nf__float img { animation: none; }
  .hero__pin::after { animation: none; }
  .js .hero .hero__light { scale: 1 1; }
}

/* review form honeypot */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }