/* ============================================================
   VEYRA HOUSE — sections
   ============================================================ */

/* ------------------------------------------------------------
   HERO — The Opening Cut (home)
   ------------------------------------------------------------ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--black); overflow:hidden;
  padding-bottom:clamp(3.5rem,6vw,5.5rem);
}
.hero__stack{ position:absolute; inset:0; z-index:0; }
.hero__layer{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.3s var(--ease);
}
.hero__layer.is-on{ opacity:1; }
.hero__layer .v{ width:100%; height:100%; }

/* opening beat: black → visuals fade in */
.hero__stack{ animation:heroIn 900ms var(--ease) 400ms both; opacity:0; }
@keyframes heroIn{ to{ opacity:1; } }

.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 32%, rgba(0,0,0,.1) 62%, rgba(0,0,0,.45) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%);
}
/* The hero column carries BOTH display type and body prose. They need
   different measures, so the cap must live on the CHILDREN, never on this
   container — a shared cap throttled the headline (6x the size of the prose)
   and truncated "Production worlds." to "Productio…". */
.hero__body{ position:relative; z-index:4; max-width:100%; }

/* reveal mask — clip-path, not overflow (see .hero__ln).
   The bottom slack stops the Y-clip shaving descenders. */
.hero__eyebrow{ clip-path:inset(0 -50vw -0.25em -50vw); }
.hero__eyebrow span{
  display:block; color:var(--accent);
  animation:maskUp 900ms var(--ease) 1000ms both;
}
/* The mask exists so each line slides UP from behind it — a VERTICAL effect.
   `overflow:hidden` clips BOTH axes, which is what sliced "Production worlds."
   `overflow-x:visible` + `overflow-y:hidden` does not work either: the spec
   forces the visible axis to `auto`, silently creating a scroll container.
   clip-path clips exactly the axis we ask for. */
.hero__title{ margin-top:1.25rem; }
.hero__ln{
  display:block;
  clip-path:inset(0 -50vw -0.04em -50vw);
}
.hero__ln i{
  display:block; font-style:normal;
  animation:maskUp 1150ms var(--ease) both;
  animation-delay:var(--d,1250ms);
}

.hero__sub{ max-width:46ch; animation:fadeUp 900ms var(--ease) 1900ms both; }
.hero__tags,.hero__ctas,.hero__proof{ max-width:64ch; }

@keyframes maskUp{
  from{ transform:translateY(105%); opacity:0; }
  to{ transform:none; opacity:1; }
}
@keyframes fadeUp{
  from{ transform:translateY(14px); opacity:0; }
  to{ transform:none; opacity:1; }
}

.hero__tags{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:2rem; padding:0; list-style:none;
}
.hero__tags li{ animation:fadeUp .7s var(--ease) both; }
.hero__tags li:nth-child(1){ animation-delay:2100ms; }
.hero__tags li:nth-child(2){ animation-delay:2200ms; }
.hero__tags li:nth-child(3){ animation-delay:2300ms; }
.hero__tags li:nth-child(4){ animation-delay:2400ms; }
.hero__tags li:nth-child(5){ animation-delay:2500ms; }
.hero__tag{
  display:inline-flex; align-items:center; min-height:40px;
  padding:.5rem 1rem;
  background:rgba(19,19,22,.6);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(5px);
  color:var(--off-white);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.hero__tag:hover{ background:rgba(255,255,255,.14); border-color:var(--white); }

.hero__ctas{
  display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.4rem;
  animation:fadeUp .9s var(--ease) 2700ms both;
}
.hero__proof{
  margin-top:2rem; color:var(--warm-gray);
  animation:fadeUp .9s var(--ease) 2900ms both;
}

/* film timeline along bottom edge */
.hero__timeline{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  height:22px; display:flex; align-items:stretch;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.55);
}
.hero__timeline i{
  flex:1; border-right:1px solid rgba(255,255,255,.1);
}
.hero__timeline i:nth-child(4n){ background:rgba(255,255,255,.08); }
.hero__timeline::after{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--accent);
  box-shadow:0 0 12px 1px var(--accent);
  animation:playhead 14s linear infinite;
}
@keyframes playhead{ from{ left:0; } to{ left:100%; } }

.hero__cue{
  position:absolute; right:var(--gutter); bottom:3.4rem; z-index:5;
  display:flex; align-items:center; gap:.6rem;
  color:var(--silver);
  animation:fadeUp .9s var(--ease) 3150ms both;
}
.hero__cue i{
  display:block; width:1px; height:34px; background:var(--silver);
  animation:cue 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

@media (max-width:760px){
  .hero{ min-height:92vh; min-height:92svh; }
  .hero__cue{ display:none; }
  .hero__body{ padding-bottom:1rem; }
}

/* cursor preview */
.cursor{
  position:fixed; top:0; left:0; z-index:90;
  width:104px; height:104px; border-radius:50%;
  overflow:hidden; pointer-events:none;
  border:1px solid rgba(255,255,255,.7);
  transform:scale(0);
  transition:transform .4s var(--ease);
  mix-blend-mode:normal;
}
.cursor img{ width:100%; height:100%; object-fit:cover; }
.cursor__code{
  position:absolute; inset:auto 0 0 0; text-align:center;
  padding:.25rem; background:rgba(0,0,0,.72); color:var(--accent);
  font-family:var(--mono); font-size:.5rem; letter-spacing:.14em;
}
@media (max-width:1024px){ .cursor{ display:none; } }

/* ------------------------------------------------------------
   FEATURED FRAMES — asymmetric studio wall
   ------------------------------------------------------------ */
.ff__head{
  display:grid; grid-template-columns:1fr auto; gap:2rem;
  align-items:end; margin-bottom:clamp(2.5rem,4vw,4rem);
}
.ff__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:8px;
  gap:clamp(.6rem,1.1vw,1.1rem);
}
.ff__cell{ position:relative; }
/* editorial, irregular — spans encode the frame proportions */
/* four frames, deliberately unequal — a gallery wall, not a grid */
.ff__cell:nth-child(1){ grid-column:1 / span 7;  grid-row:span 52; }
.ff__cell:nth-child(2){ grid-column:8 / span 5;  grid-row:span 74; }
.ff__cell:nth-child(3){ grid-column:1 / span 4;  grid-row:span 44; }
.ff__cell:nth-child(4){ grid-column:5 / span 3;  grid-row:span 44; }
.ff__cell .v{ height:100%; }

@media (max-width:760px){
  .ff__head{ grid-template-columns:1fr; align-items:start; }
  .ff__grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .ff__cell{ grid-column:1 / -1 !important; grid-row:auto !important; }
  /* rhythmic alternating heights on mobile */
  .ff__cell .v{ aspect-ratio:4/3; }
  .ff__cell:nth-child(2) .v{ aspect-ratio:3/4; }
}

/* ------------------------------------------------------------
   SELECTED WORK
   ------------------------------------------------------------ */
.sw__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2.5rem,4vw,4rem);
}
.sw__link{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:.3rem;
}
.sw__link svg{ transition:transform .45s var(--ease); }
.sw__link:hover svg{ transform:translateX(6px) scaleX(1.35); transform-origin:left; }

.sw__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,2.8vw,3rem);
}
.swcard{
  background:var(--white);
  border:1px solid rgba(0,0,0,.1);
  display:flex; flex-direction:column;
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
/* prints settling on a table */
[data-reveal].swcard{ transform:translateY(26px) rotate(var(--rot,.6deg)); }
[data-reveal].swcard.is-in{ transform:none; }
.swcard:hover{ box-shadow:0 24px 60px -24px rgba(0,0,0,.42); transform:translateY(-4px); }
.swcard__media{ position:relative; aspect-ratio:14/10; overflow:hidden; }
.swcard__media .v{ width:100%; height:100%; }
.swcard:hover .swcard__media img{ transform:scale(calc(var(--z,1) * 1.06)); }
.swcard__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.35) 42%, transparent 72%);
  opacity:0; transition:opacity .5s var(--ease);
  display:flex; align-items:flex-end; padding:1.1rem;
}
.swcard:hover .swcard__veil{ opacity:1; }
.swcard__veil p{
  margin:0; color:var(--silver);
  transform:translateY(12px); transition:transform .55s var(--ease) .06s;
}
.swcard:hover .swcard__veil p{ transform:none; }
.swcard__body{ padding:clamp(1.25rem,2vw,1.8rem); flex:1;
  display:flex; flex-direction:column; gap:.55rem; }
.swcard__cat{ color:var(--cool-gray); }
.swcard h3{ font-family:var(--display); font-size:clamp(1.35rem,2vw,1.75rem);
  letter-spacing:-.022em; margin:0; color:var(--black); line-height:1.1; }
.swcard__note{ margin:.35rem 0 0; color:var(--cool-gray); font-size:.92rem; line-height:1.55; }

@media (max-width:760px){ .sw__grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   SERVICES FLASH STRIP
   ------------------------------------------------------------ */
.flash{ position:relative; overflow:hidden; }
/* slate-line texture */
.flash::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
}
.flash > *{ position:relative; z-index:1; }
.flash__head{ margin-bottom:clamp(2.5rem,4vw,3.5rem); }

.marq{ overflow:hidden; padding-block:.25rem; }
.marq__track{ display:flex; gap:1rem; width:max-content; }
.marq--l .marq__track{ animation:mLeft 42s linear infinite; }
.marq--r .marq__track{ animation:mRight 34s linear infinite; }
.marq:hover .marq__track,.marq:focus-within .marq__track{ animation-play-state:paused; }
@keyframes mLeft{ to{ transform:translateX(-50%); } }
@keyframes mRight{ from{ transform:translateX(-50%); } to{ transform:none; } }

.scard{
  flex:none; width:clamp(238px,24vw,320px); min-height:168px;
  background:var(--charcoal); border:1px solid var(--cool-gray);
  padding:1.4rem;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  position:relative; overflow:hidden;
}
.scard:hover{ background:var(--off-white); color:var(--black); border-color:var(--off-white); }
.scard h3{
  font-family:var(--display); font-size:1.35rem; letter-spacing:-.02em;
  margin:0; line-height:1.12;
}
.scard__desc{
  margin:.5rem 0 0; font-size:.82rem; color:var(--warm-gray); line-height:1.5;
  transition:color .4s var(--ease);
}
.scard:hover .scard__desc{ color:var(--cool-gray); }
.scard__thumb{
  position:absolute; top:1.1rem; right:1.1rem;
  width:54px; aspect-ratio:3/2; overflow:hidden;
  opacity:.5; transition:opacity .4s var(--ease);
}
.scard:hover .scard__thumb{ opacity:1; }
.scard__thumb .v{ width:100%; height:100%; }

.dstrip{ margin-top:1rem; border-block:1px solid var(--line-dark); padding-block:1rem; }
.ditem{
  flex:none; display:inline-flex; align-items:center; gap:1.6rem;
  color:var(--warm-gray); white-space:nowrap;
}
.ditem::after{ content:"·"; color:var(--graphite); }

/* ------------------------------------------------------------
   BEHIND THE FRAME — film timeline process
   ------------------------------------------------------------ */
.bf__wrap{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr);
  gap:clamp(2.5rem,5vw,5rem);
}
.bf__intro .lede{ max-width:32ch; }
.bf__line{
  position:relative;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.6rem);
  padding-top:2.6rem;
}
.bf__line::before{
  content:""; position:absolute; left:0; top:0; height:1px;
  background:var(--graphite); width:100%; opacity:.25;
}
.bf__line::after{
  content:""; position:absolute; left:0; top:0; height:1px;
  background:var(--black); width:0;
  transition:width 2.4s var(--ease-cut);
}
.bf__line.is-in::after{ width:100%; }

.bstep{ position:relative; }
.bstep::before{
  content:""; position:absolute; left:0; top:-2.6rem;
  width:7px; height:7px; background:var(--black);
  transform:translateY(-3px) rotate(45deg) scale(0);
  transition:transform .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.bf__line.is-in .bstep::before{ transform:translateY(-3px) rotate(45deg) scale(1); }
/* Every step reserves the media slot so the six-step row stays aligned.
   Only two steps actually carry an image — they read as accents on a
   timeline, not as a grid with holes in it. Steps without one get a
   hairline rule instead, which keeps the rhythm and stays type-led. */
.bstep__thumb{
  aspect-ratio:4/3; margin-bottom:.9rem; overflow:hidden;
  background:var(--graphite);
  animation:flicker 1.1s steps(4) var(--d,0ms) 1 both;
}
@keyframes flicker{
  0%{ opacity:0; } 25%{ opacity:.9; } 40%{ opacity:.2; }
  60%{ opacity:1; } 75%{ opacity:.5; } 100%{ opacity:1; }
}
.bstep__thumb .v{ width:100%; height:100%; }
/* type-led steps: a rule where the image would be */
.bstep:not(.bstep--img)::after{
  content:""; display:block;
  aspect-ratio:4/3; margin-bottom:.9rem;
  border-top:1px solid rgba(0,0,0,.2);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 9px);
  opacity:0;
  transition:opacity .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.bf__line.is-in .bstep:not(.bstep--img)::after{ opacity:1; }
.bstep__n{ display:block; color:var(--black); font-weight:600; margin-bottom:.4rem; }
.bstep h3{
  font-family:var(--display); font-size:1.05rem; letter-spacing:-.014em;
  margin:0 0 .35rem; color:var(--black);
}
.bstep p{ margin:0; font-size:.84rem; color:var(--cool-gray); line-height:1.5; }

@media (max-width:1024px){
  .bf__wrap{ grid-template-columns:1fr; }
  .bf__line{ grid-template-columns:1fr; gap:2rem; padding-top:0; padding-left:2rem; }
  .bf__line::before,.bf__line::after{
    width:1px !important; height:100%; top:0; left:0;
  }
  .bf__line::after{ height:0; width:1px !important; transition:height 2.4s var(--ease-cut); }
  .bf__line.is-in::after{ height:100%; }
  .bstep::before{ left:-2rem; top:.35rem; }
  .bstep__thumb{ max-width:180px; }
}

/* ------------------------------------------------------------
   PROOF / LOGO GRID
   ------------------------------------------------------------ */
.proof{ text-align:center; }
.proof__head{ max-width:24ch; margin-inline:auto; }
.proof__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.12);
  margin-block:clamp(2.5rem,4vw,3.5rem);
}
.proof__cell{
  position:relative; background:var(--white);
  aspect-ratio:2/1;
  display:flex; align-items:center; justify-content:center;
  padding:1.4rem; overflow:hidden;
}
.proof__cell img{
  max-width:64%; filter:grayscale(1); opacity:.72;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.proof__cell:hover img{ opacity:.15; transform:scale(.9); }
.proof__cell span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-on-light); opacity:0;
  transition:opacity .4s var(--ease);
}
.proof__cell:hover span{ opacity:1; }

.proof__lines{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem); text-align:left;
}
.proof__lines p{
  margin:0; padding-top:1.1rem;
  border-top:1px solid rgba(0,0,0,.18);
  color:var(--cool-gray); font-size:.92rem; line-height:1.55;
}
@media (max-width:760px){
  .proof__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proof__lines{ grid-template-columns:1fr; gap:1.25rem; }
}

/* ------------------------------------------------------------
   WORK — contact-sheet hero
   ------------------------------------------------------------ */
.csheet{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  background:var(--black); overflow:hidden;
  padding-block:9rem 4rem;
}
.sheet{
  position:absolute; inset:-6% -2%; z-index:0;
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:8px; opacity:.5;
}
.sheet__col{ display:flex; flex-direction:column; gap:8px; }
.sheet__col:nth-child(odd){ animation:driftUp 26s var(--ease) infinite alternate; }
.sheet__col:nth-child(even){ animation:driftDn 30s var(--ease) infinite alternate; }
@keyframes driftUp{ from{ transform:translateY(-2.5%); } to{ transform:translateY(2.5%); } }
@keyframes driftDn{ from{ transform:translateY(2.5%); } to{ transform:translateY(-2.5%); } }

.sheet__cell{
  position:relative; overflow:hidden; flex:none;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .5s var(--ease), border-color .4s var(--ease), opacity .4s var(--ease);
}
.sheet__cell .v{ width:100%; height:100%; }
.sheet__cell.is-near{
  transform:scale(1.16); z-index:3;
  border-color:var(--white); border-width:2px;
}
.sheet__cell.is-near .sheet__meta{ opacity:1; }
.sheet__meta{
  position:absolute; inset:auto 0 0 0;
  padding:.3rem .4rem; background:rgba(0,0,0,.8); color:#fff;
  font-family:var(--mono); font-size:.5rem; letter-spacing:.1em;
  opacity:0; transition:opacity .35s var(--ease);
}

.csheet__body{
  position:relative; z-index:2;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px) saturate(0);
  border:1px solid var(--line-dark);
  padding:clamp(1.75rem,3.4vw,3.2rem);
  max-width:min(640px,100%);
  animation:fadeUp 1.1s var(--ease) 700ms both;
}
.csheet__filters{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.8rem;
  list-style:none; padding:0;
}
.csheet__filters span{
  display:inline-flex; align-items:center; min-height:36px;
  padding:.4rem .8rem; border:1px solid rgba(255,255,255,.22);
  color:var(--silver);
}

@media (max-width:760px){
  .sheet{ grid-template-columns:repeat(4,1fr); inset:-10% -30%; }
  .sheet__col:nth-child(n+5){ display:none; }
}

/* ------------------------------------------------------------
   WORK — sticky filter bar
   ------------------------------------------------------------ */
.pfilter{
  position:sticky; top:-1px; z-index:40;
  background:var(--bg-light);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pfilter.is-stuck{
  border-bottom-color:rgba(0,0,0,.14);
  box-shadow:0 12px 30px -22px rgba(0,0,0,.5);
}
.pfilter__in{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:1rem;
}
.pfilter__label{ flex:none; color:var(--cool-gray); }
.pfilter__btns{
  display:flex; gap:.4rem; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none;
}
.pfilter__btns::-webkit-scrollbar{ display:none; }
.pfbtn{
  flex:none; display:inline-flex; align-items:center; gap:.5rem;
  min-height:40px; padding:.5rem .9rem;
  border:1px solid rgba(0,0,0,.24); color:var(--black);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.pfbtn:hover{ border-color:var(--black); }
.pfbtn[aria-pressed="true"]{ background:var(--black); color:var(--white); border-color:var(--black); }
.pfilter__n{ opacity:.5; font-size:.6rem; }

@media (max-width:760px){
  .pfilter__label{ display:none; }
  .pfilter__in{ gap:0; }
}

/* ------------------------------------------------------------
   WORK — project wall
   ------------------------------------------------------------ */
.wall{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(.8rem,1.5vw,1.5rem);
}
.pcard{
  grid-column:span 2;
  position:relative; text-align:left; padding:0;
  background:var(--white); border:1px solid rgba(0,0,0,.1);
  overflow:hidden; cursor:pointer;
  transition:opacity .5s var(--ease), transform .5s var(--ease),
             box-shadow .5s var(--ease), max-height .5s var(--ease);
}
/* every 5th card is larger — the rhythm of a real wall */
.pcard:nth-child(4n+1){ grid-column:span 3; }
.pcard:hover{ box-shadow:0 26px 60px -28px rgba(0,0,0,.45); }
.pcard.is-hidden{
  display:none;
}
.pcard__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.pcard:nth-child(4n+1) .pcard__media{ aspect-ratio:16/10; }
.pcard__media .v{ width:100%; height:100%; }
.pcard:hover .pcard__media img{ transform:scale(calc(var(--z,1) * 1.07)); }
.pcard__over{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.5) 46%, transparent 78%);
  opacity:0; transition:opacity .5s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end; gap:.4rem;
  padding:1.1rem; color:var(--white);
}
.pcard:hover .pcard__over{ opacity:1; }
.pcard__over p{ margin:0; font-size:.8rem; color:var(--silver); line-height:1.5;
  transform:translateY(10px); transition:transform .55s var(--ease) .05s; }
.pcard:hover .pcard__over p{ transform:none; }
.pcard__bts{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  padding:.3rem .5rem; background:var(--white); color:var(--black);
}
.pcard__foot{ padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.3rem; }
.pcard__foot h3{
  font-family:var(--display); font-size:1.1rem; letter-spacing:-.018em;
  margin:0; color:var(--black); line-height:1.15;
}
.pcard__code{ color:var(--cool-gray); }

@media (max-width:1024px){
  .wall{ grid-template-columns:repeat(4,1fr); }
  .pcard,.pcard:nth-child(4n+1){ grid-column:span 2; }
}
@media (max-width:760px){
  .wall{ grid-template-columns:1fr; }
  .pcard,.pcard:nth-child(4n+1){ grid-column:1 / -1; }
  /* vary image height on mobile so it never reads as a template gallery */
  .pcard:nth-child(3n+1) .pcard__media{ aspect-ratio:4/3; }
  .pcard:nth-child(3n+2) .pcard__media{ aspect-ratio:1/1; }
  .pcard:nth-child(3n)   .pcard__media{ aspect-ratio:16/10; }
}

/* ------------------------------------------------------------
   WORK — featured pair
   ------------------------------------------------------------ */
.pair__grid{
  display:grid; grid-template-columns:1fr 1px 1fr;
  gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2.5rem,4vw,4rem);
}
.pair__div{ background:var(--silver); opacity:.4; }
.paircard__media{ aspect-ratio:5/6; overflow:hidden; position:relative; }
.paircard__media .v{ width:100%; height:100%; }
.paircard:hover .paircard__media img{ transform:scale(calc(var(--z,1) * 1.05)); }
.paircard--l .paircard__media{ clip-path:inset(0 100% 0 0); transition:clip-path 1.3s var(--ease-cut); }
.paircard--l.is-in .paircard__media{ clip-path:inset(0 0 0 0); }
.paircard--r .paircard__media{ clip-path:inset(0 0 0 100%); transition:clip-path 1.3s var(--ease-cut); }
.paircard--r.is-in .paircard__media{ clip-path:inset(0 0 0 0); }
.paircard__body{ padding-top:1.5rem; }
.paircard h3{
  font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:-.026em; margin:.7rem 0 .4rem; line-height:1.08;
}
.paircard__spec{ color:var(--accent); margin:0 0 .7rem; }
.paircard__note{ margin:0; color:var(--warm-gray); font-size:.92rem; max-width:38ch; }
@media (max-width:760px){
  .pair__grid{ grid-template-columns:1fr; }
  .pair__div{ height:1px; width:100%; }
}

/* ------------------------------------------------------------
   WORK — project modal
   ------------------------------------------------------------ */
.pmodal{
  border:0; padding:0; background:transparent;
  max-width:min(1240px,94vw); width:100%;
  max-height:92vh; color:var(--off-white);
}
.pmodal::backdrop{ background:rgba(0,0,0,.92); backdrop-filter:blur(6px) saturate(0); }
.pmodal__in{
  display:grid; grid-template-columns:1.5fr .85fr;
  background:var(--near-black);
  border:1px solid var(--line-dark);
  max-height:92vh; overflow:hidden;
  animation:zoomIn .55s var(--ease) both;
}
@keyframes zoomIn{ from{ transform:scale(.94); opacity:0; } to{ transform:none; opacity:1; } }
.pmodal__left{ padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; min-width:0; }
.pmodal__main{ position:relative; overflow:hidden; background:var(--black); flex:1; min-height:0; }
.pmodal__main .v{ width:100%; height:100%; clip-path:inset(0 0 100% 0); }
.pmodal__main .v.is-wiped{ animation:wipe 1s var(--ease-cut) forwards; }
@keyframes wipe{ to{ clip-path:inset(0 0 0 0); } }
.pmodal__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; flex:none; }
.pmodal__thumb{
  aspect-ratio:4/3; overflow:hidden; padding:0;
  border:1px solid var(--graphite); opacity:.55;
  transition:opacity .35s var(--ease), border-color .35s var(--ease);
}
.pmodal__thumb.is-on,.pmodal__thumb:hover{ opacity:1; border-color:var(--white); }
.pmodal__thumb .v{ width:100%; height:100%; }

.pmodal__right{
  background:var(--charcoal); padding:clamp(1.5rem,2.4vw,2.2rem);
  overflow-y:auto; position:relative;
}
.pmodal__close{
  position:absolute; top:1rem; right:1rem;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--silver); color:var(--silver);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.pmodal__close:hover{ background:var(--white); color:var(--black); }
.pmodal__right h2{
  font-family:var(--display); font-size:clamp(1.5rem,2.2vw,2rem);
  letter-spacing:-.026em; margin:.65rem 0 .3rem; line-height:1.06;
}
.pmodal__field{ margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--line-dark); }
.pmodal__field p{ margin:.5rem 0 0; color:var(--silver); font-size:.9rem; line-height:1.55; }

@media (max-width:760px){
  .pmodal__in{ grid-template-columns:1fr; overflow-y:auto; }
  .pmodal__main{ aspect-ratio:4/3; flex:none; }
}

/* ------------------------------------------------------------
   SERVICES — split hero + production stack
   ------------------------------------------------------------ */
.shero{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh; min-height:100svh;
}
.shero__l{
  background:var(--bg-light); color:var(--black);
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem clamp(1.5rem,4vw,5rem) 4rem;
}
/* reveal mask — clip-path, not overflow (see .hero__ln). */
.shero__l .h-mega{ clip-path:inset(0 -50vw -0.12em -50vw); }
.shero__l .h-mega span{ display:block; animation:maskUp 1.1s var(--ease) 250ms both; }
.shero__tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:2rem; list-style:none; padding:0; }
.shero__tags li{
  padding:.45rem .8rem; border:1px solid rgba(0,0,0,.28);
  color:var(--cool-gray);
  animation:stamp .5s var(--ease-cut) both;
}
.shero__tags li:nth-child(1){ animation-delay:900ms; }
.shero__tags li:nth-child(2){ animation-delay:990ms; }
.shero__tags li:nth-child(3){ animation-delay:1080ms; }
.shero__tags li:nth-child(4){ animation-delay:1170ms; }
.shero__tags li:nth-child(5){ animation-delay:1260ms; }
@keyframes stamp{
  from{ transform:scale(1.5); opacity:0; }
  to{ transform:none; opacity:1; }
}
.shero__ctas{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem; }

.shero__r{
  background:var(--near-black); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:9rem 2rem 4rem;
}
.pstack{ position:relative; width:min(320px,72%); aspect-ratio:3/4; }
.pstack__card{
  position:absolute; inset:0;
  border:1px solid rgba(255,255,255,.5);
  background:var(--charcoal); overflow:hidden; cursor:pointer;
  transform:translate(calc(var(--p) * 14px), calc(var(--p) * -16px)) scale(calc(1 - var(--p) * .05));
  z-index:calc(10 - var(--p));
  opacity:calc(1 - var(--p) * .18);
  transition:transform .9s var(--ease), opacity .9s var(--ease);
}
.pstack__card .v{ width:100%; height:100%; }
.pstack__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.6rem .8rem; background:rgba(0,0,0,.78); color:var(--white);
}

@media (max-width:760px){
  .shero{ grid-template-columns:1fr; min-height:0; }
  .shero__l{ padding-top:8rem; }
  .shero__r{ padding:3rem 0 4rem; overflow-x:auto; justify-content:flex-start; }
  .pstack{
    display:flex; position:static; width:max-content; aspect-ratio:auto;
    gap:1rem; padding-inline:var(--gutter);
  }
  .pstack__card{
    position:relative; inset:auto; transform:none !important; opacity:1 !important;
    width:220px; aspect-ratio:3/4; flex:none;
  }
}

/* ------------------------------------------------------------
   SERVICES — core services cards
   ------------------------------------------------------------ */
.core__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.2vw,2rem);
}
.ccard{
  background:var(--white); border:1px solid rgba(0,0,0,.12);
  display:flex; flex-direction:column;
  transition:box-shadow .5s var(--ease);
}
.ccard:hover{ box-shadow:0 22px 50px -26px rgba(38,38,43,.6); }
.ccard__strip{ aspect-ratio:20/9; overflow:hidden; transition:aspect-ratio .5s var(--ease); }
.ccard:hover .ccard__strip{ aspect-ratio:20/11; }
.ccard__strip .v{ width:100%; height:100%; }
.ccard__body{ padding:clamp(1.25rem,1.9vw,1.7rem); flex:1;
  display:flex; flex-direction:column; gap:.6rem; }
.ccard__avail{ color:var(--cool-gray); }
.ccard h3{
  font-family:var(--display); font-size:1.35rem; letter-spacing:-.02em;
  margin:0; color:var(--black); line-height:1.12;
}
.ccard__line{ margin:0; color:var(--cool-gray); font-size:.9rem; line-height:1.55; }
.ccard__chips{
  display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:1rem;
  transform:translateY(6px); opacity:.75;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.ccard:hover .ccard__chips{ transform:none; opacity:1; }
.ccard__chips span{
  padding:.32rem .6rem; background:#dededb; color:var(--black);
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase;
}
@media (max-width:1024px){ .core__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){ .core__grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   SERVICES — production stack rows (call sheet)
   ------------------------------------------------------------ */
.stack{ position:relative; }
.stack::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 34px);
}
.stack__wrap{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr);
  gap:clamp(2.5rem,5vw,5rem);
}
.srow{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:1.25rem; align-items:center;
  padding:1.35rem 1.4rem;
  background:var(--charcoal);
  border:1px solid transparent;
  border-bottom:1px solid var(--line-dark);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.srow:hover{ background:var(--graphite); border-color:var(--cool-gray); }
/* rows slide in from alternating sides — call sheet being laid down.
   On narrow screens the horizontal offset would push past the viewport,
   so the reveal falls back to a plain vertical rise. */
[data-reveal].srow--l{ transform:translateX(-30px); }
[data-reveal].srow--r{ transform:translateX(30px); }
[data-reveal].srow--l.is-in,[data-reveal].srow--r.is-in{ transform:none; }

@media (max-width:760px){
  [data-reveal].srow--l,[data-reveal].srow--r{ transform:translateY(22px); }
}
.srow__n{ color:var(--silver); }
.srow__t{ min-width:0; }
.srow__t h3{
  font-family:var(--display); font-size:1.1rem; letter-spacing:-.014em;
  margin:0 0 .2rem; line-height:1.2;
}
.srow__t p{ margin:0; color:var(--warm-gray); font-size:.86rem; line-height:1.5; }
.srow__thumb{
  width:0; aspect-ratio:4/3; overflow:hidden; flex:none;
  opacity:0;
  transition:width .5s var(--ease), opacity .5s var(--ease);
}
.srow:hover .srow__thumb{ width:96px; opacity:1; }
.srow__thumb .v{ width:96px; height:100%; }
.srow__thumb--none{ width:0 !important; opacity:0 !important; }

@media (max-width:1024px){
  .stack__wrap{ grid-template-columns:1fr; }
  .srow__thumb{ display:none; }
}

/* ------------------------------------------------------------
   SERVICES — deliverables grid
   ------------------------------------------------------------ */
.deliv__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,1.4vw,1.2rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
.dtile{
  background:var(--white); border:1px solid var(--warm-gray);
  padding:1.35rem; min-height:150px;
  display:flex; flex-direction:column; gap:.5rem;
  position:relative;
}
.dtile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--black);
  clip-path:inset(0 100% 100% 0);
  transition:clip-path .6s var(--ease-cut);
}
.dtile:hover::after{ clip-path:inset(0 0 0 0); }
.dtile h3{
  font-family:var(--display); font-size:1.08rem; letter-spacing:-.016em;
  margin:0; color:var(--black); line-height:1.18;
}
.dtile p{ margin:0; color:var(--cool-gray); font-size:.83rem; line-height:1.5; }
.deliv__note{ margin-top:2rem; color:var(--cool-gray); }
@media (max-width:1024px){ .deliv__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .deliv__grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   SERVICES — process strip
   ------------------------------------------------------------ */
.pstrip{
  position:relative;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(1rem,2vw,2rem);
  margin-top:clamp(2.5rem,4vw,4rem);
  padding-top:3rem;
}
.pstrip::before,.pstrip::after{
  content:""; position:absolute; left:0; top:0; height:1px;
}
.pstrip::before{ width:100%; background:rgba(0,0,0,.16); }
.pstrip::after{ width:0; background:var(--black); transition:width 2.6s var(--ease-cut); }
.pstrip.is-in::after{ width:100%; }
.pstep{ position:relative; }
.pstep::before{
  content:""; position:absolute; left:0; top:-3rem;
  width:9px; height:9px; border:1px solid var(--warm-gray);
  background:var(--bg-light);
  transform:translateY(-4px);
  transition:background .5s var(--ease), border-color .5s var(--ease);
  transition-delay:var(--d,0ms);
}
.pstrip.is-in .pstep::before{ background:var(--black); border-color:var(--black); }
.pstep__n{
  font-family:var(--display); font-size:clamp(2rem,3.4vw,3.2rem);
  font-weight:600; letter-spacing:-.04em; line-height:1;
  color:var(--warm-gray); margin-bottom:.6rem;
  transition:color .7s var(--ease); transition-delay:var(--d,0ms);
}
.pstrip.is-in .pstep__n{ color:var(--black); }
.pstep h3{
  font-family:var(--display); font-size:1.02rem; letter-spacing:-.012em;
  margin:0 0 .35rem; color:var(--black);
}
.pstep p{ margin:0; font-size:.83rem; color:var(--cool-gray); line-height:1.5; }
@media (max-width:760px){
  .pstrip{ grid-template-columns:1fr; padding-top:0; padding-left:2rem; gap:2rem; }
  .pstrip::before,.pstrip::after{ width:1px !important; height:100%; }
  .pstrip::after{ height:0; transition:height 2.6s var(--ease-cut); }
  .pstrip.is-in::after{ height:100%; }
  .pstep::before{ left:-2rem; top:.5rem; }
}

/* ------------------------------------------------------------
   SERVICES — add-ons pill cloud
   ------------------------------------------------------------ */
.addon__wrap{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  gap:clamp(2rem,4vw,4rem); align-items:start;
}
.pills{ display:flex; flex-wrap:wrap; gap:.55rem; }
.pill{
  display:inline-flex; align-items:center; min-height:44px;
  padding:.6rem 1.15rem;
  background:var(--charcoal); border:1px solid var(--cool-gray);
  color:var(--silver);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.pill:hover{
  background:var(--white); color:var(--black); border-color:var(--white);
  transform:translateY(-3px);
}
.addon__note{ margin-top:1.8rem; color:var(--warm-gray); }
@media (max-width:760px){ .addon__wrap{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   STUDIO — BTS hero collage
   ------------------------------------------------------------ */
.bhero{
  position:relative; background:var(--black); overflow:hidden;
  padding-block:9rem clamp(3.5rem,6vw,6rem);
}
.bhero__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(0,auto);
  gap:clamp(.6rem,1.1vw,1rem);
}
.bhero__main{
  grid-column:1 / span 8; position:relative;
  aspect-ratio:14/10; overflow:hidden;
}
.bhero__main .v{ width:100%; height:100%; }
.bhero__main::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.95) 4%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.1) 100%);
}
.bhero__copy{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(1.5rem,3vw,3rem);
}
.bhero__copy .h-xl{ max-width:16ch; }
.bhero__side{
  grid-column:9 / span 4;
  display:grid; grid-template-rows:repeat(3,1fr);
  gap:clamp(.6rem,1.1vw,1rem);
}
.bhero__sf{
  position:relative; overflow:hidden;
  border:1px solid rgba(184,184,191,.35);
  min-height:0;
}
.bhero__sf .v{ width:100%; height:100%; }
.bhero__sf span{
  position:absolute; left:.5rem; top:.5rem;
  color:var(--silver);
  overflow:hidden; white-space:nowrap;
  animation:type 1.1s steps(9) both;
  animation-delay:var(--d,0ms);
}
@keyframes type{ from{ width:0; } to{ width:5.2em; } }

@media (max-width:760px){
  .bhero__main{ grid-column:1 / -1; aspect-ratio:4/3; }
  .bhero__side{
    grid-column:1 / -1;
    grid-template-rows:none; grid-template-columns:repeat(3,1fr);
  }
  .bhero__sf{ aspect-ratio:4/3; }
}

/* ------------------------------------------------------------
   STUDIO — studio note (manifesto)
   ------------------------------------------------------------ */
.note__lines{ margin-top:clamp(1.5rem,3vw,2.5rem); }
.note__line{ overflow:hidden; }
.note__line span{
  display:block;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem,5.4vw,4.4rem);
  letter-spacing:-.038em; line-height:1.06;
  color:var(--black);
  transform:translateY(105%);
  transition:transform 1.05s var(--ease), letter-spacing 1.6s var(--ease);
  transition-delay:var(--d,0ms);
}
.note__lines.is-in .note__line span{ transform:none; letter-spacing:-.046em; }
.note__side{
  margin-top:2.4rem; color:var(--graphite);
  opacity:0; transition:opacity .9s var(--ease) 1.5s;
}
.note__lines.is-in + .note__side{ opacity:1; }

/* ------------------------------------------------------------
   STUDIO — principles
   ------------------------------------------------------------ */
.prin__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
.prin{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid rgba(0,0,0,.1);
  padding:1.7rem 1.5rem 1.9rem;
  min-height:220px;
  display:flex; flex-direction:column;
}
.prin__wm{
  position:absolute; right:-.6rem; bottom:-2.4rem;
  font-family:var(--display); font-weight:600;
  font-size:7rem; letter-spacing:-.05em; line-height:1;
  color:var(--silver); opacity:0;
  transform:scale(.7); transform-origin:bottom right;
  transition:opacity .6s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.prin:hover .prin__wm{ opacity:.34; transform:scale(1); }
.prin__n{ color:var(--warm-gray); margin-bottom:auto; }
.prin h3{
  font-family:var(--display); font-size:1.3rem; letter-spacing:-.022em;
  margin:1.6rem 0 .45rem; color:var(--black); line-height:1.12;
  position:relative; z-index:1;
}
.prin p{ margin:0; color:var(--cool-gray); font-size:.88rem; line-height:1.55;
  position:relative; z-index:1; }
@media (max-width:1024px){ .prin__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .prin__grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------
   STUDIO — crew
   ------------------------------------------------------------ */
.crew__grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(.8rem,1.4vw,1.2rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
.ccrew{
  background:var(--charcoal); border:1px solid var(--line-dark);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .45s var(--ease);
}
.ccrew:hover{ border-color:var(--cool-gray); }
.ccrew__media{ aspect-ratio:3/4; overflow:hidden; position:relative; }
.ccrew__media .v{ width:100%; height:100%; }
.ccrew:hover .ccrew__media img{ transform:scale(calc(var(--z,1) * 1.06)); }
.ccrew__body{ padding:1.15rem 1.1rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; }
.ccrew h3{
  font-family:var(--display); font-size:1rem; letter-spacing:-.012em;
  margin:0; line-height:1.22; color:var(--off-white);
}
.ccrew__desc{
  margin:0; font-size:.82rem; color:var(--warm-gray); line-height:1.5;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s var(--ease), opacity .45s var(--ease);
}
.ccrew:hover .ccrew__desc{ max-height:6rem; opacity:1; }
.ccrew__tag{
  align-self:flex-start; margin-top:.35rem;
  padding:.32rem .6rem; background:var(--graphite);
  color:var(--silver);
}
@media (max-width:1024px){ .crew__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){
  .crew__grid{
    grid-template-columns:none; grid-auto-flow:column;
    grid-auto-columns:minmax(210px,1fr);
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .crew__grid::-webkit-scrollbar{ display:none; }
  .ccrew{ scroll-snap-align:start; }
  .ccrew__desc{ max-height:6rem; opacity:1; }
}

/* ------------------------------------------------------------
   STUDIO — BTS gallery
   ------------------------------------------------------------ */
.bts__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:8px;
  gap:clamp(.6rem,1.1vw,1rem);
  margin-top:clamp(2.5rem,4vw,3.5rem);
}
.btsc{ position:relative; overflow:hidden; }
/* six cells, four masters — wide establishing shot, then paired details */
.btsc:nth-child(1){ grid-column:1 / span 12; grid-row:span 36; }
.btsc:nth-child(2){ grid-column:1 / span 4;  grid-row:span 50; }
.btsc:nth-child(3){ grid-column:5 / span 4;  grid-row:span 50; }
.btsc:nth-child(4){ grid-column:9 / span 4;  grid-row:span 24; }
.btsc:nth-child(5){ grid-column:9 / span 4;  grid-row:span 24; }
.btsc:nth-child(6){ grid-column:1 / span 3;  grid-row:span 24; }
.btsc .v{ width:100%; height:100%; }

@media (max-width:760px){
  .bts__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .btsc{ grid-column:span 1 !important; grid-row:auto !important; aspect-ratio:1/1; }
  .btsc:nth-child(1){ grid-column:span 2 !important; aspect-ratio:16/9; }
  .btsc:nth-child(2),.btsc:nth-child(3){ aspect-ratio:3/4; }
}

/* ------------------------------------------------------------
   STUDIO — clients / press
   ------------------------------------------------------------ */
.press__wrap{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(2rem,4vw,4rem); align-items:start;
}
.press__wrap .h-lg{ max-width:16ch; }
.press__logos{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.14);
}
.press__logos .proof__cell{ aspect-ratio:2/1; }
.press__credits{
  margin-top:2.2rem;
  display:grid; gap:.9rem;
}
.press__credits p{
  margin:0; padding-top:.9rem;
  border-top:1px solid rgba(0,0,0,.16);
  color:var(--cool-gray); font-size:.9rem;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
[data-reveal].press__credits p{ animation:none; }
@media (max-width:760px){
  .press__wrap{ grid-template-columns:1fr; }
  .press__logos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .press__credits p{ white-space:normal; }
}