/* Mohammad Mouradi — cinematic portfolio
   Layout: full-bleed cinema frames between a 1440px editorial column; each project page dressed as its medium
   (TV broadcast, commercial spot, festival film). Motion follows Emil Kowalski's rules: transform/opacity only,
   strong ease-out for entrances, under 300ms for UI, longer only for the one-off cinematic moments. */
:root{
  --ink:#0b0a09; --ink-2:#14120f; --ink-3:#1e1b17;
  --paper:#ece6dc; --paper-2:#d6cfc3; --muted:#9a9184; --dim:#5f584f;
  --amber:#d9a441; --amber-2:#f0c674; --rec:#d0412f;
  --line:rgba(236,230,220,.12); --line-2:rgba(236,230,220,.22);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -12px rgba(0,0,0,.7);
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --gutter:max(16px,4vw);
  --max:1440px;
  color-scheme:dark;
}
html[lang="ar"]{
  --display:"Noto Naskh Arabic","Amiri",serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --mono:"IBM Plex Sans Arabic",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a,button,[role="button"]{touch-action:manipulation}
button,.btn,.tab,.chip{user-select:none;-webkit-user-select:none}
::selection{background:var(--amber);color:var(--ink)}
h1,h2,h3{text-wrap:balance}
.skip{position:absolute;left:8px;top:8px;transform:translateY(-300%);background:var(--amber);color:var(--ink);padding:8px 14px;z-index:200}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* page transitions between documents */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out 180ms var(--ease-out) both}
::view-transition-new(root){animation:vt-in 320ms var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* film grain, painted once and shifted on the compositor */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:150;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[lang="ar"] .mono{letter-spacing:0;font-size:13px}
.amber{color:var(--amber)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background-color 300ms ease,border-color 300ms ease;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(11,10,9,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{font-family:var(--display);font-size:22px;white-space:nowrap;display:flex;align-items:center;gap:10px}
.brand b{font-weight:600}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(208,65,47,.6);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(208,65,47,.55)}70%{box-shadow:0 0 0 8px rgba(208,65,47,0)}100%{box-shadow:0 0 0 0 rgba(208,65,47,0)}}
.nav{display:flex;gap:6px;align-items:center}
.nav a{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 12px;transition:color 200ms ease}
html[lang="ar"] .nav a{letter-spacing:0;font-size:14px}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--ease-out)}
html[dir="rtl"] .nav a::after{transform-origin:right}
.nav a[aria-current="page"]{color:var(--paper)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--paper)}.nav a:hover::after{transform:scaleX(1)}}
.nav .lang{border:1px solid var(--line-2);border-radius:999px;color:var(--paper);margin-inline-start:8px;padding:7px 14px}
.nav .lang::after{display:none}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;transition:transform 160ms var(--ease-out)}
.menu-btn:active{transform:scale(.94)}
.menu-btn i{display:block;width:22px;height:1px;background:var(--paper);position:relative;transition:background-color 200ms ease}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--paper);transition:transform 300ms var(--ease-out)}
.menu-btn i::before{transform:translateY(-7px)}.menu-btn i::after{transform:translateY(7px)}
@media (max-width:860px){
  .menu-btn{display:flex}
  .nav{position:fixed;inset:0;top:calc(72px + env(safe-area-inset-top,0px));background:var(--ink);flex-direction:column;align-items:stretch;gap:0;padding:24px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));
    clip-path:inset(0 0 100% 0);transition:clip-path 450ms var(--ease-drawer);overscroll-behavior:contain}
  .nav a{font-family:var(--display);font-size:44px;letter-spacing:0;text-transform:none;color:var(--paper);padding:10px 0;border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(16px);transition:opacity 300ms var(--ease-out),transform 400ms var(--ease-out)}
  .nav a::after{display:none}
  .nav .lang{font-family:var(--mono);font-size:13px;border:1px solid var(--line-2);align-self:flex-start;margin:24px 0 0;padding:10px 18px}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{clip-path:inset(0 0 0 0)}
  body.menu-open .nav a{opacity:1;transform:none}
  body.menu-open .nav a:nth-child(2){transition-delay:40ms}
  body.menu-open .nav a:nth-child(3){transition-delay:80ms}
  body.menu-open .nav a:nth-child(4){transition-delay:120ms}
  body.menu-open .menu-btn i{background:transparent}
  body.menu-open .menu-btn i::before{transform:rotate(45deg)}
  body.menu-open .menu-btn i::after{transform:rotate(-45deg)}
}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line-2);padding:14px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
html[lang="ar"] .btn{letter-spacing:0;font-size:14px}
.btn:active{transform:scale(.97)}
.btn .arr{display:inline-block;transition:transform 250ms var(--ease-out)}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
.btn.solid{background:var(--amber);border-color:var(--amber);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--paper);background:var(--paper);color:var(--ink)}
  .btn.solid:hover{background:var(--amber-2);border-color:var(--amber-2)}
  .btn:hover .arr{transform:translateX(4px)}
  html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.play-btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:transform 160ms var(--ease-out)}
html[lang="ar"] .play-btn{letter-spacing:0;font-size:14px}
.play-btn:active{transform:scale(.97)}
.play-btn .ring{width:64px;height:64px;border-radius:50%;border:1px solid var(--paper);display:grid;place-items:center;transition:background-color 200ms ease,border-color 200ms ease}
.play-btn .ring svg{width:18px;height:18px;margin-inline-start:3px;fill:currentColor;transition:fill 200ms ease}
html[dir="rtl"] .play-btn .ring svg{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.play-btn:hover .ring{background:var(--paper);color:var(--ink)}}

/* ---------------------------------------------------------------- reveals (JS adds .js to <html>) */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 900ms var(--ease-in-out);transition-delay:var(--d,0ms)}
.js .rv-img.in{clip-path:inset(0 0 0 0)}
.js .rv-img img{transform:scale(1.08);transition:transform 1400ms var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv-img.in img{transform:none}

/* ---------------------------------------------------------------- home hero */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
.hero .slides{position:absolute;inset:0}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1400ms ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:saturate(.85) contrast(1.05);transition:transform 8s linear}
.hero .slide.on img{transform:scale(1)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.08) 35%,rgba(0,0,0,.3) 62%,rgba(11,10,9,.96) 100%)}
.letterbox{position:absolute;left:0;right:0;height:7svh;background:#000;z-index:2;transition:transform 1200ms var(--ease-in-out)}
.letterbox.t{top:0}.letterbox.b{bottom:0}
.js .hero:not(.go) .letterbox.t{transform:translateY(-100%)}
.js .hero:not(.go) .letterbox.b{transform:translateY(100%)}
.hero .copy{position:absolute;z-index:3;left:0;right:0;bottom:calc(7svh + 5svh)}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(56px,11.5vw,184px);line-height:.88;margin:0 0 22px;letter-spacing:-.02em}
html[lang="ar"] .hero h1{line-height:1.12;font-weight:600;letter-spacing:0}
.hero h1 em{font-style:italic;color:var(--amber-2);font-weight:400}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:block;transition:transform 1100ms var(--ease-out),opacity 700ms ease;transition-delay:var(--d,0ms)}
.js .hero:not(.go) .line>span,.js .p-hero:not(.go) .line>span{transform:translateY(105%);opacity:0}
.hero .meta-row{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;transition:opacity 800ms ease 700ms}
.js .hero:not(.go) .meta-row,.js .hero:not(.go) .kicker{opacity:0}
.hero .kicker{transition:opacity 800ms ease 500ms}
.hero .hud{position:absolute;z-index:3;inset-inline-end:var(--gutter);top:calc(7svh + 92px);text-align:end;transition:opacity 800ms ease 900ms}
.js .hero:not(.go) .hud{opacity:0}
.rec{display:inline-flex;align-items:center;gap:8px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.dots{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.dots button{width:28px;height:2px;background:var(--line-2);position:relative;overflow:hidden}
.dots button::before{content:"";position:absolute;inset:-10px 0}
.dots button i{position:absolute;inset:0;background:var(--amber);transform:scaleX(0);transform-origin:left}
html[dir="rtl"] .dots button i{transform-origin:right}
.dots button.on i{animation:prog 6s linear forwards}
@keyframes prog{to{transform:scaleX(1)}}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:calc(7svh + 18px);transform:translateX(-50%);width:1px;height:44px;background:var(--line-2);overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;right:0;height:40%;background:var(--paper);animation:cue 2.2s var(--ease-in-out) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(80px,12vw,160px) 0}
.sec.tight{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,4vw,56px);border-bottom:1px solid var(--line);padding-bottom:18px;flex-wrap:wrap}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(36px,5vw,68px);line-height:1;margin:0;letter-spacing:-.01em}
.statement{font-family:var(--display);font-weight:400;font-size:clamp(28px,4.2vw,58px);line-height:1.16;max-width:22ch;margin:0;letter-spacing:-.01em}
html[lang="ar"] .statement{line-height:1.6;max-width:26ch;letter-spacing:0}
.statement em{color:var(--amber-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.two>*{min-width:0}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.lead{font-size:clamp(17px,1.4vw,19px);color:var(--paper-2);max-width:62ch}
.lead p{margin:0 0 1.1em}

/* ---------------------------------------------------------------- medium badge */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line-2);background:rgba(11,10,9,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--paper)}
html[lang="ar"] .badge{letter-spacing:0;font-size:12px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge[data-m="tv"]{color:#8fd3ff}
.badge[data-m="ad"]{color:var(--amber-2)}
.badge[data-m="film"]{color:#e8b4a6}

/* ---------------------------------------------------------------- showcase (home + work) */
.filters{position:relative;display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:4px;margin-bottom:clamp(28px,4vw,48px);max-width:100%;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--paper);transition:transform 300ms var(--ease-out),width 300ms var(--ease-out);z-index:0}
.tab{position:relative;z-index:1;padding:10px 18px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color 250ms ease,transform 160ms var(--ease-out)}
html[lang="ar"] .tab{letter-spacing:0;font-size:14px}
.tab:active{transform:scale(.97)}
.tab[aria-selected="true"]{color:var(--ink)}
.tab sup{font-size:10px;margin-inline-start:4px;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px)}
.card{grid-column:span 6;display:block;position:relative;min-width:0;transition:opacity 250ms var(--ease-out),transform 300ms var(--ease-out)}
.card.big{grid-column:span 12}
.card.is-out{opacity:0;transform:scale(.97);pointer-events:none}
.card.gone{display:none}
@media (max-width:860px){.card{grid-column:span 12}}
.card .frame{position:relative;overflow:hidden;aspect-ratio:16/9;max-width:100%;background:var(--ink-2)}
.card.big .frame{aspect-ratio:2.39/1}
@media (max-width:860px){.card.big .frame{aspect-ratio:16/9}}
.card .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform 900ms var(--ease-out),filter 500ms ease}
.card .frame .badge{position:absolute;top:14px;inset-inline-start:14px;z-index:2}
.card .frame .tc{position:absolute;bottom:12px;inset-inline-end:14px;z-index:2;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.card .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.card .info{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.card h3{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.8vw,40px);margin:0;line-height:1.05;letter-spacing:-.01em}
.card.big h3{font-size:clamp(34px,4vw,58px)}
.card p{margin:6px 0 0;color:var(--muted)}
.card:active .frame{transform:scale(.99)}
.card .frame{transition:transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card:hover .frame img{transform:scale(1.04);filter:saturate(1.05)}
  .card[data-cursor] .frame{cursor:none}
}
/* cursor label that trails the pointer over showcase media */
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:0;scale:.6;transition:opacity 200ms var(--ease-out),scale 250ms var(--ease-out)}
html[lang="ar"] .cursor{letter-spacing:0;font-size:13px}
.cursor.on{opacity:1;scale:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* typographic card for projects without a still (TV) */
.tvcard{position:absolute;inset:0;display:grid;place-items:center;background:#05080b;overflow:hidden}
.tvcard .bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);opacity:.22;filter:saturate(.8)}
.tvcard .bars i:nth-child(1){background:#c0c0c0}.tvcard .bars i:nth-child(2){background:#c0c000}.tvcard .bars i:nth-child(3){background:#00c0c0}.tvcard .bars i:nth-child(4){background:#00c000}.tvcard .bars i:nth-child(5){background:#c000c0}.tvcard .bars i:nth-child(6){background:#c00000}.tvcard .bars i:nth-child(7){background:#0000c0}
.tvcard .scan,.tv-hero .scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);pointer-events:none}
.tvcard strong{position:relative;font-family:var(--display);font-weight:600;font-size:clamp(48px,7vw,110px);line-height:1;color:#fff;text-shadow:0 0 30px rgba(143,211,255,.35)}

/* ---------------------------------------------------------------- awards */
.laurels{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:980px){.laurels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.laurels{grid-template-columns:1fr}}
.laurel{background:var(--ink);padding:32px 26px;display:flex;flex-direction:column;gap:10px;min-height:220px;min-width:0}
.laurel .kind{color:var(--amber)}
.laurel h4{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.15;margin:0}
.laurel p{margin:auto 0 0;color:var(--muted);font-size:14px}
.laurel svg{width:46px;height:auto;color:var(--amber)}

/* ---------------------------------------------------------------- project hero (ad / film) */
.p-hero{position:relative;min-height:92svh;overflow:hidden;background:#000;display:flex;align-items:flex-end}
.p-hero .bg{position:absolute;inset:0}
.p-hero .bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transform:scale(1.06);transition:transform 2400ms var(--ease-out)}
.p-hero.go .bg img{transform:none}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 30%,rgba(11,10,9,.25) 58%,var(--ink));pointer-events:none}
.p-hero .copy{position:relative;z-index:2;width:100%;padding-bottom:clamp(36px,6svh,72px);padding-top:140px}
.p-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,9vw,148px);line-height:.92;margin:14px 0 0;letter-spacing:-.02em}
html[lang="ar"] .p-hero h1{line-height:1.2;letter-spacing:0}
.p-hero .sub{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.3vw,30px);color:var(--paper-2);margin:14px 0 0;max-width:34ch;transition:opacity 900ms ease 500ms}
html[lang="ar"] .p-hero .sub{font-style:normal}
.js .p-hero:not(.go) .sub,.js .p-hero:not(.go) .crumbs,.js .p-hero:not(.go) .hero-actions{opacity:0}
.p-hero .crumbs{display:flex;gap:14px;align-items:center;flex-wrap:wrap;transition:opacity 700ms ease 200ms}
.hero-actions{margin-top:28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;transition:opacity 900ms ease 700ms}
.back{display:inline-flex;gap:8px;align-items:center;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.back:hover{color:var(--paper)}}
/* title-safe frame guides on commercial heroes */
.safe{position:absolute;inset:9% 6%;z-index:1;pointer-events:none}
.safe i{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.55);border-style:solid;border-width:0}
.safe i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.safe i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.safe i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.safe i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.safe .hud{position:absolute;top:10px;left:32px;right:32px;display:flex;justify-content:space-between;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (max-width:620px){.safe{inset:13% 5% 40%}}

/* spot sheet (commercial spec) */
.spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec>div{padding:20px 20px 20px 0;border-inline-end:1px solid var(--line);min-width:0}
.spec>div+div{padding-inline-start:20px}
.spec>div:last-child{border-inline-end:0}
.spec dt{margin-bottom:6px}
.spec dd{margin:0;font-family:var(--display);font-size:21px;line-height:1.25}
@media (max-width:980px){.spec{grid-template-columns:1fr 1fr}.spec>div{border-inline-end:0;border-bottom:1px solid var(--line);padding-inline:0!important}.spec>div:last-child{border-bottom:0}}

/* production phases */
.phase{padding-top:clamp(64px,9vw,128px)}
.ph-head{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;margin-bottom:32px;align-items:start}
.ph-head .ph{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--amber);padding-top:10px}
.ph-head h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4vw,56px);line-height:1.04;margin:0 0 10px;letter-spacing:-.01em}
.ph-head p{margin:0;color:var(--muted);max-width:62ch;font-size:17px}
@media (max-width:860px){.ph-head{grid-template-columns:1fr;gap:14px}.ph-head .ph{flex-direction:row;gap:14px}}

/* galleries */
.gal{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
.gal.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal figure{margin:0;overflow:hidden;background:var(--ink-2);position:relative;max-width:100%}
.gal figure.span2{grid-column:span 2}
.gal img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.gal figcaption{position:absolute;inset-inline-start:12px;bottom:10px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8);
  opacity:0;transform:translateY(6px);transition:opacity 200ms var(--ease-out),transform 250ms var(--ease-out)}
html[lang="ar"] .gal figcaption{letter-spacing:0;font-size:12px}
@media (hover:hover) and (pointer:fine){.gal figure:hover figcaption{opacity:1;transform:none}}
@media (hover:none){.gal figcaption{opacity:1;transform:none}}
@media (max-width:860px){.gal,.gal.three{grid-template-columns:1fr}.gal figure.span2{grid-column:auto}}
.ar-16{aspect-ratio:16/9}.ar-4{aspect-ratio:4/3}.ar-wide{aspect-ratio:2.39/1}

/* spot player with playlist */
.player{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(12px,1.6vw,20px);align-items:start}
.player.single{grid-template-columns:minmax(0,1fr)}
@media (max-width:980px){.player{grid-template-columns:minmax(0,1fr)}}
.screen{position:relative;background:#000;aspect-ratio:16/9;max-width:100%;overflow:hidden}
.screen video{width:100%;height:100%;object-fit:contain;transition:opacity 220ms ease,filter 220ms ease}
.screen.swap video{opacity:.25;filter:blur(4px)}
.screen .poster{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;transition:opacity 300ms var(--ease-out)}
.screen .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.screen .poster .play-btn{position:relative;color:#fff}
.screen.playing .poster{opacity:0;pointer-events:none}
.screen-meta{display:flex;justify-content:space-between;gap:12px;padding:12px 0 0}
.playlist{display:flex;flex-direction:column;gap:8px;max-height:100%;overflow:auto;overscroll-behavior:contain}
@media (max-width:980px){.playlist{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}}
.pl-item{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid transparent;text-align:start;transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.pl-item:active{transform:scale(.98)}
.pl-item img{width:112px;aspect-ratio:16/9;object-fit:cover;filter:saturate(.8) brightness(.85);transition:filter 200ms ease}
.pl-item b{display:block;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.1}
.pl-item[aria-current="true"]{background:var(--ink-3);border-color:var(--line-2)}
.pl-item[aria-current="true"] img{filter:none}
.pl-item[aria-current="true"] .mono{color:var(--amber)}
@media (hover:hover) and (pointer:fine){.pl-item:hover{background:var(--ink-2)}.pl-item:hover img{filter:none}}
@media (max-width:980px){.pl-item{grid-template-columns:1fr;min-width:180px;scroll-snap-align:start}.pl-item img{width:100%}}

/* compare */
.compare{position:relative;overflow:hidden;aspect-ratio:16/9;max-width:100%;user-select:none;touch-action:pan-y;background:#000}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .top{clip-path:inset(0 0 0 var(--x,50%))}
.compare .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--amber-2);transform:translateX(-.5px)}
.compare .knob{position:absolute;top:50%;left:var(--x,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border:1px solid var(--amber-2);border-radius:50%;background:rgba(11,10,9,.55);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--amber-2);font-size:14px;transition:transform 160ms var(--ease-out)}
.compare.drag .knob{transform:scale(.92)}
.compare .lab{position:absolute;bottom:14px;background:rgba(11,10,9,.7);padding:5px 10px;z-index:2}
.compare .lab.l{left:14px}.compare .lab.r{right:14px}
.compare input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:ew-resize;margin:0;z-index:3}

/* before / design toggle */
.toggle{display:flex;flex-direction:column;gap:16px}
.toggle .stage{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:#000}
.toggle .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 450ms var(--ease-out),filter 450ms var(--ease-out),transform 900ms var(--ease-out)}
.toggle .stage img[aria-hidden="true"]{opacity:0;filter:blur(6px);transform:scale(1.03)}
.toggle .filters{margin:0;align-self:flex-start}

/* filmstrip */
.strip-wrap{position:relative}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:22px 0;overscroll-behavior-x:contain;scrollbar-width:none;
  background:#000;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.strip::-webkit-scrollbar{display:none}
.strip::before,.strip::after{content:"";flex:0 0 max(8px,calc((100vw - var(--max)) / 2))}
.strip-wrap::before,.strip-wrap::after{content:"";position:absolute;left:0;right:0;height:10px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(236,230,220,.5) 10px 20px,transparent 20px 30px);background-size:30px 10px;opacity:.5;-webkit-mask:linear-gradient(#000,#000)}
.strip-wrap::before{top:6px}.strip-wrap::after{bottom:6px}
.strip figure{margin:0;flex:0 0 min(78vw,620px);aspect-ratio:16/9;scroll-snap-align:center;position:relative;overflow:hidden;background:var(--ink-2)}
.strip figure img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform 700ms var(--ease-out)}
.strip figure .fn{position:absolute;top:10px;inset-inline-start:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (hover:hover) and (pointer:fine){.strip figure:hover img{transform:scale(1.03)}}
.strip-ctrl{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px}
.strip-ctrl .arrows{display:flex;gap:8px}
.icon-btn{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:var(--paper);color:var(--ink)}}
html[dir="rtl"] .icon-btn.flip-rtl{transform:scaleX(-1)}
.progress{flex:1;height:1px;background:var(--line-2);position:relative;max-width:320px}
.progress i{position:absolute;inset:0;background:var(--amber);transform-origin:left;transform:scaleX(var(--p,0))}
html[dir="rtl"] .progress i{transform-origin:right}

/* reels in phone frames */
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);max-width:860px}
@media (max-width:620px){.reels{grid-template-columns:repeat(2,minmax(0,1fr))}.reels .phone:nth-child(3){display:none}}
.phone{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 0 0 6px var(--ink-3),0 0 0 7px var(--line-2),var(--shadow);transition:transform 400ms var(--ease-out)}
.phone img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.phone::before{content:"";position:absolute;top:10px;left:50%;width:34%;height:16px;margin-left:-17%;border-radius:999px;background:#000;z-index:2}
.phone .ui{position:absolute;inset:auto 12px 14px 12px;z-index:2;color:#fff;font-size:12px;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.phone .ui b{display:block;font-weight:500}
@media (hover:hover) and (pointer:fine){.phone:hover{transform:translateY(-6px)}}
.reels .phone:nth-child(2){margin-top:40px}

/* coming soon */
.soon{position:relative;overflow:hidden;aspect-ratio:2.39/1;max-width:100%;display:grid;place-items:center;text-align:center;background:#000}
.soon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.4) blur(2px)}
.soon div{position:relative;z-index:1;padding:20px}
.soon h3{font-family:var(--display);font-weight:500;font-size:clamp(30px,4vw,56px);margin:10px 0 0}
@media (max-width:620px){.soon{aspect-ratio:4/3}}

/* ---------------------------------------------------------------- TV series page */
.tv-hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:#04070a}
.tv-hero .bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:68% 8% 24%}
.tv-hero .bars i{display:block}
.tv-hero .bars i:nth-child(1){background:#bfbfbf}.tv-hero .bars i:nth-child(2){background:#bfbf00}.tv-hero .bars i:nth-child(3){background:#00bfbf}.tv-hero .bars i:nth-child(4){background:#00bf00}.tv-hero .bars i:nth-child(5){background:#bf00bf}.tv-hero .bars i:nth-child(6){background:#bf0000}.tv-hero .bars i:nth-child(7){background:#0000bf}
.tv-hero .bars i:nth-child(8){background:#0000bf}.tv-hero .bars i:nth-child(9){background:#131313}.tv-hero .bars i:nth-child(10){background:#bf00bf}.tv-hero .bars i:nth-child(11){background:#131313}.tv-hero .bars i:nth-child(12){background:#00bfbf}.tv-hero .bars i:nth-child(13){background:#131313}.tv-hero .bars i:nth-child(14){background:#bfbfbf}
.tv-hero .bars i:nth-child(15){background:#00214c}.tv-hero .bars i:nth-child(16){background:#fff}.tv-hero .bars i:nth-child(17){background:#32006a}.tv-hero .bars i:nth-child(18){background:#131313}.tv-hero .bars i:nth-child(19){background:#090909}.tv-hero .bars i:nth-child(20){background:#131313}.tv-hero .bars i:nth-child(21){background:#1d1d1d}
.tv-hero .bars{transition:opacity 900ms ease 300ms,filter 900ms ease 300ms}
.tv-hero.go .bars{opacity:.16;filter:blur(1px) saturate(.6)}
.tv-hero .vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 0,rgba(0,0,0,.55) 70%,rgba(0,0,0,.9) 100%),linear-gradient(180deg,transparent 40%,var(--ink))}
.tv-hero .bug{position:absolute;z-index:3;top:calc(96px + env(safe-area-inset-top,0px));inset-inline-end:var(--gutter);display:flex;gap:10px;align-items:center;color:#fff}
.on-air{display:inline-flex;align-items:center;gap:8px;background:var(--rec);color:#fff;padding:5px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
html[lang="ar"] .on-air{letter-spacing:0;font-size:12px}
.on-air::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s steps(2) infinite}
.tv-hero .copy{position:relative;z-index:2;width:100%;padding:140px 0 clamp(36px,6svh,72px)}
.tv-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(60px,11vw,180px);line-height:.9;margin:12px 0 0;letter-spacing:-.02em;color:#fff;text-shadow:0 0 40px rgba(143,211,255,.25)}
html[lang="ar"] .tv-hero h1{line-height:1.15;letter-spacing:0}
.tv-hero .season{font-family:var(--mono);color:#8fd3ff;letter-spacing:.3em;font-size:13px;text-transform:uppercase}
html[lang="ar"] .tv-hero .season{letter-spacing:0;font-size:15px}
.js .tv-hero:not(.go) .line>span{transform:translateY(105%);opacity:0}
/* lower third */
.lower3{display:inline-flex;align-items:stretch;margin-top:28px;max-width:100%;clip-path:inset(0 100% 0 0);transition:clip-path 800ms var(--ease-in-out) 900ms}
html[dir="rtl"] .lower3{clip-path:inset(0 0 0 100%)}
.tv-hero.go .lower3{clip-path:inset(0 0 0 0)}
.no-js .lower3{clip-path:none}
.lower3 .k{background:#8fd3ff;color:#04070a;padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center}
html[lang="ar"] .lower3 .k{letter-spacing:0;font-size:13px}
.lower3 .v{background:rgba(4,7,10,.85);padding:8px 18px;font-family:var(--display);font-size:clamp(20px,2.4vw,30px);color:#fff;min-width:0}
/* directors' room */
.directors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:760px){.directors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.director{background:var(--ink);padding:26px 22px;display:flex;flex-direction:column;gap:6px;min-width:0;transition:background-color 200ms ease}
.director b{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.director.me{background:linear-gradient(135deg,rgba(143,211,255,.12),rgba(143,211,255,.02));box-shadow:inset 0 0 0 1px rgba(143,211,255,.45)}
.director.me .mono{color:#8fd3ff}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;font-family:var(--display);font-size:20px;transition:border-color 200ms ease,background-color 200ms ease}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:#8fd3ff;background:rgba(143,211,255,.06)}}
.embeds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.embeds .instagram-media{min-width:0!important;width:100%!important;margin:0!important;background:var(--ink-2)!important;border:1px solid var(--line)!important}
.embeds .ig-fallback{display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:16/10;padding:24px;border:1px solid var(--line);background:var(--ink-2);transition:border-color 200ms ease,transform 160ms var(--ease-out)}
.embeds .ig-fallback:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.embeds .ig-fallback:hover{border-color:var(--line-2)}}
@media (max-width:860px){.embeds{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- festival film page (Adam) */
.film-hero .laurel-row{display:flex;flex-wrap:wrap;gap:18px 34px;margin-top:30px;transition:opacity 900ms ease 900ms}
.js .film-hero:not(.go) .laurel-row{opacity:0}
.mini-laurel{display:flex;align-items:center;gap:8px;color:#f3e7cf;max-width:240px;min-width:0}
@media (max-width:620px){.film-hero .laurel-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mini-laurel svg{width:22px;flex-basis:22px}.mini-laurel span{font-size:13px}}
.mini-laurel svg{width:30px;flex:0 0 30px;color:var(--amber-2)}
.mini-laurel svg.r{transform:scaleX(-1)}
.mini-laurel span{text-align:center;font-family:var(--display);font-size:15px;line-height:1.2}
.mini-laurel span small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-2)}
html[lang="ar"] .mini-laurel span small{letter-spacing:0;font-size:11px}
.logline{font-family:var(--display);font-style:italic;font-size:clamp(28px,3.6vw,48px);line-height:1.2;max-width:28ch;margin:0}
html[lang="ar"] .logline{font-style:normal;line-height:1.7}
.logline::before{content:"“";color:var(--amber)}.logline::after{content:"”";color:var(--amber)}
html[lang="ar"] .logline::before{content:"«"}html[lang="ar"] .logline::after{content:"»"}
/* end credits roll */
.endcredits{max-width:820px;margin:0 auto;text-align:center;padding:24px 0}
.endcredits .row{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:9px 0}
.endcredits .row dt{text-align:end;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:6px}
html[lang="ar"] .endcredits .row dt{letter-spacing:0;font-size:13px}
.endcredits .row dd{margin:0;text-align:start;font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.3}
.endcredits .title{font-family:var(--display);font-size:clamp(44px,6vw,80px);letter-spacing:.24em;margin:0 0 28px;padding-inline-start:.24em}
html[lang="ar"] .endcredits .title{letter-spacing:0;padding:0}
@media (max-width:520px){.endcredits .row{grid-template-columns:1fr;gap:2px;text-align:center}.endcredits .row dt,.endcredits .row dd{text-align:center}}

/* ---------------------------------------------------------------- credits table (about) */
.credits{display:grid;grid-template-columns:1fr}
.credits a.row{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);transition:padding 250ms var(--ease-out),color 200ms ease}
.credits a.row b{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.6vw,34px)}
@media (hover:hover) and (pointer:fine){.credits a.row:hover{padding-inline-start:12px;color:var(--amber-2)}}
@media (max-width:620px){.credits a.row{grid-template-columns:minmax(0,1fr) auto}.credits a.row .yr{grid-column:1/-1}}
.edu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.edu dd{margin:0;font-family:var(--display);font-size:22px}
@media (max-width:620px){.edu{grid-template-columns:1fr;gap:4px}}

/* ---------------------------------------------------------------- next project */
.next{display:block;position:relative;overflow:hidden;margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--line)}
.next .bgimg{position:absolute;inset:0;opacity:0;transition:opacity 500ms ease,transform 1200ms var(--ease-out);transform:scale(1.05)}
.next .bgimg img{width:100%;height:100%;object-fit:cover;filter:brightness(.35) saturate(.8)}
.next .wrap{position:relative;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px)}
.next h2{font-family:var(--display);font-weight:500;font-size:clamp(44px,8.5vw,128px);line-height:1;margin:12px 0 0;letter-spacing:-.02em;transition:transform 500ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.next:hover .bgimg{opacity:1;transform:none}.next:hover h2{transform:translateX(12px)}html[dir="rtl"] .next:hover h2{transform:translateX(-12px)}}

/* ---------------------------------------------------------------- contact */
.contact-big{font-family:var(--display);font-weight:500;font-size:clamp(46px,8vw,128px);line-height:1;margin:0 0 40px;letter-spacing:-.02em}
html[lang="ar"] .contact-big{line-height:1.3;letter-spacing:0}
.contact-big em{color:var(--amber-2)}
.clist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.clist li{border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.clist a{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;padding:24px 0;transition:transform 250ms var(--ease-out),color 200ms ease}
.clist .val{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
html[dir="rtl"] .clist .val{text-align:right}
@media (hover:hover) and (pointer:fine){.clist a:hover{transform:translateX(10px);color:var(--amber-2)}html[dir="rtl"] .clist a:hover{transform:translateX(-10px)}}
@media (max-width:700px){.clist a{grid-template-columns:1fr;gap:4px}}
.copy-btn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;position:relative;overflow:hidden;transition:transform 160ms var(--ease-out),color 200ms ease,border-color 200ms ease}
html[lang="ar"] .copy-btn{letter-spacing:0;font-size:12px}
.copy-btn:active{transform:scale(.95)}
.copy-btn span{display:block;transition:transform 250ms var(--ease-out),opacity 200ms ease,filter 200ms ease}
.copy-btn .done{position:absolute;inset:0;display:grid;place-items:center;color:var(--amber);transform:translateY(100%);opacity:0}
.copy-btn.copied{border-color:var(--amber)}
.copy-btn.copied .lbl{transform:translateY(-100%);opacity:0;filter:blur(2px)}
.copy-btn.copied .done{transform:none;opacity:1}

/* ---------------------------------------------------------------- footer */
.ftr{border-top:1px solid var(--line);padding:40px 0 calc(48px + env(safe-area-inset-bottom,0px));margin-top:40px}
.ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.ftr nav{display:flex;gap:22px;flex-wrap:wrap}
.ftr nav a{transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){.ftr nav a:hover{color:var(--paper)}}

/* ---------------------------------------------------------------- modal (video + lightbox) */
.modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:max(16px,4vh) max(16px,4vw);visibility:hidden;pointer-events:none}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.92);opacity:0;transition:opacity 200ms var(--ease-out)}
.modal .body{position:relative;width:min(100%,1400px);max-height:100%;display:grid;place-items:center;opacity:0;transform:scale(.96);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.modal.open{visibility:visible;pointer-events:auto}
.modal.open .backdrop{opacity:1;transition-duration:250ms}
.modal.open .body{opacity:1;transform:none;transition-duration:250ms}
.modal img{max-width:100%;max-height:86vh;object-fit:contain}
.modal .close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));inset-inline-end:calc(14px + env(safe-area-inset-right,0px));z-index:2;color:var(--paper)}
.modal .nav-btn{position:absolute;top:50%;margin-top:-22px;z-index:2;color:var(--paper);background:rgba(11,10,9,.6)}
.modal .nav-btn.prev{left:max(12px,env(safe-area-inset-left,0px))}.modal .nav-btn.next{right:max(12px,env(safe-area-inset-right,0px))}
.modal .count{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:2}

/* ---------------------------------------------------------------- reduced motion: keep fades, drop movement */
@media (prefers-reduced-motion:reduce){
  body::after,.brand i,.rec::before,.on-air::before,.scroll-cue::after{animation:none}
  .js .rv{transform:none;transition:opacity 400ms ease}
  .js .rv-img{clip-path:none;opacity:0;transition:opacity 500ms ease}
  .js .rv-img.in{opacity:1}
  .js .rv-img img,.hero .slide img,.p-hero .bg img{transform:none!important;transition:none}
  .line>span{transform:none!important;transition:opacity 500ms ease}
  .letterbox{transform:none!important;transition:none}
  .lower3{clip-path:none!important;transition:none}
  .card,.modal .body{transform:none!important}
  .nav a{transform:none!important}
  ::view-transition-new(root){animation:vt-out 1ms reverse}
  .dots button.on i{animation:none;transform:scaleX(1)}
}

/* ---- Adam: poster hero + OSN ---- */
.poster-hero .bg img{filter:blur(28px) brightness(.45) saturate(.8);transform:scale(1.15)!important}
.poster-hero .copy .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,380px);gap:clamp(28px,5vw,80px);align-items:end}
.poster-hero .poster-frame{grid-column:2;grid-row:1;margin:0;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);overflow:hidden;align-self:center}
.poster-hero .poster-frame img{display:block;width:100%;height:auto;cursor:zoom-in}
.poster-hero .poster-copy{grid-column:1;grid-row:1;min-width:0}
.osn-pill{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px;border:1px solid var(--amber);border-radius:999px;color:var(--paper);font-size:14px;text-decoration:none;background:rgba(0,0,0,.35)}
.osn-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.osn-pill:hover{background:var(--amber);color:var(--ink)}
.osn-pill:hover .dot{background:var(--ink)}
.osn-band{padding-top:clamp(40px,6vw,80px)!important;padding-bottom:0!important}
.osn-card{display:flex;gap:clamp(20px,4vw,48px);align-items:center;border:1px solid var(--amber);padding:clamp(22px,4vw,44px)}
.osn-card h2{margin:0 0 10px}
.osn-card p{margin:0 0 10px;max-width:62ch}
.osn-card .src{margin:14px 0 0;font-size:12px}
.osn-card .src a{color:var(--paper-2)}
.osn-logo{flex:0 0 auto;font-family:var(--display);font-weight:600;font-size:clamp(40px,6vw,72px);letter-spacing:.04em;color:var(--amber);line-height:1}
@media (max-width:760px){
  .poster-hero{min-height:auto}
  .poster-hero .copy{padding-top:96px}
  .poster-hero .copy .wrap{grid-template-columns:1fr}
  .poster-hero .poster-frame{grid-column:1;grid-row:1;max-width:300px;justify-self:center}
  .poster-hero .poster-copy{grid-row:2}
  .osn-card{flex-direction:column;align-items:flex-start}
}

/* ---- toggle panes (before / design / after) ---- */
.toggle .stage>.pane{position:absolute;inset:0;display:grid;gap:4px;transition:opacity 450ms var(--ease-out),filter 450ms var(--ease-out),transform 900ms var(--ease-out)}
.toggle .stage>.pane.two{grid-template-columns:1fr 1fr}
.toggle .stage>.pane[aria-hidden="true"]{opacity:0;filter:blur(6px);transform:scale(1.03);pointer-events:none}
.toggle .stage .pane img{position:static;width:100%;height:100%;object-fit:cover;opacity:1;filter:none;transform:none;cursor:zoom-in}
@media (max-width:620px){.toggle .stage{aspect-ratio:4/3}.toggle .stage>.pane.two{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

/* ---- Spotlight: inline Instagram posts + sketch list ---- */
.embeds{grid-template-columns:repeat(2,minmax(0,1fr))}
.ig-embed{display:flex;flex-direction:column;gap:10px;min-width:0}
.ig-embed iframe{width:100%;max-width:540px;height:760px;border:1px solid var(--line);border-radius:4px;background:#fff;justify-self:center}
.ig-embed .ig-link{font-size:12px;color:var(--paper-2)}
.sketches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);counter-reset:none}
.sketches li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.sketches li b{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px)}
@media (max-width:760px){.embeds{grid-template-columns:1fr}.ig-embed iframe{height:680px}.sketches{grid-template-columns:1fr}}

/* ---- video reels ---- */
.phone video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.phone.has-video::before{display:none}
.reels:has(.phone:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,280px));justify-content:center}

/* ---- Adam: horizontal poster hero, OSN logo, trailer ---- */
.poster-wide{display:block;min-height:0;background:var(--ink)}
.poster-wide::after{display:none}
.poster-wide .bg{position:relative;inset:auto}
.poster-wide .bg img{display:block;width:100%;height:auto;max-height:86svh;object-fit:cover;filter:none;transform:none!important}
.poster-wide .copy{padding-top:clamp(28px,4vw,48px)}
.osn-logo{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(110px,14vw,170px);aspect-ratio:1.55;background:#fff;border-radius:6px;padding:14px}
.osn-logo img{width:100%;height:auto;display:block}
.trailer video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}

/* light poster hero: keep the header readable */
body:has(.poster-wide) .hdr{background:rgba(11,10,9,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}

/* ================= opening intro (once per session) ================= */
.intro{display:none}
.intro-on .intro{display:block;position:fixed;inset:0;z-index:9999;pointer-events:auto;color:var(--paper)}
.intro-on body{overflow:hidden}
.intro-bar{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform 1100ms var(--ease-in-out)}
.intro-bar.top{top:0}.intro-bar.bot{bottom:0}
.intro-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity 500ms ease,transform 900ms var(--ease-out)}
.intro-word{font-family:var(--display);font-weight:500;font-size:clamp(40px,8.5vw,128px);line-height:1;letter-spacing:.06em;white-space:nowrap;display:flex}
.intro-word span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.35em) scale(1.08);animation:introLetter 1100ms var(--ease-out) forwards;animation-delay:calc(260ms + var(--i) * 55ms)}
.intro-rule{width:min(46vw,520px);height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);transform:scaleX(0);animation:introRule 1200ms var(--ease-in-out) 120ms forwards}
.intro-sub{font-family:var(--mono);font-size:clamp(11px,1.1vw,14px);letter-spacing:.9em;padding-inline-start:.9em;color:var(--amber);opacity:0;animation:introSub 900ms ease 1150ms forwards}
.intro-tc{position:absolute;top:28px;inset-inline-end:clamp(18px,4vw,48px);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--muted);display:flex;align-items:center;gap:8px;opacity:0;animation:introSub 600ms ease 300ms forwards;direction:ltr}
.intro-tc i{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:introBlink 1s steps(2) infinite}
.intro-skip{position:absolute;bottom:28px;inset-inline-end:clamp(18px,4vw,48px);background:none;border:1px solid var(--line-2);color:var(--muted);font:11px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;border-radius:999px;cursor:pointer;opacity:0;animation:introSub 600ms ease 600ms forwards}
.intro-skip:hover{color:var(--paper);border-color:var(--paper)}
/* Arabic: letters must stay joined, so the word is revealed as one shape */
[dir=rtl] .intro-word{letter-spacing:0;font-size:clamp(46px,9vw,140px)}
[dir=rtl] .intro-word span{animation:none;opacity:1;filter:none;transform:none}
[dir=rtl] .intro-word{opacity:0;filter:blur(16px);transform:translateY(.25em) scale(1.06);clip-path:inset(0 0 0 100%);animation:introWordAr 1400ms var(--ease-out) 260ms forwards}
[dir=rtl] .intro-sub{letter-spacing:.3em;padding-inline-start:.3em;font-size:clamp(13px,1.3vw,17px)}
/* the open: the frame splits like a shutter and the site appears behind it */
.intro.out .intro-core{opacity:0;transform:scale(1.04)}
.intro.out .intro-tc,.intro.out .intro-skip{opacity:0!important;transition:opacity 300ms ease}
.intro.out .intro-bar.top{transform:translateY(-101%)}
.intro.out .intro-bar.bot{transform:translateY(101%)}
.intro.out{pointer-events:none}
@keyframes introLetter{to{opacity:1;filter:blur(0);transform:none}}
@keyframes introRule{to{transform:scaleX(1)}}
@keyframes introSub{to{opacity:1}}
@keyframes introBlink{50%{opacity:.2}}
@keyframes introWordAr{to{opacity:1;filter:blur(0);transform:none;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.intro{display:none!important}}

/* hero <picture> wrappers behave like the plain <img> they replace */
.hero .slide picture,.p-hero .bg picture{display:contents}