/* Cinema Cars — "Rolling". Black screen, white type, red only where a camera would use it. */

@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JB Mono";src:url(/assets/fonts/jbmono-latin.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JB Mono";src:url(/assets/fonts/jbmono-latin-ext.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0a0a0a;--black:#000;--paper:#f2efe8;--soft:rgba(242,239,232,.76);--dim:#8c887f;--dim2:#57544e;
  --line:rgba(242,239,232,.14);--red:#ff2a1a;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JB Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;font:400 17px/1.55 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block;max-width:100%}
picture{display:contents}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:300;background:var(--paper);color:#000;padding:10px 14px}

/* ---------- shared type ---------- */
.kicker{margin:0 0 14px;font:600 11px/1.2 var(--sans);font-stretch:125%;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.sec-title{margin:0;font-weight:800;font-stretch:62%;font-size:clamp(46px,7.6vw,124px);line-height:.92;text-transform:uppercase;letter-spacing:-.005em}
.sec-text{max-width:52ch;margin:20px 0 0;color:var(--soft);font-size:clamp(16px,1.3vw,19px)}
.sec-head{max-width:1500px;margin:0 auto clamp(40px,7vh,72px)}
.dot{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:var(--red);vertical-align:baseline}
.rec{display:inline-flex;align-items:center;gap:7px;color:var(--paper)}
.rec__dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
.rec .rec__dot{animation:blink 1.2s steps(1) infinite}
@keyframes blink{55%{opacity:.18}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border:1px solid rgba(242,239,232,.38);border-radius:999px;background:rgba(10,10,10,.28);color:var(--paper);text-decoration:none;cursor:pointer;font:600 11px/1 var(--sans);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;transition:background-color .3s,border-color .3s,color .3s}
.btn:hover{border-color:var(--paper)}
.btn--solid{background:var(--paper);border-color:var(--paper);color:#0a0a0a}
.btn--solid:hover{background:#fff}

/* ---------- pre-roll ---------- */
.preroll{display:none}
html.fx .preroll{display:block;position:fixed;inset:0;z-index:200;pointer-events:none}
.preroll__half{position:absolute;left:0;right:0;height:50.5%;background:#000;transition:transform 1.05s cubic-bezier(.75,0,.15,1)}
.preroll__half--t{top:0}
.preroll__half--b{bottom:0}
.preroll__mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--paper);transition:opacity .35s}
.preroll__brand{color:var(--dim)}
.preroll.is-open .preroll__half--t{transform:translateY(-101%)}
.preroll.is-open .preroll__half--b{transform:translateY(101%)}
.preroll.is-open .preroll__mid{opacity:0}

/* ---------- grain ---------- */
/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);pointer-events:none}
.top>*{pointer-events:auto}
.top::before{content:"";position:absolute;inset:0 0 -36px;z-index:-1;background:linear-gradient(rgba(10,10,10,.92),rgba(10,10,10,0));opacity:0;transition:opacity .4s;pointer-events:none}
.top.is-solid::before{opacity:1}
.brand{font:700 15px/1 var(--sans);font-stretch:125%;letter-spacing:.26em;color:var(--paper);text-decoration:none;white-space:nowrap}
.brand span{margin-left:.55em;color:var(--dim)}
.brand .dot{width:7px;height:7px;margin-left:6px}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font:600 11px/1 var(--sans);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase}
.nav a{color:var(--paper);text-decoration:none}
.nav__l{opacity:.78;transition:opacity .2s}
.nav__l:hover{opacity:1}
/* EN | RO: the page's own language in red */
.lang{display:flex;align-items:center;letter-spacing:.14em}
.nav .lang a{padding:10px 5px;color:rgba(242,239,232,.6);transition:color .2s}
.nav .lang a:hover{color:var(--paper)}
.nav .lang a[aria-current]{color:var(--red)}
.lang i{font-style:normal;color:rgba(242,239,232,.28)}
@media (max-width:760px){.nav__l{display:none}.brand{font-size:12.5px;letter-spacing:.2em}.nav{gap:10px}.nav .lang a{padding:10px 4px}}

/* ---------- 01 hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero__frame{position:absolute;inset:0;overflow:hidden}
.shots{position:absolute;inset:0;transform-origin:50% 40%}
.shot{position:absolute;inset:0;opacity:0}
.shot.is-on{opacity:1}
.shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform-origin:var(--pos,50% 50%)}
html.fx .shot.is-on img{animation:push 7.5s linear both}
@keyframes push{from{transform:scale(1.16)}to{transform:scale(1.03)}}
.shots::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 45%,rgba(0,0,0,.42) 100%),linear-gradient(rgba(0,0,0,.28),transparent 26%,transparent 58%,rgba(0,0,0,.72))}
.hud{position:absolute;inset:0;pointer-events:none;font:500 11.5px/1 var(--mono);letter-spacing:.07em;color:var(--paper)}
/* 2.39:1 frame centred at 46%; on short screens site.js lifts only its bottom edge (--hud-lift) so it ends 28px above the
   buttons — the top edge, width and centre stay where they are */
.hud__box{position:absolute;left:50%;top:46%;width:min(calc(100vw - 2*var(--pad)),calc((100svh - 220px)*2.39));
  height:calc(min(calc(100vw - 2*var(--pad)),calc((100svh - 220px)*2.39)) / 2.39 - var(--hud-lift,0px));
  transform:translate(-50%,calc(-50% - var(--hud-lift,0px) / 2));box-shadow:0 0 0 100vmax rgba(0,0,0,.22)}
.hud__c{position:absolute;width:26px;height:26px;border:0 solid rgba(242,239,232,.9)}
.hud__c--tl{left:0;top:0;border-width:1.5px 0 0 1.5px}
.hud__c--tr{right:0;top:0;border-width:1.5px 1.5px 0 0}
.hud__c--bl{left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.hud__c--br{right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.hud__cross{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);opacity:.7}
.hud__cross::before,.hud__cross::after{content:"";position:absolute;background:var(--paper)}
.hud__cross::before{left:50%;top:0;bottom:0;width:1px}
.hud__cross::after{top:50%;left:0;right:0;height:1px}
.hud__row{position:absolute;left:0;right:0;display:flex;justify-content:space-between;padding:0 16px}
.hud__row--t{top:16px}
.hud__row--b{bottom:16px;justify-content:flex-end;gap:32px}
.hud__grp{display:inline-flex;align-items:center;gap:12px}
.hud__dim{color:var(--dim)}
.hud__meters{position:absolute;right:18px;top:50%;display:flex;gap:4px;height:64px;transform:translateY(-50%)}
.hud__meters i{width:3px;height:100%;background:linear-gradient(var(--red) 0 12%,var(--paper) 12%);transform-origin:50% 100%;transform:scaleY(.3);opacity:.85}
.hero__copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(18px,3.4vh,40px);display:grid;gap:clamp(14px,2.4vh,26px)}
.hero__title{margin:0;font-weight:800;font-stretch:62%;font-size:clamp(64px,11.2vw,200px);line-height:.84;text-transform:uppercase;letter-spacing:-.005em}
.ln{display:block;overflow:hidden;padding:.13em 0 .09em;margin:-.13em 0 -.09em}
.ln>span{display:inline-block}
html.fx .ln>span{transform:translateY(112%)}
html.fx.is-live .ln>span{transform:none;transition:transform 1.15s var(--ease)}
html.fx.is-live .ln+.ln>span{transition-delay:.12s}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero__sub{max-width:36ch;margin:0;color:var(--soft);font-size:clamp(15px,1.2vw,18px)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px}
.hero__meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0;padding-top:12px;border-top:1px solid var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero__scroll i{display:inline-block;width:1px;height:10px;margin-left:8px;background:var(--paper);vertical-align:-1px;animation:tick 1.6s var(--ease) infinite}
@keyframes tick{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
html.fx .hero__foot,html.fx .hero__meta{opacity:0;transform:translateY(16px)}
html.fx.is-live .hero__foot,html.fx.is-live .hero__meta{opacity:1;transform:none;transition:opacity .9s .45s,transform 1.1s var(--ease) .45s}

@media (max-width:760px),(max-aspect-ratio:4/5){
  .hero{height:auto;min-height:100svh;display:grid;grid-template-areas:"title" "frame" "foot" "meta";align-content:center;gap:22px;padding:88px 0 22px}
  .hero__copy{display:contents}
  .hero__title{grid-area:title;padding:0 var(--pad);font-size:clamp(56px,18vw,120px)}
  .hero__frame{grid-area:frame;position:relative;inset:auto;aspect-ratio:2.39;width:100%}
  .hud{font-size:8.5px}
  .hud__box{left:0;top:0;width:100%;height:100%;transform:none;box-shadow:none}
  .hud__row{padding:0 10px}
  .hud__iso{display:none}
  .hud__row--t{top:9px}
  .hud__row--b{bottom:9px}
  .hud__meters{right:12px;height:34px}
  .hud__c{width:14px;height:14px}
  .hero__foot{grid-area:foot;flex-direction:column;align-items:stretch;padding:0 var(--pad)}
  .hero__ctas{flex-wrap:nowrap}
  .hero__ctas .btn{flex:1 1 0;justify-content:center;padding:15px 10px;white-space:nowrap}
  .hero__meta{grid-area:meta;margin:0 var(--pad);line-height:1.5}
  .hero__scroll{display:none}
}

/* ---------- 02 logline ---------- */
.logline{max-width:1500px;margin:0 auto;padding:clamp(56px,10vh,110px) var(--pad) clamp(90px,15vh,170px)}
.logline__big{max-width:13ch;margin:0 0 clamp(36px,6vh,60px);font-weight:800;font-stretch:62%;font-size:clamp(50px,9.4vw,156px);line-height:.88;text-transform:uppercase}
html.fx .logline__big .w{opacity:.13;transition:opacity .3s}
html.fx .logline__big .w.on{opacity:1}
.logline__p{max-width:58ch;margin:0 0 clamp(56px,9vh,96px) auto;color:var(--soft);font-size:clamp(17px,1.45vw,22px);line-height:1.5}
.logline__p em{font-style:normal;color:var(--paper)}
.plates{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--line)}
.plate{padding:18px 20px 0 0;border-right:1px solid var(--line)}
.plate+.plate{padding-left:20px}
.plate:last-child{border-right:0}
.plate dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.plate dd{font-variant-numeric:tabular-nums;margin:10px 0 0;font-weight:800;font-stretch:62%;font-size:clamp(40px,5vw,76px);line-height:.9;text-transform:uppercase;white-space:nowrap}
@media (max-width:760px){.plates{grid-template-columns:1fr 1fr}.plate{padding:16px 12px 18px 0;border-bottom:1px solid var(--line)}.plate+.plate{padding-left:0}.plate:nth-child(2n){padding-left:14px;border-right:0}.plate:nth-child(2n+1){border-right:1px solid var(--line)}}

/* ---------- generic reveal ---------- */
html.fx .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform 1.2s var(--ease)}
html.fx .reveal.in{opacity:1;transform:none}

/* ---------- 03 anatomy ---------- */
.anat{position:relative;border-top:1px solid var(--line)}
.anat__stage{display:flex;flex-direction:column;gap:clamp(18px,3vh,34px);padding:clamp(90px,13vh,150px) var(--pad)}
html.fx .anat{height:300vh}
html.fx .anat__stage{position:sticky;top:0;height:100vh;height:100svh;justify-content:center;padding-top:clamp(64px,9vh,100px);padding-bottom:clamp(18px,3vh,34px)}
.anat .sec-head{width:min(100%,1280px);margin:0 auto}
.anat .sec-title{font-size:clamp(38px,5.4vw,92px)}
.anat__fig{position:relative;width:min(100%,1280px,calc((100svh - 360px)*2.667));aspect-ratio:1600/600;margin:0 auto;color:var(--paper)}
.anat__l{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.anat__l *{vector-effect:non-scaling-stroke}
.anat__l--base{stroke:var(--dim2)}
.anat__l .dash{stroke:var(--dim);stroke-dasharray:5 6}
.anat__l .led{fill:var(--red);stroke:none}
.anat__l text{fill:var(--paper);stroke:none;font:500 21px var(--mono);letter-spacing:.08em}
.anat__l--dims{stroke:var(--dim)}
.anat__ext{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(.79);transition:transform 1.3s var(--ease) .5s}
.anat__l.on .anat__ext,html:not(.fx) .anat__ext{transform:none}
html.fx .anat__l{opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform 1s var(--ease)}
html.fx .anat__l.on{opacity:1;transform:none}
.anat__mk{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;margin:-12px 0 0 -12px;border:1px solid var(--paper);border-radius:50%;background:var(--ink);font:600 10.5px/22px var(--mono);text-align:center;color:var(--paper);transition:background-color .3s,border-color .3s}
html.fx .anat__mk{opacity:0;transform:scale(.3);transition:opacity .4s,transform .55s cubic-bezier(.3,1.5,.5,1),background-color .3s,border-color .3s}
html.fx .anat__mk.on{opacity:1;transform:none}
.anat__mk.cur{background:var(--red);border-color:var(--red)}
.anat__list{list-style:none;counter-reset:a;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);width:min(100%,1280px);margin:0 auto;padding:0}
.anat__list li{counter-increment:a;padding-top:12px;border-top:1px solid var(--line);transition:opacity .5s,border-color .4s}
.anat__list li::before{content:counter(a,decimal-leading-zero);display:block;margin-bottom:8px;font:500 10.5px/1 var(--mono);color:var(--dim);transition:color .4s}
.anat__list b{display:block;margin-bottom:6px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.anat__list span{display:block;font-size:14px;line-height:1.45;color:var(--soft)}
html.fx .anat__list li{opacity:.2}
html.fx .anat__list li.on{opacity:1}
.anat__list li.cur{border-top-color:var(--red)}
.anat__list li.cur::before{color:var(--red)}
.scrub{display:flex;align-items:center;gap:14px;width:min(100%,1280px);margin:0 auto;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.scrub__bar{position:relative;flex:1;height:1px;overflow:hidden;background:var(--line)}
.scrub__bar i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
html:not(.fx) .scrub{display:none}
@media (max-width:900px){
  .anat__l text,.anat__l--dims g{display:none}
  .anat__mk{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:9px;line-height:16px}
  .anat__list{grid-template-columns:1fr;gap:0}
  .anat__list li{display:grid;grid-template-columns:28px 1fr;padding:9px 0}
  .anat__list li::before{margin:2px 0 0}
  .anat__list b{margin:0;font-size:13px}
  .anat__list span{grid-column:2;font-size:13px}
  html.fx .anat__list li:not(.cur) span{display:none}
}

/* ---------- 04 fleet: THE STUDIO ----------
   One pinned studio; the vehicles cut in and out on the same floor. Each take is a photo (.studio__shot) and its
   text (.studio__item). While the script runs, every take lies in the same grid cells (.take is display:contents)
   and the browser's own scroll timeline fades them (end of this file). Without the script: one take after another. */
.studio{position:relative;border-top:1px solid var(--line)}
.studio__stage{padding:clamp(90px,13vh,150px) var(--pad) 40px}
.studio__head .kicker{margin-bottom:8px}
.studio__title{margin:0;font-weight:800;font-stretch:62%;font-size:clamp(28px,7.6vw,64px);line-height:.92;text-transform:uppercase}
.studio__floor,.studio__dim,.studio__nav,.studio__snaps{display:none}
.take{max-width:760px;margin:30px 0 0}
.studio__shot{position:relative;margin:0 0 16px;aspect-ratio:1/1;background:#050505}
.studio__shot .studio__out{position:absolute;inset:0}
.studio__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform-origin:50% 60%}
.studio__shot--type .studio__out{display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse 80% 70% at 50% 10%,#1d1d1d,#050505 70%)}
.studio__take{display:flex;gap:14px;align-items:center;margin:0 0 10px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--dim)}
.studio__name{margin:0 0 10px;font-weight:800;font-stretch:62%;font-size:clamp(32px,8.4vw,60px);line-height:.92;text-transform:uppercase}
.studio__text{margin:0 0 12px;max-width:46ch;color:var(--soft);font-size:15px;line-height:1.45}
.unit__big{margin:0;font-weight:800;font-stretch:62%;font-size:clamp(120px,13vw,220px);line-height:.8;letter-spacing:-.01em}
.unit__cap{margin:16px 0 0;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.unit__specs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.unit__specs li{padding:7px 9px;border:1px solid var(--line);font:500 10px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(242,239,232,.86)}
.studio__marks{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.studio__marks li{flex:1}
.studio__marks button{display:block;width:100%;margin:0;background:none;border:0;border-radius:0;cursor:pointer;text-align:left;padding:10px 0 2px;font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--dim);border-top:1px solid var(--line);transition:color .3s,border-color .3s}
.studio__marks button.on{color:var(--paper);border-top-color:var(--red)}
/* pinned: site.js measures the scroll length (--studio-h) and the scroll per take (--seg) */
html.js .studio{height:var(--studio-h,600vh);view-timeline:--studio block}
html.js .studio__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;row-gap:14px;padding:78px var(--pad) 18px}
html.js .take{display:contents}
html.js .studio__floor,html.js .studio__shot,html.js .studio__dim{display:block;grid-area:2/1;min-height:0;margin:0 calc(-1*var(--pad));aspect-ratio:auto}
html.js .studio__floor{background:#050505}
html.js .studio__shot{overflow:hidden} /* the slow push-in (scale) stays inside the frame */
html.js .studio__dim{position:relative;z-index:2;background:#000;opacity:0;pointer-events:none}
html.js .studio__item{grid-area:3/1;align-self:start}
html.js .studio__nav{display:block;grid-area:4/1}
html.js .studio__snaps{display:block}
/* touch screens, only while the page rests on a take (site.js html.snap-on): one snap point per take, where it rests,
   so the next swipe glides straight onto a take in one native motion (iOS picks it the moment the finger lifts) */
.studio__snap{position:absolute;left:0;width:1px;height:1px;top:calc(var(--seg,0px) * var(--k));scroll-snap-align:start;pointer-events:none}
/* escape areas: everything above the first take and everything below the last is one tall snap area each. A swipe that
   ends inside one is not snapped (WebKit: landedInsideSnapAreaThatConsumesViewport), so the first swipe off either end
   of the studio leaves it — without them a mandatory snap pulled every swipe past the last take back onto it */
.studio__esc{position:absolute;left:0;width:1px;pointer-events:none;scroll-snap-align:start}
.studio__esc--up{bottom:calc(100% + 1px);height:var(--esc-up,0px)}
.studio__esc--down{top:calc(var(--seg,0px) * var(--last,6) + 1px);height:var(--esc-down,0px)}
html.snap-on{scroll-snap-type:y mandatory}
.studio__snap.off{scroll-snap-align:none} /* the take a drag started from, once it has left it (site.js) */
/* swiping towards the studio from outside (site.js html.snap-entry, set once the drag is under way): only the take it
   arrives at is a snap point, and one that may not be flown past (scroll-snap-stop) — any swipe that would cross it,
   however fast, lands on it */
html.snap-entry{scroll-snap-type:y proximity}
html.snap-entry .studio__snap,html.snap-entry .studio__esc{scroll-snap-align:none}
html.snap-entry.from-above .studio__snap--first,html.snap-entry.from-below .studio__snap--last{scroll-snap-align:start;scroll-snap-stop:always}
@media (max-width:899px){html.js .studio__item .unit__specs{display:none}}
@media (min-width:900px){
  html.js .studio__stage{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);padding:96px var(--pad) 30px}
  html.js .studio__head{grid-area:1/1/2/3}
  html.js .studio__floor,html.js .studio__shot,html.js .studio__dim{margin:0}
  html.js .studio__item{grid-area:2/2;align-self:center}
  html.js .studio__nav{grid-area:3/1/4/3}
  .studio__name{font-size:clamp(40px,4.6vw,76px)}
  .studio__text{font-size:16px}
}
/* the vehicles with a 16:9 desktop photo (build.mjs wide=: the square photo with more studio around it). Shown at the
   scale of the square photos (the square part fills the frame's width) and framed like them, but never higher than
   the band that must stay on screen: the vehicle with its headroom above and its wheels below. Only a frame too wide
   for that band at this scale shows it smaller, just enough. Canvas px, set on the figure: --s the square's size,
   --y0 its top, --b0 and --b1 the band. --c is the size of one canvas px, --t how far the canvas is moved up. */
@media (min-width:900px) and (min-aspect-ratio:4/3){
  html.js .studio__shot--w{container-type:size}
  html.js .studio__shot--w .studio__img{--c:min(100cqw / var(--s), 100cqh / (var(--b1) - var(--b0)));
    --t:clamp(var(--b1) * var(--c) - 100cqh, var(--y0) * var(--c) + .6 * (var(--s) * var(--c) - 100cqh), var(--b0) * var(--c));
    position:absolute;left:50%;top:0;max-width:none;width:calc(3640 * var(--c));height:calc(2048 * var(--c));
    margin:calc(-1 * var(--t)) 0 0 calc(-1820 * var(--c));object-fit:fill;transform-origin:50% calc(60cqh + var(--t))}
}

/* ---------- 05 video village ---------- */
.village{padding:clamp(100px,16vh,180px) var(--pad);border-top:1px solid var(--line)}
.mons{display:flex;flex-wrap:wrap;gap:14px 10px;max-width:1500px;margin:0 auto}
.mon{flex:var(--ar) 1 0;min-width:0;margin:0}
.mon__scr{position:relative;aspect-ratio:var(--ar);overflow:hidden;background:#000;outline:1px solid #262626}
.mon__scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mon__scr::after{content:"";position:absolute;inset:7%;border:1px solid rgba(242,239,232,.22);pointer-events:none}
.mon figcaption{display:flex;align-items:flex-start;gap:8px;padding-top:8px;font:500 9px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mon figcaption .rec{flex:none}
.mon figcaption [data-tc]{margin-left:auto;padding-left:8px;color:var(--paper)}
.brk{flex-basis:100%;height:0}
.brk--d{display:none}
@media (min-width:900px){.mons{gap:24px 16px}.brk--m{display:none}.brk--d{display:block}.mon figcaption{font-size:10.5px;padding-top:11px}}
@media (max-width:520px){.mon figcaption [data-tc]{display:none}}

/* ---------- 06 credits ---------- */
.credits{position:relative;background:#000;border-top:1px solid var(--line)}
.credits__stage{padding:clamp(100px,16vh,180px) var(--pad)}
.credits__roll{text-align:center}
.credits__title{margin:6px 0 18px;font-weight:800;font-stretch:62%;font-size:clamp(66px,11vw,176px);line-height:.88;text-transform:uppercase}
.credits__sub{max-width:46ch;margin:0 auto clamp(48px,8vh,80px);color:var(--soft)}
.credits__list{max-width:1000px;margin:0 auto;padding:0;list-style:none}
.cr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);align-items:baseline;padding:8px 0}
.cr__role{text-align:right;font:500 11px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cr__title{text-align:left;font-weight:700;font-stretch:84%;font-size:clamp(17px,1.75vw,25px);line-height:1.15;text-transform:uppercase;letter-spacing:.02em}
.cr__title em{margin-left:10px;font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--dim)}
.credits__more{display:inline-block;margin-top:clamp(48px,8vh,80px);padding-bottom:5px;border-bottom:1px solid var(--red);font:600 11px/1 var(--sans);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);text-decoration:none}
/* the list scrolls with the page itself (the browser moves it with the finger, at the screen's own rate); site.js adds
   only the extra speed on top as a scroll-driven animation, and the black fades at the screen's top and bottom hold
   still (sticky). The old roll put all of its motion on a scroll animation and stepped on iPhones, which feed those
   whole-pixel scroll positions (Dan's recording, 2026-10-18 14:45). */
.credits__fade{display:none}
html.fx .credits__fade{display:block;position:sticky;z-index:1;height:14vh;height:14svh;pointer-events:none}
html.fx .credits__fade--t{top:0;margin-bottom:-14vh;margin-bottom:-14svh;background:linear-gradient(#000 20%,transparent)}
html.fx .credits__fade--b{bottom:0;margin-top:-14vh;margin-top:-14svh;background:linear-gradient(transparent,#000 80%)}
html.fx .credits__stage{padding:20vh var(--pad) 18vh;padding:20svh var(--pad) 18svh}
@media (max-width:640px){.cr{grid-template-columns:1fr;gap:3px;padding:9px 0}.cr__role,.cr__title{text-align:center}.cr__role{order:2;font-size:10px}.cr__title em{display:block;margin:4px 0 0}}

/* ---------- 07 crew ---------- */
.crew{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,88px);align-items:center;max-width:1500px;margin:0 auto;padding:clamp(80px,12vh,140px) var(--pad)}
.crew__fig{margin:0}
.crew__fig img{width:100%;height:auto}
.crew__fig figcaption{margin-top:10px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crew__imdb{display:inline-block;margin-top:26px;padding-bottom:5px;border-bottom:1px solid var(--red);font:600 11px/1 var(--sans);font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);text-decoration:none}
@media (max-width:900px){.crew{grid-template-columns:1fr}}

/* ---------- 08 contact (call sheet) ---------- */
.book{max-width:1500px;margin:0 auto;padding:clamp(100px,16vh,180px) var(--pad) clamp(70px,10vh,110px);border-top:1px solid var(--line)}
.sheet{overflow:hidden;border:1px solid var(--line);background:#0e0e0e}
.sheet__bar{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font:600 10.5px/1 var(--mono);letter-spacing:.18em;color:var(--dim)}
.sheet__bar span:first-child{color:var(--paper)}
.sheet__grid{display:grid;grid-template-columns:repeat(4,1fr);margin-right:-1px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:14px 16px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.fld--2{grid-column:span 2}
.fld--full{grid-column:1/-1}
.fld>span,.fld legend{padding:0;font:500 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fld legend{float:left;width:100%;margin-bottom:8px}
.fld input,.fld textarea{width:100%;min-width:0;padding:4px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:var(--paper);font:400 17px/1.4 var(--sans);outline:none;resize:vertical}
.fld textarea::placeholder{color:var(--dim2)}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--red)}
.fld input[type=date]{color-scheme:dark;min-height:30px}
.fld--dates{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.fld--dates legend{grid-column:1/-1}
.fld--dates label{display:flex;flex-direction:column;gap:2px;min-width:0}
.fld--dates label span{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font:600 10.5px/1 var(--sans);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s,background-color .2s}
.chip input:checked+span{border-color:var(--red);background:rgba(255,42,26,.14)}
.chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.sheet__send{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:14px 22px;padding:18px 16px}
.sheet__note{margin:0 auto 0 0;font:500 10.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--dim)}
.sheet__note:empty{display:none}
.fld.err>span{color:var(--red)}
.direct{display:flex;flex-direction:column;gap:10px;margin-top:clamp(48px,8vh,80px)}
.direct .kicker{margin:0}
.direct__tel{font-weight:800;font-stretch:62%;font-size:clamp(50px,8.4vw,128px);line-height:.9;color:var(--paper);text-decoration:none;white-space:nowrap}
.direct__mail{font:500 clamp(14px,1.4vw,18px)/1.2 var(--mono);color:var(--paper)}
@media (max-width:900px){.sheet__grid{grid-template-columns:1fr 1fr}.fld--2{grid-column:1/-1}}
@media (max-width:560px){.sheet__grid{grid-template-columns:1fr}.sheet__bar span:last-child{display:none}.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chip span{display:block;padding:12px 8px;text-align:center}}

/* ---------- footer ---------- */
.foot{overflow:hidden;padding-top:clamp(50px,9vh,110px)}
.foot__mark{margin:0 0 -.07em;font-weight:800;font-stretch:62%;font-size:17.6vw;line-height:.8;text-align:center;white-space:nowrap;letter-spacing:-.01em}
.foot__mark .dot{width:.13em;height:.13em}
.foot__strip{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding:18px var(--pad);background:var(--paper);color:#0a0a0a;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__fine{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;color:#55524c}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- legal page ---------- */
.legal{max-width:860px;margin:0 auto;padding:120px var(--pad) 90px}
.legal section+section{margin-top:90px;padding-top:50px;border-top:1px solid var(--line)}
.legal p{color:var(--soft);margin:0 0 18px}
.legal strong{color:var(--paper);font-weight:600}
.legal__data{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:36px 0 60px;border-top:1px solid var(--line)}
.legal__data div{padding:14px 0;border-bottom:1px solid var(--line)}
.legal__data dt{font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.legal__data dd{margin:6px 0 0;font-size:18px}
.legal__h{margin:0 0 20px;font-weight:800;font-stretch:62%;font-size:clamp(34px,4vw,56px);line-height:.9;text-transform:uppercase}
.legal__back{margin-top:60px!important;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:600px){.legal__data{grid-template-columns:1fr}}
.mon--tall figcaption [data-tc]{display:none}

/* ---------- v3: phone spacing + footer ---------- */
@media (max-width:760px){
  .anat{border-top:0}
  .village{padding-bottom:36px}
  .crew{padding-top:44px}
  .foot__strip{flex-direction:column;align-items:center;gap:16px;padding:22px var(--pad) 26px;text-align:center}
  .foot__links{flex-direction:column;align-items:center;gap:12px}
  .foot__grp{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px}
  .foot__fine{flex-direction:column;align-items:center;gap:6px}
}
.foot__grp{display:inline-flex;flex-wrap:wrap;gap:8px 22px}
@media (max-width:560px){.chip{display:flex}.chip span{display:flex;flex:1;align-items:center;justify-content:center;min-height:50px;line-height:1.25}}

/* ---------- v4: anatomy line art + scan reveal ---------- */
.anat__view{position:relative;width:min(100%,1280px);margin:0 auto;overflow:hidden}
.anat__view .anat__fig{width:100%;aspect-ratio:var(--ar);margin:0}
.anat__img{position:absolute;inset:0;display:block;width:100%;height:100%}
.anat__curtain{position:absolute;inset:0;z-index:1;background:var(--ink);will-change:transform}
html:not(.fx) .anat__curtain{display:none}
.anat__mk,.anat__dims{z-index:2}
.anat__beam{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--red);box-shadow:0 0 14px 1px rgba(255,42,26,.55);opacity:0;transition:opacity .3s}
.anat__dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--dim);stroke-width:1.5;vector-effect:non-scaling-stroke}
.anat__dims *{vector-effect:non-scaling-stroke}
.anat__dims text{fill:var(--paper);stroke:none;font:500 34px var(--mono);letter-spacing:.08em}
html.fx .anat__dims{opacity:0;transition:opacity .8s}
html.fx .anat__dims.on{opacity:1}
@media (max-width:760px){
  html.fx .anat{height:250vh}
  .anat__view{width:auto;margin:0 calc(-1*var(--pad))}
  .anat__view .anat__fig{width:230vw}
  .anat__dims text{font-size:40px}
}

/* ---------- perf: ticking text and meters live on their own tiny layers ---------- */
[data-tc],[data-cam-label],[data-scrub-tc],[data-pre-tc]{display:inline-block;will-change:transform;contain:layout paint style;font-variant-numeric:tabular-nums}
.hud__meters i{will-change:transform}

/* ---------- v5: phones — the parts fall into place ---------- */
.anat__parts{display:none}
@media (max-width:760px){
  html.fx .anat{height:205vh}
  .anat__view .anat__fig{width:100%}
  .anat__img,.anat__curtain{display:none}
  .anat__parts{display:block;position:absolute;inset:0}
  .anat__part{position:absolute;inset:0;width:100%;height:100%}
  html.fx .anat__part{opacity:0;transform:translate3d(0,-26px,0);transition:opacity .45s ease,transform .8s cubic-bezier(.3,1.35,.5,1);will-change:transform,opacity}
  html.fx .anat__part.on{opacity:1;transform:none}
  .anat__mk{width:16px;height:16px;margin:-8px 0 0 -8px;font-size:8.5px;line-height:14px}
}

/* ---------- perf (2026-10-16): measured against firecrayon.com ---------- */
.vh-probe{position:absolute;top:0;left:0;width:1px;height:100vh;height:100svh;pointer-events:none;visibility:hidden}
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
@media (min-width:761px) and (min-aspect-ratio:4/5){
  html.fx .shots,html.fx .hero__copy{will-change:transform}
  html.fx .hud{will-change:opacity;overflow:hidden} /* clip the 100vmax matte shadow: keeps the layer screen-sized */
}

/* ---------- round 4 (2026-10-16) ---------- */
@media (min-width:761px) and (min-aspect-ratio:4/5){.hud__c--bl,.hud__row--b{display:none}}
.socials{display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--paper);transition:border-color .25s,background-color .25s}
.socials a:hover{border-color:rgba(242,239,232,.6);background:rgba(242,239,232,.06)}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.socials .f{fill:currentColor;stroke:none}
.socials .socials__t{font:800 11px/1 var(--sans);font-stretch:75%;letter-spacing:.01em;text-transform:none;text-decoration:none}
@media (max-width:760px){
  .logline{padding-bottom:44px}
  html.fx .anat__stage{justify-content:flex-start;padding-top:84px}
}
/* contact: phone beside the form (desktop) / above it (phones); compact call sheet */
.book__head{margin:0 0 26px}
.direct{display:flex;flex-direction:column;gap:8px;margin:0 0 26px}
.direct__tel{font-size:clamp(38px,10.5vw,64px)}
.sheet__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.fld{gap:6px;padding:12px 14px}
.fld textarea{resize:none;min-height:1.4em;overflow:hidden;field-sizing:content}
.chip b{font:inherit}
.chip__short{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sheet.is-busy button{opacity:.55;pointer-events:none}
.sheet__note.is-err{color:var(--red)}
.sheet.is-sent .sheet__grid,.sheet.is-sent .sheet__send{display:none}
.sheet__done{padding:26px 16px 30px}
.sheet__done-t{margin:0 0 10px;font-weight:800;font-stretch:62%;font-size:clamp(34px,4vw,56px);line-height:.92;text-transform:uppercase}
.sheet__done-d{max-width:52ch;margin:0;color:var(--soft)}
@media (min-width:900px){
  .book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head form" "direct form";column-gap:clamp(40px,6vw,110px);align-items:start}
  .book__head{grid-area:head;margin:0}
  .direct{grid-area:direct;margin:clamp(28px,5vh,52px) 0 0}
  .direct__tel{font-size:clamp(40px,4.4vw,72px)}
  .sheet{grid-area:form}
}
@media (max-width:899px){.sheet__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .book{padding-top:88px}
  .book .sec-text{margin-top:12px}
  .sheet__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fld{padding:10px 12px}
  .fld>span{font-size:9px}
  .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .chip span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 4px;font-size:9.5px;letter-spacing:.1em;text-align:center}
  .chip__full{display:none}
  .chip__short{display:inline}
  .sheet__send{flex-wrap:nowrap;gap:14px;padding:14px 12px}
  .sheet__note{font-size:9.5px}
}


@media (max-width:760px){.socials a{width:44px;height:44px}.socials svg{width:20px;height:20px}.socials .socials__t{font-size:12.5px}}

/* ---------- the studio's motion ----------
   html.sda (Chrome 115+, Safari 26+): the browser fades the takes itself, in step with the scroll (compositor).
   Opacity and scale only; ranges in px of scroll (a % range follows the iOS toolbar). Each take owns one stretch of
   scroll (--seg); the first take rests where the stage pins and the last where it unpins (so a swipe out of the studio
   moves the page at once), the cuts sit halfway between and are quick (--fade either side, 30% of a stretch). At each cut the screen dips, and the text
   leaves before the cut while the next one rises in after it (never two at once). */
@keyframes st-in{from{opacity:0}to{opacity:1}}
@keyframes st-out{from{opacity:1}to{opacity:0}}
@keyframes st-push{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes st-cut{0%,5.83%,10.83%,22.5%,27.5%,39.17%,44.17%,55.83%,60.83%,72.5%,77.5%,89.17%,94.17%,100%{opacity:0}8.33%,25%,41.67%,58.33%,75%,91.67%{opacity:.6}} /* 7 takes: the six cuts at (k + .5) / 6 of the range, +-2.5% (--fade) */
@keyframes st-txt-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes st-txt-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-10px,0)}}
html.sda .studio__shot{animation:st-in linear both;animation-timeline:--studio;
  animation-range:contain calc(var(--seg) * (var(--i) - .5) - var(--fade)) contain calc(var(--seg) * (var(--i) - .5) + var(--fade))}
html.sda .studio__shot .studio__out{animation:st-out linear both;animation-timeline:--studio;
  animation-range:contain calc(var(--seg) * (var(--i) + .5) - var(--fade)) contain calc(var(--seg) * (var(--i) + .5) + var(--fade))}
html.sda .studio__img{animation:st-push linear both;animation-timeline:--studio;
  animation-range:contain calc(var(--seg) * (var(--i) - .5) - var(--fade)) contain calc(var(--seg) * (var(--i) + .5))}
html.sda .studio__item{transform:translate3d(0,0,0);animation:st-txt-in linear both;animation-timeline:--studio;
  animation-range:contain calc(var(--seg) * (var(--i) - .5)) contain calc(var(--seg) * (var(--i) - .5) + var(--fade))}
html.sda .studio__item .studio__out{animation:st-txt-out linear both;animation-timeline:--studio;
  animation-range:contain calc(var(--seg) * (var(--i) + .5) - var(--fade)) contain calc(var(--seg) * (var(--i) + .5))}
html.sda .studio__dim{animation:st-cut linear both;animation-timeline:--studio;animation-range:contain 0px contain var(--studio-range)}
/* the first take is already on the floor as the studio arrives; the last one stays while the studio scrolls away */
html.sda .take--start .studio__shot,html.sda .take--start .studio__item{animation:none}
html.sda .take--end .studio__out{animation:none}
/* no scroll timelines, or reduced motion: site.js marks the current take (.on) — a short cross-fade, or a plain cut */
html.js:not(.sda) .studio__shot,html.js:not(.sda) .studio__item{opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
html.js:not(.sda) .take.on>.studio__shot,html.js:not(.sda) .take.on>.studio__item{opacity:1;visibility:visible;transition:opacity .45s}
html.js:not(.fx) .studio__shot,html.js:not(.fx) .studio__item{transition:none}