:root{
  --ink:#04090f; --ink-2:#06121c; --deep:#0a2231; --line:rgba(160,230,240,.14);
  --cyan:#00ffff; --cyan-2:#5ff6f6; --fg:#e9f6f7; --muted:#93aab3; --dim:#637e89;
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,1,.36,1);
}
@font-face{font-family:"Inter Tight";src:url(assets/fonts/intertight.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink);color:var(--fg);scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:var(--sans);font-size:clamp(16px,1.05vw,18px);line-height:1.55;letter-spacing:-.005em;background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;line-height:.95}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--cyan);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1600px;margin:0 auto}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--cyan)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 22px}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

/* loader */
.loader{position:fixed;inset:0;z-index:90;background:var(--ink);display:grid;place-items:center;animation:loaderOut .8s 4s var(--ease) forwards}
.loader__inner{display:grid;justify-items:center;gap:22px}
.loader__mark{width:96px;height:auto;opacity:.95;filter:drop-shadow(0 0 18px rgba(0,255,255,.35));animation:breathe 2.4s ease-in-out infinite}
.loader__line{width:160px;height:1px;background:rgba(255,255,255,.12);overflow:hidden}
.loader__line span{display:block;height:100%;width:100%;background:var(--cyan);transform:scaleX(.08);transform-origin:left;transition:transform .5s var(--ease)}
.loader__words{margin:0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.loader__words em{font-style:normal;color:var(--cyan)}
.is-loaded .loader{animation:none;pointer-events:none}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}
@keyframes breathe{50%{transform:scale(1.06);opacity:.8}}

/* stage: fixed 3D ocean */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 70% at 50% 42%,#0b3a4a 0%,#06161f 45%,var(--ink) 80%)}
#flow{position:absolute;inset:0;width:100%;height:100%}
.stage__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.no-webgl .stage__poster{opacity:1}
.no-webgl #flow{display:none}
.stage__ideas{position:absolute;inset:0;overflow:hidden}
.idea{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#bffcfc;white-space:nowrap;display:flex;align-items:center;gap:8px;text-shadow:0 0 18px rgba(0,255,255,.55)}
.idea::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.idea--img{width:120px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,255,255,.25)}
.idea--img::before{display:none}
.idea--img img{width:100%;height:100%;object-fit:cover}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;background-image:url(assets/img/grain.png);background-size:128px;animation:grain 1.2s steps(4) infinite}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-1%,3%)}}

/* cursor */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .3s}
  .has-cursor .cursor.is-on{opacity:1}
  .has-cursor, .has-cursor a, .has-cursor button{cursor:none}
  .cursor__dot{position:fixed;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
  .cursor__ring{position:fixed;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid rgba(0,255,255,.45);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
  .cursor__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
  .cursor.is-link .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(0,255,255,.8)}
  .cursor.is-label .cursor__ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--cyan);border-color:var(--cyan)}
  .cursor.is-label .cursor__label{opacity:1}
  .cursor.is-label .cursor__dot{opacity:0}
}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:20px;padding:18px var(--pad);transition:transform .5s var(--ease),background .4s}
.nav.is-hidden{transform:translateY(-110%)}
.nav.is-solid{background:linear-gradient(to bottom,rgba(4,9,15,.85),rgba(4,9,15,0))}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{width:44px;height:auto;filter:drop-shadow(0 0 10px rgba(0,255,255,.35))}
.brand__word{font-size:17px;font-weight:500;letter-spacing:.02em}
.brand__word b{font-weight:700;color:var(--cyan)}
.nav__links{display:none;gap:30px;font-size:14px;color:var(--muted)}
.nav__links a{position:relative;padding:6px 0;transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.pill{display:none;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;border:1px solid rgba(0,255,255,.35);font-size:14px;font-weight:600;background:rgba(4,9,15,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s,color .3s}
.pill:hover{background:var(--cyan);color:var(--ink)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 10px #25d366}
.menu-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-content:center;gap:6px;background:rgba(4,9,15,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.menu-btn i{display:block;width:18px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease)}
.menu-btn[aria-expanded="true"] i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:rgba(4,9,15,.96);display:flex;flex-direction:column;justify-content:center;padding:100px var(--pad) 40px}
.menu[hidden]{display:none}
.menu nav{display:grid;gap:6px}
.menu nav a{font-size:clamp(40px,12vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1.1;display:flex;align-items:baseline;gap:14px}
.menu nav a small{font-size:12px;color:var(--cyan);letter-spacing:.1em;font-weight:600}
.menu__foot{margin-top:auto;color:var(--muted);font-size:15px}
.menu__foot a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(0,255,255,.5);text-underline-offset:4px}
@media (min-width:900px){.nav__links{display:flex}.pill{display:inline-flex}.menu-btn{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--cyan);color:var(--ink);box-shadow:0 0 0 0 rgba(0,255,255,.5),0 10px 40px rgba(0,255,255,.25)}
.btn--solid::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.btn--solid:hover::before{transform:none}
.btn--ghost{border:1px solid rgba(233,246,247,.28);background:rgba(4,9,15,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.magnetic{will-change:transform}

/* hero */
main{position:relative;z-index:1}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px var(--pad) 28px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,9,15,.75) 0%,rgba(4,9,15,0) 55%);pointer-events:none}
.hero__inner{position:relative;max-width:1400px}
.hero__title{font-size:clamp(58px,15.5vw,236px);line-height:.86;letter-spacing:-.055em;font-weight:700;margin:0 0 26px;text-wrap:balance}
.hero__title .line{display:block}
.line--serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--cyan);text-shadow:0 0 50px rgba(0,255,255,.35);padding-left:.04em}
.hero__lede{font-size:clamp(17px,1.5vw,22px);max-width:30ch;color:#c6dde2;margin-bottom:28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__foot{position:relative;display:flex;align-items:center;gap:14px;margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero__coords{margin-left:auto;display:none}
.scrollcue{width:60px;overflow:hidden}
.scrollcue svg{width:120px;height:16px;animation:cue 2.2s linear infinite}
.scrollcue path{fill:none;stroke:var(--cyan);stroke-width:1.5}
@keyframes cue{to{transform:translateX(-30px)}}
@media (min-width:760px){.hero__coords{display:block}}

/* split text */
.ch{display:inline-block}
.wd{display:inline-block;white-space:nowrap}
.mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.line--serif .mask,.serif .mask{padding:0 .12em .12em;margin:0 -.12em -.12em}

/* name */
.name{position:relative;min-height:100svh;display:flex;align-items:center;background:linear-gradient(to bottom,rgba(4,9,15,0),var(--ink) 38%)}
.name__pin{width:100%;padding:120px var(--pad) 80px;max-width:1600px;margin:0 auto}
.name__title{font-size:clamp(64px,14vw,230px);font-weight:700;letter-spacing:-.06em;line-height:.9;display:grid;gap:.06em;margin-bottom:40px}
.nm{display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap}
.nm__ghost{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cyan);letter-spacing:-.02em;display:inline-block;overflow:hidden;vertical-align:bottom}
.nm__plus,.nm__eq{font-weight:300;color:var(--dim);display:inline-block;margin:0 .14em;font-size:.6em;align-self:center}
.nm__idea{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--cyan);text-shadow:0 0 60px rgba(0,255,255,.35);display:inline-block}
.nm--2{color:var(--fg)}
.name__copy{display:grid;gap:24px;max-width:1100px}
.name__copy p{font-size:clamp(18px,1.7vw,26px);line-height:1.45;color:#c6dde2;max-width:34ch;margin:0}
.name__copy b{color:var(--fg);font-weight:600}
.name__pull{font-size:clamp(22px,2.4vw,36px)!important;color:var(--fg)!important;font-weight:500;letter-spacing:-.02em}
.name__pull em{font-family:var(--serif);color:var(--cyan);font-size:1.15em}
@media (min-width:900px){.name__copy{grid-template-columns:1fr 1fr;align-items:end}}

/* reel in type */
.reeltype{position:relative;background:var(--ink)}
.reeltype__pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
.reeltype__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reeltype__mask{position:absolute;inset:-2px;background:var(--ink);color:#fff;mix-blend-mode:multiply;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:800;font-size:min(21vw,36svh);line-height:.82;letter-spacing:-.06em;text-transform:lowercase;transform-origin:50% 50%;will-change:transform;text-align:center}
.rt{display:block}
.rt em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0}
@media (max-aspect-ratio:3/4){.reeltype__mask{font-size:24vw;line-height:.86}.rt--2 em{display:block;text-align:center}}
.reeltype__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.reeltype__cap .eyebrow{margin:0;color:#d9f2f5}

/* panels flow over the ocean */
.panel{position:relative;background:var(--ink)}
.wave-edge{position:absolute;left:0;right:0;top:-79px;height:80px;pointer-events:none}
.wave-edge svg{width:100%;height:100%}
.wave-edge path{fill:var(--ink)}
.wave-edge--bottom{top:auto;bottom:-79px}
.sec-head{margin-bottom:clamp(40px,6vw,90px)}
.sec-title{font-size:clamp(46px,8.4vw,140px);letter-spacing:-.05em;line-height:.92}
.sec-title .serif{display:inline-block}

/* services */
.services{padding:clamp(90px,12vw,170px) 0 clamp(70px,9vw,130px)}
.svcs{border-top:1px solid var(--line)}
.svc{position:relative;display:grid;gap:16px;padding:28px 0 32px;border-bottom:1px solid var(--line)}
.svc__head{display:flex;align-items:baseline;gap:18px}
.svc__no{font-size:13px;color:var(--cyan);font-weight:600;letter-spacing:.1em;min-width:2.4em}
.svc__title{font-size:clamp(34px,5.6vw,92px);letter-spacing:-.045em;font-weight:600;transition:color .4s,transform .6s var(--ease)}
.svc__body{padding-left:calc(2.4em + 18px)}
.svc__body p{color:#b7cfd5;max-width:52ch;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.svc__media{border-radius:16px;overflow:hidden;aspect-ratio:16/10;margin-left:calc(2.4em + 18px)}
.svc__media img{width:100%;height:100%;object-fit:cover}
.svc__media--web{position:relative;background:linear-gradient(135deg,#062330,#04131c);border:1px solid var(--line);display:grid;align-content:center;gap:12px;padding:12% 14%}
.svc__media--web span{display:block;height:10px;border-radius:6px;background:rgba(0,255,255,.18)}
.svc__media--web span:nth-child(1){width:70%;height:22px;background:rgba(233,246,247,.85)}
.svc__media--web span:nth-child(2){width:90%}
.svc__media--web span:nth-child(3){width:46%;height:30px;border-radius:999px;background:var(--cyan)}
.svc__media--web i{position:absolute;inset:auto 0 0 0;height:45%;background:repeating-radial-gradient(circle at 50% 160%,rgba(0,255,255,.0) 0 14px,rgba(0,255,255,.25) 15px 16px);animation:webwave 6s linear infinite}
@keyframes webwave{to{background-position:0 -32px}}
.svcs__more{margin-top:34px;color:var(--muted);max-width:60ch}
.svc-float{display:none}
@media (min-width:900px) and (hover:hover){
  .svc{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;padding:34px 0;cursor:default}
  .svc__media{display:none}
  .svc__body{padding-left:0}
  .svc:hover .svc__title{color:var(--cyan);transform:translateX(18px)}
  .svc-float{display:block;position:fixed;left:0;top:0;width:360px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;pointer-events:none;z-index:5;opacity:0;transform:scale(.6);box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(0,255,255,.2)}
  .svc-float img,.svc-float .svc__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;display:block;aspect-ratio:auto}
}

/* work */
.work{padding:clamp(80px,8vw,120px) 0 30px;overflow:hidden}
.work__pin{position:relative}
.work__head{display:grid;gap:0;margin-bottom:0;padding-top:clamp(70px,9vh,100px)}
.work__hint{display:none;color:var(--muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:18px 0 0}
.work__hint span{color:var(--cyan);display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.work__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:30px 0 50px}
.work__viewport::-webkit-scrollbar{display:none}
.work__track{display:flex;gap:clamp(18px,3vw,48px);padding:0 var(--pad);width:max-content;align-items:center}
.card{flex:0 0 auto;scroll-snap-align:center;will-change:transform}
.card figure{margin:0}
.card__media{position:relative;border-radius:18px;overflow:hidden;height:min(52svh,118vw);aspect-ratio:4/5;background:#0a1a24}
.card:nth-child(3n+2) .card__media{height:min(44svh,100vw);aspect-ratio:3/4}
.card:nth-child(3n) .card__media{aspect-ratio:1/1}
.card figcaption{max-width:min(52svh*.8,94vw)}
.card__media picture,.card__media img{width:100%;height:100%;object-fit:cover}
.card__media img{transform:scale(1.18);will-change:transform;transition:filter .6s}
.card:hover .card__media img{filter:saturate(1.15) brightness(1.05)}
.card figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding-top:16px}
.card__no{grid-row:span 2;font-size:12px;font-weight:600;color:var(--cyan);padding-top:5px}
.card__title{font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.card__meta{font-size:13px;color:var(--muted)}
.card__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--cyan);box-shadow:0 0 40px rgba(0,255,255,.6)}
.card__play::after{content:"";position:absolute;left:31px;top:24px;border-left:20px solid var(--ink);border-top:14px solid transparent;border-bottom:14px solid transparent}
.work__progress{margin:0 var(--pad);height:1px;background:var(--line);position:relative}
.work__progress span{position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left}
.is-enhanced .work__viewport{overflow:visible;scroll-snap-type:none;padding:clamp(30px,5vh,60px) 0 clamp(40px,6vh,70px)}
.is-enhanced .work__hint{display:block}
@media (min-width:900px){.card__media{height:min(54vh,620px)}.card:nth-child(3n+2) .card__media{height:min(46vh,520px)}}

/* process */
.process{padding:clamp(70px,8vw,120px) 0 clamp(90px,10vw,150px)}
.flowline{position:relative}
.flowline__svg{display:none}
.flowline__base{fill:none;stroke:var(--line);stroke-width:1.5}
.flowline__draw{fill:none;stroke:var(--cyan);stroke-width:2;filter:drop-shadow(0 0 6px rgba(0,255,255,.6))}
.flowline__dot{display:none}
.steps{display:grid;gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:linear-gradient(var(--cyan),rgba(0,255,255,.05))}
.step{position:relative;padding:0 0 42px 40px}
.step::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border-radius:50%;background:var(--ink);border:1.5px solid var(--cyan);box-shadow:0 0 12px rgba(0,255,255,.6)}
.step__no{font-size:12px;color:var(--cyan);font-weight:600;letter-spacing:.12em}
.step h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.035em;margin:8px 0 12px;font-weight:600}
.step p{color:#b7cfd5;max-width:34ch;margin:0}
@media (min-width:900px){
  .flowline{padding-top:250px}
  .flowline__svg{display:block;position:absolute;left:0;top:0;width:100%;height:220px;overflow:visible}
  .flowline__dot{display:block;position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(0,255,255,.25),0 0 30px 8px rgba(0,255,255,.7)}
  .steps{grid-template-columns:repeat(4,1fr);gap:40px}
  .steps::before{display:none}
  .step{padding:26px 0 0;border-top:1px solid var(--line)}
  .step::before{top:-6px}
}

/* studio */
.studio{padding:clamp(90px,10vw,150px) 0 clamp(60px,7vw,100px)}
.studio__grid{display:grid;gap:50px}
.studio__body{color:#c0d7dc;font-size:clamp(17px,1.4vw,21px);max-width:44ch;margin:28px 0 34px}
.cities{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px}
.city{display:grid;gap:4px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(10,34,49,.35);transition:border-color .3s,background .3s}
.city:hover{border-color:var(--cyan);background:rgba(0,255,255,.06)}
.city__name{font-size:22px;font-weight:600;letter-spacing:-.02em}
.city__meta{font-size:12px;color:var(--muted)}
.city__time{font-size:13px;color:var(--cyan);font-variant-numeric:tabular-nums}
.studio__media{position:relative;min-height:340px}
.studio__img{position:relative;border-radius:18px;overflow:hidden}
.studio__img img{width:100%;height:100%;object-fit:cover}
.studio__img--a{aspect-ratio:16/10;width:88%}
.studio__img--b{position:absolute;right:0;bottom:-30px;width:52%;aspect-ratio:3/2;box-shadow:0 30px 60px rgba(0,0,0,.6);border:1px solid rgba(0,255,255,.2)}
.kit{margin-top:clamp(70px,7vw,110px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0}
.kit__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.kit__track span{font-size:clamp(22px,3vw,44px);font-weight:600;letter-spacing:-.03em;padding:0 .7em;color:#8fb0b8;white-space:nowrap;display:flex;align-items:center;gap:1.4em}
.kit__track span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (min-width:900px){.studio__grid{grid-template-columns:1fr 1.1fr;align-items:center}}

/* contact over the ocean again */
.contact{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:clamp(140px,16vw,220px)}
.contact::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink) 0%,rgba(4,9,15,.2) 40%,rgba(4,9,15,.55) 100%);pointer-events:none}
.contact__inner{position:relative;width:100%}
.contact__title{font-size:clamp(56px,11.5vw,196px);letter-spacing:-.055em;line-height:.88;margin-bottom:clamp(40px,5vw,70px)}
.contact__title .serif{text-shadow:0 0 50px rgba(0,255,255,.35)}
.contact__cta{display:grid;gap:34px;align-items:center}
.orb{width:clamp(150px,18vw,220px);aspect-ratio:1;border-radius:50%;background:var(--cyan);color:var(--ink);display:grid;place-content:center;justify-items:center;gap:8px;font-weight:700;font-size:15px;box-shadow:0 0 0 0 rgba(0,255,255,.5),0 0 80px rgba(0,255,255,.35);animation:pulse 2.8s ease-out infinite;position:relative}
.orb svg{width:34px;height:34px;fill:currentColor}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,255,255,.45),0 0 80px rgba(0,255,255,.35)}100%{box-shadow:0 0 0 34px rgba(0,255,255,0),0 0 80px rgba(0,255,255,.35)}}
.contact__lines{display:grid;gap:6px}
.contact__note{color:var(--muted);margin:0 0 8px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,30px)}
.bigline{display:flex;align-items:baseline;gap:14px;font-size:clamp(30px,4.4vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.15;transition:color .3s;width:max-content}
.bigline small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:600;min-width:6.6em}
.bigline:hover{color:var(--cyan)}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(40px,5vw,70px)}
.socials a{display:inline-block;padding:10px 18px;border-radius:999px;border:1px solid rgba(233,246,247,.2);font-size:14px;background:rgba(4,9,15,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,color .3s}
.socials a:hover{border-color:var(--cyan);color:var(--cyan)}
.foot{position:relative;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding-top:28px;padding-bottom:calc(24px + env(safe-area-inset-bottom));margin-top:clamp(50px,6vw,90px);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot__tag{font-family:var(--serif);font-style:italic;font-size:17px;color:#cfeff3}
.foot__top{margin-left:auto}
.foot__top:hover{color:var(--cyan)}
@media (min-width:900px){.contact__cta{grid-template-columns:auto 1fr;gap:70px}}

/* reduced motion: everything visible and still */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain{display:none}
  .stage__poster{opacity:1}
  #flow{display:none}
}

/* films (work reel, 16:9) */
.card__link{display:block;color:inherit}
.card--film .card__media{display:block;height:auto;width:min(84vw,520px);aspect-ratio:16/9}
.card--film:nth-child(3n+2) .card__media{height:auto;width:min(74vw,440px);aspect-ratio:16/9}
.card--film:nth-child(3n) .card__media{aspect-ratio:16/9}
.card__cap{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding-top:16px;max-width:min(84vw,520px)}
.card__type{position:absolute;left:14px;top:14px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(4,9,15,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,255,255,.25)}
.card__play{transition:transform .5s var(--ease)}
.card--film .card__play{width:64px;height:64px;margin:-32px 0 0 -32px;opacity:.92}
.card--film .card__play::after{left:26px;top:20px;border-left-width:17px;border-top-width:12px;border-bottom-width:12px}
.card__link:hover .card__play,.card__link:focus-visible .card__play{transform:scale(1.15)}
.card__play--sm{width:52px;height:52px;margin:-26px 0 0 -26px}
.card__play--sm::after{left:21px;top:16px;border-left-width:14px;border-top-width:10px;border-bottom-width:10px}
.work__clients{color:var(--muted);max-width:60ch;margin:18px 0 0;font-size:15px}
@media (min-width:900px){
  .card--film .card__media{width:clamp(420px,40vw,700px)}
  .card--film:nth-child(3n+2) .card__media{width:clamp(360px,32vw,560px)}
  .card__cap{max-width:clamp(360px,40vw,700px)}
}
@media (min-width:900px) and (max-height:820px){.card--film .card__media{width:min(40vw,74vh)}.card--film:nth-child(3n+2) .card__media{width:min(32vw,60vh)}}

/* stills */
.stills{padding:clamp(90px,10vw,150px) 0}
.sec-head--row{display:grid;gap:22px;align-items:end}
.sec-note{color:var(--muted);max-width:44ch;margin:0}
@media (min-width:900px){.sec-head--row{grid-template-columns:1.4fr 1fr}}
.stills__grid{columns:2;column-gap:14px}
.still{break-inside:avoid;margin:0 0 14px}
.still__img{border-radius:14px;overflow:hidden;background:#0a1a24}
.still__img img{width:100%;transition:transform 1.2s var(--ease)}
.still:hover .still__img img{transform:scale(1.04)}
.still figcaption{font-size:12px;color:var(--muted);padding:8px 2px 0;line-height:1.4}
.still figcaption b{display:block;color:var(--fg);font-weight:600;font-size:14px}
@media (min-width:900px){.stills__grid{columns:3;column-gap:28px}.still{margin-bottom:28px}}

/* story */
.story{padding:clamp(80px,9vw,140px) 0}
.origins{display:grid;gap:18px}
.origin__link{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(10,34,49,.3);transition:border-color .4s,background .4s,transform .6s var(--ease)}
.origin__link:hover{border-color:rgba(0,255,255,.6);background:rgba(0,255,255,.05);transform:translateY(-4px)}
.origin__img{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:12px;background:#0a1a24}
.origin__img img{width:100%;height:100%;object-fit:cover}
.origin__yr{font-family:var(--serif);font-style:italic;color:var(--cyan);font-size:28px;line-height:1}
.origin__lab{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.origin__t{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.origin__sub{font-size:14px;color:var(--muted)}
.river{margin-top:clamp(40px,5vw,70px);display:grid;gap:0;position:relative;padding-left:30px}
.river::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--cyan),rgba(0,255,255,.05));border-radius:2px}
.river li{position:relative;padding:12px 0;color:#b7cfd5;font-size:clamp(16px,1.3vw,19px);border-bottom:1px solid var(--line)}
.river li::before{content:"";position:absolute;left:-29px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--cyan);box-shadow:0 0 10px rgba(0,255,255,.6)}
.river b{color:var(--fg);font-weight:700;margin-right:10px;font-variant-numeric:tabular-nums}
@media (min-width:900px){.origins{grid-template-columns:repeat(3,1fr);gap:28px}}

/* archive */
.archive{padding:clamp(80px,9vw,140px) 0}
.arcs{display:grid;gap:36px}
.arc__h{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
.arc__h small{color:var(--dim);font-size:12px}
.arc ul{border-top:1px solid var(--line)}
.arc a{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);transition:color .3s,padding .5s var(--ease)}
.arc__t{font-weight:600;letter-spacing:-.01em;line-height:1.3}
.arc__c{grid-column:1;font-size:13px;color:var(--muted)}
.arc__p{grid-column:2;grid-row:1/span 2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:10px;color:var(--cyan);transition:background .3s,color .3s}
.arc a:hover{color:var(--cyan);padding-left:10px}
.arc a:hover .arc__p{background:var(--cyan);color:var(--ink)}
@media (min-width:900px){.arcs{grid-template-columns:repeat(3,1fr);gap:48px 40px}}

/* player */
.player{border:0;padding:0;background:transparent;width:min(1200px,94vw);max-width:none;max-height:none;color:var(--fg)}
.player::backdrop{background:rgba(2,6,10,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.player__bar{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.player__title{margin:0;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__close{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:14px;font-weight:600}
.player__close:hover{border-color:var(--cyan);color:var(--cyan)}
.player__frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(0,255,255,.2)}
.player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.hero__eyebrow{text-shadow:0 1px 12px rgba(4,9,15,.95),0 0 2px rgba(4,9,15,.9)}
@media (max-width:899px){.is-enhanced .work__pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center}.is-enhanced .work__head{padding-top:70px}}

/* performance + mobile fixes */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main{overflow-x:clip} /* entrance offsets (cards sliding in from the side) never widen the page; clip keeps sticky working */
html.menu-open{overflow:hidden} /* the page stays put under the open menu (native scroll on touch screens) */
@media (hover:none){.grain{inset:0;animation:none}} /* phones: same grain, but one still layer instead of a moving one twice the screen */