/* =====================================================================
   VALLEY COMMERCIAL SERVICE
   Visual system mirrored from the reference: grey canvas, 4-column hairline grid with squares
   at every intersection, frosted cards, Inter Tight headings, Geist Mono body, Bebas Neue display.
   ===================================================================== */
:root{
  --bg:#2c2c2c; --bg-alt:#000; --primary:#fff; --grey:#191919;
  --p5:#ffffff0d; --p10:#ffffff1a; --p15:#ffffff26; --p20:#fff3; --p40:#fff6; --p60:#fff9;
  --grey-20:#3a3a3a33; --alt-25:#00000040;
  --f1:"Bebas Neue",sans-serif; --f2:"Inter Tight","Inter",Arial,sans-serif; --f3:"Geist Mono",ui-monospace,monospace;
  --header-h:8rem; --gut:.625rem;
  --t-body:clamp(.688rem,.33rem + .56vw,1rem);
  --t-head:clamp(1.5rem,.357rem + 1.79vw,2.5rem);
  --t-mq:clamp(10.625rem,1.339rem + 14.51vw,18.75rem);
  --t-mq-lg:clamp(13.125rem,21.88vw - .875rem,25.375rem);
  --pad-b:clamp(1.25rem,2.23vw - .179rem,2.5rem); --pad-i:clamp(1rem,2.68vw - .714rem,2.5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--primary);font-family:var(--f3);font-size:var(--t-body);font-weight:400;line-height:1.5em;letter-spacing:-.03em;overflow-x:clip}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:currentColor solid 1px;outline-offset:.25em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.text{text-transform:uppercase}
.text--normal{text-transform:none}
/* body paragraphs: Inter Tight in sentence case (short mono labels stay as they are) */
p.text{font-family:var(--f2);text-transform:none;letter-spacing:-.01em;line-height:1.5}
.heading{font-family:var(--f2);font-weight:400;font-size:var(--t-head);line-height:1.05em;letter-spacing:-.03em;margin-bottom:-.1em;padding-bottom:.1em}
.heading .it,.it{font-family:var(--f2);font-style:italic;line-height:1.05em}
.heading--sm{font-size:clamp(1.75rem,1.6893rem + .2589vw,2rem)}
.heading--mini{font-size:1.5rem}
.heading--lh{font-size:var(--t-head);line-height:1.3em;margin-bottom:-.2em;padding-bottom:.2em}
.mq-word{font-family:var(--f1);font-weight:400;font-size:var(--t-mq);line-height:.8em;letter-spacing:-.06em;padding-right:.2em;padding-top:.01em;margin-bottom:-.1em;flex:none;white-space:nowrap;text-transform:uppercase}
.mq-word--lg{font-size:var(--t-mq-lg)}
.mq-word--np{padding-right:0}
.mq-word--r{text-align:right;padding-right:.05em}
.mq-word--ib{display:inline-block}
.h-mobile{display:none}

/* ---------- containers, grid, hairlines ---------- */
.section{position:relative;width:100%;min-height:calc(100vh - 1.25rem);display:flex;overflow-x:clip}
.gallery,.rail{overflow-x:clip}
.section--hero{min-height:calc(100dvh - .625rem);padding-top:var(--gut)}
.section--sm{min-height:min(100dvh,63.75rem)}
.section--lg,.section--lg-xl{min-height:min(150dvh,95.625rem)}
.section--footer{min-height:min(100dvh - 2.625rem,63.75rem)}
.section--dark{background:var(--bg-alt)}
.container{position:relative;width:100%;max-width:120rem;margin-inline:auto;padding-inline:var(--gut);display:flex}
.layout{position:relative;z-index:1;flex:1;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:var(--rows,0 1fr 0 1fr 0)}
/* vertical hairlines at 0 / 25 / 50 / 75 / 100% of the content box */
.layout::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(var(--p20),var(--p20)) 0 0/1px 100% no-repeat,linear-gradient(var(--p20),var(--p20)) 25% 0/1px 100% no-repeat,
  linear-gradient(var(--p20),var(--p20)) 50% 0/1px 100% no-repeat,linear-gradient(var(--p20),var(--p20)) 75% 0/1px 100% no-repeat,
  linear-gradient(var(--p20),var(--p20)) 100% 0/1px 100% no-repeat}
/* horizontal hairline rows: full-viewport line with a square at each column edge (squares injected by JS) */
.ln{grid-column:1/-1;position:relative;height:0;z-index:10;pointer-events:none}
.ln::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:1px;background:var(--p20);transform:translate(-50%,-50%)}
.sq{position:absolute;top:0;width:7px;height:7px;background:var(--primary);transform:translate(-50%,-50%);z-index:2}
.cell{position:relative;min-width:0;min-height:0}

/* ---------- full-bleed background + parallax ---------- */
.bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg img{position:absolute;left:0;top:0;width:100%;max-width:none;height:100%;object-fit:cover;transform:translateZ(0)}
.bg--bright img{filter:brightness(.8)}
.bg--auto img{filter:brightness(.92)}

/* ---------- cards ---------- */
.card{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:2rem;height:100%;
  padding:var(--pad-b) var(--pad-i);background:var(--p5);-webkit-backdrop-filter:blur(1.75rem);backdrop-filter:blur(1.75rem);color:var(--primary);will-change:transform}
.card--dark{background:var(--grey-20)}
.card--black{background:#ffffff08}
.card--center{align-items:center;justify-content:center;text-align:center;gap:1.75rem}
.card__thumb{width:min(100%,11rem);aspect-ratio:1.65;overflow:hidden}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
a.card:hover .card__thumb img{transform:scale(1.06)}
.card__no{background:var(--p10);border-radius:.75rem;padding:.625rem;line-height:.8em;text-transform:uppercase}
.card .text{max-width:28ch}

/* ---------- tag (pill with looping marquee) ---------- */
.tag{display:block;width:min(100%,7.5rem);background:var(--p10);border-radius:.75rem;padding:.625rem;overflow:hidden;text-transform:uppercase;line-height:.8em;font-size:var(--t-body)}
.tag--dark{background:var(--grey);color:var(--p60)}
.tag--wide{width:min(100%,9.5rem)}

/* ---------- marquee (generic) ---------- */
.mq{display:flex;width:100%;height:100%;overflow:hidden}
.mq__track{display:flex;flex:none;align-items:flex-end;animation:mq var(--mq-dur,20s) linear infinite;will-change:transform}
.mq__track > *{flex:none}
.mq.is-paused .mq__track{animation-play-state:paused}
.tag .mq__track > span{padding-right:1.6em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;background:var(--primary);color:var(--bg-alt);letter-spacing:-.03em;text-transform:uppercase;
  padding:clamp(1rem,.357rem + 1vw,1.563rem) clamp(1rem,2.23vw - .429rem,2.25rem);line-height:.8em;transition:background .3s,color .3s}
.btn:hover{background:var(--bg-alt);color:var(--primary)}
.btn--ghost{background:transparent;color:var(--primary);padding:0}
.btn--ghost:hover{background:transparent}
.plus{position:relative;width:.5rem;height:.5rem;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s ease}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.is-open .plus::after,.header.is-open .btn--ghost .plus::after{transform:translate(-50%,-50%) rotate(0)}

/* ---------- content reveal (mask grows from a corner) ---------- */
.reveal{position:relative;width:100%;height:100%;opacity:0;-webkit-mask:linear-gradient(#fff,#fff) no-repeat;mask:linear-gradient(#fff,#fff) no-repeat;
  -webkit-mask-size:0% 0%;mask-size:0% 0%;transition:mask-size 1250ms ease-in-out,-webkit-mask-size 1250ms ease-in-out,opacity 1250ms ease-in-out}
.reveal[data-reveal="left top"]{-webkit-mask-position:left top;mask-position:left top}
.reveal[data-reveal="left bottom"]{-webkit-mask-position:left bottom;mask-position:left bottom}
.reveal[data-reveal="right top"]{-webkit-mask-position:right top;mask-position:right top}
.reveal[data-reveal="right bottom"]{-webkit-mask-position:right bottom;mask-position:right bottom}
.reveal[data-reveal="center center"]{-webkit-mask-position:center;mask-position:center}
.reveal.is-done{opacity:1;-webkit-mask-size:101% 101%;mask-size:101% 101%}
.no-js .reveal{opacity:1;-webkit-mask-size:101% 101%;mask-size:101% 101%}

.main.is-hidden{visibility:hidden}

/* ---------- header (floating glass bar) + menu ---------- */
.header{position:fixed;z-index:50;top:var(--gut);left:50%;transform:translateX(-50%);width:100%;max-width:29.625rem;border-radius:.75rem;overflow:hidden;
  background:var(--p5);-webkit-backdrop-filter:blur(6.25rem);backdrop-filter:blur(6.25rem)}
.header__bar{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:1.25rem}
.burger{position:relative;width:1.25rem;height:1.25rem;justify-self:start}
.burger i{position:absolute;left:0;right:0;height:1px;background:var(--primary);transition:transform .4s ease,top .4s ease}
.burger i:first-child{top:35%}.burger i:last-child{top:65%}
.header.is-open .burger i:first-child{top:50%;transform:rotate(45deg)}
.header.is-open .burger i:last-child{top:50%;transform:rotate(-45deg)}
.header__logo{font-family:var(--f1);font-size:2rem;line-height:.8;letter-spacing:-.02em;padding-top:.1em}
.header__logo img{display:block;height:2.6rem;width:auto;border-radius:.35rem} /* Valley logo image in place of the text wordmark */
.header .btn--ghost{justify-self:end}
.menu{height:0;opacity:0;overflow:hidden}
.menu__in{padding:0 1.25rem 1.75rem;display:flex;flex-direction:column;gap:clamp(3.75rem,3.447rem + 1.29vw,5rem)}
.menu__cards{display:flex;justify-content:center;gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--p20)}
.menu__vline{width:1px;background:var(--p20)}
.mini{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.mini__img{aspect-ratio:1.65;width:clamp(9.375rem,9.03rem + 1.49vw,10.8125rem);overflow:hidden;transition:border-radius .3s ease}
.mini:hover .mini__img{border-radius:.75rem}
.mini__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mini:hover .mini__img img{transform:scale(1.06)}
.menu__links{display:flex;flex-direction:column;align-items:center;gap:1rem}
.menu__links a{font-family:var(--f2);font-size:var(--t-head);line-height:.9}
.menu__contact{text-align:center;color:var(--p60)}
/* char-roll links (nav + footer) */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.roll__a,.roll__b{display:block;white-space:nowrap}
.roll__b{position:absolute;left:0;top:0}
.roll .ch{display:inline-block;transition:transform .3s ease}
.roll__b .ch{transform:translateY(115%)}

/* ---------- hero ---------- */
.hero .card{justify-content:space-between}
.hero__mq{align-self:end;overflow:hidden}

/* ---------- sticky gallery ---------- */
.gallery{position:relative;width:100%}
.gallery__sticky{position:sticky;top:0;z-index:20;width:100%;height:0;margin-top:-100dvh;margin-bottom:100dvh}
.gallery__fw{position:absolute;top:0;left:0;width:100vw;height:100dvh;overflow:hidden;cursor:none}
.follower{position:absolute;left:0;top:0;width:200%;max-width:44rem;height:2rem;display:flex;align-items:center;background:var(--bg-alt);color:var(--primary);opacity:0;pointer-events:none;overflow:hidden}
.follower .mq__track > span{padding-right:3rem;white-space:nowrap}
.section--sticky{min-height:min(200dvh,127.5rem);background-image:linear-gradient(180deg,var(--bg-alt) 49.999%,transparent 50.001%)}
.sticky-box{position:sticky;top:0;display:flex;justify-content:center;align-items:flex-start;width:100%;height:min(100dvh,63.75rem)}
.sticky-content{position:relative;width:33.333%;height:min(50dvh,31.875rem);overflow:hidden}

/* ---------- quote section ---------- */
.quote{position:relative;text-align:center;padding:0 3.25rem}
.quote::before,.quote::after{content:"";position:absolute;top:-.6em;bottom:-.6em;width:1.6rem;border:1px solid var(--p60);border-radius:50%}
.quote::before{left:0;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.quote::after{right:0;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.quote .line{overflow:hidden}
.press{display:flex;flex-direction:column;align-items:center;gap:2rem}
.press__logos{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(1.5rem,3vw,3.5rem);color:var(--p60)}
.press__logos span{transition:color .3s}
.press__logos span:hover{color:var(--primary)}

/* ---------- team ---------- */
.person{position:relative;height:100%;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--pad-b)}
.person .heading{position:relative;z-index:2}
.sign{display:grid;place-items:center;height:100%}
.sign svg{width:min(80%,12rem);height:auto;color:var(--primary)}
.sign path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- footer ---------- */
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:var(--pad-b) var(--pad-i)}
.footer-nav a{font-family:var(--f2);font-size:clamp(1.25rem,.9rem + .7vw,1.6rem);line-height:1.15}
.card--footer{gap:1.5rem}
.card--footer .grp{display:flex;flex-direction:column;gap:.15rem}
.info-bar{height:2rem;background:var(--primary);color:var(--bg-alt);display:flex;align-items:center;overflow:hidden}
.info-bar .mq__track > span{padding-right:4rem;white-space:nowrap}
.info-bar a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .header{top:0;left:0;right:0;transform:none;max-width:none;border-radius:0;padding-inline:var(--gut);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header__bar{border-inline:1px solid var(--p20);padding-block:1rem;background:var(--p5);-webkit-backdrop-filter:blur(6.25rem);backdrop-filter:blur(6.25rem)}
  .menu{background:var(--p5);-webkit-backdrop-filter:blur(6.25rem);backdrop-filter:blur(6.25rem);border-inline:1px solid var(--p20)}
  .layout{display:flex;flex-direction:column;grid-template-rows:none}
  .layout > .cell{min-height:24rem}
  .layout > .cell--auto{min-height:0}
  .layout > .cell--empty{display:none}
  .mq-word:not(.keep-m){display:none}
  .h-mobile{display:block;font-family:var(--f1);font-size:clamp(4.5rem,18vw,9rem);line-height:.82;letter-spacing:-.04em;text-transform:uppercase;padding:2.5rem var(--pad-i) 1rem}
  .h-mobile--c{text-align:center}
  .layout::before{background:linear-gradient(var(--p20),var(--p20)) 0 0/1px 100% no-repeat,linear-gradient(var(--p20),var(--p20)) 100% 0/1px 100% no-repeat}
  .sticky-content{width:50%}
}
@media (max-width:767px){
  .layout{display:flex;flex-direction:column;grid-template-rows:none}
  .layout::before{background:linear-gradient(var(--p20),var(--p20)) 0 0/1px 100% no-repeat,linear-gradient(var(--p20),var(--p20)) 100% 0/1px 100% no-repeat}
  .layout > .cell{min-height:22rem}
  .layout > .cell--auto{min-height:0}
  .layout > .cell--empty{display:none}
  .mq-word:not(.keep-m){display:none}
  .h-mobile{display:block;font-family:var(--f1);font-size:clamp(4.5rem,22vw,8rem);line-height:.82;letter-spacing:-.04em;text-transform:uppercase;padding:2.5rem var(--pad-i) 1rem}
  .h-mobile--c{text-align:center}
  .section--sticky{min-height:auto;background:none}
  .sticky-box{position:relative;height:28rem}
  .sticky-content{width:100%;height:100%}
  .gallery__sticky{display:none}
  .quote{padding:0 1.5rem}
  .menu__cards{gap:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none}
  .reveal{transition:none}
}

/* =====================================================================
   EDITION II — new compositions on the same system
   ===================================================================== */
.mq-word--xl{font-size:clamp(9rem,25.6vw,31rem);line-height:.78;letter-spacing:-.05em;padding:0;text-align:center;width:100%}
.heading--xl{font-size:clamp(2.2rem,1rem + 2.6vw,4rem);line-height:1.05em}

/* hero 2 */
.hero2__word{display:flex;justify-content:center;overflow:hidden;padding-top:calc(var(--header-h) + 2rem)}
.hero2__hint{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.8rem;padding-bottom:var(--pad-b)}
.hero2__drip{width:1px;height:3.5rem;background:linear-gradient(var(--primary),transparent);transform-origin:top;animation:drip 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* studio statement + counters */
.statement{max-width:30ch}
.stat{display:flex;flex-direction:column;gap:.6rem;padding:var(--pad-b) var(--pad-i)}
.stat__n{font-family:var(--f1);font-size:clamp(4rem,2rem + 5vw,8rem);line-height:.8;letter-spacing:-.04em}
.stat__l{color:var(--p60)}

/* works rail */
.rail{position:relative;background:var(--bg)}
.rail__pin{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.rail__head{align-items:center;gap:2rem;padding-top:calc(var(--header-h) + 3.25rem);padding-bottom:1.25rem;border-bottom:1px solid var(--p20)}
.rail__count{margin-left:auto}
.rail__bar{position:relative;width:min(16rem,30vw);height:1px;background:var(--p20)}
.rail__bar i{position:absolute;inset:0;background:var(--primary);transform-origin:left;transform:scaleX(0)}
.rail__track{flex:1;display:flex;align-items:stretch;gap:0;width:max-content;padding:1.25rem var(--gut);will-change:transform}
.rail__intro{flex:none;width:min(34rem,40vw);display:flex;flex-direction:column;justify-content:space-between;padding:0 var(--pad-i) var(--pad-b) 0;border-right:1px solid var(--p20)}
.rail__intro .mq-word{font-size:clamp(8rem,16vw,20rem)}
.rail__intro .text{max-width:30ch}
.panel{position:relative;flex:none;width:min(46vw,52rem);height:100%;border-right:1px solid var(--p20);overflow:hidden}
.panel--tall{width:min(34vw,38rem)}
.panel__img{position:absolute;inset:0;overflow:hidden}
.panel__img img,.panel__img video{position:absolute;top:0;left:-8%;width:116%;max-width:none;height:100%;object-fit:cover;filter:brightness(.85);transition:filter .8s}
.panel:hover .panel__img img,.panel:hover .panel__img video{filter:brightness(1)}
.panel__card{position:absolute;left:var(--gut);bottom:var(--gut);height:auto;width:min(22rem,calc(100% - 1.25rem));gap:1.4rem}

/* principles accordion + image swap */
.acc{border-top:1px solid var(--p20);margin:var(--pad-b) var(--pad-i)}
.acc__item{border-bottom:1px solid var(--p20)}
.acc__btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;padding:1.5rem 0;text-align:left;color:var(--p60);transition:color .4s}
.acc__btn .heading{font-size:clamp(1.75rem,1rem + 1.6vw,2.8rem)}
.acc__btn:hover,.acc__btn[aria-expanded="true"]{color:var(--primary)}
.acc__btn .plus{width:.75rem;height:.75rem}
.acc__btn[aria-expanded="true"] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.acc__body{height:0;overflow:hidden}
.acc__body .text{padding:0 0 1.6rem calc(2.6rem + 1.4rem);max-width:46ch;color:var(--p60)}
.swap{position:relative;height:100%;min-height:30rem;overflow:hidden;margin:var(--gut)}
.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.15)}
.swap img.is-on{clip-path:inset(0);transform:scale(1);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1),transform 1.6s cubic-bezier(.22,1,.36,1)}
.swap img.is-instant{transition:none}

/* reel video */
.sticky-content video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}

/* services: image surfaces inside the card on hover */
.svc{overflow:hidden;isolation:isolate}
.svc__img{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.svc__img img{width:100%;height:100%;object-fit:cover;filter:brightness(.55);transform:scale(1.12);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
/* one card is always "active" (card 2 by default); hover / focus / tap moves it — see the services block in main.js */
.svc.is-active .svc__img{opacity:1}
.svc.is-active .svc__img img{transform:scale(1)}
.svc .text{color:var(--p60)} /* softer card copy */
.person .heading{text-align:center}
.person .heading .it{font-size:.7em}
/* team portraits (cropped from the hero fleet photo): keep faces in frame at every card shape */
#team .person .bg img,#team .reveal .bg img{object-fit:cover;object-position:50% 18%}

@media (max-width:991px){
  .rail__pin{height:auto;overflow:visible}
  .rail__head{padding-top:2.5rem} /* nav is hidden past the hero, so no header clearance needed here */
  .rail__track{width:auto;flex-direction:column;gap:var(--gut);padding:var(--gut)}
  .rail__intro{width:auto;border-right:0;padding:1rem var(--pad-i) 2rem}
  .panel,.panel--tall{width:100%;height:auto;aspect-ratio:4/3.2;border-right:0}
  .panel__img img,.panel__img video{left:0;width:100%}
  .acc{margin:0}
  .swap{min-height:22rem;margin:0}
  .hero2__word{padding-top:0}
  .hero2 .h-mobile{padding-top:8rem}
  .stat{border-top:1px solid var(--p20)}
}

/* =====================================================================
   REVISION — loader, no hairline grid, reel, team hover, footer
   ===================================================================== */
/* hairline grid + intersection squares removed sitewide (rows keep their spacing) */
.layout::before,.ln::before,.sq{display:none!important;content:none!important}
.rail__head{border-bottom:0}.rail__intro,.panel{border-right:0}.rail__track{gap:var(--gut)}

/* loader */
.preloader{position:fixed;inset:0;z-index:200;pointer-events:auto;color:var(--primary)}
.pl-panel{position:absolute;left:0;right:0;height:50.5%;background:var(--bg)}
.pl-panel--t{top:0}.pl-panel--b{bottom:0}
.pl-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.2rem;padding:var(--pad-i)}
.pl-word{display:flex;overflow:hidden;font-family:var(--f1);font-size:clamp(5rem,16vw,15rem);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;padding-top:.04em}
.pl-ch{display:inline-block;will-change:transform}
.pl-meta{display:flex;align-items:baseline;gap:clamp(1.5rem,5vw,4rem);color:var(--p60)}
.pl-count{font-family:var(--f1);font-size:1.6rem;color:var(--primary);letter-spacing:.02em;min-width:3ch;text-align:right}
.pl-bar{position:absolute;left:var(--pad-i);right:var(--pad-i);bottom:clamp(1.5rem,4vh,2.5rem);height:1px;background:var(--p15)}
.pl-bar i{position:absolute;inset:0;background:var(--primary);transform-origin:left;transform:scaleX(0)}

.tag--static{display:inline-block;width:auto}

/* reel */
.reel{position:relative;background:var(--bg-alt);overflow-x:clip}
.reel__head{justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;padding-top:clamp(5rem,10vw,9rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.reel__intro{display:flex;flex-direction:column;gap:1.75rem;padding-inline:var(--pad-i)}
.reel__lead{max-width:34ch;color:var(--p60);padding-inline:var(--pad-i)}
.reel__track{position:relative;height:260vh}
.reel__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reel__frame{position:relative;width:100%;height:100%;overflow:hidden;clip-path:inset(14% 22% 14% 22%);will-change:clip-path;cursor:none}
.reel__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform}
.reel__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.6));pointer-events:none}
.reel__title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--f1);font-size:clamp(3.5rem,8.6vw,9.5rem);line-height:.8;letter-spacing:-.03em;text-transform:uppercase;pointer-events:none;will-change:transform,opacity}
.reel__toggle{position:absolute;left:0;top:0;z-index:5;width:6.5rem;height:6.5rem;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--bg-alt);
  text-transform:uppercase;font-size:var(--t-body);transform:translate(-50%,-50%) scale(0);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.reel__frame.is-hover .reel__toggle{transform:translate(-50%,-50%) scale(1)}
.reel__ui{position:absolute;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.25rem 2rem;padding:var(--pad-b) var(--pad-i);opacity:0}
.reel__progress{position:relative;height:1px;background:var(--p20)}
.reel__progress i{position:absolute;inset:0;background:var(--primary);transform-origin:left;transform:scaleX(0)}
.reel__time{color:var(--p60);font-variant-numeric:tabular-nums}

/* team: refined hover on member images */
.person{isolation:isolate}
.person .bg{transition:transform 1.4s cubic-bezier(.22,1,.36,1);will-change:transform}
.person .bg img{transition:filter 1s cubic-bezier(.22,1,.36,1)}
.person::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55));opacity:.6;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.person::after{content:"";position:absolute;inset:.75rem;z-index:1;pointer-events:none;border:1px solid rgba(255,255,255,.4);opacity:0;transform:scale(1.03);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.person:hover .bg{transform:scale(1.05)}
.person:hover .bg img{filter:brightness(.95) contrast(1.06)}
.person:hover::before{opacity:1}
.person:hover::after{opacity:1;transform:scale(1)}

.ulk{position:relative;display:inline-block;width:fit-content}
.ulk::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ulk:hover::after{transform:scaleX(1);transform-origin:left}

@media (max-width:991px){
  .reel__track{height:auto}
  .reel__sticky{position:relative;height:auto;display:block;padding:0 var(--gut) var(--gut)}
  .reel__frame{clip-path:none!important;height:78vh;max-height:44rem;cursor:auto}
  .reel__frame video{transform:none!important}
  .reel__title{font-size:clamp(4rem,18vw,8rem)}
  .reel__ui{opacity:1!important}
  .reel__toggle{left:auto!important;top:auto!important;right:var(--pad-i);bottom:auto;top:var(--pad-b)!important;width:4.5rem;height:4.5rem;transform:none!important}
}
@media (hover:none){
  .person::after{opacity:0}
}

/* ---------- header menu (redesign): the glass bar widens into an editorial panel ---------- */
.header{transition:max-width .8s cubic-bezier(.76,0,.24,1),background .6s}
.header.is-open{max-width:min(74rem,calc(100vw - 1.25rem));background:rgba(28,29,29,.72)}
.menu2{padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;gap:2rem}
.menu2__cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding-top:1.5rem;border-top:1px solid var(--p15)}
.menu2__links{display:flex;flex-direction:column;list-style:none}
.menu2__link{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--p10);transition:color .4s}
.menu2__link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--primary);transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.menu2__link:hover::after,.menu2__link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.menu2__n{color:var(--p40);transition:color .4s}
.menu2__t{font-family:var(--f2);font-size:clamp(1.9rem,1.2rem + 1.8vw,3.1rem);line-height:1.02;letter-spacing:-.025em}
.menu2__arr{font-size:1.1rem;opacity:0;transform:translate(-.6rem,.4rem);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.menu2__link:hover .menu2__arr,.menu2__link:focus-visible .menu2__arr{opacity:1;transform:none}
.menu2__link:hover .menu2__n,.menu2__link:focus-visible .menu2__n{color:var(--primary)}
.menu2__links:hover .menu2__link:not(:hover){color:var(--p40)}
.menu2__link:focus-visible{outline:0}
.menu2__aside{display:flex;flex-direction:column;gap:1.5rem}
.menu2__img{position:relative;aspect-ratio:4/3.1;overflow:hidden;background:var(--grey)}
.menu2__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.12)}
.menu2__img img.is-on{clip-path:inset(0);transform:scale(1);transition:clip-path .9s cubic-bezier(.76,0,.24,1),transform 1.3s cubic-bezier(.22,1,.36,1)}
.menu2__img img.is-instant{transition:none}
.menu2__meta{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.menu2__meta > div{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.menu2__label{color:var(--p40);margin-bottom:.35rem}
.menu2__foot{display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding-top:1.25rem;border-top:1px solid var(--p15);color:var(--p60)}
.menu2__cta{margin-left:auto}
@media (max-width:991px){
  .header.is-open{max-width:none;background:transparent}
  .menu2__cols{grid-template-columns:1fr}
  .menu2__img{display:none}
  .menu{max-height:calc(100dvh - 7.5rem);overflow-y:auto}
}
@media (max-width:600px){ .menu2__cta{margin-left:0;width:100%} .menu2__hours{display:none} }



/* videos inside image frames fill and crop like the photos do */
.bg video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.vtile{position:relative;display:block;height:100%;overflow:hidden;background:var(--grey)}
.vtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.vtile:hover video{transform:scale(1.06)}
@media (max-width:991px){ .vtile{min-height:22rem} }

/* hero video tile: right edge stays on column 4; left edge extends a third of a column into column 3 (≈1⅓ columns wide) */
.hero2__vcell .vtile{width:66.667%;margin-left:auto}
@media (max-width:991px){ .hero2__vcell .vtile{width:100%} }


/* ---------- footer (redesign 4): full-bleed image, centred invitation, index + studios, logo base line ---------- */
.fz{position:relative;isolation:isolate;overflow:hidden;color:var(--primary);background:#141515}
.fz__bg{z-index:-1}
.fz__bg img{filter:brightness(.55) saturate(.9)}
.fz__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,16,.6) 0%,rgba(15,16,16,.3) 32%,rgba(15,16,16,.72) 60%,rgba(15,16,16,.95) 100%)}
.fz__in{flex-direction:column;padding-top:clamp(8rem,14vw,13rem)}
.fz__cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem;padding:0 var(--pad-i) clamp(6rem,11vw,10rem)}
.fz__title{font-family:var(--f2);font-weight:400;font-size:clamp(3rem,1rem + 5.4vw,7.4rem);line-height:1.05;letter-spacing:-.035em;max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.3)}
.fz__title .it{font-style:italic;color:rgba(255,255,255,.8)}
.fz__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.25rem 2rem;margin-top:.6rem}
  font-family:var(--f3);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .5s}
.fz__mail{position:relative;font-family:var(--f2);font-size:clamp(1.15rem,.95rem + .5vw,1.45rem);padding-bottom:.2rem;color:rgba(255,255,255,.85)}
.fz__mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.fz__mail:hover::after{transform:scaleX(0)}
.fz__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);margin:0 var(--pad-i);border-top:1px solid rgba(255,255,255,.16)}
.fz__label{display:block;color:rgba(255,255,255,.5);margin-bottom:1rem}
.fz__nav{display:flex;flex-direction:column;padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,4rem) clamp(2rem,4vw,3rem) 0;border-right:1px solid rgba(255,255,255,.16)}
.fz__nav a{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.1);transition:opacity .4s}
.fz__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--primary);transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.fz__nav a:hover::after,.fz__nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.fz__n{color:rgba(255,255,255,.45);transition:color .4s}
.fz__t{font-family:var(--f2);font-size:clamp(1.7rem,1.1rem + 1.5vw,2.8rem);line-height:1.02;letter-spacing:-.025em}
.fz__nav i{font-style:normal;opacity:0;transform:translateX(-.6rem);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1)}
.fz__nav a:hover i,.fz__nav a:focus-visible i{opacity:1;transform:none}
.fz__nav a:hover .fz__n{color:var(--primary)}
.fz__nav:hover a:not(:hover){opacity:.45}
.fz__side{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem);padding:clamp(2rem,4vw,3rem) 0 clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,4rem)}
.fz__block{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.fz__studios{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;width:100%}
.fz__studios address{font-style:normal;display:flex;flex-direction:column;gap:.25rem;color:rgba(255,255,255,.7);line-height:1.5}
.fz__studios strong{font-family:var(--f2);font-weight:400;font-size:1.35rem;color:var(--primary)}
.fz__social{display:flex;gap:1.5rem;color:rgba(255,255,255,.7)}
.fz__social a:hover{color:var(--primary)}
.fz__base{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem 2.5rem;margin:0 var(--pad-i);padding:1.5rem 0 1.8rem;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.62)}
.fz__logo{font-family:var(--f1);font-size:1.9rem;line-height:.8;letter-spacing:.02em;color:var(--primary);padding-top:.1em;transition:letter-spacing .7s cubic-bezier(.22,1,.36,1),opacity .4s}
.fz__logo:hover{letter-spacing:.09em;opacity:.85}
.fz__top{color:var(--primary)}
.fz__top i{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.fz__top:hover i{transform:translateY(-4px)}
@media (max-width:991px){
  .fz__grid{grid-template-columns:1fr}
  .fz__nav{border-right:0;padding-right:0}
  .fz__side{padding-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .fz__base{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .fz__studios{grid-template-columns:1fr}
  .fz__base{grid-template-columns:1fr;gap:.6rem}
}

/* ---------- shared pill button (footer CTA, Careers, inner-page actions) ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;padding:1.05rem 1.7rem;border-radius:999px;background:var(--primary);color:var(--bg-alt);
  font-family:var(--f3);font-size:.82rem;font-weight:400;letter-spacing:.04em;line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;isolation:isolate;border:0;cursor:pointer;transition:color .5s}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grey);transform:translateY(101%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.pill:hover,a:hover > .pill,.card:hover .pill{color:var(--primary)}
.pill:hover::before,a:hover > .pill::before,.card:hover .pill::before{transform:translateY(0)}
.pill i{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pill:hover i,a:hover > .pill i,.card:hover .pill i{transform:translate(3px,-3px)}
.pill:focus-visible{outline:1px solid var(--primary);outline-offset:3px}

/* not sticky: the header sits over the hero, slides up out of view once the hero is scrolled past, and slides back when the hero returns (see main.js) */
.header{transition:max-width .8s cubic-bezier(.76,0,.24,1),background .6s,transform .7s cubic-bezier(.76,0,.24,1),opacity .5s ease}
.header.is-away{transform:translate(-50%,calc(-100% - 2rem));opacity:0;pointer-events:none}
@media (max-width:991px){.header.is-away{transform:translateY(calc(-100% - 2rem))}}