@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --night: #050505;
  --text: #e9e8e4;
  --silver-lo: #4d4d4d;
  --silver-hi: #ffffff;
  --window: #0d0d0f;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --side: 6vw;
  color-scheme: dark;
}
[data-theme="light"] {
  --night: #efeee9;
  --text: #121212;
  --silver-lo: #9a9a96;
  --silver-hi: #1a1a1a;
  --window: #fbfbf9;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-synthesis: none; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 17px/1.7 var(--sans); overflow-x: hidden; }
h1, h2, p, ol, ul, figure, pre { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 90; left: 12px; top: 12px; padding: 10px 14px; background: var(--text); color: var(--night); transform: translateY(-200%); }
.skip:focus { transform: none; }
#waves { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
main { position: relative; }

/* ── Index + menu ── */
.index {
  position: fixed; z-index: 70; top: 30px; right: 34px; min-height: 44px;
  display: flex; align-items: center; gap: 14px; padding: 0 6px;
  background: none; border: 0; cursor: pointer; color: #fff; mix-blend-mode: difference;
  font: 400 11px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase;
}
.index__line { width: 40px; height: 1px; background: currentColor; opacity: .45; transition: width .5s cubic-bezier(.77, 0, .175, 1), opacity .2s ease-out; }
.index:hover .index__line { width: 76px; opacity: 1; }
.menu {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto;
  padding: 30px var(--side) 34px; background: var(--night);
  clip-path: circle(0 at calc(100% - 70px) 46px); transition: clip-path .8s cubic-bezier(.77, 0, .175, 1);
}
.menu.is-open { clip-path: circle(150% at calc(100% - 70px) 46px); }
.menu[hidden] { display: none; }
.menu__close { justify-self: end; min-height: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer; color: inherit; font: 400 11px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; }
.menu__list { align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.menu__list a { font: 300 min(8.5vw, 120px)/1.02 var(--serif); text-decoration: none; opacity: .4; transition: opacity .2s ease-out; }
.menu__list a:hover, .menu__list a:focus-visible { opacity: 1; font-style: italic; }
.menu__list .menu__minor { font: 400 15px/1 var(--sans); opacity: .65; margin-top: 26px; padding: 6px 0; }
.menu__list .menu__minor + .menu__minor { margin-top: 8px; }
.menu__foot { display: flex; gap: 28px; font-size: 13px; }
.menu__foot a, .menu__foot button { color: inherit; opacity: .6; background: none; border: 0; min-height: 44px; font: inherit; cursor: pointer; text-decoration: none; }
.menu__foot a:hover, .menu__foot button:hover { opacity: 1; }
.menu__foot button { margin-right: auto; text-transform: uppercase; letter-spacing: .3em; font-size: 11px; }

/* ── The wordmark (two copies share this geometry) ── */
.wordmark { display: flex; justify-content: center; font: 300 18vw/1.2 var(--serif); letter-spacing: -.05em; text-transform: uppercase; }
.wordmark span { display: inline-block; padding: 0 .05em .1em; }
.wordmark--silver { perspective: 1500px; }
.wordmark--silver span {
  background: linear-gradient(to right, var(--silver-lo) 0%, #999 22%, var(--silver-hi) 45%, var(--silver-hi) 50%, #999 78%, var(--silver-lo) 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: letter-in 3.2s cubic-bezier(.33, 1, .68, 1) both, shimmer 4s ease-in-out infinite;
  transform-origin: 50% 50% -100px;
}
.wordmark--silver span:nth-child(2) { animation-delay: .15s, 0s; }
.wordmark--silver span:nth-child(3) { animation-delay: .3s, 0s; }
.wordmark--silver span:nth-child(4) { animation-delay: .45s, 0s; }
.wordmark--silver span:nth-child(5) { animation-delay: .6s, 0s; }
@keyframes letter-in { from { opacity: 0; transform: translateY(105%) rotateX(-45deg); filter: blur(15px); } }
@keyframes shimmer { from { background-position: -200% center; } to { background-position: 200% center; } }
@keyframes fade-in { from { opacity: 0; } }

/* ── Aperture: static layout first (no JS / reduced motion) ── */
.ap { display: flex; flex-direction: column; }
.ap__hero { order: 0; position: relative; height: 100vh; height: 100svh; min-height: 520px; display: grid; place-items: center; overflow: hidden; }
.ap__ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 40vw/1 var(--serif); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--text); opacity: .045; pointer-events: none; user-select: none; }
.ap__mark { position: relative; font-weight: 300; }
.ap__mark .wordmark { line-height: .8; }
.ap__mark .wordmark span { line-height: 1.2; }
.ap__group {
  position: absolute; right: 4.4vw; bottom: -.4em; display: flex; align-items: center; gap: 16px;
  font: 300 12px/1 var(--sans); letter-spacing: 1em; text-transform: uppercase; opacity: .8; animation: fade-in 1.5s ease-out 1.6s both;
}
.ap__group::before { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .4; }
.ap__say { position: absolute; left: var(--side); bottom: 7vh; max-width: 25em; font-size: 16px; line-height: 1.55; opacity: .72; animation: fade-in 1.5s ease-out 2s both; }
.ap__video { order: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.ap__ko, .ap__shade { display: none; }
.ap__copy { order: 2; padding: 48px var(--side) 18vh; max-width: 900px; }
.ap__name { font: 300 min(14vw, 200px)/.9 var(--serif); letter-spacing: -.03em; margin-left: -.05em; }
.ap__name a, .sen__title a, .tl__title a, .studio__title a { text-decoration: none; }
.ap__name a:hover, .sen__title a:hover, .tl__title a:hover, .studio__title a:hover { font-style: italic; }
.ap__lede { margin-top: 18px; opacity: .8; }
.ap__said { margin-top: 28px; font: italic 300 min(4.4vw, 52px)/1.2 var(--serif); max-width: 18em; }
.caret { display: inline-block; width: 2px; height: .9em; margin-left: 4px; vertical-align: -.1em; background: #f5c518; animation: blink 1.1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ap__after { margin-top: 28px; max-width: 34em; opacity: .8; }
.ap__after a, .studio a, .tl__more a, .sen__steps a { text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ap__after a:hover { color: #f5c518; }

/* ── Sen: static ── */
.sen { position: relative; padding: 16vh var(--side); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; align-items: start; }
.sen__word { display: none; }
.sen__title { font: 300 min(14vw, 200px)/.9 var(--serif); letter-spacing: -.03em; margin-left: -.05em; }
.sen__lede { margin-top: 18px; opacity: .8; max-width: 30em; }
.sen__steps { margin-top: 28px; }
.sen__steps li { padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); max-width: 30em; }
.sen__steps a { display: block; font: 400 28px/1.2 var(--serif); }
.sen__steps a:hover { color: var(--hue); }
.sen__steps span { display: block; margin-top: 4px; font-size: 15px; opacity: .72; }
.sen__desk { display: grid; gap: 22px; }

.win { background: var(--window); border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: 10px; overflow: hidden; font-size: 13px; line-height: 1.55; }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.win__bar i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--text) 22%, transparent); }
.win__bar b { margin-left: 10px; font-weight: 500; font-size: 12px; opacity: .6; }
.chat { padding: 18px; display: grid; gap: 12px; }
.chat__me { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.chat__sen { max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; border: 1px solid color-mix(in srgb, var(--hue) 45%, transparent); }
.ide { display: grid; grid-template-columns: 110px 1fr; }
.ide__tree { padding: 14px; border-right: 1px solid color-mix(in srgb, var(--text) 10%, transparent); opacity: .7; }
.ide__tree li { padding: 2px 0; }
.ide__tree .on { color: var(--hue); }
.ide__code { padding: 14px 16px; overflow: hidden; font: 12.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; }
.ide__code .k { color: var(--hue); }
.ide__code .sug { display: inline-block; margin-top: 6px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--hue) 16%, transparent); }
.agent { padding: 16px 18px; }
.agent__goal { font: 400 22px/1.2 var(--serif); margin-bottom: 10px; }
.agent__steps li { position: relative; padding: 5px 0 5px 26px; }
.agent__steps li::before { content: ""; position: absolute; left: 0; top: .6em; width: 12px; height: 12px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); }
.agent__steps li.done::before { background: var(--hue); border-color: var(--hue); }

/* ── Tryless: static ── */
.tl { padding: 16vh var(--side); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; align-items: start; }
.tl__title { font: 300 min(14vw, 200px)/.9 var(--serif); letter-spacing: -.03em; margin-left: -.05em; }
.tl__lede { margin-top: 18px; opacity: .8; }
.tl__steps { margin-top: 26px; counter-reset: step; }
.tl__steps li { counter-increment: step; position: relative; padding: 10px 0 10px 40px; max-width: 28em; opacity: .85; }
.tl__steps li::before { content: counter(step); position: absolute; left: 0; top: 6px; font: italic 400 24px/1.3 var(--serif); color: var(--hue); }
.tl__more { margin-top: 22px; }
.tl__more a:hover { color: var(--hue); }
.tl__board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tl__scan { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tl__beam { display: none; }
.tl__lay { position: relative; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--text) 5%, transparent); }
.tl__on img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pc { position: absolute; height: auto; }
.pc--coat { left: 4%; top: 12%; width: 34%; }
.pc--tee { left: 38%; top: 6%; width: 30%; }
.pc--shades { left: 68%; top: 9%; width: 28%; }
.pc--jeans { left: 42%; top: 36%; width: 17%; }
.pc--bag { left: 66%; top: 30%; width: 28%; }
.pc--shoes { left: 10%; top: 68%; width: 22%; }

/* ── Gorju Media: still frame ── */
.studio { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #08090b; color: #e9e8e4; }
.studio__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 62%; transform: scale(var(--zoom, 1)); }
.studio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,6,.88) 0%, rgba(5,5,6,.55) 38%, rgba(5,5,6,0) 70%), linear-gradient(0deg, rgba(5,5,6,.7), rgba(5,5,6,0) 45%); }
.studio__copy { position: relative; z-index: 1; padding: 0 var(--side) 12vh; max-width: 40em; }
.studio__title { font: 300 min(10.5vw, 168px)/.9 var(--serif); letter-spacing: -.03em; margin: 0 0 24px -.05em; }
.studio__copy p { opacity: .85; }
.studio__links { display: flex; gap: 2em; margin-top: 22px; }
.studio a:hover { color: #ff5a1f; }

.bench { position: relative; padding: 24vh var(--side) 8vh; }
.bench p { max-width: 26em; font: 300 max(28px, 3vw)/1.3 var(--serif); }
.bench a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--text) 30%, transparent); transition: border-color .2s ease-out; }
.bench a:hover { border-color: currentColor; }

.close { position: relative; padding: 16vh var(--side) 40px; }
.close__line { font: 300 max(22px, 2vw)/1.3 var(--serif); opacity: .7; }
.close__mail { display: inline-block; margin-top: .1em; font: italic 300 min(9vw, 150px)/1.1 var(--serif); letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; }
.close__mail:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.close__small { margin-top: 16vh; font-size: 13px; opacity: .55; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.close__small a { text-decoration: none; padding: 6px 0; }
.close__small a:hover { text-decoration: underline; }

/* ═════════ Motion: scroll drives each stage ═════════ */
.motion .scene { position: relative; }
.motion #aperture { height: 560vh; }
.motion #sen { height: 420vh; }
.motion #tryless { height: 480vh; }
.motion .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* Aperture */
.motion .ap { display: block; isolation: isolate; }
.motion .ap__hero { position: absolute; inset: 0; height: auto; min-height: 0; z-index: 3; }
.motion .ap__video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; z-index: 0; opacity: var(--vid, 0); transform: scale(var(--cam, 1.2)); }
.motion .ap__ko { display: grid; place-items: center; position: absolute; inset: 0; z-index: 1; background: #000; mix-blend-mode: multiply; opacity: var(--ko, 0); pointer-events: none; }
.ap__ko-word { color: #fff; line-height: .8; will-change: transform; }
.ap__ko-word span { line-height: 1.2; }
.ap__o { position: relative; }
.ap__fill { position: absolute; left: 18.7%; top: 22.5%; width: 68%; height: 48%; border-radius: 50%; background: currentColor; opacity: var(--fill, 0); }
.motion .ap__shade { display: block; position: absolute; inset: 0; z-index: 2; opacity: var(--shade, 0); background: linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.08) 78%); pointer-events: none; }
.motion .ap__copy { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--side); max-width: 48rem; color: #e9e8e4; pointer-events: var(--copy-pe, none); }
.motion .ap__name { transform: translateY(calc((1 - var(--name, 0)) * 60px)); opacity: var(--name, 0); }
.motion .ap__lede { opacity: var(--lede, 0); }
.motion .ap__said { opacity: var(--lede, 0); }
.motion .ap__said span { opacity: .12; transition: opacity .25s ease-out; }
.motion .ap__said span.on { opacity: 1; }
.motion .ap__after { opacity: var(--after, 0); }

/* Sen */
.motion .sen { display: block; padding: 0; }
.motion .sen__word {
  display: flex; position: absolute; left: 50%; top: 50%; z-index: 0;
  font: 300 min(36vw, 62vh)/1 var(--serif); letter-spacing: .08em;
  --dx: 18vw; --dy: 0vh;
  transform: translate(-50%, -50%) translate(calc(var(--drift, 0) * var(--dx)), calc(var(--drift, 0) * var(--dy))) scale(calc(1 - var(--drift, 0) * .25));
  opacity: calc(1 - var(--drift, 0) * .86);
}
.motion .sen__word span {
  background: linear-gradient(to bottom, var(--silver-hi), var(--silver-lo));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transform: translateX(calc((1 - var(--gather, 1)) * var(--from) * 1vw));
  opacity: var(--gather, 1);
}
.motion .sen__word span:nth-child(1) { --from: -30; }
.motion .sen__word span:nth-child(2) { --from: 0; }
.motion .sen__word span:nth-child(3) { --from: 30; }
.motion .sen__text { position: absolute; z-index: 2; left: var(--side); top: 50%; transform: translateY(-50%); width: min(30vw, 440px); opacity: var(--intro, 0); }
.motion .sen__steps li { opacity: .3; transition: opacity .3s ease-out; }
.motion .sen__steps li.on { opacity: 1; }
.motion .sen__desk { display: block; position: absolute; inset: 0; z-index: 1; }
.motion .win { position: absolute; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); transition: filter .4s ease-out; }
.motion .win.back { filter: opacity(.5); }
.motion .win--chat { left: 40vw; top: 12vh; width: 32vw; }
.motion .win--ide { left: 52vw; top: 33vh; width: 41vw; }
.motion .win--agent { left: 43vw; top: 60vh; width: 28vw; }
.motion .win { font-size: 14px; }
.motion .win { opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 80px)) scale(calc(.94 + var(--in, 0) * .06)); }

/* Tryless */
.motion .tl { display: block; padding: 0; }
.motion .tl__text { position: absolute; z-index: 2; left: var(--side); top: 50%; transform: translateY(-50%); width: min(32vw, 460px); }
.motion .tl__steps li { opacity: .28; transition: opacity .3s ease-out; }
.motion .tl__steps li.on { opacity: 1; }
.motion .tl__board { display: block; position: absolute; right: var(--side); top: 50%; transform: translateY(-50%); height: 82vh; aspect-ratio: 4 / 5; border-radius: 6px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.motion .tl__scan { display: block; position: absolute; left: 12%; right: 12%; top: 22%; aspect-ratio: 1; opacity: var(--scan, 1); transform: translate(calc(var(--stow, 0) * -38%), calc(var(--stow, 0) * -30%)) scale(calc(1 - var(--stow, 0) * .62)); }
.motion .tl__scan img { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .tl__cut { filter: drop-shadow(0 calc(var(--lift, 0) * 26px) 24px rgba(0,0,0,.5)); transform: translateY(calc(var(--lift, 0) * -10px)); }
.motion .tl__raw { clip-path: inset(calc(var(--lift, 0) * 100%) 0 0 0); }
.motion .tl__beam { display: block; position: absolute; left: -4%; right: -4%; height: 2px; top: calc(var(--lift, 0) * 100%); background: var(--hue); box-shadow: 0 0 18px var(--hue); opacity: calc(min(var(--lift, 0) * 8, 1) * (1 - var(--lift, 0)) * 2); }
.motion .tl__lay { position: absolute; inset: 0; background: none; aspect-ratio: auto; opacity: calc(1 - var(--dress, 0)); }
.motion .pc { opacity: var(--p, 0); transform: translate(calc((1 - var(--p, 0)) * var(--fx)), calc((1 - var(--p, 0)) * var(--fy))) rotate(calc((1 - var(--p, 0)) * var(--fr))); }
.motion .pc--coat { --fx: -60vw; --fy: 10vh; --fr: -14deg; }
.motion .pc--tee { --fx: 10vw; --fy: -70vh; --fr: 12deg; }
.motion .pc--shades { --fx: 40vw; --fy: -40vh; --fr: 20deg; }
.motion .pc--jeans { --fx: -20vw; --fy: 80vh; --fr: -8deg; }
.motion .pc--bag { --fx: 50vw; --fy: 20vh; --fr: 10deg; }
.motion .pc--shoes { --fx: -40vw; --fy: 60vh; --fr: -16deg; }
.motion .tl__on { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--dress, 0)) * 50%) calc((1 - var(--dress, 0)) * 50%) round 6px); }
.motion .tl__on img { height: 100%; aspect-ratio: auto; transform: scale(calc(1.15 - var(--dress, 0) * .15)); }

@media (max-width: 900px) {
  :root { --side: 22px; }
  body { font-size: 16px; }
  .index { top: 10px; right: 10px; }
  .wordmark { font-size: 24vw; }
  .ap__group { letter-spacing: .6em; font-size: 10px; gap: 10px; right: 6vw; }
  .ap__say { bottom: 5vh; right: var(--side); }
  .ap__said { font-size: 30px; }
  .sen, .tl { grid-template-columns: 1fr; }
  .studio::after { background: linear-gradient(0deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.6) 45%, rgba(5,5,6,.1) 80%); }
  .studio__title { font-size: 17vw; }
  .menu__list a { font-size: 15vw; }
  .close__mail { font-size: 10.4vw; }

  .motion #aperture { height: 440vh; }
  .motion #sen { height: 360vh; }
  .motion #tryless { height: 400vh; }
  .motion .ap__copy { justify-content: flex-end; padding-bottom: 9vh; }
  .motion .ap__shade { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.15) 100%); }
  .motion .sen__word { font-size: 44vw; top: 40%; --dx: 0vw; --dy: 30vh; }
  .motion .sen__word { opacity: calc(1 - var(--drift, 0) * .93); }
  .motion .sen__text { top: 9vh; transform: none; width: auto; right: var(--side); }
  .motion .sen__lede { display: none; }
  .motion .sen__steps { margin-top: 12px; }
  .motion .sen__steps li { padding: 8px 0; }
  .motion .sen__steps a { font-size: 22px; }
  .motion .sen__steps span { font-size: 13px; }
  .motion .win--chat { left: 6vw; top: 54vh; width: 74vw; }
  .motion .win--ide { left: 14vw; top: 62vh; width: 82vw; }
  .motion .win--agent { left: 4vw; top: 70vh; width: 70vw; }
  .motion .tl__text { top: 9vh; transform: none; width: auto; right: var(--side); }
  .motion .tl__title { font-size: 15vw; }
  .motion .tl__lede, .motion .tl__more { display: none; }
  .motion .tl__steps { margin-top: 10px; }
  .motion .tl__steps li { padding: 4px 0 4px 34px; font-size: 14px; display: none; }
  .motion .tl__steps li.on { display: block; }
  .motion .tl__board { top: auto; bottom: 4vh; transform: none; right: 50%; margin-right: calc(min(84vw, 52vh * .8) / -2); height: auto; width: min(84vw, 52vh * .8); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark--silver span, .ap__group, .ap__say { animation: none; }
  .caret { animation: none; }
  .menu { transition: none; }
}