/* Approved Refined Studio homepage styles, extracted unchanged from website/index.html
   (approved source checkpoint 4fcc93d). Only the unused legacy Oswald/Barlow @font-face
   rules were removed and the Outfit URL made relative to this file. */
/* ---------------------------------------------------------------
   Refined Studio — dark Carousel identity, upgraded hierarchy.
   Type: Oswald (condensed display) + Barlow (text). 2 families / 3 weights.
--------------------------------------------------------------- */

:root{
  --black:#000;
  --charcoal:#222;
  --butter:#E5E193;
  --slate:#8D9FBC;
  --burgundy:#62043B;
  --white:#fff;
  --ink:#F3F2EA;
  --ink-dim:#B9B7AC;
  --rule:rgba(243,242,234,.20);
  --rule-soft:rgba(243,242,234,.10);
  --pad:clamp(20px,4.6vw,76px);
  --maxw:1620px;
  --display:'Oswald',"Haettenschweiler","Arial Narrow",Arial,sans-serif;
  --text:'Barlow',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--charcoal);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.94rem + .28vw,1.125rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;line-height:.94;letter-spacing:.005em;text-transform:uppercase}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--butter);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:12px;top:-100px;z-index:60;
  background:var(--butter);color:var(--black);
  padding:14px 22px;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  transition:top .18s ease;
}
.skip:focus{top:12px}

/* ---------- eyebrow / label type ---------- */
.label{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.3em;color:var(--ink-dim);
}
.label--butter{color:var(--butter)}

/* ---------- header ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--black);
  border-bottom:1px solid var(--rule-soft);
}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:84px;
}
.brand{display:inline-flex;align-items:center;text-decoration:none;padding:6px 0}
.brand img{height:58px;width:auto}
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav a{
  text-decoration:none;font-family:var(--display);text-transform:uppercase;
  font-size:.86rem;letter-spacing:.2em;color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--butter);border-bottom-color:var(--butter)}


.nav-toggle{
  display:none;
  min-height:44px;min-width:44px;padding:0 18px;
  background:transparent;border:1px solid var(--rule);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--butter);color:var(--butter)}

/* ---------- intro: asymmetric, crisp ---------- */
.intro{padding-block:clamp(32px,3.8vw,54px) clamp(24px,2.5vw,36px);position:relative}
.intro::after{
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;background:var(--rule-soft);
}
.intro__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.4vw,40px);
  row-gap:clamp(22px,2vw,30px);
  align-items:end;
}
.intro__head{grid-column:1 / span 8}
.intro__kicker{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(20px,2.6vw,34px)}
.intro__kicker::after{content:"";flex:1;height:1px;background:var(--rule)}
h1.intro__title{
  font-weight:700;
  font-size:clamp(2.9rem,6.3vw,6rem);
  line-height:.88;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.intro__title em{font-style:normal;color:var(--butter);display:block}
.intro__aside{grid-column:10 / span 3;padding-bottom:clamp(4px,1vw,14px)}
.intro__lede{font-size:clamp(.98rem,.9rem + .3vw,1.12rem);line-height:1.56;color:var(--ink);max-width:40ch}
.intro__lede strong{font-weight:400;color:var(--butter)}
.intro__rule{width:64px;height:2px;background:var(--butter);margin-bottom:22px}

.intro__meta{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule-soft);
  border-block:1px solid var(--rule-soft);
  margin-top:clamp(12px,1.3vw,20px);
}
.intro__meta div{background:var(--charcoal);padding:13px 22px 15px}
.intro__meta dt{margin:0 0 8px}
.intro__meta dd{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(.95rem,.9rem + .25vw,1.18rem);line-height:1.15;letter-spacing:.02em}

/* ---------- reel ---------- */
.reel{padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,96px)}
.reel__frame{
  position:relative;
  aspect-ratio:16/9;
  max-height:78vh;
  background:var(--black);
  overflow:hidden;
  border:1px solid var(--rule-soft);
}
.reel__frame video,.reel__frame > img{width:100%;height:100%;object-fit:cover}
.reel__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.05) 58%),
    linear-gradient(to right,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 48%);
}
.reel__play{
  position:absolute;
  left:clamp(18px,3.4vw,58px);
  bottom:clamp(18px,3.4vw,58px);
  display:inline-flex;align-items:center;gap:20px;
  background:transparent;border:0;padding:0;cursor:pointer;
  text-align:left;
}
.reel__disc{
  flex:none;
  width:clamp(64px,7.4vw,108px);height:clamp(64px,7.4vw,108px);
  border-radius:50%;
  background:var(--butter);
  display:grid;place-items:center;
  transition:transform .22s ease, background .22s ease;
}
.reel__disc svg{width:34%;height:34%;fill:var(--black);margin-left:8%}
.reel__play:hover .reel__disc{transform:scale(1.06);background:var(--white)}
.reel__playtext{display:block}
.reel__playtext b{
  display:block;font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.15rem,.9rem + 1.1vw,2rem);line-height:1;letter-spacing:.02em;
  color:var(--white);
}
.reel__playtext small{
  display:block;margin-top:8px;font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:var(--butter);
}
.motion-toggle{
  position:absolute;right:clamp(14px,2.2vw,28px);top:clamp(14px,2.2vw,28px);
  min-height:44px;padding:0 18px;
  background:rgba(0,0,0,.66);color:var(--white);
  border:1px solid rgba(255,255,255,.42);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;
  cursor:pointer;backdrop-filter:blur(2px);
}
.motion-toggle:hover{background:var(--butter);color:var(--black);border-color:var(--butter)}
.reel__caption{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;
  padding-top:16px;
}

/* ---------- featured work / yellow sizzle reel ---------- */
.latest-work .reel__frame{aspect-ratio:16/9;max-height:none}
.latest-work .reel__play{right:clamp(18px,3.4vw,58px)}
.latest-work .reel__playtext{min-width:0}
.latest-work .reel__playtext b{font-size:clamp(1.5rem,3.3vw,3.5rem);overflow-wrap:break-word}
.latest-work .reel__playtext small{letter-spacing:.1em;line-height:1.5}
.latest-work [data-latest-role][hidden]{display:none}
.latest-work__title-only{padding:clamp(28px,4vw,54px);background:var(--charcoal);border:1px solid var(--rule-soft)}
.latest-work__title-only h3{font-size:clamp(2rem,5vw,4rem);line-height:1.03;letter-spacing:-.03em;overflow-wrap:break-word}
.interrupt{background:var(--butter);color:var(--black)}
.interrupt__inner{padding-block:clamp(52px,7vw,104px)}
.interrupt .label{color:rgba(0,0,0,.6)}
.interrupt .reel__heading{font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1;margin-bottom:clamp(24px,3vw,40px)}
.interrupt .reel__frame{border-color:rgba(0,0,0,.24)}

/* ---------- section scaffolding ---------- */
.section{padding-block:clamp(60px,7.5vw,124px)}
.section__head{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.4vw,40px);row-gap:18px;align-items:end;
  padding-bottom:clamp(26px,3.4vw,48px);
  border-bottom:1px solid var(--rule);
}
.section__head h2{grid-column:1 / span 7;font-size:clamp(1.9rem,4.4vw,3.6rem)}
.section__head .section__note{grid-column:9 / span 4;color:var(--ink-dim);font-size:.98rem;max-width:40ch}

/* ---------- ordered work list ---------- */
.work-list{list-style:none;margin:0;padding:0}
.work-item{border-bottom:1px solid var(--rule-soft)}
.work-trigger{
  width:100%;background:transparent;border:0;padding:clamp(18px,2.2vw,30px) 0;cursor:pointer;
  display:grid;
  grid-template-columns:clamp(54px,5vw,88px) minmax(0,1fr) clamp(200px,26vw,380px) auto;
  align-items:center;
  column-gap:clamp(16px,2.4vw,40px);
  text-align:left;
}
.work-index{
  font-family:var(--display);font-weight:400;font-size:clamp(.82rem,.78rem + .2vw,1rem);
  letter-spacing:.16em;color:var(--ink-dim);align-self:start;padding-top:.45em;
  transition:color .2s ease;
}
.work-text{min-width:0}
.work-title{
  display:block;font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(1.55rem,1rem + 2.4vw,3.4rem);line-height:.98;letter-spacing:.005em;
  transition:color .2s ease;
}
.work-role{
  display:block;margin-top:10px;color:var(--ink-dim);
  font-size:.92rem;letter-spacing:.02em;
}
.work-media{
  display:block;overflow:hidden;background:var(--black);aspect-ratio:16/10;
  border:1px solid var(--rule-soft);
}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1);filter:grayscale(.35) contrast(1.04)}
.work-cue{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;
  color:var(--butter);white-space:nowrap;
}
.work-cue svg{width:12px;height:12px;fill:currentColor}
.work-trigger:hover .work-index{color:var(--butter)}
.work-trigger:hover .work-title{color:var(--butter)}
.work-trigger:hover .work-media img{transform:scale(1.05);filter:none}
.work-trigger--pending{cursor:default}
.work-trigger--pending .work-text{grid-column:2 / -1}
.work-trigger--pending:hover .work-index{color:var(--ink-dim)}
.work-trigger--pending:hover .work-title{color:var(--ink)}

/* ---------- studio / founders ---------- */
.studio{background:var(--black)}
.studio__body{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.4vw,40px);row-gap:clamp(30px,4vw,60px);
  padding-top:clamp(34px,4.4vw,64px);
}
.studio__lede{grid-column:1 / span 7}
.studio__lede p{font-size:clamp(1.05rem,.98rem + .5vw,1.4rem);line-height:1.46;max-width:46ch}
.studio__lede p + p{margin-top:1.1em;font-size:1.02rem;line-height:1.62;color:var(--ink-dim);max-width:58ch}
.studio__spec{grid-column:9 / span 4;border-top:2px solid var(--butter);padding-top:20px}
.studio__spec ul{list-style:none;margin:14px 0 0;padding:0}
.studio__spec li{
  padding:11px 0;border-bottom:1px solid var(--rule-soft);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;
}

.founders{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,64px);
  margin-top:clamp(16px,2.4vw,36px);
}
.founder{border-top:1px solid var(--rule);padding-top:22px}
.founder h3{font-size:clamp(1.5rem,1rem + 1.6vw,2.4rem);margin-bottom:6px}
.founder .founder__role{color:var(--butter);font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;margin-bottom:16px}
.founder p{color:var(--ink-dim);font-size:1rem}

/* ---------- network / platform logo cloud ---------- */
.company-logos{
  margin-top:clamp(38px,5vw,84px);padding-top:clamp(28px,4vw,56px);
  border-top:1px solid var(--rule);
}
.logo-cloud__heading{font-size:clamp(1.25rem,1.7vw,1.75rem);line-height:1.2;margin-bottom:clamp(20px,2.8vw,36px)}
.logo-cloud{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(20px,2.8vw,44px);
  list-style:none;padding:0;margin:0;
}
.logo-cloud li{display:flex;align-items:center;justify-content:center;min-width:0;min-height:100px}
.logo-cloud img{
  width:var(--logo-width,150px);max-width:100%;height:64px;
  object-fit:contain;filter:brightness(0) invert(1);opacity:.88;
}

/* ---------- contact ---------- */
.contact{background:var(--charcoal);border-top:1px solid var(--rule)}
.contact__grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(18px,2.4vw,40px);row-gap:clamp(30px,4vw,56px);
  padding-block:clamp(60px,7.5vw,120px);
}
.contact__lead{grid-column:1 / span 7}

.contact-form{margin-top:clamp(22px,2.8vw,38px)}
.contact-form__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.contact-form__field{display:flex;flex-direction:column;gap:10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
.contact-form__field--message{grid-column:1 / -1}
.contact-form input,.contact-form textarea{
  width:100%;min-width:0;padding:14px 16px;border:1px solid var(--rule);border-radius:0;
  background:var(--black);color:var(--ink);font:inherit;font-size:1rem;line-height:1.5;
  text-transform:none;letter-spacing:normal;
}
.contact-form input{min-height:54px}
.contact-form textarea{min-height:180px;resize:vertical}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{border-color:var(--butter)}
.contact-form__submit{
  display:inline-flex;align-items:center;min-height:56px;margin-top:clamp(22px,2.8vw,38px);
  padding:0 30px;border:0;border-radius:0;background:var(--butter);color:var(--black);cursor:pointer;
  font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:1rem;
}
.contact-form__submit:hover{background:var(--white)}
.contact-form__submit:disabled{opacity:.6;cursor:not-allowed}
.contact-form__status{margin-top:16px;max-width:60ch;color:var(--ink-dim);font-size:.9rem}
@media(max-width:640px){.contact-form__fields{grid-template-columns:minmax(0,1fr)}}
.contact__side{grid-column:9 / span 4;display:flex;flex-direction:column;gap:26px}
.contact__emails{display:grid;gap:12px;width:100%;max-width:440px}
.contact__email{display:block;width:100%;height:auto}
.contact__side a{display:inline-block;min-height:44px}
.contact__block{border-top:1px solid var(--rule-soft);padding-top:16px}
.contact__block p{margin-top:8px;color:var(--ink-dim);font-size:.96rem}
.contact__block a{color:var(--butter);text-decoration:none;border-bottom:1px solid rgba(229,225,147,.4)}
.contact__block a:hover{color:var(--white);border-bottom-color:var(--white)}

.colophon{
  background:var(--black);border-top:1px solid var(--rule-soft);
}
.colophon__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;
  padding-block:32px;
}
.colophon img{height:78px;width:auto}
.colophon__links{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.colophon__links a{
  color:var(--ink-dim);text-decoration:none;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  display:inline-flex;align-items:center;min-height:44px;
}
.colophon__links a:hover{color:var(--butter)}

/* ---------- dialog ---------- */
#film-dialog{
  width:min(1200px,94vw);padding:0;border:0;background:var(--black);color:var(--ink);
  box-shadow:0 40px 120px rgba(0,0,0,.7);
}
#film-dialog::backdrop{background:rgba(0,0,0,.9)}
.dialog__bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px clamp(16px,2.4vw,28px);
  border-bottom:1px solid var(--rule-soft);
}
.dialog__bar h2{font-size:clamp(1.15rem,1rem + .9vw,1.9rem)}
.dialog__note{margin-top:8px;color:var(--butter);font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;max-width:56ch;line-height:1.5}
.dialog__close{
  flex:none;min-height:44px;min-width:44px;padding:0 20px;cursor:pointer;
  background:transparent;border:1px solid var(--rule);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;
}
.dialog__close:hover{background:var(--butter);color:var(--black);border-color:var(--butter)}
#film-video{width:100%;aspect-ratio:16/9;background:#000}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .intro__head{grid-column:1 / -1}
  .intro__aside{grid-column:1 / span 8}
  .intro__meta{grid-template-columns:repeat(2,1fr)}
  .section__head h2{grid-column:1 / -1}
  .section__head .section__note{grid-column:1 / span 8}
  .studio__lede{grid-column:1 / -1}
  .studio__spec{grid-column:1 / -1}
  .contact__lead,.contact__side{grid-column:1 / -1}
  .logo-cloud{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--black);border-bottom:1px solid var(--rule);
    padding:8px var(--pad) 22px;
  }
  .nav.is-open{display:flex}
  .nav a{min-height:56px;border-bottom:1px solid var(--rule-soft);font-size:1.05rem}
  .nav a:hover{border-bottom-color:var(--butter)}
  .masthead__inner{position:relative;min-height:70px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .brand img{height:48px}

  .work-trigger{
    grid-template-columns:auto 1fr;
    grid-template-areas:"index cue" "media media" "text text";
    row-gap:14px;
  }
  .work-index{grid-area:index;align-self:center;padding-top:0}
  .work-cue{grid-area:cue;justify-self:end}
  .work-media{grid-area:media;aspect-ratio:16/9}
  .work-text{grid-area:text}
  .founders{grid-template-columns:1fr}
  .reel__frame{aspect-ratio:4/3;max-height:none}
  .reel__play{gap:14px}
}
@media (max-width:420px){
  .intro__meta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media(max-width:640px){.intro__meta{display:none}.intro{padding-bottom:22px}.logo-cloud{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}.logo-cloud li{min-height:84px}}

/* Approved 2026 vector logo: CAROUSEL, divider, FILMS NYC. */
img.brand-wordmark{width:200px!important;height:auto!important;max-width:100%;object-fit:contain}
.hero-left img.brand-wordmark{width:clamp(210px,23vw,320px)!important;margin-left:0}
.nameplate img.brand-wordmark{width:220px!important}
@media(max-width:820px){img.brand-wordmark{width:160px!important}.nameplate img.brand-wordmark{width:170px!important}}
@media(max-width:540px){.bar__brand img.brand-wordmark{width:128px!important}body[data-wordmark-concept="09"] .brand img.brand-wordmark{width:126px!important}}


/* ===== Approved typography ===== */
@font-face{font-family:'Demo Outfit';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/outfit-latin.woff2") format('woff2');}
:root{--display:"Demo Outfit",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--text:"Demo Outfit",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* Responsive wrapping and deliberate display line groups. */
html[data-site-font] h1.intro__title,
html[data-site-font] .interrupt h2,
html[data-site-font] .section__head h2,
html[data-site-font] .work-title{overflow-wrap:break-word}
/* ===== End approved typography ===== */