/* ═══════════════════════════════════════════════════════════════════════════
   BARK.SA — design system
   A production house, not a product page. Ink black ground, work at full
   bleed, and red used like a director's mark: rarely, and only where it means
   something. Type does the talking — Playfair for voice, Source Serif for
   reading, a mono for anything technical.
   Every rule uses logical properties so Arabic mirrors without a rewrite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens — per BARK_SA_Premium_Site_Brief.md §2 ────────────────────────── */
:root{
  color-scheme: dark;

  /* colour — three, exact, red never more than ~20% of a screen */
  --ink:        #0B0B0B;
  --ink-raise:  #111111;
  --ink-sunk:   #070707;
  --white:      #FFFFFF;
  --red:        #C8102E;
  --red-lift:   #E11B37;

  /* a warm neutral for muted text — never pure grey */
  --fg:         #F5F2EE;
  --fg-2:       #A8A29B;
  --fg-3:       #6E6862;
  --rule:       rgba(245,242,238,.12);
  --rule-2:     rgba(245,242,238,.26);

  /* type — one display face, one serif body face, nothing else */
  --display:    "Playfair Display", Georgia, "Times New Roman", serif;
  --body:       Georgia, "Times New Roman", serif;
  --display-ar: "Amiri", "Times New Roman", serif;
  --body-ar:    "Tajawal", system-ui, sans-serif;

  /* scale — 1.25 ratio: 16 / 20 / 25 / 31 / 39 / 49 / 61 */
  --t-xs:   0.80rem;   /* 12.8 */
  --t-base: 1.00rem;   /* 16   */
  --t-md:   1.25rem;   /* 20   */
  --t-lg:   1.5625rem; /* 25   */
  --t-xl:   1.9375rem; /* 31   */
  --t-2xl:  2.4375rem; /* 39   */
  --t-3xl:  3.0625rem; /* 49   */
  --t-4xl:  3.8125rem; /* 61   */
  /* the hero alone may exceed the scale, per the brief */
  --t-hero: clamp(2.4375rem, 1.6rem + 4.2vw, 5.75rem);

  /* space — 8-based: 8 / 16 / 24 / 40 / 64 / 96 */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;

  --page:  1280px;
  --read:  68ch;
  --gut:   clamp(20px, 5vw, 64px);
  --bar:   72px;

  --ease:  cubic-bezier(.16,.84,.28,1);
  --fast:  .18s var(--ease);   /* hover: 150-200ms */
  --med:   .38s var(--ease);
  --slow:  .8s var(--ease);
}

/* ── reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--body); font-size:var(--t-base); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg,picture{ display:block; max-width:100%; }
img,video{ height:auto; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--red-lift); outline-offset:3px; }
::selection{ background:var(--red); color:var(--white); }

/* ── layout ──────────────────────────────────────────────────────────────── */
.wrap{ max-width:var(--page); margin-inline:auto; padding-inline:var(--gut); }
.wrap-read{ max-width:var(--read); }
section{ padding-block:var(--s6); }
@media (max-width:760px){ section{ padding-block:56px; } }
.bleed{ width:100%; }

/* ── type ────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:500; line-height:1.04; letter-spacing:-.022em; }
h1{ font-size:var(--t-hero); }
h2{ font-size:var(--t-3xl); }
h3{ font-size:var(--t-xl); line-height:1.16; }
h4{ font-size:var(--t-lg); line-height:1.2; }
.display-xl{ font-size:var(--t-4xl); }
em,.it{ font-style:italic; }
.lede{ font-size:var(--t-md); color:var(--fg-2); line-height:1.5; max-width:44ch; }
.body-2{ color:var(--fg-2); }

/* the technical voice: labels, counters, metadata */
.mono{
  font-family:var(--body); font-size:var(--t-xs); font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2);
}
.mono-red{ color:var(--red-lift); }

/* a section opener: rule, label, heading */
.sec-head{ display:grid; gap:var(--s4); margin-block-end:var(--s5); }
.sec-head .mono{ display:flex; align-items:center; gap:var(--s3); }
.sec-head .mono::before{ content:""; width:28px; height:1px; background:var(--red); flex:none; }
.sec-head h2{ max-width:20ch; }
.sec-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); flex-wrap:wrap; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--body); font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  padding:1.05em 1.9em; min-height:48px; border:1px solid var(--rule-2); color:var(--fg);
  transition:background var(--fast), color var(--fast), border-color var(--fast);
  white-space:nowrap;
}
.btn:hover{ background:var(--fg); color:var(--ink); border-color:var(--fg); }
.btn-red{ background:var(--red); border-color:var(--red); color:var(--white); }
.btn-red:hover{ background:var(--white); border-color:var(--white); color:var(--ink); }
.btn svg{ width:15px; height:15px; }
html[dir="rtl"] .btn .arw{ transform:scaleX(-1); }

/* a quiet link that underlines from the leading edge on hover */
.ulink{ position:relative; display:inline-block; padding-block-end:2px; }
.ulink::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:inline-start; transition:transform var(--med);
}
.ulink:hover::after{ transform:scaleX(1); }

/* ── header ──────────────────────────────────────────────────────────────── */
.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  height:var(--bar); display:flex; align-items:center;
  transition:background var(--med), border-color var(--med);
  border-block-end:1px solid transparent;
}
.hdr.stuck{
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border-block-end-color:var(--rule);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); width:100%; }
.brand{ display:flex; align-items:center; gap:.65rem; flex:none; }
.brand img{ width:34px; height:34px; border-radius:8px; }
.brand b{ font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
.nav{ display:flex; gap:var(--s4); }
.nav a{ font-family:var(--body); font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); transition:color var(--fast); }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--fg); }
.nav a[aria-current="page"]{ position:relative; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:-6px; height:1px; background:var(--red);
}
.hdr-end{ display:flex; align-items:center; gap:var(--s3); }
.burger{ display:none; width:44px; height:44px; place-items:center; }
.burger span{ display:block; width:20px; height:1px; background:var(--fg); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline:0; height:1px; background:var(--fg); }
.burger span::before{ inset-block-start:-6px; } .burger span::after{ inset-block-start:6px; }
@media (max-width:940px){
  .nav{ display:none; } .burger{ display:grid; } .hdr-end .btn{ display:none; }
}
/* full-screen mobile menu */
.menu{
  position:fixed; inset:0; z-index:79; display:none; background:var(--ink);
  padding:calc(var(--bar) + var(--s5)) var(--gut) var(--s5);
}
.menu.open{ display:block; }
.menu a{ display:block; font-family:var(--display); font-size:var(--t-xl); padding-block:var(--s3); border-block-end:1px solid var(--rule); }
.menu .mono{ margin-block-start:var(--s6); display:block; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding:0; }
@media (max-width:560px){ .hero{ min-height:auto; } }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }
/* two scrims: one for the masthead, one so the type always has a ground */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,7,7,.80) 0%, rgba(7,7,7,.34) 20%, rgba(7,7,7,.30) 40%, rgba(7,7,7,.70) 68%, rgba(7,7,7,.95) 100%),
    linear-gradient(90deg,  rgba(7,7,7,.66) 0%, rgba(7,7,7,.26) 48%, rgba(7,7,7,0) 82%);
}
/* the side scrim follows the text, so it flips with the writing direction */
html[dir="rtl"] .hero-media::after{
  background:
    linear-gradient(180deg, rgba(7,7,7,.80) 0%, rgba(7,7,7,.34) 20%, rgba(7,7,7,.30) 40%, rgba(7,7,7,.70) 68%, rgba(7,7,7,.95) 100%),
    linear-gradient(270deg, rgba(7,7,7,.66) 0%, rgba(7,7,7,.26) 48%, rgba(7,7,7,0) 82%);
}
  /* the masthead is fixed, so the hero must reserve its height — without this
     the eyebrow slides under the logo on short screens. */
.hero-in{ position:relative; z-index:1; width:100%;
          padding-block:calc(var(--bar) + var(--s3)) var(--s5); }
.hero h1{ max-width:16ch; }
/* over live footage the body tokens are too quiet — measured against the
   composited frame, not the token, they came in at 2.9:1. These clear 4.5. */
.hero .mono{ color:#DCD6CC; }
.hero .lede{ color:#E8E3DB; }
.hero .lede{ margin-block-start:var(--s5); }
.hero-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-block-start:var(--s6); }
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s5); flex-wrap:wrap;
  border-block-start:1px solid var(--rule-2); padding-block-start:var(--s4); margin-block-start:var(--s5);
}
/* a scroll cue that reads as a film marker */
.cue{ display:flex; align-items:center; gap:var(--s3); }
.cue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--red), transparent); }

/* ── work tiles ──────────────────────────────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.75rem,1.4vw,1.4rem);
       /* tiles keep their own height — stretching them pads short tiles
          with a dead block of --ink-raise under the caption. */
       align-items:start; }
.tile{ position:relative; display:block; overflow:hidden; background:var(--ink-raise); }
.tile-media{ position:relative; overflow:hidden; }
/* <picture> is inline by default, which breaks the height:100% chain and
   leaves a baseline gap under every tile. */
.tile picture,.hero-media picture{ display:block; width:100%; height:100%; }
.tile img,.tile video{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter var(--med); }
.tile:hover img,.tile:hover video{ transform:scale(1.04); }
/* the reveal: a red hairline draws in, the caption lifts */
.tile-cap{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding-block-start:var(--s3); border-block-start:1px solid var(--rule);
  transition:border-color var(--med);
}
.tile:hover .tile-cap{ border-block-start-color:var(--red); }
.tile-t{ font-family:var(--display); font-size:var(--t-md); }
.tile-m{ font-family:var(--body); font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-3); }
.tile-play{
  position:absolute; inset-block-end:var(--s4); inset-inline-start:var(--s4);
  display:inline-flex; align-items:center; gap:.5em; padding:.45em .8em;
  background:rgba(7,7,7,.6); backdrop-filter:blur(8px);
  font-family:var(--body); font-size:var(--t-xs); letter-spacing:.18em; color:var(--white);
}
.tile-play svg{ width:10px; height:10px; }
.ar-16x9 .tile-media{ aspect-ratio:16/9; }
.ar-4x5  .tile-media{ aspect-ratio:4/5; }
.ar-1x1  .tile-media{ aspect-ratio:1/1; }
.ar-3x2  .tile-media{ aspect-ratio:3/2; }
.ar-21x9 .tile-media{ aspect-ratio:21/9; }
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}
.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}
@media (max-width:900px){
  .c8,.c7,.c6,.c5{ grid-column:span 12; } .c4{ grid-column:span 6; }
}
@media (max-width:560px){ .c4{ grid-column:span 12; } }

/* ── filters ─────────────────────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-end:var(--s6); }
.filters button{
  font-family:var(--body); font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase;
  padding:.7em 1.1em; min-height:44px; border:1px solid var(--rule); color:var(--fg-3);
  transition:color var(--fast), border-color var(--fast), background var(--fast);
}
.filters button:hover{ color:var(--fg); border-color:var(--rule-2); }
.filters button[aria-pressed="true"]{ color:var(--white); border-color:var(--red); background:var(--red); }

/* ── services list ───────────────────────────────────────────────────────── */
.svc{ border-block-start:1px solid var(--rule-2); }
.svc-row{
  display:grid; grid-template-columns:5rem 1fr 1.1fr auto; gap:var(--s5); align-items:baseline;
  padding-block:var(--s5); border-block-end:1px solid var(--rule);
  transition:padding-inline var(--med), background var(--med);
}
.svc-row:hover{ padding-inline:var(--s3); background:var(--ink-raise); }
.svc-row h3{ font-size:var(--t-lg); }
.svc-row p{ color:var(--fg-2); font-size:var(--t-sm); max-width:46ch; }
.svc-row .arw{ color:var(--fg-3); transition:color var(--fast), transform var(--med); }
.svc-row:hover .arw{ color:var(--red-lift); transform:translateX(4px); }
html[dir="rtl"] .svc-row:hover .arw{ transform:translateX(-4px); }
@media (max-width:900px){
  .svc-row{ grid-template-columns:3rem 1fr; }
  .svc-row p{ grid-column:2; }
  .svc-row .arw{ display:none; }
}

/* ── figures / stats ─────────────────────────────────────────────────────── */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); border-block:1px solid var(--rule); padding-block:var(--s5); }
@media (max-width:760px){ .figs{ grid-template-columns:1fr 1fr; gap:var(--s5) var(--s5); } }
.fig b{ display:block; font-family:var(--display); font-weight:500; font-size:var(--t-2xl); line-height:1; letter-spacing:-.03em; direction:ltr; unicode-bidi:isolate; }
.fig span{ display:block; margin-block-start:var(--s3); color:var(--fg-2); font-size:var(--t-sm); max-width:24ch; }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.band{ background:var(--ink-raise); }
.band-in{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s5); align-items:center; }
@media (max-width:900px){ .band-in{ grid-template-columns:1fr; } }
.contact-lines div{ display:flex; justify-content:space-between; gap:var(--s4); align-items:baseline;
  border-block-start:1px solid var(--rule); padding-block:var(--s4); }
.contact-lines dd{ margin:0; font-family:var(--display); font-size:var(--t-md); direction:ltr; unicode-bidi:isolate; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.ftr{ background:var(--ink-sunk); padding-block:var(--s5) var(--s5); border-block-start:1px solid var(--rule); }
.ftr-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--s6); }
@media (max-width:860px){ .ftr-top{ grid-template-columns:1fr 1fr; } }
.ftr h4{ font-family:var(--body); font-size:var(--t-xs); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); font-weight:400; margin-block-end:var(--s4); }
.ftr li{ margin-block-end:var(--s3); }
.ftr a{ color:var(--fg-2); transition:color var(--fast); }
.ftr a:hover{ color:var(--fg); }
.ftr-end{ display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  margin-block-start:var(--s5); padding-block-start:var(--s4); border-block-start:1px solid var(--rule); }

/* ── placeholders — clearly marked, never mistaken for finished work ─────── */
.ph{
  position:relative; display:grid; place-items:center; width:100%; height:100%;
  background:
    repeating-linear-gradient(45deg, #141414 0 14px, #101010 14px 28px);
  border:1px dashed var(--rule-2); color:var(--fg-3); text-align:center; padding:var(--s5);
}
.ph b{ display:block; font-family:var(--body); font-size:var(--t-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--red-lift); margin-block-end:.6em; }
.ph code{ font-family:var(--body); font-size:var(--t-xs); color:var(--fg-2); word-break:break-all; }
.ph small{ display:block; margin-block-start:.6em; font-family:var(--body); font-size:10px; letter-spacing:.1em; color:var(--fg-3); }
/* in the hero the label must not fight the headline — park it in the corner */
.ph-hero{ place-items:end; border:0; }
.ph-hero > div{
  margin:0 var(--gut) var(--s3) auto; text-align:end; max-width:34ch;
  background:rgba(7,7,7,.55); padding:var(--s2) var(--s3); border:1px dashed var(--rule-2);
}
html[dir="rtl"] .ph-hero > div{ margin-inline:auto var(--gut); text-align:start; }
@media (max-width:900px){ .ph-hero > div{ display:none; } }

/* ── motion: reveal on entry, nothing louder ─────────────────────────────── */
.rv{ opacity:0; transform:translateY(18px); }
.rv.in{ opacity:1; transform:none; transition:opacity var(--slow), transform var(--slow); }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
@media (prefers-reduced-motion:reduce){
  .rv,.rv.in{ opacity:1!important; transform:none!important; transition:none!important; }
  .tile img,.tile video{ transition:none!important; }
  .hero-media{ transform:none!important; }
}

/* ── Arabic: the same system, mirrored and re-set ────────────────────────── */
html[lang="ar"] body{ font-family:var(--body-ar); line-height:1.9; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,
html[lang="ar"] .tile-t,html[lang="ar"] .fig b,html[lang="ar"] .contact-lines dd{
  font-family:var(--display-ar); letter-spacing:0; line-height:1.45; font-weight:700;
}
html[lang="ar"] .mono,html[lang="ar"] .btn,html[lang="ar"] .nav a,
html[lang="ar"] .tile-m,html[lang="ar"] .filters button{
  font-family:var(--body-ar); letter-spacing:0; text-transform:none; font-size:var(--t-sm);
}
html[lang="ar"] h1{ font-size:clamp(2.2rem,1.4rem+3.6vw,4.4rem); }
html[lang="ar"] h2{ font-size:clamp(1.8rem,1.2rem+2.4vw,3.1rem); }

/* ── 3D teaser — the module itself loads only on its own page ────────────── */
.teaser{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center; }
@media (max-width:900px){ .teaser{ grid-template-columns:1fr; } }
.teaser-media{ aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--ink-raise); }
.teaser-media .ph{ position:absolute; inset:0; }

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
.crumbs{ display:flex; gap:.6rem; align-items:center; }
.crumbs a{ color:var(--fg-2); }
.crumbs a:hover{ color:var(--fg); }
.crumbs span[aria-current]{ color:var(--fg-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   PART TWO — the service surfaces.
   Everything below exists because a service has to be SHOWN, not described:
   a campaign flow you can follow, figures you can read, a room you can turn.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --t-sm was used by .fig and the Arabic rules but never declared, so those
   rules were invalid and silently inherited. 14px sits between xs and base. */
:root{ --t-sm: .875rem; }

/* ── services sub-nav: sticky under the masthead, marks where you are ────── */
.svc-nav{
  position:sticky; inset-block-start:var(--bar); z-index:60;
  background:color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-block-end:1px solid var(--rule);
}
.svc-nav ul{ display:flex; overflow-x:auto; scrollbar-width:none; }
.svc-nav ul::-webkit-scrollbar{ display:none; }
.svc-nav a{
  display:block; white-space:nowrap; padding:var(--s3) var(--s4);
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-2); border-block-end:2px solid transparent;
  transition:color var(--fast), border-color var(--fast);
}
.svc-nav a:hover{ color:var(--fg); }
.svc-nav a.on{ color:var(--fg); border-block-end-color:var(--red); }

/* ── one service ─────────────────────────────────────────────────────────── */
.svc-sec{ border-block-start:1px solid var(--rule); scroll-margin-block-start:calc(var(--bar) * 2); }
.svc-sec:first-of-type{ border-block-start:0; }
.svc-top{ display:grid; grid-template-columns:5.5rem 1fr; gap:var(--s4); align-items:start; margin-block-end:var(--s5); }
@media (max-width:640px){ .svc-top{ grid-template-columns:1fr; gap:var(--s2); } }
.svc-no{ font-family:var(--display); font-size:var(--t-xl); line-height:1; color:var(--red-lift); font-variant-numeric:tabular-nums; }
.svc-top .lede{ max-width:52ch; margin-block-start:var(--s3); }
.svc-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center; }
@media (max-width:900px){ .svc-split{ grid-template-columns:1fr; gap:var(--s4); } }

/* ── the campaign flow — a real sequence, so the numbering carries meaning ─ */
.flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s3); }
@media (max-width:1040px){ .flow{ grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s3); } }
@media (max-width:560px){ .flow{ grid-template-columns:1fr; } }
.flow li{ position:relative; padding-block-start:var(--s3); border-block-start:2px solid var(--rule-2); }
/* the last step is the one the client actually receives */
.flow li:last-child{ border-block-start-color:var(--red); }
.flow .n{ display:block; font-size:var(--t-xs); letter-spacing:.2em; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.flow li:last-child .n{ color:var(--red-lift); }
.flow h4{ font-size:var(--t-md); margin-block:.55em .4em; }
.flow p{ color:var(--fg-2); font-size:var(--t-sm); line-height:1.6; }
/* a hairline chevron between steps, desktop only — it reads as "then" */
@media (min-width:1041px){
  .flow li:not(:last-child)::after{
    content:""; position:absolute; inset-block-start:-2px; inset-inline-end:calc(var(--s3) / -2 - 3px);
    width:6px; height:6px; border-block-start:2px solid var(--rule-2); border-inline-end:2px solid var(--rule-2);
    transform:translate(0,-2px) rotate(45deg);
  }
  html[dir="rtl"] .flow li:not(:last-child)::after{ transform:translate(0,-2px) rotate(225deg); }
}

/* ── figures panel ───────────────────────────────────────────────────────── */
/* Every number in here is illustrative. The banner says so, and it is not
   optional styling — it is the thing that keeps the panel honest. */
.example{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  border:1px dashed var(--rule-2); padding:var(--s2) var(--s3);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2);
}
.example b{ color:var(--red-lift); letter-spacing:.18em; }
.kpis{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin-block-start:var(--s3);
}
@media (max-width:1040px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .kpis{ grid-template-columns:1fr; } }
.kpi{ background:var(--ink-raise); padding:var(--s4) var(--s3); }
.kpi b{
  display:block; font-family:var(--display); font-weight:500;
  font-size:var(--t-2xl); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
}
.kpi .k{ display:block; margin-block-start:var(--s3); font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); }
.kpi .d{ display:block; margin-block-start:.45em; font-size:var(--t-xs); color:var(--fg-3); letter-spacing:0; text-transform:none; }

/* ── sparkline — one series, so no legend; the caption names it ──────────── */
.spark{ position:relative; margin-block-start:var(--s5); }
.spark-head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-block-end:var(--s3); }
.spark svg{ width:100%; height:auto; display:block; overflow:visible; }
.spark .gridline{ stroke:var(--rule); stroke-width:1; }
.spark .axis{ fill:var(--fg-3); font-family:var(--body); font-size:10px; letter-spacing:.1em; }
.spark .ln{ fill:none; stroke:var(--red); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.spark .fill{ fill:var(--red); opacity:.10; }
.spark .end{ fill:var(--red-lift); stroke:var(--ink); stroke-width:2; }
.spark .endlabel{ fill:var(--fg); font-family:var(--display); font-size:15px; font-variant-numeric:tabular-nums; }
.spark .hit{ fill:transparent; }
.spark .cross{ stroke:var(--rule-2); stroke-width:1; visibility:hidden; }
.spark .dot{ fill:var(--fg); stroke:var(--ink); stroke-width:2; visibility:hidden; }
.spark-tip{
  position:absolute; z-index:3; pointer-events:none; opacity:0; transition:opacity var(--fast);
  transform:translate(-50%,-130%); background:var(--ink-sunk); border:1px solid var(--rule-2);
  padding:.5em .75em; white-space:nowrap; font-size:var(--t-xs); letter-spacing:.06em;
}
.spark-tip b{ font-family:var(--display); font-size:var(--t-base); display:block; font-variant-numeric:tabular-nums; }
.spark.live .cross,.spark.live .dot{ visibility:visible; }
.spark.live .spark-tip{ opacity:1; }
/* the numbers must also be readable as numbers, not only as a shape */
.data-table{ margin-block-start:var(--s3); }
.data-table summary{ cursor:pointer; font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); padding-block:var(--s2); }
.data-table summary:hover{ color:var(--fg); }
.data-table table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); font-variant-numeric:tabular-nums; }
.data-table th,.data-table td{ text-align:start; padding:.55em .8em; border-block-end:1px solid var(--rule); }
.data-table th{ color:var(--fg-2); font-weight:400; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; }
.data-table td:last-child{ text-align:end; }

/* ── before → after ──────────────────────────────────────────────────────── */
.ba{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--ink-raise); touch-action:pan-y; }
.ba .lay{ position:absolute; inset:0; }
.ba .lay img,.ba .lay .ph{ width:100%; height:100%; object-fit:cover; }
/* the finished render is revealed from the leading edge as the handle moves */
.ba .lay-after{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba-tag{
  position:absolute; inset-block-end:var(--s3); z-index:2;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase;
  background:rgba(7,7,7,.66); backdrop-filter:blur(6px); padding:.5em .9em; color:var(--fg);
}
.ba-tag.a{ inset-inline-start:var(--s3); } .ba-tag.b{ inset-inline-end:var(--s3); }
.ba-line{ position:absolute; inset-block:0; inset-inline-start:var(--pos,50%); width:2px; background:var(--white); z-index:3; pointer-events:none; }
.ba-grip{
  position:absolute; inset-block-start:50%; inset-inline-start:var(--pos,50%); z-index:4;
  width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  background:var(--white); color:var(--ink); display:grid; place-items:center; pointer-events:none;
}
.ba-grip svg{ width:20px; height:20px; }
/* a real range input does the dragging — free keyboard access and touch */
.ba-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0; -webkit-appearance:none; appearance:none; background:none;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:48px; height:100%; }
.ba-range::-moz-range-thumb{ width:48px; height:100vh; border:0; opacity:0; }

/* ── turntable: a sprite sheet scrubbed by drag, no WebGL, no model load ─── */
.tt{ position:relative; aspect-ratio:1/1; background:var(--ink-sunk); overflow:hidden; cursor:grab; touch-action:pan-y; }
.tt.drag{ cursor:grabbing; }
.tt-frames{
  position:absolute; inset:0; background-repeat:no-repeat;
  background-size:calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-position:0% 0%;
}
.tt-hint{
  position:absolute; inset-block-end:var(--s3); inset-inline:0; z-index:2; text-align:center;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2);
  transition:opacity var(--med); pointer-events:none;
}
.tt.touched .tt-hint{ opacity:0; }
.tt-dial{
  position:absolute; inset-block-end:0; inset-inline:0; height:2px; background:var(--rule); z-index:2;
}
.tt-dial i{ display:block; height:100%; width:4%; background:var(--red); transition:transform .05s linear; }

/* ── showreel ────────────────────────────────────────────────────────────── */
.reel{ position:relative; aspect-ratio:16/9; background:var(--ink-raise); overflow:hidden; }
.reel video,.reel img,.reel .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel-btn{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; width:100%; }
.reel-btn i{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--rule-2); background:rgba(7,7,7,.5); backdrop-filter:blur(8px);
  transition:background var(--fast), border-color var(--fast), transform var(--fast);
}
.reel-btn:hover i{ background:var(--red); border-color:var(--red); transform:scale(1.06); }
.reel-btn svg{ width:22px; height:22px; margin-inline-start:4px; }
html[dir="rtl"] .reel-btn svg{ transform:scaleX(-1); margin-inline-start:0; margin-inline-end:4px; }
.reel.playing .reel-btn{ opacity:0; pointer-events:none; }
.reel-meta{
  position:absolute; z-index:2; inset-block-end:var(--s3); inset-inline-start:var(--s3);
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2);
}

/* ── web development: project frames ─────────────────────────────────────── */
.frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:980px){ .frames{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .frames{ grid-template-columns:1fr; } }
.frame{ border:1px solid var(--rule); background:var(--ink-raise); }
.frame-bar{ display:flex; align-items:center; gap:6px; padding:.7rem var(--s2); border-block-end:1px solid var(--rule); }
.frame-bar i{ width:8px; height:8px; border-radius:50%; background:var(--rule-2); flex:none; }
.frame-bar span{ margin-inline-start:var(--s2); font-size:10px; letter-spacing:.12em; color:var(--fg-3); direction:ltr; unicode-bidi:isolate; }
.frame-body{ position:relative; aspect-ratio:16/11; }
.frame-cap{ padding:var(--s3); border-block-start:1px solid var(--rule); }
.frame-cap b{ font-family:var(--display); font-size:var(--t-md); display:block; }
.frame-cap span{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }

/* ── event categories ────────────────────────────────────────────────────── */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:980px){ .cats{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cats{ grid-template-columns:1fr; } }
.cat{ display:block; }
.cat-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ink-raise); }
.cat-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.cat:hover .cat-media img{ transform:scale(1.04); }
.cat-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  padding-block-start:var(--s3); border-block-start:1px solid var(--rule); transition:border-color var(--med); }
.cat:hover .cat-cap{ border-block-start-color:var(--red); }
.cat-cap b{ font-family:var(--display); font-size:var(--t-md); font-weight:500; }
.cat-cap span{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }

/* ── a plain numbered list used by About / process ───────────────────────── */
.rows > li{ display:grid; grid-template-columns:4rem 1fr 1.1fr; gap:var(--s4);
  padding-block:var(--s4); border-block-start:1px solid var(--rule); align-items:baseline; }
@media (max-width:820px){ .rows > li{ grid-template-columns:2.5rem 1fr; } .rows > li p{ grid-column:2; } }
.rows .n{ font-size:var(--t-xs); letter-spacing:.2em; color:var(--red-lift); font-variant-numeric:tabular-nums; }
.rows h3{ font-size:var(--t-lg); }
.rows p{ color:var(--fg-2); font-size:var(--t-sm); line-height:1.65; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq details{ border-block-start:1px solid var(--rule); }
.faq details:last-of-type{ border-block-end:1px solid var(--rule); }
.faq summary{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  padding-block:var(--s4); cursor:pointer; list-style:none; font-family:var(--display); font-size:var(--t-md); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--red-lift); font-size:var(--t-lg); line-height:1; flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq .a{ color:var(--fg-2); font-size:var(--t-sm); line-height:1.7; padding-block-end:var(--s4); max-width:68ch; }

/* ── contact form ────────────────────────────────────────────────────────── */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }
.f-wide{ grid-column:1/-1; }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field label{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:var(--t-base); color:var(--fg);
  background:var(--ink-raise); border:1px solid var(--rule-2); padding:.85em 1em; width:100%;
  transition:border-color var(--fast);
}
.field textarea{ resize:vertical; min-height:7em; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--red); outline:none; }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); }
.picks{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pick input{ position:absolute; opacity:0; width:0; height:0; }
.pick span{ display:inline-block; font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--rule-2); padding:.7em 1.1em; color:var(--fg-2); cursor:pointer; transition:all var(--fast); }
.pick input:checked + span{ border-color:var(--red); color:var(--fg); background:rgba(200,16,46,.14); }
.pick input:focus-visible + span{ outline:2px solid var(--red-lift); outline-offset:3px; }
.form-note{ font-size:var(--t-xs); color:var(--fg-3); letter-spacing:.08em; }

/* ── two-column prose (About) ────────────────────────────────────────────── */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
@media (max-width:820px){ .cols2{ grid-template-columns:1fr; gap:var(--s4); } }
.prose p + p{ margin-block-start:var(--s3); }
.prose{ color:var(--fg-2); line-height:1.75; }
.prose strong{ color:var(--fg); font-weight:400; }

/* ── language switch ─────────────────────────────────────────────────────── */
.lang{ font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); }
.lang:hover{ color:var(--fg); }
html[lang="ar"] .lang{ font-family:var(--body); letter-spacing:.2em; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART THREE — the pieces the service pages needed that PART TWO did not have.
   ═══════════════════════════════════════════════════════════════════════════ */

/* a three-beat story: what happens when you book this. The five-column .flow
   is the campaign sequence; this is the shorter "how it goes" for the rest.
   Declared after .flow's own media queries, so it needs its own. */
.flow-3{ grid-template-columns:repeat(3,1fr); }
.flow-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1040px){ .flow-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .flow-3{ grid-template-columns:1fr; } }
@media (max-width:560px){ .flow-4{ grid-template-columns:1fr; } }

/* the heading over a demonstration — names what you are looking at */
.show-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s3); flex-wrap:wrap; margin-block-end:var(--s3);
}
.show-head h3{ font-family:var(--body); font-weight:400; font-size:var(--t-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); }
.show-head .hint{ font-size:var(--t-xs); color:var(--fg-3); letter-spacing:.06em; }
.show{ margin-block-end:var(--s5); }

/* what you actually receive — plain, countable, no green ticks */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:var(--s4); }
.chips li{
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--rule); padding:.62em 1em; color:var(--fg-2);
}
html[lang="ar"] .chips li{ letter-spacing:0; text-transform:none; font-size:var(--t-sm); }

/* one invitation per service, on a rule so it closes the section */
.svc-cta{
  display:flex; align-items:center; gap:var(--s3) var(--s4); flex-wrap:wrap;
  margin-block-start:var(--s5); padding-block-start:var(--s4);
  border-block-start:1px solid var(--rule);
}
.svc-cta .note{ font-size:var(--t-sm); color:var(--fg-3); max-width:44ch; line-height:1.6; }

/* vertical ad creatives — 9:16, the shape they actually run in */
.verts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
@media (max-width:600px){ .verts{ grid-template-columns:1fr 1fr; } }
.vert{ position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--ink-raise); }
.vert .ph{ position:absolute; inset:0; }
.vert img{ width:100%; height:100%; object-fit:cover; }

/* a pair of demonstrations side by side (before/after + turntable) */
.demo2{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--s4); align-items:start; }
@media (max-width:980px){ .demo2{ grid-template-columns:1fr; } }

/* the figure caption under any demonstration */
.cap{ margin-block-start:var(--s3); font-size:var(--t-xs); color:var(--fg-3);
  letter-spacing:.06em; line-height:1.6; }
.cap b{ color:var(--fg-2); font-weight:400; }

/* page opener shared by every inner page */
.page-top{ padding-block:calc(var(--bar) + var(--s6)) var(--s5); }
.page-top h1{ max-width:14ch; }
.page-lede{ margin-block-start:var(--s6); border-block-start:1px solid var(--rule-2);
  padding-block-start:var(--s4); }

/* contact: the two halves of the page */
.split-form{ display:grid; grid-template-columns:1.25fr .75fr; gap:var(--s6); align-items:start; }
@media (max-width:900px){ .split-form{ grid-template-columns:1fr; gap:var(--s5); } }

/* a map/where block that does not pretend to be an embedded map */
.where-list div{ display:flex; justify-content:space-between; gap:var(--s3);
  align-items:baseline; border-block-start:1px solid var(--rule); padding-block:var(--s3); }
.where-list dt{ font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); }
.where-list dd{ margin:0; font-family:var(--display); font-size:var(--t-md); }
html[lang="ar"] .where-list dd{ font-family:var(--display-ar); }
.where-list dd[dir="ltr"]{ direction:ltr; unicode-bidi:isolate; }

/* ── before/after: the wipe is physical, not logical ─────────────────────── */
/* The clip-path that reveals the render is written in physical left/right, so
   the handle and the tags must be too — otherwise RTL puts the line on one
   side and the reveal on the other. The control itself is forced dir=ltr in
   the markup for the same reason: a mirrored range input inverts the drag. */
.ba-line,.ba-grip{ inset-inline-start:auto; left:var(--pos,50%); }
.ba-tag.a{ inset-inline-start:auto; left:var(--s3); }
.ba-tag.b{ inset-inline-end:auto; right:var(--s3); }
.ba:focus-within .ba-grip{ box-shadow:0 0 0 3px var(--red-lift); }

/* ── turntable: a real frame shows before the sprite sheet is fetched ────── */
.tt-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; transition:opacity var(--med);
}
.tt.ready .tt-poster{ opacity:0; }
.tt-frames{ z-index:1; }
.tt:focus-visible{ outline:2px solid var(--red-lift); outline-offset:3px; }

/* ── KPI count-up must not reflow while it runs ──────────────────────────── */
.kpi b{ min-height:1em; }

/* ── Arabic: the accent word ─────────────────────────────────────────────
   The Latin pages lean on an italic word inside each heading. Arabic has no
   italic — a slanted Amiri is a distortion, not a style — so the same job is
   done with the brand crimson instead. Same emphasis, honest typography. */
html[lang="ar"] em,
html[lang="ar"] .it{ font-style:normal; color:var(--red-lift); }
/* the hero sits on video: crimson is too quiet there, so lighten it */
html[lang="ar"] .hero em{ color:#FF6B7F; }
/* Arabic body copy wants a little more room between the lines than Georgia */
html[lang="ar"] .lede{ line-height:1.8; }
html[lang="ar"] .prose{ line-height:1.95; }
html[lang="ar"] .flow p,html[lang="ar"] .rows p,html[lang="ar"] .faq .a{ line-height:1.85; }
/* Amiri numerals in the figures read better at a touch more weight */
html[lang="ar"] .fig b,html[lang="ar"] .kpi b{ font-family:var(--display); font-weight:500; }

/* ── Arabic: no letter-spacing, ever ─────────────────────────────────────
   Latin small-caps labels are tracked out by 0.2em all over this site. Arabic
   is cursive: tracking pulls the joined letters apart and, in some renderers,
   breaks the joining outright. It also has no uppercase, so text-transform is
   meaningless. Every class that carries a tracked label is reset here, and the
   smallest ones move up a step because Arabic needs more height to stay legible
   at the same apparent size. */
html[lang="ar"] :is(
  .show-head h3, .show-head .hint, .spark-head .hint, .svc-nav a, .flow .n,
  .kpi .k, .kpi .d, .example, .example b, .cap, .ba-tag, .tt-hint, .reel-meta,
  .frame-cap span, .frame-bar span, .cat-cap span, .rows .n, .faq summary,
  .field label, .pick span, .where-list dt, .data-table summary, .data-table th,
  .svc-cta .note, .form-note, .crumbs, .ftr h4, .ftr-end, .tile-play, .svc-no,
  .menu .mono, .lang, .hero-foot .mono, .contact-lines dt
){ letter-spacing:0; text-transform:none; }

html[lang="ar"] :is(
  .show-head h3, .svc-nav a, .field label, .where-list dt, .ftr h4,
  .data-table summary, .data-table th, .kpi .k, .example
){ font-size:var(--t-sm); }

/* the section numerals stay Latin — they are digits, not words */
html[lang="ar"] :is(.svc-no, .flow .n, .rows .n, .mono-red){
  font-family:var(--display); direction:ltr; unicode-bidi:isolate;
}