/* ═══════════════════════════════════════════════════════════════════
   أوان — Awan Dubbing Studio
   Pure CSS. Warm paper palette, one accent, one motion language.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────────────── */
/* Colour lives in swappable palettes: every other rule reads the tokens
   below, never a literal colour, so switching [data-palette] on <html>
   re-skins the whole site — the canvas wave included, since it reads
   --accent straight off the root. */
:root{
  /* one motion language — no `linear`, ever */
  --e-out:cubic-bezier(.16,1,.3,1);          /* expo out — entrances    */
  --e-soft:cubic-bezier(.22,.61,.36,1);      /* gentle out — hovers     */
  --e-both:cubic-bezier(.65,0,.35,1);        /* in-out — state changes  */
  --d1:.32s; --d2:.62s; --d3:1.15s;
  --step:90ms;                               /* stagger unit            */

  /* rhythm */
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --sec-y:clamp(6rem,14vh,11rem);
  --max:1320px;
  --origin:right;                            /* flipped for LTR below   */
}
:root[dir="ltr"]{ --origin:left; }

/* ── نهاري · day — warm paper, one red accent ─────────────────────
   Two themes only. Everything else in the file reads these tokens and
   never names a colour, so the whole site — the canvas wave included —
   turns over when data-theme changes. Night is the default, so the bare
   :root below carries it and this block overrides: a page rendered with
   scripting blocked still opens dark rather than light. */
:root[data-theme="day"]{
  --paper:#f4f1ec;
  --paper-2:#ece7df;
  --paper-3:#e1dad0;
  --ink:#17150f;
  --ink-2:rgba(23,21,15,.66);
  --ink-3:rgba(23,21,15,.50);
  --rule:rgba(23,21,15,.13);
  --accent:#cc2f22;               /* a clear red, 4.66:1 on the paper */
  --accent-deep:#e4574a;          /* the same red, lifted for the dark block */
  --accent-soft:rgba(204,47,34,.10);
  --accent-2:#cc2f22;             /* second colour; in day it is the same red */
  --glow:rgba(204,47,34,.15);
  --veil:rgba(244,241,236,.58);
  --deep:#17150f;                 /* the contact block, against the page  */
  --on-deep:#f4f1ec;
  --on-deep-2:rgba(244,241,236,.62);
  --on-deep-3:rgba(244,241,236,.52);
  --deep-rule:rgba(244,241,236,.16);
  --grain:.26;
  color-scheme:light;
}

/* ── ليلي · night — white on black, and the site's default ──────── */
:root,
:root[data-theme="night"]{
  --paper:#0a0a0a;
  --paper-2:#141414;
  --paper-3:#1f1f1f;
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.74);
  --ink-3:rgba(255,255,255,.58);
  --rule:rgba(255,255,255,.15);
  /* the goldfinch's two colours: its wing yellow and its face red, on black */
  --accent:#F2C230;               /* wing yellow — links, highlights, lines */
  --accent-2:#E5484D;             /* face red — the big numbers and the small dots */
  --accent-deep:#F2C230;
  --accent-soft:rgba(242,194,48,.12);
  --glow:rgba(242,194,48,.10);
  --veil:rgba(0,0,0,.66);
  --deep:#161616;                 /* contact block: a step up from the page, still black */
  --on-deep:#ffffff;
  --on-deep-2:rgba(255,255,255,.72);
  --on-deep-3:rgba(255,255,255,.56);
  --deep-rule:rgba(255,255,255,.14);
  --grain:.12;
  color-scheme:dark;
}

/* ─── 2. Base ───────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  /* IBM Plex Sans Arabic carries the Latin too, so one family sets the whole
     page and the Arabic and the English never drift apart. It draws lighter
     than the geometric face it replaced, so body copy sits at 400 — the
     headings keep their 200/300 and still read airy. */
  font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,"Segoe UI",Tahoma,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1rem,.94rem + .3vw,1.1rem);
  line-height:1.8;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
/* A class with a display of its own outranks the browser's own
   [hidden]{display:none}, which left the closed mobile menu stretched over
   the page swallowing every click under the nav. Hidden means hidden. */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3{ font-weight:300; margin:0; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:3px;
}

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

.skip{
  position:fixed; inset-block-start:-100px; inset-inline-start:50%;
  transform:translateX(50%);
  z-index:999; padding:.7rem 1.2rem; background:var(--ink); color:var(--paper);
  border-radius:0 0 8px 8px; transition:inset-block-start var(--d1) var(--e-out);
}
:root[dir="ltr"] .skip{ transform:translateX(-50%); }
.skip:focus{ inset-block-start:0; }

/* paper grain — cheap texture, one fixed layer */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.4'/></svg>");
}

/* ─── 3. Typography helpers ─────────────────────────────────────── */
.label{
  font-size:.78rem; font-weight:500; color:var(--ink-3);
  margin-block-end:clamp(1.75rem,4vw,3rem);
  display:flex; align-items:center; gap:.75rem;
}
.label::after{ content:""; flex:1; height:1px; background:var(--rule); }
:root[lang="en"] .label{ text-transform:uppercase; letter-spacing:.2em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:400; color:var(--ink-2);
  margin-block-end:clamp(1.5rem,3vw,2.25rem);
}
:root[lang="en"] .eyebrow{ letter-spacing:.12em; text-transform:uppercase; }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

.sec__title{
  font-size:clamp(2rem,1.2rem + 3.2vw,3.6rem);
  line-height:1.24; font-weight:200; max-width:20ch;
  margin-block-end:clamp(3rem,7vw,5.5rem);
}

/* masked line rise — the site's signature entrance */
.line{
  display:block; overflow:hidden;
  padding-block:.22em .18em; margin-block:-.22em -.18em;
}
.line__in{ display:block; will-change:transform; }

/* ─── 4. Reveal system ──────────────────────────────────────────── */
[data-rv]{ --dl:calc(var(--i,0) * var(--step)); }

[data-rv="up"]  { opacity:0; transform:translate3d(0,26px,0);
                  transition:opacity var(--d2) var(--e-out) var(--dl),
                             transform var(--d3) var(--e-out) var(--dl); }
[data-rv="line"]{ transform:translate3d(0,110%,0);
                  transition:transform var(--d3) var(--e-out) var(--dl); }
[data-rv="wipe"]{ opacity:.08;
                  clip-path:inset(0 0 0 100%);
                  transition:clip-path 1.05s var(--e-out) var(--dl),
                             opacity .8s var(--e-soft) var(--dl); }
:root[dir="ltr"] [data-rv="wipe"]{ clip-path:inset(0 100% 0 0); }
[data-rv="row"] { opacity:0; transform:translate3d(0,18px,0);
                  transition:opacity var(--d2) var(--e-out) var(--dl),
                             transform var(--d2) var(--e-out) var(--dl); }
[data-rv="row"]::before{ transform:scaleX(0); transform-origin:var(--origin);
                  transition:transform .95s var(--e-out) var(--dl); }
/* [data-rv="img"] lives with the rail component in section 7b */
[data-rv="mail"]{ opacity:0; transform:translate3d(0,18px,0);
                  transition:opacity var(--d2) var(--e-out) var(--dl),
                             transform var(--d2) var(--e-out) var(--dl); }
[data-rv="mail"]::after{ transform:scaleX(0); transform-origin:var(--origin);
                  transition:transform 1.2s var(--e-out) calc(var(--dl) + 320ms); }

.rv-in[data-rv="up"],
.rv-in[data-rv="row"],
.rv-in[data-rv="mail"]  { opacity:1; transform:none; }
.rv-in[data-rv="line"]  { transform:none; }
.rv-in[data-rv="wipe"]  { opacity:1; clip-path:inset(0 0 0 0); }
.rv-in[data-rv="row"]::before,
.rv-in[data-rv="mail"]::after{ transform:scaleX(1); }

/* ─── 5. Nav ────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:50;
  transition:transform var(--d2) var(--e-out), background var(--d2) var(--e-soft),
             border-color var(--d2) var(--e-soft);
  border-block-end:1px solid transparent;
}
.nav.is-stuck{
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-block-end-color:var(--rule);
}
.nav.is-hidden{ transform:translate3d(0,-102%,0); }
.nav__in{
  max-width:var(--max); margin-inline:auto; padding:1.05rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
/* the mark is a landscape lockup (bird + wordmark), so height leads and
   width follows — a square box would squeeze the wordmark to nothing */
.brand__logo{ height:38px; width:auto; max-width:152px; object-fit:contain; }
/* the same lockup in two inks; each surface shows the one it can carry */
.mark--cream{ display:none; }
[data-theme="night"] .brand__logo.mark--ink{ display:none; }
[data-theme="night"] .brand__logo.mark--cream{ display:block; }
.foot__logo.mark--ink{ display:none; }
.foot__logo.mark--cream{ display:block; }
.brand__name{ font-size:1.05rem; font-weight:500; letter-spacing:.01em; }
.nav__links{ display:flex; gap:clamp(1.4rem,3vw,2.6rem); font-size:.95rem; }
.nav__links a{ position:relative; color:var(--ink-2); transition:color var(--d1) var(--e-soft); }
.nav__links a::after{
  content:""; position:absolute; inset-block-end:-5px; inset-inline:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:var(--origin);
  transition:transform var(--d2) var(--e-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--ink); }

.nav__side{ display:flex; align-items:center; gap:.9rem; }
.theme{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule); color:var(--ink-2);
  display:grid; place-items:center;
  transition:background var(--d1) var(--e-soft), color var(--d1) var(--e-soft),
             border-color var(--d1) var(--e-soft);
}
.theme:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.theme svg{ width:19px; height:19px; grid-area:1/1; fill:none; stroke:currentColor;
            stroke-width:1.6; stroke-linecap:round; }
.theme__moon{ fill:currentColor; stroke:none; }
.theme__moon,
[data-theme="night"] .theme__sun{ display:none; }
[data-theme="night"] .theme__moon{ display:block; }

/* WhatsApp and LinkedIn, drawn the same way the theme button is drawn and
   inked from the same tokens — a brand green in this palette would be the
   only colour on the page that answers to nobody. */
.nav__ico{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule); color:var(--ink-2);
  display:grid; place-items:center;
  transition:background var(--d1) var(--e-soft), color var(--d1) var(--e-soft),
             border-color var(--d1) var(--e-soft), transform var(--d2) var(--e-out);
}
.nav__ico svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.nav__ico:hover{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
  transform:translateY(-2px);
}
/* on the narrow nav they would crowd the mark, so they move into the menu */
@media (max-width:860px){ .nav__side > .nav__ico{ display:none; } }
.menu__side{
  display:none; gap:.9rem; justify-content:center;
  margin-block-start:clamp(2.5rem,7vh,4rem);
}
@media (max-width:860px){ .menu__side{ display:flex; } }
.menu__side .nav__ico{ width:46px; height:46px; }
.menu__side .nav__ico svg{ width:22px; height:22px; }

.lang{
  font-size:.76rem; font-weight:500; letter-spacing:.1em;
  padding:.42rem .85rem; border:1px solid var(--rule); border-radius:100px;
  transition:background var(--d1) var(--e-soft), border-color var(--d1) var(--e-soft),
             color var(--d1) var(--e-soft);
}
.lang:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.burger{ display:none; width:34px; height:34px; position:relative; }
.burger span{
  position:absolute; inset-inline:5px; height:1.5px; background:var(--ink);
  transition:transform var(--d2) var(--e-out), opacity var(--d1) var(--e-soft);
}
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:20px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:45; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--d2) var(--e-out);
}
.menu.is-open{ opacity:1; }
.menu__nav{ display:flex; flex-direction:column; gap:.4rem; text-align:center; }
.menu__nav a{
  font-size:clamp(2rem,9vw,3rem); font-weight:200; line-height:1.5;
  opacity:0; transform:translate3d(0,24px,0);
  transition:opacity var(--d2) var(--e-out) calc(var(--i) * 70ms + 90ms),
             transform var(--d3) var(--e-out) calc(var(--i) * 70ms + 90ms);
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; }

/* ─── 6. Hero ───────────────────────────────────────────────────── */
/* The reel opens the page at full width and is shown whole — the films
   carry their own titles and captions burned into the frame, so nothing
   may be cropped off them and nothing may be laid over them. The copy
   follows underneath. All that is left of the old veil is the melt at the
   edges, which is what tied the reel to the paper in the first place. */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding-block:0 clamp(3rem,7vh,5rem);
}
.hero__media{
  position:relative; z-index:0; width:100%; aspect-ratio:16/9;
  overflow:hidden; background:var(--paper-2);
}
/* The reel fills the screen outright — full height, full width, no bars.
   A display that is not 16:9 takes the crop at its edges. All that is laid
   over it is the melt at top and bottom: enough to keep the nav legible and
   to carry the frame down into the page colour, and nothing more. */
.hero__media{ height:100svh; aspect-ratio:auto; }
.hero__video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--paper-2); }
.hero__media.is-empty{ background:linear-gradient(140deg,var(--paper-2),var(--paper-3)); }
.hero__media.is-empty .hero__video{ display:none; }
.hero__veil{ position:absolute; inset:0; pointer-events:none; }
.hero__veil::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,var(--paper),transparent 9%),
    linear-gradient(to bottom,transparent 86%,var(--paper) 100%);
}

.hero__wave{
  position:absolute; inset-block-end:0; inset-inline:0;
  width:100%; height:min(52vh,460px); z-index:-1; opacity:.9;
  pointer-events:none;
}
/* with a reel playing the wave would only muddy it */
.hero.has-reel .hero__wave,
.hero.has-reel .hero__glow{ display:none; }
.hero__wave,.hero__glow,.hero__perch{ position:absolute; }
.hero__glow{
  position:absolute; z-index:-2; inset-block-start:-18%; inset-inline-end:-10%;
  width:min(76vw,860px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--glow),transparent 66%);
  will-change:transform;
}
.hero__in{ position:relative; }


.hero__title{
  font-size:clamp(2.6rem,1rem + 7.4vw,6.5rem);
  line-height:1.2; font-weight:200; letter-spacing:-.035em;
  margin-block-end:clamp(1.5rem,3.2vw,2.1rem);
  max-width:none;
}
/* The words are their own panel now, centred under the reel and sitting in
   a pool of the accent — the same --glow the hero always carried, moved
   from behind the picture to behind the writing. */
.hero__in{
  position:relative; z-index:2; text-align:center;
  padding-block-start:clamp(2.5rem,6vh,4.5rem);
}
.hero__in::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block:-18% -22%; inset-inline:0; margin-inline:auto;
  width:min(94vw,980px);
  background:radial-gradient(ellipse 62% 56% at 50% 50%,var(--glow),transparent 72%);
}
.hero__in .eyebrow,
.hero__in .hero__tag{ justify-content:center; }

/* The kit either side of the name, drawn in line rather than photographed:
   the mic on its stand and the headphones to one side, the screen, the
   interface and a length of the perforated strip the goldfinch carries in
   its beak to the other. Decoration, so it is hidden from the reader and
   steps aside the moment the copy needs the width. Left and right are
   physical here on purpose — the objects do not read, so they do not
   change sides with the language. */
.hero__deco{
  position:absolute; inset-block-start:50%; translate:0 -50%;
  width:clamp(128px,13.5vw,205px); height:auto;
  color:var(--ink-3); opacity:.5; pointer-events:none;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.hero__deco--right{ right:clamp(0px,2vw,56px); }
.hero__deco--left { left: clamp(0px,2vw,56px); }
/* below this the copy wants the whole line */
@media (max-width:1150px){ .hero__deco{ display:none; } }
.hero__sub{ margin-inline:auto; }
.hero__cta{ justify-content:center; }
.hero__name{ font-weight:300; letter-spacing:-.02em; unicode-bidi:isolate; }
.hero__tag{
  font-size:clamp(1.3rem,.8rem + 2.2vw,2.5rem); font-weight:200;
  line-height:1.35; color:var(--accent); letter-spacing:-.015em;
}
.hero__sub{ max-width:48ch; color:var(--ink-2); font-size:clamp(1rem,.95rem + .35vw,1.2rem); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-block-start:clamp(1.9rem,4vw,2.6rem); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.9rem; border-radius:100px; font-size:.95rem; font-weight:400;
  border:1px solid transparent;
  transition:transform var(--d2) var(--e-out), background var(--d1) var(--e-soft),
             color var(--d1) var(--e-soft), border-color var(--d1) var(--e-soft);
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--accent); transform:translateY(-3px); }
.btn--ghost{ border-color:var(--rule); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-3px); }

.cue{
  align-self:center;
  margin-block-start:clamp(1.75rem,4vh,2.75rem);
  display:flex; align-items:center; gap:.7rem;
  font-size:.76rem; color:var(--ink-3);
  transition:color var(--d1) var(--e-soft);
}
.cue:hover{ color:var(--ink); }
:root[lang="en"] .cue{ letter-spacing:.2em; text-transform:uppercase; }
.cue__bars{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.cue__bars i{
  width:2px; background:var(--accent); border-radius:2px;
  animation:eq 1.5s var(--e-both) infinite;
}
.cue__bars i:nth-child(1){ height:40%; animation-delay:0s; }
.cue__bars i:nth-child(2){ height:100%; animation-delay:.18s; }
.cue__bars i:nth-child(3){ height:60%; animation-delay:.36s; }
.cue__bars i:nth-child(4){ height:85%; animation-delay:.54s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }

/* ─── 7. Sections ───────────────────────────────────────────────── */
.sec{ position:relative; padding-block:var(--sec-y); }

/* about */
.statement{
  font-size:clamp(1.6rem,.9rem + 2.7vw,3.05rem);
  line-height:1.45; font-weight:200; letter-spacing:-.02em;
  max-width:25ch; margin-block-end:clamp(3.5rem,8vw,6rem);
}
.statement .wipe{ display:block; }
.about__grid{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .about__grid{ grid-template-columns:1.1fr .9fr; } }
.about__text{ color:var(--ink-2); max-width:56ch; }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:900px){ .stats{ grid-template-columns:1fr; gap:clamp(1.5rem,2.6vw,2.25rem); } }
.stats li{ display:flex; flex-direction:column; gap:.15rem; }
.stats .num{
  direction:ltr; unicode-bidi:isolate;
  font-size:clamp(2.1rem,1.4rem + 2vw,3.1rem); font-weight:200;
  letter-spacing:-.03em; line-height:1.1; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.stats span{ font-size:.86rem; color:var(--ink-3); line-height:1.5; }

/* services */
.srv{ border-block-start:1px solid var(--rule); }
.srv__row{
  position:relative; display:grid; align-items:baseline;
  grid-template-columns:auto 1fr; gap:.4rem 1.5rem;
  padding-block:clamp(1.6rem,3.4vw,2.4rem);
  transition:padding-inline var(--d2) var(--e-out);
}
.srv__row::before{
  content:""; position:absolute; inset-block-end:0; inset-inline:0;
  height:1px; background:var(--rule);
}
.srv__no{
  font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums;
  padding-block-start:.55em;
}
.srv__name{
  font-size:clamp(1.5rem,1rem + 1.9vw,2.5rem); font-weight:200; line-height:1.35;
  transition:color var(--d2) var(--e-soft), transform var(--d2) var(--e-out);
}
.srv__txt{
  grid-column:2; color:var(--ink-2); max-width:52ch; font-size:.98rem;
  transition:color var(--d2) var(--e-soft);
}
@media (min-width:900px){
  .srv__row{ grid-template-columns:auto minmax(0,1fr) minmax(0,.95fr); gap:0 2.5rem; }
  .srv__txt{ grid-column:3; grid-row:1; padding-block-start:.7em; }
}
@media (hover:hover){
  .srv__row:hover .srv__name{ color:var(--accent); transform:translateX(calc(var(--dir,-1) * 10px)); }
  .srv__row:hover .srv__txt{ color:var(--ink); }
}
:root[dir="rtl"]{ --dir:-1; }
:root[dir="ltr"]{ --dir:1; }

/* ─── 7b. Rails (work) ──────────────────────────────────────────── */
/* One row-scroll component, used by both poster rows in the work
   section. It is a real scroll container, so a touch swipe, a trackpad
   flick and the arrow keys all work without anything being hijacked.
   The base below is the plain landscape card; .rail--posters further
   down turns it into the uniform portrait frame. */

.rail__lead{
  color:var(--ink-2); max-width:52ch;
  margin-block-start:clamp(-2.5rem,-4vw,-1.75rem);   /* pull under the title */
  margin-block-end:clamp(2.5rem,5vw,3.5rem);
}

/* Full-bleed: the rail escapes .wrap so cards can run to the edge and
   hint that there is more to the side. --rail-pad keeps the first card
   under the heading anyway: past --max the wrap stops growing and
   centres itself, so the gutter alone would leave the card too far out. */
.rail{
  --rail-pad:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;                 /* our own progress bar below */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;        /* don't trigger back-swipe */
  /* snap to the card's edge at the gutter, not at the screen edge */
  scroll-padding-inline-start:var(--rail-pad);
  padding-block-end:.5rem;
}
.rail::-webkit-scrollbar{ display:none; }
.rail:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:4px; }
.rail.is-grabbing{ cursor:grabbing; }
@media (hover:hover){ .rail{ cursor:grab; } }

.rail[data-auto]{ scroll-snap-type:none; }
.rail__item--clone{ pointer-events:none; }

.rail__track{
  display:flex; gap:clamp(1rem,2.4vw,2rem);
  padding-inline:var(--rail-pad);
  width:max-content;                    /* let the row size to its cards */
}

.rcard{ flex:0 0 clamp(260px,64vw,540px); scroll-snap-align:start; margin:0; }
.rcard__fig{ margin:0; }
.rcard__hit{ display:block; width:100%; text-align:start; }

.rcard__frame{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/2; border-radius:6px; background:var(--paper-3);
  will-change:clip-path;
}
.rcard__frame img{
  width:100%; height:100%; object-fit:cover;
  /* a touch wider than the frame so it can drift inside it */
  transform:scale(1.08); will-change:transform;
}
@media (hover:hover){
  .rcard__hit:hover .rcard__frame img{ filter:brightness(1.06); }
  .rcard__frame img{ transition:filter var(--d2) var(--e-soft); }
  .rcard__hit:hover .rcard__eq{ opacity:1; transform:translateY(0); }
  .rcard__hit:hover .rcard__eq i{ animation-play-state:running; }
}

/* Every poster card is the same size — a 3:4 frame of one fixed height — but
   posters come in whatever shape their designer chose (2:3, 3:4, 4:5), so the
   artwork is fitted WHOLE inside it and a blurred copy of the same file (same
   URL, so no second download) fills whatever is left over. Uniform row, and
   not a pixel of any poster is cropped. */
.rail--posters .rcard{ flex:0 0 auto; }
.rail--posters .rcard__frame{
  aspect-ratio:3/4;
  height:clamp(300px,46vh,460px);
  width:auto; max-width:none;
  background:var(--paper-3);
}
/* --art is set from the card's own <img> in main.js, so the blur and the
   artwork share one request — see the note there for why not in the markup. */
.rail--posters .rcard__frame::before{
  content:""; position:absolute; inset:-8%;
  background:var(--art) center/cover no-repeat;
  filter:blur(22px) saturate(1.25) brightness(.85);
  transform:translate3d(var(--drift,0),0,0);   /* the row's drift lives here */
  will-change:transform;
}
.rail--posters .rcard__frame img{
  position:relative; width:100%; height:100%; object-fit:contain;
  transform:none;                       /* the drift belongs to the blur below */
}
.rail--posters .rcard__frame.is-empty::before{ display:none; }
/* keep the caption from stretching the card past its poster */
.rail--posters .rcard__cap{ width:0; min-width:100%; }

.rcard__cap{ padding-block-start:1.05rem; max-width:42ch; }
.rcard__cap h3{ font-size:1.15rem; font-weight:400; line-height:1.5; }
.rcard__cap p{ font-size:.88rem; color:var(--ink-3); line-height:1.7; margin-block-start:.3rem; }
.rail--posters .rcard__cap p{ font-size:.84rem; margin-block-start:.15rem; }

/* the one sound cue on the posters: five bars that start moving on hover */
.rcard__eq{
  position:absolute; inset-block-end:14px; inset-inline-start:14px;
  display:flex; align-items:flex-end; gap:3px; height:22px;
  padding:8px 10px; border-radius:100px;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--d2) var(--e-out), transform var(--d2) var(--e-out);
}
.rcard__eq i{
  width:2.5px; height:100%; background:var(--accent); border-radius:2px;
  transform-origin:bottom; animation:eq 1.15s var(--e-both) infinite paused;
}
.rcard__eq i:nth-child(2){ animation-delay:.12s; }
.rcard__eq i:nth-child(3){ animation-delay:.24s; }
.rcard__eq i:nth-child(4){ animation-delay:.36s; }
.rcard__eq i:nth-child(5){ animation-delay:.48s; }

/* the reveal: each card is uncovered from the bottom up as it arrives */
[data-rv="img"] .rcard__frame{ clip-path:inset(0 0 101% 0);
                  transition:clip-path 1.1s var(--e-out) var(--dl); }
[data-rv="img"] .rcard__cap{ opacity:0; transform:translate3d(0,14px,0);
                  transition:opacity var(--d2) var(--e-out) calc(var(--dl) + 260ms),
                             transform var(--d2) var(--e-out) calc(var(--dl) + 260ms); }
.rv-in[data-rv="img"] .rcard__frame{ clip-path:inset(0 0 0 0); }
.rv-in[data-rv="img"] .rcard__cap{ opacity:1; transform:none; }

/* missing photo → a quiet tile carrying the title, so the row still reads */
.rcard__frame.is-empty{ background:linear-gradient(135deg,var(--paper-2),var(--paper-3)); }
.rcard__frame.is-empty img{ display:none; }
.rcard__frame.is-empty .rcard__eq{ display:none; }
.rcard__frame.is-empty::after{
  content:attr(data-glyph); position:absolute; inset:0;
  display:grid; place-items:center; padding:2rem; text-align:center;
  font-size:clamp(1.05rem,1.8vw,1.4rem); font-weight:300; line-height:1.6;
  color:var(--ink-3);
}

.rail__ui{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; margin-block-start:clamp(1.75rem,3.5vw,2.5rem);
}
.rail__bar{
  flex:1; max-width:320px; height:2px; background:var(--rule);
  border-radius:2px; overflow:hidden;
}
.rail__fill{
  display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(.2); transform-origin:var(--origin);
}
.rail__btns{ display:flex; gap:.6rem; }
.rail__btn{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--rule); color:var(--ink-2);
  display:grid; place-items:center;
  transition:background var(--d1) var(--e-soft), color var(--d1) var(--e-soft),
             border-color var(--d1) var(--e-soft), opacity var(--d1) var(--e-soft);
}
.rail__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor;
                stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
:root[dir="rtl"] .rail__btn svg{ transform:scaleX(-1); }
.rail__btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.rail__btn[disabled]{ opacity:.3; pointer-events:none; }

@media (max-width:640px){
  .rail__btns{ display:none; }              /* swipe is the control here */
  .rail__bar{ max-width:none; }
}



/* the group profile, as a download */
.pf{ margin-block-start:clamp(2.25rem,4.5vw,3.25rem); }
.pf__link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.92rem; color:var(--ink);
  padding-block-end:.45rem; border-block-end:1px solid var(--rule);
  transition:color .4s var(--e-soft), border-color .4s var(--e-soft);
}
.pf__link::after{
  content:"↓"; font-size:1.05em; color:var(--accent);
  transition:transform .5s var(--e-both);
}
.pf__link:hover{ color:var(--accent); border-color:var(--accent); }
.pf__link:hover::after{ transform:translateY(3px); }

/* the extra titles that don't have a poster yet */
.more{ margin-block-start:clamp(2.5rem,5vw,4rem); }
.more__k{ font-size:.86rem; color:var(--ink-3); margin-block-end:1.1rem; max-width:60ch; }
.more__list{ display:flex; flex-wrap:wrap; gap:.6rem .7rem; }
.more__list li{
  font-size:.88rem; color:var(--ink-2); padding:.42rem .95rem;
  border:1px solid var(--rule); border-radius:999px;
  transition:color .4s var(--e-soft), border-color .4s var(--e-soft);
}
.more__list li:hover{ color:var(--ink); border-color:var(--accent); }

/* channels: a row of pills. Thirteen logo files would have cost more than
   the row is worth — the names carry it, and the page stays light. */
.chan__list{
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
  display:flex; flex-wrap:wrap; gap:.75rem .9rem;
}
.chan__list li{
  font-size:clamp(.92rem,1.2vw,1.05rem); color:var(--ink-2);
  padding:.6rem 1.25rem; border:1px solid var(--rule); border-radius:999px;
  background:var(--paper-2);
  transition:color .45s var(--e-soft), border-color .45s var(--e-soft), transform .45s var(--e-soft);
}
.chan__list li:hover{ color:var(--ink); border-color:var(--accent); transform:translateY(-2px); }
/* ─── 7h. The city in pictures ──────────────────────────────────── */
/* Three to a row, every frame the same 3:2 box so the wall is even however
   the photographs were shot. They were taken on a phone over several
   visits, so they are cropped to one ratio and graded to one warmth —
   otherwise the row reads as a folder, not a place. */
.shots__grid{
  display:grid; gap:clamp(.65rem,1.5vw,1.1rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:620px){ .shots__grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:980px){ .shots__grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1280px){ .shots__grid{ grid-template-columns:repeat(5,1fr); } }

.shot{ margin:0; }
.shot__hit{ display:block; width:100%; }
/* Square, and the same square whatever the photograph is — the wall reads
   as one grid. Each file is still the wider 3:2 crop underneath, so a click
   does not just scale the tile up: it gives back the part of the frame the
   square was holding out of view. */
.shot__frame{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:1; border-radius:7px; background:var(--paper-3);
}
.shot__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:hover){
  .shot__frame img{ transition:transform .9s var(--e-soft), filter var(--d2) var(--e-soft); }
  .shot__hit:hover .shot__frame img{ transform:scale(1.04); filter:brightness(1.05); }
}

/* its reveal: the card rises while the picture settles out of a slow zoom,
   the way a print comes up in the tray */
[data-rv="shot"]{
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity var(--d2) var(--e-out) var(--dl),
             transform var(--d3) var(--e-out) var(--dl);
}
[data-rv="shot"] .shot__frame img{
  transform:scale(1.1);
  transition:transform 1.5s var(--e-out) var(--dl);
}
.rv-in[data-rv="shot"]{ opacity:1; transform:none; }
.rv-in[data-rv="shot"] .shot__frame img{ transform:none; }

/* the production city */
.city__lead{
  color:var(--ink-2); max-width:62ch;
  margin-block:clamp(1.5rem,3vw,2.25rem) clamp(2.5rem,5vw,3.5rem);
}
.city__set .srv__name{ color:var(--accent); font-variant-numeric:tabular-nums; }

/* the work section runs two groups, each with its own row and controls */
.wgroup + .wgroup{ margin-block-start:clamp(4rem,9vw,7rem); }
.wgroup__head{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem 1.25rem;
  margin-block-end:clamp(1.5rem,3vw,2.25rem);
  padding-block-end:.9rem; border-block-end:1px solid var(--rule);
}
.wgroup__h{
  font-size:clamp(1.25rem,.95rem + 1.1vw,1.85rem); font-weight:300; letter-spacing:-.015em;
}
.wgroup__k{ font-size:.82rem; color:var(--ink-3); }
:root[lang="en"] .wgroup__k{ letter-spacing:.12em; text-transform:uppercase; }

/* ─── 7c. Page hero (the two inner pages) ───────────────────────── */
/* Shorter than the home hero — it names the page and gets out of the
   way, because the substance starts one screen down, not three. */
/* Same shape as the home hero: the reel at full width, shown whole, and
   the line about the page underneath it. These two reels carry their own
   titles burned into the frame — AWAN DUBBING, مدينة الإنتاج الفني — so the
   page does not repeat them over the top; the heading stays in the markup
   for the document and for a screen reader, and the reel speaks for it. */
.phero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding-block:0 clamp(2.5rem,6vh,4rem);
}
.phero__media{
  position:relative; z-index:0; width:100%; aspect-ratio:16/9;
  overflow:hidden; background:var(--paper-2);
}
.phero__media{ height:100svh; aspect-ratio:auto; }
.phero__video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--paper-2); }
.phero__media.is-empty{ background:linear-gradient(140deg,var(--paper-2),var(--paper-3)); }
.phero__media.is-empty .phero__video{ display:none; }
.phero__veil{ position:absolute; inset:0; pointer-events:none; }
.phero__veil::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,var(--paper),transparent 9%),
    linear-gradient(to bottom,transparent 86%,var(--paper) 100%);
}
.phero__in{
  position:relative; z-index:2; text-align:center;
  padding-block-start:clamp(2.25rem,5vh,3.5rem);
}
.phero__in::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block:-26% -30%; inset-inline:0; margin-inline:auto;
  width:min(94vw,900px);
  background:radial-gradient(ellipse 62% 56% at 50% 50%,var(--glow),transparent 72%);
}
.phero__in .eyebrow{ justify-content:center; }
/* kept for the document outline and for assistive tech, off the screen */
.phero__title{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.phero__lead{ max-width:54ch; margin-inline:auto; color:var(--ink-2);
              font-size:clamp(1.05rem,1rem + .4vw,1.3rem); }

/* ─── 7d. The two doors on the home page ────────────────────────── */
.gate__grid{
  display:grid; gap:clamp(1.25rem,2.6vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .gate__grid{ grid-template-columns:repeat(2,1fr); } }

.gate__card{
  position:relative; display:flex; flex-direction:column;
  gap:.55rem; padding:clamp(1.6rem,3.4vw,2.6rem);
  border:1px solid var(--rule); border-radius:10px;
  background:var(--paper-2);
  transition:border-color var(--d2) var(--e-soft), background var(--d2) var(--e-soft),
             transform var(--d2) var(--e-out);
}
.gate__k{ font-size:.8rem; color:var(--ink-3); }
:root[lang="en"] .gate__k{ letter-spacing:.14em; text-transform:uppercase; }
.gate__h{
  font-size:clamp(1.6rem,1.1rem + 1.9vw,2.5rem); font-weight:300;
  letter-spacing:-.02em; line-height:1.35;
}
.gate__t{ color:var(--ink-2); font-size:.96rem; max-width:40ch; }
.gate__go{
  margin-block-start:clamp(1rem,2vw,1.5rem);
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--rule); display:grid; place-items:center;
  transition:background var(--d1) var(--e-soft), border-color var(--d1) var(--e-soft),
             color var(--d1) var(--e-soft);
}
.gate__go svg{ width:19px; height:19px; fill:none; stroke:currentColor;
               stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
:root[dir="rtl"] .gate__go svg{ transform:scaleX(-1); }
@media (hover:hover){
  .gate__card:hover{ border-color:var(--accent); background:var(--paper); transform:translateY(-4px); }
  .gate__card:hover .gate__go{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
}

/* ─── 7e. The brand marks and their channels ────────────────────── */
/* Three logos on one row, Awan in the middle. Two of the three marks are
   drawn in a single flat colour, so they are inked to match the page and
   every one of them sits on the same light plate — that way the brand
   colours that do matter (the bird, the pink script) stay true in both
   themes instead of being recoloured twice. */
.brands__grid{
  display:grid; gap:clamp(2.75rem,7vw,5.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:760px){ .brands__grid{ grid-template-columns:repeat(3,1fr); } }

.bcard{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.bcard__plate{
  /* a definite height, not an aspect ratio: the marks are 349×131, 601×685
     and 760×767, and against an aspect-ratio box the images' max-height:100%
     has no height to measure against, so each plate grew to its own mark */
  width:100%; height:clamp(190px,22vw,280px); border-radius:10px;
  background:#f7f4ef; border:1px solid var(--rule);
  padding:clamp(1.5rem,3.2vw,2.5rem);
}
/* the image fills the plate's box and is fitted inside it, rather than being
   centred at its own size: a percentage max-height on a centred grid item
   has no definite row to measure against, and the taller marks spilled out */
.bcard__plate img{ width:100%; height:100%; object-fit:contain; }
/* every plate is the same box so the three names and their buttons line up
   across the row — the marks inside it are different shapes, and each one is
   fitted whole rather than cropped to match its neighbours */

.bcard__h{
  font-size:clamp(1.1rem,1.4vw,1.3rem); font-weight:400;
  margin-block-start:1.1rem;
}
.bcard__k{ font-size:.84rem; color:var(--ink-3); margin-block-start:.15rem; }

/* «للتواصل» — a mark first, its handles only when asked for, so the row
   reads as three logos and not as three lists. */
.bcard__more{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-block-start:1.25rem; padding:.55rem 1.3rem;
  border:1px solid var(--rule); border-radius:999px;
  font-size:.88rem; color:var(--ink-2);
  transition:background var(--d1) var(--e-soft), color var(--d1) var(--e-soft),
             border-color var(--d1) var(--e-soft);
}
.bcard__more svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--d2) var(--e-both);
}
.bcard__more[aria-expanded="true"]{ color:var(--ink); border-color:var(--accent); }
.bcard__more[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (hover:hover){
  .bcard__more:hover{ background:var(--paper-2); color:var(--ink); border-color:var(--ink); }
}

/* the panel is unfolded by height — five rows at most, so a ceiling in rem
   is enough and nothing has to be measured in script */
.bcard__panel{
  width:100%; overflow:hidden; max-height:0; opacity:0;
  transition:max-height var(--d3) var(--e-both), opacity var(--d2) var(--e-soft);
}
.bcard__panel.is-open{ max-height:26rem; opacity:1; }

.bcard__links{
  display:flex; flex-direction:column; align-items:stretch; gap:.15rem;
  margin-block-start:1rem; width:100%;
}
.bcard__links a{
  display:flex; align-items:center; gap:.65rem;
  padding:.5rem .75rem; border-radius:7px;
  font-size:.88rem; color:var(--ink-2);
  transition:background var(--d1) var(--e-soft), color var(--d1) var(--e-soft);
}
.bcard__links svg{
  flex:0 0 auto; width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.bcard__links .ic--fill{ fill:currentColor; stroke:none; }
.bcard__links span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (hover:hover){
  .bcard__links a:hover{ background:var(--paper-2); color:var(--accent); }
}

/* ─── 7f. The three briefs on the home page ─────────────────────── */
/* One column per name — the group, the city, the digital arm. The rule
   above each one is the section's reveal: it draws out from the reading
   edge as the column arrives (see [data-rv="row"]). */
.brief__grid{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:980px){ .brief__grid{ grid-template-columns:repeat(3,1fr); } }

.brief__i{ position:relative; padding-block-start:1.4rem; }
.brief__i::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  height:1px; background:var(--accent);
}
.brief__k{ font-size:.76rem; color:var(--ink-3); }
:root[lang="en"] .brief__k{ letter-spacing:.18em; text-transform:uppercase; }
.brief__h{
  font-size:clamp(1.35rem,1rem + 1.1vw,1.9rem); font-weight:300;
  letter-spacing:-.02em; margin-block:.45rem .85rem;
}
.brief__t{ color:var(--ink-2); font-size:.97rem; }

.brief__go{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-block-start:1.2rem; font-size:.9rem; color:var(--ink);
  padding-block-end:.35rem; border-block-end:1px solid var(--rule);
  transition:color .4s var(--e-soft), border-color .4s var(--e-soft);
}
.brief__go svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--d2) var(--e-out);
}
/* the arrow points the way the language reads, and nudges that way on hover */
:root[dir="rtl"] .brief__go svg{ transform:scaleX(-1); }
.brief__go:hover{ color:var(--accent); border-color:var(--accent); }
.brief__go:hover svg{ transform:translateX(5px); }
:root[dir="rtl"] .brief__go:hover svg{ transform:scaleX(-1) translateX(5px); }

/* ─── 7g. The film — the one video meant to be watched ──────────── */
/* Everything else that moves on this site is wallpaper: muted, looping,
   behind a veil. This one has sound and a beginning, so it is a player —
   it waits for a press, and a missing file leaves a note, not a dead
   rectangle with a play button that does nothing. */
.film__fig{ margin:0; }
.film__frame{
  position:relative; overflow:hidden; border-radius:10px;
  aspect-ratio:16/9; background:var(--paper-3);
  will-change:clip-path;
}
.film__video{ width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.film__cap{
  margin-block-start:1.1rem; font-size:.88rem; color:var(--ink-3); max-width:52ch;
}
.film__fig.is-empty .film__video{ display:none; }
.film__fig.is-empty .film__frame{ background:linear-gradient(135deg,var(--paper-2),var(--paper-3)); }
.film__fig.is-empty .film__frame::after{
  content:attr(data-glyph); position:absolute; inset:0;
  display:grid; place-items:center; padding:2rem; text-align:center;
  font-size:clamp(1rem,1.6vw,1.3rem); font-weight:300; color:var(--ink-3);
}

/* its reveal: the frame opens from the middle outward, the way a curtain
   parts — the section's one distinct entrance */
[data-rv="film"] .film__frame{
  clip-path:inset(0 50% 0 50%);
  transition:clip-path 1.15s var(--e-out) var(--dl);
}
[data-rv="film"] .film__cap{
  opacity:0; transform:translate3d(0,12px,0);
  transition:opacity var(--d2) var(--e-out) calc(var(--dl) + 420ms),
             transform var(--d2) var(--e-out) calc(var(--dl) + 420ms);
}
.rv-in[data-rv="film"] .film__frame{ clip-path:inset(0 0 0 0); }
.rv-in[data-rv="film"] .film__cap{ opacity:1; transform:none; }

/* ─── 8. Contact + footer ───────────────────────────────────────── */
.contact{
  background:var(--deep); color:var(--on-deep);
  --paper:var(--on-deep);                    /* so anything paper-tinted flips */
  --accent:var(--accent-deep);               /* the accent, tuned for this surface */
  --ink-2:var(--on-deep-2);
  --ink-3:var(--on-deep-3);
  --rule:var(--deep-rule);
  margin-block-start:clamp(3rem,8vw,6rem);
  padding-block-end:0;
}
.contact .label,.contact__note{ color:var(--ink-3); }
.contact__head{
  font-size:clamp(2.6rem,1.2rem + 7vw,6.4rem);
  line-height:1.22; font-weight:200; letter-spacing:-.035em;
  margin-block-end:clamp(1.5rem,3vw,2rem);
}
.contact__head .line:last-child .line__in{ color:var(--accent); }
.contact__note{ max-width:44ch; margin-block-end:clamp(2.5rem,5vw,3.5rem); }
.mail{
  position:relative; display:inline-block;
  font-size:clamp(1.15rem,.9rem + 1.6vw,2.1rem); font-weight:300;
  padding-block-end:.3em; letter-spacing:-.01em;
  transition:color var(--d1) var(--e-soft);
}
.mail::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0; height:1px;
  background:var(--accent); transform-origin:var(--origin);
}
.mail:hover{ color:var(--accent); }

.social{
  display:flex; flex-wrap:wrap; gap:.55rem 1.6rem;
  margin-block-start:clamp(2.25rem,4.5vw,3.25rem);
  font-size:.92rem; letter-spacing:.02em;
}
.social a{
  position:relative; color:var(--ink-2); padding-block-end:.25em;
  transition:color var(--d1) var(--e-soft);
}
.social a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:var(--origin);
  transition:transform var(--d2) var(--e-out);
}
.social a:hover{ color:var(--paper); }
.social a:hover::after{ transform:scaleX(1); }

.foot{ margin-block-start:clamp(5rem,12vw,9rem); border-block-start:1px solid var(--rule); }
.foot__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:1.6rem; font-size:.82rem; color:var(--ink-3);
}
.foot__logo{ height:30px; width:auto; object-fit:contain; opacity:.75; margin-inline-end:auto; }
.foot__top{ transition:color var(--d1) var(--e-soft); }
.foot__top:hover{ color:var(--paper); }


/* the offices, under the mail link — on the deep surface */
.reach{
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
  display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .reach{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .reach{ grid-template-columns:repeat(4,1fr); } }
.reach li{ display:flex; flex-direction:column; gap:.3rem; }
.reach__k{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-deep-3); }
.reach a{ font-size:1rem; color:var(--on-deep); }
.reach a:hover{ color:var(--accent); }
.reach__v{ font-size:.84rem; line-height:1.65; color:var(--on-deep-3); }

/* ─── 9. Lightbox ───────────────────────────────────────────────── */
.lb{
  border:0; padding:0; max-width:min(1100px,92vw); max-height:92vh;
  background:transparent; color:var(--paper); overflow:visible;
}
.lb::backdrop{ background:rgba(12,11,8,.9); backdrop-filter:blur(6px); }
.lb[open]{ animation:lbIn var(--d2) var(--e-out) both; }
@keyframes lbIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.lb__fig{ margin:0; }
.lb__fig img{ width:100%; height:auto; max-height:78vh; object-fit:contain; border-radius:6px; }
.lb__fig figcaption{ padding-block-start:1rem; font-size:.95rem; color:rgba(244,241,236,.75); }
.lb__x{
  position:absolute; inset-block-start:-46px; inset-inline-end:0;
  width:36px; height:36px; font-size:1.6rem; line-height:1; color:var(--paper);
  transition:transform var(--d1) var(--e-out), color var(--d1) var(--e-soft);
}
.lb__x:hover{ transform:rotate(90deg); color:var(--accent); }
.lb__nav{
  position:absolute; inset-block-start:calc(50% - 1.4rem); transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:var(--paper); background:rgba(12,11,8,.45); border:1px solid rgba(244,241,236,.22);
  transition:background var(--d1) var(--e-soft), color var(--d1) var(--e-soft), transform var(--d1) var(--e-out);
  z-index:2; cursor:pointer;
}
.lb__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lb__nav:hover{ background:rgba(12,11,8,.7); color:var(--accent); }
.lb__nav:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.lb__nav[hidden]{ display:none; }
/* physical sides: "previous" on the right, "next" on the left (Arabic reading order) */
.lb__nav--prev{ right:14px; }
.lb__nav--next{ left:14px; }
html[lang="en"] .lb__nav--prev{ right:auto; left:14px; }
html[lang="en"] .lb__nav--next{ left:auto; right:14px; }
html[lang="en"] .lb__nav svg{ transform:scaleX(-1); }
.lb__count{ display:block; margin-block-start:.35rem; font-size:.8rem; letter-spacing:.06em; color:rgba(244,241,236,.55); direction:ltr; unicode-bidi:isolate; }
@media (max-width:640px){
  .lb{ padding-block-end:64px; }
  .lb__nav{ width:44px; height:44px; inset-block-start:auto; inset-block-end:4px; transform:none; }
  .lb__nav--prev{ right:calc(50% - 56px); }
  .lb__nav--next{ left:calc(50% - 56px); }
  html[lang="en"] .lb__nav--prev{ right:auto; left:calc(50% - 56px); }
  html[lang="en"] .lb__nav--next{ left:auto; right:calc(50% - 56px); }
}

/* ─── 10. Smooth scroll shell ───────────────────────────────────── */
#scroller{ display:flow-root; }
.has-smooth #scroller{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  width:100%; will-change:transform;
}
body.no-scroll{ overflow:hidden; }

/* ─── 11. Responsive ────────────────────────────────────────────── */
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .stats{ gap:1.5rem; }
  .cue{ display:none; }
}
/* Short laptop viewports: the real logo is a lockup, not a small mark, so
   the hero needs to give some height back or the buttons fall below the fold. */
@media (min-width:861px) and (max-height:860px){
  .hero{ padding-block:clamp(5.5rem,11vh,7.5rem) clamp(2.5rem,6vh,4rem); }
  .hero__title{ font-size:clamp(2rem,.8rem + 3.6vw,3.6rem); }
  .hero__cta{ margin-block-start:clamp(1.3rem,2.6vw,1.9rem); }
}

/* shorter still — give up the scroll cue rather than the buttons */
@media (min-width:861px) and (max-height:720px){
  .hero__title{ font-size:clamp(1.8rem,.7rem + 3.1vw,3.1rem); }
  .hero__sub{ font-size:1rem; }
  .hero__cta{ margin-block-start:1.15rem; }
  .cue{ display:none; }
}

@media (max-width:520px){
  .foot__logo{ margin-inline-end:0; }
  .hero__title{ letter-spacing:-.025em; }
  .btn{ flex:1 1 100%; }
  .foot__in{ flex-direction:column; align-items:flex-start; }
}

/* ─── 12. Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-rv]::before,[data-rv]::after{ transform:scaleX(1) !important; }
  [data-rv="img"] .rcard__frame{ clip-path:none !important; }
  [data-rv="film"] .film__frame{ clip-path:none !important; }
  [data-rv="shot"] .shot__frame img{ transform:none !important; }
  .rcard__frame img{ transform:none !important; }

  .rcard__eq{ opacity:1; transform:none; }
}

/* ─── Browse Bostah: the live site in a window frame ─────────────── */
.peek__win{
  margin-block-start:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  background:var(--paper-2);
}
.peek__bar{
  display:flex; align-items:center; gap:.9rem; padding:.7rem 1rem;
  border-block-end:1px solid var(--rule); background:var(--paper-3);
}
.peek__dots{ display:flex; gap:6px; }
.peek__dots i{ width:10px; height:10px; border-radius:50%; background:var(--rule); }
.peek__addr{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.85rem; color:var(--ink-2); background:var(--paper); border-radius:999px;
  padding:.3rem .9rem; text-align:center;
}
.peek__out{ font-size:.85rem; color:var(--accent); white-space:nowrap; }
.peek__out:hover{ text-decoration:underline; }
.peek__view{ position:relative; height:clamp(560px,88vh,1100px); background:#fff; }
.peek__win:fullscreen{ border-radius:0; display:flex; flex-direction:column; }
.peek__win:fullscreen .peek__view{ flex:1; height:auto; }
.peek__full{ background:none; border:0; padding:0; cursor:pointer; font:inherit; }
.peek__frame{ display:block; width:100%; height:100%; border:0; background:#fff; }
.peek__fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; padding:2rem; text-align:center; background:var(--paper-2); color:var(--ink-2);
}
.peek__fallback[hidden]{ display:none; }
.peek__fallback img{ width:96px; height:auto; }
@media (max-width:640px){
  .peek__out:not(.peek__full){ display:none; }
  .peek__view{ height:72vh; }
}
[data-theme="night"] .peek__fallback img{ filter:invert(1); }

/* the second bird colour: the stat numbers and the eyebrow dots */
.stats .num{ color:var(--accent-2); }
.dot{ background:var(--accent-2); }
[data-theme="night"] .brief__k, [data-theme="night"] .bcard__k{ color:var(--accent); }