/* Dokkan Media — cinematic layout modelled on the Vision Studio reference.
   Monochrome by brief: black background, white type. Brand colour lives only in the logo icons; red is kept for the REC dot. */

/* Digits everywhere use the counter's face (IBM Plex Sans Arabic) — Plex Mono's zero carries a dot. */
@font-face { font-family: "Dokkan Num"; font-weight: 400; font-display: swap; unicode-range: U+0030-0039; src: url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys93PU.woff2) format("woff2"); }
@font-face { font-family: "Dokkan Num"; font-weight: 500; font-display: swap; unicode-range: U+0030-0039; src: url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CUXMQ.woff2) format("woff2"); }
@font-face { font-family: "Dokkan Num"; font-weight: 600; font-display: swap; unicode-range: U+0030-0039; src: url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCUXMQ.woff2) format("woff2"); }
@font-face { font-family: "Dokkan Num"; font-weight: 700; font-display: swap; unicode-range: U+0030-0039; src: url(https://fonts.gstatic.com/s/ibmplexsansarabic/v15/Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCUXMQ.woff2) format("woff2"); }

/* Layout: every content section = title on one side (right), copy or content on the other (left). */
:root {
  --ink: #000; --ink-2: #070709; --ink-3: #0e0e12; --ink-4: #16161c;
  --bone: #f5f5f7;   /* Apple's white */
  /* text greys are opaque on purpose: a translucent colour paints the overlap of joined Arabic letters twice and shows seams */
  --bone-70: #bfbfc1; --bone-50: #98989a; --bone-34: #7b7b7d; --bone-18: #58585a;
  --hair: rgba(245,245,247,.1); --hair-2: rgba(245,245,247,.2);
  --rec: #ff2d0e;
  --ff-b: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ff-m: "Dokkan Num", "IBM Plex Mono", ui-monospace, monospace;

  /* One type scale for the whole site: a 4:3 ratio stepped up from 14px (each max = 14 × 1.333ⁿ).
     Every text on the page uses one of these; nothing sets its own size. */
  --t-xs: 12px;                              /* mono labels, captions            */
  --t-sm: 14px;                              /* small print, tags, card copy     */
  --t-body: 17px;                            /* running text                     */
  --t-md: clamp(16px, 1.25vw, 18.7px);       /* 14 × 1.333   — section copy      */
  --t-lg: clamp(19px, 1.7vw, 25px);          /* 14 × 1.333²  — card titles, quote */
  --t-xl: clamp(23px, 2.3vw, 33px);          /* 14 × 1.333³  — row titles        */
  --t-2xl: clamp(28px, 3.1vw, 44px);         /* 14 × 1.333⁴  — values, card nos. */
  --t-3xl: clamp(34px, 4.1vw, 59px);         /* 14 × 1.333⁵  — section titles    */
  --t-4xl: clamp(42px, 5.5vw, 79px);         /* 14 × 1.333⁶  — display: slogan, numbers, closing */

  --gutter: clamp(18px, 4.4vw, 80px);
  --bay: clamp(72px, 10vh, 150px);
  --nav-h: 76px;
  --maxw: 1780px;
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io: cubic-bezier(.76,0,.24,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--ink); color: var(--bone); font-family: var(--ff-b); font-size: var(--t-body); line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--bone); color: var(--ink); }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.bay { padding-block: var(--bay); position: relative; }
.mono { font-family: var(--ff-m); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; text-wrap: balance; }
h2 { font-size: var(--t-3xl); line-height: 1.2; }
h3 { font-weight: 600; }
.lede { font-size: var(--t-md); line-height: 1.8; color: var(--bone-70); max-width: 58ch; font-weight: 300; }
.link { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: var(--t-sm); border-bottom: 1px solid var(--hair-2); padding-bottom: 4px; transition: border-color .3s, gap .4s var(--e-out); }
.link::after { content: "←"; }
.link:hover { border-color: var(--bone); gap: 16px; }

/* section title (the slug): white rule + the section's name, large and bold + Latin mono tag.
   The line under it (.sec-sub) is the subtitle — always smaller and lighter than the title. */
.slug { display: flex; align-items: center; gap: 8px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.slug::before { content: ""; width: clamp(24px, 4vw, 80px); height: 2px; background: var(--bone); flex: none; }
.slug span { font-size: var(--t-3xl); font-weight: 700; line-height: 1.2; color: var(--bone); }
.slug em { font-style: normal; color: var(--bone-34); direction: ltr; unicode-bidi: isolate; }
.sec-sub { font-size: var(--t-xl); font-weight: 500; line-height: 1.4; color: var(--bone-70); text-wrap: balance; }

/* section head: title on the right, copy on the left — the same in every section */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head--solo { grid-template-columns: 1fr; gap: 0; }   /* title + copy only, on the right */
.sec-head--solo .slug { margin-bottom: 24px; }
.sec-text { display: grid; gap: 18px; max-width: 60ch; }
.sec-text p { font-size: var(--t-md); line-height: 1.85; color: var(--bone-70); font-weight: 300; }

/* buttons: square, fill slides up on hover */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px; background: var(--bone); color: var(--ink); font-size: var(--t-sm); font-weight: 600; overflow: hidden; transition: color .45s var(--e-out); }
.btn > * { position: relative; z-index: 2; }
.btn::after { content: ""; position: absolute; inset: 0; background: var(--ink-4); transform: translateY(101%); transition: transform .5s var(--e-out); z-index: 1; }
.btn:hover { color: var(--bone); }
.btn:hover::after { transform: translateY(0); }
.btn svg { width: 14px; height: 10px; transition: transform .45s var(--e-out); }
.btn:hover svg { transform: translateX(-6px); }
.btn--ghost { background: transparent; color: var(--bone); border: 1px solid var(--hair-2); }
.btn--ghost::after { background: var(--bone); }
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); }
.btn-ic { width: 18px; height: 18px; transition: filter .45s var(--e-out); }
/* WhatsApp: white icon on the dark button; on hover the button fills with WhatsApp green */
.btn--wa .btn-ic { filter: brightness(0) invert(1); }
.btn--wa::after { background: #25d366; }
.btn--wa:hover { color: #fff; border-color: #25d366; }
.playchip { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bone); display: grid; place-items: center; flex: none; transition: background .45s, color .45s; }
.playchip svg { width: 8px; height: 10px; transform: scaleX(-1); }
.btn:hover .playchip { background: var(--bone); color: var(--ink); }
.btn:hover .playchip svg { transform: scaleX(-1); }
.btn-meta { opacity: .6; letter-spacing: .08em; }

/* ---------- Intro loader ---------- */
#loader { display: none; }
.js:not(.no-intro) #loader { position: fixed; inset: 0; z-index: 9800; background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform 1s var(--e-io); }
.js.loaded #loader { transform: translateY(-101%); pointer-events: none; }
.ld-glow { position: absolute; width: min(92vw, 900px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(245,245,247,.1), transparent 64%); animation: ldPulse 3.2s ease-in-out infinite; }
.ld-scan { position: absolute; inset-inline: 0; top: -46vh; height: 34vh; background: linear-gradient(transparent, rgba(245,245,247,.04) 44%, rgba(245,245,247,.08) 50%, rgba(245,245,247,.04) 56%, transparent); animation: ldScan 3.6s cubic-bezier(.5,0,.5,1) infinite; }
.ld-rail { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(28px, 3.2vw, 52px); overflow: hidden; padding-top: 6px; border-right: 1px solid rgba(245,245,247,.06); background: rgba(0,0,0,.5); }
.ld-rail--r { left: auto; right: 0; border-right: 0; border-left: 1px solid rgba(245,245,247,.06); }
.ld-perf { display: block; height: 200%; animation: ldRun 1.05s linear infinite;
  background: repeating-linear-gradient(transparent 0 6px, rgba(245,245,247,.17) 6px 7px, transparent 7px 31px, rgba(245,245,247,.17) 31px 32px, transparent 32px 38px);
  mask: linear-gradient(90deg, transparent 9px, #000 9px calc(100% - 9px), transparent calc(100% - 9px)); -webkit-mask: linear-gradient(90deg, transparent 9px, #000 9px calc(100% - 9px), transparent calc(100% - 9px)); }
.ld-core { position: relative; z-index: 3; text-align: center; padding-inline: var(--gutter); }
.ld-logo { overflow: hidden; }
.ld-logo img { width: clamp(200px, 24vw, 340px); margin-inline: auto; transform: translateY(106%); animation: ldUp 1s .15s var(--e-out) forwards; }
.ld-sub { margin-top: 26px; font-size: var(--t-lg); font-weight: 600; letter-spacing: .02em; color: var(--bone-70); direction: ltr; opacity: 0; animation: ldFade .8s .6s forwards; }
.ld-track { position: relative; width: min(300px, 56vw); height: 1px; margin: 40px auto 14px; background: rgba(245,245,247,.14); direction: ltr; }
.ld-fill { display: block; position: relative; height: 100%; width: 0; background: var(--bone); }
.ld-fill::after { content: ""; position: absolute; right: -3.5px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 14px var(--bone); }
.ld-pct { color: var(--bone-34); }
@keyframes ldPulse { 50% { transform: scale(1.24); opacity: 1; } 0%, 100% { opacity: .5; } }
@keyframes ldScan { to { transform: translateY(160vh); } }
@keyframes ldRun { to { transform: translateY(-38px); } }
@keyframes ldUp { to { transform: none; } }
@keyframes ldFade { to { opacity: 1; } }

/* ---------- Grain · HUD ---------- */
#grain { position: fixed; inset: -120%; z-index: 9000; pointer-events: none; opacity: .05; animation: grain .6s steps(3) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }
#hud { position: fixed; inset: 0; z-index: 8980; pointer-events: none; mix-blend-mode: difference; opacity: .5; direction: ltr; }
#hud .brk { position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--bone-34); }
#hud .brk--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
#hud .brk--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
#hud .brk--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
#hud .brk--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
#hud .tc { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--bone-34); letter-spacing: .3em; }

/* ---------- Nav ---------- */
/* logo on the left, "ابدأ مشروعك" + language switch on the right (the links stay centred, reading RTL) */
#nav { position: fixed; top: 0; inset-inline: 0; height: var(--nav-h); z-index: 800; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--gutter); border-bottom: 1px solid transparent; transition: background .5s var(--e-out), border-color .5s, transform .55s var(--e-out); }
#nav.stuck { background: rgba(0,0,0,.7); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-bottom-color: var(--hair); }
#nav.hide { transform: translateY(-101%); }
.nav-logo img { height: 36px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); }
.nav-menu a { position: relative; font-size: var(--t-sm); font-weight: 500; color: var(--bone-70); padding-block: 9px; transition: color .3s; }
.nav-menu a::after { content: ""; position: absolute; inset-inline: 0; bottom: 3px; height: 1.5px; background: var(--bone); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--e-out); }
.nav-menu a:hover { color: var(--bone); }
.nav-menu a:hover::after { transform: scaleX(1); transform-origin: right; }
.nav-right { display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; }
.nav-lang { color: var(--bone-50); }
.nav-lang:hover { color: var(--bone); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 22px; background: var(--bone); color: var(--ink); font-size: var(--t-sm); font-weight: 600; transition: background .35s, color .35s; }
.nav-cta:hover { background: var(--ink-4); color: var(--bone); }
.nav-cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rec); animation: pulse 1.6s infinite; }
.burger { display: none; width: 46px; height: 46px; position: relative; }
.burger span { position: absolute; left: 11px; width: 24px; height: 2px; background: var(--bone); transition: .4s var(--e-out); }
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 26px; }
.burger.on span:nth-child(1) { top: 22.5px; transform: rotate(45deg); }
.burger.on span:nth-child(2) { top: 22.5px; transform: rotate(-45deg); }
#drawer { position: fixed; inset: 0; z-index: 790; background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 48px; padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--e-io); }
#drawer.open { clip-path: inset(0); }
#drawer nav { display: grid; gap: 6px; }
#drawer nav a { display: flex; align-items: baseline; gap: 16px; font-size: var(--t-3xl); font-weight: 600; line-height: 1.3; color: var(--bone-70); transition: color .3s; }
#drawer nav a:hover { color: var(--bone); }
#drawer nav a .mono { color: var(--bone-34); }
.drawer-contact { display: grid; gap: 10px; color: var(--bone-50); }
@keyframes pulse { 50% { opacity: .2; } }

/* ---------- Hero: the showreel as a title page ---------- */
/* pinned for 125% of a screen: #hero is tall, .hero-pin sticks while the reel pulls back into its frame */
#hero { position: relative; height: calc(100svh + 125vh); }
.hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; perspective: 1500px; perspective-origin: 50% 42%; }
.stage { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 42%; will-change: transform; }
.stage-screen { position: absolute; inset: 0; overflow: hidden; background: #000; will-change: transform; }
.stage-screen img, .stage-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage.framed .stage-screen { cursor: pointer; }
/* the frame the reel settles into: white hairline, corner ticks, letterbox bars top and bottom */
.stage-frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border: 1.5px solid var(--bone); box-shadow: 0 80px 200px -40px #000, 0 0 0 1px rgba(0,0,0,.7); }
.stage-frame::before, .stage-frame::after { content: ""; position: absolute; left: 0; right: 0; height: 5.6%; background: var(--ink); }
.stage-frame::before { top: 0; }
.stage-frame::after { bottom: 0; }
.stage-tick { position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--bone); z-index: 1; }
.stage-tick--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.stage-tick--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.stage-tick--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.stage-tick--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* sound toggle inside the screen, bottom-right above the letterbox bar — clear of the caption; sized up because the stage ends at 58% scale (≈44px on screen) */
.stage-sound { position: absolute; right: 30px; bottom: calc(5.6% + 28px); z-index: 6; display: inline-flex; align-items: center; gap: 16px; height: 76px; padding: 0 30px 0 24px; border: 2px solid var(--bone-50); border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--bone); font-family: var(--ff-m); font-size: 20px; letter-spacing: .3em; direction: ltr; opacity: 0; pointer-events: none; transition: background .3s, color .3s, border-color .3s; }
.stage-sound svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.stage-sound .ic-on, .stage-sound[aria-pressed="true"] .ic-off { display: none; }
.stage-sound[aria-pressed="true"] .ic-on { display: block; }
.stage-sound:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.stage-sound:focus-visible { outline: 3px solid var(--bone); outline-offset: 6px; }
/* caption under the screen; set large because the stage ends at 58% scale */
.stage-cap { position: absolute; left: 0; right: 0; bottom: -58px; z-index: 5; text-align: center; opacity: 0; font-size: 19px; letter-spacing: .44em; color: var(--bone-70); direction: ltr; }
/* darker than before so every line of copy reads over the footage */
.hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.66) 58%, var(--ink) 100%), radial-gradient(ellipse 72% 56% at 50% 55%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%); }
.hero-scan { position: absolute; inset: 0; pointer-events: none; opacity: .4; background: repeating-linear-gradient(transparent 0, transparent 2px, rgba(0,0,0,.32) 2px, rgba(0,0,0,.32) 3px); }
.hero-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-h) + 80px); padding-bottom: 40px; height: 100%; will-change: transform, opacity; }
/* REC line sits right under the header, across the top of the frame */
.hero-eyebrow { position: absolute; top: calc(var(--nav-h) + 16px); inset-inline: var(--gutter); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; direction: ltr; justify-content: flex-end; }
.hero-eyebrow .rec { display: inline-flex; align-items: center; gap: 9px; color: var(--bone); }
.hero-eyebrow .rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: pulse 1.4s infinite; }
.hero-eyebrow .bar { flex: 1; height: 1px; background: var(--hair-2); max-width: 200px; }
.hero-eyebrow .meta { color: var(--bone-70); text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.hero-eyebrow .meta b { color: var(--bone); font-weight: 500; }

/* slogan: Pre • Shoot • Post • Repeat */
/* the slogan is as wide as its words, and the playhead line under it runs exactly that width */
.slogan { position: relative; display: block; width: fit-content; max-width: 100%; }
.steps { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: 0 clamp(10px, 1.6vw, 26px); }
.step { position: relative; display: grid; justify-items: start; gap: 8px; opacity: .32; transition: opacity .6s ease; }
.step.on { opacity: 1; }
.step.done { opacity: .75; }
.step .ic { width: clamp(22px, 2vw, 32px); height: auto; grid-area: 1 / 1; transition: opacity .5s, transform .6s cubic-bezier(.3,1.4,.5,1); }
.step .ic.c { opacity: 0; transform: scale(.7) rotate(-20deg); }
.step.on .ic.c { opacity: 1; transform: none; }
.step.on .ic.w { opacity: 0; }
.step b { font-weight: 700; font-size: var(--t-3xl); line-height: 1; letter-spacing: -.02em; direction: ltr; }
.step em { font-style: normal; font-weight: 400; font-size: var(--t-sm); color: var(--bone-70); direction: rtl; white-space: nowrap; }
.dot { font-style: normal; font-weight: 300; font-size: var(--t-2xl); line-height: 1; color: var(--bone-34); align-self: center; margin-top: clamp(14px, 2vw, 30px); }
.playhead { display: block; width: 100%; height: 2px; background: rgba(245,245,247,.15); margin-top: 18px; direction: ltr; overflow: hidden; }
.playhead i { display: block; height: 100%; width: 0; background: var(--bone); }

.hero-sub { margin-top: 26px; max-width: 52ch; font-size: var(--t-md); line-height: 1.8; color: var(--bone-70); font-weight: 300; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 32px; }
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--hair); }
.on-air { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.oa-label { color: var(--bone-50); }
/* platform logos, right to left: Netflix · MBC · SBC · Shahid. Files are trimmed to the artwork; each height is
   --oa × (aspect ratio)^-0.45 so wide wordmarks and the square SBC mark read at the same visual weight. */
.oa-logos { --oa: clamp(48px, 4.6vw, 76px); display: flex; align-items: center; flex-wrap: wrap; gap: clamp(22px, 3.2vw, 52px); }
.oa-logos img { width: auto; opacity: .92; transition: opacity .3s, transform .4s var(--e-out); }
.oa-logos img:hover { opacity: 1; transform: translateY(-2px); }
.oa-netflix { height: calc(var(--oa) * .555); }   /* 3.70 : 1 */
.oa-mbc     { height: calc(var(--oa) * .66); }    /* 2.52 : 1 */
.oa-sbc     { height: calc(var(--oa) * .928); }   /* 1.18 : 1 */
.oa-shahid  { height: calc(var(--oa) * .551); }   /* 3.76 : 1 */
.hero-cue { display: flex; align-items: center; gap: 12px; color: var(--bone-50); }
.hero-cue .rail { width: 2px; height: 46px; background: var(--hair-2); position: relative; overflow: hidden; }
.hero-cue .rail::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--bone); animation: cueRun 1.9s var(--e-io) infinite; }
@keyframes cueRun { 60%, 100% { top: 100%; } }
/* hero entrance after the intro */
.js .hero-body > * { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--e-out), transform 1.1s var(--e-out); }
.hero-in .hero-body > * { opacity: 1; transform: none; }
.hero-in .hero-body > :nth-child(2) { transition-delay: .1s; }
.hero-in .hero-body > :nth-child(3) { transition-delay: .2s; }
.hero-in .hero-body > :nth-child(4) { transition-delay: .3s; }
.hero-in .hero-body > :nth-child(5) { transition-delay: .4s; }

/* ---------- Ghost word ---------- */
.has-ghost { overflow: hidden; }
.has-ghost > .wrap { position: relative; z-index: 1; }
/* background wordmark = the DOKKAN MEDIA letters traced from the logo (assets/brand/wordmark-*.svg), never typed text */
.ghost-word { position: absolute; left: 5vw; top: 50%; transform: translateY(-50%); width: max(120vw, 900px); max-width: none; height: auto; opacity: .08; pointer-events: none; user-select: none; will-change: transform; }

/* ---------- Reveal ---------- */
/* each heading line slides up inside its own mask; the mask reaches above the line so hamzas and marks are never clipped */
.sl { display: block; overflow: hidden; padding-block: .24em .12em; margin-block: -.24em -.12em; }
.js .sl > span { display: block; transform: translateY(115%); transition: transform 1.1s var(--e-out); }
.rv-lines.in .sl > span { transform: none; }
.rv-lines.in .sl + .sl > span { transition-delay: .1s; }
.js .rv { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--e-out), transform 1.1s var(--e-out); }
.rv.in { opacity: 1; transform: none; }

/* ---------- About ---------- */
.quote { margin-top: 12px; padding-inline-start: 24px; border-inline-start: 2px solid var(--bone); font-size: var(--t-lg); font-weight: 500; line-height: 1.65; color: var(--bone); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--hair); margin-top: clamp(48px, 6vw, 88px); }
.value { position: relative; padding: clamp(24px, 3vw, 44px) clamp(14px, 2vw, 32px); border-inline-start: 1px solid var(--hair); overflow: hidden; }
.value:first-child { border-inline-start: 0; }
.value::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--bone); transform: scaleX(0); transform-origin: right; transition: transform .8s var(--e-out); }
.value:hover::after { transform: scaleX(1); }
.value .mono { color: var(--bone-34); }
.value h3 { font-size: var(--t-2xl); font-weight: 700; line-height: 1.25; margin: 12px 0 4px; }
.value p { color: var(--bone-50); font-size: var(--t-md); font-weight: 300; }

/* ---------- Works: horizontal poster carousel ---------- */
.works { --card-w: clamp(230px, 23vw, 370px); background: var(--ink-2); overflow: hidden; }
.works .sec-head { margin-bottom: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { padding: 7px 14px; border: 1px solid var(--hair-2); color: var(--bone-70); font-size: var(--t-sm); font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.filters button:hover { border-color: var(--bone-50); color: var(--bone); }
.filters button[aria-selected="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.filters .count { font-family: var(--ff-m); font-size: 10px; opacity: .55; margin-inline-start: 6px; }
.reel { position: relative; margin-top: clamp(24px, 3vw, 40px); }
.reel-track { display: flex; gap: clamp(12px, 1.4vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 18px 26px; padding-inline: calc(50% - var(--card-w) / 2); cursor: grab; outline: none; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.reel-track.no-tr .w-card, .reel-track.no-tr .w-flip { transition: none; }   /* loop jump: swap to the twin poster without a visible change */
.reel-ctrl { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); margin-top: 8px; }
.reel-count { color: var(--bone-34); direction: ltr; white-space: nowrap; }
.reel-count b { color: var(--bone); font-weight: 500; }
.reel-progress { flex: 1; height: 2px; background: var(--hair); direction: rtl; }
.reel-progress i { display: block; height: 100%; width: 0; background: var(--bone); transition: width .5s var(--e-out); }
.reel-arrows { display: flex; gap: 8px; }
.reel-arrow { width: 54px; height: 54px; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--bone); transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.reel-arrow svg { width: 16px; height: 12px; }
.reel-arrow:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.reel-arrow:disabled { opacity: .25; pointer-events: none; }
.empty { color: var(--bone-50); padding-inline: var(--gutter); }

/* work card: 2:3 poster that flips to the details; the centred card is in focus, its neighbours step back */
.w-card { flex: none; width: var(--card-w); scroll-snap-align: center; perspective: 1400px; transform: scale(.84); filter: blur(3px) brightness(.5); transition: transform .7s var(--e-out), filter .7s var(--e-out); }
.w-card.active { transform: none; filter: none; }
.w-flip { position: relative; aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.2,.4,1); cursor: pointer; }
.w-card.flipped .w-flip { transform: rotateY(180deg); }
.w-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--hair); }
.w-front { background: var(--ink-3); isolation: isolate; }
.w-fill { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(22px) brightness(.5) saturate(.8); }
.w-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.1s var(--e-out), opacity .9s ease; pointer-events: none; }
.w-front img.fit { object-fit: contain; object-position: center; }
.w-card.active:hover .w-front img { transform: scale(1.03); }
.w-front.multi img:not(.show) { opacity: 0; }
.w-front::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(rgba(0,0,0,.3) 0%, transparent 28%, transparent 58%, rgba(0,0,0,.9) 100%); }
.w-cat { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; font-size: var(--t-xs); padding: 4px 10px; border: 1px solid var(--hair-2); background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: var(--bone-70); }
.w-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; padding: clamp(16px, 1.6vw, 24px); }
.w-client { color: var(--bone-50); font-size: var(--t-sm); margin-bottom: 2px; }
.w-title { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; }
.w-meta { margin-top: 8px; color: var(--bone-34); }
.w-hint { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 3; color: var(--bone-70); opacity: 0; transition: opacity .4s; }
.w-card.active .w-hint { opacity: 1; }
.w-pips { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; direction: ltr; }
.w-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,245,247,.4); transition: background .3s; }
.w-pips i.on { background: var(--bone); }
/* back: the poster itself, blurred and dimmed, behind the details */
.w-back { transform: rotateY(180deg); background: var(--ink); border-color: var(--hair-2); }
.w-back-bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) brightness(.32) saturate(1.2); transform: scale(1.1); }
.w-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.w-back-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 1.8vw, 28px); }
.w-back-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--bone-50); }
.w-back h3 { font-size: var(--t-xl); line-height: 1.25; padding-bottom: 14px; border-bottom: 1px solid var(--hair-2); }
.w-back dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--t-sm); }
.w-back dt { color: var(--bone-50); }
.w-back p { font-size: var(--t-sm); font-weight: 300; line-height: 1.8; color: var(--bone-70); flex: 1; overflow: auto; }
.w-back .scope { display: flex; flex-wrap: wrap; gap: 6px; }
.w-back .scope span, .w-back .tag { font-size: var(--t-xs); padding: 3px 10px; border: 1px solid var(--hair-2); color: var(--bone-70); background: rgba(0,0,0,.3); }
.w-back .back-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.w-back .flip-back { font-size: var(--t-sm); color: var(--bone-50); }
.w-back .watch { padding: 8px 14px; background: var(--bone); color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
.w-back .confirm { font-size: var(--t-xs); color: var(--bone-34); }

/* ---------- Shots: phone-gallery grid of short clips ---------- */
.shots-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.sec-note { margin-top: 18px; font-size: var(--t-md); line-height: 1.8; color: var(--bone-70); font-weight: 300; max-width: 40ch; }
/* the reels grid, as on an Instagram profile: 3 across, 4:5 tiles, hairline gaps, the reel mark in the corner
   (top-left: the covers carry the Dokkan mark top-right) */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 8px; overflow: hidden; max-width: 820px; width: 100%; justify-self: end; }
.g-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); cursor: pointer; }
.g-tile img, .g-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-tile img { transition: transform .9s var(--e-out); }
.g-tile video { opacity: 0; transition: opacity .35s; }
.g-tile.playing video { opacity: 1; }
.g-tile:hover img { transform: scale(1.04); }
.g-reel { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.g-reel .g-play { fill: #fff; stroke: none; }
.g-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245,245,247,.05); pointer-events: none; }

/* ---------- Numbers (odometers): one row of five under the shots, same page ---------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--hair); }
.stat { min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(12px, 1.4vw, 24px) 0; border-inline-start: 1px solid var(--hair); }
.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stat > span { display: block; margin-top: 14px; color: var(--bone-50); font-size: var(--t-sm); }
.odo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.odo .digits { display: flex; direction: ltr; font-family: var(--ff-b); font-weight: 600; font-size: var(--t-4xl); line-height: 1; height: 1em; overflow: hidden; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.odo .col { display: flex; flex-direction: column; transition: transform 2.2s cubic-bezier(.16,1,.3,1); }
.odo .col span, .odo .sep { height: 1em; line-height: 1; }
.odo .word { font-weight: 600; font-size: var(--t-md); color: var(--bone-70); }

/* ---------- Services: capability rows ---------- */
#services { border-top: 1px solid var(--hair); }
.caps { border-top: 1px solid var(--hair); }
.cap { border-bottom: 1px solid var(--hair); }
.cap-row { position: relative; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) 56px; gap: 24px; align-items: center; padding-block: clamp(18px, 2vw, 28px); overflow: hidden; text-align: start; }
.cap-row::before { content: ""; position: absolute; inset: 0; background: var(--bone); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--e-out); z-index: 0; }
.cap-row:hover::before, .cap.open .cap-row::before { transform: scaleY(1); }
.cap-row > * { position: relative; z-index: 1; transition: color .4s, transform .6s var(--e-out); }
.cap-n { font-family: var(--ff-m); font-size: var(--t-xs); color: var(--bone-50); padding-inline-start: 14px; }
.cap-t { display: block; font-size: var(--t-xl); font-weight: 700; line-height: 1.25; }
.cap-d { color: var(--bone-50); font-size: var(--t-sm); line-height: 1.75; font-weight: 300; }
.cap-go { justify-self: end; width: 40px; height: 40px; margin-inline-end: 14px; display: grid; place-items: center; border: 1px solid var(--hair-2); font-size: 20px; font-weight: 300; color: var(--bone-50); }
.cap-row:hover .cap-t, .cap.open .cap-t { transform: translateX(-14px); color: var(--ink); }
.cap-row:hover .cap-n, .cap-row:hover .cap-d, .cap-row:hover .cap-go,
.cap.open .cap-n, .cap.open .cap-d, .cap.open .cap-go { color: #48484a; border-color: rgba(0,0,0,.3); }
.cap.open .cap-go { transform: rotate(45deg); }
.cap-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--e-io); }
.cap.open .cap-body { grid-template-rows: 1fr; }
.cap-inner { overflow: hidden; min-height: 0; }
.cap-content { display: grid; grid-template-columns: 64px 1fr 220px; gap: 20px 40px; padding: 28px 0 36px; }
.cap-content.no-side .cap-main { grid-column: 2 / 4; }
.cap-main { grid-column: 2; }
.cap-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.cap-items li { padding: 12px 0; border-top: 1px solid var(--hair); }
.cap-items b { display: block; font-weight: 600; font-size: var(--t-sm); }
.cap-items span { color: var(--bone-50); font-size: var(--t-sm); font-weight: 300; }
.cap-tools { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 26px; direction: ltr; justify-content: flex-end; }
/* tools: the program's official mark only (in white); the name shows on hover */
.cap-tools span { display: grid; place-items: center; padding: 2px; transition: transform .35s var(--e-out); }
.cap-tools img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; transition: opacity .3s; }
.cap-tools span:hover { transform: translateY(-2px); }
.cap-tools span:hover img { opacity: 1; }
/* logistics: the five production-service vans as tabs side by side — a line icon beside the van's name, hairlines
   between them, a white line across the top of the open one; its line of copy underneath */
.cap-fleet { margin-top: 34px; }
.cap-fleet-h { margin-bottom: 14px; font-size: var(--t-sm); font-weight: 600; }
.fleet-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--hair); }
.fleet-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px 10px; color: var(--bone-50); transition: color .35s, background .35s; }
.fleet-tab + .fleet-tab { border-inline-start: 1px solid var(--hair); }
.fleet-tab:hover { color: var(--bone-70); }
.fleet-tab[aria-selected="true"] { color: var(--bone); background: linear-gradient(rgba(245, 245, 247, .05), transparent 80%); }
.fleet-ic { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--e-out); }
.fleet-tab[aria-selected="true"] .fleet-ic { transform: scale(1.08); }
.fleet-name { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
.fleet-bar { position: absolute; top: -1px; inset-inline: 0; height: 2px; background: var(--bone); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--e-out); }
.fleet-tab[aria-selected="true"] .fleet-bar { transform: scaleX(1); }
.cap-fleet.auto .fleet-tab[aria-selected="true"] .fleet-bar { animation: fleetFill 4.5s linear both; }
.cap-fleet.auto:hover .fleet-bar { animation-play-state: paused; }
@keyframes fleetFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fleet-panel { display: grid; padding-top: 18px; }
.van { grid-area: 1 / 1; color: var(--bone-70); font-size: var(--t-md); font-weight: 300; line-height: 1.7; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .4s var(--e-out), visibility 0s .3s; }
.van.on { opacity: 1; visibility: visible; transform: none; transition: opacity .4s .05s, transform .5s var(--e-out) .05s; }
.cap-side { grid-column: 3; }
.cap-side img { width: 100%; max-width: 200px; margin-inline: auto; }

/* ---------- Marketing: title and copy beside a wall of Instagram posts (4:5), four columns drifting slowly ---------- */
.social { border-top: 1px solid var(--hair); overflow: hidden; }
.social-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.social .sec-title .btn { margin-top: 30px; }
/* the wall: four columns, each a looping strip; the 2nd and 4th run the other way */
.post-wall { --wall-h: clamp(560px, 82vh, 860px); --pg: clamp(10px, 1.1vw, 16px); position: relative; height: var(--wall-h); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pg); overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.post-col { display: flex; flex-direction: column; gap: var(--pg); padding-bottom: var(--pg); animation: postUp var(--dur, 70s) linear infinite; will-change: transform; }   /* the trailing gap makes -50% land exactly on the repeat */
.post-col:nth-child(even) { animation-direction: reverse; }
.post-col:nth-child(2) { margin-top: calc(var(--wall-h) * -.18); }
.post-col:nth-child(3) { margin-top: calc(var(--wall-h) * -.08); }
.post-col:nth-child(4) { margin-top: calc(var(--wall-h) * -.26); }
.post-col:hover { animation-play-state: paused; }
@keyframes postUp { to { transform: translateY(-50%); } }
.post { position: relative; flex: none; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--ink-3); cursor: zoom-in; box-shadow: 0 24px 60px -30px #000; }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out), filter .6s; filter: saturate(.92); }
.post:hover img { transform: scale(1.04); filter: none; }
.modal-body .post-full { display: block; max-height: 88vh; width: auto; max-width: 100%; margin-inline: auto; border-radius: 8px; }
/* ---------- Contact: closes the page the way the hero opens it ---------- */
.cta { text-align: center; overflow: hidden; perspective: 1200px; border-top: 1px solid var(--hair); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 50%, rgba(245,245,247,.06), transparent 70%); }
.cta-ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 1500px); max-width: none; height: auto; opacity: .07; pointer-events: none; user-select: none; z-index: 0; }
.cta-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; transform-style: preserve-3d; will-change: transform; }
.cta-icons { display: flex; gap: clamp(14px, 1.6vw, 24px); direction: ltr; margin-bottom: 6px; }
.ci { position: relative; width: clamp(28px, 2.6vw, 40px); aspect-ratio: 1; }
.ci img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s, transform .6s cubic-bezier(.3,1.4,.5,1); }
.ci .c { opacity: 0; transform: scale(.7) rotate(-20deg); }
.ci.on .c { opacity: 1; transform: none; }
.ci.on .w { opacity: 0; }
.ci:not(.on) .w { opacity: .45; }
.cta .slug { justify-content: center; margin: 0; }
.cta .slug::after { content: ""; width: clamp(24px, 4vw, 80px); height: 2px; background: var(--bone); }
.cta .lede { margin-inline: auto; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.cta-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(28px, 5vw, 80px); margin-top: 18px; padding-top: 28px; border-top: 1px solid var(--hair); width: min(100%, 980px); }
.cc { display: grid; gap: 4px; }
.cc-l { font-size: var(--t-xs); color: var(--bone-50); }
.cc-v { font-size: var(--t-md); color: var(--bone); transition: color .3s; }
a.cc:hover .cc-v { color: var(--bone-70); }

/* ---------- Partners marquee ---------- */
.marq { background: var(--ink-2); border-top: 1px solid var(--hair); overflow: hidden; }
/* centred title: rule · label · rule, then the heading */
.marq-head { text-align: center; margin-bottom: clamp(28px, 3.4vw, 52px); }
.marq-head .slug { justify-content: center; }
.marq-head .slug::after { content: ""; width: clamp(24px, 4vw, 80px); height: 2px; background: var(--bone); flex: none; }
.marq-row { position: relative; overflow: hidden; direction: ltr; padding-block: 10px; }
.marq-row::before, .marq-row::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(50px, 12vw, 220px); z-index: 3; pointer-events: none; }
.marq-row::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.marq-row::after { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }
/* the two rows travel in opposite directions */
.marq-track { display: flex; width: max-content; gap: clamp(44px, 5vw, 96px); align-items: center; animation: marq 120s linear infinite; }
.marq-track--rev { animation-direction: reverse; }
.marq:hover .marq-track { animation-play-state: paused; }
.marq-track img { height: clamp(96px, 9vw, 136px); width: clamp(150px, 14vw, 240px); object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .45s var(--e-out), transform .45s var(--e-out); }
.marq-track img:hover { opacity: 1; transform: scale(1.06); }
.marq-track img.tone { height: clamp(60px, 5.6vw, 84px); filter: grayscale(1) brightness(1.1); opacity: .65; }   /* keeps SBC's shaded faces readable */
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Footer: white, with the wordmark in black ---------- */
.site-footer { background: var(--bone); color: #1d1d1f; overflow: hidden; }
.ft-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(24px, 4vw, 80px); padding-block: clamp(64px, 8vw, 110px) clamp(40px, 5vw, 72px); }
.ft-desc { color: #6e6e73; font-size: var(--t-sm); line-height: 1.85; font-weight: 400; max-width: 34ch; }
.ft-h { color: #86868b; margin-bottom: 16px; }
.ft-links li { margin-bottom: 11px; }
.ft-links a { font-size: var(--t-sm); color: #1d1d1f; transition: color .3s, padding .35s var(--e-out); display: inline-block; }
.ft-links a:hover { color: var(--ink); padding-inline-start: 7px; }
.ft-c { display: flex; flex-direction: column; gap: 12px; font-size: var(--t-sm); color: #1d1d1f; }
.ft-c a:hover { color: var(--ink); }
/* contact lines: call · email · location, each with its icon */
.ft-ci { display: flex; align-items: center; gap: 12px; }
.ft-ci svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #6e6e73; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s; }
a.ft-ci:hover svg { stroke: #1d1d1f; }
/* social icons on their own, no frame */
.socials { display: flex; gap: 20px; margin-top: 12px; }
.socials a { display: grid; place-items: center; padding: 2px; transition: opacity .3s, transform .35s var(--e-out); }
.socials img { width: 20px; height: 20px; filter: brightness(0); opacity: .82; transition: opacity .3s; }
.socials a:hover { transform: translateY(-2px); }
.socials a:hover img { opacity: 1; }
.ft-bot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid rgba(0,0,0,.12); color: #86868b; font-size: var(--t-xs); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,.96); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-x { position: absolute; top: 18px; left: 22px; width: 46px; height: 46px; border: 1px solid var(--hair-2); font-size: 26px; line-height: 1; color: var(--bone); }
.modal-x:hover { background: var(--bone); color: var(--ink); }
.modal-body { width: min(1200px, 100%); }
.modal-body video, .modal-body iframe { width: 100%; max-height: 85vh; aspect-ratio: 16 / 9; background: #000; border: 0; }
.modal-body .reel-full { display: block; width: auto; max-width: 100%; height: 86vh; aspect-ratio: auto; margin-inline: auto; border-radius: 8px; }   /* reels keep their own shape */

/* failsafe: if main.js never ran, show everything */
.no-anim .rv, .no-anim .sl > span, .no-anim .hero-body > * { opacity: 1 !important; transform: none !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .sl > span, .hero-body > * { opacity: 1 !important; transform: none !important; }
  #hero { height: auto; }
  .hero-pin { position: relative; }
  .step { opacity: 1; }
  #grain { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .burger { display: block; }
  .sec-head, .shots-grid, .social-grid { grid-template-columns: 1fr; gap: 22px; }
  .post-wall { --wall-h: 640px; }
  .gallery { justify-self: stretch; max-width: none; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--hair); margin-top: 24px; }
  .cap-row { grid-template-columns: 48px minmax(0, 1fr) 52px; }
  .cap-d { display: none; }
  .cap-content { grid-template-columns: 48px 1fr 180px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  /* phones: the reel pulls back into a 16:9 frame (sized in main.js), so caption and button are set at their real size */
  .stage-cap { font-size: 10px; letter-spacing: .3em; bottom: -30px; }
  .stage-sound { height: 34px; gap: 8px; padding: 0 14px 0 10px; font-size: 10px; right: 10px; bottom: calc(5.6% + 8px); border-width: 1.5px; }
  .stage-sound svg { width: 16px; height: 16px; }
  .works { --card-w: 66vw; }
  .nav-cta { display: none; }
  .nav-logo img { height: 30px; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .oa-logos { --oa: min(36px, 9.4vw); gap: min(18px, 4vw); flex-wrap: nowrap; }
  .hero-cue { display: none; }
  .steps { gap: 4px 10px; flex-wrap: nowrap; }   /* one row, so the line under it spans exactly the four words */
  .dot { display: none; }
  .step b { font-size: 7vw; }
  .step em { font-size: 11px; }
  .values { grid-template-columns: 1fr; }
  .value { border-inline-start: 0; border-top: 1px solid var(--hair); padding-inline: 0; }
  .value:first-child { border-top: 0; }
  .hero-eyebrow .bar { display: none; }
  .post-wall { --wall-h: 520px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat, .stat:nth-child(4) { border-inline-start: 1px solid var(--hair); padding-inline-start: 16px; margin-top: 0; }
  .stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair); margin-top: 20px; }
  .cap-content, .cap-content.no-side { grid-template-columns: 1fr; padding-inline: 14px; }
  .cap-main, .cap-side, .cap-content.no-side .cap-main { grid-column: 1; }
  .cap-items { grid-template-columns: 1fr; }
  .fleet-tab { flex-direction: column; gap: 8px; padding: 16px 2px 14px; }   /* five across a phone: the icon sits over the name */
  .fleet-ic { width: 24px; height: 24px; }
  .fleet-name { font-size: 14px; }
  .van { font-size: var(--t-sm); }
  .cap-side img { max-width: 160px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% + 2 * var(--gutter)); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters button { flex: none; }
  .reel-arrow { width: 46px; height: 46px; }
  .cta-contacts { flex-direction: column; align-items: center; }
  .ft-top { grid-template-columns: 1fr; }
}