@font-face {font-family:Archivo;src:url('assets/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face {font-family:Bodoni;src:url('assets/bodoni-italic.woff2') format('woff2');font-weight:400 900;font-style:italic;font-display:swap}
:root {
  --bg:#080a0e; --text:#f4f2eb; --muted:#c1c8d4; --edge:#9aacc248; --accent:#aed0fb;
  --gutter:clamp(22px,5vw,94px); --soft:var(--muted); --line:var(--edge);
  color-scheme:dark; background:var(--bg); color:var(--text);
  font:400 16px/1.45 Archivo,Arial,sans-serif; scrollbar-color:#526172 var(--bg);
}
*,*::before,*::after {box-sizing:border-box}
body,h1,h2,p,ul,fieldset {margin:0}
fieldset {padding:0;border:0;min-width:0}
a {color:inherit;text-decoration:none}
button,input,textarea {font:inherit}
button {cursor:pointer}
button:disabled {opacity:.4;cursor:default}
[hidden] {display:none!important}
svg {width:1em;height:1em;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.symbols {position:absolute;width:0;height:0}
:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
::selection {background:var(--accent);color:#10151d}
.shell {width:min(calc(100% - var(--gutter)*2),1560px);margin-inline:auto}
.skip {position:fixed;top:10px;left:10px;z-index:10;transform:translateY(-180%);background:#f6f3ed;color:#10151d;padding:10px}
.skip:focus {transform:none}
.nav {height:68px;position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:clamp(10px,3vw,50px);z-index:4;border-bottom:1px solid var(--edge)}
.nav nav {margin-left:auto;display:flex;gap:clamp(12px,3vw,46px);font-size:13px;align-items:center}
.nav nav a:last-child,.direct {display:inline-flex;align-items:center;gap:7px}
.nav nav a:hover,.direct:hover,.active-case:hover {color:var(--accent)}
.brand {font-size:26px;font-weight:820;letter-spacing:-.035em;display:inline-flex;gap:7px;align-items:center;line-height:1}
.brand span {font-size:10px;font-weight:600;letter-spacing:.08em}
.arrows button {color:var(--text);border:1px solid var(--edge);background:#0a111bc9;display:grid;place-items:center;width:42px;height:42px;font-size:17px}
.arrows button:hover {background:#24364e}
.sequence {position:relative;background:radial-gradient(ellipse at 30% 48%,#111b2a,transparent 57%)}
.hero-scene {position:relative;isolation:isolate;overflow:clip}
.hero-scene .space {opacity:var(--scene-opacity,1)}
.hero-scene.has-departed .space,.orbit-controls.has-departed {visibility:hidden}
.orbit-controls {transition:opacity .18s ease,visibility 0s}
.orbit-controls.has-departed {opacity:0;transition-delay:0s,.18s;pointer-events:none}
.orbit-controls.has-departed :is(a,button) {pointer-events:none}
.space {height:100svh;position:sticky;top:0;margin-bottom:-100svh;z-index:-1;background:#0b1018;overflow:hidden}
.space::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#07090de0 0%,#07090d59 22%,transparent 40%,transparent 71%,#07090da8 96%)}
.space canvas {display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.space canvas.dragging {cursor:grabbing}
.opening,.studio,.contact {position:relative;pointer-events:none}
.opening a,.opening button,.studio a,.contact a,.contact form {pointer-events:auto}
.opening {height:max(610px,145svh);padding-top:clamp(105px,15svh,170px)}
.intro h1,.studio h2,.contact h2,.archive h2 {font-size:clamp(50px,5.6vw,86px);font-weight:560;line-height:.94;letter-spacing:-.04em;text-wrap:balance}
em {font-family:Bodoni,Georgia,serif;font-style:italic;font-weight:470}
.intro {position:relative;isolation:isolate;max-width:690px;text-shadow:0 2px 18px #030407,0 6px 35px #030407cc;transform:translateY(var(--intro-y,0px));opacity:var(--intro-alpha,1)}
.intro::before {content:'';position:absolute;z-index:-1;inset:-25px 15% -35px -28px;background:radial-gradient(ellipse at 20% 50%,#080a0ee0 10%,#080a0eb0 38%,#080a0e00 75%)}
.intro p,.studio-copy > p,.contact-copy > p {color:var(--muted);margin-top:20px;font-size:clamp(15px,1.25vw,18px);line-height:1.5}
.orbit-controls {position:absolute;top:calc(max(610px,100svh) - 86px);left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:14px;border-top:1px solid var(--edge)}
.orbit-name {display:flex;align-items:center;gap:15px}
.position {font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;white-space:nowrap}
.active-case {display:flex;align-items:center;gap:9px;font-size:clamp(18px,2vw,29px);line-height:1.1}
.active-case strong {font-weight:600}
.active-case svg,.service-links svg {font-size:16px;color:var(--accent)}
.scroll-cue {font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.scroll-cue svg {transform:rotate(90deg)}
.arrows {display:flex;gap:6px;justify-self:end}
.arrows .prev svg,.arrows .strip-prev svg {transform:rotate(180deg)}
.archive {min-height:83svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;padding-block:clamp(80px,14svh,145px) clamp(60px,9svh,100px);background:linear-gradient(180deg,transparent,#080a0eac 75%,transparent)}
.archive-inner {min-width:0}
.archive.is-pinned {display:block;min-height:0;height:calc(var(--archive-stage) + var(--archive-travel));padding:0}
.is-pinned .archive-inner {position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:30px}
.archive-head {display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.archive-head p {font-size:13px;color:var(--muted)}
.filmstrip {--preview-height:clamp(210px,54svh,560px);list-style:none;display:flex;align-items:center;gap:clamp(18px,4vw,72px);padding:5px 4px 10px;overflow-x:auto;scrollbar-width:thin}
.is-pinned .filmstrip {overflow:hidden}
.filmstrip > li {flex:0 0 min(70%,calc(var(--preview-height) * 1.6));min-width:0}
.filmstrip > .is-portrait {flex-basis:min(56%,calc(var(--preview-height) * .462))}
.filmstrip a {display:block;position:relative}
.filmstrip figure {margin:0;aspect-ratio:8/5;background:#0e141d;overflow:hidden;border:1px solid var(--edge);border-radius:10px}
.filmstrip .is-portrait figure {aspect-ratio:390/844}
.filmstrip img {width:100%;height:100%;display:block;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.17,.8,.25,1)}
.filmstrip a:hover img,.filmstrip a:focus-visible img {transform:scale(1.06)}
.filmstrip .is-portrait img {object-fit:contain}
.filmstrip .project-label {display:flex;justify-content:space-between;align-items:center;gap:9px;padding:12px 2px 0;font-size:clamp(16px,1.7vw,25px);line-height:1.15}
.archive-progress {display:none}
.is-pinned .archive-progress {display:block;height:2px;margin-top:clamp(16px,4svh,36px);background:var(--edge)}
.archive-progress::before {content:'';display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--archive-progress,0));transform-origin:left}
.studio,.contact {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;min-height:115svh;padding-block:clamp(72px,12svh,140px)}
.studio-copy,.contact-copy {position:relative;max-width:630px;text-shadow:0 3px 23px #02050bed}
.studio h2,.contact h2 {font-size:clamp(42px,5.3vw,78px)}
.studio-copy > p {max-width:38ch}
.service-links {margin-top:32px}
.service-links a {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 0;border-top:1px solid var(--edge)}
.service-links a:last-child {border-bottom:1px solid var(--edge)}
.service-links a:hover {color:var(--accent)}
.service-links strong {font-size:19px;font-weight:590}
.service-links small {display:block;margin-top:3px;color:var(--muted);font-size:13px}
.contact {min-height:110svh}
.contact-copy {padding:clamp(16px,3vw,38px);margin-inline-start:calc(clamp(16px,3vw,38px) * -1);background:linear-gradient(110deg,#090d16ed,#0b131ee6 70%,#0b131ed1);border:1px solid #7087a34f;text-shadow:none}
.contact-copy > p {margin-top:10px}
#contact-form {margin-top:23px;display:grid;gap:15px}
#contact-form label,#contact-form legend {display:grid;gap:6px;color:#dee5ef;font-size:13px}
#contact-form legend {margin-bottom:8px}
.options {display:flex;gap:6px;flex-wrap:wrap}
.options label {position:relative}
.options input {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.options span {padding:7px 9px;border:1px solid #8396ae75}
.options input:checked + span {background:#d6e7fb;color:#101922;border-color:#d6e7fb}
.options input:focus-visible + span {outline:2px solid var(--accent);outline-offset:3px}
.fields {display:grid;grid-template-columns:1fr 1fr;gap:14px}
#contact-form input:not([type=radio]),#contact-form textarea {width:100%;min-width:0;background:#0a111bdd;border:1px solid #889ab277;color:var(--text);border-radius:0;padding:8px 9px;font-size:16px}
.submit {justify-self:start;display:inline-flex;align-items:center;gap:16px;background:#dbe8f9;color:#121a24;border:0;padding:10px 13px;font-size:14px;font-weight:620}
.submit:hover {background:#fff}
.direct {margin-top:18px;font-size:13px;color:var(--muted)}
.draft {display:flex;gap:13px;flex-wrap:wrap;align-items:center;font-size:13px}
.draft a {text-decoration:underline}
.draft button {background:#192637;color:var(--text);border:1px solid var(--edge);padding:6px 8px}
.status {font-size:13px;color:var(--muted)}
.status:empty {display:none}
.footer {display:flex;justify-content:space-between;align-items:center;padding-block:23px 29px;border-top:1px solid var(--edge);font-size:12px}
.footer > a:last-child {display:flex;gap:8px;align-items:center}
.footer svg {transform:rotate(-90deg)}
.case-header {display:flex;align-items:center;justify-content:space-between}
@media (max-width:760px) {
  .nav {height:55px;gap:9px}
  .nav nav {gap:12px;font-size:12px}
  .nav nav svg {display:none}
  .brand {font-size:21px;gap:4px}
  .brand span {font-size:9px}
  .opening {height:max(690px,130svh);padding-top:84px}
  .intro h1 {font-size:clamp(40px,9.8vw,65px)}
  .intro p {margin-top:12px;font-size:13px}
  .orbit-controls {top:calc(max(610px,100svh) - 69px);grid-template-columns:1fr auto;gap:9px;padding-top:9px}
  .orbit-name {gap:8px}
  .active-case {font-size:18px}
  .scroll-cue {display:none}
  .arrows button {width:36px;height:36px}
  .archive {min-height:72svh;padding-top:75px}
  .archive-head {margin-bottom:16px}
  .archive-head p {max-width:16ch}
  .filmstrip {--preview-height:clamp(180px,38svh,340px);gap:18px}
  .filmstrip > li {flex-basis:82%}
  .studio,.contact {grid-template-columns:1fr;align-items:end;min-height:100svh;padding-top:39svh;padding-bottom:60px}
  .studio-copy {background:linear-gradient(0deg,#080a0ef5,#080a0ed6 80%,transparent);padding:13px 0 6px}
  .studio h2,.contact h2 {font-size:clamp(38px,9.2vw,57px)}
  .contact-copy {margin:0}
}
@media (max-width:355px) {
  .brand span {display:none}
  .nav nav {gap:9px}
  .fields {grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) {
  .orbit-controls {transition:none}
  .filmstrip img {transition:none}
}