/* Soulscape.ai company site, version 10 (Studios-led). Plain CSS, no framework. Pages are written by render.mjs; behaviour is in site.js.
   Ink is the ground. Paper is the type. Acid is a signal — play, start — and the two plates the page opens and closes on.
   Injekuta for the few large lines, Space Grotesk to read, Geist Mono for labels, Cormorant italic only where the company speaks.
   The phone is not the desktop made narrow: its own hero cut, an accordion slate, compact rows, two actions under the thumb, a menu of its own. */
@font-face{font-family:Inj;src:url(assets/fonts/Injekuta-Bold.otf);font-weight:700;font-display:swap}
@font-face{font-family:Grotesk;src:url(assets/fonts/SpaceGrotesk-Variable.ttf);font-weight:300 700;font-display:swap}
@font-face{font-family:Mono;src:url(assets/fonts/geist-mono-latin.woff2);font-display:swap}
@font-face{font-family:Cormorant;src:url(assets/fonts/CormorantGaramond-SemiboldItalic.ttf);font-style:italic;font-display:swap}
:root{--ink:#05070B;--paper:#F3EEE5;--acid:#D2FF1F;--dim:#A6A196;--line:rgba(243,238,229,.16);--g:clamp(20px,5vw,72px);--head:76px;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--head)}
body{margin:0;font:400 17px/1.55 Grotesk,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.lab{font:500 11.5px/1.3 Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--g);top:12px;z-index:100;background:var(--acid);color:var(--ink);padding:8px 12px}
a.inl{border-bottom:1px solid var(--acid);color:var(--paper);white-space:nowrap}
/* things arrive as you reach them (only when the script is running; never with reduced motion) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv:focus-visible,html.js .rv:focus-within{opacity:1;transform:none}   /* reached by keyboard: there at once */
/* a film's picture carries over from the list to its page */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-group(film){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ── header ─────────────────────────────────────────────────────────── */
.head{position:fixed;inset:0 0 auto 0;height:var(--head);z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);transition:background .3s,backdrop-filter .3s}
.head.solid{background:rgba(5,7,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:block;padding:10px 0}.brand img{height:15px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(22px,2.8vw,42px)}
.nav a.l{position:relative;font:500 12px/1 Mono,monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.82;padding:8px 0;transition:opacity .2s}
.nav a.l:hover,.nav a.l[aria-current]{opacity:1}
.nav a.l::before{content:"";position:absolute;left:-14px;top:50%;width:7px;height:7px;margin-top:-4px;background:var(--acid);transform:scale(0);transition:transform .3s var(--ease)}
.nav a.l[aria-current]::before{transform:none}
.btn{display:inline-flex;align-items:center;gap:.7em;font:500 12px/1 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;padding:14px 18px;white-space:nowrap}
.btn.acid{background:var(--acid);color:var(--ink)}
.btn.line{box-shadow:inset 0 0 0 1px rgba(243,238,229,.5)}
.menu-btn{display:none;align-items:center;gap:10px;font:500 12px/1 Mono,monospace;letter-spacing:.16em;text-transform:uppercase;padding:16px 0 16px 20px}
.menu-btn i{display:block;width:18px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.menu{display:none}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,11,.5) 0,rgba(5,7,11,0) 22%,rgba(5,7,11,0) 42%,rgba(5,7,11,.9) 100%);pointer-events:none}
.hero-in{position:absolute;left:var(--g);right:var(--g);bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "press now";row-gap:clamp(18px,3.2vh,32px)}
.hero-main{grid-area:main}
.hero h1{margin:0;font:700 clamp(26px,4vw,72px)/1.02 Inj;text-transform:uppercase;letter-spacing:.005em;white-space:nowrap}
.hero .lede{margin:clamp(14px,2.2vh,24px) 0 0;max-width:33em;font-size:clamp(15.5px,1.25vw,19px);line-height:1.5;color:#E4DFD5}
.hero .lede b{font-weight:500;color:var(--paper)}
.hero .cta{display:flex;align-items:center;gap:22px;margin-top:clamp(18px,3vh,30px);flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:14px;background:var(--acid);color:var(--ink);padding:16px 22px 16px 18px;font:700 clamp(13px,1.05vw,15.5px)/1 Inj;text-transform:uppercase;letter-spacing:.04em}
.play i{width:0;height:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.play span{font:500 11.5px/1 Mono;letter-spacing:.12em;opacity:.7}
.more{font:500 12px/1 Mono;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid rgba(243,238,229,.5);padding-bottom:5px}
/* the bar under the first screen: who has written about us, and what is on screen */
.press-strip,.now{border-top:1px solid rgba(243,238,229,.24);padding:17px 0 19px;display:flex;align-items:center}
.press-strip{grid-area:press;gap:clamp(18px,2.6vw,38px)}
.press-strip a,.press-strip span.m{display:block;padding:4px 0}
.press-strip img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.94}
.press-strip a:hover img{opacity:1}
.now{grid-area:now;gap:14px;justify-content:flex-end}
.now .t{font:700 13px/1 Inj;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.ticks{display:flex;gap:6px}
.ticks i{width:10px;height:10px;background:rgba(243,238,229,.3)}
.ticks i.on{background:var(--acid)}
.motion{position:absolute;right:var(--g);top:calc(var(--head) + 6px);z-index:3;font:500 10.5px/1 Mono;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,229,.7);padding:8px 0}

/* opening plate: the mark on acid, the film seen through its letters; then we go through a letter into the film */
#intro{position:fixed;inset:0;z-index:80;pointer-events:none}
#intro svg{display:block;width:100%;height:100%}
#intro.gone{opacity:0;transition:opacity .16s linear}
/* while the plate is up only the film is behind it; the words arrive once we are through */
.hero-in,.head,.motion{transition:opacity .7s .05s,transform .9s var(--ease)}
html.intro-on .hero-in,html.intro-on .head,html.intro-on .motion{opacity:0;transition:none}
html.intro-on .hero-in{transform:translateY(18px)}

/* ── the slate ──────────────────────────────────────────────────────── */
.sec{padding:clamp(64px,11vh,128px) var(--g) 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(20px,3.4vh,34px)}
.sec-head p{margin:0;max-width:30em;font-size:clamp(17px,1.5vw,22px);line-height:1.4}
.slate{display:flex;flex-direction:column;height:max(660px,calc(100svh - var(--head) - 150px));margin:0 calc(var(--g) * -1);gap:3px}
.band{position:relative;flex:1 1 0;min-height:0;overflow:hidden;transition:flex-grow .62s var(--ease);background:#000}
.band.on{flex-grow:8.2}
.band a{position:absolute;inset:0;display:block}
.band .pic{position:absolute;inset:0;display:block}
.band .pic img,.band .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .pic img{opacity:.74;transform:scale(1.02);transition:opacity .5s,transform 1.4s var(--ease)}
.band.on .pic img{opacity:1;transform:scale(1)}
.band .pic video{opacity:0;transition:opacity .35s}
.band.on .pic video.playing{opacity:1}
.band .sh{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,11,.78) 0,rgba(5,7,11,.3) 38%,rgba(5,7,11,0) 62%)}
.band.on .sh{background:linear-gradient(90deg,rgba(5,7,11,.62) 0,rgba(5,7,11,.1) 44%,rgba(5,7,11,0) 60%),linear-gradient(0deg,rgba(5,7,11,.74) 0,rgba(5,7,11,0) 46%)}
.band .row{position:absolute;left:var(--g);right:var(--g);top:0;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.band.on .row{align-items:flex-end;padding-bottom:clamp(20px,3.6vh,34px)}
.band .t{display:block;font:700 clamp(19px,2.25vw,34px)/1 Inj;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;transition:font-size .5s var(--ease)}
.band.on .t{font-size:clamp(30px,4.5vw,72px)}
.band .x{display:none;max-width:34em;margin:14px 0 0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.45;color:#E9E4DA}
.band .go{display:none;margin-top:16px;font:500 12px/1 Mono;letter-spacing:.16em;text-transform:uppercase;color:var(--acid)}
.band .go span+span{margin-left:.6em}
.band.on .x{display:block}.band.on .go{display:inline-block}
.band .by{font:500 11.5px/1.6 Mono;letter-spacing:.14em;text-transform:uppercase;text-align:right;white-space:nowrap;color:#E9E4DA}
.band .by b{font-weight:500;color:var(--paper)}
.band .by .k{color:var(--acid)}
.band .o{display:none}   /* the same words for a closed band on a phone, where the line on the right is not shown */
.band .by .sep{margin:0 .7em;opacity:.5}
.band.on .by{position:absolute;right:0;bottom:clamp(20px,3.6vh,34px)}
.band.on .by .sep{display:block;height:0;overflow:hidden;margin:0}
.band .pm{display:none}

/* ── studios: three words, one lit at a time; then three steps on one line ───────────────────────── */
.st-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.st h2{margin:14px 0 0;max-width:20em;font:500 clamp(26px,3.1vw,46px)/1.14 Grotesk;letter-spacing:-.015em}
.st h2 em{font-style:normal;color:var(--dim)}
.st-cta{flex:none;margin-bottom:6px}
.makes{list-style:none;margin:clamp(30px,5vh,56px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.make{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.make button{display:flex;align-items:center;padding:clamp(15px,2.3vh,24px) 0;text-align:left}
.make .w{font:700 clamp(34px,5.2vw,84px)/1 Inj;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(243,238,229,.46);transition:color .35s,-webkit-text-stroke-color .35s}
.make.on .w{color:var(--acid);-webkit-text-stroke-color:var(--acid)}
.make p{margin:0;justify-self:end;max-width:24em;font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:#E4DFD5;opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .5s var(--ease);pointer-events:none}
.make.on p{opacity:1;transform:none;pointer-events:auto}
.make .pm{display:none}
.make::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--acid);transform:scaleX(0);transform-origin:left}
.makes.auto .make.on::after{animation:fill 3.6s linear forwards}
.makes:not(.auto) .make.on::after{transform:scaleX(1);transition:transform .45s var(--ease)}
@keyframes fill{to{transform:scaleX(1)}}
.how{list-style:none;counter-reset:s;position:relative;margin:clamp(34px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,48px)}
.how::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:rgba(243,238,229,.3);transform-origin:left;transition:transform 1.5s var(--ease) .1s}
.how li{counter-increment:s;position:relative;padding-top:30px;font-size:15px;line-height:1.45;color:#D6D1C6;transition:opacity .5s,transform .6s var(--ease)}
.how li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;background:var(--acid)}
.how li b{display:block;font:700 15px/1.2 Inj;text-transform:uppercase;color:var(--paper);margin-bottom:6px}
.how li b::before{content:counter(s);color:var(--acid);margin-right:.6em}
.how li span{display:block;max-width:23em}
html.js .how:not(.in)::before{transform:scaleX(0)}
html.js .how:not(.in) li{opacity:0;transform:translateY(10px)}
.how.in li:nth-child(2){transition-delay:.4s}.how.in li:nth-child(3){transition-delay:.8s}

/* ── the company ────────────────────────────────────────────────────── */
.co h2{margin:12px 0 0;font:500 clamp(26px,3.1vw,46px)/1.12 Grotesk;letter-spacing:-.015em}
.co-lede{margin:clamp(14px,2.2vh,22px) 0 0;max-width:47em;font-size:clamp(17px,1.5vw,22px);line-height:1.42;color:#E4DFD5}
/* the gathering in four numbers; they count up once as they come into view */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:14px 0 0;padding:0;list-style:none}
.figs li{border-top:1px solid var(--line);padding-top:16px}
.figs b{display:block;font:700 clamp(36px,4.6vw,76px)/.95 Inj;white-space:nowrap}
.figs b i{font-style:normal;color:var(--acid)}
.figs li>span{display:block;margin-top:12px;font:500 11.5px/1.45 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:#CFCABF}
.figs-of{margin:clamp(30px,5.4vh,58px) 0 0;font:500 11px/1.4 Mono,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.also{margin:clamp(40px,7vh,76px) 0 0;font:italic 600 clamp(28px,3.3vw,50px)/1 Cormorant,serif}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2.6vh,26px)}
.door{display:block}
.door .im{aspect-ratio:16/10;overflow:hidden;background:#111}
.door .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.door:hover .im img{transform:scale(1.04)}
.door h3{margin:16px 0 6px;font:500 22px/1.2 Grotesk}
.door p{margin:0;color:#CFCABF;font-size:15.5px;line-height:1.5;max-width:34em}
.door .lab{display:block;margin-top:12px;color:var(--paper)}
.door .brief{display:none}
#lab-films{position:absolute}
.press-door{display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line);padding:22px 24px 6px}
.press-door>.lab{margin:0;color:var(--dim)}
.talk{display:flex;flex-direction:column;flex:1}
.talk a{display:flex;flex-direction:column;justify-content:center;flex:1;padding:20px 0}
.talk a+a{border-top:1px solid var(--line)}
.talk img{height:24px;width:auto;align-self:flex-start;filter:brightness(0) invert(1)}
.talk h3{margin:14px 0 0;font:500 clamp(18px,1.45vw,22px)/1.25 Grotesk}
.talk .lab{margin-top:10px}
.talk a:hover .lab{color:var(--acid)}
.talk .short,.chip .short{display:none}

/* ── who has been part of it: two rows that drift, each under its own true name ──────────────────── */
.proof{margin-top:clamp(48px,9vh,100px);padding:clamp(28px,4.4vh,44px) 0 clamp(34px,5.6vh,60px);border-top:1px solid var(--line);overflow:hidden}
.mq-block+.mq-block{margin-top:clamp(22px,3.6vh,38px)}
.mq-head{display:flex;align-items:baseline;gap:16px;padding:0 var(--g);flex-wrap:wrap}
.mq-head .lab{color:var(--paper)}
.mq-head .sub{font-size:14px;color:var(--dim)}
/* The edges fade under two strips of the ground colour, not a mask: a mask over a moving strip is redrawn every frame. The strip itself
   is short (two sets), is its own layer, and stands still whenever it is off screen. */
.mq{position:relative;margin-top:8px;overflow:hidden}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:7%;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(5,7,11,0))}
.mq::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(5,7,11,0))}
.mq .track{display:flex;width:max-content;opacity:.92;will-change:transform;animation:mq var(--dur,50s) linear infinite}
html.js .mq:not(.run) .track{animation-play-state:paused}
.mq.rev .track{animation-direction:reverse}
.mq:hover .track{animation-play-state:paused}
.mq .half{--gap:clamp(44px,5.4vw,88px);display:flex;align-items:center;gap:var(--gap);padding-right:var(--gap)}
.mq figure{margin:0;height:66px;display:grid;place-items:center;flex:none}
.mq img{display:block;max-width:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── contact: the page opens on acid and closes on acid ──────────────────────────────────────────── */
.contact{background:var(--acid);color:var(--ink);padding:clamp(64px,12vh,140px) var(--g) clamp(44px,8vh,84px)}
.contact :focus-visible,.ask :focus-visible{outline-color:var(--ink)}
.contact h2{margin:0;font:700 clamp(40px,8.6vw,148px)/.94 Inj;text-transform:uppercase;white-space:nowrap}
.contact .row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:clamp(28px,5vh,52px)}
.pick{display:flex;gap:10px;flex-wrap:wrap}
.chip{font:500 12px/1 Mono;letter-spacing:.13em;text-transform:uppercase;padding:14px 15px;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .2s,color .2s}
.chip.on{background:var(--ink);color:var(--acid)}
.send{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mailbig{background:var(--ink);color:var(--acid);font:500 clamp(18px,2.2vw,32px)/1 Mono;letter-spacing:.02em;padding:.66em .82em}
.copy{font:500 11.5px/1 Mono;letter-spacing:.14em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding:6px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px var(--g) 30px;color:var(--dim);font-size:13.5px}
.foot img{height:13px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a:hover{color:var(--paper)}
.dock{display:none}

/* ── showreel dialog ────────────────────────────────────────────────── */
dialog.reel{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,7,11,.97);color:var(--paper)}
dialog.reel::backdrop{background:rgba(5,7,11,.9)}
.reel-in{height:100%;display:grid;place-items:center;padding:64px var(--g) 56px}
.frame{width:min(100%,calc((100dvh - 150px) * 16 / 9));aspect-ratio:16/9;background:#000 center/cover no-repeat}
.frame video,.frame iframe{width:100%;height:100%;border:0;display:block;background:#000}
.reel .x{position:absolute;right:var(--g);top:8px;font:500 12px/1 Mono;letter-spacing:.16em;text-transform:uppercase;padding:16px 0 16px 20px}
.reel .alt{position:absolute;left:var(--g);bottom:20px;margin:0;font:500 11px/1 Mono;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.reel .alt a{color:var(--paper);border-bottom:1px solid var(--line)}
.reel .alt span:not(:empty){margin-right:1.2em}

/* ── project page ───────────────────────────────────────────────────── */
.p-hero{position:relative;height:min(84svh,860px);min-height:460px;overflow:hidden;background:#000;view-transition-name:film}
.p-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,11,.5) 0,rgba(5,7,11,0) 24%,rgba(5,7,11,0) 44%,rgba(5,7,11,.9) 100%)}
.p-in{position:absolute;left:var(--g);right:var(--g);bottom:clamp(24px,5vh,52px);z-index:2}
.p-in h1{margin:12px 0 0;font:700 clamp(32px,6.4vw,104px)/.96 Inj;text-transform:uppercase}
.facts{display:flex;flex-wrap:wrap;gap:10px 30px;padding:20px var(--g);border-bottom:1px solid var(--line)}
.p-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(30px,6vw,100px);padding:clamp(40px,8vh,90px) var(--g) 0}
.p-body .lead{margin:0 0 22px;font:500 clamp(21px,2.1vw,30px)/1.3 Grotesk;letter-spacing:-.01em}
.p-body p{margin:0 0 16px;color:#D9D4CA;max-width:40em}
.p-body h2.lab{margin:36px 0 12px}
.p-in .lab,.facts .lab,.next .lab{color:var(--paper)}
.p-body .links{margin-top:26px}
.p-body blockquote{margin:22px 0 0;padding:0 0 0 20px;border-left:2px solid var(--acid);font:italic 600 clamp(21px,1.9vw,27px)/1.3 Cormorant,serif;color:var(--paper);max-width:28em}
.p-body blockquote footer{font:500 11px/1.4 Mono;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:12px;font-style:normal}
.links{display:flex;gap:22px;flex-wrap:wrap}
.credits{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.credits li{display:grid;grid-template-columns:8.5em 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.credits li span:first-child{font:500 11px/1.9 Mono;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.poster{margin-top:28px}
.poster img{width:100%;height:auto}
.poster figcaption{margin-top:9px}
figure{margin:0}
.stills{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:clamp(40px,8vh,90px)}
.stills img{width:100%;height:100%;object-fit:cover;aspect-ratio:2.37/1}
.stills.full img:first-child{aspect-ratio:16/9}
.stills img:first-child{grid-column:1/-1}
.swipe{display:none}
.ask{margin-top:clamp(40px,8vh,90px);background:var(--acid);color:var(--ink);padding:clamp(34px,7vh,72px) var(--g);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ask h2{margin:0;font:700 clamp(28px,5vw,80px)/.96 Inj;text-transform:uppercase}
.ask p{margin:14px 0 0;max-width:30em;font-size:17px}
.ask a{font:500 clamp(15px,1.5vw,21px)/1 Mono;background:var(--ink);color:var(--acid);padding:.75em .9em;white-space:nowrap}
.next{position:relative;display:block;height:min(52svh,480px);overflow:hidden;background:#000}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .5s,transform 1.4s var(--ease)}
.next:hover img{opacity:.86;transform:scale(1.03)}
.next div{position:absolute;left:var(--g);right:var(--g);bottom:clamp(22px,5vh,46px)}
.next b{display:block;margin-top:10px;font:700 clamp(28px,5.4vw,84px)/.96 Inj;text-transform:uppercase}

/* ── summit page ────────────────────────────────────────────────────── */
.summit .p-in h1{font-size:clamp(24px,4.7vw,76px)}
.s-lede{margin:14px 0 0;font:500 clamp(18px,2vw,30px)/1.25 Grotesk;letter-spacing:-.01em}
.s-lede em{font:italic 600 1.14em/1 Cormorant,serif;letter-spacing:0}
.s-recap{margin-top:clamp(16px,2.6vh,26px);padding:16px 20px}
.s-recap i{width:0;height:0;border-left:10px solid var(--ink);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.s-num{padding-top:clamp(36px,6vh,64px)}
.s-num .figs{margin:0}
.progs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,52px)}
.prog .im{aspect-ratio:16/9;overflow:hidden;background:#111}
.prog .im img{width:100%;height:100%;object-fit:cover}
.prog>.lab{display:block;margin-top:20px;color:var(--acid)}
.prog h2{margin:10px 0 0;font:500 clamp(24px,2.7vw,42px)/1.1 Grotesk;letter-spacing:-.015em}
.prog p{margin:12px 0 0;color:#CFCABF;max-width:34em}
.prog ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.prog li{padding:11px 0;border-bottom:1px solid var(--line);font:500 11.5px/1.4 Mono,monospace;letter-spacing:.14em;text-transform:uppercase}
.lf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,4.4vh,44px) clamp(12px,1.6vw,22px);margin:0;padding:0;list-style:none}
.lf a{display:block}
.lf .th{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.lf .th img{width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transition:transform 1.2s var(--ease)}   /* --z closes the black bars some covers carry */
.lf a:hover .th img{transform:scale(calc(var(--z,1) * 1.04))}
.lf .th::before{content:"";position:absolute;left:0;bottom:0;z-index:1;width:38px;height:38px;background:var(--acid)}
.lf .th::after{content:"";position:absolute;left:15px;bottom:12px;z-index:2;border-left:10px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.lf .k{display:block;margin-top:13px;color:var(--acid);font-size:10.5px;letter-spacing:.14em}
.lf b{display:block;margin-top:7px;font:700 clamp(14px,1.25vw,19px)/1.08 Inj;text-transform:uppercase}
.lf .by{display:block;margin-top:7px;font-size:14px;line-height:1.4;color:#BDB8AE}
.lf-note{margin:clamp(26px,4.4vh,44px) 0 0;max-width:54em;font-size:14.5px;color:var(--dim)}
.lf-note a{color:var(--paper);border-bottom:1px solid var(--line);white-space:nowrap}
.s-press{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);padding:0 var(--g);margin-top:14px}
.s-press a{display:flex;flex-direction:column;padding:22px 24px 20px;box-shadow:inset 0 0 0 1px var(--line)}
.s-press img{height:22px;width:auto;align-self:flex-start;filter:brightness(0) invert(1)}
.s-press h3{margin:14px 0 0;font:500 clamp(17px,1.45vw,22px)/1.25 Grotesk}
.s-press .lab{margin-top:auto;padding-top:12px;color:var(--paper)}
.s-press a:hover .lab{color:var(--acid)}
.s-press .short{display:none}
/* what comes next: the 2027 teaser as a screen that is already running, silent, when you reach it; the acid block beneath is its caption */
.n27{background:#000;border-top:1px solid var(--line)}
.n27 video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100svh - var(--head) - 96px);object-fit:contain;background:#000}   /* the screen and its bar fit one window */
.n27-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:16px var(--g) 18px;border-top:1px solid var(--line)}
.n27-bar .lab{color:#CFCABF}
.n27-bar .lab b{font-weight:500;color:var(--acid)}
.n27-sound{display:inline-flex;align-items:center;gap:12px;padding:15px 18px;background:var(--acid);color:var(--ink);font:700 13px/1 Inj;text-transform:uppercase;letter-spacing:.05em;transition:background .2s,color .2s}
.n27-sound i{width:0;height:0;border-left:10px solid currentColor;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.n27-sound em{font:500 11px/1 Mono,monospace;font-style:normal;letter-spacing:.1em;opacity:.7}
.n27-sound[aria-pressed="true"]{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(243,238,229,.5)}
.n27-sound[aria-pressed="true"] i{width:10px;height:10px;border:0;background:currentColor}
.n27-sound[aria-pressed="true"] em{display:none}
.summit .ask{margin-top:0}
.s-site{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:8px 26px;padding:clamp(26px,5vh,48px) var(--g);border-bottom:1px solid var(--line)}
.s-site b{font:700 clamp(16px,1.9vw,28px)/1.04 Inj;text-transform:uppercase;transition:color .2s}
.s-site>span:last-child{color:var(--dim);font-size:14.5px}
.s-site:hover b{color:var(--acid)}

/* ══ phone ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  :root{--head:60px}
  /* no blur behind the bars on a phone: blurring whatever moves underneath (the film, the rows of marks) costs frames */
  .head.solid{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  body{font-size:16px}
  .nav{display:none}.menu-btn{display:flex}
  /* the menu: four doors that rise one after another, the showreel as a card, the address */
  .menu{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;flex-direction:column;padding:0 var(--g) calc(18px + env(safe-area-inset-bottom));visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease),opacity .2s .3s,visibility 0s .5s}
  .menu.open{visibility:visible;opacity:1;clip-path:inset(0);transition:clip-path .55s var(--ease),opacity .15s}
  .menu-top{flex:none;height:var(--head);display:flex;align-items:center;justify-content:space-between}
  .menu .x{font:500 12px/1 Mono;letter-spacing:.16em;text-transform:uppercase;padding:16px 0 16px 20px}
  .menu-nav{display:flex;flex-direction:column;margin-top:clamp(10px,4vh,40px);border-top:1px solid var(--line)}
  .menu-nav a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:baseline;column-gap:2px;row-gap:7px;padding:clamp(12px,2vh,18px) 0 clamp(11px,1.8vh,16px);border-bottom:1px solid var(--line)}
  .menu-nav a::after{content:"→";grid-row:1;grid-column:3;font:400 18px/1 Mono;color:var(--paper);opacity:.5}
  .menu-nav i{font:500 11px/1 Mono;font-style:normal;letter-spacing:.08em;color:var(--acid)}
  .menu-nav i{grid-row:1;grid-column:1}
  .menu-nav b{grid-row:1;grid-column:2;font:700 clamp(26px,9vw,48px)/1 Inj;text-transform:uppercase}
  .menu-nav span{grid-row:2;grid-column:2;font:500 10.5px/1.3 Mono;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .menu-reel{display:flex;flex-direction:column;flex:none;width:100%;margin-top:auto;text-align:left}
  .menu-reel img{width:100%;aspect-ratio:16/9;max-height:25vh;object-fit:cover;object-position:50% 30%}
  .menu-reel span{display:flex;align-items:center;gap:10px;background:var(--acid);color:var(--ink);padding:15px 14px;font:700 13px/1 Inj;text-transform:uppercase;letter-spacing:.05em}
  .menu-reel span i{width:0;height:0;border-left:10px solid var(--ink);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
  .menu-reel em{margin-left:auto;font:500 11px/1 Mono;font-style:normal;letter-spacing:.1em;opacity:.7}
  .menu-foot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font:500 13px/1 Mono;letter-spacing:.03em}
  .menu-foot a{border-bottom:1px solid var(--acid);padding-bottom:6px}
  .menu-foot span{color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
  .menu-nav a,.menu-reel,.menu-foot{opacity:0;transform:translateY(24px);transition:opacity .25s,transform .25s}
  .menu.open .menu-nav a,.menu.open .menu-reel,.menu.open .menu-foot{opacity:1;transform:none;transition:opacity .5s,transform .7s var(--ease);transition-delay:calc(160ms + var(--i) * 60ms)}
  /* first screen: the upright film, a quiet two-line title, one action, and the proof */
  .hero{min-height:560px}
  .hero:after{background:linear-gradient(180deg,rgba(5,7,11,.5) 0,rgba(5,7,11,0) 18%,rgba(5,7,11,0) 40%,rgba(5,7,11,.94) 88%)}
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"now" "main" "press";row-gap:0}
  .now{border:0;padding:0 0 14px;justify-content:flex-start;flex-wrap:wrap;gap:7px 10px}
  .now .ticks{flex-basis:100%}
  .now .t{font-size:12px}
  .ticks{gap:5px}.ticks i{width:8px;height:8px}
  .hero h1{font-size:min(5.7vw,30px);line-height:1.08}
  .hero .lede{font-size:15.5px;margin-top:12px;max-width:none}
  .hero .cta{margin-top:18px}
  .play{flex:1 1 100%;justify-content:center;padding:19px 18px;font-size:14px}
  .more{display:none}
  .press-strip{margin-top:18px;justify-content:space-between;gap:10px;padding:14px 0 calc(16px + env(safe-area-inset-bottom))}
  .press-strip img{height:17px}
  .motion{display:none}
  /* the slate: an accordion. Six bands fit one screen; a tap opens one, and its picture moves */
  .sec{padding-top:64px}
  .sec-head{flex-direction:column;gap:10px}
  .slate{height:auto;gap:3px}
  .band,.band.on{flex:none;transition:none}
  .band:not(.on){height:64px}
  .band.on a{position:relative;inset:auto}
  .band .t,.band.on .t{font-size:clamp(14px,4.2vw,19px);white-space:nowrap;transition:none}
  .band:not(.on) .by{display:none}
  .band:not(.on) .o{display:block;margin-bottom:6px;font:500 9.5px/1 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--acid)}
  .band .pm{display:block;font:400 22px/1 Mono;color:var(--paper);opacity:.9}
  .band.on .pic{position:relative;inset:auto;aspect-ratio:16/10}
  .band.on .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,11,.55) 0,rgba(5,7,11,0) 34%)}
  .band.on .sh,.band.on .pm{display:none}
  .band.on .row{position:static;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px var(--g) 26px;animation:rise .5s var(--ease) both}
  .band.on .row>span:first-child{display:contents}
  .band.on .t{font-size:clamp(22px,6.8vw,32px);white-space:normal;line-height:1.04}
  .band.on .x{margin-top:10px;font-size:15.5px;color:#D6D1C6}
  .band.on .by{position:static;text-align:left;margin-top:12px;white-space:normal;display:block;order:2}
  .band.on .by .sep{display:inline;height:auto;margin:0 .7em}
  .band.on .go{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:16px;box-shadow:inset 0 0 0 1px rgba(210,255,31,.7);order:3}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  /* studios: three words stacked; one is lit and its single line sits below all three, so nothing jumps */
  .st-top{display:block}
  .st h2{font-size:clamp(22px,6.3vw,30px);max-width:none}
  .st-cta{display:none}
  .makes{display:grid;grid-template-columns:minmax(0,1fr);margin-top:26px;border-bottom:0}
  .make{display:contents}
  .make::after{display:none}
  .make button{grid-column:1;justify-content:space-between;width:100%;padding:15px 0 13px;border-top:1px solid var(--line)}
  .make button{gap:14px}
  .make .w{font-size:min(6.9vw,40px);-webkit-text-stroke-width:1.1px}
  .make .pm{display:block;flex:none;width:9px;height:9px;background:rgba(243,238,229,.28);transition:background .3s}
  .make.on .pm{background:var(--acid)}
  .make p{grid-row:4;grid-column:1;justify-self:start;max-width:none;padding:16px 0 0;border-top:1px solid var(--line);font-size:16px;transform:translateY(8px)}
  .make.on p{transform:none}
  .how{grid-template-columns:minmax(0,1fr);gap:0;margin-top:34px;padding-left:26px}
  .how::before{left:5px;right:auto;top:6px;bottom:8px;width:1px;height:auto;transform-origin:top}
  html.js .how:not(.in)::before{transform:scaleY(0)}
  .how li{padding:0 0 18px;font-size:14.5px}
  .how li:last-child{padding-bottom:0}
  .how li::before{left:-26px;top:2px}
  .how li b{margin-bottom:3px;font-size:13.5px}
  /* the company: the pictures lead. Edge to edge, the name on the picture, one line beneath; the rest is behind the tap */
  .co h2{font-size:clamp(20px,5.7vw,26px)}
  .co-lede{margin-top:12px;font-size:16px;line-height:1.45}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:12px}
  .figs li{padding-top:12px}
  .figs b{font-size:clamp(28px,9.4vw,46px)}
  .figs li>span{margin-top:9px;font-size:10.5px;letter-spacing:.1em}
  .figs-of{margin-top:26px;font-size:10px;letter-spacing:.12em}
  .figs-of span{display:none}
  .also{margin-top:36px;font-size:27px}
  .doors{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:14px}
  a.door{display:grid;grid-template-columns:minmax(0,1fr);margin:0 calc(-1 * var(--g))}
  a.door .im{grid-area:1/1;position:relative;aspect-ratio:3/2}
  a.door .im::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,11,.86) 0,rgba(5,7,11,.3) 34%,rgba(5,7,11,0) 58%)}
  a.door .tx{display:contents}
  a.door h3{grid-area:1/1;align-self:end;z-index:1;margin:0;padding:0 calc(var(--g) + 60px) 17px var(--g);font:700 clamp(19px,5.9vw,27px)/1.04 Inj;text-transform:uppercase;letter-spacing:.01em}
  a.door .lab{grid-area:1/1;align-self:end;justify-self:end;z-index:1;display:grid;place-items:center;width:46px;height:46px;margin:0 var(--g) 14px 0;background:var(--acid);color:var(--ink);font-size:0;letter-spacing:0}
  a.door .lab::after{content:"→";font:400 21px/1 Mono}
  a.door .full{display:none}
  a.door .brief{display:block;grid-area:2/1;padding:12px var(--g) 0;font-size:14px;line-height:1.45;color:#BDB8AE;max-width:none}
  .press-door{display:block;box-shadow:none;padding:6px 0 0}
  .talk{flex-direction:row;gap:14px;margin-top:14px}
  .talk a{flex:1 1 0;min-width:0;justify-content:flex-start;padding:16px 14px 14px;box-shadow:inset 0 0 0 1px var(--line)}
  .talk a+a{border-top:0}
  .talk img{height:18px}
  .talk h3{font-size:15.5px;margin-top:12px}
  .talk .lab{font-size:10px;letter-spacing:.12em;margin-top:auto;padding-top:12px}
  .talk .long{display:none}.talk .short{display:inline}
  .proof{margin-top:40px;padding:26px 0 34px}
  .mq{--k:.76}
  .mq figure{height:50px}
  .mq .half{--gap:38px}
  .mq-head{display:block}
  .mq-head .sub{display:block;margin-top:4px;font-size:13.5px}
  .contact{padding:68px var(--g) 36px}
  .contact h2{font-size:clamp(44px,14.6vw,96px);white-space:normal}
  .contact .row{display:block;margin-top:26px}
  /* three choices side by side, one control */
  .pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .chip{height:50px;padding:0 4px;font-size:clamp(10px,2.9vw,11.5px);letter-spacing:.08em;text-align:center}
  .chip+.chip{margin-left:-1.5px}
  .chip .long{display:none}.chip .short{display:inline}
  .send{display:block;margin-top:16px}
  .mailbig{display:block;font-size:clamp(17px,5.4vw,24px);text-align:center}
  .copy{display:block;margin:14px auto 0}
  .foot{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  /* two actions under the thumb */
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1.3fr;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;background:var(--ink);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .38s var(--ease)}
  .dock[hidden]{display:none}
  .dock.show{transform:none}
  .dock>*{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;font:500 12px/1 Mono;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  .d-reel{box-shadow:inset 0 0 0 1px rgba(243,238,229,.45)}
  .d-reel i{width:0;height:0;border-left:9px solid var(--acid);border-top:6px solid transparent;border-bottom:6px solid transparent}
  .d-go{background:var(--acid);color:var(--ink)}
  .reel-in{padding:60px 0 64px}
  /* project page */
  .p-hero{height:68svh}
  .p-in h1{font-size:clamp(24px,7.6vw,56px);overflow-wrap:anywhere}
  .facts{gap:8px 20px;padding:16px var(--g)}
  .p-body{grid-template-columns:minmax(0,1fr);padding-top:36px}
  .stills,.stills.full{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--g);margin-top:44px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stills::-webkit-scrollbar{display:none}
  .stills img,.stills.full img,.stills.full img:first-child{flex:0 0 86%;width:86%;height:auto;aspect-ratio:16/10;scroll-snap-align:center}
  .swipe{display:block;padding:12px var(--g) 0}
  .ask{margin-top:44px}
  .ask a{width:100%;text-align:center}
  /* summit page */
  .summit .p-in h1{font-size:clamp(24px,7.6vw,56px)}
  .s-lede{font-size:17px}
  .s-recap{width:100%;justify-content:center;padding:18px}
  .s-num{padding-top:30px}
  .progs{grid-template-columns:minmax(0,1fr);gap:38px}
  .prog .im{margin:0 calc(-1 * var(--g));aspect-ratio:3/2}
  .prog h2{font-size:clamp(23px,6.6vw,30px)}
  .prog li{font-size:10.5px;letter-spacing:.1em}
  .lf{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px}
  .lf .th::before{width:32px;height:32px}
  .lf .th::after{left:12px;bottom:10px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
  .lf .k{margin-top:10px;min-height:2.6em;font-size:9.5px;letter-spacing:.08em}
  .lf b{font-size:clamp(12px,3.7vw,16px)}
  .lf .by{font-size:13px}
  .s-press{gap:12px}
  .s-press a{padding:16px 14px 14px}
  .s-press img{height:18px}
  .s-press h3{font-size:15.5px;margin-top:12px}
  .s-press .lab{font-size:10px;letter-spacing:.12em}
  .s-press .long{display:none}.s-press .short{display:inline}
  .s-site{grid-template-columns:minmax(0,1fr);gap:9px}
  .n27-bar{flex-direction:column;align-items:stretch;gap:14px;padding:14px var(--g) 18px}
  .n27-sound{justify-content:center;padding:18px}
}
/* a tablet held upright: the two pictures side by side */
@media (min-width:700px) and (max-width:820px){
  .figs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .figs b{font-size:clamp(30px,5.2vw,44px)}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3px;margin:14px calc(-1 * var(--g)) 0}
  a.door{margin:0}
  a.door h3{font-size:21px}
  .press-door{grid-column:1/-1;padding:6px var(--g) 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .mq{overflow-x:auto}
  .mq::before,.mq::after,.mq .half[aria-hidden]{display:none}
  html.js .rv,html.js .how:not(.in) li{opacity:1;transform:none}
  html.js .how:not(.in)::before{transform:none}
}