@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --paper: #ffffff;
  --mist: #f1f7fc;
  --ink: #0f1c36;
  --soft: #4a5873;
  --line: #0f1c3622;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #15151c66 transparent; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.6 Figtree, "Helvetica Neue", sans-serif; }
::selection { background: var(--ink); color: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, summary, .logo { font-family: var(--display); text-wrap: balance; }
h2 { font-size: clamp(2.5rem, 5.6vw, 5.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -.015em; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
section { padding: clamp(5rem, 10vw, 9rem) var(--pad); }

.skip { position: absolute; left: -999px; z-index: 9; background: var(--ink); color: var(--paper); padding: .5rem 1rem; }
.skip:focus { left: 0; top: 0; }

.btn { display: inline-block; border: 0; border-radius: 99rem; padding: 1.05rem 1.9rem; background: var(--ink); color: var(--paper); font: 600 1.075rem/1 Figtree, sans-serif; text-decoration: none; cursor: pointer; transition: transform .3s var(--out), background-color .8s, color .8s; }
.btn:hover { transform: translateY(-2px); }

/* Devices */
.stage { position: relative; width: 100%; padding-left: 18%; }
.mac { position: relative; }
.lid { padding: 1.5% 1.5% 2%; background: #101013; border-radius: 2.4% / 3.8%; box-shadow: inset 0 0 0 1px #4a4a50, 0 30px 44px -12px #00000052; }
.base { position: relative; width: 107%; height: clamp(8px, 1.2vw, 18px); margin-left: -3.5%; background: linear-gradient(#e9eaed 0 22%, #c7c9ce 60%, #8e9096); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.base::before { content: ""; position: absolute; left: 42%; width: 16%; height: 42%; background: #a8aab0; border-radius: 0 0 .5em .5em; }
.screen { position: relative; overflow: hidden; background: #0c0c0f; isolation: isolate; }
.lid .screen { aspect-ratio: 1500 / 938; }
.phone { position: absolute; left: 0; bottom: 0; width: 21%; padding: .55%; background: #0c0c0f; border-radius: 16% / 7.4%; box-shadow: inset 0 0 0 1.5px #56575d, 0 22px 30px #00000047; }
.phone .screen { aspect-ratio: 600 / 1298; border-radius: 13% / 6%; }
.phone::after { content: ""; position: absolute; top: 2.6%; left: 35%; width: 30%; height: 2.7%; background: #0c0c0f; border-radius: 99rem; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Hero */
.hero { display: grid; grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr); min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--fg); transition: background-color .8s var(--out), color .8s var(--out); overflow: hidden; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem var(--pad); }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; text-decoration: none; }
.mark { flex: none; width: 1.75rem; height: 1.75rem; }
.mark circle { transition: fill .8s var(--out); }
.lang { display: flex; gap: .15rem; margin-left: clamp(.5rem, 2vw, 1.5rem); padding-left: clamp(.5rem, 2vw, 1.5rem); border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: .95rem; font-weight: 500; }
.lang a { display: grid; place-items: center; min-width: 2.2rem; min-height: 2.75rem; text-decoration: none; opacity: .75; }
.lang a:hover { opacity: 1; text-decoration: underline; }
.lang a[aria-current] { opacity: 1; font-weight: 800; text-decoration: underline; text-underline-offset: .3em; }
.bar ul { margin-left: auto; display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); font-weight: 500; font-size: 1.02rem; }
.bar li a { display: inline-block; padding-block: .6rem; text-decoration: none; }
.bar li a:hover { text-decoration: underline; }

.hero-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); align-items: center; gap: clamp(1.5rem, 3vw, 4rem); padding: clamp(.5rem, 2vh, 2rem) var(--pad); }
.hero h1 { font-size: clamp(2.9rem, 5.4vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -.018em; }
.hero h1 { min-height: 3em; }
.m h1.enter .w > span { animation: wordin .85s var(--out) calc(var(--i) * 55ms) backwards; }
@keyframes wordin { from { transform: translateY(115%) rotate(4deg); } }
.hero-copy > p { min-height: 4.2em; max-width: 26em; margin-block: 1.4rem 1.9rem; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.4; }
.hero .btn { background: var(--fg); color: var(--bg); }
#show { max-width: calc(66svh * 1.6); margin-left: auto; width: 100%; }

#show .screen > * { clip-path: inset(0 0 100% 0); }
#show .screen > .was-on { z-index: 1; clip-path: inset(0); }
#show .screen > .is-on { z-index: 2; clip-path: inset(0); transition: clip-path .9s var(--out); }
#show .phone .screen > .is-on { transition-delay: .12s; }

.hero-foot { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 10fr); align-items: end; gap: 1rem clamp(1.5rem, 3vw, 4rem); padding: .75rem var(--pad) 1.4rem; }
.cap { max-width: 34em; min-height: 5.8em; font-size: 1rem; line-height: 1.45; }
.cap strong { display: block; font: 700 1.2rem/1.3 var(--display); }
.cap a { white-space: nowrap; font-weight: 600; }
.ctrl { display: flex; align-items: flex-end; gap: 1rem; min-width: 0; }
#tabs { display: flex; flex: 1; gap: clamp(.6rem, 1.1vw, 1.2rem); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: .25rem; }
#tabs button { flex: 1 0 auto; min-height: 44px; padding: .6rem 0 .5rem; border: 0; background: none; color: inherit; font: 500 .95rem/1.2 Figtree, sans-serif; text-align: left; opacity: .8; cursor: pointer; transition: opacity .3s; }
#tabs button:hover, #tabs button[aria-current] { opacity: 1; }
#tabs button[aria-current] { font-weight: 700; }
#tabs i { display: block; position: relative; height: 2px; margin-top: .55rem; overflow: hidden; background: color-mix(in srgb, currentColor 25%, transparent); }
#tabs i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }
#tabs [aria-current] i::after { transform: scaleX(1); animation: fill 5s linear; }
.hold #tabs [aria-current] i::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#pause { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .1rem; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
#pause[hidden] { display: none; }
#pause svg { width: 16px; fill: currentColor; }

/* Statement */
.statement { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.statement p { max-width: 32em; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; }

/* Services */
.services { background: var(--mist); }
.services h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.card { position: relative; grid-column: span var(--w); display: flex; flex-direction: column; justify-content: space-between; gap: 2.25rem; min-height: clamp(21rem, 27vw, 26rem); padding: clamp(1.5rem, 2.6vw, 2.5rem); overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 #0f1c3614, 0 18px 40px -26px #0f1c3640; }
.card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), #7cc8ff40, transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.card:hover::before { opacity: 1; }
.card h3 { max-width: 13em; padding-right: 2.25rem; font-size: clamp(1.75rem, 2.9vw, 2.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.012em; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.card h3 a:focus-visible { outline: 0; }
.card h3 a:focus-visible::after { outline: 3px solid currentColor; outline-offset: -8px; }
.card p { max-width: 34em; margin-top: .9rem; font-size: 1.05rem; line-height: 1.5; }
.card ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.card li { padding: .28rem .8rem; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 99rem; font-size: .92rem; font-weight: 500; line-height: 1.35; }
.go { position: absolute; top: clamp(1.5rem, 2.6vw, 2.5rem); right: clamp(1.5rem, 2.6vw, 2.5rem); width: 1.9rem; transition: transform .4s var(--out); }
.card:hover .go { transform: translate(4px, -4px) scale(1.15); }

/* Work */
.work { padding: 0; }
.work-title { padding: clamp(5rem, 10vw, 9rem) var(--pad) clamp(2rem, 5vw, 4rem); }
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: clamp(3.5rem, 7vw, 7rem) var(--pad); overflow: hidden; }
.case:nth-of-type(odd) { background: var(--mist); }
.case:nth-of-type(even) .case-copy { order: 2; }
.case h3 { margin-bottom: 1rem; font-size: clamp(2.6rem, 5.6vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -.018em; }
.case-copy p { max-width: 28em; }
.case .case-how { margin-block: .8rem 1.4rem; font-weight: 600; }
.case-copy a { font-weight: 600; }
.more { padding: clamp(4rem, 8vw, 7rem) var(--pad); }
.more h3 { margin-bottom: 1.5rem; font-size: clamp(1.75rem, 3.2vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; }
.more li { border-top: 1px solid var(--line); }
.more a { display: flex; justify-content: space-between; align-items: baseline; gap: .1rem 2rem; flex-wrap: wrap; padding-block: 1rem; text-decoration: none; }
.more a:hover strong { text-decoration: underline; }
.more strong { font: 600 1.3rem/1.2 var(--display); }
.more span { color: var(--soft); }

/* Person */
.person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.person img { width: 100%; border-radius: 4px; }
.person h2 { font-size: clamp(2.25rem, 4.4vw, 4.25rem); margin-bottom: 1.5rem; }
.person > div > p { max-width: 36em; margin-bottom: 1.1em; }
.career { margin-block: 2.25rem 1.5rem; }
.career div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: .7rem; border-top: 1px solid var(--line); font-size: 1.02rem; line-height: 1.4; }
.career dt { font-weight: 600; font-variant-numeric: tabular-nums; }
.links { display: flex; gap: 1.75rem; font-weight: 600; }
.links a { display: inline-block; padding-block: .5rem; }

/* Steps */
.steps { background: var(--mist); }
.steps ol { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 3vw, 3rem); counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; margin-bottom: 1rem; font: 800 clamp(3rem, 5vw, 4.5rem)/1 var(--display); }
.steps h3 { margin-bottom: .5rem; font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.steps p { color: var(--soft); font-size: 1.05rem; line-height: 1.5; }

/* FAQ */
.faq { }
.faq h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; gap: 2rem; padding-block: 1.25rem; font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: .7em; height: .7em; margin-top: .25em; background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat; }
details[open] summary::after { background-size: 100% 2px, 0 0; }
details p { max-width: 38em; padding-bottom: 1.6rem; color: var(--soft); }

/* Contact */
.contact { background: #dceefb; }
.contact h2 { font-size: clamp(3rem, 9vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -.018em; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.contact-grid > p a { font-weight: 600; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
form .wide { grid-column: 1 / -1; }
label { display: block; font-size: 1rem; font-weight: 600; }
input, select, textarea { display: block; width: 100%; margin-top: .4rem; padding: .85rem 1rem; border: 1px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: 400 1.05rem/1.3 Figtree, sans-serif; }
textarea { resize: vertical; min-height: 9rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.btn:disabled { opacity: .6; cursor: wait; }
.send { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
#status { font-size: 1.02rem; }
#status a { font-weight: 600; }
.trap { position: absolute; left: -999px; }
.fine { font-size: .95rem; }

/* Footer */
footer { --ink: #0f1c36; display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.75rem var(--pad); background: var(--ink); color: #fff; font-size: 1rem; }
footer ul { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
footer a { display: inline-block; padding-block: .25rem; }

/* Legal pages */
.legal { max-width: 46rem; min-height: 80vh; margin-inline: auto; padding: 3rem var(--pad) 6rem; }
.legal h1 { margin-block: 3rem 1rem; font-size: clamp(2.5rem, 7vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.legal h2 { margin-block: 3.5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--ink); font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
.legal h3 { margin-block: 2.25rem .5rem; font-size: 1.4rem; line-height: 1.15; }
.legal p + p { margin-top: .9em; }

/* Aurora behind the overview slide */
.aurora { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .9s var(--out); pointer-events: none; }
.hero.intro .aurora { opacity: 1; }
.aurora i { position: absolute; display: block; width: 62vw; height: 62vw; min-width: 520px; min-height: 520px; border-radius: 50%; mix-blend-mode: multiply; animation: 19s ease-in-out infinite alternate; animation-play-state: paused; will-change: transform; }
.hero.intro .aurora i { animation-play-state: running; }
.aurora i:nth-child(1) { top: -32%; left: 26%; background: radial-gradient(closest-side, #7cc8ffb3, #7cc8ff00); animation-name: au1; }
.aurora i:nth-child(2) { top: 18%; right: -18%; background: radial-gradient(closest-side, #a8e0ffa6, #a8e0ff00); animation-name: au2; animation-duration: 23s; }
.aurora i:nth-child(3) { bottom: -38%; left: -12%; background: radial-gradient(closest-side, #8fd3ff99, #8fd3ff00); animation-name: au3; animation-duration: 27s; }
.aurora i:nth-child(4) { top: -22%; left: -18%; background: radial-gradient(closest-side, #c4e9ffa6, #c4e9ff00); animation-name: au4; animation-duration: 21s; }
.aurora i:nth-child(5) { bottom: -42%; right: 8%; background: radial-gradient(closest-side, #6bbcff8c, #6bbcff00); animation-name: au5; animation-duration: 25s; }
@keyframes au1 { to { transform: translate(-22vw, 16vh) scale(1.3, .85) rotate(30deg); } }
@keyframes au2 { to { transform: translate(-28vw, -14vh) scale(.85, 1.25) rotate(-25deg); } }
@keyframes au3 { to { transform: translate(30vw, -20vh) scale(1.25, .9) rotate(20deg); } }
@keyframes au4 { to { transform: translate(24vw, 22vh) scale(.9, 1.2) rotate(-35deg); } }
@keyframes au5 { to { transform: translate(-30vw, -26vh) scale(1.2) rotate(25deg); } }
.hold .aurora i { animation-play-state: paused; }

/* Overview slide */
.lid .screen, .phone .screen { container-type: inline-size; }
.dash, .dash-phone { position: absolute; inset: 0; background: #0f1c36; color: #fff; font-family: Figtree, sans-serif; }
.dash { display: flex; flex-direction: column; padding: 4.5cqw 5cqw 3cqw; }
.dash-title { font: 800 7.2cqw/1.02 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.dash-plot { position: relative; flex: 1; min-height: 0; margin-top: 3cqw; border-bottom: 1px solid #ffffff33; }
.dash-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: .9cqw; }
.dash-bars i { flex: 1; background: linear-gradient(#a8e0ff, #4f9df0 80%); border-radius: .6cqw .6cqw 0 0; transform-origin: bottom; }
.dash-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dash-line path { fill: none; stroke: #fff; stroke-width: 3px; stroke-linecap: round; }
.chip { position: absolute; padding: .5cqw 1.5cqw; border-radius: 99rem; background: #fff; color: #15151c; font-size: 2.3cqw; font-weight: 700; white-space: nowrap; box-shadow: 0 .6cqw 1.6cqw #0000004d; }
.c1 { left: 9%; bottom: 25%; }
.c2 { left: 36%; bottom: 57%; }
.c3 { right: 15%; bottom: 86%; }
.dash-note { margin-top: .8cqw; color: #c9c9d6; font-size: 1.5cqw; }
.dash-phone { padding: 22cqw 9cqw 9cqw; }
.dash-phone p { margin-bottom: 7cqw; font: 800 10cqw/1.05 var(--display); }
.dash-phone li { display: flex; align-items: center; gap: 4cqw; padding-block: 3.8cqw; border-top: 1px solid #ffffff2e; font-size: 6.4cqw; font-weight: 600; line-height: 1.15; }
.dash-phone svg { flex: none; width: 7cqw; color: #7cc8ff; }
.m .chip { opacity: 0; }
.m .dash-line { clip-path: inset(-20% 100% -20% 0); }
.m .dash-bars i { transform: scaleY(0); }
.m .dash-phone li { opacity: 0; }
.m .dash.play .dash-line { animation: dashline 1.7s cubic-bezier(.45,0,.2,1) .35s forwards; }
.m .dash.play .c1 { animation: dashin .7s var(--out) .75s forwards; }
.m .dash.play .c2 { animation: dashin .7s var(--out) 1.15s forwards; }
.m .dash.play .c3 { animation: dashin .7s var(--out) 1.55s forwards; }
.m .dash.play .dash-bars i { animation: dashbar 1s var(--out) calc(var(--i) * 55ms + .25s) forwards; }
.m .dash-phone.play li { animation: dashrow .7s var(--out) calc(var(--i) * 130ms + .35s) forwards; }
@keyframes dashin { from { opacity: 0; transform: translateY(40%) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes dashline { to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes dashbar { to { transform: none; } }
@keyframes dashrow { from { opacity: 0; transform: translateX(-14%); } to { opacity: 1; transform: none; } }

/* Ribbon */
.ribbon { overflow: hidden; padding-block: clamp(.8rem, 1.6vw, 1.3rem); background: var(--ink); color: var(--paper); }
.ribbon div { display: flex; gap: clamp(2rem, 4vw, 4rem); width: max-content; font: 700 clamp(1.5rem, 3.4vw, 3rem)/1.1 var(--display); will-change: transform; }

/* Hero background name */
#ghost { position: absolute; left: 0; bottom: 11%; display: none; font: 800 25vw/1 var(--display); white-space: nowrap; letter-spacing: -.02em; opacity: .07; pointer-events: none; }
.m #ghost { display: block; }
.hero.intro #ghost { visibility: hidden; }
.hero { position: relative; }
.bar, .hero-main, .hero-foot { position: relative; }

/* Results */
.results { --soft: #c4d2e6; --line: #ffffff2e; background: #0f1c36; color: #fff; }
.results .sample { border-color: #ffffff80; }
.results-note { max-width: 40em; margin-block: 1.25rem clamp(2.5rem, 5vw, 4.5rem); color: var(--soft); }
#charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(2rem, 4vw, 4.5rem); }
.chart { margin: 0; }
.chart h3 { font-size: 1.15rem; font-weight: 600; }
.big { margin-top: .2rem; font: 800 clamp(2.75rem, 4.8vw, 4.75rem)/1.05 var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.delta { margin-top: .3rem; font-size: 1rem; font-weight: 600; }
.sample { margin-left: .4rem; padding: .1rem .55rem; border: 1px solid var(--ink); border-radius: 99rem; font-size: .85rem; font-weight: 500; white-space: nowrap; }
.plot { display: flex; align-items: flex-end; gap: clamp(2px, .4vw, 5px); height: clamp(12rem, 22vw, 18rem); margin-top: 1.75rem; border-bottom: 1px solid var(--line); }
.col { position: relative; flex: 1; display: flex; align-items: flex-end; height: 100%; }
.col i { width: 100%; background: var(--c); border-radius: 4px 4px 0 0; transform-origin: bottom; }
.col:last-child i { box-shadow: 0 0 0 1px var(--c); }
.col:hover i { filter: brightness(1.15); }
.col b { position: absolute; bottom: calc(100% + .35rem); left: 50%; z-index: 2; padding: .2rem .55rem; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: .85rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity .15s; }
.col:first-child b { left: 0; transform: none; }
.col:last-child b { left: auto; right: 0; transform: none; }
.col:hover b { opacity: 1; }
.axis { display: flex; justify-content: space-between; margin-top: .4rem; color: var(--soft); font-size: .9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Motion. Hidden states live only under .m, so content stays visible without the script. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; }
.m h1 .w > span, .m .rise .w > span { transform: translateY(115%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--out) calc(var(--i) * 45ms); }
.m.ready h1 .w > span, .m .rise.seen .w > span { transform: none; }
.m .hero-copy > p, .m .hero .btn, .m .hero-foot, .m .bar { opacity: 0; transform: translateY(18px); transition: opacity .8s .55s, transform .9s var(--out) .55s; }
.m.ready .hero-copy > p, .m.ready .hero .btn, .m.ready .hero-foot, .m.ready .bar { opacity: 1; transform: none; }
.m.ready .hero .btn:hover { transform: translateY(-2px); transition: transform .3s var(--out), background-color .8s, color .8s; }
.m #show { perspective: 1500px; transform: translateY(calc(var(--hs, 0) * -60px)) scale(calc(1 + var(--hs, 0) * .14)); transform-origin: 60% 40%; }
.m #show .stage { transform-style: preserve-3d; transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg)); }
.m #show .mac { transform: translateY(70px) rotateX(16deg); opacity: 0; transition: transform 1.3s var(--out) .2s, opacity .7s .2s; }
.m #show .phone { transform: translate(-90px, 60px) rotate(-9deg); opacity: 0; transition: transform 1.3s var(--out) .45s, opacity .7s .45s; }
.m.ready #show .mac { transform: translateZ(0); opacity: 1; }
.m.ready #show .phone { transform: translateZ(60px) translate(calc(var(--tx, 0) * -16px), calc(var(--ty, 0) * -10px)); opacity: 1; }
.m.settled #show .mac, .m.settled #show .phone { transition: none; }
.m #show .swap .mac { animation: macswap .8s var(--out); }
.m #show .swap .phone { animation: phoneswap .85s var(--out); }
@keyframes macswap { from { transform: rotateY(-12deg) scale(.94) translateX(26px); } }
@keyframes phoneswap { from { transform: translate(-46px, 30px) rotate(-7deg) scale(.9); } }
.m .hero-copy { transform: translateY(calc(var(--hs, 0) * -90px)); opacity: calc(1 - var(--hs, 0) * 1.4); }

.m .statement h2 .w { overflow: visible; }
.m .statement h2 .w > span { opacity: .13; transition: opacity .25s; }
.m .statement h2 .w.lit > span { opacity: 1; }
.m .statement p { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform 1s var(--out); }
.m .statement p.seen { opacity: 1; transform: none; }

.m .card { opacity: 0; transform: translateY(70px) scale(.92) rotateX(10deg); transition: opacity .7s calc(var(--i) * 60ms), transform 1.1s var(--out) calc(var(--i) * 60ms); }
.m .card.seen { opacity: 1; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.m .card.seen:hover { transition: opacity .7s, transform .25s ease-out; }

.m .case .mac { transform: perspective(1600px) rotateX(calc((1 - var(--e, 1)) * 30deg)) translateY(calc((1 - var(--e, 1)) * 90px)) scale(calc(.82 + var(--e, 1) * .18)); transform-origin: 50% 100%; }
.m .case .phone { transform: translateY(calc((.5 - var(--p, .5)) * 170px)) rotate(calc((1 - var(--e, 1)) * -8deg)); }
.m .case-copy { transform: translateY(calc((.5 - var(--p, .5)) * 60px)); }
.m .case-copy > p, .m .case-copy > a { opacity: 0; transition: opacity .8s .25s; }
.m .case.seen .case-copy > p, .m .case.seen .case-copy > a { opacity: 1; }

.m .more li { opacity: 0; transform: translateY(20px); transition: opacity .6s calc(var(--i) * 70ms), transform .8s var(--out) calc(var(--i) * 70ms); }
.m .more.seen li { opacity: 1; transform: none; }

.m .chart .col i { transform: scaleY(0); transition: transform 1.1s var(--out) calc(var(--i) * 65ms); }
.m .chart.seen .col i { transform: none; }
.m .chart .delta, .m .chart .axis { opacity: 0; transition: opacity .7s 1s; }
.m .chart.seen .delta, .m .chart.seen .axis { opacity: 1; }

.m .person img { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.2s var(--out), transform 1.5s var(--out); }
.m .person.seen img { clip-path: inset(0); transform: none; }
.m .career div { opacity: 0; transform: translateX(26px); transition: opacity .55s calc(var(--i) * 70ms + .2s), transform .8s var(--out) calc(var(--i) * 70ms + .2s); }
.m .person.seen .career div { opacity: 1; transform: none; }

.m .steps ol { position: relative; padding-top: 1.25rem; }
.m .steps ol::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: left; }
.m .steps li { opacity: 0; transform: translateY(34px); transition: opacity .6s calc(var(--i) * 130ms), transform .9s var(--out) calc(var(--i) * 130ms); }
.m .steps .seen li, .m .steps ol.seen li { opacity: 1; transform: none; }

.m details { opacity: 0; transform: translateY(18px); transition: opacity .55s calc(var(--i) * 70ms), transform .8s var(--out) calc(var(--i) * 70ms); }
.m .faq.seen details { opacity: 1; transform: none; }
summary::after { transition: transform .35s var(--out), background-size .25s; }
details[open] summary::after { transform: rotate(180deg); }
details[open] p { animation: open .45s var(--out); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }

.m .contact-grid { opacity: 0; transform: translateY(30px); transition: opacity .8s .3s, transform 1s var(--out) .3s; }
.m .contact.seen .contact-grid { opacity: 1; transform: none; }

@media (max-width: 860px) {
  #charts { grid-template-columns: minmax(0, 1fr); }
  #ghost { bottom: 30%; font-size: 34vw; }
  .bar ul { display: none; }
  .lang { margin-left: auto; border-left: 0; padding-left: 0; }
  .bar { padding-block: .6rem; }
  .hero-main { grid-template-columns: minmax(0, 1fr); padding-top: .5rem; }
  .hero h1 { font-size: 2.6rem; }
  .hero-copy > p { margin-block: 1rem 1.25rem; }
  .hero h1 { min-height: 2em; }
  .hero-copy > p { min-height: 2.8em; }
  #show { margin: 0 auto; max-width: 34rem; }
  .hero-foot { display: flex; flex-direction: column; align-items: stretch; padding-top: .5rem; }
  .ctrl { order: -1; }
  #tabs { mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .cap { min-height: 7.2em; }
  #tabs button { flex: 0 0 auto; }
  .statement, .case, .person, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .card { grid-column: 1 / -1; min-height: 0; }
  .steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case:nth-of-type(even) .case-copy { order: 0; }
  .person img { max-width: 20rem; }
  form { grid-template-columns: minmax(0, 1fr); }
  .career div { grid-template-columns: 6rem minmax(0, 1fr); }
}
@media (max-width: 480px) { .steps ol { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero, .btn { transition: none; }
  .hero.intro .aurora i { animation-play-state: paused; }
  #show .screen img.is-on { transition: none; }
  #tabs [aria-current] i::after { animation: none; }
  details[open] p { animation: none; }
}