/* hasnain: the brand's ink and violet over one 3D world; glass panels where text sits on the world; Funnel Display for
   everything, JetBrains Mono for labels. */
:root {
  --ink: #030412; --ink-2: #06091F; --ink-3: #0C1030; --violet: #5C33CC; --violet-l: #9D82FF; --rose: #F28BC0; --aqua: #6FE3EE; --paper: #EEEAF8;
  --line: rgba(196, 188, 255, .14); --text: #F4F2FF; --dim: rgba(232, 228, 255, .72); --faint: rgba(232, 228, 255, .5);
  --sans: var(--font-sans, 'Funnel Display'), system-ui, sans-serif; --mono: var(--font-mono, 'JetBrains Mono'), ui-monospace, monospace;
  --gut: clamp(20px, 4.2vw, 64px); --max: 1360px; --e: cubic-bezier(.2, .7, .1, 1); --e2: cubic-bezier(.7, 0, .2, 1);
  --glass: linear-gradient(160deg, rgba(24, 21, 60, .9), rgba(9, 10, 32, .94));   /* near-opaque: a live blur over the moving world costs every frame */
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; font: 400 17px/1.6 var(--sans); background: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: normal; background: linear-gradient(100deg, var(--violet-l), var(--rose) 60%, var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: var(--ink); border-radius: 999px; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ the world and the scrim that keeps text readable */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 4, 18, .72) 0%, rgba(3, 4, 18, .38) 38%, rgba(3, 4, 18, 0) 62%), linear-gradient(0deg, rgba(3, 4, 18, .55), rgba(3, 4, 18, 0) 35%); }
.poster { position: fixed; inset: 0; z-index: 0; background: var(--ink) center 40% / cover no-repeat; opacity: .8; transition: opacity 1.2s; }
html.has-webgl.is-loaded .poster { opacity: 0; }
html.no-webgl .poster { opacity: .9; }
html.no-webgl .gl { display: none; }
main, .foot { position: relative; z-index: 2; }
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--rose), var(--aqua)); transform-origin: 0 50%; transform: scaleX(0); }

/* ------------------------------------------------------------------ type */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.d-xxl { font-size: clamp(46px, 7.4vw, 124px); line-height: .96; font-weight: 500; letter-spacing: -.035em; margin: 0; }
.d-xl { font-size: clamp(40px, 5.6vw, 92px); line-height: 1; font-weight: 500; letter-spacing: -.03em; margin: 0; }
.d-l { font-size: clamp(34px, 4.1vw, 66px); line-height: 1.03; font-weight: 500; letter-spacing: -.028em; margin: 0; }
.d-m { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.lead { font-size: clamp(17px, 1.3vw, 20px); color: var(--dim); max-width: 36em; margin: 22px 0 0; font-weight: 300; }
.kick { font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-l); margin: 0 0 20px; display: flex; gap: 12px; align-items: center; }
.kick::before { content: ''; width: 26px; height: 1px; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--e) .1s; }
.kick.in::before, .in .kick::before, .kick:not([data-r])::before { transform: scaleX(1); }
.kick b { color: var(--text); font-weight: 400; }
.sec { position: relative; padding: clamp(110px, 16vh, 190px) 0; }
.sec-head { margin-bottom: clamp(40px, 6vh, 72px); max-width: 900px; }

/* reveals: words rise out of their masks; blocks fade up */
[data-lines] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .12em; margin: -.06em -.02em -.12em; }
[data-lines] .w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--e) calc(var(--i) * 55ms); }
[data-lines].in .w > span { transform: none; }
[data-r] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1s var(--e) calc(var(--i, 0) * 70ms), transform 1.1s var(--e) calc(var(--i, 0) * 70ms); }
[data-r].in { opacity: 1; transform: none; }
html:not(.js) [data-r], html.reduced [data-r] { opacity: 1; transform: none; transition: none; }
html:not(.js) [data-lines] .w > span, html.reduced [data-lines] .w > span { transform: none; transition: none; }

/* ------------------------------------------------------------------ buttons and links */
.btn { --h: 52px; position: relative; display: inline-flex; align-items: center; gap: 14px; height: var(--h); padding: 0 8px 0 24px; border-radius: 999px; font-weight: 500; font-size: 16px;
  border: 1px solid rgba(214, 206, 255, .28); background: rgba(10, 10, 34, .35);  transition: transform .5s var(--e), border-color .3s, background .3s; }
.btn i { display: grid; place-items: center; width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; background: rgba(255, 255, 255, .1); font-style: normal; transition: transform .5s var(--e), background .3s; }
.btn:hover i { transform: rotate(-45deg); }
.btn-t { position: relative; display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.btn-t span { grid-area: 1 / 1; transition: transform .55s var(--e); }
.btn-t span + span { transform: translateY(105%); }
.btn:hover .btn-t span:first-child { transform: translateY(-105%); }
.btn:hover .btn-t span + span { transform: none; }
.btn.solid { border-color: transparent; background: linear-gradient(110deg, #6A3DE8, var(--violet) 45%, #8E4FD8); box-shadow: 0 10px 40px -12px rgba(124, 77, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.solid i { background: #fff; color: var(--violet); }
.btn.ghost { background: transparent; }
.btn.small { --h: 44px; font-size: 15px; padding-left: 18px; }
.btn:hover { border-color: rgba(214, 206, 255, .6); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.link { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .3s, gap .4s var(--e); }
.link:hover { border-color: var(--violet-l); gap: 14px; }
.link i { font-style: normal; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; }
.chips li { font: 400 12px/1 var(--mono); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); background: rgba(255, 255, 255, .03); }
.ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ the glass panel (with a light that follows the hand) */
.glass, .form, .deck-in, .pin-card, .faq-l details, .vo-row li figure, .scope { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 26px;  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07); }
.glass::before, .form::before, .deck-in::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(157, 130, 255, .16), transparent 60%); }
.glass:hover::before, .form:hover::before, .deck-in:hover::before { opacity: 1; }
.glass { transition: transform .6s var(--e); }

/* ------------------------------------------------------------------ header */
.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 28px; padding: 18px var(--gut); transition: transform .6s var(--e), background .4s, padding .4s; }
.top.is-scrolled { padding-top: 12px; padding-bottom: 12px; background: linear-gradient(180deg, rgba(3, 4, 18, .82), rgba(3, 4, 18, 0)); }
.top.is-away { transform: translateY(-110%); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.brand-m { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: 500 15px/1 var(--mono); letter-spacing: .02em;
  background: linear-gradient(135deg, var(--violet), #8E4FD8); box-shadow: 0 6px 24px -6px rgba(124, 77, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nav { display: flex; gap: 6px; margin-left: auto; padding: 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 9, 30, .45);  }
.nav a { position: relative; padding: 8px 16px; border-radius: 999px; font-size: 15px; color: var(--dim); overflow: hidden; transition: color .3s, background .3s; }
.nav a span { display: inline-block; position: relative; transition: transform .5s var(--e); }
.nav a span::after { content: attr(data-t); position: absolute; left: 0; top: 105%; color: #fff; }
.nav a:hover span { transform: translateY(-105%); }
.nav a[aria-current] { color: #fff; background: rgba(157, 130, 255, .16); }
.top-open { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 12px/1 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.top-open i, .status i { width: 8px; height: 8px; border-radius: 50%; background: #3BE58C; box-shadow: 0 0 0 0 rgba(59, 229, 140, .6); animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(59, 229, 140, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(59, 229, 140, 0); } }
.top-cta { display: inline-flex; gap: 10px; align-items: center; padding: 11px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; transition: transform .5s var(--e); }
.top-cta i { font-style: normal; }
.menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); position: relative; }
.menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: #fff; transition: transform .5s var(--e); }
.menu span:first-child { top: 18px; } .menu span:nth-child(2) { top: 25px; }
.menu-open .menu span:first-child { transform: translateY(3.5px) rotate(45deg); } .menu-open .menu span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; background: rgba(5, 6, 26, .96);  padding: 110px var(--gut) 40px; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: circle(0 at calc(100% - 44px) 40px); transition: clip-path .8s var(--e2); }
.sheet.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); }
.sheet nav a { display: flex; gap: 16px; align-items: baseline; font-size: 44px; font-weight: 500; letter-spacing: -.02em; padding: 6px 0; opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .7s var(--e); transition-delay: calc(.15s + var(--i) * 60ms); }
.sheet.is-open nav a { opacity: 1; transform: none; }
.sheet nav small { font: 400 12px var(--mono); color: var(--violet-l); }
.sheet-c { display: flex; flex-direction: column; gap: 10px; color: var(--dim); }

/* ------------------------------------------------------------------ hero */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 140px 0 clamp(70px, 11vh, 120px); }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 9, 30, .45);  font-size: 14px; color: var(--dim); margin: 0 0 26px; }
.hero-h { margin: 0; font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.hero-hi { display: block; font-size: clamp(22px, 2.4vw, 38px); font-weight: 300; letter-spacing: -.01em; color: var(--dim); margin-bottom: .2em; }
.hero-name { display: block; font-size: clamp(58px, 10.4vw, 176px); }
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; opacity: 0; transform: translate3d(0, .5em, 0) rotateX(-70deg); transform-origin: 50% 100%; filter: blur(8px);
  transition: opacity .9s var(--e), transform 1.2s var(--e), filter 1s var(--e); transition-delay: calc(.25s + var(--i) * 38ms); }
.is-loaded .ch, html:not(.js) .ch, html.reduced .ch { opacity: 1; transform: none; filter: none; }
.hero-name .ch:nth-child(n) { background: linear-gradient(180deg, #fff 30%, #CFC4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-role { font-size: clamp(20px, 2vw, 30px); font-weight: 300; margin: 26px 0 0; color: var(--dim); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .32em; }
.hero-r1 { color: var(--text); font-weight: 500; }
/* the drum: the three words on the faces of a turning prism */
.drum { display: inline-block; position: relative; perspective: 600px; line-height: 1.25em; }
.drum-sz { visibility: hidden; font-weight: 500; padding-right: .1em; }
.drum-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(-.62em) rotateX(calc(var(--k, 0) * 120deg)); transition: transform 1.1s var(--e); }
.drum-in span { position: absolute; left: 0; top: 0; line-height: 1.25em; font-weight: 500; backface-visibility: hidden; transform: rotateX(calc(var(--i) * -120deg)) translateZ(.62em); color: var(--text); opacity: .25; transition: opacity .8s; }
.drum-in span.on { opacity: 1; background: linear-gradient(100deg, var(--violet-l), var(--rose) 60%, var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-where { margin: 26px 0 0; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.cue { position: absolute; right: var(--gut); bottom: clamp(70px, 11vh, 120px); display: flex; flex-direction: column; align-items: center; gap: 12px; font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); writing-mode: vertical-rl; }
.cue i { width: 1px; height: 70px; background: linear-gradient(var(--violet-l), transparent); position: relative; overflow: hidden; }
.cue i::after { content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: #fff; animation: cue 2s var(--e) infinite; }
@keyframes cue { to { top: 100%; } }

/* ------------------------------------------------------------------ about */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 90px); align-items: end; }
.about-card { padding: clamp(26px, 3vw, 44px); }
.about-card h3 { font-size: 22px; font-weight: 500; margin: 0 0 14px; }
.about-card p { color: var(--dim); margin: 0 0 14px; font-weight: 300; }
.about-card p em { font-weight: 500; }
.path { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 0; font: 400 12px/1.3 var(--mono); color: var(--dim); }
.path li { display: flex; align-items: center; gap: 10px; padding-right: 10px; opacity: 0; transform: translateX(-10px); transition: opacity .7s, transform .8s var(--e); transition-delay: calc(.5s + var(--i) * .25s); }
.in .path li { opacity: 1; transform: none; }
.path li + li::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--violet-l), var(--rose)); margin-right: 0; }
.path i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--violet-l); }
.path li:last-child { color: #fff; } .path li:last-child i { background: var(--violet-l); box-shadow: 0 0 12px var(--violet-l); }
.stats { list-style: none; padding: 0; margin: clamp(60px, 9vh, 110px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats li { position: relative; padding: 28px 20px 0 0; display: flex; flex-direction: column; gap: 6px; }
.stats li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.stats b { font-size: clamp(44px, 5vw, 80px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.stats span { color: var(--dim); font-size: 15px; }
.stat-arc { position: absolute; right: 16px; top: 30px; width: 30px; height: 30px; }
.stat-arc svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stat-arc circle { fill: none; stroke: var(--violet-l); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--e); transition-delay: calc(var(--i) * .15s + .3s); }
.stats.in circle { stroke-dashoffset: .12; }

/* ------------------------------------------------------------------ toolkit */
.toolkit { padding-bottom: clamp(80px, 12vh, 140px); }
.tk-grid { display: grid; grid-template-columns: minmax(0, 560px); gap: 36px; }
.tk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tk-list li { font: 400 13px/1 var(--mono); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 9, 30, .5);  transition: opacity .7s, transform .8s var(--e), border-color .3s, color .3s; transition-delay: calc(var(--i) * 40ms); }
.tk-list li:hover { border-color: var(--violet-l); color: #fff; box-shadow: 0 0 24px -6px var(--violet-l); }
.tk-bands { margin-top: clamp(60px, 9vh, 100px); display: grid; gap: 6px; }
.vband { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding: 14px 0; }
.vband-t { display: inline-flex; will-change: transform; }
.vband b { font-size: clamp(30px, 4vw, 64px); font-weight: 500; letter-spacing: -.03em; padding: 0 .35em; }
.vband.rev b { color: transparent; -webkit-text-stroke: 1px rgba(214, 206, 255, .55); }
.vband i { font-style: normal; color: var(--violet-l); font-size: .9em; align-self: center; }

/* ------------------------------------------------------------------ services: a stack that sinks as the next card arrives */
.deck { display: grid; gap: 28px; }
.deck-c { position: sticky; top: calc(13vh + var(--i) * 26px); }
.deck-in { --sink: 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding: clamp(28px, 3.4vw, 54px); min-height: 360px; overflow: hidden;
  transform: scale(calc(1 - var(--sink) * .06)); filter: brightness(calc(1 - var(--sink) * .45)); transform-origin: 50% 0; transition: border-color .4s; }
.deck-c .deck-in { transform: scale(calc(1 - var(--sink, 0) * .06)); filter: brightness(calc(1 - var(--sink, 0) * .45)); }
.deck-c { --sink: 0; }
.deck-in:hover { border-color: rgba(157, 130, 255, .4); }
.deck-n { font: 400 12px var(--mono); color: var(--violet-l); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 26px; }
.deck-l .ic { width: 40px; height: 40px; color: var(--violet-l); margin-bottom: 20px; }
.deck-l h3 { font-size: clamp(28px, 3vw, 46px); font-weight: 500; letter-spacing: -.025em; margin: 0 0 14px; }
.deck-d { color: var(--dim); max-width: 30em; margin: 0 0 26px; font-weight: 300; }
.deck-r { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 30px; border-left: 1px solid var(--line); }
.deck-big { position: absolute; right: -6px; top: -30px; font-size: clamp(110px, 14vw, 220px); font-weight: 600; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(157, 130, 255, .28); }
.deck-logo { width: 44px; height: 44px; margin-bottom: auto; position: relative; opacity: .9; }
.deck-k { font: 400 12px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 12px; }
.deck-r ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.deck-r li { display: flex; gap: 12px; align-items: center; opacity: 0; transform: translateX(14px); transition: opacity .7s, transform .8s var(--e); transition-delay: calc(.3s + var(--j) * .12s); }
.deck-r li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--violet-l) 0 3px, transparent 4px), rgba(157, 130, 255, .14); }
.deck-c.in li { opacity: 1; transform: none; }
.scope { margin-top: 40px; display: flex; gap: 30px; align-items: center; justify-content: space-between; padding: clamp(26px, 3vw, 44px); overflow: hidden; }
.scope::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--violet-l), var(--rose), transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinb 6s linear infinite; pointer-events: none; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spinb { to { --a: 360deg; } }
.scope p:not(.kick) { color: var(--dim); margin: 10px 0 0; max-width: 40em; }

/* ------------------------------------------------------------------ the work, pinned over the orbit */
.pin { padding: 0; }
.pin-in { position: relative; padding: clamp(110px, 16vh, 190px) 0; }
.pin.is-pinned .pin-in { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; display: flex; align-items: center; }
.pin-grid { position: relative; display: grid; grid-template-columns: minmax(340px, 470px) 1fr; gap: 40px; align-items: center; }
.pin-card { padding: clamp(24px, 2.6vw, 38px); }
.pin-head h2 { font-size: clamp(30px, 2.8vw, 46px); }
.pin-items { position: relative; display: grid; margin-top: 26px; }
.pin-item { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 18px, 0); pointer-events: none; transition: opacity .6s var(--e), transform .8s var(--e); visibility: hidden; transition-property: opacity, transform, visibility; }
.pin-item.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: .12s; }
.pin-n { font: 400 12px/1.4 var(--mono); color: var(--violet-l); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.pin-item h3 { font-size: clamp(28px, 2.6vw, 42px); font-weight: 500; letter-spacing: -.025em; margin: 0; line-height: 1.05; }
.pin-line { color: var(--dim); margin: 12px 0 0; font-weight: 300; }
.pin-act { display: flex; align-items: center; gap: 22px; margin: 24px 0 0; }
.pin-shot { margin: 22px 0 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.pin-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pin-shot figcaption { position: absolute; left: 10px; bottom: 10px; font: 400 11px var(--mono); padding: 5px 9px; border-radius: 999px; background: rgba(3, 4, 18, .7); color: var(--dim); }
html.has-webgl .pin.is-pinned .pin-shot { height: 0; margin: 0; border: 0; opacity: 0; }
.pin-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.pin-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); transition: background .3s, border-color .3s; }
.pin-nav button:hover { background: rgba(157, 130, 255, .18); border-color: var(--violet-l); }
.pin-count { font: 400 13px var(--mono); color: var(--dim); } .pin-count b { color: #fff; font-weight: 400; }
.pin-index { list-style: none; margin: 0; padding: 0; position: absolute; right: var(--gut); bottom: -18vh; display: flex; gap: 6px; }
.pin.is-pinned .pin-index { position: fixed; position: absolute; }
.pin-index button { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 9, 30, .5);  font-size: 13px; color: var(--dim); transition: color .3s, border-color .3s, background .3s; }
.pin-index button b { font: 400 11px var(--mono); color: var(--violet-l); }
.pin-index button[aria-current] { color: #fff; border-color: var(--violet-l); background: rgba(92, 51, 204, .35); }
.pin-hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0; }
.pin-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.pin-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--aqua)); transform-origin: 0 50%; transform: scaleX(0); }
.pin:not(.is-pinned) .pin-bar, .pin:not(.is-pinned) .pin-hint { display: none; }
.pin:not(.is-pinned) .pin-index { position: static; flex-wrap: wrap; margin-top: 20px; grid-column: 1 / -1; }
html.on-screen, html.on-screen body { cursor: pointer; }
html.is-drag, html.is-drag * { cursor: grabbing !important; user-select: none; }

/* ------------------------------------------------------------------ experience: a line that draws, a node per role */
.tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(50px, 9vh, 110px); }
.tl-line { position: absolute; left: calc(26% - 1px); top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.tl-line i { position: absolute; inset: 0; background: linear-gradient(var(--violet-l), var(--rose), var(--aqua)); transform-origin: 50% 0; transform: scaleY(0); }
.tl-i { position: relative; display: grid; grid-template-columns: 26% 1fr; gap: 0; }
.tl-dot { position: absolute; left: calc(26% - 9px); top: 8px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: var(--ink); transition: border-color .5s, box-shadow .5s, background .5s; }
.tl-i.lit .tl-dot { border-color: var(--violet-l); background: var(--violet); box-shadow: 0 0 0 6px rgba(157, 130, 255, .15), 0 0 30px var(--violet-l); }
.tl-when p { font: 400 13px var(--mono); color: var(--violet-l); margin: 6px 0 0; padding-right: 30px; text-transform: uppercase; letter-spacing: .06em; }
.tl-body { padding-left: clamp(30px, 4vw, 60px); }
.tl-body h3 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.tl-at { color: var(--dim); margin: 6px 0 18px; }
.tl-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 40em; }
.tl-body li { position: relative; padding-left: 22px; color: var(--dim); font-weight: 300; opacity: 0; transform: translateY(10px); transition: opacity .7s, transform .8s var(--e); transition-delay: calc(.2s + var(--j) * .1s); }
.tl-body li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--violet-l); }
.tl-i.in li { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ voices: a ring of cards that turns with the scroll and the hand */
.voices { overflow-x: clip; }
.vo-ring { --R: clamp(300px, 34vw, 560px); --cw: min(400px, 76vw); position: relative; height: 380px; perspective: 1800px; perspective-origin: 50% 40%; cursor: grab; touch-action: pan-y; user-select: none; margin-top: 10px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vo-ring.is-drag { cursor: grabbing; }
.vo-rot { position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d; transform: translateZ(calc(var(--R) * -1)) rotateY(var(--rot, 0deg)); }
.vo-card { position: absolute; left: calc(var(--cw) / -2); top: 10px; width: var(--cw); margin: 0; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 300px;
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--R)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--glass); border: 1px solid var(--line); border-radius: 26px;  opacity: .45; transition: opacity .6s var(--e), border-color .6s, box-shadow .6s; }
.vo-card.front { opacity: 1; border-color: rgba(157, 130, 255, .45); box-shadow: 0 40px 90px -30px rgba(92, 51, 204, .55); }
.vo-card blockquote { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 300; }
.vo-card figcaption { display: flex; gap: 12px; align-items: center; }
.vo-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 400 13px var(--mono); background: linear-gradient(135deg, var(--violet), var(--rose)); flex: none; }
.vo-card figcaption b { display: block; font-weight: 500; } .vo-card figcaption small { color: var(--dim); font-size: 14px; }
.vo-stars { margin-left: auto; color: #FFC75A; letter-spacing: 2px; font-size: 13px; }
.vo-hint { text-align: center; font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 8px 0 0; }
html.reduced .vo-rot { transform: none; position: static; width: auto; display: grid; gap: 16px; padding: 0 var(--gut); }
html.reduced .vo-card { position: static; transform: none; width: auto; opacity: 1; }
html.reduced .vo-ring { height: auto; -webkit-mask: none; mask: none; perspective: none; }

/* ------------------------------------------------------------------ faq */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.faq-l { display: grid; gap: 12px; }
.faq-l details { border-radius: 20px; padding: 0; overflow: hidden; transition: border-color .3s; }
.faq-l details[open] { border-color: rgba(157, 130, 255, .4); }
.faq-l summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 26px; font-size: 19px; font-weight: 500; cursor: pointer; }
.faq-l summary::-webkit-details-marker { display: none; }
.faq-l summary i { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); flex: none; transition: transform .5s var(--e), background .3s; }
.faq-l summary i::before, .faq-l summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: #fff; transform: translate(-50%, -50%); }
.faq-l summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--e); }
.faq-l details[open] summary i { background: var(--violet); transform: rotate(180deg); } .faq-l details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq-a { padding: 0 26px 24px; color: var(--dim); font-weight: 300; }
.faq-a p { margin: 0; }
details[open] .faq-a { animation: open .6s var(--e); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }

/* ------------------------------------------------------------------ contact */
.contact-grid { display: grid; grid-template-columns: 1fr minmax(380px, 540px); gap: clamp(40px, 6vw, 100px); align-items: start; }
.fillx { --fill: 0; }
.fillx, .fillx em { background: linear-gradient(90deg, #fff calc(var(--fill) * 100%), rgba(255, 255, 255, .22) calc(var(--fill) * 100% + 8%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fillx em { background: linear-gradient(90deg, var(--violet-l), var(--rose) calc(var(--fill) * 100%), rgba(255, 255, 255, .22) calc(var(--fill) * 100% + 8%)); -webkit-background-clip: text; background-clip: text; }
.facts { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 12px; }
.facts li { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(8, 9, 30, .5);  }
.facts .ic { color: var(--violet-l); flex: none; }
.facts small { display: block; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 3px; }
.facts a, .facts b { font-weight: 500; word-break: break-word; }
.facts a:hover { color: var(--violet-l); }
.form { padding: clamp(24px, 3vw, 40px); }
.form h3 { margin-bottom: 18px; }
.form-meter { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 400 12px var(--mono); color: var(--dim); }
.form-meter::before { content: ''; flex: 1; height: 3px; border-radius: 3px; background: var(--line); order: 0; }
.form-meter i { position: absolute; left: clamp(24px, 3vw, 40px); height: 3px; border-radius: 3px; width: calc(100% - 2 * clamp(24px, 3vw, 40px) - 50px); background: linear-gradient(90deg, var(--violet), var(--rose), var(--aqua)); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--e); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { position: relative; display: block; margin-bottom: 12px; }
.fld input, .fld textarea { width: 100%; font: inherit; color: #fff; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 14px; padding: 24px 16px 10px; outline: none; transition: border-color .3s, background .3s; resize: vertical; }
.fld input:focus, .fld textarea:focus { border-color: var(--violet-l); background: rgba(157, 130, 255, .07); }
.fld span { position: absolute; left: 17px; top: 17px; color: var(--faint); pointer-events: none; transition: transform .35s var(--e), color .3s; transform-origin: 0 0; }
.fld input:focus + span, .fld input:not(:placeholder-shown) + span, .fld textarea:focus + span, .fld textarea:not(:placeholder-shown) + span { transform: translateY(-10px) scale(.74); color: var(--violet-l); }
.budget { border: 0; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.budget legend { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 10px; padding: 0; }
.budget label { position: relative; }
.budget input { position: absolute; opacity: 0; inset: 0; }
.budget span { display: block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--dim); transition: all .3s; cursor: pointer; }
.budget input:checked + span { background: var(--violet); border-color: var(--violet-l); color: #fff; }
.budget input:focus-visible + span { outline: 2px solid var(--aqua); outline-offset: 2px; }
.fine { font-size: 13px; color: var(--faint); margin: 14px 0 0; }
.fine.bad { color: #FF9DB0; }

/* ------------------------------------------------------------------ other pages */
.phero { min-height: 86vh; display: flex; align-items: flex-end; padding-top: 160px; }
.case { padding: clamp(80px, 12vh, 150px) 0; }
.case-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.case.flip .case-shot { order: 2; }
.case-shot { margin: 0; position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); transition: transform .7s var(--e); }
.case-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--e); }
.case-shot:hover img { transform: scale(1.04); }
.case-shot figcaption { position: absolute; left: 14px; bottom: 14px; font: 400 11px var(--mono); padding: 6px 10px; border-radius: 999px; background: rgba(3, 4, 18, .7); color: var(--dim); }
.case-t { padding: clamp(22px, 2.6vw, 36px); border-radius: 26px; background: var(--glass); border: 1px solid var(--line);  }
.shot-note { font: 400 12px var(--mono); color: var(--faint); }
.about-stats { padding-top: 0; }
.contact-top { min-height: 70vh; }

/* ------------------------------------------------------------------ footer: the name is drawn, then filled */
.foot { padding: clamp(80px, 12vh, 140px) 0 0; overflow: hidden; background: linear-gradient(180deg, rgba(3, 4, 18, 0), rgba(3, 4, 18, .92) 22%); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.foot-ask { margin: 0; font-size: clamp(26px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.03em; }
.foot-ask a { background: linear-gradient(90deg, #fff, #fff) 0 100% / 0 2px no-repeat; transition: background-size .7s var(--e); }
.foot-ask a:hover { background-size: 100% 2px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding: 50px 0; }
.foot-cols p { margin: 0 0 8px; color: var(--dim); font-size: 15px; }
.foot-cols .foot-h { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--violet-l); margin-bottom: 14px; }
.foot-cols a { display: flex; gap: 8px; align-items: center; color: var(--dim); padding: 3px 0; font-size: 15px; transition: color .3s, transform .4s var(--e); }
.foot-cols a:hover { color: #fff; transform: translateX(4px); }
.foot-cols img { width: 16px; height: 16px; filter: invert(1) brightness(1.5); opacity: .8; }
.foot-reach { margin: 0 0 18px; color: var(--dim); font-size: 15px; } .foot-reach a { color: #fff; border-bottom: 1px solid var(--line); }
.foot-legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--faint); margin: 0; padding: 22px 0; border-top: 1px solid var(--line); }
.foot-name { width: 100%; height: auto; margin-top: 10px; }
.foot-name text { font: 600 168px var(--sans); letter-spacing: -.05em; fill: rgba(157, 130, 255, 0); stroke: rgba(157, 130, 255, .55); stroke-width: 1; stroke-dasharray: 2200; stroke-dashoffset: 2200; transition: stroke-dashoffset 3s var(--e), fill 1.5s 2s; }
.foot-name.in text { stroke-dashoffset: 0; fill: rgba(157, 130, 255, .14); }

/* ------------------------------------------------------------------ loader and page transition */
/* the loader: an opaque deep-space screen (nothing of the page shows through) with a ringed planet whose moons orbit,
   the name rising letter by letter, and a live percentage; it lifts away once the world is ready. Without JS it never shows. */
.loader { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: var(--ink); overflow: hidden; color: var(--paper);
  transition: opacity .9s var(--e2), transform 1.1s var(--e2), filter .9s var(--e2), clip-path 1.1s var(--e2); clip-path: circle(150% at 50% 50%); }
html.js .loader:not([hidden]) { display: grid; }
html.js:not(.is-loaded) body { overflow: hidden; }
.loader.is-out { clip-path: circle(0% at 50% 46%); }
.loader.is-out.quick { clip-path: circle(150% at 50% 50%); opacity: 0; transform: scale(1.04); filter: blur(8px); }
.loader.is-out .ld-core { transform: scale(.92); opacity: 0; transition: transform .8s var(--e2), opacity .5s; }
.ld-sky, .ld-sky i { position: absolute; inset: 0; pointer-events: none; }
.ld-glow { background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(92, 51, 204, .38), transparent 70%), radial-gradient(ellipse 40% 35% at 70% 75%, rgba(242, 139, 192, .14), transparent 70%), radial-gradient(ellipse 45% 40% at 22% 70%, rgba(111, 227, 238, .1), transparent 70%); animation: ld-breathe 6s ease-in-out infinite; }
.ld-grid { background-image: linear-gradient(rgba(157, 130, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 130, 255, .07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000, transparent 75%); animation: ld-drift 18s linear infinite; }
.ld-dust { background-image: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 78% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 64% 82%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #fff, transparent), radial-gradient(1px 1px at 88% 58%, #fff, transparent), radial-gradient(1.5px 1.5px at 42% 12%, #fff, transparent), radial-gradient(1px 1px at 8% 88%, #fff, transparent); opacity: .55; animation: ld-twinkle 3.2s ease-in-out infinite alternate; }
.ld-core { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 24px; }
.ld-orbit { position: relative; width: 240px; height: 240px; display: grid; place-items: center; margin-bottom: 6px; perspective: 600px; }
.ld-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(196, 188, 255, .32); transform: rotateX(68deg) rotateZ(0); animation: ld-spin 6s linear infinite; }
.ld-ring b { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 14px 3px rgba(242, 139, 192, .8); }
.ld-ring.r2 { inset: 22px; border-color: rgba(111, 227, 238, .2); animation-duration: 4.2s; animation-direction: reverse; transform: rotateX(68deg) rotateY(18deg); }
.ld-ring.r2 b { background: var(--aqua); box-shadow: 0 0 14px 3px rgba(111, 227, 238, .75); }
.ld-ring.r3 { inset: -26px; border-style: dashed; border-color: rgba(157, 130, 255, .16); animation-duration: 11s; transform: rotateX(72deg) rotateY(-14deg); }
.ld-ring.r3 b { width: 6px; height: 6px; left: calc(50% - 3px); top: -3px; background: var(--violet-l); box-shadow: 0 0 12px 3px rgba(157, 130, 255, .8); }
.ld-planet { position: absolute; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #d9ccff, #8e6bff 32%, #5c33cc 58%, #1b0f4d 92%); box-shadow: 0 0 60px -6px rgba(124, 77, 255, .85), inset -14px -16px 30px rgba(3, 4, 18, .55); animation: ld-pulse 2.6s ease-in-out infinite; }
.ld-planet::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(242, 139, 192, .55) 85%, transparent); filter: blur(6px); animation: ld-spin2 2.4s linear infinite; mask: radial-gradient(circle, transparent 54%, #000 56%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); }
.ld-mark { position: relative; font: 600 22px var(--mono); letter-spacing: .04em; color: #fff; text-shadow: 0 2px 16px rgba(3, 4, 18, .6); }
.ld-name { margin: 0; font-size: clamp(30px, 4.4vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.ld-name .ch { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); animation: ld-rise .8s var(--e) forwards; animation-delay: calc(.15s + var(--i) * 45ms); background: linear-gradient(180deg, #fff, #c9bdf5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-sub { margin: 0; font: 400 11.5px var(--mono); color: var(--dim); letter-spacing: .18em; text-transform: uppercase; overflow: hidden; }
.ld-sub span { display: inline-block; animation: ld-up .8s var(--e) .7s both; }
.ld-prog { display: grid; justify-items: center; gap: 10px; margin-top: 14px; }
.ld-n { font: 600 40px/1 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--violet-l), var(--rose), var(--aqua)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-n:empty::before { counter-reset: ldn var(--ldn, 0); content: counter(ldn); }
.ld-n::after { content: '%'; font-size: .45em; margin-left: 2px; vertical-align: top; }
.ld-bar { position: relative; width: min(280px, 70vw); height: 3px; border-radius: 3px; background: rgba(196, 188, 255, .12); overflow: hidden; }
.ld-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--rose), var(--aqua)); transform-origin: 0 50%; transform: scaleX(var(--p, var(--ldp, 0))); transition: transform .2s linear; }
.ld-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); width: 40%; animation: ld-shine 1.4s ease-in-out infinite; mix-blend-mode: overlay; }
.ld-state { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@keyframes ld-spin { to { transform: rotateX(68deg) rotateZ(360deg); } }
.ld-ring.r2 { animation-name: ld-spin-b; } @keyframes ld-spin-b { from { transform: rotateX(68deg) rotateY(18deg) rotateZ(0); } to { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); } }
.ld-ring.r3 { animation-name: ld-spin-c; } @keyframes ld-spin-c { from { transform: rotateX(72deg) rotateY(-14deg) rotateZ(0); } to { transform: rotateX(72deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes ld-spin2 { to { transform: rotate(360deg); } }
@keyframes ld-pulse { 50% { transform: scale(1.05); box-shadow: 0 0 80px -4px rgba(124, 77, 255, 1), inset -14px -16px 30px rgba(3, 4, 18, .55); } }
@keyframes ld-breathe { 50% { opacity: .75; transform: scale(1.04); } }
@keyframes ld-drift { to { background-position: 56px 56px, 56px 56px; } }
@keyframes ld-twinkle { to { opacity: .25; } }
@keyframes ld-rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes ld-up { from { transform: translateY(110%); } }
@keyframes ld-shine { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .ld-ring, .ld-planet, .ld-planet::after, .ld-glow, .ld-grid, .ld-dust, .ld-bar::after { animation: none; } .ld-name .ch { animation-duration: .01s; } }
.pt { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: grid; place-items: center; background: linear-gradient(135deg, #1A0E46, var(--violet) 60%, #8E4FD8); clip-path: inset(100% 0 0 0); transition: clip-path .65s var(--e2); }
.pt-out .pt { clip-path: inset(0 0 0 0); }
.pt-in .pt { clip-path: inset(0 0 0 0); transition: none; }
.is-loaded:not(.pt-in) .pt { clip-path: inset(0 0 100% 0); }
.pt-name { font-size: clamp(30px, 4vw, 54px); font-weight: 500; letter-spacing: -.03em; }

/* ------------------------------------------------------------------ cursor */
.cursor { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.on { opacity: 1; }
.cur-d, .cur-r { position: absolute; left: 0; top: 0; }
.cur-d { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.cur-r { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cur-r::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(214, 206, 255, .5); transition: transform .4s var(--e), background .3s, border-color .3s; }
.cursor.is-link .cur-r::before { transform: scale(1.6); background: rgba(157, 130, 255, .14); border-color: var(--violet-l); }
.cursor.is-view .cur-r::before { transform: scale(2.4); background: rgba(92, 51, 204, .85); border-color: transparent; }
.cur-r b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.cursor.is-view b { opacity: 1; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .nav, .top-open { display: none; }
  .menu { display: block; }
  .top-cta { margin-left: auto; }
  .about-grid, .tk-grid, .faq-grid, .contact-grid, .case-grid { grid-template-columns: 1fr; }
  .tk-list { justify-content: flex-start; }
  .case.flip .case-shot { order: 0; }
}
@media (max-width: 860px) {
  .pin-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n + 3) { margin-top: 28px; border-top: 1px solid var(--line); }
  .deck-in { grid-template-columns: 1fr; gap: 28px; }
  .deck-r { padding-left: 0; padding-top: 24px; border-left: 0; border-top: 1px solid var(--line); }
  .deck-big { top: -10px; font-size: 110px; }
  .scope { flex-direction: column; align-items: flex-start; }
  .tl-line { left: 8px; } .tl-dot { left: 0; }
  .tl-i { grid-template-columns: 1fr; padding-left: 36px; }
  .tl-body { padding-left: 0; }
  .tl-when p { margin: 0 0 8px; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .scrim { background: linear-gradient(0deg, rgba(3, 4, 18, .82) 10%, rgba(3, 4, 18, .35) 60%, rgba(3, 4, 18, .2)); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .top { gap: 12px; }
  .brand-n { display: none; }
  .form .row { grid-template-columns: 1fr; }
  .hero { padding-bottom: 60px; }
  .cue { display: none; }
  .deck-c { top: calc(80px + var(--i) * 14px); }
  .faq-l summary { font-size: 17px; padding: 18px 20px; }
}
html.reduced *, html.reduced *::before, html.reduced *::after { animation-duration: .01s !important; transition-duration: .01s !important; }

/* ------------------------------------------------------------------ revision 2: more motion of its own in every section */
/* the name answers the hand (--p from the pointer's distance) */
.hero-name .ch { --p: 0; translate: 0 calc(var(--p) * -.08em); text-shadow: 0 0 calc(var(--p) * 40px) rgba(157, 130, 255, calc(var(--p) * .9)); transition: opacity .9s var(--e), transform 1.2s var(--e), filter 1s var(--e), translate .35s var(--e), text-shadow .35s; }
.hero-name .ch { background-image: linear-gradient(180deg, #fff 30%, color-mix(in srgb, #CFC4FF calc(100% - var(--p) * 100%), #F28BC0)); }
/* words that light as they are read */
.scrub .sw { opacity: .28; transition: opacity .45s var(--e), color .45s; }
.scrub .sw.lit { opacity: 1; }
html.reduced .scrub .sw, html:not(.js) .scrub .sw { opacity: 1; }
/* a hovered tool */
.tk-list li.hot { border-color: var(--rose); color: #fff; background: rgba(242, 139, 192, .14); box-shadow: 0 0 30px -6px var(--rose); transform: translateY(-3px); }
/* the services' drawings */
.deck-art { position: relative; width: 100%; max-width: 300px; height: auto; margin: 0 0 22px auto; overflow: visible; }
.deck-art .a-fr, .deck-art .a-wire { fill: none; stroke: rgba(214, 206, 255, .5); stroke-width: 1.4; }
.deck-art .a-dot { fill: rgba(214, 206, 255, .5); }
.deck-art .a-t { font: 400 10px var(--mono); fill: var(--faint); }
.deck-art .a-b, .deck-art .a-c, .deck-art .a-img, .deck-art .a-list rect, .deck-art .a-side, .deck-art .a-bars rect { fill: rgba(157, 130, 255, .22); }
.deck-art .a-cta, .deck-art .a-chip, .deck-art .a-note rect { fill: var(--violet); }
.deck-art .a-note circle, .deck-art .a-pk { fill: #fff; } .deck-art .a-pk.b { fill: var(--rose); } .deck-art .a-pk.c { fill: var(--aqua); }
.deck-art .a-line { fill: none; stroke: var(--aqua); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.deck-art .a-wire { stroke-dasharray: 3 4; animation: wire 1.2s linear infinite; }
@keyframes wire { to { stroke-dashoffset: -14; } }
.art-web .a-b, .art-web .a-c, .art-web .a-img, .art-web .a-cta { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--e); }
.deck-c.in .art-web .a-b, .deck-c.in .art-web .a-c, .deck-c.in .art-web .a-img, .deck-c.in .art-web .a-cta { transform: none; }
.art-web .b2 { transition-delay: .15s !important; } .art-web .a-cta { transition-delay: .3s !important; } .art-web .a-img { transition-delay: .2s !important; } .art-web .c1 { transition-delay: .4s !important; } .art-web .c2 { transition-delay: .5s !important; } .art-web .c3 { transition-delay: .6s !important; }
.art-web .a-cur { fill: #fff; offset-path: path('M200 130 C180 100 90 110 47 85'); offset-rotate: 0deg; animation: cur 4s var(--e) infinite; }
@keyframes cur { 0%, 15% { offset-distance: 0%; opacity: 0; } 25% { opacity: 1; } 60%, 80% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.art-web .a-cta { animation: press 4s infinite; } @keyframes press { 0%, 58% { fill: var(--violet); } 64% { fill: var(--rose); } 76%, 100% { fill: var(--violet); } }
.art-mobile .a-list { animation: feed 5s var(--e) infinite; } @keyframes feed { 0%, 30% { transform: translateY(0); } 50%, 80% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
.art-mobile .a-fr:first-child { fill: rgba(3, 4, 18, .6); }
.art-mobile .a-note { transform: translateY(-30px); opacity: 0; animation: note 5s var(--e) infinite; } @keyframes note { 0%, 40% { transform: translateY(-30px); opacity: 0; } 50%, 78% { transform: none; opacity: 1; } 90%, 100% { transform: translateY(-30px); opacity: 0; } }
.art-mobile { clip-path: inset(0 round 4px); }
.art-admin .a-bars rect { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.1); fill: rgba(157, 130, 255, .5); }
.deck-c.in .art-admin .a-bars rect { animation: bar 3.2s var(--e) infinite alternate; animation-delay: calc(var(--d) * .14s); }
@keyframes bar { 0% { transform: scaleY(.2); } 50% { transform: scaleY(var(--h, .9)); } 100% { transform: scaleY(.55); } }
.art-admin .a-bars rect:nth-child(1) { --h: .6; } .art-admin .a-bars rect:nth-child(2) { --h: .9; } .art-admin .a-bars rect:nth-child(3) { --h: .45; } .art-admin .a-bars rect:nth-child(4) { --h: 1; } .art-admin .a-bars rect:nth-child(5) { --h: .75; }
.deck-c.in .art-admin .a-line { transition: stroke-dashoffset 2s var(--e) .4s; stroke-dashoffset: 0; }
/* the project number rolls like an odometer */
.odo { position: absolute; right: clamp(24px, 2.6vw, 38px); bottom: clamp(16px, 1.8vw, 26px); margin: 0; display: flex; height: 1em; overflow: hidden; font: 600 clamp(40px, 3.4vw, 58px)/1 var(--sans); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(157, 130, 255, .55); pointer-events: none; }
.odo-col { display: flex; flex-direction: column; transform: translateY(calc(var(--s, 0) * -1em)); transition: transform 1s cubic-bezier(.6, -0.25, .2, 1.3); }
.odo-col span, .odo-0 { height: 1em; display: block; }
.pin:not(.is-pinned) .odo { display: none; }
.pin-card { position: relative; }
/* copy the email */
.facts li { position: relative; }
.copy { margin-left: auto; position: relative; display: grid; font: 400 12px var(--mono); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); overflow: hidden; transition: border-color .3s, color .3s; }
.copy:hover { border-color: var(--violet-l); color: #fff; }
.copy span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; transition: transform .5s var(--e), opacity .3s; }
.copy-b { transform: translateY(120%); opacity: 0; color: #3BE58C; }
.copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy svg path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--e) .15s; }
.copy.done .copy-a { transform: translateY(-120%); opacity: 0; } .copy.done .copy-b { transform: none; opacity: 1; } .copy.done svg path { stroke-dashoffset: 0; }
.copy.done { border-color: #3BE58C; }
/* the send button's arrow leaves like a signal and comes back */
.btn.sent i { animation: sendoff 1.4s var(--e); }
@keyframes sendoff { 0% { transform: none; } 40% { transform: translate(60px, -40px) rotate(-45deg) scale(.6); opacity: 0; } 41% { transform: translate(-40px, 30px) rotate(-45deg) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ revision 3: the office */
.office-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 20%, #241c4a, #0b0a1e 70%);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(157, 130, 255, .08); outline: none; transition: border-radius .6s var(--e); }
.office-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.office-veil { position: absolute; inset: 0; display: grid; place-items: center; font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: radial-gradient(120% 90% at 50% 20%, #241c4a, #0b0a1e 70%); transition: opacity .9s var(--e); pointer-events: none; }
.office-stage.is-built .office-veil { opacity: 0; }
.office-enter { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 14px; padding: 16px 18px 16px 28px; border-radius: 999px; font: 500 17px var(--sans); color: #fff;
  background: linear-gradient(110deg, #6A3DE8, var(--violet) 45%, #8E4FD8); box-shadow: 0 16px 50px -12px rgba(124, 77, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .5s var(--e), opacity .5s; }
.office-enter i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--violet); font-style: normal; transition: transform .5s var(--e); }
.office-enter:hover { transform: translateX(-50%) translateY(-3px); } .office-enter:hover i { transform: translateX(4px); }
.oe-ring { position: absolute; inset: -8px; border-radius: inherit; border: 1px solid rgba(214, 206, 255, .5); animation: oering 2.4s var(--e) infinite; pointer-events: none; }
@keyframes oering { 0% { transform: scale(.96); opacity: .9; } 100% { transform: scale(1.18, 1.5); opacity: 0; } }
.office-hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.office-stage.is-playing .office-hud { opacity: 1; }
.office-stage.is-playing .office-enter { opacity: 0; pointer-events: none; }
.office-hud > * { pointer-events: auto; }
.oh-keys { position: absolute; left: 20px; top: 20px; list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; border-radius: 14px; background: rgba(8, 9, 30, .6);  border: 1px solid var(--line); font-size: 13px; color: var(--dim); max-width: 70%; }
.oh-keys li { display: flex; align-items: center; gap: 6px; }
kbd { font: 400 11px var(--mono); padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(214, 206, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; }
.oh-prompt { position: absolute; left: 50%; bottom: 26px; margin: 0; transform: translate(-50%, 16px); opacity: 0; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; display: flex; gap: 10px; align-items: center; transition: opacity .35s, transform .5s var(--e); white-space: nowrap; }
.oh-prompt kbd { color: var(--ink); border-color: rgba(3, 4, 18, .25); background: rgba(92, 51, 204, .12); }
.oh-prompt.on { opacity: 1; transform: translate(-50%, 0); }
.oh-mode { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); margin: 0; font: 400 12px var(--mono); color: #fff; padding: 8px 14px; border-radius: 999px; background: rgba(92, 51, 204, .7); white-space: nowrap; }
.oh-mode:empty { display: none; }
.office-stage[data-mode='desk'] .oh-keys, .office-stage[data-mode='arcade'] .oh-keys, .office-stage[data-mode='board'] .oh-keys { opacity: 0; }
.oh-score { position: absolute; right: 20px; bottom: 24px; margin: 0; font: 400 13px var(--mono); padding: 8px 14px; border-radius: 999px; background: rgba(8, 9, 30, .7); border: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.oh-score.on { opacity: 1; }
.oh-toast { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.9); margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(8, 9, 30, .75); font: 400 13px var(--mono); opacity: 0; transition: opacity .3s, transform .4s var(--e); }
.oh-toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.oh-exit { position: absolute; right: 20px; top: 20px; display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(8, 9, 30, .7); border: 1px solid var(--line); font-size: 14px; }
.oh-exit:hover { border-color: var(--violet-l); }
.oh-touch { display: none; }
@media (pointer: coarse) {
  .oh-keys { display: none; }
  .oh-touch { display: block; position: absolute; inset: auto 0 0 0; height: 160px; pointer-events: none; }
  .oh-joy { position: absolute; left: 22px; bottom: 22px; width: 116px; height: 116px; border-radius: 50%; border: 1px solid rgba(214, 206, 255, .35); background: rgba(8, 9, 30, .45); pointer-events: auto; touch-action: none; display: grid; place-items: center; }
  .oh-joy i { width: 50px; height: 50px; border-radius: 50%; background: rgba(157, 130, 255, .8); box-shadow: 0 0 24px rgba(157, 130, 255, .7); }
  .oh-btns { position: absolute; right: 22px; bottom: 30px; display: flex; gap: 12px; pointer-events: auto; }
  .oh-btns button { width: 74px; height: 74px; border-radius: 50%; background: rgba(8, 9, 30, .55); border: 1px solid rgba(214, 206, 255, .4); font-size: 14px; touch-action: manipulation; }
  .oh-btns button:last-child { background: var(--violet); }
  .oh-prompt { bottom: 150px; }
}
/* playing: the stage takes the whole screen */
.office-stage.is-playing { position: fixed; inset: 0; z-index: 75; aspect-ratio: auto; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
html.office-on, html.office-on body { overflow: hidden; }
html.office-on .top, html.office-on .cursor, html.office-on .trail, html.office-on .progress { opacity: 0; pointer-events: none; }
.office-what { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.office-what li { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(8, 9, 30, .5);  display: grid; gap: 6px; }
.office-what b { font-weight: 500; } .office-what span { color: var(--dim); font-size: 15px; font-weight: 300; }
.office-note { font: 400 12px var(--mono); color: var(--faint); margin: 16px 0 0; }
html.no-webgl .office-stage, .office-stage.no-office { display: none; }
@media (max-width: 860px) { .office-what { grid-template-columns: 1fr 1fr; } .office-stage { aspect-ratio: 4 / 5; } .office-enter { font-size: 15px; } }
/* the star trail and the liquid name */
.trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }   /* over the world, under every word */
.foot-name.lit.in text { fill: url(#fn-light); }
.stats b { font-variant-numeric: tabular-nums; }
/* the controls take the hand only while the office is open (on touch, the invisible buttons would cover Enter) */
.office-stage:not(.is-playing) .office-hud { visibility: hidden; }
.office-stage:not(.is-playing) .office-hud * { pointer-events: none !important; }

/* the office, revision 4: the speedometer, a jolt on a bump, the cursor that looks round outside */
.oh-speed { position: absolute; right: 24px; bottom: 24px; margin: 0; display: flex; align-items: baseline; gap: 6px; padding: 12px 18px; border-radius: 18px; background: rgba(8, 9, 30, .72); border: 1px solid var(--line);  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--e); }
.oh-speed.on { opacity: 1; transform: none; }
.oh-speed b { font: 600 40px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; }
.oh-speed small { font: 400 12px var(--mono); color: var(--dim); text-transform: uppercase; }
.office-stage.bumped .office-gl { animation: bump .35s var(--e); }
@keyframes bump { 20% { transform: translate(-6px, 3px); } 45% { transform: translate(5px, -2px); } 70% { transform: translate(-2px, 1px); } }
.office-stage.is-playing .office-gl { cursor: grab; }
@media (pointer: coarse) { .oh-speed { top: 70px; bottom: auto; right: 16px; } }

/* the studio's sound switch: three bars that dance while it plays */
.oh-sound { position: absolute; right: 116px; top: 20px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(8, 9, 30, .7); border: 1px solid var(--line); font-size: 14px; }
.oh-sound i { position: relative; width: 14px; height: 12px; background: linear-gradient(var(--violet-l), var(--violet-l)) 0 100% / 3px 40% no-repeat, linear-gradient(var(--violet-l), var(--violet-l)) 50% 100% / 3px 90% no-repeat, linear-gradient(var(--violet-l), var(--violet-l)) 100% 100% / 3px 60% no-repeat; }
.oh-sound[aria-pressed='true'] i { animation: eq 0.9s ease-in-out infinite alternate; }
.oh-sound[aria-pressed='false'] { color: var(--faint); } .oh-sound[aria-pressed='false'] i { opacity: .4; }
@keyframes eq { 0% { background-size: 3px 40%, 3px 90%, 3px 60%; } 50% { background-size: 3px 90%, 3px 30%, 3px 80%; } 100% { background-size: 3px 60%, 3px 70%, 3px 30%; } }
.oh-sound:hover { border-color: var(--violet-l); }
@media (pointer: coarse) { .oh-sound { right: 100px; } }

/* performance: the only blur left is the small header bar, and none at all on the light tier */
/* (no backdrop blur on the bar: over a moving 3D scene it is re-blurred every frame) */
html.lite .top.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(3, 4, 18, .94); }
.nav, .status, .tk-list li, .facts li, .office-what li, .oh-keys, .oh-exit, .oh-sound, .oh-speed, .oh-score, .btn, .pin-index button, .vo-card { background-color: rgba(10, 10, 32, .88); }
.btn.solid { background-color: transparent; }

/* the light tier: the voices as a plain grid instead of a 3D ring */
html.lite .vo-rot { transform: none; position: static; width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 0 var(--gut); }
html.lite .vo-card { position: static; transform: none; width: auto; opacity: 1; min-height: 0; }
html.lite .vo-ring { height: auto; -webkit-mask: none; mask: none; perspective: none; cursor: auto; }
html.lite .vo-hint { display: none; }

/* ---- who I am: a header with a monogram and status, a career stepper of role cards (newest first) */
.about-card { position: relative; overflow: hidden; border-radius: 28px; }
.about-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(157, 130, 255, .7), rgba(242, 139, 192, .5), transparent); }
.about-card::after { content: ''; position: absolute; width: 420px; height: 420px; right: -180px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 51, 204, .28), transparent); pointer-events: none; }
.ab-head { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.ab-head > div { flex: 1; min-width: 0; }
.ab-head .kick { margin: 0 0 6px; }
.about-card .ab-head h3 { margin: 0; font-size: clamp(18px, 1.7vw, 22px); }
.ab-mono { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font: 500 17px var(--mono); color: #fff; background: linear-gradient(135deg, var(--violet), var(--rose)); box-shadow: 0 10px 30px -8px rgba(92, 51, 204, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ab-status { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(74, 222, 128, .3); background: rgba(74, 222, 128, .08); font: 400 11px var(--mono); letter-spacing: .06em; color: #b8f5cd; }
.ab-status i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: ab-ping 2s infinite; }
@keyframes ab-ping { 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.about-card .path { position: relative; display: grid; gap: 10px; margin: 26px 0 0; padding: 0 0 0 22px; font: inherit; flex-wrap: nowrap; }
.about-card .path::before { content: ''; position: absolute; left: 4px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--violet-l), rgba(157, 130, 255, .1)); }
.about-card .path li { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); color: var(--dim); transition: border-color .3s, background .3s, transform .3s var(--e); }
.about-card .path li:hover { border-color: rgba(157, 130, 255, .45); background: rgba(92, 51, 204, .1); transform: translateX(3px); }
.about-card .path li + li::before { content: none; }
.about-card .path li i { position: absolute; left: -22px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1px solid var(--violet-l); background: var(--ink, #07081c); }
.about-card .path li div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.about-card .path li b { font: 500 15px/1.3 var(--sans); color: #fff; }
.about-card .path li span { font: 400 12px/1.3 var(--mono); color: var(--dim); }
.about-card .path li time { flex: none; font: 400 11px var(--mono); letter-spacing: .04em; color: var(--faint); }
.about-card .path li.now { border-color: rgba(157, 130, 255, .5); background: linear-gradient(100deg, rgba(92, 51, 204, .28), rgba(242, 139, 192, .08)); }
.about-card .path li.now i { background: var(--violet-l); box-shadow: 0 0 12px var(--violet-l); }
.about-card .path li.now time { color: #b8f5cd; }
.about-card .ctas { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .ab-status { display: none; } .about-card .path li { flex-wrap: wrap; gap: 4px 14px; } .about-card .path li time { width: 100%; } }

/* ---- the work orbit: the index of projects docked at the bottom of the pinned view, the hint above it, never over the next section */
.pin.is-pinned .pin-in { padding-bottom: 96px; }
.pin-dock { display: contents; }
.pin.is-pinned .pin-dock { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; left: 0; right: 0; bottom: 20px; padding: 0 var(--gut); pointer-events: none; }
.pin.is-pinned .pin-dock > * { pointer-events: auto; }
.pin.is-pinned .pin-hint { position: static; transform: none; }
.pin.is-pinned .pin-index { position: static; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 999px; background: rgba(8, 9, 30, .55); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pin.is-pinned .pin-index::-webkit-scrollbar { display: none; }
.pin.is-pinned .pin-index button { white-space: nowrap; border-color: transparent; background: transparent; }
.pin.is-pinned .pin-index button[aria-current] { border-color: var(--violet-l); background: rgba(92, 51, 204, .45); }
.pin:not(.is-pinned) .pin-dock { display: block; padding: 0 var(--gut); max-width: var(--max, 1280px); margin: 0 auto; }
.pin:not(.is-pinned) .pin-index { justify-content: center; }
/* ten projects: tighter tabs so most fit, the bar scrolls to keep the current one in view */
.pin.is-pinned .pin-index { scroll-behavior: smooth; max-width: min(100%, 1180px); }
.pin.is-pinned .pin-index button { padding: 7px 11px; font-size: 12.5px; gap: 6px; }
.pin.is-pinned .pin-index li { flex: none; }

/* the contact form's trap for bots: kept out of sight and out of the tab order */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ the blog: the site's frame over its painted sky, no 3D, readable prose */
.blog-page { position: relative; isolation: isolate; min-height: 100vh; }
.blog-page::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url(/assets/client/sky.webp) center / cover no-repeat; opacity: .35; }
.blog-page::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 4, 18, .55), rgba(3, 4, 18, .92) 40%, var(--ink)); }
.blog-page .progress, .blog-page .poster, .blog-page .scrim { display: none; }
.blog-page [data-r], .blog-page .is-split .ch, .blog-page .is-split .w { opacity: 1; transform: none; filter: none; }
.blog-hero { padding-top: clamp(140px, 20vh, 200px); padding-bottom: 20px; min-height: 0; }
.blog-hero em, .post-cta .d-m em { font-style: normal; background: linear-gradient(90deg, var(--violet-l), var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blog-list { padding-top: 20px; }
.blog-empty a, .crumbs a, .prose a { color: var(--violet-l); text-decoration: underline; text-underline-offset: .2em; }
.post-card { display: grid; border-radius: 22px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .5s var(--e), border-color .3s; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(157, 130, 255, .45); }
.post-card img, .post-art { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.post-art { background: radial-gradient(circle at 70% 35%, rgba(157, 130, 255, .55), transparent 45%), radial-gradient(circle at 25% 80%, rgba(242, 139, 192, .35), transparent 45%), var(--ink-3); }
.post-t { display: grid; gap: 8px; padding: 22px 24px 26px; }
.post-t small { font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--violet-l); }
.post-t b { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.post-t span { color: var(--dim); font-size: 15px; line-height: 1.55; }
.post-t i { font-style: normal; color: var(--violet-l); font-size: 14px; }
.lead-card { grid-template-columns: 1.25fr 1fr; align-items: center; margin-bottom: 26px; }
.lead-card .post-t b { font-size: clamp(24px, 2.6vw, 34px); }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
@media (max-width: 860px) { .lead-card { grid-template-columns: 1fr; } }
.post { padding-top: clamp(120px, 16vh, 170px); }
.post-wrap { max-width: 1100px; }
.crumbs { font: 400 12.5px var(--mono); color: var(--faint); margin-bottom: 22px; letter-spacing: .04em; }
.post-head { max-width: 820px; }
.post-head h1 { margin: 6px 0 14px; }
.post-by { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; }
.post-by span:last-child { display: grid; } .post-by small { color: var(--faint); font-size: 13px; }
.post-hero { margin: 34px 0 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.post-hero img { width: 100%; height: auto; display: block; }
.post-grid-2 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start; }
@media (max-width: 900px) { .post-grid-2 { grid-template-columns: 1fr; } .post-toc { display: none; } }
.post-toc { position: sticky; top: 110px; display: grid; gap: 4px; padding: 18px; border-radius: 16px; }
.post-toc a { color: var(--dim); font-size: 13.5px; text-decoration: none; padding: 5px 0; line-height: 1.35; }
.post-toc a:hover { color: #fff; }
.prose { font-size: 18px; line-height: 1.75; color: #dcd7f0; max-width: 72ch; }
.prose h2 { font-size: clamp(25px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.02em; color: #fff; margin: 1.8em 0 .5em; scroll-margin-top: 100px; line-height: 1.2; }
.prose h3 { font-size: 21px; font-weight: 500; color: #fff; margin: 1.5em 0 .4em; scroll-margin-top: 100px; }
.prose h4 { font-size: 18px; color: #fff; margin: 1.4em 0 .3em; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose .tbl { margin: 0 0 1.15em; }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .35em 0; } .prose li::marker { color: var(--violet-l); }
.prose strong { color: #fff; font-weight: 600; }
.prose code { font: 0.86em var(--mono); background: rgba(157, 130, 255, .14); padding: 2px 6px; border-radius: 6px; }
.prose pre { background: #070818; border: 1px solid var(--line); border-radius: 14px; padding: 18px; overflow: auto; }
.prose pre code { background: none; padding: 0; font-size: 14px; line-height: 1.6; }
.prose blockquote { border-left: 3px solid var(--violet-l); padding: 4px 0 4px 18px; color: #fff; font-size: 20px; }
.prose img { max-width: 100%; height: auto; border-radius: 14px; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2em 0; }
.prose .tbl { overflow-x: auto; } .prose table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; } .prose th { color: #fff; font-weight: 500; }
.post-faq { max-width: 820px; margin: 50px 0 0 268px; display: grid; gap: 10px; }
@media (max-width: 900px) { .post-faq { margin-left: 0; } }
.post-faq details { border-radius: 14px; padding: 16px 20px; } .post-faq summary { cursor: pointer; font-weight: 500; } .post-faq p { color: var(--dim); margin: 10px 0 0; }
.post-cta { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 60px 0 0; padding: 30px; border-radius: 24px; }
.post-cta .d-m { margin: 6px 0 0; max-width: 34ch; }
.post-more { margin-top: 60px; }

/* the mode hint sits at the bottom centre, above the prompt, clear of the keys and the buttons in the corners */
.oh-mode { top: auto; bottom: 86px; font-size: 11.5px; padding: 7px 14px; background: rgba(8, 9, 30, .72); border: 1px solid rgba(157, 130, 255, .45); max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
@media (pointer: coarse) { .oh-mode { display: none; } }

/* ---- HI Raceway: the race HUD (top centre) and the finish card */
.oh-race { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 14px; padding: 10px 20px; border-radius: 18px; background: rgba(8, 9, 30, .78); border: 1px solid rgba(208, 20, 30, .55); box-shadow: 0 10px 40px -10px rgba(208, 20, 30, .6); font-variant-numeric: tabular-nums; z-index: 3; }
.oh-race b { font-weight: 500; } .oh-race > span:only-of-type, .oh-race b + span { font: 700 34px/1 var(--mono); color: #ffcc33; }
.oh-race .rt { font: 700 30px/1 var(--mono); } .oh-race .rs { font: 700 30px/1 var(--mono); color: #ffcc33; } .oh-race small { font-size: 12px; color: var(--dim); margin-left: 3px; font-weight: 400; }
.oh-race .rc { font: 700 18px/1 var(--mono); padding: 4px 9px; border-radius: 999px; background: #d0141e; color: #fff; animation: rc-pop .3s var(--e); }
.oh-race.low .rt { color: #ff5c7a; animation: rc-blink .6s steps(2) infinite; }
@keyframes rc-pop { from { transform: scale(1.5); } } @keyframes rc-blink { 50% { opacity: .45; } }
.race-card { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 18, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.race-card.on { opacity: 1; }
.rc-in { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 26px; border-radius: 24px; background: rgba(10, 10, 32, .94); border: 1px solid rgba(157, 130, 255, .35); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); transform: translateY(14px) scale(.98); transition: transform .45s var(--e); }
.race-card.on .rc-in { transform: none; }
.rc-score { margin: 4px 0 0; font: 700 64px/1 var(--mono); letter-spacing: -.04em; background: linear-gradient(90deg, #ffcc33, #ff5c7a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-score small { font-size: 15px; margin-left: 8px; -webkit-text-fill-color: var(--dim); }
.rc-best { margin: 6px 0 18px; color: var(--dim); font: 400 13px var(--mono); }
.rc-form { display: grid; gap: 12px; } .rc-form.done label, .rc-form.done .rc-btns button[type=submit] { display: none; }
.rc-msg { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--violet-l); }
.rc-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.rc-board { margin-top: 18px; } .rc-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.rc-list li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); font-size: 14px; }
.rc-list b { font: 600 12px var(--mono); color: var(--violet-l); } .rc-list em { font: 700 14px var(--mono); font-style: normal; color: #ffcc33; }
.rc-list li:first-child { background: rgba(255, 204, 51, .1); }

/* ---- HI-bot: the robot in the corner, its hello bubble, and its chat card */
.hibot { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.hibot > * { pointer-events: auto; }
html.office-on .hibot, html.menu-open .hibot, html.js:not(.is-loaded) .hibot { opacity: 0; visibility: hidden; }
.hibot { transition: opacity .4s, visibility .4s; }
.hb-bot { border: 0; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 12px 22px rgba(92, 51, 204, .55)); transition: transform .3s var(--e); -webkit-tap-highlight-color: transparent; }
.hb-bot:hover { transform: translateY(-4px) rotate(-3deg); } .hb-bot:active { transform: scale(.94); }
.hb-float { animation: hb-float 3.2s ease-in-out infinite; transform-origin: 48px 60px; }
.hb-shadow { animation: hb-shadow 3.2s ease-in-out infinite; transform-origin: 48px 108px; }
.hb-eyes { animation: hb-blink 4.2s infinite; transform-origin: 48px 37px; }
.hb-tip { animation: hb-glow 1.6s ease-in-out infinite; }
.hb-heart { animation: hb-beat 1.2s ease-in-out infinite; transform-origin: 48px 81px; }
.hb-arm-r { transform-origin: 71px 72px; } .hb-arm-l { transform-origin: 24px 72px; }
.hb-bot.wave .hb-arm-r, .hb-bot:hover .hb-arm-r { animation: hb-wave .4s ease-in-out 4 alternate; }
.hibot.is-open .hb-bot .hb-arm-r { transform: rotate(-150deg); }
@keyframes hb-float { 50% { transform: translateY(-6px); } }
@keyframes hb-shadow { 50% { transform: scaleX(.8); opacity: .2; } }
@keyframes hb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes hb-glow { 50% { opacity: .5; } }
@keyframes hb-beat { 50% { transform: scale(1.25); } }
@keyframes hb-wave { from { transform: rotate(-20deg); } to { transform: rotate(-150deg); } }
.hb-bubble { position: relative; max-width: 240px; margin-right: 18px; padding: 11px 15px; border-radius: 18px 18px 4px 18px; border: 1px solid rgba(157, 130, 255, .45); background: rgba(14, 12, 40, .92); color: #fff; font: 500 14px/1.4 var(--sans); text-align: left; cursor: pointer; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .6); animation: hb-in .45s var(--e) both; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@keyframes hb-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.hb-card { width: min(370px, calc(100vw - 32px)); border-radius: 22px; overflow: hidden; background: rgba(10, 10, 32, .96); border: 1px solid rgba(157, 130, 255, .35); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset; animation: hb-in .4s var(--e) both; transform-origin: bottom right; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hb-card header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(120deg, rgba(92, 51, 204, .55), rgba(242, 139, 192, .2)); }
.hb-card header > span:nth-child(2) { flex: 1; display: grid; } .hb-card header b { font-size: 15px; font-weight: 600; }
.hb-card header small { font-size: 12px; color: var(--dim); display: flex; gap: 6px; align-items: center; } .hb-card header small i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.hb-ava { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #8f6bff, #5c33cc); }
.hb-x { border: 0; background: rgba(255, 255, 255, .08); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.hb-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.hb-msg { margin: 0; padding: 10px 13px; border-radius: 4px 16px 16px 16px; background: rgba(157, 130, 255, .14); font-size: 14px; line-height: 1.5; color: #e8e4f6; }
.hb-ok { background: rgba(74, 222, 128, .14); color: #c8f7d8; }
.hb-body form { display: grid; gap: 8px; }
.hb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hb-body input, .hb-body select, .hb-body textarea { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #fff; font: 400 16px/1.4 var(--sans); outline: none; }
.hb-body select { color: var(--dim); } .hb-body select:valid { color: #fff; } .hb-body option { color: #111; }
.hb-body input:focus, .hb-body select:focus, .hb-body textarea:focus { border-color: var(--violet-l); }
.hb-body textarea { resize: none; }
.hb-err { margin: 0; font-size: 13px; color: #ff8aa0; }
.hb-send { border: 0; border-radius: 12px; padding: 12px; background: linear-gradient(90deg, var(--violet), #8e4fd8); color: #fff; font: 600 15px var(--sans); cursor: pointer; }
.hb-send:disabled { opacity: .6; }
@media (max-width: 560px) { .hb-bot svg { width: 62px; height: 72px; } .hb-bubble { max-width: 200px; font-size: 13px; } .hb-card { width: calc(100vw - 24px); } .hb-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hb-float, .hb-shadow, .hb-eyes, .hb-tip, .hb-heart { animation: none; } }

/* ---- mobile and stacking fixes */
/* the stacked service cards are solid, so the card beneath never shows through the one on top */
.deck-in { background: linear-gradient(180deg, #141133, #0c0d26); }
/* the footer's email never runs off a phone screen */
.foot-ask { overflow-wrap: anywhere; } .foot-ask a { display: inline; }
@media (max-width: 560px) { .foot-ask { font-size: clamp(20px, 6.4vw, 30px); } }
@media (max-width: 700px) { .oh-race { top: 64px; padding: 8px 14px; gap: 10px; } .oh-race .rt, .oh-race .rs { font-size: 22px; } .rc-score { font-size: 48px; } .rc-in { padding: 20px; } }

/* ================================================================== the motion layer (lib/motion.js): an entrance of its own
   per section, a light under the pointer on every card. Individual transform properties (translate, rotate, scale) so
   it composes with the transforms already on these elements. Only with JS (html.mx) and without reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* headings: the accent words rise into place, then a shine sweeps across once */
  html.mx :is(.sec-head, .pin-head, .phero .wrap) { translate: 0 40px; opacity: 0; transition: translate 1.1s var(--e), opacity .9s; }
  html.mx :is(.sec-head, .pin-head, .phero .wrap).mx-in { translate: none; opacity: 1; }
  html.mx :is(.sec-head, .pin-head, .phero .wrap) em { background-size: 220% 100%; background-position: 100% 0; transition: background-position 1.6s var(--e) .5s; }
  html.mx :is(.sec-head, .pin-head, .phero .wrap).mx-in em { background-position: 0 0; }

  /* about: the card unfolds in 3D, the career steps slide in one by one, the stats rise */
  html.mx .sec.about .about-card { transform-origin: 50% 100%; rotate: x 22deg; translate: 0 60px; opacity: 0; transition: rotate 1.2s var(--e), translate 1.2s var(--e), opacity .8s; }
  html.mx .sec.about .about-card.mx-in { rotate: none; translate: none; opacity: 1; }
  html.mx .about-card .path li { translate: -40px 0; opacity: 0; transition: translate .8s var(--e), opacity .6s, border-color .3s, background .3s; transition-delay: calc(.6s + var(--i) * .15s); }
  html.mx .about-card.mx-in .path li { translate: none; opacity: 1; }
  html.mx .stats li { translate: 0 50px; opacity: 0; transition: translate 1s var(--e), opacity .8s; transition-delay: calc(var(--i, 0) * .12s); }
  html.mx .stats.mx-in li { translate: none; opacity: 1; }
  html.mx .stats li:nth-child(1) { --i: 0; } html.mx .stats li:nth-child(2) { --i: 1; } html.mx .stats li:nth-child(3) { --i: 2; } html.mx .stats li:nth-child(4) { --i: 3; }

  /* toolkit: the skills pop in on a spring from scattered places, then drift; near the pointer they lean toward it */
  html.mx .tk-list li { translate: var(--sx, 0) var(--sy, 30px); rotate: var(--sr, 0deg); scale: .6; opacity: 0; transition: translate .9s cubic-bezier(.34, 1.56, .64, 1), rotate .9s cubic-bezier(.34, 1.56, .64, 1), scale .9s cubic-bezier(.34, 1.56, .64, 1), opacity .5s, border-color .3s, color .3s, box-shadow .3s; transition-delay: calc(var(--i, 0) * 45ms); }
  html.mx .tk-list.mx-in li { translate: var(--px, 0px) var(--py, 0px); rotate: 0deg; scale: 1; opacity: 1; }
  html.mx .tk-list.mx-in li:not(:hover) { animation: mx-drift var(--fd, 4s) ease-in-out var(--fo, 0s) infinite; }
  @keyframes mx-drift { 50% { transform: translateY(-4px); } }

  /* services: the icon draws itself when the card arrives, the big number slides in */
  html.mx .deck-in .ic :is(path, rect, circle, line, polyline) { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.4s var(--e) .3s; }
  html.mx .deck-in.mx-in .ic :is(path, rect, circle, line, polyline) { stroke-dashoffset: 0; }
  html.mx .deck-in .deck-big { translate: 40px 0; opacity: 0; transition: translate 1.2s var(--e) .2s, opacity 1s .2s; }
  html.mx .deck-in.mx-in .deck-big { translate: none; opacity: 1; }

  /* experience: each role wipes in from the timeline; the lit dot pulses */
  html.mx .tl-i .tl-body { clip-path: inset(0 100% 0 0); translate: -20px 0; transition: clip-path 1.1s var(--e), translate 1.1s var(--e); }
  html.mx .tl-i.mx-in .tl-body { clip-path: inset(0 -10% 0 0); translate: none; }
  html.mx .tl-i.lit .tl-dot { animation: mx-pulse 2s ease-out infinite; }
  @keyframes mx-pulse { 0% { box-shadow: 0 0 0 0 rgba(157, 130, 255, .55), 0 0 30px var(--violet-l); } 100% { box-shadow: 0 0 0 16px rgba(157, 130, 255, 0), 0 0 30px var(--violet-l); } }

  /* voices: the quotes come into focus */
  html.mx :is(.vo-ring, .vo-rows) .vo-card blockquote { filter: blur(8px); opacity: .2; transition: filter 1.2s var(--e), opacity 1s; transition-delay: calc(var(--vi, 0) * .08s); }
  html.mx :is(.vo-ring, .vo-rows).mx-in .vo-card blockquote { filter: none; opacity: 1; }

  /* faq: questions stagger in; answers open with a smooth height; the plus becomes a cross */
  html.mx .faq-l details { translate: 0 30px; opacity: 0; transition: translate .8s var(--e), opacity .6s, border-color .3s; transition-delay: calc(var(--i, 0) * .09s); }
  html.mx .faq-l.mx-in details { translate: none; opacity: 1; }
  html.mx .faq-l { interpolate-size: allow-keywords; }
  html.mx .faq-l details::details-content { height: 0; overflow: clip; transition: height .5s var(--e), content-visibility .5s allow-discrete; }
  html.mx .faq-l details[open]::details-content { height: auto; }

  /* contact: a light runs round the form's border, once on arrival and again on hover */
  html.mx .sec.contact .form { translate: 0 50px; opacity: 0; transition: translate 1.1s var(--e), opacity .8s; }
  html.mx .sec.contact .form.mx-in { translate: none; opacity: 1; }
  @property --mx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  html.mx .sec.contact .form { --mx-a: 0deg; }
  html.mx .sec.contact .form::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--mx-a), transparent 0 70%, var(--violet-l) 80%, var(--rose) 86%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .5s; }
  html.mx .sec.contact .form.mx-in::after { opacity: 1; animation: mx-run 3.2s linear 1 .4s both; }
  html.mx .sec.contact .form.mx-in:hover::after { animation: mx-run 3.2s linear infinite; }
  @keyframes mx-run { from { --mx-a: 0deg; } to { --mx-a: 360deg; } }
  html.mx .fld input:focus, html.mx .fld textarea:focus { box-shadow: 0 0 0 4px rgba(157, 130, 255, .14), 0 0 30px -8px var(--violet-l); }

  /* work page: the case text slides from its side, the screenshot settles */
  html.mx .case-t { translate: 40px 0; opacity: 0; transition: translate 1s var(--e), opacity .8s; }
  html.mx .case.flip .case-t { translate: -40px 0; }
  html.mx .case-t.mx-in { translate: none; opacity: 1; }
  html.mx .case-shot { scale: .92; opacity: 0; rotate: x 10deg; transition: scale 1.2s var(--e), opacity .9s, rotate 1.2s var(--e); }
  html.mx .case-shot.mx-in { scale: 1; opacity: 1; rotate: none; }
}
/* the light under the pointer, on every card (desktop) */
@media (pointer: fine) {
  :is(.deck-in, .form, .faq-l details, .vo-card, .pin-card, .scope, .case-t, .post-card) { isolation: isolate; }
  :is(.case-t, .post-card) { position: relative; }
  :is(.deck-in, .faq-l details, .vo-card, .pin-card, .scope, .case-t, .post-card)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(157, 130, 255, .14), transparent 45%); opacity: 0; transition: opacity .35s; }
  :is(.deck-in, .faq-l details, .vo-card, .pin-card, .scope, .case-t, .post-card):hover::after { opacity: 1; }
}

/* the car key quest's hint (top left, under the keys) */
.oh-key { position: absolute; left: 20px; top: 64px; margin: 0; display: flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(8, 9, 30, .78); border: 1px solid rgba(255, 204, 51, .55); font-size: 13px; color: #fff3c4; animation: key-glow 2s ease-in-out infinite; z-index: 2; max-width: calc(100% - 40px); }
.oh-key i { font-style: normal; font-size: 16px; display: inline-block; animation: key-wiggle 1.6s ease-in-out infinite; }
.oh-key.have { border-color: rgba(74, 222, 128, .55); color: #c8f7d8; animation: none; }
.oh-key.have i { animation: none; }
@keyframes key-glow { 50% { box-shadow: 0 0 22px -4px rgba(255, 204, 51, .7); } }
@keyframes key-wiggle { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-18deg); } 90% { transform: rotate(14deg); } }
.office-stage:not([data-mode='walk']) .oh-key { display: none; }
@media (max-width: 700px) { .oh-key { top: 116px; left: 12px; font-size: 12px; } }

/* ---- surprises (lib/surprise.js) */
.sx-toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; transform: translate(-50%, 20px); opacity: 0; padding: 12px 20px; border-radius: 999px; background: rgba(14, 12, 40, .94); border: 1px solid rgba(157, 130, 255, .45); color: #fff; font: 500 14px var(--sans); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .6); transition: opacity .35s, transform .45s var(--e); pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.sx-toast.on { opacity: 1; transform: translate(-50%, 0); }
.sx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 96; overflow: hidden; }
.sx-confetti i { position: absolute; display: block; }
.sx-rocket { position: fixed; bottom: -40px; z-index: 96; font-size: 46px; pointer-events: none; filter: drop-shadow(0 0 18px rgba(242, 139, 192, .8)); }
.sx-puff { position: fixed; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 160, .9), rgba(242, 139, 192, .3) 60%, transparent 70%); pointer-events: none; z-index: 95; }
html.sx-disco body { animation: sx-disco 1.6s linear infinite; }
html.sx-disco .brand-m, html.sx-disco .hb-bot { animation: sx-bounce .4s ease-in-out infinite alternate; }
@keyframes sx-disco { to { filter: hue-rotate(360deg) saturate(1.3); } }
@keyframes sx-bounce { to { transform: translateY(-6px) rotate(6deg); } }
html.sx-idle .hb-eyes { transform: scaleY(.12); animation: none; }
html.sx-idle .hb-float { animation-duration: 6s; }
html.sx-idle .hibot::before { content: 'z z z'; position: absolute; right: 52px; bottom: 82px; font: 700 15px var(--mono); color: #c9bdf5; letter-spacing: 4px; animation: sx-zzz 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes sx-zzz { 0% { opacity: 0; transform: translate(0, 6px) scale(.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -18px) scale(1.15); } }

/* ---- city life: wanted stars, cash, the taxi job, what people say, the arrest */
.oh-wanted { position: absolute; right: 20px; top: 72px; margin: 0; display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(8, 9, 30, .82); border: 1px solid rgba(255, 60, 80, .6); font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffd0d6; z-index: 3; animation: ow-flash .5s steps(2) infinite; }
.oh-wanted .ow-s { font-size: 18px; letter-spacing: 1px; } .oh-wanted b { color: #ffcc33; text-shadow: 0 0 10px rgba(255, 204, 51, .8); font-weight: 400; } .oh-wanted i { color: rgba(255, 255, 255, .18); font-style: normal; }
@keyframes ow-flash { 0% { box-shadow: 0 0 0 1px rgba(255, 40, 60, .7), 0 0 26px -4px rgba(255, 40, 60, .8); } 100% { box-shadow: 0 0 0 1px rgba(60, 120, 255, .8), 0 0 26px -4px rgba(60, 120, 255, .9); } }
.oh-cash { position: absolute; right: 20px; top: 118px; margin: 0; padding: 6px 13px; border-radius: 999px; background: rgba(8, 9, 30, .78); border: 1px solid rgba(74, 222, 128, .45); font: 700 15px var(--mono); color: #b9f5cd; z-index: 2; font-variant-numeric: tabular-nums; }
.oh-cash.pop { animation: cash-pop .5s var(--e); } @keyframes cash-pop { 40% { transform: scale(1.18); } }
.oh-mission { position: absolute; left: 20px; top: 112px; display: grid; gap: 3px; padding: 10px 14px; max-width: min(340px, calc(100% - 40px)); border-radius: 14px; background: rgba(8, 9, 30, .82); border: 1px solid rgba(74, 222, 128, .5); z-index: 2; font-size: 13px; color: #e6fbe9; }
.oh-mission b { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6ee7a0; } .oh-mission em { font: 700 20px var(--mono); font-style: normal; color: #fff; } .oh-mission em.low { color: #ff5c7a; }
.oh-say { position: absolute; left: 50%; bottom: 140px; transform: translate(-50%, 10px); margin: 0; max-width: min(640px, calc(100% - 32px)); padding: 10px 18px; border-radius: 16px; background: rgba(8, 9, 30, .86); border: 1px solid var(--line); font-size: 15px; line-height: 1.4; text-align: center; color: #fff; opacity: 0; transition: opacity .3s, transform .4s var(--e); z-index: 3; pointer-events: none; }
.oh-say.on { opacity: 1; transform: translate(-50%, 0); }
.office-stage:not([data-mode='walk']):not([data-mode='drive']) .oh-mission, .office-stage:not([data-mode='walk']):not([data-mode='drive']):not([data-mode='busted']) .oh-wanted, .office-stage[data-mode='idle'] .oh-cash, .office-stage[data-mode='desk'] .oh-cash, .office-stage[data-mode='arcade'] .oh-cash { display: none; }
.busted-card { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; background: radial-gradient(ellipse at center, rgba(3, 4, 18, .35), rgba(3, 4, 18, .8)); opacity: 0; transition: opacity .4s; overflow: auto; }
.busted-card.on { opacity: 1; }
.bz-title { margin: 0; font: 900 clamp(56px, 11vw, 132px)/0.9 var(--sans); letter-spacing: .04em; color: #fff; text-shadow: 0 0 30px rgba(255, 40, 60, .9), 6px 6px 0 rgba(30, 80, 255, .9); transform: rotate(-4deg) scale(1.6); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.6, .4, 1), opacity .3s; }
.busted-card.on .bz-title { transform: rotate(-4deg) scale(1); opacity: 1; }
.bz-paper { width: min(560px, 100%); padding: 18px 22px 20px; background: #f3efe4; color: #1b1914; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); transform: translateY(30px) rotate(1.2deg); opacity: 0; transition: transform .6s .35s var(--e), opacity .4s .35s; font-family: Georgia, 'Times New Roman', serif; }
.busted-card.on .bz-paper { transform: rotate(1.2deg); opacity: 1; }
.bz-paper header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 3px double #1b1914; padding-bottom: 6px; margin-bottom: 10px; font: 11px Georgia, serif; text-transform: uppercase; letter-spacing: .06em; }
.bz-paper header b { font: 900 26px/1 'Old English Text MT', 'UnifrakturMaguntia', Georgia, serif; text-transform: none; letter-spacing: 0; }
.bz-paper h3 { margin: 0 0 8px; font: 900 clamp(20px, 3.6vw, 28px)/1.1 Georgia, serif; text-transform: uppercase; }
.bz-story { margin: 0 0 8px; font-size: 15px; line-height: 1.45; columns: 2 220px; column-gap: 18px; }
.bz-sent { margin: 0 0 6px; font-style: italic; font-size: 14px; } .bz-bail { margin: 0 0 12px; font: 600 12px var(--mono); color: #6b1d1d; }
.bz-paper .btn { font-family: var(--sans); } .bz-paper kbd { margin-left: 6px; font: 11px var(--mono); padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .2); }
@media (max-width: 700px) { .oh-wanted { top: 116px; right: 12px; padding: 6px 10px; } .oh-wanted .ow-s { font-size: 15px; } .oh-cash { top: 156px; right: 12px; } .oh-mission { top: 158px; left: 12px; } .oh-say { bottom: 190px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .oh-wanted { animation: none; } }

/* ---- the minimap, the pause/help card, the menu and horn buttons */
.oh-map { position: absolute; left: 20px; bottom: 20px; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7); z-index: 2; pointer-events: none; }
.office-stage:not([data-mode='walk']):not([data-mode='drive']) .oh-map { display: none; }
.oh-menu { position: absolute; right: 256px; top: 20px; display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(8, 9, 30, .7); border: 1px solid var(--line); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.office-stage:not(.is-playing) .oh-menu { display: none; }
@media (pointer: coarse) { .oh-menu { right: 232px; } .oh-menu kbd { display: none; } .oh-map { left: auto; right: 12px; bottom: auto; top: 196px; width: 110px; height: 110px; } .oh-btns button { width: 64px; height: 64px; font-size: 13px; } }
@media (max-width: 700px) { .oh-menu { right: 214px; top: 14px; padding: 8px 12px; } }
/* (the pause card: see "the pause panel, modern" at the end) */
.oh-dmg { position: absolute; right: 24px; bottom: 96px; margin: 0; display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 9, 30, .78); border: 1px solid var(--line); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.oh-dmg.on { display: flex; } .oh-dmg i { width: 70px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; } .oh-dmg b { display: block; height: 100%; background: #f5a524; transition: width .3s; } .oh-dmg.bad b { background: #ef4444; }
.office-stage:not([data-mode='drive']) .oh-dmg { display: none; }
@media (pointer: coarse) { .oh-dmg { top: 80px; bottom: auto; right: 150px; } }
/* stunts, the garage, the daily list */
.oh-stunt { position: absolute; left: 50%; top: 30%; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; z-index: 4; animation: stunt-up 1.7s var(--e) forwards; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.oh-stunt b { font: 900 30px/1 var(--sans); letter-spacing: .06em; color: #fff; -webkit-text-stroke: 1px rgba(0, 0, 0, .25); } .oh-stunt span { font: 700 22px var(--mono); color: #ffcc33; }
@keyframes stunt-up { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -40px) scale(.95); } }
.sc-cash { margin: -6px 0 12px; color: var(--dim); } .sc-cash b { color: #6ee7a0; font-family: var(--mono); }
.sc-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sc-list li { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.sc-list li.on { border-color: rgba(110, 231, 160, .6); background: rgba(110, 231, 160, .07); } .sc-list em { font: 12px var(--mono); font-style: normal; color: var(--dim); } .sc-list .btn { padding: 6px 12px; font-size: 12px; } .sc-list .btn[disabled] { opacity: .4; }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); }
.sw-p-rosso { background: #c4040f; } .sw-p-midnight { background: #16244f; } .sw-p-green { background: #0f4d32; } .sw-p-pearl { background: #eeece6; } .sw-p-orange { background: #e8590c; } .sw-p-matte { background: #141417; } .sw-p-gold { background: linear-gradient(135deg, #f7d26a, #b8860b); }
.sw-r-silver { background: radial-gradient(#fff, #9aa0aa); } .sw-r-black { background: radial-gradient(#555, #111); } .sw-r-gold { background: radial-gradient(#f7d26a, #9a7316); }
.sc-msg { min-height: 1.2em; color: #ffcc33; font-size: 13px; }
/* contact: how a project runs */
.steps-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.steps-l li { padding: 26px 24px; }
.steps-n { font: 500 13px/1 var(--mono); color: var(--faint); }
.steps-l h3 { margin: 14px 0 10px; font-size: 20px; color: var(--text); }
.steps-l p { margin: 0; color: var(--dim); line-height: 1.6; }

/* ---- the pause panel, modern: a frosted sheet with a header, stat tiles, three cards (challenges with progress,
   controls in tabs, things to do with their map colours) and settings as segmented controls. The garage shop reuses it. */
.pause-card { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: radial-gradient(120% 90% at 50% 0%, rgba(92, 51, 204, .28), rgba(3, 4, 18, .72) 60%); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); opacity: 0; transition: opacity .3s; }
.pause-card.on { opacity: 1; }
.pc-in { width: min(940px, 100%); max-height: 100%; overflow: auto; padding: 26px; border-radius: 28px; background: linear-gradient(160deg, rgba(28, 24, 66, .92), rgba(10, 10, 32, .95)); border: 1px solid rgba(196, 188, 255, .16);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08); transform: translateY(14px) scale(.985); transition: transform .45s var(--e); scrollbar-width: thin; }
.pause-card.on .pc-in { transform: none; }
.pc-in h3 { margin: 2px 0 14px; font: 600 26px/1.1 var(--sans); letter-spacing: -.02em; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pc-top h3 { margin: 0; font-size: clamp(26px, 3vw, 34px); }
.pc-k { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--violet-l); }
.pc-k i { width: 8px; height: 8px; border-radius: 50%; background: #ffcc33; box-shadow: 0 0 10px #ffcc33; }
.pc-top-r { display: flex; gap: 8px; } .pc-go { --h: 46px; padding-right: 10px; } .pc-go kbd { margin-left: 4px; }
.pc-stats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pc-stats > li { position: relative; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(196, 188, 255, .12); display: grid; gap: 4px; overflow: hidden; }
.pc-stats b { font: 600 24px/1 var(--sans); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; } .pc-stats b span { font-size: 15px; color: var(--faint); } .pc-stats b em { font-style: normal; color: #ffcc33; letter-spacing: 1px; font-size: 20px; }
.pc-stats small { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pc-mini { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); } .pc-mini i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffcc33, #f28bc0); }
.pc-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'ch ctl' 'todo ctl'; gap: 12px; }
.pc-card { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(196, 188, 255, .1); }
.pc-card h4 { margin: 0 0 12px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-l); }
.pc-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pc-ch { grid-area: ch; } .pc-ctl { grid-area: ctl; } .pc-todo { grid-area: todo; }
.pc-ch li { display: grid; gap: 6px; } .pc-ch p { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text); }
.pc-ch em { font: 600 12px var(--mono); font-style: normal; color: #ffcc33; white-space: nowrap; } .pc-ch small { font: 400 11px var(--mono); color: var(--faint); }
.pc-bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; } .pc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--violet-l)); transition: width .6s var(--e); }
.pc-ch li.done em { color: #6ee7a0; } .pc-ch li.done .pc-bar i { background: linear-gradient(90deg, #22c55e, #6ee7a0); }
.pc-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(196, 188, 255, .1); }
.pc-tabs button { padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--dim); transition: background .25s, color .25s; } .pc-tabs button[aria-selected='true'] { background: var(--violet); color: #fff; }
.pc-keys { gap: 8px !important; } .pc-keys li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dim); }
.pc-keys kbd { flex: none; min-width: 64px; padding: 4px 8px; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(196, 188, 255, .18); border-bottom-width: 2px; font: 500 11px var(--mono); color: #fff; }
.pc-todo ul { grid-template-columns: 1fr 1fr; gap: 8px 14px; } .pc-todo li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.35; color: var(--dim); }
.pc-todo li i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); } .pc-todo li.done { color: #6ee7a0; }
.pc-set { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(196, 188, 255, .12); }
.pc-opt { display: flex; align-items: center; gap: 10px; } .pc-opt > span, .pc-switch span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pc-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(196, 188, 255, .1); }
.pc-seg button { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--dim); transition: background .25s, color .25s; } .pc-seg button:hover { color: #fff; } .pc-seg button[aria-pressed='true'] { background: rgba(157, 130, 255, .3); color: #fff; box-shadow: inset 0 0 0 1px rgba(157, 130, 255, .6); }
.pc-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .pc-switch input { position: absolute; opacity: 0; }
.pc-switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .25s; } .pc-switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s var(--e); }
.pc-switch input:checked + i { background: var(--violet); } .pc-switch input:checked + i::after { transform: translateX(16px); } .pc-switch input:focus-visible + i { outline: 2px solid var(--aqua); outline-offset: 2px; }
.pc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc-h { margin: 0 0 6px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-l); }
.pc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .pc-btns kbd, .pc-go kbd { font: 11px var(--mono); padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .2); border: 0; }
@media (max-width: 760px) { .pc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-body { grid-template-columns: 1fr; grid-template-areas: 'ch' 'ctl' 'todo'; } .pc-todo ul, .pc-cols { grid-template-columns: 1fr; } .pc-in { padding: 18px; border-radius: 22px; } .pc-switch { margin-left: 0; } }

/* ---- the portfolio in the world: the cards the plaza's totems open (about, services, a brief) */
.info-card { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 20px; overflow: auto; background: radial-gradient(120% 90% at 50% 0%, rgba(92, 51, 204, .3), rgba(3, 4, 18, .75) 60%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.info-card.on { opacity: 1; }
.ic-in { position: relative; width: min(920px, 100%); max-height: 100%; overflow: auto; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: linear-gradient(160deg, rgba(28, 24, 66, .94), rgba(10, 10, 32, .96)); border: 1px solid rgba(196, 188, 255, .16); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .85); transform: translateY(16px) scale(.98); transition: transform .45s var(--e); }
.info-card.on .ic-in { transform: none; }
.ic-in h3 { margin: 0 0 18px; font: 500 clamp(26px, 3.2vw, 40px)/1.08 var(--sans); letter-spacing: -.025em; max-width: 22ch; }
.ic-in p { color: var(--dim); font-weight: 300; line-height: 1.6; margin: 0 0 12px; }
.ic-x { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 22px; line-height: 1; } .ic-x:hover { background: rgba(255, 255, 255, .16); }
.ic-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.ic-path { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } .ic-path li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ic-path li.now { border-color: rgba(157, 130, 255, .5); background: linear-gradient(100deg, rgba(92, 51, 204, .28), rgba(242, 139, 192, .06)); }
.ic-path b { font-weight: 500; } .ic-path span { grid-column: 1; font: 400 12px var(--mono); color: var(--dim); } .ic-path time { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 400 11px var(--mono); color: var(--faint); }
.ic-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ic-stats li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); display: grid; gap: 2px; }
.ic-stats b { font: 600 26px/1 var(--sans); letter-spacing: -.03em; } .ic-stats span { font-size: 12.5px; color: var(--dim); }
.ic-svc { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ic-svc > li { position: relative; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); }
.ic-svc .ic-n { position: absolute; right: 16px; top: 12px; font: 600 30px var(--sans); color: transparent; -webkit-text-stroke: 1px rgba(157, 130, 255, .45); }
.ic-svc b { display: block; font-size: 19px; font-weight: 500; margin-bottom: 6px; } .ic-svc p { font-size: 14px; margin: 0 0 10px; }
.ic-svc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--dim); } .ic-svc ul li::before { content: '\2192'; color: var(--violet-l); margin-right: 8px; }
.ic-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 !important; } .ic-btns .btn { --h: 46px; }
.ic-hint { margin: 16px 0 0 !important; font: 400 11px var(--mono); color: var(--faint) !important; } .ic-hint kbd { margin-right: 6px; }
.ic-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; } .ic-facts li { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ic-facts small { display: block; font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; } .ic-facts a, .ic-facts b { font-weight: 500; word-break: break-word; }
.ic-form { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); } .ic-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ic-msg { min-height: 1.3em; font-size: 13.5px; margin: 4px 0 0 !important; } .ic-msg.bad { color: #ff9db0; } .ic-msg.ok { color: #6ee7a0; }
.ic-form.sent .fld, .ic-form.sent .budget, .ic-form.sent .ic-btns { display: none; }
@media (max-width: 760px) { .ic-cols, .ic-svc, .ic-row { grid-template-columns: 1fr; } }

/* ---- asleep in the bedroom: the screen fades to night-blue with a line of text */
.sleep-veil { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, #120f33, #020210); opacity: 0; transition: opacity .9s ease; }
.sleep-veil.on { opacity: 1; } .sleep-veil p { font: 500 clamp(20px, 2.6vw, 30px) var(--sans); color: #e8e4ff; letter-spacing: -.01em; text-shadow: 0 0 30px rgba(157, 130, 255, .7); animation: sv-breathe 2.4s ease-in-out infinite; }
@keyframes sv-breathe { 50% { opacity: .6; } }
.pc-keys[hidden] { display: none !important; }

/* ---- the studio's parts, as a bento: six cards in two columns and the city as a tall feature card beside them; each card
   a line icon in a tile, its number, the name and a line; a light under the pointer, a lift on hover */
.office-what { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); grid-auto-rows: minmax(150px, auto); gap: 14px; }
.office-what li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(26, 22, 62, .92), rgba(10, 10, 32, .94)); border: 1px solid rgba(196, 188, 255, .13); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .5s var(--e), border-color .35s, box-shadow .35s; }
.office-what li::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(157, 130, 255, .18), transparent 60%); }
.office-what li:hover { transform: translateY(-4px); border-color: rgba(157, 130, 255, .42); box-shadow: 0 30px 70px -30px rgba(92, 51, 204, .6), inset 0 1px 0 rgba(255, 255, 255, .08); } .office-what li:hover::before { opacity: 1; }
.ow-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ow-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, rgba(92, 51, 204, .9), rgba(142, 79, 216, .75)); box-shadow: 0 10px 24px -10px rgba(124, 77, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ow-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ow-n { font: 500 12px var(--mono); letter-spacing: .1em; color: var(--faint); }
.office-what b { font-size: 20px; font-weight: 500; letter-spacing: -.015em; color: #fff; }
.office-what .ow-d { color: var(--dim); font-size: 15px; font-weight: 300; line-height: 1.55; }
.ow-bed .ow-ic, .ow-garage .ow-ic { background: linear-gradient(135deg, rgba(242, 139, 192, .85), rgba(142, 79, 216, .7)); }
.ow-street .ow-ic { background: linear-gradient(135deg, rgba(111, 227, 238, .75), rgba(92, 51, 204, .8)); }
.office-what .ow-feature { grid-column: 3; grid-row: 1 / span 3; justify-content: flex-end; padding: 30px; border-color: rgba(157, 130, 255, .3);
  background: radial-gradient(120% 70% at 85% 0%, rgba(92, 51, 204, .55), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(242, 139, 192, .22), transparent 60%), linear-gradient(160deg, rgba(26, 22, 62, .95), rgba(10, 10, 32, .96)); }
.ow-feature .ow-top { position: absolute; left: 30px; right: 30px; top: 30px; } .ow-feature .ow-ic { width: 60px; height: 60px; border-radius: 18px; } .ow-feature .ow-ic svg { width: 30px; height: 30px; }
.ow-feature b { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; } .ow-feature .ow-d { font-size: 16px; }
.office-note { display: flex; align-items: flex-start; gap: 10px; max-width: 900px; margin: 22px 0 0; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(196, 188, 255, .1); background: rgba(8, 9, 30, .55); font: 400 12px/1.6 var(--mono); color: var(--faint); }
.office-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--violet-l); stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 1000px) { .office-what { grid-template-columns: repeat(2, minmax(0, 1fr)); } .office-what .ow-feature { grid-column: 1 / -1; grid-row: auto; min-height: 260px; } }
@media (max-width: 560px) { .office-what { grid-template-columns: 1fr; } .office-what li { padding: 20px; } }

/* ---- FAQ, redesigned: the title, a line and an "ask me" card stay in view on the left; on the right the questions are one
   numbered list in a single panel, separated by hairlines; the open one is lit with an accent bar and a soft glow */
.faq-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); }
.faq-side { position: sticky; top: 120px; display: grid; gap: 26px; }
.faq-side .sec-head { margin-bottom: 0; } .faq-side .lead { margin-top: 18px; }
.faq-ask { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 22px; max-width: 460px; border: 1px solid rgba(196, 188, 255, .14);
  background: radial-gradient(90% 120% at 0% 0%, rgba(92, 51, 204, .35), transparent 60%), linear-gradient(160deg, rgba(26, 22, 62, .92), rgba(10, 10, 32, .94)); }
.faq-ask-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(157, 130, 255, .18); color: var(--violet-l); }
.faq-ask-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.faq-ask b { display: block; font-size: 18px; font-weight: 500; margin-bottom: 4px; } .faq-ask p { margin: 0 0 14px; color: var(--dim); font-weight: 300; font-size: 15px; }
.faq .faq-l { gap: 0; padding: 8px; border-radius: 28px; border: 1px solid rgba(196, 188, 255, .13); background: linear-gradient(160deg, rgba(22, 19, 56, .9), rgba(9, 9, 30, .93)); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.faq .faq-l details { position: relative; border: 0; border-radius: 20px; background: transparent; box-shadow: none; transition: background .35s; }
.faq .faq-l details + details::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: rgba(196, 188, 255, .1); }
.faq .faq-l details[open] { background: linear-gradient(100deg, rgba(92, 51, 204, .26), rgba(92, 51, 204, .06) 70%); }
.faq .faq-l details[open]::before, .faq .faq-l details[open] + details::before { opacity: 0; }
.faq .faq-l details[open]::after { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(var(--violet-l), var(--rose)); opacity: 1; z-index: 1; }
.faq .faq-l summary { gap: 18px; padding: 20px 22px; font-size: clamp(16px, 1.25vw, 18.5px); }
.faq-n { flex: none; width: 2.2em; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--faint); transition: color .3s; }
.faq-q { flex: 1; } details[open] .faq-n { color: var(--violet-l); }
.faq .faq-l summary i { width: 32px; height: 32px; border-color: rgba(196, 188, 255, .2); }
.faq .faq-l summary:hover i { border-color: var(--violet-l); }
.faq .faq-l .faq-a { padding: 0 64px 24px calc(22px + 2.2em + 18px); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 1100px) { .faq-side { position: static; } }
@media (max-width: 560px) { .faq .faq-l .faq-a { padding: 0 20px 20px; } .faq .faq-l summary { padding: 18px; gap: 12px; } .faq-ask { flex-direction: column; } }

/* ------------------------------------------------------------------ the studio's top bar, redone: a glass dock of key caps on the left,
   one control cluster (pause, map, sound, exit) on the right, and the big map on M */
.oh-keys { left: 18px; top: 18px; gap: 4px; padding: 6px; border-radius: 16px; max-width: calc(100% - 300px); font-size: 12.5px; color: rgba(225, 220, 255, .72);
  background: linear-gradient(180deg, rgba(22, 20, 52, .78), rgba(10, 10, 32, .78)); border: 1px solid rgba(214, 206, 255, .14); box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.oh-keys li { gap: 7px; padding: 4px 10px 4px 4px; border-radius: 11px; transition: background .2s; white-space: nowrap; }
.oh-keys li:hover { background: rgba(157, 130, 255, .12); color: #fff; }
.oh-keys kbd, .oh-exit kbd { min-width: 26px; height: 24px; display: inline-grid; place-items: center; padding: 0 7px; border-radius: 7px; font: 600 11px var(--mono); color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(214, 206, 255, .22); border-bottom-width: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.oh-ctrl { position: absolute; right: 18px; top: 18px; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(22, 20, 52, .8), rgba(10, 10, 32, .8)); border: 1px solid rgba(214, 206, 255, .14); box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.oh-ctrl > button { position: relative; inset: auto; right: auto; top: auto; margin: 0; height: 40px; border-radius: 999px; border: 0; background: transparent; color: #e9e5ff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.oh-menu, .oh-mapbtn, .oh-sound { width: 40px; padding: 0 !important; }
.oh-ctrl > button:hover { background: rgba(157, 130, 255, .18); color: #fff; border-color: transparent; }
.oh-ctrl > button:active { transform: scale(.94); }
.oh-ctrl > button:focus-visible { outline: 2px solid var(--violet-l); outline-offset: 2px; }
.oh-ctrl svg { width: 20px; height: 20px; fill: currentColor; }
.oh-mapbtn[aria-pressed='true'] { background: var(--violet); color: #fff; }
.oh-exit { padding: 0 8px 0 16px !important; margin-left: 4px !important; font-size: 14px; font-weight: 500; background: #fff !important; color: var(--ink) !important; }
.oh-exit:hover { background: #ece7ff !important; }
.oh-exit kbd { color: var(--ink); background: rgba(92, 51, 204, .1); border-color: rgba(3, 4, 18, .18); box-shadow: none; }
/* the tip under each icon */
.oh-ctrl [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); padding: 5px 9px; border-radius: 8px; background: rgba(8, 9, 30, .92); border: 1px solid rgba(214, 206, 255, .16); font: 500 11px var(--mono); color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.oh-ctrl [data-tip]:hover::after, .oh-ctrl [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* sound: a speaker whose two waves ripple out while it plays, and a cross when muted */
.oh-sound svg path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.oh-sound svg .spk { fill: currentColor; stroke-width: 1.4; }
.oh-sound .w1, .oh-sound .w2 { transform-box: view-box; transform-origin: 12px 12px; }
.oh-sound[aria-pressed='true'] { color: #fff; }
.oh-sound[aria-pressed='true'] .w1 { animation: snd-wave 1.4s var(--e) infinite; }
.oh-sound[aria-pressed='true'] .w2 { animation: snd-wave 1.4s var(--e) .22s infinite; }
.oh-sound[aria-pressed='true'] .spk { animation: snd-thump 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 30% 50%; }
.oh-sound .mx { opacity: 0; stroke: #ff6b8a !important; }
.oh-sound[aria-pressed='false'] { color: rgba(225, 220, 255, .55); }
.oh-sound[aria-pressed='false'] .w1, .oh-sound[aria-pressed='false'] .w2 { opacity: 0; }
.oh-sound[aria-pressed='false'] .mx { opacity: 1; }
@keyframes snd-wave { 0% { opacity: 0; transform: translateX(-2px) scale(.85); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(2px) scale(1.08); } }
@keyframes snd-thump { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } }
.oh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the minimap, now in a wrapper you can tap; the big map fills the view */
.oh-mapwrap { position: absolute; left: 20px; bottom: 20px; width: 150px; height: 150px; border-radius: 50%; cursor: pointer; z-index: 2; }
.oh-mapwrap .oh-map { position: static; display: block; width: 100%; height: 100%; }
.oh-maphint { display: none; }
.office-stage:not([data-mode='walk']):not([data-mode='drive']) .oh-mapwrap { display: none; }
.office-stage.map-big .oh-mapwrap { inset: 0; width: auto; height: auto; border-radius: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(4, 5, 20, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 6; animation: map-in .35s var(--e); }
.office-stage.map-big .oh-map { width: min(78vh, 88vw); height: min(78vh, 88vw); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(214, 206, 255, .2); }
.office-stage.map-big .oh-maphint { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 12px var(--mono); color: var(--dim); }
.office-stage.map-big .oh-keys, .office-stage.map-big .oh-mode { opacity: 0; }
@keyframes map-in { from { opacity: 0; } }
@media (pointer: coarse) {
  .oh-ctrl { right: 12px; top: 12px; } .oh-exit kbd { display: none; } .oh-exit { padding: 0 16px !important; }
  .oh-mapwrap { left: auto; right: 12px; bottom: auto; top: 196px; width: 110px; height: 110px; }
  .office-stage.map-big .oh-mapwrap { top: 0; right: 0; width: auto; height: auto; }
  .oh-ctrl [data-tip]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .oh-sound .w1, .oh-sound .w2, .oh-sound .spk { animation: none !important; } }

.office-stage.map-big .oh-maphint { flex-wrap: wrap; justify-content: center; gap: 8px 16px; max-width: min(78vh, 88vw); }
.oh-maphint span { display: inline-flex; align-items: center; gap: 6px; } .oh-maphint i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5); }

/* the reviews when there are too few for the ring: side by side (one alone, wide and centred, with a large quote mark) */
.vo-rows { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.vo-rows[data-n='1'] { --cols: 1; max-width: 860px; margin-inline: auto; } .vo-rows[data-n='2'] { --cols: 2; }
.vo-rows .vo-card { position: relative; left: auto; top: auto; width: auto; transform: none; opacity: 1; min-height: 0; border-color: rgba(157, 130, 255, .35); box-shadow: 0 40px 90px -30px rgba(92, 51, 204, .5); }
.vo-rows[data-n='1'] .vo-card { padding: clamp(28px, 4vw, 48px); }
.vo-rows[data-n='1'] .vo-card::before { content: '“'; position: absolute; right: 28px; top: -6px; font: 700 140px/1 var(--sans); color: rgba(157, 130, 255, .18); pointer-events: none; }
.vo-rows[data-n='1'] blockquote { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.55; }
@media (max-width: 800px) { .vo-rows { --cols: 1 !important; } }

/* ------------------------------------------------------------------ phones and tablets: the fixes from the responsive audit */
/* the FAQ: one column below a laptop's width (the side card on top, then the questions at full width) */
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } .faq-ask { max-width: none; } }
/* the studio's feature card: the icon row in the flow, so it never sits on the title */
@media (max-width: 1000px) { .office-what .ow-feature { justify-content: flex-start; min-height: 0; padding: 24px; } .ow-feature .ow-top { position: static; } }
/* the big email in the footer breaks at the @, never inside a word */
.foot-ask { overflow-wrap: normal; word-break: normal; }
@media (max-width: 560px) { .foot-ask { font-size: clamp(22px, 7vw, 30px); line-height: 1.15; } }
/* touch: every link and button at least 44px tall to hit with a thumb */
@media (pointer: coarse) {
  .foot-cols a, .foot-cols p > a, .link, .foot-reach a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-cols a { display: flex; }
  .faq .faq-l summary { min-height: 56px; }
}
/* small phones: a little less air at the sides and between sections */
@media (max-width: 380px) { :root { --gut: 16px; } .sec { padding-top: 84px; padding-bottom: 84px; } }
/* built on demand (phones, the light tier): until Enter is pressed the stage says so, not "building" */
.office-stage.on-demand:not(.is-building) .office-veil span { display: none; }
.office-stage.on-demand:not(.is-building) .office-veil::after { content: 'Tap Enter to load the 3D studio'; position: absolute; top: 38%; font: 400 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }