/* ============================================================
   AYANOVA PICTURES
   ============================================================ */

:root{
  --black:#07070A;
  --ink:#0C0C11;
  --ink-2:#111118;
  --line:rgba(212,177,92,.16);
  --line-soft:rgba(255,255,255,.07);

  --gold:#C9A24D;
  --gold-lo:#8A6224;
  --gold-hi:#F2DFA8;
  --gold-grad:linear-gradient(115deg,#A87A3E 0%,#C9982F 18%,#F6E3A2 42%,#D8A83C 62%,#8A6224 82%,#E8C878 100%);

  --paper:#F3EFE6;
  --muted:#A8A49B;
  --muted-2:#858179;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  font-weight:300;letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#000;padding:12px 20px;font-weight:600;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

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

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem);margin-bottom:22px}
h3{font-size:1.35rem;line-height:1.25}
p{margin:0 0 18px}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
.lede{font-size:1.12rem;color:#D8D3C8}
.section-lede{font-size:1.08rem;color:var(--muted);max-width:62ch;margin-bottom:56px}

em{
  font-style:italic;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.9rem;font-weight:600;
  letter-spacing:.06em;padding:15px 30px;border-radius:2px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;
}
.btn-gold{background:var(--gold-grad);color:#14100A;background-size:200% 100%}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(201,162,77,.3);background-position:100% 0}
.btn-ghost{border-color:rgba(212,177,92,.45);color:var(--gold);background:transparent}
.btn-ghost:hover{background:rgba(201,162,77,.1);transform:translateY(-2px)}
.btn-block{width:100%;text-align:center;border:0;font-size:.95rem}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(7,7,10,0);backdrop-filter:blur(0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
}
.nav.stuck{background:rgba(7,7,10,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:82px;gap:20px}

.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-brand img{width:64px;height:64px;flex:0 0 auto}
.nav-brand-text{display:flex;flex-direction:column;line-height:1}
.nav-brand-name{
  font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.14em;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-brand-sub{font-size:.58rem;letter-spacing:.42em;color:var(--muted-2);text-transform:uppercase;margin-top:4px}

.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{
  text-decoration:none;font-size:.87rem;font-weight:400;color:#CFCABF;
  position:relative;padding:4px 0;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{width:100%}
.nav-links .nav-cta{
  border:1px solid rgba(212,177,92,.45);color:var(--gold);
  padding:10px 20px;border-radius:2px;font-weight:600;
}
.nav-links .nav-cta::after{display:none}
.nav-links .nav-cta:hover{background:rgba(201,162,77,.12)}

.nav-progress{
  /* A7: was width:0 + transition:width .1s linear - a layout-forcing animation on
     every scroll tick, permanently 100ms behind the pointer. Full width, scaled. */
  height:1px;background:var(--gold-grad);width:100%;
  transform:scaleX(0);transform-origin:left;will-change:transform;
}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--gold);transition:transform .3s var(--ease),opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

[hidden]{display:none!important}

.mobile-nav{
  display:none;
  position:fixed;top:82px;left:0;right:0;z-index:99;
  background:rgba(7,7,10,.97);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  flex-direction:column;padding:14px 28px 26px;
  max-height:calc(100svh - 82px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-nav a{
  text-decoration:none;color:#CFCABF;padding:15px 0;
  border-bottom:1px solid var(--line-soft);font-size:1rem;
}
.mobile-nav a:last-child{border-bottom:0;color:var(--gold);font-weight:600}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:130px 0 40px;overflow:hidden;
}
.hero-glow{
  position:absolute;top:-25%;left:50%;transform:translateX(-50%);
  width:min(1100px,130vw);height:min(1100px,130vw);
  background:radial-gradient(circle,rgba(201,162,77,.15) 0%,rgba(201,162,77,.05) 38%,transparent 68%);
  pointer-events:none;
}
.hero-grain{
  position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 17%{transform:translate(-4%,-4%)}
  34%{transform:translate(3%,-2%)} 51%{transform:translate(-2%,3%)}
  68%{transform:translate(4%,2%)}  85%{transform:translate(-3%,-3%)}
}
.hero-bars i{
  position:absolute;left:0;right:0;height:52px;
  background:linear-gradient(180deg,rgba(0,0,0,.85),transparent);
  pointer-events:none;
}
.hero-bars i:first-child{top:0}
.hero-bars i:last-child{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}

.hero-inner{position:relative;z-index:2}
.hero-title{
  font-size:clamp(3rem,9vw,7rem);line-height:.96;margin:0 0 30px;font-weight:400;
}
.hero-title .line{display:block;overflow:hidden}
.hero-lede{font-size:clamp(1.02rem,1.6vw,1.22rem);color:#CBC6BB;max-width:56ch;margin-bottom:38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px}


/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink);overflow:hidden;padding:20px 0;
}
.marquee-track{display:flex;align-items:center;gap:30px;width:max-content;animation:slide 34s linear infinite}
.marquee-track span{
  font-family:var(--serif);font-size:1.5rem;letter-spacing:.05em;color:#5E5A52;white-space:nowrap;
}
.marquee-track i{color:var(--gold);font-size:.5rem;font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:clamp(80px,11vw,140px) 0;position:relative}
/* The hero now ends on the marquee bar. The seam under it used to be ~230px of
   dead black (90px hero tail + 140px section head) with only the scroll cue in it.
   Adjacent-sibling so it follows the hero wherever the running order changes --
   it was #studio until Our Story moved into that slot. Every other section keeps
   the full rhythm. */
.hero + .section{padding-top:clamp(52px,5.5vw,74px)}
.section-alt{background:var(--ink);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* studio */
.studio-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:start}
.studio-copy p{color:var(--muted)}
.studio-copy .lede{color:#D8D3C8}
.studio-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.studio-tags span{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);padding:8px 15px;border-radius:2px;
}
.studio-card{
  background:linear-gradient(165deg,rgba(201,162,77,.07),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:3px;padding:44px 34px;
  position:sticky;top:112px;
}
.studio-card-mark{display:flex;justify-content:center;margin-bottom:34px}
.factlist{margin:0}
.factlist>div{padding:16px 0;border-top:1px solid var(--line-soft)}
.factlist>div:first-child{border-top:0;padding-top:0}
.factlist dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.factlist dd{margin:0;font-family:var(--serif);font-size:1.16rem;color:var(--paper)}

/* capabilities */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.cap{
  background:var(--ink);padding:44px 34px;position:relative;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.cap:hover{background:#15151C}
.cap-num{
  font-family:var(--serif);font-size:.95rem;letter-spacing:.16em;color:var(--gold);
  display:block;margin-bottom:20px;
}
.cap h3{margin-bottom:14px;color:var(--paper)}
.cap p{color:var(--muted);font-size:.96rem;margin-bottom:20px}
.cap ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-soft);padding-top:18px}
.cap li{
  font-size:.85rem;color:var(--muted-2);padding:6px 0 6px 18px;position:relative;
}
.cap li::before{
  content:'';position:absolute;left:0;top:14px;width:6px;height:1px;background:var(--gold);
}

/* slate */
/* A9: a dashed gold pill with uppercase tracking read as a tappable control.
   It is a <span> saying "To be confirmed" - make it look like the note it is. */
.pending-chip{
  display:inline;font-size:1rem;font-weight:300;letter-spacing:normal;text-transform:none;
  font-style:italic;color:var(--muted-2);
  border:0;padding:0;border-radius:0;background:none;
}
/* process */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.steps li{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.step-num{
  font-family:var(--serif);font-size:2.6rem;line-height:1;display:block;margin-bottom:18px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.steps h3{margin-bottom:12px}
.steps p{color:var(--muted);font-size:.95rem;margin:0}

/* team */
/* founder */
.founder{
  display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start;
  border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(165deg,rgba(201,162,77,.06),transparent 60%);
  padding:48px;
}
.founder-portrait{position:relative;border-radius:2px;overflow:hidden;background:#000}
.founder-portrait::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,7,10,.5));
  pointer-events:none;
}
.founder-portrait img{width:100%;height:auto;display:block;filter:saturate(.92) contrast(1.04)}
.founder-role{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;font-weight:600;
}
.founder-name{
  font-family:var(--serif);font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;
  margin-bottom:10px;font-weight:500;
}
.founder-kicker{
  font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line-soft);
}
.founder-body p{color:var(--muted);font-size:.98rem}
.founder-pull{
  font-family:var(--serif);font-size:1.5rem;font-style:italic;
  color:var(--gold);margin:28px 0 0;padding-top:24px;
  border-top:1px solid var(--line-soft);
}

/* slate titles */
.title-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
/* The slate was nine text-only cards. A studio's slate should show the work,
   so each title now leads with its own key art, bled to the card edges. */
.title-art{
  margin:-42px -36px 26px;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.title-art img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.88;
  /* A8: .7s visibly lagged the pointer. */
  transition:transform .45s var(--ease), opacity .3s ease;
}
.title-card:hover .title-art img{transform:scale(1.045);opacity:1}

.title-card{
  background:var(--black);padding:42px 36px;position:relative;
  display:flex;flex-direction:column;
  transition:background .4s var(--ease);
}
.title-card:hover{background:#101017}
.title-index{
  font-family:var(--serif);font-size:.9rem;letter-spacing:.16em;color:var(--gold);
  display:block;margin-bottom:18px;
}
.title-meta{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.title-tag{
  font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(212,177,92,.4);
  padding:5px 11px;border-radius:2px;
}
.title-plat{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.title-name{
  font-family:var(--serif);font-size:1.85rem;line-height:1.12;margin-bottom:14px;font-weight:500;
}
.title-desc{color:var(--muted);font-size:.95rem;flex:1}
.title-link{
  /* A4: measured 25.6px tall at 390px and it is the only conversion action on
     each of the nine cards. inline-flex + min-height:44px, aligned flex-end so
     the underline still hugs the text and the extra height lands in the gap
     above (margin-top:auto keeps the text pinned to the card's bottom edge). */
  align-self:flex-start;margin-top:auto;text-decoration:none;
  display:inline-flex;align-items:flex-end;gap:.4em;min-height:44px;
  padding:17px 0 5px;
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid rgba(212,177,92,.4);
  transition:border-color .3s,color .3s;
}
.title-link:hover,.title-link:focus-visible{border-bottom-color:var(--gold);color:var(--gold-hi)}
/* A10: this opens kukutv.app in a new tab. A bare right arrow read as "next". */
.title-link::after{content:'↗'}
.slate-note{margin-top:34px;font-size:.85rem;color:var(--muted);letter-spacing:.04em}

/* contact */
.section-contact{background:var(--ink-2);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact-list{margin:34px 0 0}
.contact-list>div{padding:18px 0;border-top:1px solid var(--line-soft)}
.contact-list dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.contact-list dd{margin:0;color:var(--paper);font-size:1rem}

.contact-form{
  background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:40px 34px;
}
.field{margin-bottom:22px}
.field label{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.field input,.field select,.field textarea{
  /* A3: --line-soft (rgba(255,255,255,.07)) over #0A0A0F composites to 1.15:1 -
     the fields read as flat voids. .36 gives 3.26:1 against the field fill and
     3.22:1 against the form's --ink surround, clearing WCAG 1.4.11's 3:1. */
  width:100%;background:#0A0A0F;border:1px solid rgba(255,255,255,.36);border-radius:2px;
  color:var(--paper);font-family:var(--sans);font-size:1rem;font-weight:300;
  padding:13px 15px;transition:border-color .3s;
}
.field textarea{resize:vertical;min-height:120px}
/* A3: focus is a 2px border, not just a hue shift - for a mouse user this is the
   only focus indicator (the outline is suppressed below). Padding drops 1px so
   the content box is identical and the text does not jump. .8 gold = 6.41:1. */
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(212,177,92,.8);border-width:2px;padding:12px 14px;
}
.field input:focus:not(:focus-visible),.field select:focus:not(:focus-visible),.field textarea:focus:not(:focus-visible){outline:none}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.req{color:var(--gold)}
.form-req-note{font-size:.78rem;color:var(--muted);margin:0 0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.form-note{font-size:.78rem;color:var(--muted-2);margin:16px 0 0;text-align:center}
.hp{position:absolute;left:-9999px}

/* footer */
.footer{background:var(--black);border-top:1px solid var(--line);padding:66px 0 40px}
.footer-inner{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:18px}
.footer-brand p{margin:0;font-size:.83rem;color:var(--muted-2);line-height:1.7}
.footer-nav{display:flex;gap:26px;flex-wrap:wrap}
/* Bare inline anchors measured 22.7px tall, well under the 44px touch
   minimum. inline-flex + min-height gives a real hit area; the flex gap
   already keeps them apart, so nothing shifts visually. */
.footer-nav a{text-decoration:none;font-size:.86rem;color:var(--muted);transition:color .25s;display:inline-flex;align-items:center;min-height:44px}
.footer-nav a:hover{color:var(--gold)}
.footer-legal{width:100%;margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line-soft);font-size:.78rem;color:var(--muted-2)}

/* ---------- reveal ---------- */
/* A8: .8s + up to 420ms of JS stagger was 1220ms for the last slate card.
   .5s here + a 240ms stagger cap in script.js = 740ms worst case. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr);gap:36px}
}

@media (max-width:1080px){
  .nav-links{display:none}
  .founder{grid-template-columns:1fr;gap:36px;padding:36px}
  .founder-portrait{max-width:300px}
  .title-grid{grid-template-columns:repeat(2,1fr)}
  .nav-toggle{display:flex}
  .mobile-nav{display:flex}
  .studio-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .studio-card{position:static}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .founder{padding:28px 22px}
  .title-card{padding:32px 24px}
  .steps{grid-template-columns:1fr;gap:30px}
  .hero{min-height:auto;padding:118px 0 30px}
  .hero-actions .btn{flex:1 1 100%;text-align:center}
  .cap{padding:34px 26px}
  .contact-form{padding:30px 22px}
  .footer-inner{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  /* Must match .js .reveal's specificity (0,2,0) or it loses and content stays hidden. */
  .js .reveal,.reveal{opacity:1;transform:none}
}

/* ============================================================
   ADDED 2026-08-25 — Ayush's 8/21 revision round
   Opening title card, hero lockup, in-hero marquee,
   founder acting credits, AI concept-film grid.
   ============================================================ */

/* ---------- opening title card (A-20) ---------- */
.intro{
  /* A11: this was pointer-events:none, so during the ~2s hold a visitor could
     click nav links they could not see. The overlay is only ever in the page
     while it is meant to be blocking; script.js takes it away again. */
  display:none;
  position:fixed;inset:0;z-index:200;
}
/* Only script.js adds .is-armed, and only when it can also remove it again.
   No JS, blocked JS or a throw before that point = no overlay at all. */
.intro.is-armed{display:block}
.skip:focus{z-index:300}
.intro-half{
  position:absolute;left:0;right:0;height:50.5%;background:var(--black);
  transition:transform .9s var(--ease);
}
.intro-half--top{top:0}
.intro-half--bottom{bottom:0}
.intro-mark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease, transform .9s var(--ease);
}
.intro-mark img{
  width:min(38vw,340px);height:auto;
  animation:introBreathe 1.9s var(--ease) both;
}
@keyframes introBreathe{
  from{opacity:0;transform:scale(.94)}
  30%{opacity:1;transform:scale(1)}
  to{opacity:1;transform:scale(1.02)}
}
/* .is-opening plays the reveal; .is-done takes the layer out of the page entirely */
.intro.is-opening .intro-half--top{transform:translateY(-100%)}
.intro.is-opening .intro-half--bottom{transform:translateY(100%)}
.intro.is-opening .intro-mark{opacity:0;transform:scale(1.08)}
.intro.is-done{display:none}

/* ---------- hero lockup (A-08, A-20) ---------- */
.hero-logo{margin:0 0 30px}
.hero-logo img{
  width:clamp(180px,22vw,290px);height:auto;display:block;
  filter:drop-shadow(0 18px 44px rgba(201,162,77,.16));
}

/* ---------- marquee moved into the hero (A-11, A-12) ---------- */
.marquee--hero{
  background:transparent;border-top:0;border-bottom:0;margin-top:6px;padding:22px 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee--hero .marquee-track span{font-size:1.15rem;color:#9A958B}

/* ---------- logo lockup in studio card + footer ---------- */
.studio-card-mark img,
.footer-brand img{width:min(230px,72%);height:auto}
.footer-brand img{width:min(200px,60%)}

/* ---------- founder acting credits (A-15) ---------- */
.founder-credits{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.founder-credits-title{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 16px;font-family:var(--sans);font-weight:500;
}
.credit-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.credit-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.credit-list li:last-child{border-bottom:0;padding-bottom:0}
.credit-name{font-family:var(--serif);font-size:1.24rem;color:var(--paper)}
.credit-format{
  font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  white-space:nowrap;
}

/* ---------- co-producer credit on slate cards (A-06) ---------- */
.title-credit{
  margin:14px 0 0;font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}

/* ---------- AI concept films (A-07 / A-16) ---------- */
.ad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:8px}
.ad-card{
  border:1px solid var(--line);background:var(--ink);padding:26px 24px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.ad-card:hover{border-color:rgba(212,177,92,.4);transform:translateY(-3px)}
.ad-brand{font-family:var(--serif);font-size:1.5rem;color:var(--paper);margin:0}
.ad-count{font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
/* A4: these were 22.4px tall and stacked 7px apart - nine of them, three inside
   the Tesla card alone. The taller line boxes now supply the separation, so the
   list gap goes to zero. The <li> is a flex line so the anchor's inline-flex box
   cannot pick up baseline slop from the list item's line box. */
.ad-films{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ad-films li{display:flex}
.ad-films a{
  display:inline-flex;align-items:flex-end;gap:.35em;min-height:44px;
  padding:17px 0 5px;
  font-size:.85rem;color:var(--muted);text-decoration:none;
  border-bottom:1px solid rgba(212,177,92,.32);transition:color .25s,border-color .25s;
}
/* A10: every one of these leaves for drive.google.com, possibly onto a sign-in wall. */
.ad-films a::after{content:'↗';color:var(--gold)}
.ad-films a:hover,.ad-films a:focus-visible{color:var(--paper);border-bottom-color:var(--gold)}
.ad-disclaimer{
  margin-top:28px;padding:20px 22px;border:1px solid var(--line);
  background:rgba(201,162,77,.05);font-size:.82rem;line-height:1.7;color:var(--muted);
}
.ad-disclaimer strong{color:var(--gold-hi);font-weight:600}

@media (max-width:640px){
  .hero-logo img{width:min(62vw,230px)}
  .intro-mark img{width:min(64vw,260px)}
  .credit-list li{flex-direction:column;gap:4px;align-items:flex-start}
}

/* The opening card is motion; honour the user's setting and skip it entirely. */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}

@media (max-width:640px){
  /* Card padding shrinks on phones, so the art bleed has to match it. */
  .title-art{margin:-32px -24px 22px}
}

@media (prefers-reduced-motion:reduce){
  .title-card:hover .title-art img{transform:none}
}

@media (max-width:640px){
  /* Measured at 390px: nine single-column square posters made the slate 8.1
     screens of a 23-screen page and pushed Contact to screen 20.6. Two-up more
     than halves that. The posters carry large title type, so they stay legible
     at ~174px - this is how a streaming catalogue is browsed anyway. */
  .title-grid{grid-template-columns:repeat(2,1fr)}
  .title-card{padding:20px 14px}
  .title-art{margin:-20px -14px 14px}
  .title-name{font-size:1.28rem}
  .title-index{font-size:.9rem}
}

@media (max-width:520px){
  /* A 165px card cannot carry a logline, a "Co-produced" tag, a platform AND a
     per-title co-producer credit without stacking into a mess. The section lede
     already says all nine are co-productions with Ayaan Singh as Co-Producer, so
     the card keeps what is unique to it: the key art, the title, the platform
     and the link. The full logline lives on the linked show page. */
  .title-desc,
  .title-tag,
  .title-credit{display:none}
  .title-card{padding:16px 12px}
  .title-art{margin:-16px -12px 12px}
  .title-meta{margin-bottom:8px}
  .title-plat{font-size:.62rem;letter-spacing:.14em}
  .title-name{font-size:1.12rem;line-height:1.28;margin-bottom:12px}
  .title-index{font-size:.8rem;margin-bottom:6px}
  .title-link{font-size:.7rem;letter-spacing:.1em}
}

/* ============================================================
   ADDED 2026-08-25 - UX pass (A1, A2, A5, A6, A12)
   ============================================================ */

/* ---------- A1: anchors were landing 82px under the fixed nav ----------
   .nav is position:fixed and .nav-inner is 82px tall, html has
   scroll-behavior:smooth, and nothing declared scroll-margin-top. All 21
   in-page links (7 nav, 7 drawer, 7 footer) buried the target's eyebrow and
   the top of its <h2>. 82px of nav + 16px of breathing room. */
.section,.hero,#main{scroll-margin-top:98px}

/* ---------- A6: the skip link parks focus on <main>; without this the
   global :focus-visible ring draws a gold box around the whole page. ---------- */
main:focus{outline:none}

/* ---------- A5: every hover below had no focus counterpart, so a keyboard
   user got the generic ring and none of the state language. ---------- */
.nav-links a:focus-visible{color:var(--gold)}
.nav-links a:focus-visible::after{width:100%}
.nav-links .nav-cta:focus-visible{background:rgba(201,162,77,.12)}
.btn-gold:focus-visible{transform:translateY(-2px);box-shadow:0 12px 34px rgba(201,162,77,.3);background-position:100% 0}
.btn-ghost:focus-visible{background:rgba(201,162,77,.1);transform:translateY(-2px)}
.footer-nav a:focus-visible{color:var(--gold)}
.mobile-nav a:focus-visible{color:var(--gold)}
/* .cap, .ad-card and .title-card are <article>s - they never take focus
   themselves, so :focus-within on the card is the honest counterpart to
   :hover when focus lands on a link inside it. */
.cap:focus-within{background:#15151C}
.ad-card:focus-within{border-color:rgba(212,177,92,.4);transform:translateY(-3px)}
.title-card:focus-within{background:#101017}
.title-card:focus-within .title-art img{transform:scale(1.045);opacity:1}

/* ---------- A12: nothing on the site had a pressed state ---------- */
.btn:active,
.nav-links .nav-cta:active,
.title-link:active,
.ad-films a:active,
.nav-toggle:active{transform:translateY(1px);opacity:.86}
.btn-gold:active{box-shadow:0 4px 12px rgba(201,162,77,.22)}

/* ---------- A2: the contact form's success and failure states ----------
   Email and Phone are both "To be confirmed", so this form is the whole
   conversion path. Both states name the studio address so a visitor whose
   message failed is never left without a way to reach anyone. */
.form-done{
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;min-height:340px;
}
.form-done:focus{outline:none}
.form-done .eyebrow{margin-bottom:16px}
.form-done-title{
  font-family:var(--serif);font-size:1.9rem;line-height:1.15;font-weight:500;
  color:var(--paper);margin:0 0 16px;
}
.form-done-note{font-size:.86rem;color:var(--muted);margin:0}
.form-error{
  margin:18px 0 0;padding:13px 15px;font-size:.84rem;line-height:1.65;
  color:var(--gold-hi);background:rgba(201,162,77,.08);
  border:1px solid rgba(212,177,92,.45);border-left-width:3px;
}
.btn[disabled]{cursor:progress;opacity:.7}
.btn[disabled]:active{transform:none}

@media (prefers-reduced-motion:reduce){
  /* A12: a press that moves is motion. The duration override above cannot
     help here - these transforms apply instantly. */
  .btn:active,
  .nav-links .nav-cta:active,
  .title-link:active,
  .ad-films a:active,
  .nav-toggle:active{transform:none}
  .btn-gold:focus-visible,.btn-ghost:focus-visible{transform:none}
  .ad-card:focus-within{transform:none}
  .title-card:focus-within .title-art img{transform:none}
}


/* ============================================================
   ADDED 2026-08-28 -- "less startup, more house" pass (C1/D1/A2)
   ============================================================ */

/* ---------- C1: Our Story ---------- */
/* A narrative beat, so it reads as a column of prose rather than a grid cell. */
/* Narrow measure for prose, but the section must still start on the page's left
   edge. Constrain the CHILDREN, not the .wrap: overriding the wrap's own
   max-width/margin either centred the block ~280px right of every other
   section, or (with margin-left:0) dropped its text to x=28 while the rest of
   the page sits at x=60, because .wrap's centring and its 28px padding both
   feed that edge. */
.story-inner > *{max-width:760px}
.story .story-lede{
  font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.42;color:#D8D3C8;margin-bottom:26px;
}
.story-inner p:last-child{margin-bottom:0}

/* ---------- D1: section eyebrows get an editorial rule ---------- */
/* The hero eyebrow is centred and sits under the lockup, so it keeps the plain
   treatment -- a rule beside it reads as a stray line there. */
.section .eyebrow{
  display:flex;align-items:center;gap:14px;letter-spacing:.3em;
}
.section .eyebrow::before{
  content:"";flex:0 0 auto;width:30px;height:1px;background:var(--gold);opacity:.75;
}

/* ---------- A2: the lockup settles instead of fading ---------- */
/* .reveal already handles the wrapper's opacity; this animates the mark itself
   once it lands. Fill mode "both" means the reduced-motion duration override
   snaps straight to the end state instead of leaving it blurred. */
@keyframes lockup-settle{
  from{transform:scale(.94);filter:blur(7px) drop-shadow(0 18px 44px rgba(201,162,77,0))}
  to  {transform:none;     filter:blur(0)    drop-shadow(0 18px 44px rgba(201,162,77,.16))}
}
.hero-logo.in img{animation:lockup-settle 1.25s var(--ease) both}

@media (max-width:640px){
  .section .eyebrow{gap:10px}
  .section .eyebrow::before{width:20px}
}

/* ---------- contact form offline notice (2026-08-29) ---------- */
/* Sits where the enquiry form was. Reads as a deliberate statement rather than
   a broken control, so nobody types an enquiry that has nowhere to go. */
.contact-pending{
  border:1px solid var(--line);border-left:2px solid var(--gold);
  background:rgba(201,162,77,.04);padding:28px 30px;border-radius:2px;
}
.contact-pending p{color:var(--muted);margin:0 0 12px}
.contact-pending p:last-child{margin-bottom:0}
.contact-pending strong{color:#D8D3C8;font-weight:500}
@media (max-width:640px){ .contact-pending{padding:22px 20px} }

/* ============================================================
   ADDED 2026-08-29 — user-friendliness pass (external review R1)
   ============================================================ */

/* ---------- #2 Capabilities: progressive disclosure ---------- */
/* The section was 3.7 mobile screens, the largest on the page, because six
   disciplines each showed a paragraph plus four bullets permanently. On phones
   the bullets now sit behind a tap. Desktop is unchanged: the override below
   defeats the UA rule that hides a closed <details>' children, so the full grid
   still renders and nothing is hidden from a visitor on a large screen. */
.cap > summary{
  display:flex;align-items:baseline;gap:14px;cursor:pointer;list-style:none;
  padding:2px 0;
}
.cap > summary::-webkit-details-marker{display:none}
.cap > summary h3{margin:0}
.cap > summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease);
}
.cap[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.cap > summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

@media (min-width:769px){
  /* Desktop shows everything: no disclosure, no chevron, no pointer affordance. */
  .cap:not([open]) > p,
  .cap:not([open]) > ul{display:block}
  .cap > summary{cursor:default}
  .cap > summary::after{display:none}
}
@media (max-width:768px){
  .cap > p{margin-top:14px}
}

/* ---------- #3 Hero: earn the first viewport ---------- */
/* The first screen was spending most of its height on the lockup and padding,
   pushing the proposition and the buttons below the fold. Nothing is removed,
   it is just sized so brand + headline + lede + both actions land together. */
.hero{padding-top:104px}
.hero-logo{margin-bottom:22px}
.hero-logo img{width:clamp(150px,16vw,215px)}
.hero-lede{margin-bottom:28px}
@media (max-width:768px){
  /* Measured: at 390x844 the buttons were landing at 846px, two pixels below the
     fold, which is the same as being nowhere. Trimmed with room to spare so the
     primary action is reachable without a scroll on a common phone. */
  .hero{padding:84px 0 24px}
  .hero-logo img{width:min(42vw,164px)}
  .hero-logo{margin-bottom:16px}
  .hero-lede{margin-bottom:20px;font-size:1rem}
  .hero-title{font-size:clamp(2rem,8.5vw,2.6rem)}
}

/* ---------- #6 Section rhythm: whitespace that reads as intent ---------- */
/* Stacked head+tail padding was running to ~280px between sections, which reads
   as an accidental gap rather than composure - the reviewer picked the Studio
   section out by eye before seeing any measurement. */
.section{padding:clamp(56px,7vw,96px) 0}
@media (max-width:768px){
  .section{padding:48px 0}
}

/* ---------- #5 Slate: say the shared facts once ---------- */
.slate-proof{
  font-size:.92rem;color:var(--muted);margin:-18px 0 34px;
  padding-bottom:20px;border-bottom:1px solid var(--line-soft);
}
.slate-proof strong{color:#D8D3C8;font-weight:500}

/* ---------- #1 Proof strip ---------- */
/* Answers "what have you actually made" before the visitor has to scroll for it. */
.proofbar{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink);
}
.proofbar-inner{
  display:flex;flex-wrap:wrap;gap:14px 48px;
  padding-top:20px;padding-bottom:20px;
}
.proofbar p{
  margin:0;font-size:.9rem;color:var(--muted);
  letter-spacing:.02em;
}
.proofbar strong{
  color:var(--gold);font-weight:600;font-family:var(--sans);
  letter-spacing:.06em;
}
@media (max-width:640px){
  .proofbar-inner{gap:8px 0;flex-direction:column}
  .proofbar p{font-size:.85rem}
}

/* The seam rule follows the hero; the proof strip now sits there, so the section
   after it takes the normal rhythm rather than the shortened one. */
.proofbar + .section{padding-top:clamp(56px,7vw,96px)}

/* ---------- #10 AI films are concept studies, not client credits ---------- */
.ad-status{
  display:inline-block;font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,162,77,.4);border-radius:2px;
  padding:3px 8px;margin-bottom:12px;
}

/* ============================================================
   External review R2
   ============================================================ */

/* ---------- R2#1 Mobile headline hierarchy ---------- */
/* Verified before changing: desktop is 112px h1 against a 20px lede, a 5.6x
   ratio, so the hierarchy there was never the problem. On a phone the R1 pass
   had cut it to 33px against 16px - only 2.06x - which is why the first screen
   stopped telling the eye where to start. Restored on mobile only. */
@media (max-width:768px){
  .hero-title{font-size:clamp(2.5rem,11.8vw,3.3rem);line-height:.98}
}

/* ---------- R2#6 One primary action ---------- */
/* The secondary was a second button-shaped object competing with the first. */
.hero-secondary{
  display:inline-flex;align-items:center;gap:.4em;min-height:44px;
  font-family:var(--sans);font-size:.9rem;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;transition:color .25s;
}
.hero-secondary:hover,.hero-secondary:focus-visible{color:var(--gold)}
.hero-actions{align-items:center;gap:26px}

/* ---------- R2#4 Slate: keep the evidence, tighten the reading ---------- */
/* The reviewer was right that the slate should NOT be compressed - it is the
   evidence people came to check. Only the synopsis is clamped, so the posters
   carry more of the work and the cards scan at an even height. */
/* Scoped above 520px on purpose. A rule further up already HIDES the synopsis on
   phones at or below 520px, because a 166px card cannot carry a logline as well as
   key art, title and link - that was decided from measurement, and it is the better
   call. Clamping unscoped silently un-hid it and grew the slate 2.6 -> 3.2 screens. */
@media (min-width:521px){
  .title-desc{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}
@media (min-width:521px) and (max-width:900px){
  .title-desc{-webkit-line-clamp:3}
}

/* ---------- desktop hero: keep the 112px headline AND the CTA above the fold ----- */
/* At 1440x900 the actions were landing at 924px. The headline is the hierarchy the
   review asked for, so the height came out of padding and the lockup instead. */
@media (min-width:769px){
  .hero{padding-top:84px}
  .hero-logo img{width:clamp(140px,13vw,186px)}
  .hero-logo{margin-bottom:18px}
  .hero-lede{margin-bottom:22px}
}

/* ---------- R2#5 Leadership: credibility first, biography on request ---------- */
.founder-lead{color:#D8D3C8;font-size:1.02rem;line-height:1.6}
.founder-bio{margin:6px 0 22px}
.founder-bio > summary{
  display:inline-flex;align-items:center;gap:.5em;min-height:44px;cursor:pointer;
  list-style:none;font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.founder-bio > summary::-webkit-details-marker{display:none}
.founder-bio > summary::after{
  content:"";width:7px;height:7px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease);
}
.founder-bio[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.founder-bio > summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.founder-bio p{margin-top:14px}

/* ---------- short viewports: the hero was sized for height it does not have ----- */
/* The hero adapted to WIDTH but not to viewport HEIGHT, so on common laptop sizes
   (1366x768, 1280x800) and short phones (360x780) the primary action still fell
   below the fold. Measured before/after at each. The headline stays dominant -
   at 88px against a 20px lede it is still a 4.4x ratio - the height comes out of
   padding and the lockup, which are decoration, not hierarchy. */
@media (max-height:820px){
  .hero{padding-top:56px}
  .hero-logo{margin-bottom:12px}
  .hero-logo img{width:clamp(112px,10vw,144px)}
  .hero-lede{margin-bottom:16px}
  .hero-title{font-size:clamp(2.4rem,5.4vw,5.5rem)}
}
@media (max-height:720px){
  /* The header already carries the lockup; a second one is not worth the fold. */
  .hero-logo{display:none}
  .hero{padding-top:104px}
}

/* ---------- R3: AI Films is concept work, weighted accordingly ---------- */
/* At 2.1 mobile screens the generative studies carried nearly the weight of the
   2.6-screen real portfolio, which is the wrong trust hierarchy. The section now
   sits below Leadership and is denser: more cards per row, less padding, smaller
   type. The CONCEPT FILM label stays prominent so nothing here reads as a client
   credit. */
@media (min-width:641px){
  .ad-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
}
.ad-card{padding:22px 20px}
.ad-brand{font-size:1.15rem;margin-bottom:8px}
.ad-count{font-size:.68rem}
.ad-films{margin-top:10px}
.ad-films li{margin-bottom:4px}
@media (max-width:640px){
  .ad-grid{grid-template-columns:1fr 1fr;gap:12px}
  .ad-card{padding:16px 14px}
  .ad-brand{font-size:1rem}
  .ad-status{font-size:.55rem;padding:2px 6px;margin-bottom:8px}
}

/* ---------- the two empty bands Ayush circled (2026-08-29) ---------- */
/* Root cause: .hero forced min-height:100svh and centred its content, so on any
   viewport taller than the content the leftover split into TWO symmetric voids -
   measured 236/176px at 768x1024, 286/242 at 820x1180, 353/309 at 1024x1366.
   Compressing the hero in the review rounds made it WORSE, because less content
   means more leftover to pool. He circled the top band and the bottom band.
   The hero is now sized by its content at every width; the vertical breathing
   room is bounded padding that cannot grow with the viewport. */
.hero{
  min-height:0;
  align-items:flex-start;
  padding:clamp(88px,10vh,124px) 0 clamp(34px,4.5vh,56px);
}
@media (max-width:768px){
  .hero{padding:84px 0 26px}
}
@media (max-height:820px){
  .hero{padding-top:clamp(64px,8vh,88px)}
}
@media (max-height:720px){
  .hero-logo{display:none}
  .hero{padding-top:96px}
}

/* ---------- real contact details, 2026-08-29 ---------- */
.contact-list a{color:#D8D3C8;text-decoration:none;border-bottom:1px solid rgba(201,162,77,.35);transition:color .25s,border-color .25s}
.contact-list a:hover,.contact-list a:focus-visible{color:var(--gold);border-color:var(--gold)}
.contact-list dd a{display:inline-flex;align-items:center;min-height:44px}

.contact-direct{
  border:1px solid var(--line);border-left:2px solid var(--gold);
  background:rgba(201,162,77,.04);padding:32px 30px;border-radius:2px;
}
.contact-direct-lead{color:#D8D3C8;font-size:1.05rem;margin:0 0 22px}
.contact-direct-alt{margin:18px 0 0;font-size:.92rem;color:var(--muted)}
.contact-direct-alt a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,77,.4)}
.contact-direct-alt a:hover{border-color:var(--gold)}
@media (max-width:640px){ .contact-direct{padding:24px 20px} }

/* ---------- showreel (2026-08-29) ---------- */
/* preload="none" on purpose: a 9.7MB file must not download for every visitor who
   never presses play, especially on Indian mobile data. */
.reel{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#000}
.reel-video{display:block;width:100%;height:auto;background:#000}
.reel-play{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(180deg,rgba(7,7,10,.30),rgba(7,7,10,.62));
  border:0;cursor:pointer;color:var(--cream,#F3EFE6);transition:background .3s var(--ease);
}
.reel-play:hover,.reel-play:focus-visible{background:linear-gradient(180deg,rgba(7,7,10,.18),rgba(7,7,10,.52))}
.reel-play:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.reel-play[hidden]{display:none}
.reel-play-icon{
  width:84px;height:84px;border-radius:50%;border:1px solid rgba(201,162,77,.7);
  background:rgba(7,7,10,.45);position:relative;transition:transform .3s var(--ease),background .3s
}
.reel-play-icon::after{
  content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:15px 0 15px 25px;
  border-color:transparent transparent transparent var(--gold);
}
.reel-play:hover .reel-play-icon{transform:scale(1.06);background:rgba(201,162,77,.14)}
.reel-play-label{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;color:#F3EFE6;
}
.reel-play-dur{color:var(--muted-2);letter-spacing:.14em}
.reel-share{margin-top:22px;font-size:.9rem;color:var(--muted)}
.reel-share a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,162,77,.4)}
.reel-share a:hover{border-color:var(--gold)}
@media (max-width:640px){
  .reel-play-icon{width:64px;height:64px}
  .reel-play-icon::after{border-width:12px 0 12px 20px}
  .reel-play-label{font-size:.68rem;letter-spacing:.16em;flex-direction:column;gap:6px;text-align:center}
}

/* ---------- standalone share page (showreel.html) ---------- */
.share-page{min-height:100svh;display:flex;align-items:center}
.share-wrap{max-width:1080px;text-align:center}
.share-brand{display:inline-block;margin-bottom:26px}
.share-brand img{width:min(200px,42vw);height:auto}
.share-title{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4rem);margin:0 0 14px;color:#F3EFE6}
.share-sub{color:var(--muted);margin:0 0 38px;line-height:1.7}
.share-links{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;margin:32px 0 0}
.share-alt{color:var(--muted);text-decoration:none;font-family:var(--sans);font-size:.9rem;
  display:inline-flex;align-items:center;min-height:44px;transition:color .25s}
.share-alt:hover,.share-alt:focus-visible{color:var(--gold)}
.share-legal{margin-top:34px;font-size:.78rem;color:var(--muted-2)}