:root {
  --ink: #090909;
  --ink-2: #111111;
  --paper: #f0eee8;
  --muted: #9c9b96;
  --line: rgba(240, 238, 232, 0.16);
  --line-dark: rgba(9, 9, 9, 0.18);
  --signal: #f0442e;
  --amber: #ffb628;
  --green: #65cc6b;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --display: "Alexandria", "Manrope", sans-serif;
  --latin: "Manrope", "Alexandria", sans-serif;
  --arabic-hand: "Aref Ruqaa Ink", "Aref Ruqaa", "Noto Naskh Arabic", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--display); font-weight: 400; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
body.is-transitioning { overflow: hidden; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
::selection { color: var(--paper); background: var(--signal); }

.grain { position: fixed; inset: -80%; z-index: 100; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation: grainShift .22s steps(2) infinite; }
@keyframes grainShift { 0%{transform:translate3d(-2%,2%,0)}25%{transform:translate3d(3%,-1%,0)}50%{transform:translate3d(-1%,-3%,0)}75%{transform:translate3d(2%,3%,0)}100%{transform:translate3d(-3%,1%,0)} }
.film-scratches { position: fixed; z-index: 99; inset: 0; pointer-events: none; opacity: .13; overflow: hidden; background: repeating-linear-gradient(90deg,transparent 0 18%,rgba(255,255,255,.08) 18.04%,transparent 18.08% 43%); mix-blend-mode: screen; animation: scratches 5s steps(1) infinite; }
.film-scratches::after { content:""; position:absolute; inset:-20% 0; background:linear-gradient(180deg,transparent 0 47%,rgba(255,255,255,.14) 47.1%,transparent 47.25%); animation:filmRoll 3.8s linear infinite; }
@keyframes scratches { 20%{transform:translateX(1.7%);opacity:.08} 40%{transform:translateX(-1.1%);opacity:.16} 70%{transform:none;opacity:.06} }
@keyframes filmRoll { to{transform:translateY(45%)} }
.cursor-glow { position: fixed; z-index:70; width: 34rem; height: 34rem; border-radius: 50%; pointer-events: none; background:radial-gradient(circle,rgba(240,68,46,.3) 0,rgba(240,68,46,.14) 24%,rgba(240,68,46,.045) 46%,transparent 69%);mix-blend-mode:screen;filter:blur(5px);transform: translate(-50%,-50%); transition: opacity .3s; }
.cursor-ring { position:fixed; z-index:180; left:-100px; top:-100px; width:22px; height:22px; border:1px solid rgba(240,68,46,.95); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); display:grid; place-items:center; box-shadow:0 0 18px rgba(240,68,46,.4),inset 0 0 9px rgba(240,68,46,.12); transition:width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),background .28s,border-color .28s; }
.cursor-ring::before,.cursor-ring::after { content:""; position:absolute; background:var(--signal);box-shadow:0 0 8px var(--signal); }
.cursor-ring::before { width:6px;height:1px;left:-4px; }
.cursor-ring::after { width:1px;height:6px;top:-4px; }
.cursor-ring span { opacity:0; font-family:var(--latin); font-size:.42rem; letter-spacing:.16em; transition:opacity .2s; }
.cursor-ring.active { width:66px;height:66px;background:var(--signal);color:#fff;border-color:var(--signal);box-shadow:0 0 36px rgba(240,68,46,.55); }
.cursor-ring.project-hover { width:86px;height:86px; }
.cursor-ring.active span { opacity:1; }
.cinematic-ready,.cinematic-ready a,.cinematic-ready button,.cinematic-ready input,.cinematic-ready textarea,.cinematic-ready select { cursor:none !important; }
.click-burst { position:fixed;z-index:175;left:-100px;top:-100px;width:18px;height:18px;border:1px solid var(--signal);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.2);opacity:0; }
.click-burst::after { content:"";position:absolute;inset:-7px;border:1px solid rgba(255,255,255,.7);border-radius:50%; }
.click-burst.fire { animation:clickBurst .55s cubic-bezier(.16,1,.3,1); }
@keyframes clickBurst { 0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}70%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(5)} }
@keyframes impact { 0%,100%{filter:none}35%{filter:contrast(1.15) saturate(1.2)}55%{filter:drop-shadow(3px 0 0 rgba(240,68,46,.22)) drop-shadow(-3px 0 0 rgba(101,204,107,.15))} }
body.click-impact main { animation:impact .2s steps(2); }
body.language-flash main { animation:impact .34s steps(3); }

/* Cinematic interface */
.cinema-loader { position:fixed;z-index:240;inset:0;background:#050505;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;clip-path:inset(0);transition:clip-path .9s cubic-bezier(.76,0,.24,1),opacity .3s,visibility 0s .9s; }
.cinema-intro:not(.intro-complete) .cinema-loader { opacity:1;visibility:visible;pointer-events:auto;transition:none; }
.intro-complete .cinema-loader { clip-path:inset(50% 0 50% 0);opacity:0; }
.loader-lockup { width:min(65vw,560px);display:grid;gap:1.2rem;position:relative;z-index:2; }
.loader-lockup img { width:100%;height:auto; }
.loader-lockup .loader-symbol { width:74px;justify-self:center;margin-bottom:.3rem;filter:drop-shadow(0 0 20px rgba(240,68,46,.22));animation:symbolArrive 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes symbolArrive { from{opacity:0;transform:scale(.3) rotate(-24deg);filter:blur(14px)}to{opacity:1;transform:none;filter:drop-shadow(0 0 20px rgba(240,68,46,.22))} }
.loader-kicker,.loader-meta,.loader-count { font-family:var(--latin);letter-spacing:.24em; }
.loader-kicker { font-size:.55rem;color:#9c9b96; }
.loader-line { height:1px;background:rgba(255,255,255,.15);overflow:hidden; }
.loader-line i { display:block;width:100%;height:100%;background:var(--signal);transform:translateX(-100%);animation:loaderLine 1.45s cubic-bezier(.76,0,.24,1) both; }
[dir="rtl"] .loader-line i { transform:translateX(100%); }
@keyframes loaderLine { to{transform:translateX(0)} }
.loader-meta { display:flex;justify-content:space-between;gap:1rem;font-size:.48rem;color:#777; }
.loader-meta b { font-weight:400;color:#aaa; }
.loader-orbit { position:absolute;width:min(70vw,640px);aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;animation:loaderOrbit 7s linear infinite; }
.loader-orbit::before,.loader-orbit::after { content:"";position:absolute;border-radius:50%;background:var(--signal);box-shadow:0 0 45px var(--signal); }
.loader-orbit::before { width:10px;height:10px;top:8%;left:20%; }
.loader-orbit::after { width:4px;height:4px;bottom:12%;right:17%;background:var(--amber);box-shadow:0 0 24px var(--amber); }
@keyframes loaderOrbit { to{transform:rotate(360deg)} }
.loader-count { position:absolute;inset:auto var(--pad) var(--pad) auto;font-size:clamp(3rem,8vw,8rem);font-weight:300;color:rgba(255,255,255,.08);animation:countFlicker .5s steps(1) infinite; }
@keyframes countFlicker { 50%{opacity:.45} }

.cinema-transition { position:fixed;z-index:220;inset:0;pointer-events:none;visibility:hidden; }
.shutter { position:absolute;left:0;width:100%;height:51%;background:#050505;transition:transform .52s cubic-bezier(.76,0,.24,1);will-change:transform; }
.shutter-top { top:0;transform:translateY(-101%); }
.shutter-bottom { bottom:0;transform:translateY(101%); }
.cinema-transition.active { visibility:visible; }
.cinema-transition.active .shutter { transform:translateY(0); }
.cinema-transition.release .shutter-top { transform:translateY(-101%); }
.cinema-transition.release .shutter-bottom { transform:translateY(101%); }
.transition-copy { position:absolute;z-index:2;inset:0;display:grid;place-content:center;text-align:center;opacity:0;transform:scale(.94);transition:opacity .22s .25s,transform .4s .18s; }
.transition-copy span,.transition-copy small { font-family:var(--latin);font-size:.5rem;letter-spacing:.28em;color:#777; }
.transition-copy strong { display:block;font-family:var(--latin);font-size:clamp(2.5rem,8vw,8rem);font-weight:300;letter-spacing:-.055em;line-height:1;margin:.65rem var(--pad) 1rem;max-width:90vw; }
.transition-symbol { width:62px;height:auto;justify-self:center;margin-bottom:1.2rem;filter:drop-shadow(0 0 16px rgba(240,68,46,.3));animation:symbolPulse 1.8s ease-in-out infinite; }
@keyframes symbolPulse { 50%{transform:scale(1.08);filter:drop-shadow(0 0 30px rgba(240,68,46,.55))} }
.cinema-transition.active .transition-copy { opacity:1;transform:scale(1); }
.cinema-transition.release .transition-copy { opacity:0;transition-delay:0s; }
.transition-flare { position:absolute;z-index:3;top:0;bottom:0;left:-20%;width:12%;background:white;filter:blur(28px);opacity:0;transform:skewX(-18deg); }
.cinema-transition.active .transition-flare { animation:transitionFlare .7s .2s cubic-bezier(.76,0,.24,1); }
@keyframes transitionFlare { 0%{left:-20%;opacity:0}35%{opacity:.8}100%{left:120%;opacity:0} }
.film-progress { position:fixed;z-index:120;top:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.05);pointer-events:none; }
.film-progress i { display:block;height:100%;background:linear-gradient(90deg,var(--signal),var(--amber));transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px var(--signal);will-change:transform; }
[dir="rtl"] .film-progress i { transform-origin:right; }
.film-hud { position:fixed;z-index:35;inset:auto var(--pad) 1rem;display:flex;justify-content:space-between;align-items:center;direction:ltr;font-family:var(--latin);font-size:.46rem;letter-spacing:.14em;color:rgba(255,255,255,.42);pointer-events:none;mix-blend-mode:difference; }
.hud-rec { display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.72); }
.hud-rec i,.hero-timecode i { width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);animation:recBlink 1.1s steps(1) infinite; }
@keyframes recBlink { 50%{opacity:.15} }

.site-header { position: fixed; inset: 0 0 auto; z-index: 80; height: 88px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, rgba(9,9,9,.92), rgba(9,9,9,0)); transition: height .35s, background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.site-header.scrolled { height: 70px; background: rgba(9,9,9,.82); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; direction: ltr; align-items: center; position: relative; z-index: 2; }
.brand img { display: block; width: 138px; height: 58px; object-fit: contain; object-position: left center; transition: filter .3s, transform .3s; }
.brand:hover img { filter: drop-shadow(0 0 12px rgba(240,68,46,.18)); transform: translateY(-1px); }
.desktop-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2rem; font-size: .76rem; color: #c7c6c1; }
.desktop-nav a { position: relative; padding: .5rem 0; }
.desktop-nav a::after { content: ""; position: absolute; height: 1px; inset: auto 0 0; background: var(--signal); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.lang-toggle { border: 0; background: transparent; font-family: var(--latin); font-size: .68rem; cursor: pointer; padding: .5rem; }
.lang-toggle span { border-bottom: 1px solid currentColor; }
.header-cta { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 999px; padding: .68rem 1rem .68rem 1.2rem; font-size: .7rem; transition: color .3s, background .3s, border-color .3s, transform .2s; }
.header-cta:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.header-cta i { color: var(--signal); font-style: normal; font-size: .9rem; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 6px; position: relative; z-index: 3; }
.menu-toggle span { width: 15px; height: 1px; background: currentColor; transition: transform .35s; }
.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu { position: fixed; z-index: 70; inset: 0; background: var(--signal); color: var(--ink); padding: 9rem var(--pad) 3rem; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.76,0,.24,1); }
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); }
.mobile-symbol { position:absolute;width:min(68vw,480px);height:auto;inset:auto -8vw -7vw auto;opacity:.1;transform:rotate(-8deg) scale(.8);transition:transform .8s .2s cubic-bezier(.16,1,.3,1),opacity .5s;pointer-events:none; }
.menu-open .mobile-symbol { opacity:.15;transform:rotate(0) scale(1); }
.mobile-menu-links { display: flex; flex-direction: column;position:relative;z-index:1; }
.mobile-menu-links a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(9,9,9,.25); }
.mobile-menu-links span { font-family: var(--latin); font-size: .65rem; }
.mobile-menu-links b { font-size: clamp(2.3rem, 10vw, 4.8rem); font-weight: 500; line-height: 1; }
.mobile-menu p { font-family: var(--latin); font-size: .72rem; line-height: 1.7; }

main { min-height: 100vh; position: relative; z-index: 1; }
.page { animation: pageIn .65s cubic-bezier(.22,1,.36,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; font-family: var(--latin); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px rgba(240,68,46,.8); }
.section-number { font-family: var(--latin); font-size: .62rem; color: var(--muted); }
.section-title { margin: 0; font-size: clamp(2.15rem, 5.2vw, 5.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -.05em; }
html[lang="en"] .section-title { font-family: var(--latin); }
.reveal { opacity: 0; transform: translateY(44px) scale(.985); filter:blur(7px); clip-path:inset(0 0 16% 0); transition: opacity .9s, transform 1.05s cubic-bezier(.16,1,.3,1),filter .8s,clip-path 1.05s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; filter:none; clip-path:inset(0); }

/* Home */
.hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: 9rem var(--pad) 3rem; perspective:1200px; --hero-x:0px;--hero-y:0px;--hero-rx:0deg;--hero-ry:0deg; }
.hero-visual { position: absolute; z-index:0; inset: 0; overflow: hidden; background:radial-gradient(circle at 66% 28%,rgba(240,68,46,.38),transparent 29%),radial-gradient(ellipse at 53% 41%,#222 0,#0e0e0e 40%,#050505 76%); }
.projection-screen { position:absolute;z-index:2;width:min(72vw,1180px);aspect-ratio:16/9;left:55%;top:45%;padding:9px;transform:translate(-50%,-50%) translate(var(--hero-x),var(--hero-y)) rotateX(var(--hero-rx)) rotateY(var(--hero-ry));transform-style:preserve-3d;background:rgba(222,221,216,.52);border:1px solid rgba(255,255,255,.72);box-shadow:0 0 0 3px #161616,0 0 0 4px rgba(240,68,46,.16),0 0 75px rgba(240,68,46,.24),0 4rem 9rem rgba(0,0,0,.9);overflow:hidden;transition:transform .18s ease-out; }
.projection-screen::before { content:"";position:absolute;z-index:5;inset:9px;box-shadow:inset 0 0 70px rgba(0,0,0,.72),inset 0 0 2px #000;pointer-events:none; }
.projection-screen::after { content:"CINEMA PROJECTION / TL 24";position:absolute;z-index:7;left:1.25rem;bottom:1rem;font-family:var(--latin);font-size:.48rem;letter-spacing:.18em;color:rgba(255,255,255,.72);text-shadow:0 1px 5px #000; }
.bts-reel { position:absolute;z-index:1;inset:9px;overflow:hidden;background:rgba(5,5,5,.8); }
.bts-shot { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.58;filter:grayscale(1) contrast(1.18) brightness(.94);transform:translate3d(100%,0,0) scale(1.025);transition:transform 1.25s cubic-bezier(.76,0,.24,1);will-change:transform; }
.bts-shot.active { z-index:2;transform:translate3d(0,0,0) scale(1.025); }
.bts-shot.leaving { z-index:1;transform:translate3d(-100%,0,0) scale(1.025); }
.bts-shot.staging { z-index:0;transform:translate3d(100%,0,0) scale(1.025);transition:none; }
.screen-surface { position:absolute;z-index:4;inset:9px;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.4) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;animation:projectionFlicker .18s steps(2) infinite; }
.bts-reel::after { content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.14) 48%,transparent 59%);transform:translateX(-120%);animation:btsGate 4.6s cubic-bezier(.76,0,.24,1) infinite;mix-blend-mode:screen;pointer-events:none; }
@keyframes btsGate { 0%,72%{transform:translateX(-120%);opacity:0}80%{opacity:.6}96%,100%{transform:translateX(120%);opacity:0} }
.bts-frame-meta { position:absolute;z-index:7;top:clamp(6rem,8vw,8rem);left:var(--pad);display:flex;align-items:center;gap:.65rem;direction:ltr;font-family:var(--latin);font-size:.47rem;letter-spacing:.15em;color:rgba(255,255,255,.68); }
.bts-frame-meta i { width:42px;height:1px;background:rgba(255,255,255,.18);position:relative;overflow:hidden; }
.bts-frame-meta i::after { content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left; }
.bts-frame-meta.running i::after { animation:slideProgress 4.6s linear both; }
@keyframes slideProgress { to{transform:scaleX(1)} }
.bts-frame-meta b { font-weight:400;color:rgba(255,255,255,.78); }
.hero-visual::before { content:"";position:absolute;z-index:1;left:50%;top:0;width:84%;height:64%;transform:translateX(-50%);background:linear-gradient(165deg,transparent 0 16%,rgba(255,255,255,.07) 48%,transparent 70%);clip-path:polygon(48% 0,58% 0,94% 100%,4% 100%);filter:blur(15px);opacity:.65;animation:beamBreathe 4.6s ease-in-out infinite; }
.hero-visual::after { content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,4,4,.88) 0%,transparent 22%,transparent 79%,rgba(4,4,4,.76) 100%),linear-gradient(to top,#060606 0%,rgba(6,6,6,.78) 17%,transparent 46%),linear-gradient(to bottom,rgba(0,0,0,.54),transparent 24%); }
.projector-beam { position:absolute;z-index:1;width:72vw;height:66vh;left:52%;top:-8%;transform:translateX(-50%);clip-path:polygon(47% 0,55% 0,100% 100%,0 100%);background:radial-gradient(ellipse at 51% 0,rgba(255,255,255,.27),rgba(255,255,255,.07) 32%,transparent 72%);filter:blur(7px);opacity:.52;animation:beamBreathe 4.6s ease-in-out infinite; }
.cinema-curtains { position:absolute;z-index:4;inset:0;pointer-events:none;background:repeating-linear-gradient(92deg,rgba(0,0,0,.94) 0 3vw,rgba(32,32,32,.82) 5vw,rgba(2,2,2,.96) 8vw) left/18vw 100% no-repeat,repeating-linear-gradient(88deg,rgba(2,2,2,.96) 0 3vw,rgba(32,32,32,.82) 5vw,rgba(0,0,0,.94) 8vw) right/18vw 100% no-repeat;filter:drop-shadow(0 0 40px #000); }
.cinema-seats { position:absolute;z-index:6;left:-3%;right:-3%;bottom:-4.5rem;height:12rem;background:radial-gradient(ellipse at 4% 100%,#151515 0 36%,transparent 38%) 0 0/9rem 8rem repeat-x,linear-gradient(to top,#030303 0 58%,transparent 60%);filter:drop-shadow(0 -15px 25px #000);pointer-events:none; }
@keyframes beamBreathe { 50%{opacity:.72;filter:blur(10px)} }
@keyframes projectionFlicker { 50%{opacity:.88} }
.lens-flare { position:absolute;z-index:5;width:2px;height:150%;left:58%;top:-20%;background:rgba(255,255,255,.7);box-shadow:0 0 18px 5px rgba(255,223,196,.7),0 0 80px 20px rgba(240,68,46,.18);transform:rotate(17deg) translateX(-40vw);opacity:0;animation:lensTravel 8s 1.1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes lensTravel { 0%,15%{transform:rotate(17deg) translateX(-40vw);opacity:0}25%{opacity:.9}45%,100%{transform:rotate(17deg) translateX(55vw);opacity:0} }
.sprockets { position:absolute;z-index:2;top:0;bottom:0;width:18px;background:repeating-linear-gradient(to bottom,transparent 0 17px,rgba(255,255,255,.2) 18px 28px,transparent 29px 40px);opacity:.55; }
.sprockets-left { left:8px; }.sprockets-right { right:8px; }
.focus-corner { position:absolute;z-index:3;width:38px;height:38px;border-color:rgba(255,255,255,.62);border-style:solid; }
.focus-a { top:12%;left:12%;border-width:1px 0 0 1px; }.focus-b { right:12%;bottom:12%;border-width:0 1px 1px 0; }
.hero-timecode { position:absolute;z-index:3;top:1rem;right:1.2rem;display:flex;align-items:center;gap:.5rem;direction:ltr;font-family:var(--latin);font-size:.46rem;letter-spacing:.12em;color:rgba(255,255,255,.58); }
.hero-timecode b {font-weight:400;color:rgba(255,255,255,.82)}
.hero-content { width: 100%; position: relative; z-index: 6; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
.hero-copy { max-width: 1050px; }
.hero-copy h1 { margin: 0; max-width:880px;font-size: clamp(2.6rem, 6.25vw, 6.7rem); line-height: 1.02; letter-spacing: -.06em; font-weight: 400; }
.hero-copy h1 em { color: var(--signal); font-style: normal; }
.hero-copy p { margin: 1.8rem 0 0; max-width: 600px; color: #c5c3bd; line-height: 1.8; font-size: clamp(.85rem, 1.2vw, 1.05rem); }
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.archive-status { display:grid;grid-template-columns:auto 1fr;column-gap:.65rem;row-gap:.18rem;align-items:center;padding:.72rem .9rem;border:1px solid rgba(255,255,255,.2);background:rgba(4,4,4,.5);backdrop-filter:blur(12px);text-align:start; }
.archive-status i { grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 16px var(--signal);animation:recPulse 1.4s infinite; }
.archive-status b { font-size:.62rem;font-weight:500; }
.archive-status small { font-size:.48rem;color:#aaa; }
.play-reel { width: 116px; height: 116px; border-radius: 50%; border: 1px solid rgba(255,255,255,.36); background: rgba(8,8,8,.2); color: white; cursor: pointer; display: grid; place-content: center; gap: 5px; backdrop-filter: blur(8px); transition: background .3s, color .3s, transform .3s; }
.play-reel span:first-child { font-size: 1.3rem; }
.play-reel span:last-child { font-family: var(--latin); font-size: .54rem; letter-spacing: .12em; }
.play-reel:hover { background: var(--paper); color: var(--ink); transform: scale(1.05); }
.scroll-note { font-family: var(--latin); writing-mode: vertical-rl; font-size: .53rem; color: var(--muted); letter-spacing: .16em; }
.film-ticker { overflow:hidden;border-block:1px solid var(--line);background:#060606;padding:.75rem 0;direction:ltr; }
.film-ticker div { width:max-content;display:flex;align-items:center;gap:1.8rem;animation:tickerMove 20s linear infinite; }
.film-ticker span { font-family:var(--latin);font-size:.54rem;letter-spacing:.22em;color:#888; }
.film-ticker i { width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 9px var(--signal); }
@keyframes tickerMove { to{transform:translateX(-50%)} }
.server-fallback { min-height:100svh;background:#050505; }
.fallback-premiere { position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:clamp(7.5rem,13vw,11rem) var(--pad) clamp(3rem,6vw,5rem);overflow:hidden;isolation:isolate; }
.fallback-premiere-poster { position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.12) brightness(.47); }
.fallback-premiere-shade { position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.76) 38%,rgba(0,0,0,.15) 76%),linear-gradient(0deg,rgba(0,0,0,.86),transparent 62%); }
.fallback-premiere::after { content:"";position:absolute;z-index:-1;left:-12vw;bottom:-20vw;width:48vw;aspect-ratio:1;border-radius:50%;background:var(--signal);filter:blur(10vw);opacity:.24; }
.fallback-premiere-copy { width:min(560px,48vw);display:flex;flex-direction:column;align-items:flex-start;gap:.7rem; }
.fallback-premiere-copy p { margin:0 0 .45rem;font-family:var(--latin);font-size:.55rem;letter-spacing:.18em;color:var(--signal);direction:ltr; }
.fallback-premiere-copy h1 { margin:0;font-size:clamp(1.35rem,3vw,3.1rem);font-weight:400;line-height:1.35; }
.fallback-premiere-copy strong { font-size:.78rem;font-weight:400;color:#e6e3dc; }
.fallback-premiere-copy span { font-family:var(--latin);font-size:.55rem;letter-spacing:.14em;color:#8e8d89; }
.fallback-player { width:min(520px,42vw);margin-inline-start:auto;border:1px solid rgba(255,255,255,.28);padding:7px;background:rgba(0,0,0,.42);box-shadow:0 24px 80px rgba(0,0,0,.5);backdrop-filter:blur(10px); }
.fallback-player video { display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:cover; }
.latest-release { position:relative;display:grid;grid-template-columns:minmax(210px,32vw) 1fr auto;align-items:center;gap:clamp(1.2rem,3vw,3.5rem);margin:clamp(1.2rem,3vw,3rem) var(--pad) 0;padding:clamp(.75rem,1.4vw,1.15rem);border:1px solid rgba(255,255,255,.16);background:linear-gradient(100deg,rgba(240,68,46,.14),rgba(255,255,255,.025) 52%,rgba(255,255,255,.05));overflow:hidden;transition:border-color .35s,background .35s,transform .35s; }
.latest-release::after { content:"";position:absolute;inset:-70% auto -70% -10%;width:34%;background:var(--signal);filter:blur(90px);opacity:.12;pointer-events:none; }
.latest-release:hover { border-color:rgba(240,68,46,.72);background:linear-gradient(100deg,rgba(240,68,46,.2),rgba(255,255,255,.04) 55%,rgba(255,255,255,.07));transform:translateY(-3px); }
.latest-release-image { position:relative;aspect-ratio:16/8.6;overflow:hidden;background:#111; }
.latest-release-image img { width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.72);transition:transform .8s cubic-bezier(.16,1,.3,1),filter .55s; }
.latest-release-image::after { content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 45px rgba(0,0,0,.55); }
.latest-release-image span { position:absolute;z-index:2;inset:50% auto auto 50%;translate:-50% -50%;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.65);font-size:.72rem;backdrop-filter:blur(8px); }
.latest-release:hover .latest-release-image img { transform:scale(1.045);filter:grayscale(0) contrast(1.04) brightness(.88); }
.latest-release-copy { position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem; }
.latest-release-copy small { font-family:var(--latin);font-size:.52rem;letter-spacing:.18em;color:var(--signal);direction:ltr; }
.latest-release-copy strong { font-size:clamp(1.15rem,2.2vw,2.15rem);font-weight:400;line-height:1.2; }
.latest-release-copy p { margin:0;color:#aaa;font-size:.7rem; }
.latest-release>b { position:relative;z-index:1;display:flex;align-items:center;gap:.8rem;font-size:.67rem;font-weight:400;white-space:nowrap; }
.latest-release>b i { width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-style:normal;transition:background .3s,color .3s; }
.latest-release:hover>b i { background:var(--signal);border-color:var(--signal);color:white; }
.home-intro { display: grid; grid-template-columns: .65fr 1.35fr; gap: 5vw; padding: clamp(6rem,12vw,12rem) var(--pad); border-top: 1px solid var(--line); }
.intro-mark { display:flex;flex-direction:column;align-items:flex-start;gap:2.5rem; }
.section-symbol { width:clamp(72px,10vw,140px);height:auto;opacity:.55;filter:drop-shadow(0 0 20px rgba(240,68,46,.12));transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s; }
.home-intro:hover .section-symbol { transform:rotate(-7deg) scale(1.08);opacity:.9; }
.home-intro h2 { margin: 0; max-width: 900px; font-size: clamp(1.75rem, 3.8vw, 4.1rem); font-weight: 400; line-height: 1.35; letter-spacing: -.035em; }
.home-intro h2 span { color: var(--muted); }
.featured { padding: 0 var(--pad) 8rem; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.view-all { font-size: .72rem; padding-bottom: .35rem; border-bottom: 1px solid; }
.project-strip { display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; }
.project-card { --rx:0deg;--ry:0deg;--mx:50%;--my:50%;position: relative; min-height: 600px; overflow: hidden; background: #181818; cursor: pointer;transform-style:preserve-3d;will-change:transform;transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .25s,filter .25s; }
.project-card.reveal.visible { transform:perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); }
.project-card::after { content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.2),transparent 23%);opacity:0;mix-blend-mode:overlay;transition:opacity .35s; }
.project-card:hover::after { opacity:1; }
.project-card:nth-child(1) { grid-column: span 7; }
.project-card:nth-child(2) { grid-column: span 5; margin-top: 9rem; }
.project-art { position: absolute; inset: 0; overflow: hidden; background: var(--card-bg, #222); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.project-art::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; left: var(--orb-x,45%); top: var(--orb-y,32%); transform: translate(-50%,-50%); background: var(--orb,#f0442e); filter: blur(52px); opacity: .68; transition: transform 1s; }
.project-cover { position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.72);opacity:.84;transform:scale(1.015);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .8s,opacity .6s; }
.project-art::after { content: ""; position: absolute;z-index:2; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9), transparent 62%),linear-gradient(90deg,rgba(0,0,0,.3),transparent 55%), repeating-linear-gradient(105deg, transparent 0 55px, rgba(255,255,255,.035) 56px 57px); }
.project-card:hover .project-art { transform: scale(1.035); }
.project-card:hover .project-cover { transform:scale(1.075);filter:grayscale(0) contrast(1.03) brightness(.88);opacity:1; }
.project-card:hover .project-art::before { transform: translate(-45%,-45%) scale(1.12); }
.project-scan { position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden; }
.project-scan::after { content:"";position:absolute;left:0;right:0;height:1px;top:-5%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),var(--signal),transparent);box-shadow:0 0 18px rgba(255,255,255,.65);opacity:0; }
.project-card:hover .project-scan::after { animation:projectScan 1.15s cubic-bezier(.45,0,.55,1); }
@keyframes projectScan { 0%{top:-5%;opacity:0}10%{opacity:.8}90%{opacity:.5}100%{top:105%;opacity:0} }
.project-glyph { position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%,-50%); font-family: var(--latin); font-size: clamp(4rem,10vw,10rem); font-weight: 300; letter-spacing: -.08em; color: rgba(255,255,255,.76); mix-blend-mode: overlay; white-space: nowrap; }
.project-meta { position: absolute; z-index: 2; inset: auto 1.5rem 1.5rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; }
.project-meta small { font-family: var(--latin); color: #c3c2bd; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.project-meta h3 { margin: .45rem 0 0; font-size: clamp(1.6rem,3vw,3.4rem); font-weight: 400; }
.project-meta i { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; display: grid; place-items: center; font-style: normal; transition: background .3s,color .3s; }
.project-card:hover .project-meta i { background: white; color: black; }
.card-timecode { position:absolute;z-index:2;top:1.5rem;right:1.5rem;font-family:var(--latin);font-size:.5rem;letter-spacing:.12em;color:rgba(255,255,255,.55);direction:ltr; }
.project-film-badge { position:absolute;z-index:4;top:1.3rem;left:1.3rem;display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.35);background:rgba(4,4,4,.5);backdrop-filter:blur(9px);font-family:var(--latin);font-size:.48rem;letter-spacing:.1em;color:#fff;direction:ltr; }
.project-film-badge i { color:var(--signal);font-style:normal;font-size:.55rem; }
.project-card.filtering-out { opacity:0;filter:blur(12px);transform:scale(.94) !important;pointer-events:none; }
.capabilities { background: var(--paper); color: var(--ink); padding: clamp(6rem,11vw,11rem) var(--pad); }
.capabilities .eyebrow { color: #5d5d59; }
.cap-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: end; }
.cap-grid h2 { font-size: clamp(2.3rem,5vw,5.25rem); font-weight: 400; line-height: 1.08; letter-spacing: -.05em; margin: 0; }
.cap-list { border-top: 1px solid var(--line-dark); }
.cap-list a { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-dark); font-size: .85rem; }
.cap-list span { font-family: var(--latin); font-size: .6rem; color: #777; }
.home-contact { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 7rem var(--pad); position: relative; overflow: hidden; }
.home-contact::before { content: ""; position: absolute; width: 45vw; aspect-ratio: 1; background: var(--signal); filter: blur(9vw); border-radius: 50%; opacity: .25; left: 50%; top: 55%; transform: translate(-50%,-50%); }
.home-contact h2 { position: relative; font-size: clamp(2.4rem,6vw,6.25rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 400; margin: 0 auto 2.5rem; }
.home-contact a { position: relative; align-self: center; padding: 1rem 1.5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; transition: .3s; }
.home-contact a:hover { background: var(--signal); border-color: var(--signal); }

/* Inner pages */
.page-hero { padding: clamp(10rem,16vw,15rem) var(--pad) 4rem; min-height: 64vh; display: grid; grid-template-columns: 1fr .55fr; gap: 5vw; align-items: end; border-bottom: 1px solid var(--line);position:relative;overflow:hidden;isolation:isolate; }
.page-hero::before { content:"";position:absolute;z-index:-1;width:min(35vw,480px);aspect-ratio:659/515;inset:18% auto auto 56%;background:url("/assets/traffic-light-symbol.png") center/contain no-repeat;opacity:.055;filter:grayscale(.2);transform:rotate(-7deg);animation:pageStamp 9s ease-in-out infinite; }
.visual-page-hero { background:#060606; }
.visual-page-hero::after { content:"";position:absolute;z-index:-2;inset:0;background-image:linear-gradient(90deg,rgba(6,6,6,.91) 0%,rgba(6,6,6,.34) 58%,rgba(6,6,6,.74) 100%),linear-gradient(to top,#090909 0%,transparent 65%),var(--page-bg);background-size:cover;background-position:center;filter:grayscale(1) contrast(1.12);opacity:.68;transform:scale(1.025);animation:pageImageDrift 12s ease-in-out infinite alternate; }
@keyframes pageImageDrift { to{transform:scale(1.07) translateX(1%)} }
@keyframes pageStamp { 50%{transform:rotate(2deg) scale(1.05);opacity:.085} }
.page-hero p { max-width: 520px; margin: 0 0 .8rem; color: #b4b2ad; font-size: .9rem; line-height: 1.8; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; padding: 2rem var(--pad); border-bottom: 1px solid var(--line); position: sticky; top: 70px; z-index: 10; background: rgba(9,9,9,.88); backdrop-filter: blur(18px); }
.filter { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .58rem 1rem; font-size: .68rem; cursor: pointer; transition: .25s; }
.filter:hover, .filter.active { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.projects-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); }
.projects-grid .project-card { min-height: min(70vw,720px); background: var(--ink); }
.projects-grid .project-card:nth-child(n) { margin: 0; grid-column: auto; }
.projects-grid .project-card.hidden { display: none; }
.project-index { position: absolute; z-index: 2; top: 1.5rem; left: 1.5rem; font-family: var(--latin); font-size: .58rem; }

.awards-list { padding: 3rem var(--pad) 9rem; }
.award { display: grid; grid-template-columns: .28fr 1.1fr 1fr auto; align-items: center; gap: 2rem; min-height: 170px; border-bottom: 1px solid var(--line); transition: padding .3s, color .3s; }
.award:hover { padding-inline: 1rem; color: var(--signal); }
.award-year { font-family: var(--latin); font-size: .68rem; color: var(--muted); }
.award h2 { font-size: clamp(1.4rem,3vw,3rem); font-weight: 400; margin: 0; }
.award p { font-size: .76rem; line-height: 1.8; color: var(--muted); margin: 0; }
.award-mark { width: 64px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-family: var(--latin); font-size: .55rem; }

.services-list { padding: 3rem var(--pad) 8rem; }
.service-row { border-bottom: 1px solid var(--line); }
.service-button { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: .18fr 1fr auto; gap: 2rem; align-items: center; text-align: start; padding: 2.2rem 0; cursor: pointer; }
.service-button > span { font-family: var(--latin); font-size: .62rem; color: var(--muted); }
.service-button h2 { margin: 0; font-size: clamp(1.7rem,4vw,4rem); font-weight: 400; }
.service-button i { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1.1rem; transition: transform .4s, background .3s, color .3s; }
.service-row.open .service-button i { transform: rotate(45deg); background: var(--paper); color: var(--ink); }
.service-panel { display: grid; grid-template-columns: .18fr 1fr auto; gap: 2rem; max-height: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,1,.36,1); }
.service-row.open .service-panel { max-height: 300px; }
.service-panel p { grid-column: 2; max-width: 740px; color: #b6b4ae; line-height: 1.9; font-size: .82rem; margin: 0 0 2.2rem; }
.service-panel ul { margin: 0 0 2.2rem; padding: 0; list-style: none; color: var(--muted); font-size: .7rem; line-height: 2; }

.contact-wrap { padding: clamp(10rem,16vw,15rem) var(--pad) 8rem; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; min-height: 100vh; }
.visual-contact { position:relative;isolation:isolate;overflow:hidden;background:#060606; }
.visual-contact::before { content:"";position:absolute;z-index:0;inset:0;background-image:linear-gradient(90deg,rgba(6,6,6,.7),rgba(6,6,6,.93) 48%,rgba(6,6,6,.97)),linear-gradient(to top,#090909,transparent 65%),var(--page-bg);background-size:cover;background-position:center;filter:grayscale(1) contrast(1.15);opacity:.62; }
.visual-contact > * { position:relative;z-index:1; }
.contact-copy h1 { font-size: clamp(2.55rem,5.6vw,5.8rem); line-height: 1.04; font-weight: 400; letter-spacing: -.055em; margin: 0 0 2rem; }
.contact-symbol { width:clamp(70px,8vw,115px);height:auto;margin-bottom:2rem;opacity:.68;filter:drop-shadow(0 0 22px rgba(240,68,46,.16)); }
.contact-copy > p { color: var(--muted); font-size: .82rem; line-height: 1.9; max-width: 450px; }
.contact-details { margin-top: 4rem; display: grid; gap: 1.3rem; }
.contact-details div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: .8rem; font-size: .7rem; }
.contact-details span { color: var(--muted); }
.contact-form { align-self: center; }
.field { position: relative; margin-bottom: 1.3rem; }
.field label { display: block; font-size: .62rem; color: var(--muted); margin-bottom: .6rem; }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--paper); padding: .85rem 0; outline: 0; transition: border-color .3s; border-radius: 0; }
.field select { appearance: none; }
.field select option { background: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--signal); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; }
.submit { border: 0; background: var(--signal); color: white; min-width: 190px; border-radius: 999px; padding: 1rem 1.4rem; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; transition: transform .3s, filter .3s; }
.submit:hover { transform: translateY(-2px); filter: brightness(1.08); }
.form-note { max-width: 240px; margin: 0; color: var(--muted); font-size: .58rem; line-height: 1.7; }
.field-error { min-height: 1rem; display: block; color: var(--signal); font-size: .55rem; padding-top: .4rem; }

/* Project detail */
.project-detail-hero { min-height: 100svh; position: relative; display: flex; align-items: end; overflow: hidden; padding: 10rem var(--pad) 3rem; }
.project-detail-hero::after { content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(to top,rgba(5,5,5,.94) 0,rgba(5,5,5,.22) 58%,rgba(5,5,5,.48) 100%),linear-gradient(90deg,rgba(5,5,5,.72),transparent 62%);pointer-events:none; }
.project-detail-hero .project-art { inset: 0; }
.project-detail-hero .project-art::before { width: 55%; left: 55%; top: 40%; filter: blur(80px); }
.detail-cover { position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.78) contrast(1.08) brightness(.68);transform:scale(1.02);animation:pageImageDrift 12s ease-in-out infinite alternate; }
.project-detail-hero .project-glyph { z-index:2;font-size: clamp(7rem,22vw,25rem); opacity: .18; }
.detail-symbol { position:absolute;z-index:4;top:clamp(6rem,10vw,9rem);right:var(--pad);width:clamp(64px,8vw,112px);height:auto;opacity:.7;filter:drop-shadow(0 0 26px rgba(240,68,46,.22));animation:symbolPulse 3.2s ease-in-out infinite; }
.project-detail-title { position: relative; z-index: 3; width: 100%; }
.project-detail-title .eyebrow { color: #d7d5cf; }
.project-detail-title h1 { margin: 0; font-size: clamp(2.8rem,7vw,7.5rem); line-height: 1; font-weight: 400; letter-spacing: -.06em; max-width: 1050px; }
.project-facts { position: relative; z-index: 3; margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 2.5rem; }
.project-facts div { min-width: 120px; }
.project-facts small { display: block; font-family: var(--latin); color: #b7b5af; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; }
.project-facts b { display: block; margin-top: .5rem; font-weight: 400; font-size: .72rem; }
.case-intro { padding: 8rem var(--pad); display: grid; grid-template-columns: .55fr 1.45fr; gap: 7vw; }
.case-intro h2 { margin: 0; font-size: clamp(2.1rem,5vw,5.4rem); font-weight: 400; line-height: 1.25; letter-spacing: -.04em; }
.case-intro p { color: #b5b3ad; line-height: 2; font-size: .85rem; max-width: 750px; }
.case-film { padding:0 var(--pad) 8rem; }
.case-film-head { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;direction:ltr; }
.case-film-head .eyebrow { margin:0; }
.case-film-head span { font-family:var(--latin);font-size:.5rem;letter-spacing:.15em;color:rgba(255,255,255,.55); }
.case-player { position:relative;aspect-ratio:16/9;background:#020202;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 2.5rem 7rem rgba(0,0,0,.58),0 0 55px rgba(240,68,46,.08); }
.case-player video { display:block;width:100%;height:100%;object-fit:contain;background:#020202; }
.case-player iframe { display:block;width:100%;height:100%;border:0;background:#020202; }
.portrait-film { max-width:720px;margin-inline:auto;width:100%; }
.portrait-film .case-film-head { max-width:620px;margin-inline:auto;margin-bottom:1.1rem; }
.case-player.portrait-player { width:min(100%,620px);aspect-ratio:9/16;margin-inline:auto; }
.drive-player::after { content:"TL / DRIVE PREVIEW"; }
.case-player::before { content:"";position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 85px rgba(0,0,0,.42); }
.case-player::after { content:"TL / MASTER 24 FPS";position:absolute;z-index:3;left:1rem;top:1rem;pointer-events:none;font-family:var(--latin);font-size:.46rem;letter-spacing:.15em;color:rgba(255,255,255,.66);text-shadow:0 1px 5px #000; }
.case-player-edge { position:absolute;z-index:2;inset:0;pointer-events:none;border:8px solid rgba(0,0,0,.32); }
.case-frames { padding: 0 var(--pad) 8rem; display: grid; grid-template-columns: 1.3fr .7fr; gap: 1rem; }
.case-frame { min-height: 560px; background: var(--card-bg); position: relative; overflow: hidden; }
.case-frame:nth-child(2) { min-height: 430px; margin-top: 8rem; }
.case-frame::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--orb); filter: blur(70px); opacity: .72; left: 50%; top: 40%; transform: translate(-50%,-50%); }
.case-frame span { position: absolute; inset: auto 1rem 1rem; font-family: var(--latin); font-size: .54rem; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.next-project { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: 7rem var(--pad); background: var(--paper); color: var(--ink); }
.next-project small { display: block; font-family: var(--latin); font-size: .58rem; color: #71716d; margin-bottom: 1rem; }
.next-project h2 { margin: 0; font-size: clamp(2.15rem,5vw,5.4rem); font-weight: 400; letter-spacing: -.05em; }
.next-project i { width: 72px; height: 72px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1.4rem; }

.reel-modal { position: fixed; z-index: 95; inset: 0; background: rgba(0,0,0,.94); padding: var(--pad); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .4s; }
.reel-modal.open { opacity: 1; pointer-events: auto; }
.reel-window { width: min(100%,1100px); aspect-ratio: 16/9; background: #131313; border: 1px solid var(--line); position: relative; display: grid; place-content: center; text-align: center; overflow: hidden; }
.reel-modal .reel-window { transform:scale(.82) rotateX(8deg);filter:blur(10px);transition:transform .65s cubic-bezier(.16,1,.3,1),filter .5s; }
.reel-modal.open .reel-window { transform:scale(1) rotateX(0);filter:none; }
.reel-window::before { content: ""; width: 28vw; max-width: 380px; aspect-ratio: 1; position: absolute; border-radius: 50%; background: var(--signal); filter: blur(60px); opacity: .4; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.reel-window div { position: relative; max-width: 420px; padding: 2rem; }
.modal-symbol { width:82px;height:auto;margin:0 auto 1.5rem;filter:drop-shadow(0 0 26px rgba(240,68,46,.3)); }
.reel-window h2 { font-size: clamp(1.6rem,4vw,4rem); font-weight: 400; margin: 0 0 1rem; }
.reel-window p { color: var(--muted); line-height: 1.8; font-size: .75rem; }
.reel-window.reel-video { display:block;background:#020202; }
.reel-window.reel-video::before { display:none; }
.reel-window.reel-video iframe { display:block;width:100%;height:100%;border:0;background:#020202; }
.reel-close { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--ink); cursor: pointer; z-index: 2; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 2rem; transform: translate(-50%,2rem); opacity: 0; background: var(--paper); color: var(--ink); padding: .8rem 1.2rem; border-radius: 999px; font-size: .68rem; transition: .35s; pointer-events: none; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.filter:active,.submit:active,.service-button:active,.lang-toggle:active,.menu-toggle:active,.header-cta:active,.home-contact a:active,.next-project:active { transform:scale(.96); }
.play-reel:active { transform:scale(.91) !important; }

.site-footer { position: relative; z-index: 1; background: #050505; border-top: 1px solid var(--line); padding: 3rem var(--pad); }
.footer-symbol { display:block;width:clamp(72px,8vw,112px);height:auto;opacity:.9;filter:drop-shadow(0 0 20px rgba(240,68,46,.18));transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s; }
.site-footer:hover .footer-symbol { transform:rotate(-4deg) scale(1.05);filter:drop-shadow(0 0 30px rgba(240,68,46,.3)); }
.footer-meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; font-family: var(--latin); font-size: .58rem; color: var(--muted); }

@media (max-width: 980px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .hero-content { grid-template-columns: 1fr; }
  .hero-side { display: none; }
  .projection-screen { width:86vw;left:55%;top:43%; }
  .home-intro, .cap-grid, .page-hero, .contact-wrap, .case-intro { grid-template-columns: 1fr; }
  .home-intro { gap: 2rem; }
  .page-hero { min-height: 58vh; }
  .cap-grid { gap: 4rem; }
  .project-card:nth-child(1), .project-card:nth-child(2) { grid-column: span 6; margin-top: 0; min-height: 520px; }
  .award { grid-template-columns: .25fr 1fr auto; }
  .award p { display: none; }
  .contact-wrap { gap: 4rem; }
}

@media (max-width: 680px) {
  :root { --pad: 1.2rem; }
  .site-header { height: 72px; }
  .brand img { width: 112px; height: 50px; }
  .header-actions { gap: .35rem; }
  .hero { min-height: 92svh; padding-bottom: 2rem; }
  .hero-copy h1 { font-size: clamp(2.35rem,11vw,3.7rem);max-width:92%; }
  .hero-copy p { font-size: .76rem; max-width: 90%; }
  .hero-visual::before { width: 120vw; filter: blur(14px); }
  .bts-shot { object-position:center;opacity:.5;filter:grayscale(1) contrast(1.15) brightness(.9); }
  .bts-frame-meta { display:none; }
  .projection-screen { width:112vw;left:54%;top:38%;padding:5px;opacity:.94; }
  .projection-screen::before,.screen-surface,.bts-reel { inset:5px; }
  .projection-screen::after { left:.8rem;bottom:.65rem;font-size:.38rem; }
  .cinema-curtains { background-size:10vw 100%; }
  .cinema-seats { height:8rem;bottom:-4.5rem;opacity:.86; }
  .hero-timecode,.sprockets { opacity:.55; }
  .film-hud { inset:auto 1.2rem .65rem; }
  .film-hud span:last-child { display:none; }
  .loader-lockup { width:78vw; }
  .loader-lockup .loader-symbol { width:58px; }
  .loader-orbit { width:92vw; }
  .transition-copy strong { font-size:clamp(2rem,12vw,4.2rem); }
  .fallback-premiere { min-height:auto;padding-top:7rem;display:grid;gap:1.8rem; }
  .fallback-premiere-shade { background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.25)); }
  .fallback-premiere-copy,.fallback-player { width:100%; }
  .fallback-premiere-copy h1 { font-size:1.35rem; }
  .fallback-player { margin:0; }
  .latest-release { grid-template-columns:1fr;gap:1rem;margin-top:1rem;padding:.7rem; }
  .latest-release-copy { padding-inline:.25rem; }
  .latest-release-copy strong { font-size:1.15rem; }
  .latest-release>b { justify-content:space-between;padding:.1rem .25rem .35rem; }
  .home-intro { padding-block: 6rem; }
  .intro-mark { flex-direction:row;align-items:center;justify-content:space-between; }
  .section-symbol { width:76px; }
  .section-head { align-items: center; }
  .section-head .section-title { font-size: 2.5rem; }
  .project-strip { display: block; }
  .project-card:nth-child(1), .project-card:nth-child(2) { min-height: 490px; margin-bottom: 1rem; }
  .capabilities { padding-block: 6rem; }
  .home-contact { min-height: 65vh; }
  .page-hero { min-height: 55vh; padding-top: 9rem; }
  .visual-page-hero::after { background-position:58% center;opacity:.56; }
  .visual-contact::before { background-position:38% center;opacity:.48; }
  .projects-grid { grid-template-columns: 1fr; }
  .projects-grid .project-card { min-height: 125vw; }
  .filters { top: 69px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter { flex: 0 0 auto; }
  .award { min-height: 145px; grid-template-columns: .2fr 1fr auto; gap: 1rem; }
  .award-mark { width: 48px; }
  .service-button { grid-template-columns: .12fr 1fr auto; gap: 1rem; }
  .service-button i { width: 38px; height: 38px; }
  .service-panel { grid-template-columns: .12fr 1fr; gap: 1rem; }
  .service-panel p { grid-column: 2; }
  .service-panel ul { display: none; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .submit { width: 100%; }
  .case-frames { grid-template-columns: 1fr; }
  .case-film { padding-bottom:6rem; }
  .case-film-head span { display:none; }
  .case-player-edge { border-width:4px; }
  .case-frame, .case-frame:nth-child(2) { min-height: 110vw; margin-top: 0; }
  .project-facts { gap: 1.4rem; }
  .next-project i { width: 52px; height: 52px; flex: 0 0 auto; }
  .footer-meta { flex-direction: column; }
  .footer-symbol { width:68px; }
  .cursor-glow { display: none; }
}

@media (pointer: coarse) {
  .cursor-ring,.click-burst { display:none; }
  .project-card.reveal.visible { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cinema-loader,.cinema-transition,.cursor-ring,.click-burst,.film-scratches { display:none !important; }
  .reveal { opacity:1;transform:none;filter:none;clip-path:none; }
}

/* Arabic editorial scale — handwritten display sentences at 25% of the previous size. */
html[lang="ar"] { --display:var(--arabic-hand); }
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select { font-family:var(--arabic-hand); }
html[lang="ar"] .hero-copy h1 { font-size:clamp(.65rem,1.5625vw,1.675rem);line-height:1.55;letter-spacing:0;max-width:620px; }
html[lang="ar"] .section-title { font-size:clamp(.54rem,1.3vw,1.375rem);line-height:1.6;letter-spacing:0; }
html[lang="ar"] .home-intro h2 { font-size:clamp(.44rem,.95vw,1.025rem);line-height:1.8;letter-spacing:0; }
html[lang="ar"] .cap-grid h2 { font-size:clamp(.575rem,1.25vw,1.3125rem);line-height:1.65;letter-spacing:0; }
html[lang="ar"] .home-contact h2 { font-size:clamp(.6rem,1.5vw,1.5625rem);line-height:1.65;letter-spacing:0; }
html[lang="ar"] .project-meta h3 { font-size:clamp(.4rem,.75vw,.85rem);line-height:1.65;letter-spacing:0; }
html[lang="ar"] .award h2 { font-size:clamp(.35rem,.75vw,.75rem);line-height:1.65;letter-spacing:0; }
html[lang="ar"] .service-button h2 { font-size:clamp(.425rem,1vw,1rem);line-height:1.65;letter-spacing:0; }
html[lang="ar"] .contact-copy h1 { font-size:clamp(.64rem,1.4vw,1.45rem);line-height:1.6;letter-spacing:0; }
html[lang="ar"] .project-detail-title h1 { font-size:clamp(.7rem,1.75vw,1.875rem);line-height:1.55;letter-spacing:0;max-width:720px; }
html[lang="ar"] .case-intro h2 { font-size:clamp(.525rem,1.25vw,1.35rem);line-height:1.7;letter-spacing:0; }
html[lang="ar"] .next-project h2 { font-size:clamp(.54rem,1.25vw,1.35rem);line-height:1.65;letter-spacing:0; }