/* ========================================================================
   DDP Retro Production Studio Theme
   Vintage film studio x editorial comic book. Built as a visual layer over
   the original site so the media, interactions and content remain intact.
   ======================================================================== */

:root{
  --ink:#171410;
  --ink-2:#242019;
  --ink-3:#302a22;
  --paper:#f1e6cc;
  --paper-2:#f8f0dc;
  --yellow:#e7b535;
  --brick:#bd4635;
  --teal:#2e7474;
  --orange:#d97835;
  --on-ink:#f6ecd5;
  --on-ink-dim:rgba(246,236,213,.72);
  --on-paper:#171410;
  --on-paper-dim:rgba(23,20,16,.67);
  --rule:rgba(246,236,213,.22);
  --rule-paper:rgba(23,20,16,.28);
  --retro-shadow:6px 6px 0 var(--ink);
  --retro-shadow-sm:3px 3px 0 var(--ink);
}

html{background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,20,16,.075) 1px, transparent 0);
  background-size:8px 8px;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.14;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.02) 1px 2px,transparent 2px 4px);
  mix-blend-mode:multiply;
}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--brick);outline-offset:4px;border-radius:0}

/* --- type --- */
.display{
  color:var(--ink);
  letter-spacing:.008em;
  text-shadow:1px 1px 0 rgba(255,255,255,.16);
}
.display .hi{color:var(--brick)}
.accent,.display .hi{
  font-family:"Anton",Impact,sans-serif;
  font-style:normal;
}
.mark{
  font-family:"DM Sans",ui-monospace,monospace;
  font-size:.68rem;
  font-weight:700;
  color:rgba(23,20,16,.68);
  letter-spacing:.17em;
}
.mark .num{color:var(--brick)}
.dot{background:var(--brick)}

/* --- production header --- */
header{
  background:rgba(241,230,204,.95);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ink);
  box-shadow:0 2px 0 rgba(23,20,16,.16);
}
.nav{height:72px}
.logo{color:var(--ink);font-size:2.25rem;letter-spacing:.03em}
.logo .wordmark{color:rgba(23,20,16,.65);font-weight:700}
.navlinks{gap:.6rem}
.navlinks a{
  color:var(--ink);
  padding:.38rem .58rem;
  border:1px solid transparent;
  font-weight:700;
}
.navlinks a:hover{border-color:var(--ink);background:var(--yellow)}
.navlinks a[aria-current="page"]{
  color:var(--paper-2);background:var(--ink);border-color:var(--ink);
}
.navlinks a[aria-current="page"]::after{display:none}
.nav-cta{
  color:var(--ink);border:2px solid var(--ink);background:var(--yellow);
  box-shadow:var(--retro-shadow-sm);font-weight:800;
}
.nav-cta:hover{background:var(--brick);color:var(--paper-2);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.burger span{background:var(--ink)}
.mobilenav{
  background:var(--yellow);color:var(--ink);
  background-image:radial-gradient(circle,rgba(23,20,16,.18) 1.2px,transparent 1.3px);
  background-size:9px 9px;
}
.mobilenav a{color:var(--ink);text-shadow:2px 2px 0 var(--paper-2)}
.mobilenav a:hover{color:var(--brick)}

/* --- global section rhythm --- */
main>section{position:relative;border-bottom:3px solid var(--ink)}
main>section:not(.hero):not(.talent-sec):not(#process):not(.marquee-sec){
  background:var(--paper-2);color:var(--ink);
}
main>section:nth-of-type(even):not(.hero):not(.talent-sec):not(#process):not(.marquee-sec){
  background:var(--paper);
}
.on-paper{background:var(--paper)!important;color:var(--ink)!important}
.on-paper .mark{color:rgba(23,20,16,.66)}
.on-paper .mark .num{color:var(--brick)}
.on-paper .display .hi{color:var(--teal)}
.sechead{position:relative;align-items:flex-start}
.sechead::after{
  content:"";height:12px;flex:1;min-width:80px;margin-top:.62rem;
  border-block:2px solid var(--ink);
  background:repeating-linear-gradient(135deg,var(--yellow) 0 8px,var(--paper-2) 8px 16px);
}
.sechead .mark{
  border:2px solid var(--ink);padding:.35rem .55rem;background:var(--yellow);color:var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.sechead .mark .num{color:var(--ink)}

/* --- hero splash page --- */
.hero.split{
  background:var(--paper-2);
  color:var(--ink);
  padding-top:72px;
  border-bottom:4px solid var(--ink);
  min-height:100svh;
}
.hero-bg{background:var(--paper-2)}
.hero-bg::before{
  content:"";position:absolute;width:min(66vw,900px);aspect-ratio:1;border-radius:50%;right:-14vw;top:7%;
  background:
    repeating-conic-gradient(from -12deg,var(--yellow) 0 7deg,var(--paper-2) 7deg 14deg);
  border:3px solid var(--ink);opacity:.78;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 83% 35%,rgba(23,20,16,.19) 1.2px,transparent 1.5px);
  background-size:10px 10px;
  mask-image:linear-gradient(90deg,transparent 40%,#000 75%);
  opacity:.38;
}
.hero.split .hero-inner{grid-template-columns:minmax(0,1.05fr) minmax(290px,.72fr);gap:clamp(34px,6vw,86px);align-items:center}
.hero.split h1{font-size:clamp(3.2rem,7.8vw,7.4rem);max-width:10.5ch;line-height:.89}
.hero.split h1 .reveal-line:nth-child(2){color:var(--brick)}
.hero-sub{color:rgba(23,20,16,.76);font-weight:500}
.hero-meta{border-top:3px solid var(--ink);padding-top:1rem}
.hero .mark{color:rgba(23,20,16,.7)}
.hero .mark .num{color:var(--brick)}
.hero .mark.fade-up{
  display:inline-block;background:var(--teal);color:var(--paper-2);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.45rem .65rem;
}
.hero .mark.fade-up .num{color:var(--paper-2)}
.playbtn{
  color:var(--ink);background:var(--yellow);border:2px solid var(--ink);
  padding:.66rem 1rem .66rem .7rem;box-shadow:var(--retro-shadow-sm);
}
.playbtn:hover{color:var(--ink);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.playbtn .tri{width:34px;height:34px;border:2px solid var(--ink);border-radius:0;background:var(--paper-2)}
.playbtn .tri::before{border-left-color:var(--ink)}
.playbtn:hover .tri{background:var(--brick);transform:none}
.playbtn:hover .tri::before{border-left-color:var(--paper-2)}

.reelframe{
  overflow:visible;background:var(--ink);border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--brick);transform:rotate(1.15deg);
  max-width:510px;
}
.reelframe::before{
  content:"";position:absolute;z-index:6;left:-4px;right:-4px;top:-24px;height:20px;
  border:4px solid var(--ink);border-bottom:0;
  background:repeating-linear-gradient(-45deg,var(--paper-2) 0 18px,var(--ink) 18px 36px);
}
.reelframe::after{
  content:"TAKE 00 / DUBAI";position:absolute;z-index:7;right:-20px;top:8%;
  background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font:.72rem/1 "DM Sans",sans-serif;font-weight:800;letter-spacing:.14em;padding:.55rem .7rem;transform:rotate(4deg);
}
.reelframe video{filter:saturate(.9) contrast(1.03)}
.reelframe .rf-edge{box-shadow:inset 0 -90px 90px -55px rgba(0,0,0,.8)}
.soundbtn,.reelcap{background:var(--paper-2);color:var(--ink);border:2px solid var(--ink);backdrop-filter:none}
.soundbtn:hover{color:var(--brick);border-color:var(--ink)}
.reelcap{padding:.28rem .45rem;bottom:12px}

/* --- service strips / production call sheets --- */
.pillars{border-top:3px solid var(--ink)}
.pillar{
  grid-template-columns:4.5rem minmax(0,14rem) minmax(0,1fr);
  border-bottom:2px solid var(--ink);max-width:none;padding-inline:.6rem;
}
.pillar::before{width:10px;background:var(--brick)}
.pillar:hover{background:var(--yellow)}
.pillar .idx{color:var(--brick);font-size:1.45rem}
.pillar h3{color:var(--ink)}
.pillar p{color:rgba(23,20,16,.7)}

/* --- comic/contact-sheet media cards --- */
.grid-work{gap:clamp(20px,2.4vw,34px)}
.mcard,.card{
  border:3px solid var(--ink);background:var(--paper-2);overflow:visible;
  box-shadow:var(--retro-shadow);transition:transform .25s ease,box-shadow .25s ease;
}
.grid-work>.mcard:nth-child(3n+1){transform:rotate(-.35deg)}
.grid-work>.mcard:nth-child(3n+2){transform:rotate(.25deg)}
.grid-work>.mcard:nth-child(3n){transform:rotate(-.16deg)}
.mcard:hover,.card:hover{transform:translate(3px,3px)!important;box-shadow:2px 2px 0 var(--ink)}
.mcard .frame{border-bottom:3px solid var(--ink);background:var(--ink)}
.mcard .frame::before{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.14;
  background:radial-gradient(circle,rgba(255,255,255,.9) .7px,transparent .9px);background-size:5px 5px;mix-blend-mode:soft-light;
}
.mcard .frame::after{background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.84) 100%)}
.mcard .meta{padding:clamp(14px,1.8vw,23px)}
.mcard .meta h3{font-size:clamp(1.18rem,2.2vw,1.9rem);text-shadow:1px 1px 0 #000}
.mcard .meta .mark{color:rgba(246,236,213,.76)}
.mcard .meta .mark .num{color:var(--yellow)}
.mcard .ctx{color:rgba(246,236,213,.8)}
.mcard .cta{border-radius:0;border:2px solid var(--paper-2);background:var(--brick);opacity:1;transform:none}
.mcard:hover .cta{background:var(--yellow)}
.mcard .stills{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);backdrop-filter:none}
.mcard .stills:hover{color:var(--paper-2);background:var(--brick);border-color:var(--ink)}
.link-cta{color:var(--ink);font-weight:800;border-bottom:3px solid var(--brick)}
.link-cta::after{background:var(--brick)}

/* --- process as dark film strip --- */
#process,.talent-sec,.marquee-sec{
  background:var(--ink)!important;color:var(--paper-2)!important;
  background-image:radial-gradient(circle at 1px 1px,rgba(246,236,213,.075) 1px,transparent 0);
  background-size:8px 8px;
}
#process .display,.talent-sec .display,.marquee-sec .display{color:var(--paper-2)}
#process .display .hi,.talent-sec .display .hi{color:var(--yellow)}
#process .mark,.talent-sec .mark{color:rgba(246,236,213,.7)}
#process .sechead::after,.talent-sec .sechead::after{border-color:var(--paper-2);background:repeating-linear-gradient(135deg,var(--brick) 0 8px,var(--ink) 8px 16px)}
#process .sechead .mark,.talent-sec .sechead .mark{background:var(--yellow);color:var(--ink);border-color:var(--paper-2);box-shadow:2px 2px 0 var(--paper-2)}
.steps{border-top:3px solid var(--paper-2)}
.step{border-bottom:2px solid rgba(246,236,213,.45);padding-block:clamp(18px,2.8vw,34px)}
.step .k{color:var(--yellow);font-family:"Anton",sans-serif;font-size:1.5rem}
.step h3{color:var(--paper-2)}
.step p{color:rgba(246,236,213,.72)}

/* --- talent / dossier cards --- */
.talent-grid{gap:12px;background:transparent;border:0}
.tcell{background:var(--paper);color:var(--ink);border:3px solid var(--paper-2);box-shadow:5px 5px 0 var(--brick)}
.tcell .n{color:var(--brick)}
.tcell h3{color:var(--ink)}
.tcell p{color:rgba(23,20,16,.72)}
.namedrow{gap:.7rem}
.namechip{background:var(--yellow);color:var(--ink);border:2px solid var(--paper-2);box-shadow:2px 2px 0 var(--paper-2)}
.namechip strong{color:var(--ink)}

/* --- NDA / production notes --- */
.ndalist{background:transparent;border:3px solid var(--ink);gap:0;box-shadow:var(--retro-shadow-sm)}
.ndarow{background:var(--paper-2);border-bottom:2px solid var(--ink)}
.ndarow:last-child{border-bottom:0}
.ndarow .cat{color:var(--brick)}
.ndarow p{color:rgba(23,20,16,.72)}
.ndarow .withheld{color:var(--teal)}
.ndanote{border-top:3px solid var(--ink)}
.ndanote .lead{color:var(--brick);font-weight:800}
.ndanote p,.on-paper .ndanote p{color:rgba(23,20,16,.72)}
.gridnote{border:2px solid var(--ink);background:var(--yellow);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.gridnote b{color:var(--brick)}

/* --- buttons / chips --- */
.btn,.submit{
  background:var(--yellow);color:var(--ink)!important;border:2px solid var(--ink)!important;
  box-shadow:var(--retro-shadow-sm);border-radius:0!important;font-weight:800;
}
.btn:hover,.submit:hover,.on-paper .btn:hover{
  background:var(--brick);color:var(--paper-2)!important;border-color:var(--ink)!important;
  transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);
}
.btn.ghost{background:var(--paper-2);color:var(--ink)!important}
.chips{gap:.65rem}
.chip{border:2px solid var(--ink);color:var(--ink);background:var(--paper-2);box-shadow:2px 2px 0 var(--ink)}
.chip:hover,.chip[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

/* --- form = old production order sheet --- */
.form{
  border:3px solid var(--ink);padding:clamp(20px,3vw,36px);background:var(--paper-2);box-shadow:var(--retro-shadow);
  position:relative;
}
.form::before{
  content:"PRODUCTION REQUEST / DDP";display:block;margin:-.2rem 0 1.4rem;font-size:.68rem;letter-spacing:.18em;font-weight:800;
  border-bottom:3px solid var(--ink);padding-bottom:.65rem;
}
.field label{color:var(--ink);font-weight:800}
.field input,.field textarea,.field select{background:rgba(255,255,255,.2);border:0;border-bottom:2px solid var(--ink);color:var(--ink);border-radius:0}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brick);box-shadow:none}

/* --- instagram = contact sheet --- */
.ig{background:var(--paper-2)!important}
.ig-head h2{color:var(--ink)}
.ig-head p{color:rgba(23,20,16,.68)}
.behold-grid{gap:14px}
.behold-grid a{border:3px solid var(--ink);box-shadow:var(--retro-shadow-sm);background:var(--paper)}
.behold-grid img{filter:saturate(.9) contrast(1.03)}

/* --- about marquee / strips --- */
.marquee{border-block:3px solid var(--paper-2);background:var(--brick);color:var(--paper-2)}
.marquee .track{font-family:"Anton",sans-serif;text-transform:uppercase}

/* --- lightboxes --- */
.lightbox,.gv{background:rgba(23,20,16,.97)}
.lightbox .close,.gv .close{border:2px solid var(--paper-2);border-radius:0;background:var(--brick);color:var(--paper-2);box-shadow:3px 3px 0 var(--paper-2)}
.lightbox .close:hover,.gv .close:hover{border-color:var(--paper-2);color:var(--ink);background:var(--yellow)}
.gv .gv-head h3{color:var(--paper-2)}
.gv .gv-grid img{border:2px solid var(--paper-2)}

/* --- WhatsApp / footer --- */
.wa{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.wa:hover{background:var(--brick);color:var(--paper-2);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
footer{
  background:var(--brick);color:var(--paper-2);border-top:4px solid var(--ink);padding-top:clamp(32px,5vw,68px);
  background-image:radial-gradient(circle at 1px 1px,rgba(23,20,16,.16) 1.2px,transparent 0);background-size:9px 9px;
}
.end-title{
  font-family:"Anton",Impact,sans-serif;font-size:clamp(4rem,13vw,11rem);line-height:.78;text-transform:uppercase;
  color:var(--paper-2);-webkit-text-stroke:2px var(--ink);text-shadow:7px 7px 0 var(--ink);padding-bottom:clamp(30px,5vw,60px);
}
.footrow{border-top:3px solid var(--ink);color:var(--paper-2);padding-block:1.1rem;font-weight:700}
footer .dot{background:var(--yellow)}

/* --- utility tweaks for pages that start with a plain section --- */
main>section:first-child:not(.hero){padding-top:calc(72px + clamp(54px,8vw,108px))!important}
main>section:first-child:not(.hero) .display{color:var(--ink)}
main>section:first-child:not(.hero) .mark .num{color:var(--brick)}
main>section:first-child:not(.hero)::before{
  content:"";position:absolute;right:var(--gut);top:calc(72px + 22px);width:130px;height:130px;border-radius:50%;z-index:0;opacity:.55;
  background:repeating-conic-gradient(var(--yellow) 0 12deg,transparent 12deg 24deg);
}
main>section:first-child:not(.hero)>.wrap{position:relative;z-index:1}

/* cards used on AI page */
.card{background:var(--paper-2);color:var(--ink)}
.card figcaption{background:var(--paper-2);color:var(--ink);border-top:3px solid var(--ink)}
.card h3{color:var(--ink)}
.card .ctx{color:rgba(23,20,16,.68)}
.pv-badge{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}

/* --- mobile --- */
@media(max-width:900px){
  .hero.split{padding-top:96px}
  .hero.split .hero-inner{grid-template-columns:1fr;gap:38px}
  .hero.split h1{font-size:clamp(3rem,15vw,5.1rem);max-width:8.8ch}
  .reelframe{max-width:360px;order:0;transform:rotate(.6deg);box-shadow:7px 7px 0 var(--brick)}
  .hero-bg::before{width:92vw;right:-38vw;top:19%}
  .pillar{grid-template-columns:3.4rem 1fr}
  .pillar p{grid-column:2}
  .grid-work>.mcard{transform:none!important}
}
@media(max-width:560px){
  .nav{height:64px}
  header{border-bottom-width:2px}
  .hero.split{padding-top:82px}
  .hero.split h1{font-size:clamp(2.75rem,16vw,4.4rem)}
  .hero-sub{font-size:.98rem}
  .hero-meta{gap:.7rem;border-top-width:2px}
  .reelframe::after{right:-8px;font-size:.58rem}
  .reelframe::before{top:-19px;height:15px}
  .sechead::after{display:none}
  .sechead .mark{order:-1}
  .tcell{box-shadow:3px 3px 0 var(--brick)}
  .end-title{text-shadow:4px 4px 0 var(--ink);-webkit-text-stroke:1px var(--ink)}
}

@media(prefers-reduced-motion:reduce){
  .reelframe,.grid-work>.mcard{transform:none!important}
}

/* cinematic hero variant used on AI & Motion */
.hero:not(.split){background:var(--ink);color:var(--paper-2);border-bottom:4px solid var(--ink)}
.hero:not(.split) .display{color:var(--paper-2);text-shadow:2px 2px 0 var(--ink)}
.hero:not(.split) .display .hi{color:var(--yellow)}
.hero:not(.split) .hero-sub{color:rgba(246,236,213,.78)}
.hero:not(.split) .mark{color:rgba(246,236,213,.72)}
.hero:not(.split) .mark .num{color:var(--yellow)}
.hero:not(.split) .hero-meta{border-top-color:rgba(246,236,213,.5)}
/* ========================================================================
   DDP Retro Studio V2 — signature motion + richer production palette
   ======================================================================== */

:root{
  --retro-blue:#4d7898;
  --retro-blue-deep:#31576f;
  --retro-orange:#df6a2e;
  --retro-yellow:#f0c347;
  --retro-red:#c73d36;
  --retro-cream:#f6ebcf;
}

/* --- richer, poppier production palette --- */
.hero-bg::before{
  background:repeating-conic-gradient(from -12deg,var(--retro-yellow) 0 7deg,var(--paper-2) 7deg 14deg);
}
.hero .mark.fade-up{background:var(--retro-blue)}
.playbtn{background:var(--retro-yellow)}
.playbtn:hover{background:var(--retro-orange)}
.playbtn:hover .tri{background:var(--retro-red)}

#studio .sechead .mark{background:var(--retro-yellow)}
#capabilities .sechead .mark{background:var(--retro-orange);color:var(--paper-2)}
#capabilities .sechead .mark .num{color:var(--paper-2)}
#work .sechead .mark{background:var(--retro-blue);color:var(--paper-2)}
#work .sechead .mark .num{color:var(--paper-2)}
#withheld .sechead .mark{background:var(--retro-yellow)}
#contact .mark .num{color:var(--retro-red)}

.pillar:nth-child(6n+1)::before{background:var(--retro-red)}
.pillar:nth-child(6n+2)::before{background:var(--retro-blue)}
.pillar:nth-child(6n+3)::before{background:var(--retro-orange)}
.pillar:nth-child(6n+4)::before{background:var(--retro-yellow)}
.pillar:nth-child(6n+5)::before{background:var(--teal)}
.pillar:nth-child(6n+6)::before{background:var(--retro-red)}
.pillar:nth-child(6n+1):hover{background:#f4c9aa}
.pillar:nth-child(6n+2):hover{background:#bfd3df}
.pillar:nth-child(6n+3):hover{background:#f0b486}
.pillar:nth-child(6n+4):hover{background:#f4da84}
.pillar:nth-child(6n+5):hover{background:#b8d3cf}
.pillar:nth-child(6n+6):hover{background:#efb0a7}

.grid-work>.mcard:nth-child(4n+1){box-shadow:7px 7px 0 var(--retro-blue)}
.grid-work>.mcard:nth-child(4n+2){box-shadow:7px 7px 0 var(--retro-orange)}
.grid-work>.mcard:nth-child(4n+3){box-shadow:7px 7px 0 var(--retro-yellow)}
.grid-work>.mcard:nth-child(4n){box-shadow:7px 7px 0 var(--retro-red)}
.grid-work>.mcard:hover{box-shadow:2px 2px 0 var(--ink)}

.tcell:nth-child(4n+1){box-shadow:6px 6px 0 var(--retro-blue)}
.tcell:nth-child(4n+2){box-shadow:6px 6px 0 var(--retro-orange)}
.tcell:nth-child(4n+3){box-shadow:6px 6px 0 var(--retro-yellow)}
.tcell:nth-child(4n){box-shadow:6px 6px 0 var(--retro-red)}

/* ------------------------------------------------------------------------
   SIGNATURE 01: Opening clapperboard
   ------------------------------------------------------------------------ */
body.intro-running{overflow:hidden}
body.intro-running header,
body.intro-running #main,
body.intro-running .wa,
body.intro-running footer{opacity:0}
body.intro-done header,
body.intro-done #main,
body.intro-done .wa,
body.intro-done footer{animation:siteReveal .58s ease both}
@keyframes siteReveal{from{opacity:0;filter:brightness(1.8)}to{opacity:1;filter:none}}

.ddp-intro{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;
  background:var(--ink);color:var(--retro-cream);
  background-image:
    radial-gradient(circle at 1px 1px,rgba(246,235,207,.10) 1px,transparent 1.3px),
    linear-gradient(135deg,rgba(77,120,152,.16),transparent 45%,rgba(223,106,46,.12));
  background-size:9px 9px,100% 100%;
}
.ddp-intro::before{
  content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(246,235,207,.028) 7px 8px);
  animation:introFlicker .22s steps(2,end) infinite;
}
@keyframes introFlicker{50%{opacity:.34}}
.ddp-intro.is-leaving{animation:introExit .52s cubic-bezier(.7,0,.25,1) forwards}
@keyframes introExit{to{opacity:0;visibility:hidden;transform:scale(1.03)}}

.intro-kicker{
  position:absolute;left:clamp(18px,3vw,44px);top:clamp(18px,3vw,36px);
  font:800 .67rem/1.4 "DM Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,235,207,.7)
}
.intro-kicker b{color:var(--retro-yellow)}
.intro-skip{
  position:absolute;right:clamp(18px,3vw,44px);top:clamp(16px,3vw,30px);z-index:4;
  border:2px solid var(--retro-cream);background:transparent;color:var(--retro-cream);
  padding:.45rem .7rem;font:800 .62rem/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--retro-red);
}
.intro-skip:hover{background:var(--retro-yellow);color:var(--ink)}

.intro-clapper{
  width:min(720px,86vw);position:relative;transform:translateY(110vh) rotate(-3deg);
  animation:clapperArrive .72s cubic-bezier(.18,.82,.22,1) .08s forwards;
  filter:drop-shadow(14px 18px 0 rgba(0,0,0,.34));
}
@keyframes clapperArrive{
  72%{transform:translateY(-3vh) rotate(1.2deg)}
  100%{transform:translateY(0) rotate(-.7deg)}
}
.clapper-arm{
  position:relative;z-index:3;height:clamp(58px,9vw,78px);border:5px solid var(--retro-cream);border-bottom-width:4px;
  transform-origin:5% 100%;transform:rotate(-14deg);overflow:hidden;
  background:repeating-linear-gradient(-48deg,var(--retro-cream) 0 42px,var(--ink) 42px 82px);
  animation:clapArm 1.08s cubic-bezier(.5,0,.2,1) .82s forwards;
}
@keyframes clapArm{
  0%,48%{transform:rotate(-14deg)}
  61%{transform:rotate(1.5deg)}
  68%,100%{transform:rotate(0)}
}
.clapper-arm::after{
  content:"DDP / TAKE 01";position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(2deg);
  background:var(--retro-orange);color:var(--ink);border:3px solid var(--ink);padding:.42rem .65rem;
  font:900 clamp(.55rem,1.3vw,.72rem)/1 "DM Sans",sans-serif;letter-spacing:.14em;
}
.clapper-slate{
  position:relative;margin-top:-4px;border:5px solid var(--retro-cream);background:var(--retro-blue-deep);padding:clamp(22px,4vw,38px);
  background-image:radial-gradient(circle at 1px 1px,rgba(246,235,207,.10) 1.1px,transparent 1.3px);background-size:8px 8px;
}
.clapper-brand{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:clamp(16px,2.5vw,24px);border-bottom:4px solid var(--retro-cream)}
.clapper-logo{font:400 clamp(4rem,13vw,8.4rem)/.72 "Anton",Impact,sans-serif;letter-spacing:.015em;text-transform:lowercase;color:var(--retro-cream)}
.ddp-rec-dot{display:inline-block;width:.19em;height:.19em;border-radius:50%;background:var(--retro-red);margin:0 0 .02em .04em;box-shadow:0 0 0 3px var(--retro-cream),0 0 18px rgba(199,61,54,.85);animation:recPulse .9s ease-in-out infinite}
@keyframes recPulse{50%{transform:scale(.82);box-shadow:0 0 0 3px var(--retro-cream),0 0 4px rgba(199,61,54,.4)}}
.clapper-production{font:900 clamp(.7rem,1.8vw,1rem)/1.3 "DM Sans",sans-serif;letter-spacing:.16em;text-align:right;text-transform:uppercase;color:var(--retro-yellow)}
.clapper-grid{display:grid;grid-template-columns:1.3fr .65fr .65fr;gap:0;margin-top:18px;border:3px solid var(--retro-cream)}
.clapper-cell{padding:clamp(10px,1.7vw,16px);border-right:3px solid var(--retro-cream);background:rgba(23,20,16,.16)}
.clapper-cell:last-child{border-right:0}
.clapper-cell span{display:block;font:800 .54rem/1.2 "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,235,207,.68);margin-bottom:5px}
.clapper-cell strong{display:block;font:400 clamp(1.05rem,3vw,1.7rem)/1 "Anton",Impact,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--retro-cream)}
.clapper-action{
  position:absolute;right:-4%;bottom:-12%;z-index:5;opacity:0;transform:scale(1.6) rotate(-10deg);
  color:var(--retro-yellow);border:5px solid var(--retro-yellow);padding:.12em .28em;
  font:400 clamp(2.8rem,9vw,6rem)/.95 "Anton",Impact,sans-serif;text-transform:uppercase;
  text-shadow:4px 4px 0 var(--retro-red);box-shadow:5px 5px 0 var(--retro-red);
  animation:actionStamp .34s cubic-bezier(.2,1.4,.3,1) 1.58s forwards;
}
@keyframes actionStamp{to{opacity:1;transform:scale(1) rotate(-5deg)}}
.intro-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:introFlash .36s ease 1.45s both}
@keyframes introFlash{0%,100%{opacity:0}35%{opacity:.94}55%{opacity:.16}}
.intro-count{
  position:absolute;bottom:clamp(18px,4vw,46px);left:50%;transform:translateX(-50%);
  font:800 .62rem/1 "DM Sans",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,235,207,.55)
}
.intro-count .red{color:var(--retro-red)}

/* ------------------------------------------------------------------------
   SIGNATURE 02: vintage loudspeaker sound control
   ------------------------------------------------------------------------ */
.soundbtn{
  min-height:46px!important;padding:.42rem .62rem!important;background:var(--retro-yellow)!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--retro-red)!important;font-weight:900!important;
}
.soundbtn:hover{background:var(--retro-blue)!important;color:var(--paper-2)!important;box-shadow:2px 2px 0 var(--retro-orange)!important}
.soundbtn .ico{width:27px!important;height:27px!important;overflow:visible}
.soundbtn .sound-wave{transform-origin:12px 12px}
.soundbtn[aria-pressed="true"] .sound-wave{animation:soundWave .85s ease-in-out infinite alternate}
@keyframes soundWave{to{transform:translateX(1px);opacity:.5}}

/* ------------------------------------------------------------------------
   SIGNATURE 03: projector lightbox / screening room
   ------------------------------------------------------------------------ */
.lightbox{
  background:#11100d!important;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(246,235,207,.08) 1px,transparent 1.2px),
    linear-gradient(145deg,rgba(77,120,152,.16),transparent 48%,rgba(223,106,46,.10));
  background-size:9px 9px,100% 100%;
  padding:clamp(18px,3vw,46px)!important;
}
.lightbox .close{z-index:20;background:var(--retro-red)!important;border:3px solid var(--retro-cream)!important;box-shadow:4px 4px 0 var(--retro-blue)!important;color:var(--retro-cream)!important}
.lightbox .close:hover{background:var(--retro-yellow)!important;color:var(--ink)!important}
.projection-stage{
  position:relative;width:min(95vw,1480px);min-height:min(78svh,820px);display:grid;
  grid-template-columns:minmax(190px,24%) minmax(0,1fr);gap:clamp(10px,2.5vw,44px);align-items:center;
}
.projector-wrap{position:relative;z-index:4;align-self:center;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.30))}
.retro-projector{position:relative;width:100%;max-width:330px;margin-inline:auto}
.retro-projector svg{display:block;width:100%;height:auto;overflow:visible}
.projector-reel{transform-box:fill-box;transform-origin:center}
.lightbox.rolling .projector-reel.reel-one{animation:reelSpin 1.15s linear infinite}
.lightbox.rolling .projector-reel.reel-two{animation:reelSpinReverse 1.35s linear infinite}
@keyframes reelSpin{to{transform:rotate(360deg)}}
@keyframes reelSpinReverse{to{transform:rotate(-360deg)}}
.projector-lamp{animation:projectorLamp 1.15s ease-in-out infinite alternate}
@keyframes projectorLamp{to{opacity:.55}}
.projector-tag{
  margin:12px auto 0;max-width:280px;border:3px solid var(--retro-cream);background:var(--retro-blue-deep);color:var(--retro-cream);
  padding:.7rem .8rem;box-shadow:5px 5px 0 var(--retro-orange);transform:rotate(-1.2deg)
}
.projector-state{display:flex;align-items:center;gap:.5rem;font:900 .58rem/1 "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--retro-yellow)}
.projector-state::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--retro-red);box-shadow:0 0 8px var(--retro-red)}
.lightbox.rolling .projector-state::before{animation:recPulse .8s ease-in-out infinite}
.projector-title{display:block;margin-top:.5rem;font:400 clamp(1.05rem,2vw,1.5rem)/1 "Anton",Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em}

.projection-beam{
  position:absolute;z-index:1;left:17%;top:24%;width:58%;height:54%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(246,235,207,.40),rgba(240,195,71,.15) 56%,rgba(246,235,207,.035));
  clip-path:polygon(0 45%,100% 1%,100% 99%,0 55%);filter:blur(3px);
  transition:opacity .42s ease .12s;mix-blend-mode:screen;
}
.lightbox.open.lit .projection-beam{opacity:.78;animation:beamFlicker .18s steps(2,end) infinite}
@keyframes beamFlicker{50%{opacity:.68}}
.projection-beam::after{
  content:"";position:absolute;inset:0;opacity:.34;
  background:radial-gradient(circle,rgba(246,235,207,.8) 0 1px,transparent 1.5px);background-size:26px 31px;
  animation:dustDrift 7s linear infinite;
}
@keyframes dustDrift{to{background-position:80px -50px}}

.projection-screen{position:relative;z-index:3;display:grid;place-items:center;min-width:0}
.projection-screen::before{
  content:"PROJECTOR / DDP / DUBAI";position:absolute;z-index:4;top:-22px;left:0;
  background:var(--retro-yellow);color:var(--ink);border:2px solid var(--retro-cream);padding:.35rem .55rem;
  font:900 .54rem/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;box-shadow:3px 3px 0 var(--retro-red)
}
.lightbox .projection-screen video{
  display:block;width:auto!important;max-width:100%!important;max-height:80svh!important;background:#000;
  border:5px solid var(--retro-cream);box-shadow:12px 12px 0 var(--retro-blue),18px 18px 0 rgba(0,0,0,.35);
}
.reel-overlay{
  position:absolute;z-index:5;left:10px;bottom:10px;pointer-events:none;
  background:rgba(17,16,13,.78);border:1px solid rgba(246,235,207,.55);color:var(--retro-cream);padding:.4rem .55rem;
  font:800 .55rem/1 "DM Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase
}
.reel-overlay .reel-name{color:var(--retro-yellow)}

/* little film-ticket cue on playable work */
.mcard[data-play-full]::after{
  content:"ROLL FILM";position:absolute;z-index:8;top:12px;left:12px;background:var(--retro-yellow);color:var(--ink);
  border:2px solid var(--ink);padding:.35rem .48rem;font:900 .56rem/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--retro-red);opacity:0;transform:translateY(-6px);transition:.2s ease
}
.mcard[data-play-full]:hover::after,.mcard[data-play-full]:focus-visible::after{opacity:1;transform:none}

@media(max-width:800px){
  .clapper-brand{align-items:flex-end}.clapper-production{font-size:.58rem}.clapper-grid{grid-template-columns:1fr 1fr}.clapper-cell:first-child{grid-column:1/-1;border-right:0;border-bottom:3px solid var(--retro-cream)}.clapper-cell:nth-child(2){border-right:3px solid var(--retro-cream)}
  .clapper-action{right:-1%;bottom:-10%}
  .projection-stage{display:block;width:min(92vw,700px);min-height:0;padding-bottom:112px}
  .projection-screen{width:100%}
  .lightbox .projection-screen video{max-height:69svh!important;border-width:3px;box-shadow:7px 7px 0 var(--retro-blue),11px 11px 0 rgba(0,0,0,.3)}
  .projector-wrap{position:absolute;left:4px;bottom:0;width:118px;z-index:5}
  .projector-tag{display:none}
  .projection-beam{left:6%;top:63%;width:54%;height:34%;transform:rotate(-15deg);transform-origin:left center;clip-path:polygon(0 45%,100% 0,100% 100%,0 55%)}
  .projection-screen::before{top:-19px;font-size:.46rem}
  .reel-overlay{font-size:.47rem}
}

@media(max-width:540px){
  .intro-clapper{width:92vw}.clapper-arm{border-width:3px;height:54px}.clapper-slate{border-width:3px;padding:18px}.clapper-brand{border-bottom-width:3px}.clapper-grid{border-width:2px}.clapper-cell{border-right-width:2px}.clapper-cell:first-child{border-bottom-width:2px}.clapper-cell:nth-child(2){border-right-width:2px}.clapper-production{max-width:10ch}.clapper-action{border-width:3px;box-shadow:3px 3px 0 var(--retro-red);text-shadow:3px 3px 0 var(--retro-red)}
  .soundbtn span{display:none}.soundbtn{padding:.35rem!important;min-width:44px;justify-content:center}.soundbtn .ico{width:29px!important;height:29px!important}
  .mcard[data-play-full]::after{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .ddp-intro{display:none!important}
  body.intro-running header,body.intro-running #main,body.intro-running .wa,body.intro-running footer{opacity:1}
  .projection-beam,.projector-reel,.projector-lamp{animation:none!important}
}

/* ========================================================================
   DDP RETRO STUDIO V3 — art-direction refinement
   Entry-gate clapper, film-lab, richer typography, readable UI, moving
   production stripes and more restrained comic punctuation.
   ======================================================================== */

:root{
  --retro-blue:#467b9b;
  --retro-blue-dark:#284d64;
  --retro-orange:#df6c2f;
  --retro-yellow:#f1c34a;
  --retro-red:#c64639;
  --retro-teal:#2f7672;
  --retro-cream:#f7ecd2;
  --retro-paper:#f4e7c8;
  --retro-black:#17140f;
}

/* Typography system: vintage display + clean editorial + typewriter labels */
body{font-family:"IBM Plex Sans","DM Sans",system-ui,-apple-system,sans-serif}
.display,.logo,.pillar h3,.mcard .meta h3,.card h3,.step h3,.tcell h3,.ndarow .cat,
.end-title,.motion-lab-title,.lab-card h3,.dossier-title,.comic-sticker,.projector-title{
  font-family:"League Gothic","Anton",Impact,sans-serif!important;
  letter-spacing:.015em;
}
.mark,.idx,.gridnote,.projector-state,.reel-overlay,.field label,.dossier-label,.entry-eyebrow,
.entry-skip,.entry-action,.production-stamp,.film-code,.lab-tag,.contact-code{
  font-family:"Courier Prime",ui-monospace,SFMono-Regular,Menlo,monospace!important;
}
.accent{font-family:"IBM Plex Sans",sans-serif!important;font-style:normal!important;font-weight:700!important}

/* Moving production/hazard stripe: slow enough to read as machinery, not loading */
.sechead::after{
  background-size:23px 23px!important;
  animation:ddpHazardTravel 9s linear infinite;
}
@keyframes ddpHazardTravel{to{background-position:92px 0}}

/* Strong, legible card information */
.mcard .meta h3{color:var(--retro-cream)!important;text-shadow:2px 2px 0 rgba(0,0,0,.92)!important}
.mcard .meta .mark{color:rgba(247,236,210,.86)!important}
.mcard .meta .mark .num{color:var(--retro-yellow)!important}
.mcard .ctx{color:rgba(247,236,210,.86)!important}
.mcard .frame::after{background:linear-gradient(180deg,rgba(0,0,0,.02) 27%,rgba(12,11,9,.50) 58%,rgba(12,11,9,.96) 100%)!important}

/* Never hide a CTA behind a hover state */
.private-viewing{
  background:var(--retro-black)!important;color:var(--retro-cream)!important;border:3px solid var(--retro-black)!important;
  box-shadow:5px 5px 0 var(--retro-blue)!important;min-width:min(100%,330px);justify-content:center;
}
.private-viewing:hover{
  background:var(--retro-yellow)!important;color:var(--retro-black)!important;border-color:var(--retro-black)!important;
  box-shadow:2px 2px 0 var(--retro-red)!important;
}

/* Section-specific pop palette — accents have a job, not random decoration */
#studio .display .hi{color:var(--retro-teal)!important}
#capabilities .display .hi{color:var(--retro-orange)!important}
#work .display .hi{color:var(--retro-red)!important}
#process .display .hi{color:var(--retro-yellow)!important}
#withheld .display .hi{color:var(--retro-blue)!important}
#contact .display .hi{color:var(--retro-red)!important}

/* Comic punctuation: intentionally sparse */
.comic-sticker{
  position:absolute;z-index:7;display:grid;place-items:center;text-transform:uppercase;text-align:center;
  line-height:.83;color:var(--retro-black);background:var(--retro-yellow);border:3px solid var(--retro-black);
  box-shadow:7px 7px 0 var(--retro-red);padding:.48em .55em;font-size:clamp(2rem,4vw,3.8rem);
  transform:rotate(-5deg);pointer-events:none;
}
.comic-sticker::before{
  content:"";position:absolute;inset:-20px;z-index:-1;background:var(--retro-blue);
  clip-path:polygon(50% 0,58% 28%,75% 7%,76% 34%,100% 25%,81% 46%,100% 58%,75% 61%,86% 88%,62% 72%,55% 100%,47% 73%,25% 96%,29% 67%,0 73%,22% 52%,0 39%,28% 37%,15% 11%,39% 29%);
  border:0;
}
.comic-sticker small{display:block;font-family:"Courier Prime",monospace!important;font-size:.22em;letter-spacing:.08em;margin-top:.55em}
#capabilities .comic-sticker{right:clamp(20px,5vw,76px);top:clamp(48px,7vw,86px)}
#work .comic-sticker{left:clamp(16px,3vw,42px);top:44%;transform:rotate(5deg);background:var(--retro-orange);box-shadow:7px 7px 0 var(--retro-blue)}
@media(max-width:1050px){#capabilities .comic-sticker,#work .comic-sticker{display:none}}

/* ========================================================================
   ENTRY GATE — visitor presses ACTION before the clapper performs.
   ======================================================================== */
.ddp-intro{place-items:stretch!important;padding:0!important}
.ddp-entry-gate{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:clamp(24px,6vw,90px);
  background:
    radial-gradient(circle at 1px 1px,rgba(247,236,210,.12) 1px,transparent 1.3px) 0 0/9px 9px,
    linear-gradient(120deg,rgba(70,123,155,.20),transparent 48%,rgba(223,108,47,.15)),var(--retro-black);
  transition:opacity .25s ease,visibility .25s ease;
}
.ddp-entry-gate::before{
  content:"";position:absolute;right:-12vw;bottom:-22vw;width:min(72vw,900px);aspect-ratio:1;border-radius:50%;opacity:.52;
  background:repeating-conic-gradient(from 4deg,var(--retro-yellow) 0 7deg,transparent 7deg 15deg);
}
.ddp-entry-gate::after{
  content:"";position:absolute;left:-10vw;top:-15vw;width:min(45vw,580px);aspect-ratio:1;border-radius:50%;opacity:.34;
  background:radial-gradient(circle,var(--retro-blue) 0 2px,transparent 2.4px);background-size:11px 11px;
}
.entry-panel{position:relative;z-index:2;width:min(900px,92vw);text-align:center}
.entry-eyebrow{font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,236,210,.68);font-size:.73rem;margin-bottom:1.2rem}
.entry-logo{font-family:"League Gothic","Anton",Impact,sans-serif;font-size:clamp(8rem,26vw,17rem);line-height:.64;letter-spacing:.025em;text-transform:lowercase;color:var(--retro-cream);text-shadow:8px 8px 0 var(--retro-blue);margin:0}
.entry-logo .ddp-rec-dot{width:.145em;height:.145em;vertical-align:baseline;margin-left:.045em;box-shadow:0 0 0 4px var(--retro-cream),0 0 25px rgba(198,70,57,.9)}
.entry-title{margin:clamp(20px,4vw,34px) 0 0;font-family:"Courier Prime",monospace;font-size:clamp(.78rem,1.5vw,1.05rem);letter-spacing:.24em;text-transform:uppercase;color:var(--retro-yellow)}
.entry-controls{margin-top:clamp(28px,5vw,52px);display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.entry-action{
  position:relative;isolation:isolate;background:var(--retro-yellow);color:var(--retro-black);border:4px solid var(--retro-cream);
  box-shadow:8px 8px 0 var(--retro-red);padding:1rem 1.75rem;font-weight:700;font-size:clamp(.92rem,2vw,1.2rem);
  letter-spacing:.16em;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.entry-action::before{content:"●";color:var(--retro-red);margin-right:.65rem;animation:recPulse .85s ease-in-out infinite}
.entry-action:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--retro-blue);background:var(--retro-orange)}
.entry-skip{color:rgba(247,236,210,.72);border-bottom:1px solid rgba(247,236,210,.45);font-size:.72rem;letter-spacing:.08em;padding:.5rem .15rem}
.entry-skip:hover{color:var(--retro-yellow);border-color:var(--retro-yellow)}
.ddp-intro.is-rolling .ddp-entry-gate{opacity:0;visibility:hidden;pointer-events:none}

/* Clapper stays backstage until the ACTION button is pressed. */
.ddp-intro .intro-clapper{opacity:0;transform:translateY(110vh) rotate(-3deg);animation:none!important}
.ddp-intro .clapper-arm{animation:none!important;transform:rotate(-14deg)}
.ddp-intro .clapper-action{animation:none!important;opacity:0}
.ddp-intro .intro-flash{animation:none!important;opacity:0}
.ddp-intro .intro-count{opacity:0}
.ddp-intro.is-rolling .intro-clapper{opacity:1;animation:clapperArrive .72s cubic-bezier(.18,.82,.22,1) .06s forwards!important}
.ddp-intro.is-rolling .clapper-arm{animation:clapArm 1.08s cubic-bezier(.5,0,.2,1) .80s forwards!important}
.ddp-intro.is-rolling .clapper-action{animation:actionStamp .34s cubic-bezier(.2,1.4,.3,1) 1.56s forwards!important}
.ddp-intro.is-rolling .intro-flash{animation:introFlash .36s ease 1.43s both!important}
.ddp-intro.is-rolling .intro-count{opacity:1;transition:opacity .2s .3s}
.ddp-intro .intro-skip{display:none!important}

/* ========================================================================
   PROJECTOR V3 — less clip-art, more mid-century 16mm machine illustration.
   ======================================================================== */
.projection-stage{grid-template-columns:minmax(250px,29%) minmax(0,1fr)!important;gap:clamp(20px,3.3vw,54px)!important}
.retro-projector{max-width:410px!important;transform:rotate(-1.25deg)}
.projector-wrap{filter:drop-shadow(12px 14px 0 rgba(0,0,0,.28))!important}
.projector-tag{max-width:340px!important;background:#2c566d!important;border-color:var(--retro-cream)!important;box-shadow:6px 6px 0 var(--retro-orange)!important}
.projection-beam{left:20%!important;width:55%!important;top:26%!important;height:50%!important;background:linear-gradient(90deg,rgba(247,236,210,.43),rgba(241,195,74,.13) 62%,rgba(247,236,210,.02))!important}
.projection-screen::before{background:var(--retro-orange)!important;color:var(--retro-cream)!important;border:2px solid var(--retro-cream)!important;box-shadow:3px 3px 0 var(--retro-blue)!important}
.lightbox .projection-screen video{border:5px solid var(--retro-cream)!important;box-shadow:12px 12px 0 var(--retro-blue),18px 18px 0 rgba(0,0,0,.35)!important}

/* old-school horn loudspeaker */
.soundbtn{background:var(--retro-yellow)!important;min-height:52px!important}
.soundbtn .ico{width:34px!important;height:34px!important}
.soundbtn span{font-family:"Courier Prime",monospace!important;font-weight:700;letter-spacing:.08em}

/* ========================================================================
   ABOUT — production dossier; all text intentionally high contrast.
   ======================================================================== */
.page-about main>section:first-child:not(.hero)::before{display:none}
.about-dossier{background:var(--retro-paper)!important;color:var(--retro-black)!important;padding-top:calc(72px + clamp(54px,8vw,100px))!important;overflow:hidden}
.about-dossier::after{
  content:"CONFIDENTIAL / STUDIO FILE 001";position:absolute;right:clamp(20px,5vw,72px);top:112px;transform:rotate(4deg);
  border:4px double var(--retro-red);color:var(--retro-red);padding:.55rem .75rem;font:700 .72rem/1 "Courier Prime",monospace;letter-spacing:.12em;
}
.dossier-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.55fr);gap:clamp(24px,6vw,90px);align-items:end;border-bottom:4px solid var(--retro-black);padding-bottom:clamp(26px,4vw,46px)}
.dossier-title{font-size:clamp(4.2rem,11vw,9.4rem);line-height:.79;text-transform:uppercase;margin:0;color:var(--retro-black)}
.dossier-title .blue{color:var(--retro-blue)}
.dossier-title .red{color:var(--retro-red)}
.dossier-meta{border:3px solid var(--retro-black);background:var(--retro-yellow);box-shadow:7px 7px 0 var(--retro-blue);padding:1rem}
.dossier-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 .4rem}
.dossier-meta strong{display:block;font-family:"League Gothic",sans-serif;font-size:2rem;text-transform:uppercase;line-height:1}
.dossier-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,88px);padding-top:clamp(34px,6vw,72px)}
.dossier-lead{font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.25;margin:0;color:var(--retro-black)}
.dossier-copy p{color:#262119!important;max-width:60ch!important;font-size:1.02rem;line-height:1.72;margin-top:0;margin-bottom:1.25rem}
.dossier-highlight{margin-top:2rem;background:var(--retro-yellow);color:var(--retro-black);padding:1.15rem 1.3rem;border-left:10px solid var(--retro-red);box-shadow:7px 7px 0 var(--retro-blue);font-weight:600;max-width:62ch}
.about-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(42px,6vw,78px)}
.about-timeline>div{border:3px solid var(--retro-black);padding:1.1rem;background:var(--retro-cream);box-shadow:5px 5px 0 var(--retro-orange)}
.about-timeline .year{font-family:"League Gothic",sans-serif;font-size:2.7rem;color:var(--retro-red);line-height:1}
.about-timeline p{color:#2b251e!important;margin:.45rem 0 0;font-size:.9rem;line-height:1.5}
.page-about .talent p,.page-about .ig-head p{color:#2b251e!important}
@media(max-width:800px){.dossier-head,.dossier-grid{grid-template-columns:1fr}.about-dossier::after{display:none}.about-timeline{grid-template-columns:1fr}}

/* ========================================================================
   AI + MOTION = THE MOTION LAB
   ======================================================================== */
.page-ai main{background:var(--retro-black)}
.motion-lab-hero{
  min-height:96svh;padding-top:calc(72px + clamp(40px,6vw,78px))!important;background:var(--retro-black)!important;color:var(--retro-cream)!important;overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px,rgba(247,236,210,.08) 1px,transparent 1.2px)!important;background-size:9px 9px!important;
}
.motion-lab-hero::before{content:"";position:absolute;inset:auto -15vw -28vw auto;width:80vw;aspect-ratio:1;border-radius:50%;opacity:.7;background:repeating-conic-gradient(from 0deg,var(--retro-blue) 0 5deg,transparent 5deg 12deg)}
.motion-lab-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);gap:clamp(30px,5vw,82px);align-items:center}
.motion-lab-kicker{display:inline-flex;gap:.65rem;align-items:center;border:2px solid var(--retro-cream);background:var(--retro-red);padding:.5rem .68rem;box-shadow:4px 4px 0 var(--retro-blue);font:700 .68rem/1 "Courier Prime",monospace;letter-spacing:.13em;text-transform:uppercase}
.motion-lab-kicker::before{content:"●";color:var(--retro-yellow);animation:recPulse .8s infinite}
.motion-lab-title{font-size:clamp(5rem,13vw,11rem);line-height:.72;text-transform:uppercase;margin:1.6rem 0 1.4rem;color:var(--retro-cream);text-shadow:7px 7px 0 var(--retro-blue)}
.motion-lab-title .yellow{color:var(--retro-yellow);text-shadow:7px 7px 0 var(--retro-red)}
.motion-lab-copy{font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.62;color:rgba(247,236,210,.78);max-width:47ch}
.motion-collage{position:relative;min-height:min(70svh,700px)}
.motion-collage .lab-polaroid{position:absolute;border:4px solid var(--retro-cream);background:var(--retro-black);box-shadow:10px 10px 0 var(--retro-orange);overflow:hidden}
.motion-collage .lab-polaroid img{width:100%;height:100%;object-fit:cover}
.motion-collage .p1{width:46%;height:68%;left:2%;top:7%;transform:rotate(-3deg)}
.motion-collage .p2{width:45%;height:57%;right:0;top:0;transform:rotate(3deg);box-shadow:10px 10px 0 var(--retro-yellow)}
.motion-collage .p3{width:48%;height:50%;right:10%;bottom:0;transform:rotate(-2deg);box-shadow:10px 10px 0 var(--retro-blue)}
.motion-collage .lab-caption{position:absolute;left:8px;bottom:8px;background:var(--retro-black);color:var(--retro-yellow);border:1px solid rgba(247,236,210,.45);padding:.35rem .45rem;font:700 .56rem/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase}

.motion-reel-section{background:var(--retro-blue-dark)!important;color:var(--retro-cream)!important;padding-block:clamp(56px,8vw,110px)!important;overflow:hidden}
.motion-reel-section .sechead .mark{background:var(--retro-orange)!important;color:var(--retro-cream)!important;border-color:var(--retro-cream)!important;box-shadow:3px 3px 0 var(--retro-yellow)!important}
.motion-reel-section .sechead .mark .num{color:var(--retro-cream)!important}
.motion-reel-section .display{color:var(--retro-cream)!important}.motion-reel-section .display .hi{color:var(--retro-yellow)!important}
.film-negative-shell{margin-top:clamp(26px,4vw,48px);position:relative;background:#0d0c0a;border-block:7px solid #0d0c0a;padding:33px 0;overflow:hidden}
.film-negative-shell::before,.film-negative-shell::after{content:"";position:absolute;left:0;right:0;height:17px;z-index:4;background:repeating-linear-gradient(90deg,var(--retro-cream) 0 24px,transparent 24px 42px)}
.film-negative-shell::before{top:4px}.film-negative-shell::after{bottom:4px}
.film-negative-track{display:flex;gap:18px;width:max-content;padding-inline:20px;animation:negativeTravel 42s linear infinite}
.film-negative-shell:hover .film-negative-track{animation-play-state:paused}
@keyframes negativeTravel{to{transform:translateX(-50%)}}
.reel-frame{position:relative;width:clamp(190px,22vw,340px);aspect-ratio:16/10;border:3px solid var(--retro-cream);background:#111;overflow:hidden;flex:none}
.reel-frame.portrait{width:clamp(150px,15vw,230px);aspect-ratio:9/14}
.reel-frame img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease;filter:saturate(.82) contrast(1.05)}
.reel-frame:hover img{transform:scale(1.045);filter:saturate(1.05)}
.reel-frame::after{content:"ROLL FILM";position:absolute;right:7px;top:7px;background:var(--retro-yellow);color:var(--retro-black);border:2px solid var(--retro-black);padding:.32rem .42rem;font:700 .5rem/1 "Courier Prime",monospace;letter-spacing:.08em}
.film-code{position:absolute;left:7px;bottom:7px;background:#0d0c0ad9;color:var(--retro-cream);padding:.3rem .4rem;font-size:.53rem;letter-spacing:.08em;text-transform:uppercase}

.motion-wall{background:var(--retro-paper)!important;color:var(--retro-black)!important}
.motion-wall .display{color:var(--retro-black)!important}.motion-wall .display .hi{color:var(--retro-red)!important}
.motion-wall-intro{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:end;margin-bottom:clamp(30px,5vw,60px)}
.motion-wall-intro p{color:#322b22!important;max-width:58ch;margin:0}
.lab-wall{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:clamp(12px,1.8vw,24px)}
.lab-card{position:relative;grid-column:span 4;min-height:310px;border:3px solid var(--retro-black);background:var(--retro-black);box-shadow:7px 7px 0 var(--retro-blue);overflow:hidden;text-align:left;padding:0;color:var(--retro-cream)}
.lab-card.wide{grid-column:span 8;min-height:390px}.lab-card.tall{grid-column:span 4;min-height:560px}.lab-card.square{grid-column:span 4;min-height:390px}
.lab-card.orange{box-shadow:7px 7px 0 var(--retro-orange)}.lab-card.yellow{box-shadow:7px 7px 0 var(--retro-yellow)}.lab-card.red{box-shadow:7px 7px 0 var(--retro-red)}
.lab-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease;filter:saturate(.92)}
.lab-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 35%,rgba(10,9,8,.90) 100%)}
.lab-card:hover img{transform:scale(1.035)}
.lab-card-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,2vw,24px)}
.lab-tag{display:inline-block;background:var(--retro-yellow);color:var(--retro-black);border:2px solid var(--retro-black);padding:.3rem .45rem;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.55rem}
.lab-card h3{margin:0;color:var(--retro-cream);font-size:clamp(1.6rem,3vw,2.8rem);line-height:.9;text-transform:uppercase;text-shadow:2px 2px 0 #000}
.lab-card p{margin:.55rem 0 0;color:rgba(247,236,210,.78);font-size:.82rem;max-width:45ch;line-height:1.45}
.lab-card[data-gallery]::after{content:"VIEW FRAMES";position:absolute;z-index:3;top:10px;right:10px;background:var(--retro-orange);color:var(--retro-black);border:2px solid var(--retro-black);padding:.35rem .45rem;font:700 .55rem/1 "Courier Prime",monospace;letter-spacing:.07em}
.motion-note{margin-top:clamp(32px,5vw,58px);border:3px solid var(--retro-black);background:var(--retro-yellow);box-shadow:7px 7px 0 var(--retro-red);padding:1rem 1.2rem;color:var(--retro-black);max-width:820px;font-weight:600}
@media(max-width:980px){.motion-lab-grid{grid-template-columns:1fr}.motion-collage{min-height:520px}.motion-wall-intro{grid-template-columns:1fr}.lab-card,.lab-card.wide,.lab-card.tall,.lab-card.square{grid-column:span 6;min-height:390px}}
@media(max-width:640px){.motion-collage{min-height:380px}.motion-collage .p1{width:50%;height:70%}.motion-collage .p2{width:48%;height:58%}.motion-collage .p3{width:50%;height:48%}.lab-card,.lab-card.wide,.lab-card.tall,.lab-card.square{grid-column:1/-1;min-height:360px}.film-negative-track{animation-duration:55s}}

/* Footer becomes the theatrical end-frame on every page */
footer{position:relative;padding-top:clamp(50px,7vw,92px)!important}
footer::before{content:"THAT'S A WRAP.";display:block;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(34px,5vw,62px);font-family:"League Gothic","Anton",Impact,sans-serif;font-size:clamp(5rem,15vw,12rem);line-height:.72;text-transform:uppercase;color:var(--retro-cream);-webkit-text-stroke:2px var(--retro-black);text-shadow:8px 8px 0 var(--retro-black)}
footer .end-title{display:none}

/* Production-label hover arrows and tiny comic cues */
.link-cta::before{content:"→ ";color:var(--retro-red)}
.nav-cta{box-shadow:4px 4px 0 var(--retro-blue)!important}
.nav-cta:hover{box-shadow:2px 2px 0 var(--retro-red)!important}

@media(max-width:800px){
  .projection-stage{display:block!important;padding-bottom:130px!important}
  .projector-wrap{width:145px!important;left:0!important}
  .projection-beam{left:7%!important;top:62%!important;width:57%!important;height:33%!important}
  .entry-logo{text-shadow:5px 5px 0 var(--retro-blue)}
}

@media(prefers-reduced-motion:reduce){
  .sechead::after,.film-negative-track{animation:none!important}
  .ddp-intro{display:grid!important}
  .ddp-intro .entry-action::before{animation:none!important}
  .ddp-intro.is-rolling .intro-clapper{animation:none!important;opacity:0!important}
}

/* hard-stop horizontal overflow from rotated cards / oversized sunbursts */
html,body{overflow-x:clip}
.hero.split{overflow:hidden!important}