/* ============================================================
   YAW STUDIO — CINEMATIC HOME
   Editorial · Asymmetric · Immersive
   ============================================================ */

:root{
  --void:#040506;
  --deep:#080809;
  --ink-f:#F2F0EC;
  --mute-f:rgba(242,240,236,.48);
  --warm:rgba(224,27,24,.85);
  --ease:cubic-bezier(.22,.84,.22,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body.fs-cine{background:var(--void);color:var(--ink-f)}

/* Fixed navbar clearance — first page section sits below .hdr */
:root{
  --site-hdr-h:clamp(120px,16vw,172px);
}
body.home #main > .section-preview-shell:first-of-type{
  padding-top:var(--site-hdr-h);
}
body.home #main > .section-preview-shell:first-of-type:has(#intro),
body.home #main > .section-preview-shell:first-of-type:has(#top){
  padding-top:0;
}
body.home #main > .section-preview-shell:has(#intro) + .section-preview-shell,
body.home #main > .section-preview-shell:has(#top) + .section-preview-shell,
body.home #main > .section-preview-shell.preview-section-hidden + .section-preview-shell{
  padding-top:var(--site-hdr-h);
}
body.home #main > .section-preview-shell:has(.license-act){
  padding-top:0;
}
body.home .license-act{
  scroll-margin-top:var(--site-hdr-h);
}

/* ---------- navbar: hide on scroll down, show on scroll up ---------- */
body.fs-cine .hdr{
  transition:
    transform .48s cubic-bezier(.16,1,.3,1),
    background .4s ease,
    border-color .4s ease;
  will-change:transform;
}
body.fs-cine .hdr.is-away{
  transform:translate3d(0,calc(-100% - 24px),0);
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  body.fs-cine .hdr{transition:background .3s ease,border-color .3s ease}
  body.fs-cine .hdr.is-away{transform:translate3d(0,calc(-100% - 24px),0)}
}

/* ---------- shared section headers ---------- */
.act-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,32px);
  align-items:end;padding:clamp(56px,10vh,120px) var(--pad) clamp(28px,4vw,48px);
  border-top:1px solid rgba(255,255,255,.06);
}
.act-head.compact{padding-bottom:clamp(18px,3vw,28px)}
.act-head.centered{grid-template-columns:1fr;text-align:center;justify-items:center}
.act-head .seq-num{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.22)}
.act-head h2{
  font-family:var(--disp);font-variation-settings:"wdth" 118;font-weight:900;
  font-size:clamp(28px,5vw,64px);letter-spacing:-.04em;line-height:.92;margin:0;
  text-transform:uppercase;
}
.act-head p{font-family:var(--read);font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--mute-f);max-width:46ch;margin:10px 0 0}
.act-all{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:rgba(242,240,236,.45);white-space:nowrap;
  transition:color .35s,transform .35s var(--ease-out);
}
.act-all:hover{color:#fff;transform:translateX(6px)}

/* Keep multiple header CTAs in the same grid cell */
.act-ctas{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(12px,2vw,22px);
  white-space:nowrap;
}
@media(max-width:720px){
  .act-ctas{flex-direction:column;align-items:flex-end;gap:10px}
}

/* Make Work header CTAs (Explore services / Start a project) more prominent */
.prod-act .act-ctas .act-all{
  display:inline-flex;
  align-items:center;
  padding:10px 14px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:2px;
  background:rgba(0,0,0,.06);

  font-size:12px;
  letter-spacing:.18em;
  line-height:1;
  color:rgba(242,240,236,.62);

  transition:
    color .35s,
    background .35s,
    border-color .35s,
    transform .35s var(--ease-out);
}
.prod-act .act-ctas .act-all:hover{
  color:#fff;
  border-color:rgba(224,27,24,.7);
  background:rgba(224,27,24,.12);
  transform:translateX(6px);
}
.prod-act .act-ctas .act-all:focus-visible{
  outline:2px solid rgba(224,27,24,.55);
  outline-offset:3px;
}

.hero-cine .cap .hero-eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 16px;
}

/* Hero frame ticks — thin bars; active = red + longer */
.cine-foot .explore{cursor:pointer}
.hero-ticks{
  display:flex;align-items:center;gap:10px;
}
.hero-ticks button{
  appearance:none;-webkit-appearance:none;
  width:28px;height:2px;padding:0;margin:0;border:0;border-radius:0;
  background:rgba(255,255,255,.38);cursor:pointer;
  transition:background .35s,width .35s;
}
.hero-ticks button.on,
.hero-ticks button[aria-current="true"]{
  width:42px;background:var(--brand-red,#E01B18);
}
.hero-ticks button:hover{background:rgba(255,255,255,.8)}
.hero-ticks button.on:hover,
.hero-ticks button[aria-current="true"]:hover{
  background:var(--brand-red,#E01B18);
}

/* ---------- cinematic menu button (home overrides) ---------- */
.menu-btn .bars{display:none}

/* ---------- intro: logo only, no lockup text ---------- */
.intro .name{display:none}

/* ============================================================
   02 · FILMS — cinematic film-strip reel
   ============================================================ */
.films-act{
  background:var(--void);
  padding-bottom:clamp(40px,7vh,80px);
  overflow:hidden;
}
/* Shared lead style: Selected Work (top) and Commission / Work with YAW Studio (bottom) */
.films-act .act-head-copy p,
.prod-act .act-head-copy p,
.prod-act .act-head-copy .prod-lead{
  margin:10px 0 0 !important;
  font-family:var(--read) !important;
  font-variation-settings:normal !important;
  font-weight:700 !important;
  font-size:clamp(15px,1.6vw,19px) !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
  color:rgba(242,240,236,.72) !important;
  max-width:70ch !important;
}
.films-act .act-head-copy h2{
  max-width:12ch;
  letter-spacing:-.045em;
  line-height:.9;
}

/* sprocket rails */
.films-act .sprockets{
  display:flex;gap:10px;justify-content:center;align-items:center;
  padding:10px var(--pad);margin:0;
  background:linear-gradient(180deg,#0c0d0f,#070809);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.films-act .sprockets i{
  flex:0 0 auto;width:11px;height:11px;border-radius:2px;
  background:rgba(242,240,236,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* horizontal reel */
.films-act .reelrow{
  display:flex;gap:clamp(14px,2vw,22px);
  padding:clamp(14px,2.4vh,22px) max(var(--pad), calc((100% - min(82vw,818px,99.5vh)) / 2));
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-inline:max(var(--pad), calc((100% - min(82vw,818px,99.5vh)) / 2));
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(224,27,24,.08),transparent 55%),
    linear-gradient(180deg,#060708,#040506 60%,#060708);
}
.films-act .reelrow.is-dragging{
  cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;
  user-select:none;
}
.films-act .reelrow.is-dragging .plate{pointer-events:none}
.films-act .reelrow::-webkit-scrollbar{display:none}

.films-act .film{
  flex:0 0 min(82vw,818px,99.5vh);
  scroll-snap-align:center;
  margin:0;
}
.films-act .film .plate{
  position:relative;display:block;text-decoration:none;color:inherit;
  aspect-ratio:16 / 9;
  max-height:none;
  overflow:hidden;background:#0a0a0a;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
  transition:border-color .45s,transform .7s var(--ease-out),box-shadow .7s;
}
.films-act .film.on .plate,
.films-act .film:hover .plate{
  border-color:rgba(224,27,24,.45);
  box-shadow:0 22px 56px rgba(0,0,0,.5),0 0 0 1px rgba(224,27,24,.18);
}
.films-act .film .plate .ph{
  position:absolute;inset:0;height:100%;
  transition:transform 1.2s var(--ease);
}
.films-act .film.on .plate .ph,
.films-act .film:hover .plate .ph{transform:scale(1.045)}
.films-act .film .plate .ph img{width:100%;height:100%;object-fit:cover}
.films-act .film .plate .embed-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:10}

.films-act .sheen{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(4,5,6,.92) 0%,rgba(4,5,6,.35) 38%,rgba(4,5,6,.08) 62%,transparent 100%),
    linear-gradient(115deg,rgba(255,255,255,.06),transparent 42%);
  transition:opacity .5s;
}
.films-act .corner{
  position:absolute;z-index:3;width:16px;height:16px;pointer-events:none;
  border:1px solid rgba(255,255,255,.35);
  opacity:.55;transition:opacity .4s,border-color .4s;
}
.films-act .corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.films-act .corner.br{right:12px;bottom:12px;border-left:0;border-top:0}
.films-act .film.on .corner{opacity:1;border-color:rgba(224,27,24,.75)}

.films-act .no,
.films-act .now,
.films-act .reelno,
.films-act .hud2{
  position:absolute;z-index:4;pointer-events:none;
  font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;
}
.films-act .no{
  top:14px;left:36px;font-size:10px;color:rgba(255,255,255,.55);
}
.films-act .now{
  top:14px;right:14px;font-size:9px;letter-spacing:.2em;
  color:rgba(255,255,255,.28);opacity:0;transition:opacity .4s,color .4s;
}
.films-act .film.on .now{opacity:1;color:#fff}
.films-act .reelno{
  right:14px;bottom:12px;font-size:clamp(36px,5.5vw,58px);font-weight:500;
  letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.08);
}

/* camera HUD */
.films-act .hud2{inset:0;opacity:0;transition:opacity .45s}
.films-act .film.on .hud2{opacity:1}
.films-act .hud2 .safe{
  position:absolute;inset:10% 9%;
  border:1px dashed rgba(224,27,24,.22);
}
.films-act .hud2 .focus{
  position:absolute;top:42%;left:50%;width:72px;height:48px;
  margin:-24px 0 0 -36px;
  border:1px solid rgba(224,27,24,.85);
  box-shadow:0 0 0 1px rgba(224,27,24,.15);
}
.films-act .hud2 .focus::before,
.films-act .hud2 .focus::after{
  content:"";position:absolute;background:rgba(224,27,24,.7);
}
.films-act .hud2 .focus::before{left:50%;top:-5px;bottom:-5px;width:1px;margin-left:-.5px}
.films-act .hud2 .focus::after{top:50%;left:-5px;right:-5px;height:1px;margin-top:-.5px}
.films-act .hud2 .rec{
  position:absolute;top:14%;left:10%;display:flex;align-items:center;gap:7px;
  font-size:10px;color:rgba(255,255,255,.78);
}
.films-act .hud2 .rec i{
  width:8px;height:8px;border-radius:50%;background:var(--brand-red);
  box-shadow:0 0 0 0 rgba(224,27,24,.45);
  animation:recPulse 1.4s ease-out infinite;
}
.films-act .hud2 .tcam{
  position:absolute;top:16%;right:12%;font-size:10px;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;
}
.films-act .hud2 .expo{
  position:absolute;bottom:18%;left:12%;display:flex;gap:12px;flex-wrap:wrap;
  font-size:9px;color:rgba(255,255,255,.42);
}
.films-act .hud2 .slate{
  position:absolute;bottom:18%;right:12%;display:flex;gap:10px;flex-wrap:wrap;
  font-size:9px;color:rgba(255,255,255,.42);
}

.films-act .meta{
  position:absolute;z-index:5;left:0;right:0;bottom:0;
  padding:clamp(16px,3vw,28px);
  display:flex;flex-direction:column;justify-content:flex-end;
  max-width:min(92%,560px);
}
.films-act .meta h3{
  font-family:var(--disp);font-variation-settings:"wdth" 115;font-weight:900;
  font-size:clamp(20px,3.4vw,40px);letter-spacing:-.035em;line-height:.92;
  margin:0;text-transform:uppercase;color:#fff;
}
.films-act .facts{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.48);
}
.films-act .facts span:last-child{color:rgba(255,255,255,.85)}
.films-act .synop{
  font-family:var(--read);font-size:clamp(13px,1.3vw,16px);line-height:1.5;
  color:rgba(255,255,255,.7);margin:10px 0 0;max-width:42ch;
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .5s .05s,max-height .5s .05s,margin .5s;
}
.films-act .film.on .synop,
.films-act .film:hover .synop{opacity:1;max-height:96px;margin-top:10px}

/* reel controls */
.films-act .reel-nav{
  display:flex;align-items:center;gap:14px;
  padding:clamp(14px,2.5vh,24px) var(--pad) 0;
}
.films-act .reel-nav button{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:rgba(242,240,236,.7);cursor:pointer;
  font-size:15px;line-height:1;transition:color .3s,border-color .3s,background .3s;
}
.films-act .reel-nav button:hover{
  color:#fff;border-color:rgba(224,27,24,.55);background:rgba(224,27,24,.08);
}
.films-act .reel-nav .bar{
  flex:1;height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;
}
.films-act .hud2,
.films-act .now{
  display:none !important;
}
.films-act .reel-nav .bar i{
  position:absolute;left:0;top:0;bottom:0;width:100%;
  background:#c9a962;
  transform:scaleX(.25);transform-origin:left center;
  transition:transform .55s var(--ease-out);
  box-shadow:0 0 10px rgba(201,169,98,.28);
}
.films-act .reel-nav .cnt{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:rgba(242,240,236,.4);min-width:5.5em;text-align:right;
}

@keyframes recPulse{
  0%{box-shadow:0 0 0 0 rgba(224,27,24,.45)}
  70%{box-shadow:0 0 0 8px rgba(224,27,24,0)}
  100%{box-shadow:0 0 0 0 rgba(224,27,24,0)}
}

@media(max-width:720px){
  .films-act .film{flex-basis:min(92vw,720px)}
  .films-act .film .plate{aspect-ratio:16/9;max-height:none}
  .films-act .hud2 .expo,
  .films-act .hud2 .slate,
  .films-act .hud2 .safe,
  .films-act .hud2 .focus{display:none}
  .films-act .act-head{grid-template-columns:auto 1fr;align-items:start}
  .films-act .act-all{grid-column:2;justify-self:start;margin-top:8px}
}

/* ============================================================
   03 · STORIES — light editorial break
   ============================================================ */
.stories-act{
  --story-paper:#E9EAED;
  --story-ink:#121316;
  --story-mute:rgba(18,19,22,.58);
  --story-line:rgba(18,19,22,.12);
  background:
    linear-gradient(180deg,rgba(224,27,24,.04),transparent 28%),
    radial-gradient(ellipse at 12% 0%,rgba(255,255,255,.7),transparent 45%),
    var(--story-paper);
  color:var(--story-ink);
  padding-bottom:clamp(56px,10vh,120px);
  position:relative;
  overflow:hidden;
}
.stories-act::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(18,19,22,.06) 0.7px,transparent 0.7px);
  background-size:3px 3px;
}
.stories-act .act-head{border-top-color:var(--story-line);position:relative;z-index:1}
.stories-act .act-head .seq-num{color:rgba(18,19,22,.28)}
.stories-act .act-head h2{color:var(--story-ink)}
.stories-act .act-head p{color:var(--story-mute)}

.story-mag{
  display:flex;flex-direction:column;gap:clamp(56px,10vh,120px);
  padding:0 var(--pad) clamp(32px,6vh,64px);
  position:relative;z-index:1;
}

.story-editorial{
  display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(28px,4.5vw,72px);
  align-items:center;text-decoration:none;color:inherit;
  opacity:0;transform:translateY(40px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
}
.story-editorial.seen{opacity:1;transform:none}
.story-editorial.odd{grid-template-columns:1fr 1.08fr}
.story-editorial.odd .story-media{order:2}
.story-editorial.odd .story-text{order:1}
@media(max-width:900px){
  .story-editorial,.story-editorial.odd{grid-template-columns:1fr}
  .story-editorial.odd .story-media,.story-editorial.odd .story-text{order:unset}
}

.story-media{
  position:relative;aspect-ratio:4/5;max-height:72vh;overflow:hidden;
  background:#d5d6da;
  clip-path:inset(0 0 12% 0);
  box-shadow:0 18px 50px rgba(18,19,22,.12);
  transition:clip-path .95s var(--ease-out),box-shadow .55s,transform .7s var(--ease-out);
}
.story-editorial.ratio-portrait .story-media{aspect-ratio:3/4;max-height:78vh}
.story-editorial.ratio-cinema{
  grid-template-columns:1.35fr .9fr;
  align-items:end;
}
.story-editorial.ratio-cinema .story-media{
  aspect-ratio:16/9;max-height:none;width:100%;
}
.story-editorial.ratio-square{
  grid-template-columns:.85fr 1.15fr;
}
.story-editorial.ratio-square .story-media{
  aspect-ratio:1/1;max-width:min(100%,520px);justify-self:end;
}
@media(max-width:900px){
  .story-editorial.ratio-cinema,
  .story-editorial.ratio-square{grid-template-columns:1fr}
  .story-editorial.ratio-square .story-media{max-width:none;justify-self:stretch}
}
.story-editorial.seen .story-media{clip-path:inset(0 0 0 0)}
.story-editorial:hover .story-media{
  transform:translateY(-6px);
  box-shadow:0 28px 64px rgba(18,19,22,.18),0 0 0 1px rgba(224,27,24,.2);
}
.story-media .ph{position:absolute;inset:0;height:100%;transition:transform 1.15s var(--ease),filter .6s}
.story-editorial:hover .story-media .ph{transform:scale(1.06);filter:contrast(1.05) saturate(1.05)}
.story-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(18,19,22,.45),transparent 55%);
  transition:opacity .5s;
}
.story-editorial:hover .story-veil{opacity:1}
.story-frame{
  position:absolute;inset:12px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,0);
  transition:border-color .45s,inset .45s;
}
.story-editorial:hover .story-frame{border-color:rgba(255,255,255,.55)}
.story-num{
  position:absolute;z-index:3;left:16px;bottom:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;
  color:rgba(255,255,255,.0);pointer-events:none;
  transition:color .4s,transform .45s var(--ease-out);
  transform:translateY(8px);
}
.story-editorial:hover .story-num{color:rgba(255,255,255,.9);transform:none}

.story-text{position:relative;padding-inline:clamp(0px,1vw,12px)}
.story-text::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;
  background:var(--brand-red);
  transition:height .55s var(--ease-out);
}
.story-editorial.even .story-text{padding-left:clamp(14px,2vw,22px)}
.story-editorial.odd .story-text{padding-right:clamp(14px,2vw,22px)}
.story-editorial.odd .story-text::before{left:auto;right:0}
.story-editorial:hover .story-text::before{height:72px}

.story-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;margin-bottom:16px;display:inline-block;
  transition:letter-spacing .4s,transform .4s;
}
.story-editorial:hover .story-kicker{letter-spacing:.3em}
.story-text h3{
  font-family:var(--disp);font-variation-settings:"wdth" 110;font-weight:900;
  font-size:clamp(26px,4.2vw,52px);line-height:.95;letter-spacing:-.035em;
  margin:0 0 20px;text-transform:uppercase;color:var(--story-ink);
  transition:color .35s,transform .5s var(--ease-out);
}
.story-editorial:hover .story-text h3{transform:translateX(4px)}
.story-editorial.odd:hover .story-text h3{transform:translateX(-4px)}
.story-lede{
  font-family:var(--read);font-size:clamp(16px,1.65vw,19px);line-height:1.68;
  color:var(--story-mute);margin:0 0 14px;max-width:42ch;
}
.story-pull{
  font-family:var(--read);font-style:italic;font-size:clamp(17px,1.75vw,21px);line-height:1.55;
  color:rgba(18,19,22,.78);margin:0 0 18px;max-width:40ch;border:0;padding:0;
  border-left:2px solid transparent;padding-left:0;
  transition:border-color .4s,padding .4s,color .4s;
}
.story-editorial:hover .story-pull{
  border-left-color:rgba(224,27,24,.55);
  padding-left:14px;color:var(--story-ink);
}
.story-editorial.odd .story-pull{border-left:0;border-right:2px solid transparent;padding-right:0}
.story-editorial.odd:hover .story-pull{
  border-right-color:rgba(224,27,24,.55);
  padding-right:14px;padding-left:0;
}
.story-foot{
  display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(18,19,22,.38);
}
.story-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(18,19,22,.42);position:relative;padding-bottom:6px;
  transition:color .35s;
}
.story-cta::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--brand-red);transition:width .45s var(--ease-out);
}
.story-editorial:hover .story-cta{color:#fff}
.story-editorial:hover .story-cta::after{width:100%}
.story-cta .arr{transition:transform .35s var(--ease-out)}
.story-editorial:hover .story-cta .arr{transform:translateX(8px)}

@media(max-width:900px){
  .story-editorial.even .story-text,
  .story-editorial.odd .story-text{padding-inline:0 0 0 clamp(14px,3vw,18px)}
  .story-editorial.odd .story-text::before,
  .story-editorial.even .story-text::before{left:0;right:auto}
  .story-editorial.odd .story-pull,
  .story-editorial.even .story-pull{border-right:0;border-left:2px solid transparent;padding-right:0}
  .story-editorial.odd:hover .story-pull,
  .story-editorial.even:hover .story-pull{
    border-left-color:rgba(224,27,24,.55);padding-left:14px;padding-right:0;
  }
  .story-editorial.odd:hover .story-text h3,
  .story-editorial.even:hover .story-text h3{transform:translateX(4px)}
}

/* ============================================================
   04 · FRAMES — cursor gallery
   ============================================================ */
.frames-act{background:var(--void);padding-bottom:clamp(60px,10vh,120px);overflow:hidden}
.cursor-gallery{
  position:relative;min-height:clamp(520px,78vh,920px);margin:0 var(--pad);
  border-top:1px solid rgba(255,255,255,.06);
}
.cursor-label{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;background:rgba(4,5,6,.72);padding:8px 12px;
  opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .25s,transform .25s;
}
.cursor-label.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-stage{position:relative;width:100%;height:clamp(520px,78vh,920px)}

.cursor-frame{
  position:absolute;text-decoration:none;color:inherit;
  transition:opacity .45s,transform .6s var(--ease-out),z-index 0s;
}
.cursor-frame.pos-1{width:min(46vw,560px);left:2%;top:4%;z-index:2}
.cursor-frame.pos-2{width:min(32vw,400px);right:4%;top:2%;z-index:3}
.cursor-frame.pos-3{width:min(40vw,480px);left:30%;top:34%;z-index:5}
.cursor-frame.pos-4{width:min(28vw,340px);left:6%;bottom:4%;z-index:1}
.cursor-frame.pos-5{width:min(38vw,460px);right:1%;bottom:6%;z-index:4}

.cursor-frame-inner{
  position:relative;overflow:hidden;background:#111;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  transition:transform .65s var(--ease-out),box-shadow .65s;
}
.cursor-frame.pos-2 .cursor-frame-inner{transform:rotate(2.5deg)}
.cursor-frame.pos-3 .cursor-frame-inner{transform:rotate(-1.5deg)}
.cursor-frame.pos-4 .cursor-frame-inner{transform:rotate(-3deg)}
.cursor-frame.pos-5 .cursor-frame-inner{transform:rotate(1.8deg)}
.cursor-frame .ph{aspect-ratio:3/4;position:relative}
.cursor-frame.pos-2 .ph{aspect-ratio:16/10}
.cursor-frame.pos-3 .ph{aspect-ratio:1/1}
.cursor-frame.pos-5 .ph{aspect-ratio:4/5}
.cursor-frame .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cursor-frame:hover .ph img,.cursor-frame.active .ph img{transform:scale(1.04)}
.cursor-frame:hover,.cursor-frame.active{z-index:10}
.cursor-frame:hover .cursor-frame-inner,.cursor-frame.active .cursor-frame-inner{
  transform:scale(1.03);box-shadow:0 32px 100px rgba(0,0,0,.55);
}
.cursor-frame.pos-2:hover .cursor-frame-inner,.cursor-frame.pos-2.active .cursor-frame-inner{transform:rotate(2.5deg) scale(1.03)}
.cursor-frame.pos-3:hover .cursor-frame-inner,.cursor-frame.pos-3.active .cursor-frame-inner{transform:rotate(-1.5deg) scale(1.03)}
.cursor-frame.pos-4:hover .cursor-frame-inner,.cursor-frame.pos-4.active .cursor-frame-inner{transform:rotate(-3deg) scale(1.03)}
.cursor-frame.pos-5:hover .cursor-frame-inner,.cursor-frame.pos-5.active .cursor-frame-inner{transform:rotate(1.8deg) scale(1.03)}

.cursor-frame-cap{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(16px,2.5vw,28px);
  background:linear-gradient(to top,rgba(4,5,6,.88),transparent 58%);
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;
}
.cursor-frame:hover .cursor-frame-cap,.cursor-frame.active .cursor-frame-cap{opacity:1;transform:none}
.cursor-frame-cap h4{font-family:var(--disp);font-variation-settings:"wdth" 108;font-weight:800;font-size:clamp(16px,2.2vw,26px);letter-spacing:-.02em;margin:0 0 6px;color:#fff}
.cursor-frame-cap span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.cursor-frame-go{display:block;margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}

.cursor-gallery.dim-others .cursor-frame:not(:hover):not(.active){opacity:.42}

@media(max-width:900px){
  .cursor-stage{height:auto;display:flex;flex-direction:column;gap:20px;padding:24px 0 40px}
  .cursor-frame{position:relative!important;width:100%!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
  .cursor-frame .ph{aspect-ratio:16/10!important}
  .cursor-label{display:none}
}

/* ============================================================
   05 · PUBLICATIONS — moving credit strips
   ============================================================ */
.credits-act{
  background:var(--deep);
  padding-bottom:clamp(56px,10vh,110px);
  overflow:hidden;
}
.credits-tag{
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(242,240,236,.28);margin:0 0 clamp(28px,5vh,48px);padding:0 var(--pad);
}
.credits-marq{
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(90deg,var(--deep) 0%,transparent 12%,transparent 88%,var(--deep) 100%),
    radial-gradient(80% 120% at 50% 50%,rgba(224,27,24,.05),transparent 70%);
}
.credits-track{
  position:relative;overflow:hidden;
  padding:clamp(22px,4.5vh,40px) 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.credits-track.rev{border-bottom:0}
.credits-run{
  display:flex;align-items:center;gap:clamp(28px,5vw,56px);
  width:max-content;
  animation:creditsMarq 42s linear infinite;
  will-change:transform;
}
.credits-track.rev .credits-run{animation-name:creditsMarqRev;animation-duration:48s}
.credits-track:hover .credits-run,
.credits-marq.is-paused .credits-run{animation-play-state:paused}

.credit-item{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:0;line-height:0;color:transparent;text-transform:none;
  white-space:nowrap;cursor:default;
  min-height:clamp(32px,4.4vw,52px);
  transition:transform .45s var(--ease-out),opacity .35s;
}
.credit-item img{
  display:block;height:clamp(28px,4.2vw,56px);width:auto;
  max-width:min(240px,46vw);object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.28;
  transition:opacity .4s,transform .45s var(--ease-out);
}
.credits-track i{
  flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:rgba(224,27,24,.55);
  box-shadow:0 0 0 0 rgba(224,27,24,.0);
  transition:transform .35s,background .35s,box-shadow .35s;
}
.credit-item:hover{
  transform:scale(1.08) translateY(-2px);
}
.credit-item:hover img{opacity:1}
.credit-item:hover + i{
  background:var(--brand-red);
  transform:scale(1.35);
  box-shadow:0 0 12px rgba(224,27,24,.55);
}
.credits-track:has(.credit-item:hover) .credit-item:not(:hover){
  opacity:.28;
}

@keyframes creditsMarq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes creditsMarqRev{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

@media(max-width:720px){
  .credit-item img{height:clamp(22px,7vw,32px);max-width:150px}
  .credits-run{gap:clamp(18px,6vw,32px);animation-duration:32s}
  .credits-track.rev .credits-run{animation-duration:36s}
}

@media (prefers-reduced-motion:reduce){
  .credits-run{animation:none!important;flex-wrap:wrap;justify-content:center;width:100%;padding:0 var(--pad);gap:16px 28px}
  .credits-track i{display:none}
  .credit-item{opacity:.85}
}

/* ============================================================
   06 · WORK WITH YAW STUDIO — production reel
   ============================================================ */
.prod-act{
  background:
    radial-gradient(90% 70% at 15% 20%,rgba(224,27,24,.07),transparent 55%),
    var(--void);
  padding-bottom:clamp(28px,5vh,48px);
}
.prod-lead{
  font-family:var(--disp);font-variation-settings:"wdth" 112;font-weight:800;
  font-size:clamp(20px,3vw,32px)!important;line-height:1.15!important;
  color:rgba(242,240,236,.72)!important;max-width:20ch!important;
}

.prod-reel{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);
  padding:0 var(--pad) clamp(16px,3vh,32px);align-items:stretch;
}
@media(max-width:960px){.prod-reel{grid-template-columns:1fr}}

.prod-visual{
  position:relative;min-height:clamp(380px,56vh,640px);overflow:hidden;background:#0a0a0a;
  border:1px solid rgba(255,255,255,.08);
  clip-path:inset(0 0 8% 0);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transition:clip-path 1s var(--ease-out),border-color .45s,box-shadow .55s;
}
.prod-visual.seen{clip-path:inset(0 0 0 0)}
.prod-visual:hover{
  border-color:rgba(224,27,24,.35);
  box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 0 1px rgba(224,27,24,.12);
}
.prod-img{
  position:absolute;inset:0;opacity:0;
  transition:opacity .7s ease;
}
.prod-img.on{opacity:1;z-index:1}
.prod-img .ph{position:absolute;inset:0;height:100%;transition:transform 1.2s var(--ease)}
.prod-img.on .ph{transform:scale(1.04)}
.prod-visual:hover .prod-img.on .ph{transform:scale(1.08)}
.prod-img.on .ph img{animation:prodKen 12s linear forwards}
@keyframes prodKen{from{transform:scale(1)}to{transform:scale(1.08)}}

.prod-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top,rgba(4,5,6,.82) 0%,rgba(4,5,6,.15) 42%,transparent 70%),
    linear-gradient(115deg,rgba(255,255,255,.05),transparent 40%);
}
.prod-corners{position:absolute;inset:0;z-index:3;pointer-events:none}
.prod-corners i{
  position:absolute;width:18px;height:18px;
  border:1px solid rgba(255,255,255,.4);
  opacity:.45;transition:opacity .4s,border-color .4s;
}
.prod-corners .tl{top:14px;left:14px;border-right:0;border-bottom:0}
.prod-corners .br{right:14px;bottom:14px;border-left:0;border-top:0}
.prod-visual:hover .prod-corners i{opacity:1;border-color:rgba(224,27,24,.75)}

/* start-project CTA — 4-discipline mosaic */
.start-board{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
  gap:clamp(24px,4vw,56px);
  align-items:end;
  padding:0 var(--pad) clamp(28px,5vh,56px);
}

/* Start Project visibility is controlled by CMS section IsVisible */
.start-visuals{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.start-cell{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4/3;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),border-color .4s;
}
.start-visuals.seen .start-cell{opacity:1;transform:none}
.start-visuals.seen .start-cell:nth-child(1){transition-delay:.05s}
.start-visuals.seen .start-cell:nth-child(2){transition-delay:.12s}
.start-visuals.seen .start-cell:nth-child(3){transition-delay:.19s}
.start-visuals.seen .start-cell:nth-child(4){transition-delay:.26s}
.start-cell .ph{position:absolute;inset:0;height:100%}
.start-cell .ph img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.03);
  transition:transform 1.1s var(--ease-out),filter .5s;
}
.start-cell:hover{border-color:rgba(224,27,24,.35)}
.start-cell:hover .ph img{transform:scale(1.07);filter:contrast(1.04) saturate(1.05)}
.start-cell .ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,5,6,.78) 0%,rgba(4,5,6,.08) 50%,transparent 72%);
}
.start-cap{
  position:absolute;z-index:2;left:12px;bottom:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,240,236,.88);
}
.start-copy{padding-bottom:4px}
.start-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin:0 0 18px;
}
.start-types{
  list-style:none;margin:0 0 22px;padding:0;
  border-top:1px solid rgba(255,255,255,.08);
}
.start-types li{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.start-k{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:rgba(255,255,255,.24);
}
.start-t{
  font-family:var(--read);font-size:clamp(15px,1.5vw,17px);line-height:1.45;
  color:rgba(242,240,236,.62);
}
.start-copy .fine{
  margin:0;max-width:34ch;line-height:1.75;
  color:rgba(242,240,236,.34);
}
@media(max-width:900px){
  .start-board{grid-template-columns:1fr;gap:28px;align-items:start}
}
@media(max-width:520px){
  .start-visuals{grid-template-columns:1fr 1fr;gap:5px}
  .start-cell{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){
  .start-cell{opacity:1;transform:none;transition:none}
  .start-cell .ph img{transform:none;transition:none}
}

.prod-hud{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:clamp(18px,3vw,28px);
  pointer-events:none;
}
.prod-cap{
  font-family:var(--mono);font-size:clamp(36px,6vw,64px);letter-spacing:-.04em;
  line-height:1;color:rgba(255,255,255,.12);font-weight:500;
  transition:color .4s;
}
.prod-visual:hover .prod-cap{color:rgba(255,255,255,.45)}
.prod-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-align:right;
  transform:translateY(6px);opacity:.7;
  transition:opacity .4s,transform .45s var(--ease-out),color .35s;
}
.prod-visual.seen .prod-label,.prod-visual:hover .prod-label{
  opacity:1;transform:none;color:#fff;
}

.prod-side{display:flex;flex-direction:column;min-height:100%}
.prod-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08);flex:1}
.prod-row{
  position:relative;
  display:grid;grid-template-columns:48px 1fr auto;gap:10px 16px;align-items:start;
  padding:clamp(18px,2.6vw,28px) 14px clamp(18px,2.6vw,28px) 16px;
  border:0;border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;color:inherit;text-align:left;cursor:pointer;width:100%;
  transition:background .35s,padding .4s var(--ease-out),box-shadow .35s;
}
.prod-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--brand-red);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease-out);
}
.prod-row:hover,.prod-row.active{
  background:linear-gradient(90deg,rgba(224,27,24,.08),rgba(255,255,255,.02) 55%,transparent);
  padding-left:22px;
}
.prod-row.active::before,.prod-row:hover::before{transform:scaleY(1)}
.prod-k{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:rgba(255,255,255,.28);padding-top:8px;
  transition:color .35s;
}
.prod-row.active .prod-k,.prod-row:hover .prod-k{color:#fff}
.prod-name{
  font-family:var(--disp);font-variation-settings:"wdth" 110;font-weight:800;
  font-size:clamp(18px,2.4vw,28px);letter-spacing:-.02em;text-transform:uppercase;
  color:rgba(242,240,236,.55);transition:color .35s,transform .4s var(--ease-out);
}
.prod-row.active .prod-name,.prod-row:hover .prod-name{color:#fff;transform:translateX(2px)}
.prod-desc{
  grid-column:2;font-family:var(--read);font-size:15px;line-height:1.6;color:var(--mute-f);
  max-height:0;overflow:hidden;opacity:0;margin:0;
  transition:max-height .45s,opacity .45s,margin .45s;
}
.prod-row.active .prod-desc,.prod-row:hover .prod-desc{max-height:90px;opacity:1;margin-top:8px}
.prod-arr{
  font-family:var(--mono);font-size:16px;color:#fff;
  opacity:0;transform:translateX(-10px);
  transition:opacity .35s,transform .35s var(--ease-out);padding-top:8px;
}
.prod-row.active .prod-arr,.prod-row:hover .prod-arr{opacity:1;transform:none}

.prod-cta{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:10px;
  padding:22px 0 4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:rgba(242,240,236,.45);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:color .35s,border-color .35s,transform .35s var(--ease-out);
}
.prod-cta .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.prod-cta:hover{color:#fff;border-color:var(--brand-red);transform:translateX(4px)}
.prod-cta:hover .arr{transform:translateX(6px);color:#fff}

@media(max-width:960px){
  .prod-visual{min-height:clamp(280px,48vh,460px)}
  .prod-cta{margin-top:12px}
}

/* ============================================================
   07 · FINAL FRAME
   ============================================================ */
.final-act{
  position:relative;min-height:clamp(480px,88vh,920px);overflow:hidden;
  display:grid;place-items:center;background:var(--deep);
}
.final-visual{position:absolute;inset:0}
.final-visual .ph{position:absolute;inset:0;height:100%}
.final-visual .ph img{animation:finalKen 18s linear infinite alternate}
@keyframes finalKen{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.final-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(4,5,6,.92) 0%,rgba(4,5,6,.55) 45%,rgba(4,5,6,.35) 100%);
  animation:finalDarken 8s ease forwards;
}
@keyframes finalDarken{to{background:linear-gradient(to top,rgba(4,5,6,.96) 0%,rgba(4,5,6,.72) 50%,rgba(4,5,6,.5) 100%)}}

.final-copy{
  position:relative;z-index:2;text-align:center;padding:var(--pad);
  opacity:0;transform:translateY(28px);
  animation:finalIn 1.2s .4s var(--ease-out) forwards;
}
@keyframes finalIn{to{opacity:1;transform:none}}
.final-copy h2{
  font-family:var(--disp);font-variation-settings:"wdth" 120;font-weight:900;
  font-size:clamp(32px,7vw,88px);letter-spacing:-.04em;line-height:.9;margin:0 0 32px;
  text-transform:uppercase;color:#fff;
}
.final-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:10px;margin-bottom:24px;
  transition:border-color .35s,transform .35s var(--ease-out);
}
.final-cta:hover{border-color:#fff;transform:translateX(6px)}
.final-mail{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:rgba(242,240,236,.42);text-decoration:none;transition:color .35s;
}
.final-mail:hover{color:#fff}

/* ============================================================
   08 · LUX FOOTER — cinematic endcard
   ============================================================ */
.endcard-min.endcard-lux{
  background:
    radial-gradient(90% 80% at 80% 0%,rgba(224,27,24,.07),transparent 55%),
    #040506;
  border-top:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.endcard-min .roll,.endcard-min .slateline{display:none}

.end-marq{
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:clamp(22px,4vh,40px) 0;
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
}
.end-marq-run{
  display:flex;align-items:center;gap:clamp(18px,3vw,36px);
  width:max-content;animation:endMarq 48s linear infinite;
}
.end-marq-run span{
  font-family:var(--disp);font-variation-settings:"wdth" 118;font-weight:900;
  font-size:clamp(28px,5.5vw,64px);letter-spacing:-.04em;line-height:1;
  text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(242,240,236,.22);
  transition:color .4s,-webkit-text-stroke-color .4s;
}
.end-marq-run span:nth-child(4n+1){
  color:rgba(242,240,236,.1);-webkit-text-stroke:0;
}
.end-marq:hover .end-marq-run{animation-play-state:paused}
.end-marq:hover .end-marq-run span{
  -webkit-text-stroke-color:rgba(224,27,24,.35);
}
.end-marq:hover .end-marq-run span:nth-child(4n+1){
  color:rgba(255,255,255,.2);
}
.end-marq-run i{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--brand-red);opacity:.55;
  box-shadow:0 0 0 0 rgba(224,27,24,.4);
}
@keyframes endMarq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.end-slate{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px var(--pad);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,240,236,.32);
}
.end-rec{display:inline-flex;align-items:center;gap:8px;color:rgba(242,240,236,.55)}
.end-rec i{
  width:7px;height:7px;border-radius:50%;background:var(--brand-red);
  animation:recPulse 1.6s ease-out infinite;
}
.end-tc{font-variant-numeric:tabular-nums;color:rgba(242,240,236,.28)}

.end-min-inner{
  display:grid;grid-template-columns:1.35fr 1fr 1.1fr;gap:clamp(28px,5vw,64px);
  padding:clamp(48px,8vh,88px) var(--pad);align-items:start;
}
@media(max-width:900px){.end-min-inner{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.end-min-inner{grid-template-columns:1fr}}

.end-logo{display:inline-block;text-decoration:none;margin-bottom:20px}
.end-brand .lock{
  width:min(220px,56vw);height:auto;display:block;
  transition:transform .55s var(--ease-out),filter .45s;
}
.end-logo:hover .lock{transform:scale(1.04);filter:brightness(1.08)}
.end-name{
  font-family:var(--disp);font-variation-settings:"wdth" 110;font-weight:800;
  font-size:clamp(18px,2vw,22px);margin:0 0 8px;color:#fff;
}
.end-roles{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(242,240,236,.38);margin:0 0 18px;
}
.end-tag{
  font-family:var(--read);font-size:15px;line-height:1.65;
  color:rgba(242,240,236,.42);margin:0;max-width:34ch;
}

.end-nav{display:flex;flex-direction:column;gap:2px}
.end-nav a{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--disp);font-size:clamp(15px,1.5vw,17px);
  text-decoration:none;color:rgba(242,240,236,.48);
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .35s,padding .4s var(--ease-out),border-color .35s;
}
.end-nav a:last-child{border-bottom:0}
.end-nav a .n{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:rgba(242,240,236,.22);min-width:1.8em;
  transition:color .35s;
}
.end-nav a .t{transition:transform .4s var(--ease-out)}
.end-nav a:hover{
  color:#fff;padding-left:8px;
  border-bottom-color:rgba(224,27,24,.25);
}
.end-nav a:hover .n{color:#fff}
.end-nav a:hover .t{transform:translateX(4px)}
.end-nav a.is-current .n{color:#fff}
.end-nav a.is-current .t{color:#fff}

.end-contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.end-kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,240,236,.28);margin:0;
}
.end-mail{
  font-family:var(--disp);font-variation-settings:"wdth" 105;font-weight:700;
  font-size:clamp(16px,2vw,22px);letter-spacing:-.02em;
  color:rgba(242,240,236,.72);text-decoration:none;position:relative;
  padding-bottom:6px;transition:color .35s;
}
.end-mail::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--brand-red);transition:width .45s var(--ease-out);
}
.end-mail:hover{color:#fff}
.end-mail:hover::after{width:100%}
.end-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:#fff;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  transition:border-color .35s,background .35s,transform .4s var(--ease-out),box-shadow .4s;
}
.end-cta .arr{display:inline-block;transition:transform .35s var(--ease-out);color:#fff}
.end-cta:hover{
  border-color:rgba(224,27,24,.65);
  background:rgba(224,27,24,.1);
  transform:translateX(4px);
  box-shadow:0 12px 32px rgba(224,27,24,.12);
}
.end-cta:hover .arr{transform:translateX(6px)}
.end-place{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,236,.28);margin-top:4px;
}

.end-min-base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px var(--pad);border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:rgba(242,240,236,.28);
}
.end-min-base a{
  color:inherit;text-decoration:none;margin-right:16px;
  transition:color .3s;
}
.end-min-base a:hover{color:rgba(242,240,236,.75)}

@media (prefers-reduced-motion:reduce){
  .end-marq-run{animation:none!important}
  .end-rec i{animation:none!important}
}

/* hide legacy home blocks */
.films,.stories,.photo-act,.director,.access,.close-b,.dispatch,.film-showcase,.story-flow,.photo-flow,.films-lead,.section-mark{display:none!important}

@media (prefers-reduced-motion:reduce){
  .story-editorial,.prod-visual,.final-copy{opacity:1!important;transform:none!important;animation:none!important;clip-path:none!important}
  .films-act .film .plate .ph,.films-act .hud2 .rec i,.story-media .ph,.prod-img.on .ph img,.final-visual .ph img{animation:none!important;transition:none!important}
  .films-act .synop{opacity:1!important;max-height:none!important}
  .films-act .reelrow{scroll-behavior:auto}
  .credit-item{transition:none}
  .credits-run{animation:none!important}
  .cursor-label{display:none}
  .end-marq-run{animation:none!important}
  .end-rec i{animation:none!important}
}