/* ═══ Level 7 Pictures · shared components (built on tokens.css) ═══ */

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg-dark); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); overflow-x: clip; }
img, video { max-width: 100%; display: block; }
a { color: var(--tint); }
a:hover { color: var(--text); }
[hidden] { display: none !important; }
html:not(.js) [data-js-only] { display: none; } /* controls that need JS: in place from first paint, absent without JS */
[lang="ar"], .ar { font-family: var(--font-ar); font-weight: 400; font-synthesis: none; }
.un { font-family: var(--font-display); font-weight: 400; font-synthesis: none; letter-spacing: var(--ls-display); }
.mark { font-family: var(--font-mark); font-weight: 900; font-synthesis: none; }   /* ٧ brand marks only */
.clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } /* clips media/decoration, never text */
picture { display: contents; } picture > source { display: none; }
:where(img[width][height]) { height: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; display: inline-flex; align-items: center; min-height: var(--tap); }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: 12px 16px; background: var(--text); color: var(--text-on-light); border-radius: 8px; }
:where(a, button, [tabindex], input, select, textarea):focus-visible { outline: 2px solid var(--interactive); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(3,12,22,.55); }
main:focus { outline: none; }

/* ── layout ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: var(--section-gap); }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.keep2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.sec-head > div { display: flex; flex-direction: column; gap: 12px; }

/* ── type ── */
.kick { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--tint); }
.h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--ls-display); text-transform: uppercase; }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--ls-display); text-transform: uppercase; }
.h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-display); }
.svc .h3 { font-size: var(--fs-card-m); } /* Home service cards: medium card title */
.nocaps { text-transform: none; } /* dates inside uppercase labels: "30 Oct", never "30 OCT" */
.lead { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-soft); }
.muted { color: var(--text-muted); }

/* ── controls ── */
button { font: inherit; } /* buttons use the site font, never the UA default */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-md); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-sm { height: var(--tap); padding: 0 20px; font-size: var(--fs-sm); } /* in-card actions: press kit downloads, filter chips */
.btn-w { background: var(--text); color: var(--text-on-light); }
.btn-w:hover { color: var(--brand); }  /* #005588 */
.btn-o { border: 1px solid var(--surface-4); color: var(--text); }
.btn-o:hover { background: var(--text); border-color: var(--text); color: var(--text-on-light); }
.btn-b { background: var(--brand); color: var(--text); }
.btn-b:hover { background: var(--interactive); color: var(--text); }
.tlink { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: var(--tint); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pill-o { border: 1.5px solid var(--tint); color: var(--tint); }
.surface { background: var(--bg-dark-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); }

/* ── nav: floating pill (desktop) / full-width bar (≤1100px) ── */
.nav-dock { position: sticky; top: 0; z-index: 60; height: 0; }
.nav { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r-pill); white-space: nowrap; }
.nav-logo { display: flex; flex: none; align-items: center; height: var(--tap); padding-right: 10px; }
.nav-logo img { height: 18px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { display: flex; align-items: center; height: var(--tap); padding: 0 15px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); text-decoration: none; border-radius: var(--r-pill); }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { font-weight: 600; color: var(--text); background: var(--surface-2); }
.nav-cta { display: flex; flex: none; align-items: center; gap: 10px; height: var(--tap); padding: 0 18px; margin-left: 6px; background: var(--text); color: var(--text-on-light); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; border-radius: var(--r-pill); }
.nav-cta:hover { color: var(--brand); }
.cta-short { display: none; }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--netflix); }
/* ٧ menu button; its two glyphs share one cell so ٧ can morph into × */
.menu-btn { display: none; flex: none; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: transparent; color: var(--text); cursor: pointer; font-family: var(--font-mark); font-weight: 900; font-synthesis: none; font-size: 18px; line-height: 1; padding: 0; }
.mb-v, .mb-x { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.mb-x { font-family: var(--font-body); font-weight: 500; font-size: 18px; }
.menu .menu-btn { display: grid; }

@media (max-width: 1100px) {
  .nav { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; transform: none; height: 56px; gap: 8px; padding: 0 6px 0 16px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
  .nav-links { display: none; }
  .nav .nav-cta { margin-left: auto; padding: 0 16px; }
  .menu-btn { display: grid; }
  .nav.is-solid { background: rgba(3,12,22,.92); }
  .nav-dock .nav.is-hidden { transform: translateY(calc(-100% - max(12px, env(safe-area-inset-top)) - 8px)); } /* fully off-screen, notch included */
}
@media (max-width: 599px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* ── menu: full-screen overlay (≤1100px), revealed as a circle growing from the ٧ button ── */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg-dark); color: var(--text); overflow-y: auto;
  clip-path: circle(0 at var(--cx, calc(100% - 40px)) var(--cy, 40px)); transition: clip-path .45s cubic-bezier(.2,.8,.2,1); }
.menu.is-open { clip-path: circle(150vmax at var(--cx, calc(100% - 40px)) var(--cy, 40px)); }
.menu.is-closing { transition-duration: .25s; transition-timing-function: ease-in; }
.menu::backdrop { background: rgba(3,12,22,.6); }
.menu[open]::backdrop { animation: menu-bd-in .2s ease both; }
.menu.is-closing::backdrop { animation: menu-bd-out .25s ease both; }
.menu[open] { display: flex; flex-direction: column; }
.menu-glyph { position: absolute; right: -4%; bottom: -10%; font-size: clamp(320px, 90vw, 640px); line-height: 1; color: var(--text); opacity: .04; pointer-events: none; user-select: none; }
.menu-bar { position: relative; flex: none; height: calc(56px + max(12px, env(safe-area-inset-top)) + 12px); } /* holds the fixed bar's place */
.menu-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vh, 56px) var(--gutter) 32px; }
.menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.menu-list li { border-bottom: 1px solid var(--line); }
.menu-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: clamp(60px, 9vh, 76px); font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-size: clamp(24px, 6vw, 40px); letter-spacing: var(--ls-display); color: var(--text); text-decoration: none; }
.menu-list a::after { content: "→"; font-family: var(--font-body); font-weight: 500; font-size: 22px; color: var(--tint); transition: transform .3s var(--ease); }
.menu-list a:hover::after { transform: translateX(4px); }
.menu-list a[aria-current="page"] { color: var(--tint); }
.menu-list a[aria-current="page"]::after { content: "●"; font-size: 12px; color: var(--interactive); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: var(--fs-md); color: var(--text-muted); }
.menu-foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-soft); }
.menu-foot .ar { font-size: var(--fs-base); }
/* links slide up 16px and fade in, 40ms apart; on close they go together, faster */
.menu-list li, .menu-foot { opacity: 0; transform: translateY(16px); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(120ms + var(--i, 0) * 40ms); }
.menu.is-open .menu-list li, .menu.is-open .menu-foot { opacity: 1; transform: none; }
.menu.is-closing .menu-list li, .menu.is-closing .menu-foot { transition-duration: .15s; transition-delay: 0s; }
/* ٧ → × */
.menu .mb-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.menu.is-open .mb-v { opacity: 0; transform: rotate(90deg) scale(.6); }
.menu.is-open .mb-x { opacity: 1; transform: none; }
@keyframes menu-bd-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-bd-out { from { opacity: 1; } to { opacity: 0; } }
html.menu-open { overflow: hidden; }
/* reduced motion: opacity only — no clip-path, no slide, no hide-on-scroll */
@media (prefers-reduced-motion: reduce) {
  .menu { clip-path: none; opacity: 0; transition: opacity .2s ease; }
  .menu.is-open { clip-path: none; opacity: 1; }
  .menu-list li, .menu-foot { transform: none; transition: opacity .2s ease; transition-delay: 0s; }
  .mb-v, .mb-x, .nav { transition: none; }
}

/* ── footer ── */
.footer { border-top: 1px solid var(--line); margin-top: var(--section-gap); }
.foot { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 40px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand img { height: 20px; width: auto; align-self: flex-start; }
.foot-brand p { margin: 0; max-width: 340px; font-size: var(--fs-md); line-height: 1.6; color: var(--text-muted); }
.foot-brand .ar { align-self: flex-start; font-size: var(--fs-base); color: var(--text-muted); }
.foot-col { display: flex; flex-direction: column; font-size: var(--fs-md); }
.foot-col .kick { margin-bottom: 8px; }
.foot-col a, .foot-col span:not(.kick) { display: flex; align-items: center; min-height: var(--tap); color: var(--text-soft); text-decoration: none; }
.foot-col span:not(.kick) { color: var(--text-muted); }
.foot-col a:hover { color: var(--text); }
.foot-col a[href^="mailto:"] { text-decoration: underline; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-label); color: var(--text-subtle); }

/* ── responsive ── */
@media (max-width: 1060px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .first-sm { order: -1; }
}
@media (max-width: 600px) {
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .cta-routes { grid-template-columns: minmax(0, 1fr); }   /* one route per row: no hyphenation or word breaks */
  .stat-v { font-size: var(--fs-h3); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .hide-sm { display: none; }
}

/* ═══ Home components (reused by later pages where noted) ═══ */
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.gap-14 { gap: 14px; }
.sec-head-28 { margin-bottom: 28px; }
.zoom img { transition: transform .7s ease; }
.zoom:hover img { transform: scale(1.04); }

/* hero (V8.1): the ٧ is a window — footage full-bright inside it, dimmed around it */
.hero { position: relative; min-height: clamp(760px, 100vh, 940px); display: flex; align-items: center; padding: 112px 0 clamp(40px, 5vw, 72px); }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; } /* media + window only, never text */
.hero-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-layer.on { opacity: 1; }
.hero-media-el, .hero-layer picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Beit Hadam's vertical clip: right-aligned column that fades in from the left */
.hero-layer-v { left: auto; width: min(58%, 860px); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
/* the window: white ٧ on a slate overlay, multiplied over the footage */
.hero-window { position: absolute; inset: 0; background: var(--window-tint); mix-blend-mode: multiply; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; pointer-events: none; }
.hero-v { display: block; flex: none; width: .824em; height: .8em; text-align: center; /* fixed box (Alexandria ٧ advance = .824em): the font swap cannot move it */ color: #fff; font-size: clamp(620px, 66vw, 1100px); line-height: .8; margin-right: -1vw; transform: translateY(6%); user-select: none; }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,12,22,.92) 0%, rgba(3,12,22,.62) 36%, transparent 58%),
              linear-gradient(180deg, var(--bg-dark) 0%, transparent 18%, transparent 82%, var(--bg-dark) 100%); }
.hero-in { position: relative; z-index: 1; width: 100%; }
.hero-copy { max-width: 640px; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero-ar { margin: 0; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.4; color: var(--tint); text-align: left; }
.hero-lead { max-width: 540px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; background: var(--glass-soft); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card); align-self: flex-start; }
.hero-panel-text { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.hero-panel-date { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.nf-badge { padding: 3px 6px; background: var(--netflix); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.hero-panel-credit { font-size: var(--fs-sm); color: var(--text-soft); }
.hero-dots { display: flex; align-items: center; gap: 6px; }
.hero-now { font-size: var(--fs-label); margin-right: 6px; }
[data-hero-now] { display: inline-block; min-width: 14ch; } /* longest title: the dots never move as titles change */
.hero-dot { width: var(--tap); height: var(--tap); border: 0; padding: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hero-dot span { width: 10px; height: 6px; border-radius: var(--r-pill); background: var(--surface-4); transition: width .3s var(--ease), background .3s; }
.hero-dot[aria-pressed="true"] span { width: 26px; background: var(--interactive); }

/* countdown (shared): .cd-sm in panels, .cd-lg over footage */
.cd { display: flex; gap: 6px; }
.cd-u { min-width: 52px; padding: 6px 4px; background: var(--surface-1); border-radius: var(--r-sm); text-align: center; }
.cd .un { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.cd-l { display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.cd-lg { gap: 8px; }
.cd-lg .cd-u { min-width: 62px; padding: 10px 6px; background: rgba(3,12,22,.6); border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.cd-lg .un { font-size: 26px; }
.cd-lg .cd-l { letter-spacing: var(--ls-caps); }

/* status strip */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-row { display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: center; min-height: 60px; padding-top: 10px; padding-bottom: 10px; font-size: var(--fs-sm); font-weight: 600; }
.strip-item { display: flex; align-items: center; gap: 10px; }
.strip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--netflix); }
.strip-dot-blue { background: var(--interactive); box-shadow: 0 0 10px var(--interactive); }

/* title panel (Home, Productions) */
.panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 600px; background: var(--bg-dark-2); color: var(--text); text-decoration: none; border-top: 1px solid rgba(255,255,255,.06); }
.panel:hover { color: var(--text); }
.panel.flip > .ptext { order: 2; }
.ptext { container-type: inline-size; padding: clamp(28px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.ptop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pglyph { font-size: 64px; line-height: .8; color: var(--interactive); }
.ptitle { display: flex; flex-direction: column; gap: 10px; }
.ptitle-ar { font-size: clamp(44px, 18cqi, 128px); line-height: var(--lh-ar-display); text-align: left; margin-bottom: 4px; } /* + 10px gap = 14px to the English title */
.ptitle-en { margin: 0; font-size: var(--fs-card-l); }
.ptitle-meta { font-size: var(--fs-base); }
.pimg { position: relative; min-height: 520px; overflow: hidden; }
.pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* feature over footage (Home: Obsess) */
.feature { position: relative; border-radius: var(--r-2xl); min-height: 560px; display: flex; align-items: flex-end; }
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,12,22,.95) 0%, rgba(3,12,22,.15) 72%); }
.feature-body { position: relative; width: 100%; padding: clamp(22px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.feature-text { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.feature-kick { margin: 0; }
.feature-ar { font-size: clamp(44px, 6.4vw, 96px); line-height: var(--lh-ar-display); text-align: left; }
.feature-line { font-size: var(--fs-card-l); letter-spacing: .1em; }

/* stat tile */
.stat { padding: 24px; }
.stat-v { font-size: var(--fs-h3); }
.stat-blue { color: var(--interactive); }
.stat-l { font-size: var(--fs-sm); margin-top: 6px; }

/* portrait with name tag */
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
/* name tag: no pill. Centred text on a blurred, darkened band that sits behind the text only and fades out above it */
.portrait-tag { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 12px 16px; text-align: center; color: var(--text);
  background: linear-gradient(0deg, rgba(3,12,22,.55) 0, rgba(3,12,22,.4) 55%, rgba(3,12,22,0) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(0deg, #000 65%, transparent); mask-image: linear-gradient(0deg, #000 65%, transparent); border-radius: 0 0 var(--r-card) var(--r-card); }
.portrait-name { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.portrait-role { font-size: var(--fs-xs); color: var(--text-soft); }

/* service card */
.svc { display: flex; flex-direction: column; gap: 14px; color: var(--text); text-decoration: none; }
.svc:hover { color: var(--text); }
.svc-img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--bg-dark-2); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-n { position: absolute; left: 14px; bottom: 10px; font-size: var(--fs-h3); color: var(--text); line-height: 1; }
.svc-d { margin: -6px 0 0; font-size: var(--fs-md); line-height: 1.55; }

/* news card */
.news-card { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.news-card:hover { color: var(--text); }
.news-img { aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; } /* image only */
.news-img img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.news-date { font-size: var(--fs-xs); }
.news-title { font-size: var(--fs-card-l); }

/* contact block */
.cta-block { position: relative; background: var(--brand); border-radius: var(--r-2xl); padding: clamp(28px, 5vw, 64px); }
.cta-glyph { position: absolute; right: 3%; bottom: -18%; font-size: clamp(240px, 32vw, 460px); line-height: 1; color: rgba(255,255,255,.08); pointer-events: none; }
.cta-title { position: relative; margin-bottom: 28px; }
.cta-routes { position: relative; }
.route { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 130px; padding: 20px; background: var(--text); color: var(--text-on-light); border-radius: var(--r-card); text-decoration: none; }
.route:hover { color: var(--brand); }
.route-k { color: var(--brand); font-size: var(--fs-xs); }
.route-t { font-size: var(--fs-card-s); line-height: 1.25; }
.cta-mail { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); margin-top: 24px; font-size: var(--fs-card-l); color: var(--text); }

@media (max-width: 1100px) {
  .panel { min-height: 480px; }
}
@media (max-width: 820px) {
  .panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .panel .pimg { order: -1; } /* design keeps the 520px image height on phones */
  .panel.flip > .ptext { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zoom img { transition: none; } .zoom:hover img { transform: none; }
  .hero-layer { transition: none; }
}

/* ═══ Productions ═══ */
.page-head { padding: clamp(128px, 12vw, 168px) 0 clamp(32px, 4vw, 56px); }
.page-head-in { display: flex; flex-direction: column; gap: 18px; }
.page-lead { max-width: 680px; }
.said-lead { max-width: 620px; }

/* filter chips (toggle buttons) */
.filter-sec { padding-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border-color: rgba(255,255,255,.25); background: transparent; color: var(--text); font-weight: 600; cursor: pointer; } /* sized by .btn-sm */
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: var(--text-on-light); font-weight: 700; }

/* production card: image with title over a bottom fade */
.pcard { position: relative; display: block; min-height: 560px; border-radius: var(--r-card); color: var(--text); text-decoration: none; background: var(--bg-dark-2); }
.pcard:hover { color: var(--text); }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,12,22,.05) 35%, rgba(3,12,22,.94) 100%); }
.pcard-pill { position: absolute; top: 16px; left: 16px; background: rgba(3,12,22,.75); color: var(--tint); }
.pcard-text { container-type: inline-size; position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.pcard-ar { font-size: clamp(44px, 18cqi, 128px); line-height: var(--lh-ar-display); text-align: left; margin-bottom: 8px; } /* + 6px gap = 14px */
.pcard-en { margin: 0; font-size: var(--fs-card-s); }
.pcard-meta { font-size: var(--fs-sm); }

/* small portrait card (Said's other work) */
.scard { display: flex; flex-direction: column; gap: 12px; color: var(--text); text-decoration: none; }
.scard:hover { color: var(--text); }
.scard-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); background: var(--bg-dark-2); }
.scard-pill { position: absolute; top: 12px; left: 12px; background: var(--brand); color: var(--text); }
.scard-img img { width: 100%; height: 100%; object-fit: cover; }
.scard-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.scard-en { margin: 0; font-size: var(--fs-card-s); }
.scard-ar { font-size: var(--fs-md); color: var(--tint); }
.scard-meta { font-size: var(--fs-sm); margin-top: -6px; }

/* ═══ Title page ═══ */
.t-hero { position: relative; min-height: 720px; display: flex; align-items: flex-end; }
.t-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* optional hero video (V8.1): right-aligned clip fading in from the left; the bottom shade stays */
.t-hero-video { position: absolute; top: 0; right: 0; height: 100%; width: min(56%, 920px); object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
@media (max-width: 900px) { .t-hero-video { width: 100%; height: 78%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); } }
.t-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,12,22,.35) 0%, rgba(3,12,22,.1) 35%, var(--bg-dark) 100%); }
.t-hero-in { position: relative; width: 100%; padding-bottom: 48px; display: flex; flex-direction: column; gap: 14px; }
.t-back { color: var(--text); align-self: flex-start; }
.t-pill { align-self: flex-start; }
.t-title { margin: 0; display: flex; flex-direction: column; gap: 14px; text-transform: uppercase; }
.t-title-ar { font-size: clamp(64px, 10vw, 160px); line-height: var(--lh-ar-display); text-align: left; }
.t-title-en { font-size: var(--fs-h3); line-height: 1; }
.t-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.t-facts > div { padding: 22px 0; }
.t-facts dt, .t-credits dt { font-size: var(--fs-xs); color: var(--text-subtle); }
.t-facts dd { margin: 8px 0 0; font-size: 17px; }
.t-sec { padding-top: var(--section-gap); }
.t-story { align-items: start; }
.t-story-text { display: flex; flex-direction: column; gap: 18px; }
.t-logline { margin: 0; font-size: var(--fs-h3); line-height: 1.3; }
.t-credits { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.t-credits dd { margin: 6px 0 0; font-size: 18px; line-height: 1.5; }

/* trailer box (data-driven: "coming" label, or play button for the shared player) */
.trailer { position: relative; aspect-ratio: 21 / 9; border-radius: var(--r-card); background: var(--bg-dark-2); }
.trailer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trailer-shade { position: absolute; inset: 0; background: rgba(3,12,22,.45); }
.trailer-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.play { width: 88px; height: 88px; border-radius: 50%; border: 0; background: var(--text); color: var(--text-on-light); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.play:hover { color: var(--brand); }
.trailer-label { color: var(--text); }
/* behind the scenes (V8.1 §10): the same clip twice; blurred fill behind a sharp 9:16 centre */
.bts-bg { position: absolute; inset: -40px; width: calc(100% + 80px); max-width: none; height: calc(100% + 80px); object-fit: cover; filter: blur(32px) brightness(.45) saturate(1.1); }
.bts-fg { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 9 / 16; object-fit: cover; transform: translateX(-50%); }
.bts-pill { position: absolute; top: 16px; left: 16px; background: rgba(3,12,22,.75); color: var(--text); }
.stills { margin-top: 16px; }
.still { aspect-ratio: 3 / 2; border-radius: var(--r-card); background: var(--bg-dark-2); display: flex; align-items: center; justify-content: center; }
.still img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.still-ph { font-size: var(--fs-sm); }
.t-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.t-kit { flex: 1 1 420px; padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.t-kit-d { font-size: var(--fs-base); margin-top: 6px; }
.t-next { flex: 1 1 320px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); text-decoration: none; }
.t-next:hover { color: var(--text); border-color: var(--surface-4); }
.t-next-t { font-size: var(--fs-card-s); margin-top: 6px; }
.t-next-arrow { font-size: 24px; }
@media (max-width: 600px) { .trailer { aspect-ratio: 16 / 9; } }

/* ═══ Shared trailer player (modal) ═══ */
.player { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3,12,22,.96); color: var(--text); }
.player::backdrop { background: rgba(3,12,22,.96); }
.player[open] { display: flex; align-items: center; justify-content: center; }
.player .player-close { display: flex; position: absolute; top: 18px; right: 18px; z-index: 1; }
.player-frame { width: min(92vw, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-md); overflow: hidden; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }


/* shared section title spacing: kicker → h2 */
.sec-title { margin: 12px 0 28px; }
.sec-title-32 { margin-bottom: 32px; }

/* ═══ About ═══ */
.story { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 2px solid var(--interactive); }
.story li { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 8px; }
.story-when { font-size: var(--fs-card-l); color: var(--interactive); line-height: 1.1; }
.story-what { font-size: var(--fs-card-s); }
.story-text { font-size: var(--fs-md); line-height: 1.55; }
.leaders { gap: clamp(20px, 3vw, 40px); }
.leader { display: flex; flex-direction: column; gap: 16px; }
.leader-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); background: var(--bg-dark-2); }
.leader-img img { width: 100%; height: 100%; object-fit: cover; }
.leader-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.leader-name h3 { margin: 0; font-size: var(--fs-card-l); }
.leader-ar { font-size: 22px; line-height: var(--lh-ar-display); color: var(--tint); }
.leader-role { font-size: var(--fs-xs); color: var(--text-muted); }
.leader .lead { font-size: 17px; }
.where-col { display: flex; flex-direction: column; gap: 14px; }
.where-col .g2 { gap: 14px; }
.tile { padding: 24px; }
.tile .kick { font-size: var(--fs-xs); }
.tile-big { font-size: var(--fs-card-l); margin-top: 8px; }
.tile-mid { font-size: var(--fs-card-m); margin-top: 8px; }
.tile-note { font-size: var(--fs-md); margin-top: 6px; }

/* ═══ Said El Marouk ═══ */
.said-head { padding: 128px 0 clamp(48px, 6vw, 80px); }
.said-intro { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.said-ar { margin: 0; font-size: clamp(26px, 3vw, 44px); line-height: var(--lh-ar-display); color: var(--tint); text-align: left; }
.quote { margin: 0; padding-left: 18px; border-left: 3px solid var(--interactive); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; }
.said-portrait { position: relative; min-width: 0; }
.said-portrait img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-2xl); }
.feature-540 { min-height: 540px; }
.feature-en { font-size: var(--fs-card-l); }
.feature-blurb { font-size: var(--fs-base); }
.wide-card { position: relative; border-radius: var(--r-2xl); min-height: 460px; display: flex; align-items: flex-end; }
.wide-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wide-card-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,12,22,.92) 0%, rgba(3,12,22,.3) 70%); }
.wide-card-text { position: relative; padding: clamp(22px, 4vw, 48px); display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.wide-card-text .h2 { font-size: var(--fs-h3); }
.wide-card-text .lead { font-size: 17px; }
.bio { align-items: start; }
.bio-text { display: flex; flex-direction: column; gap: 18px; }
.bio-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); }
/* timeline (V8.1): header + counter, card track aligned to the content edge and bleeding right, progress bar */
.tl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.tl-title { margin-bottom: 0; }
.tl-nav { display: flex; align-items: center; gap: 14px; }
.tl-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.tl-btn:hover { background: var(--text); color: var(--text-on-light); }
.tl-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--text); }
.tl-count { font-size: var(--fs-card-s); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center; }
.tl { --tl-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + 64px));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: var(--tl-left); scrollbar-width: none; }
.tl::-webkit-scrollbar { display: none; }
.tl:focus-visible { outline-offset: -2px; }
.tl-list { position: relative; list-style: none; margin: 0; display: flex; gap: 16px; width: max-content; padding: 31px var(--gutter) 6px var(--tl-left); }
.tl-list::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.14); } /* the line, 24px above the cards */
.tl-card { position: relative; flex: 0 0 clamp(260px, 24vw, 320px); scroll-snap-align: start; background: var(--bg-dark-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.tl-card::before { content: ""; position: absolute; top: -31px; left: 24px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--interactive); background: var(--bg-dark); } /* ring dot on the line */
.tl-when { font-size: var(--fs-h3); line-height: 1; }
.tl-where { font-size: var(--fs-xs); color: var(--tint); }
.tl-text { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--text-soft); }
.tl-l7 { background: var(--brand); border-color: var(--interactive); }
.tl-l7 .tl-where, .tl-l7 .tl-text { color: var(--text); }
.tl-l7::before { background: var(--interactive); } /* filled dot */
.tl-progress { height: 3px; margin-top: 24px; background: rgba(255,255,255,.1); border-radius: var(--r-pill); overflow: hidden; }
.tl-progress span { display: block; height: 100%; background: var(--interactive); border-radius: inherit; transition: width .3s var(--ease); }
@media (max-width: 600px) {
  .tl-card { flex-basis: 78vw; }
  .tl-btn { width: var(--tap); height: var(--tap); }
}
@media (prefers-reduced-motion: reduce) { .tl { scroll-behavior: auto; } .tl-progress span { transition: none; } }
.mv-intro { display: flex; flex-direction: column; gap: 16px; }
.artists { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); column-gap: 24px; border-top: 1px solid rgba(255,255,255,.14); }
.artists li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: var(--fs-base); }
.award { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.award-big { font-size: var(--fs-card-l); color: var(--interactive); line-height: 1.1; }
.award-title { font-size: var(--fs-card-s); }
.award-note { font-size: var(--fs-md); }
.list-tile { padding: 24px; }
.list-tile ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-base); line-height: 1.8; }
.cta-band { background: var(--brand); border-radius: var(--r-2xl); padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.cta-band .h2 { font-size: var(--fs-h3); }
.mt-16 { margin-top: 16px; }
.mt-28 { margin-top: 28px; }

/* ═══ Services ═══ */
.svc-blocks { display: flex; flex-direction: column; gap: 20px; }
.svc-block { padding: clamp(16px, 2vw, 24px); gap: clamp(20px, 3vw, 40px); }
.svc-block-img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-card); background: var(--bg-dark-2); }
.svc-block-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-block-text { display: flex; flex-direction: column; gap: 14px; padding: clamp(4px, 1vw, 12px); }
.svc-num { font-size: var(--fs-h3); color: var(--interactive); line-height: 1; }
.svc-block .h2 { font-size: var(--fs-h3); }
.svc-block .lead { font-size: 17px; }
.tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border: 1px solid rgba(255,255,255,.2); color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 600; }
.steps { margin: 0; padding: 0; list-style: none; }
.step { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.step-n { font-size: var(--fs-card-l); color: var(--interactive); line-height: 1.1; }
.step-t { font-size: var(--fs-card-s); }
.step-d { font-size: var(--fs-md); line-height: 1.55; }

/* ═══ News & Press ═══ */
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item { padding: clamp(14px, 2vw, 20px); gap: clamp(18px, 3vw, 36px); }
.news-item-img { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--bg-dark-2); }
.news-item-img img { width: 100%; height: 100%; object-fit: cover; }
.news-item-text { display: flex; flex-direction: column; gap: 12px; }
.news-item-title { font-size: var(--fs-card-l); }
.pk { position: relative; display: flex; flex-direction: column; }
.pk-img { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
.pk-img img { width: 100%; height: 100%; object-fit: cover; }
.pk-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pk-name { margin: 0; font-size: var(--fs-card-s); }
.pk-link { color: var(--text); text-decoration: none; }
.pk-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card opens the title page */
.pk:hover .pk-link { color: var(--tint); }
.pk-btn { position: relative; z-index: 1; justify-content: center; }
.pk-note { font-size: var(--fs-sm); }
.press-contact { margin-top: 20px; padding: 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.press-contact-d { font-size: 17px; margin-top: 6px; }

/* ═══ Careers + Contact ═══ */
.call { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.call-pill { align-self: flex-start; border-width: 1px; }
.call-title { margin: 0; font-size: var(--fs-card-s); }
.call-text { font-size: var(--fs-md); line-height: 1.55; }
.signup-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-card); margin-top: 8px; }
.form-off { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.form-off-text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-soft); }
.croute { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 170px; padding: 22px; color: var(--text); text-decoration: none; }
.croute:hover { color: var(--text); border-color: var(--surface-4); }
.croute-k { font-size: var(--fs-xs); }
.croute-body { display: flex; flex-direction: column; gap: 6px; }
.croute-t { font-size: var(--fs-card-s); }
.croute-s { font-size: var(--fs-sm); }
.contact-sec { padding-top: var(--section-gap); }
.contact-mail { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-card-l); margin-top: 4px; color: var(--text); overflow-wrap: anywhere; }
.tile-phone { font-size: 17px; margin-top: 8px; }
.contact-img { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--bg-dark-2); }
.contact-img img { width: 100%; height: 100%; object-fit: cover; }

/* form (switched on by FLAGS.forms) */
.form { padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.form-title { font-size: var(--fs-card-l); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: var(--fs-label); font-weight: 600; color: var(--text-soft); }
.req { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea { height: 52px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--bg-dark-2); color: var(--text); font: inherit; font-size: var(--fs-base); width: 100%; }
.field textarea { height: 140px; padding: 14px 16px; resize: vertical; }
.field input::placeholder { color: var(--text-subtle); }
.field [aria-invalid="true"] { border: 2px solid var(--tint); }          /* error shown by text too, never colour alone */
.field-error { margin: 0; font-size: var(--fs-sm); color: var(--text); }
.field-error::before { content: "⚠ "; color: var(--tint); }
.form-summary { padding: 14px 16px; border: 2px solid var(--tint); border-radius: var(--r-md); font-size: var(--fs-sm); }
.form-summary ul { margin: 6px 0 0; padding-left: 18px; }
.form-summary a { color: var(--text); }
.form-submit { border: 0; cursor: pointer; justify-content: center; }
.form-submit[disabled] { opacity: .6; cursor: progress; }
.form-status { margin: 0; font-size: var(--fs-md); }
.form-status:empty { display: none; }
.form-note { margin: 0; font-size: var(--fs-label); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* spam trap: bots fill it, people never see it */

/* hero window: tablet and phone */
@media (max-width: 1100px) {
  .hero-v { font-size: clamp(520px, 80vw, 880px); margin-right: -12vw; }
}
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding-top: 0; }
  .hero-window { align-items: flex-start; justify-content: center; }
  .hero-v { font-size: clamp(400px, 112vw, 780px); margin: 56px 0 0; transform: none; }
  .hero-layer-v { width: 100%; height: min(78%, 760px); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .hero-shade { background: linear-gradient(180deg, transparent 0%, rgba(3,12,22,.9) 62%, var(--bg-dark) 100%); }
  .hero-in { padding-top: clamp(380px, 96vw, 640px); }
}
@media (prefers-reduced-motion: reduce) { .hero-layer { transition: none; } }

/* ═══ Home hero cleanup (V8.1 §7) ═══ */
.hero-dots { margin-left: -9px; } /* first dot lines up with the text edge (44px target, 26px bar centred) */
/* status cards under the hero */
.status-cards { padding-top: clamp(20px, 2.5vw, 32px); }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.scard2 { display: flex; align-items: center; gap: 18px; padding: 14px 20px 14px 14px; background: var(--bg-dark-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-card); color: var(--text); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.scard2:hover { color: var(--text); border-color: rgba(159,203,238,.45); background: var(--bg-hover); }
.scard2-thumb { position: relative; flex: none; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: var(--bg-dark); }
.scard2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scard2-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scard2-k { font-size: var(--fs-xs); }
.scard2-t { font-size: var(--fs-card-l); line-height: 1.1; } /* card titles: normal case */
.scard2-m { font-size: var(--fs-sm); color: var(--text-muted); }
.scard2-arrow { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid rgba(255,255,255,.25); font-size: 18px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.scard2:hover .scard2-arrow { background: var(--text); color: var(--text-on-light); border-color: var(--text); }
@media (max-width: 700px) {
  .status-grid { grid-template-columns: minmax(0, 1fr); }
  .scard2-thumb { width: 68px; height: 68px; }
  .scard2-t { font-size: var(--fs-card-m); }
}
@media (prefers-reduced-motion: reduce) { .scard2, .scard2-arrow { transition: none; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }