/* ==========================================================================
   PickYard — built on the PickYard Strategic Identity Master.
   Colour roles, type and the Field → Selection → Pick logic come from that
   document. Photography is the material; the brand supplies the frame.
   ========================================================================== */

:root {
  /* Locked brand colours */
  --blue:   #0052FD;
  --orange: #FD3E0C;
  --orange-ink: #C93209;   /* orange TEXT on light grounds: AA-safe */
  --navy:   #010D27;
  --white:  #FFFFFF;

  /* Neutrals carry a navy bias so they belong to the palette */
  --ground:      #FFFFFF;
  --ground-2:    #F3F5FA;
  --surface:     #FFFFFF;
  --line:        #E3E7F0;
  --line-2:      #C9D1E2;
  --ink:         #010D27;
  --ink-2:       #48557A;
  --ink-3:       #616A85;
  --blue-wash:   #E9EFFF;
  --blue-deep:   #0040C8;
  --orange-wash: #FFEDE7;
  --focus:       var(--blue);
  /* الأزرق كنصّ لا كأرضية. الأزرق الهوية يقرأ على الفاتح (5.79:1) ويسقط
     على الداكن (3.42:1)، والأزرق الخاص بالتركيز في الوضع الداكن يقرأ عليه
     (7.35:1). لا يُستعمل أرضيةً أبدًا، فالأبيض فوقه لا يكفي. */
  --blue-text:   var(--blue);

  --font: "Alexandria", "Segoe UI", "Noto Sans Arabic", Arial, sans-serif;

  /* Type — display runs tight and large; body stays quiet */
  --t-hero:  clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);
  --t-h2:    clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --t-sub:   clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem);  /* the tier between h3 and h2 */
  --t-h3:    clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --t-lede:  clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  --t-kick:  0.8rem;

  /* Arabic is cursive: letter-spacing pulls the joins apart and the word stops
     reading as one word. Tracking is therefore a per-language token, off in
     Arabic and carried by weight instead, and on only for the Latin swap. */
  --track-kick: 0;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;
  --sec: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --r1: 6px; --r2: 12px; --r3: 20px; --pill: 999px;

  /* Motion — fast, clean, intentional */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --d1: 180ms; --d2: 280ms; --d3: 520ms; --d4: 900ms;

  --shadow: 0 18px 50px rgba(1,13,39,.14);
  --wrap: 1240px;
  --hh: 74px;
  /* ارتفاع شريط الإعلان، صفر ما دام مطفأً. كل ما يزيح للترويسة يزيح له. */
  --ann: 0px;
  --to-start: left;   /* gradient direction running toward the inline start */
  color-scheme: light;
}

html[lang="en"] { --track-kick:.16em; --t-kick:.72rem; }
[dir="rtl"] { --to-start: right; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#05091A; --ground-2:#080F26; --surface:#0B1430;
    --line:#1B2647; --line-2:#2A3760;
    --ink:#EEF2FB; --ink-2:#A8B3CE; --ink-3:#8A94B2;
    --blue-wash:#11204A; --blue-deep:#3A73FF; --orange-wash:#3A1710;
    --orange-ink:#FF7A52;
    --focus:#6E9BFF; --blue-text:#6E9BFF; --shadow: 0 18px 50px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:#05091A; --ground-2:#080F26; --surface:#0B1430;
  --line:#1B2647; --line-2:#2A3760;
  --ink:#EEF2FB; --ink-2:#A8B3CE; --ink-3:#8A94B2;
  --blue-wash:#11204A; --blue-deep:#3A73FF; --orange-wash:#3A1710;
  --orange-ink:#FF7A52;
  /* --blue-text كان ناقصًا هنا وحده، فمن يشغّل الداكن يدويًا على جهاز نظامه
     فاتح يقع الأزرق على var(--blue) ويقرأ 3.4:1 على الأرضية الداكنة. */
  --focus:#6E9BFF; --blue-text:#6E9BFF; --shadow: 0 18px 50px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ───────── base ───────── */
*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* clip, not hidden: hidden would make html a scroll container and kill
   position:sticky on the services column. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  /* شريط الإعلان مثبّت خارج التدفّق، فحشو body وحده يُنزل كل ما تحته:
     ترويسة اللاندنق اللاصقة، والواجهة، والصفحات النصّية. العناصر المثبّتة
     (الترويسة والدرج) تُزاح كلٌّ بنفسه لأن التثبيت ينسبها للنافذة لا للصفحة. */
  padding-block-start: var(--ann);
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-weight: 400; line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Alexandria's Arabic glyphs run well past the em box, so display type needs
   noticeably more leading than a Latin face would at the same size. */
h1,h2,h3 { margin:0; line-height:1.5; text-wrap: balance; font-weight: 800; letter-spacing:-.02em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing:-.01em; line-height:1.5; }
p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
img { display:block; max-width:100%; height:auto; }
a { color: var(--blue-text); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r1); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--orange); color:#fff; }

.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem); }
.section { padding-block: var(--sec); }

.skip-link {
  position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--s3); z-index: 300;
  transform: translateY(-180%); background: var(--navy); color:#fff;
  padding: var(--s3) var(--s5); border-radius: var(--r2); font-weight: 500;
  transition: transform var(--d1) var(--ease);
}
.skip-link:focus { transform: none; }

.progress { position: fixed; inset-block-start: var(--ann); inset-inline:0; height:3px; z-index:200; pointer-events:none; }
.progress__bar { display:block; height:100%; width:100%; background: var(--orange);
  transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .progress__bar { transform-origin: right center; }

/* ───────── type helpers ───────── */
.kicker {
  display:block; font-size: var(--t-kick); font-weight: 700;
  letter-spacing: var(--track-kick); text-transform: uppercase;
  color: var(--blue-text); margin:0;
}
.kicker--light { color: #8FB2FF; }
.shead { display:flex; flex-direction:column; gap: var(--s4); max-width: 720px; margin-block-end: clamp(2.5rem,1.5rem + 3vw,4.5rem); }
.shead__title { font-size: var(--t-h2); }
.shead__lede { font-size: var(--t-lede); color: var(--ink-2); max-width: 58ch; }
.shead--light .shead__lede { color:#B4C0DA; }
.shead--light .shead__lede b { color:#fff; }
.shead--light .shead__title { color:#fff; }
.shead--row { flex-direction:row; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: var(--s5) clamp(2rem, 1rem + 4vw, 5rem); max-width:none; }
.shead--row .shead__lede { max-width: 36ch; }

/* ───────── buttons ───────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s2);
  min-height:50px; padding-inline: var(--s6); border:1px solid transparent;
  border-radius: var(--pill); font-weight:500; font-size:.95rem;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease),
              border-color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height:42px; padding-inline: var(--s5); font-size:.86rem; }
.btn--lg { min-height:58px; padding-inline: var(--s7); font-size:1rem; }
.btn--block { display:flex; width:100%; }
/* Orange is the pick: one per view */
.btn--pick { background: var(--orange); color: var(--navy); font-weight:700; }
.btn--pick:hover { background:#E1330A; }
/* The blue is the button, not a hover reward: it reads as an action standing
   still. Deep blue on hover so the press still has somewhere to go.
   White on Pick Blue measures 5.74:1, so the label clears AA. */
.btn--blue { background: var(--blue); color:#fff; border-color: var(--blue); font-weight:700; }
.btn--blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--dark { background: var(--navy); color:#fff; }
.btn--dark:hover { background: var(--blue); }
.btn--line { background:transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn--line:hover { background: rgba(255,255,255,.14); border-color:#fff; }

/* ───────── header ───────── */
.header {
  position: fixed; inset-block-start: var(--ann); inset-inline:0; z-index:150;
  transition: background-color var(--d2) var(--ease), border-color var(--d2) var(--ease);
  border-block-end: 1px solid transparent;
}
.header__inner {
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  display:flex; align-items:center; gap: var(--s5); min-height: var(--hh);
  justify-content: space-between;
}
/* The logo is pinned to the physical left in both directions, so the row is
   reversed under RTL rather than relying on inline-direction auto margins. */
[dir="rtl"] .header__inner { flex-direction: row-reverse; }
.header.is-stuck {
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  border-block-end-color: var(--line);
}
.header__logo { display:inline-flex; align-items:center; flex:0 0 auto; }
.logo { width:auto; height:28px; }
.logo--pos { display:none; }
.header.is-stuck .logo--rev { display:none; }
.header.is-stuck .logo--pos { display:block; }

.nav { margin-inline-start:0; }
.nav__list { display:flex; align-items:center; gap: var(--s1); }
.nav__link {
  position:relative; display:inline-flex; align-items:center; min-height:42px;
  padding-inline: var(--s3); border-radius: var(--r1);
  color: rgba(255,255,255,.82); font-weight:500; font-size:.9rem;
  transition: color var(--d1) var(--ease);
}
.header.is-stuck .nav__link { color: var(--ink-2); }
.nav__link:hover { color:#fff; }
.header.is-stuck .nav__link:hover { color: var(--ink); }
.nav__link::after {
  content:""; position:absolute; inset-block-end:7px;
  inset-inline-start: var(--s3); inset-inline-end: var(--s3); height:2px;
  background: var(--blue-deep); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d2) var(--ease);
}
.header:not(.is-stuck) .nav__link::after { background: #8FB2FF; }
[dir="rtl"] .nav__link::after { transform-origin: right center; }
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color:#fff; }
.header.is-stuck .nav__link.is-current { color: var(--ink); }

.header__actions { display:flex; align-items:center; gap: var(--s2); }
.iconbtn {
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid rgba(255,255,255,.35); border-radius: var(--pill);
  background: rgba(255,255,255,.08); color:#fff;
  transition: background-color var(--d1) var(--ease), border-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.header.is-stuck .iconbtn { border-color: var(--line); background: var(--surface); color: var(--ink-2); }
.iconbtn:hover { background: rgba(255,255,255,.2); }
.header.is-stuck .iconbtn:hover { color: var(--ink); border-color: var(--line-2); }
.iconbtn__text { font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.icon { width:19px; height:19px; }
.icon--moon { display:none; }

.burger { display:none; width:42px; height:42px; padding:0; position:relative;
  border:1px solid rgba(255,255,255,.35); border-radius: var(--pill); background: rgba(255,255,255,.08); }
.header.is-stuck .burger { border-color: var(--line); background: var(--surface); }
.burger span { position:absolute; inset-inline:12px; height:2px; background:#fff; border-radius:2px;
  transition: transform var(--d2) var(--ease), opacity var(--d1) var(--ease); }
.header.is-stuck .burger span { background: var(--ink); }
.burger span:nth-child(1){ inset-block-start:14px; }
.burger span:nth-child(2){ inset-block-start:20px; }
.burger span:nth-child(3){ inset-block-start:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.drawer { position:fixed; inset:0; z-index:160; background: rgba(1,13,39,.6); }
.drawer__panel {
  position:absolute; inset-block:0; inset-inline-end:0; inline-size:min(360px,86vw);
  background: var(--ground); border-inline-start:1px solid var(--line);
  padding: calc(var(--hh) + var(--ann) + var(--s5)) var(--s6) var(--s6);
  display:flex; flex-direction:column; gap: var(--s5); overflow-y:auto;
}
.drawer__list { display:flex; flex-direction:column; gap:var(--s1); }
.drawer__list a { display:block; padding: var(--s3) var(--s2); border-radius: var(--r1);
  color: var(--ink); font-weight:500; font-size:1.05rem; }
.drawer__list a:hover { background: var(--ground-2); }

/* ═════════ HERO — photography first ═════════ */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88dvh, 860px);
  display: grid; grid-template-rows: 1fr auto;
  padding-block: calc(var(--hh) + var(--s8)) var(--s6);
  overflow: hidden; color: #fff;
}
.hero__media { position:absolute; inset:-8% 0; z-index:-2; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:30% 45%; }
/* Legibility scrim, keyed to the brand navy rather than plain black */
.hero__scrim {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(1,13,39,.94) 0%, rgba(1,13,39,.70) 34%, rgba(1,13,39,.52) 68%, rgba(1,13,39,.66) 100%),
    linear-gradient(to var(--to-start), rgba(1,13,39,.04), rgba(1,13,39,.80) 84%);
}
.hero__body {
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  align-self: center;
  display:flex; flex-direction:column; gap: var(--s5); max-width: min(var(--wrap), 100%);
}
.hero__title { font-size: var(--t-hero); display:flex; flex-direction:column; line-height:1.3;
  max-inline-size: min(100%, 620px); }
/* Alexandria's Arabic descends well past the em box, so the mask needs room
   underneath or the tails of ي and ج get sheared off. */
.hero__title .line { display:block; overflow:hidden; padding-block-end:.18em; margin-block-end:-.06em; }
.hero__title .line__in { display:block; }
.line--pick { color:#fff; }

@keyframes lineUp { from { transform: translateY(108%) } to { transform:none } }
@keyframes riseIn { from { opacity:0; transform: translateY(18px) } to { opacity:1; transform:none } }
.hero.is-ready .line__in { animation: lineUp var(--d4) var(--ease) both; }
.hero.is-ready .line:nth-child(2) .line__in { animation-delay: 110ms; }
.hero.is-ready .kicker     { animation: riseIn var(--d3) var(--ease) both; }
.hero.is-ready .hero__lede { animation: riseIn var(--d3) var(--ease) 340ms both; }
.hero.is-ready .hero__actions { animation: riseIn var(--d3) var(--ease) 440ms both; }
.hero.is-ready .hero__foot { animation: riseIn var(--d3) var(--ease) 620ms both; }
.hero__lede { font-size: var(--t-lede); color: rgba(255,255,255,.9); max-width: 46ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap: var(--s3); margin-block-start: var(--s2); }

.hero__foot {
  width:100%; max-width: var(--wrap); margin-inline:auto;
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  display:flex; align-items:flex-end; justify-content:space-between; gap: var(--s5);
  padding-block-start: var(--s7);
}
.hero__cue { display:inline-flex; align-items:center; gap:var(--s2);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.hero__cue::after { content:""; width:1px; height:34px; background:currentColor; opacity:.6;
  animation: cue 1.9s var(--ease-io) infinite; transform-origin: top; }
@keyframes cue { 0%,100%{ transform:scaleY(.35); opacity:.25 } 50%{ transform:scaleY(1); opacity:.75 } }

/* ═════════ TICKER ═════════ */
/* The track is duplicated in JS, so half of it is one full pass. --tick-dur is
   written from the measured width to hold a constant speed whatever the
   language, and the loop is seamless because the halves are identical. */
.ticker { background: var(--blue); color:#fff; overflow:hidden; padding-block: var(--s4);
  --tick-dur: 20s; }
.ticker__track { display:flex; align-items:center; gap: var(--s5); width:max-content;
  will-change: transform;
  animation: tick var(--tick-dur) linear infinite; }
.ticker__track span { font-weight:700; font-size: clamp(1rem,.9rem + .5vw,1.35rem); white-space:nowrap; }
.ticker__track i { width:8px; height:8px; background: var(--orange); border-radius:2px; flex:0 0 auto; }
@keyframes tick    { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes tickRtl { from { transform: translateX(0) } to { transform: translateX(50%) } }
/* Under RTL the overflow runs the other way, so the pass runs the other way. */
[dir="rtl"] .ticker__track { animation-name: tickRtl; }

/* ═════════ SERVICES ═════════ */
.svc__list {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.svc__item {
  position:relative; display:grid; grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s5); align-content:start;
  padding-block: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  border-block-start: 1px solid var(--line);
  transition: border-color var(--d2) var(--ease);
}
.svc__item::before {
  content:""; position:absolute; inset-block-start:-1px; inset-inline:0;
  height:2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d3) var(--ease);
}
[dir="rtl"] .svc__item::before { transform-origin: right center; }
.svc__item:hover::before, .svc__item:focus-within::before { transform: scaleX(1); }
.svc__item:hover .svc__n, .svc__item:focus-within .svc__n { color: var(--orange-ink); }
.svc__n {
  grid-row: 1 / span 2; font-size:.78rem; font-weight:700; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-block-start:.5rem;
  transition: color var(--d2) var(--ease);
}
.svc__item h3, .svc__item p {
  transition: color var(--d2) var(--ease), transform var(--d3) var(--ease);
}
.svc__item:hover h3, .svc__item:focus-within h3 { color: var(--blue-text); }
@media (hover:hover) and (pointer:fine) {
  .svc__item:hover h3, .svc__item:hover p { transform: translateX(6px); }
  [dir="rtl"] .svc__item:hover h3, [dir="rtl"] .svc__item:hover p { transform: translateX(-6px); }
}
.svc__item p { color: var(--ink-2); font-size:.95rem; max-width: 46ch; }

/* What each service actually contains. A 2px square is the brand's mark shape,
   so it marks a list item without turning the row into a chip or a card. */
.svc__tags {
  grid-column: 2; display:flex; flex-wrap:wrap;
  gap: var(--s2) var(--s5); margin-block-start: var(--s3);
}
.svc__tags li {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:500; color: var(--ink-3);
}
.svc__tags li::before {
  content:""; flex:0 0 auto; inline-size:5px; block-size:5px;
  border-radius:2px; background: var(--blue); opacity:.7;
}
.svc__item:hover .svc__tags li::before { opacity:1; }

/* The line that closes the section and hands the reader to the form. */
.svc__cta {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s4) var(--s6);
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-block-start: var(--s6); border-block-start:1px solid var(--line);
  font-size: var(--t-lede); font-weight:500; color: var(--ink);
}
.svc__cta span { max-width: 46ch; }

/* The name story sits between the executive summary and the three moves. */
.moves__lede {
  color:#B4C0DA; font-size: var(--t-lede); max-width: 58ch;
  margin-block-end: var(--s6);
}
.moves__lede b { color:#fff; font-weight:700; }

/* ═════════ METHOD ═════════ */
.method { position:relative; background: var(--navy); color:#fff; }
.method__sticky { position:relative; padding-block: var(--sec); overflow:hidden; }
.method__bg { position:absolute; inset:0; z-index:0; }
.method__bg img { width:100%; height:100%; object-fit:cover; opacity:.2; filter: grayscale(1); }
.method__sticky::after {
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, var(--navy) 0%, rgba(1,13,39,.82) 45%, var(--navy) 100%);
}
.method__inner { position:relative; z-index:2; }
.moves { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr));
  gap: var(--s6) clamp(2rem, 1rem + 3vw, 4.5rem); }
.move {
  display:flex; flex-direction:column; gap: var(--s3);
  padding-block-start: var(--s5);
  border-block-start: 2px solid rgba(255,255,255,.14);
  transition: border-color var(--d3) var(--ease);
}
.move.is-on { border-block-start-color: rgba(255,255,255,.45); }
.move--pick.is-on { border-block-start-color: var(--orange); }
.move__tag { align-self:flex-start; font-size:var(--t-kick); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:#8FB2FF; direction:ltr; }
.move--pick .move__tag { color: var(--orange); }
.move h3 { color:#fff; font-size: var(--t-sub); line-height:1.45; }
.move p { color:#B4C0DA; font-size:.95rem; }

/* ═════════ WORK REEL ═════════ */
.work { padding-block: var(--sec) calc(var(--sec) * .55); overflow:hidden; }
.reel { margin-block-start: var(--s6); }
.reel__track {
  display:flex; gap: clamp(1rem,.6rem + 1.4vw,2rem);
  padding-inline: clamp(1rem,.4rem + 2.4vw,2.75rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-block-end: var(--s4);
}
.reel__track::-webkit-scrollbar { display:none; }
.shot {
  margin:0; flex:0 0 auto; inline-size: clamp(250px, 30vw, 440px);
  scroll-snap-align: center; cursor: zoom-in;
}
.shot img {
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--r3);
  transition: transform var(--d3) var(--ease), filter var(--d3) var(--ease);
  background: var(--ground-2);
}
.shot:hover img, .shot:focus-visible img { transform: translateY(-6px) scale(1.012); }
/* each frame settles from slightly oversize as it enters, so the reel reads as
   a strip of film arriving rather than a grid that was already there */
@keyframes shotIn { from { opacity:0; transform: scale(1.055) } to { opacity:1; transform:none } }
.js .shot.is-in img { animation: shotIn var(--d4) var(--ease) both; }
.reel__bar {
  /* ستة بكسلات لا ثلاثة: المقبض لا بد أن يُرى قبل أن يُمسك. وهدف اللمس
     يُوسَّع بعنصر زائف فوقه وتحته، و touch-action يمنع الصفحة من الانزلاق. */
  height:6px; background: var(--line); border-radius: var(--pill);
  margin-block-start: var(--s5);
  margin-inline: clamp(1rem,.4rem + 2.4vw,2.75rem); max-width: var(--wrap);
  position: relative; cursor: grab; touch-action: none;
}
.reel__bar::before { content:""; position:absolute; inset-block:-10px; inset-inline:0; }
.reel__bar:active { cursor: grabbing; }
.reel__bar:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
/* الإمساك بالمؤشر يمنح الشريط التركيز ليعمل السهم بعده، فيرسم المتصفح حلقة
   التركيز كأنها جاءت من لوحة المفاتيح. الحلقة دليل للوحة المفاتيح وحدها،
   فتُخفى ما دام آخر تفاعل بالمؤشر وتعود مع أول ضغطة مفتاح. */
.reel__bar[data-pointer]:focus-visible { outline: none; }
.reel__bar:hover span, .reel__bar:focus-visible span { background: #E1330A; }
/* أثناء السحب لا انتقال، وإلا تأخّر الشريط عن الإصبع */
.reel__bar.is-scrubbing span { transition: none; }
.reel__bar span {
  position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:18%; background: var(--orange); border-radius: var(--pill);
}

/* ═════════ STATEMENT BAND ═════════ */
.band { position:relative; isolation:isolate; color:#fff; padding-block: clamp(4rem,2rem + 7vw,8rem); overflow:hidden; }
.band__media { position:absolute; inset:-12% 0; z-index:-2; }
.band__media img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.band::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to var(--to-start), rgba(0,82,253,.9), rgba(1,13,39,.92));
}
.band__quote { font-size: clamp(1.4rem,1rem + 2.2vw,2.7rem); font-weight:800; line-height:1.5;
  letter-spacing:-.02em; max-width: 22ch; }

/* ═════════ WHY ═════════ */
/* القسمان الفاتحان كانا لوحين رماديين باهتين: اللون خفيف إلى حدّ يُقرأ معه
   صدفةً لا قرارًا، وهو مع ذلك يكشف فراغ أعلى القسم فيبدو لوحًا ناقصًا.
   الفصل صار بخطّين رفيعين، وهو ما ينصّ عليه النظام: التجميع يأتي من لون
   الأرضية والخطوط الرفيعة. ويعمل في الوضعين بلا خطر على التباين. */
.proc, .why { background: var(--ground); border-block: 1px solid var(--line); }
.why__grid { display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(2rem,1rem + 4vw,5rem); align-items:start; }
.why__copy { display:flex; flex-direction:column; gap: var(--s4); align-items:flex-start; }
.why__copy .btn { margin-block-start: var(--s2); }
.why__list { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: var(--s5) var(--s6); }
.why__list li { display:flex; flex-direction:column; gap: var(--s2);
  padding-inline-start: var(--s5); border-inline-start:2px solid var(--line-2); }
.why__list li:first-child { border-inline-start-color: var(--orange); }
.why__list p { color: var(--ink-2); font-size:.93rem; }

/* ═════════ PROCESS ═════════ */
.steps { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: var(--s5); }
.step { position:relative; display:flex; flex-direction:column; gap: var(--s2);
  padding-block-start: var(--s5); border-block-start:2px solid var(--line); }
.step::before { content:""; position:absolute; inset-block-start:-2px; inset-inline-start:0;
  width:40px; height:2px; background: var(--blue); }
.step:last-child::before { background: var(--orange); }
.step__n { font-size:.78rem; font-weight:700; color: var(--blue-text); letter-spacing:.1em;
  direction:ltr; font-variant-numeric: tabular-nums; }
.step:last-child .step__n { color: var(--orange-ink); }
.step p { color: var(--ink-2); font-size:.92rem; }

/* ═════════ CONTACT ═════════ */
.contact { position:relative; isolation:isolate; background: var(--navy); color:#fff;
  padding-block: var(--sec); overflow:hidden; }
.contact__media {
  position:absolute; inset-block:0; inset-inline-start:0; inline-size:52%; z-index:-2;
  /* the photograph ended on a hard vertical edge; it now dissolves into the
     navy on its inner side, in whichever direction the page is running */
  -webkit-mask-image: linear-gradient(to var(--to-start), transparent, #000 36%);
          mask-image: linear-gradient(to var(--to-start), transparent, #000 36%);
}
.contact__media img { width:100%; height:100%; object-fit:cover;
  object-position: 35% 40%; filter: grayscale(.35) brightness(.96); }
.contact::before { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(to var(--to-start), var(--navy) 36%, rgba(1,13,39,.92) 56%, rgba(1,13,39,.74) 100%); }
.contact__grid { display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(2rem,1rem + 4vw,4.5rem); align-items:start; }
.contact__copy { display:flex; flex-direction:column; gap: var(--s4); }
.contact__copy .shead__title { color:#fff; font-size: var(--t-h2); }
.contact__copy .shead__lede { color:#B4C0DA; }
.contact__meta { display:flex; flex-direction:column; gap: var(--s4); margin-block-start: var(--s3); }
.contact__meta li { display:flex; flex-direction:column; gap:2px; }
.contact__meta span { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#8A94B2; }
.contact__meta a { color:#fff; font-weight:500; }
.contact__meta a:hover { color:#8FB2FF; }

.form { background: var(--surface); border:1px solid var(--line); border-radius: var(--r3);
  padding: clamp(1.5rem,1rem + 2vw,2.75rem); display:flex; flex-direction:column; gap: var(--s4);
  color: var(--ink); box-shadow: var(--shadow); }
.row { display:flex; flex-direction:column; gap: var(--s2); }
.label { font-weight:500; font-size:.92rem; }
.input { width:100%; min-height:52px; padding: var(--s3) var(--s4);
  border:1px solid var(--line-2); border-radius: var(--r2);
  background: var(--ground); color: var(--ink); font:inherit; font-size:.95rem;
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease); }
textarea.input { min-height:124px; resize:vertical; line-height:1.7; }
.input:focus { outline:none; border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--orange); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 24%, transparent); }
.err { color: var(--orange-ink); font-size:.84rem; font-weight:500; }
.form__note { color: var(--ink-3); font-size:.84rem; text-align:center; }
.form__ok { background: var(--blue-wash); color: var(--blue-text); border-radius: var(--r2);
  padding: var(--s4); font-weight:500; font-size:.95rem; }
.form__summary { background: var(--orange-wash); border:1px solid var(--orange);
  border-radius: var(--r2); padding: var(--s4) var(--s5); display:flex; flex-direction:column; gap: var(--s2); }
.form__summary h3 { font-size:1rem; color: var(--orange-ink); }
.form__summary a { color: var(--orange-ink); font-size:.92rem; font-weight:500; }

/* ═════════ FOOTER ═════════ */
.footer { background: var(--navy); color:#B4C0DA; padding-block: var(--s8) var(--s5); }
.footer__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s5); padding-block-end: var(--s7); border-block-end:1px solid rgba(255,255,255,.12); }
/* الهامش التلقائي يبقي الشعار في نهاية السطر حتى حين ينزل وحده على سطر ضيّق. */
.footer__logo { height:34px; width:auto; margin-inline-start:auto; }
.footer__line { font-size: clamp(1rem,.9rem + .6vw,1.4rem); font-weight:700; color:#fff; }
.footer__grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap: var(--s6); padding-block: var(--s7); }
.footer h2 { font-size:.9rem; color:#fff; margin-block-end: var(--s3); }
.footer ul { display:flex; flex-direction:column; gap: var(--s1); }
.footer ul a { display:inline-flex; align-items:center; min-height:28px; }
.footer a, .footer li { color:#B4C0DA; font-size:.92rem; }
.footer a:hover { color:#fff; }
.footer__bar { border-block-start:1px solid rgba(255,255,255,.12); padding-block-start: var(--s5);
  font-size:.84rem; color:#8A94B2; }

/* ═════════ LIGHTBOX ═════════ */
.lb { position:fixed; inset:0; z-index:250; background: rgba(1,13,39,.94);
  display:grid; place-items:center; padding: var(--s6); }
.lb__img { max-width:min(1100px,92vw); max-height:84vh; width:auto; border-radius: var(--r2); }
.lb__close, .lb__nav { position:absolute; background: rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius: var(--pill);
  width:52px; height:52px; font-size:1.6rem; line-height:1; display:grid; place-items:center; }
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.24); }
.lb__close { inset-block-start: var(--s5); inset-inline-end: var(--s5); }
.lb__nav--prev { inset-inline-start: var(--s5); }
.lb__nav--next { inset-inline-end: var(--s5); }

/* ═════════ REVEAL — readable at rest ═════════ */
@keyframes rise { from { opacity:0; transform: translateY(14px) } to { opacity:1; transform:none } }
.js .reveal.is-in { animation: rise var(--d3) var(--ease) both; }

/* ═════════ THEME SWAPS ═════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--sun { display:none; }
  :root:not([data-theme="light"]) .icon--moon { display:block; }
  :root:not([data-theme="light"]) .header.is-stuck .logo--rev { display:block; }
  :root:not([data-theme="light"]) .header.is-stuck .logo--pos { display:none; }
}
:root[data-theme="dark"] .icon--sun { display:none; }
:root[data-theme="dark"] .icon--moon { display:block; }
:root[data-theme="dark"] .header.is-stuck .logo--rev { display:block; }
:root[data-theme="dark"] .header.is-stuck .logo--pos { display:none; }

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:1024px){
  .why__grid, .contact__grid { grid-template-columns:1fr; }
  /* في العمود الواحد تمتد الصورة بعرض الشريحة، فالقناع الأفقي المصمَّم
     للوحة الجانبية يقضم طرفها، والشفافية مع تعتيم ينتهي إلى كحلي صلب
     كانا يمحوانها تمامًا. القناع يصير رأسيًا، والصورة تظهر بكامل قوتها،
     والتعتيم وحده يتكفّل بوضوح النص. */
  .contact__media {
    inline-size:100%; opacity:1;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
            mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .contact::before {
    background: linear-gradient(to bottom, rgba(1,13,39,.74) 0%, rgba(1,13,39,.80) 46%, var(--navy) 88%);
  }
}
@media (max-width:860px){
  :root { --hh:64px; }
  .nav, .header__cta { display:none; }
  .burger { display:block; }
  .header__actions { margin-inline-start:auto; }
  .hero__foot { flex-direction:column; align-items:flex-start; }
  .hero__cue { display:none; }
}
@media (max-width:560px){
  .logo { height:24px; } .footer__logo { height:28px; }
  .btn { width:100%; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .hero { min-height:auto; }
  .shot { inline-size: 78vw; }
  .lb__nav { width:44px; height:44px; }
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
  .ticker__track { animation:none; transform:none; }
  .hero__cue::after { animation:none; }
  .js .reveal.is-in, .js .shot.is-in img { animation:none; }
  .hero.is-ready .line__in, .hero.is-ready .kicker, .hero.is-ready .hero__lede,
  .hero.is-ready .hero__actions, .hero.is-ready .hero__foot { animation:none; }
  .boot { display:none; }
}

/* ═════════ PARTNERS — a dark chapter of its own ═════════ */
.partners {
  position:relative; isolation:isolate; overflow:hidden;
  background: var(--navy); color:#fff;
  padding-block: var(--sec);
}
.partners::before {
  content:""; position:absolute; z-index:-1;
  inset-block-start:-30%; inset-inline-start:-8%;
  width:48vw; aspect-ratio:1; max-width:100%;
  background: radial-gradient(circle, rgba(0,82,253,.55), transparent 68%);
}
.partners__head { margin-block-end: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }

.pgrid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
.pcard {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: var(--s3); padding: var(--s6) var(--s4);
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14); border-radius: var(--r3);
  transition: border-color var(--d2) var(--ease), background-color var(--d2) var(--ease),
              transform var(--d3) var(--ease);
}
/* the pick square sweeps into the corner on hover */
.pcard::after {
  content:""; position:absolute; inset-block-start:0; inset-inline-end:0;
  width:46px; height:46px; background: var(--orange);
  border-end-start-radius: 16px;
  transform: translate(0,-100%); opacity:0;
  transition: transform var(--d3) var(--ease), opacity var(--d2) var(--ease);
}
[dir="rtl"] .pcard::after { transform: translate(0,-100%); }
.pcard:hover, .pcard:focus-within {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.09);
  transform: translateY(-6px);
}
.pcard:hover::after, .pcard:focus-within::after { transform: translate(0,0); opacity:1; }

.pcard__logo {
  display:grid; place-items:center; flex:0 0 auto;
  width:100%; height:64px;
}
.pcard__logo img { max-height:56px; width:auto; object-fit:contain; }
/* no logo file yet: a monogram keeps the grid even */
.pcard__mono {
  display:grid; place-items:center; width:58px; height:58px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  font-size:1.5rem; font-weight:800; color:#fff; line-height:1;
}
.pcard__name { font-weight:700; font-size:1.02rem; line-height:1.5; color:#fff; }
a.pcard:hover { text-decoration:none; }
.pgrid:empty { display:none; }

@media (max-width:1024px){ .pgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .pgrid { grid-template-columns: 1fr; } }

/* ═════════ WHY ═════════ */
.why__title {
  font-size: clamp(2rem, 1.5rem + 2.3vw, 3.3rem);
  line-height:1.4; letter-spacing:-.025em;
}


/* ═════════ DIRECT LINES ═════════ */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.direct { background: var(--ground); border-block-start:1px solid var(--line); }
.direct__inner {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap: var(--s5) clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.direct__lines { display:flex; flex-wrap:wrap; align-items:center; gap: var(--s4) clamp(1.5rem,1rem + 3vw,4rem); }
.social { display:flex; align-items:center; gap: var(--s3); }
.social__btn {
  display:grid; place-items:center; width:48px; height:48px;
  border-radius: var(--pill); border:1px solid var(--line-2);
  color: var(--ink-2); background: var(--surface);
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease),
              border-color var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.social__btn svg { width:21px; height:21px; }
.social__btn:hover { background: var(--navy); border-color: var(--navy); color:#fff; transform: translateY(-2px); }
.direct__item {
  display:inline-flex; align-items:center; gap: var(--s3);
  color: var(--ink); font-weight:700;
  font-size: clamp(1rem, .92rem + .5vw, 1.35rem);
  padding: var(--s2) var(--s3); border-radius: var(--r2);
  transition: color var(--d1) var(--ease);
}
.direct__item:hover { color: var(--blue-text); text-decoration:none; }
.direct__ico {
  display:grid; place-items:center; flex:0 0 auto;
  width:48px; height:48px; border-radius: var(--pill);
  background: var(--blue-wash); color: var(--blue-text);
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.direct__item:hover .direct__ico { background: var(--orange); color:#fff; }
.direct__ico svg { width:22px; height:22px; }
.direct__val { letter-spacing:.01em; }

.footer__lines a { display:inline-flex; align-items:center; gap: var(--s2); }
.footer__lines svg { width:17px; height:17px; flex:0 0 auto; }

@media (max-width:760px){
  .svc__list { grid-template-columns: 1fr; }
  .direct__inner { flex-direction:column; align-items:center; }
  .direct__lines { flex-direction:column; align-items:center; }
  .direct__item { justify-content:center; }
}

/* ═════════ BOOT ═════════
   A navy sheet sits over the first paint and lifts once the fonts have
   resolved, so the hero never flashes a fallback face mid-animation. It is
   inserted by JavaScript, so a page without JavaScript never sees it. */
.boot {
  position: fixed; inset: 0; z-index: 400; background: var(--navy);
  pointer-events: none; animation: bootOut 620ms var(--ease) both;
}
@keyframes bootOut { 0%,38% { opacity:1 } 100% { opacity:0 } }

/* ═════════ REEL: keyboard parity with the drag ═════════ */
.reel__track { scroll-behavior: smooth; }
.reel__track:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r2); }
.shot:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r3); }
.reel__bar span { transition: transform var(--d2) var(--ease); }

/* ═════════ LIGHTBOX: arrives, not appears ═════════ */
@keyframes lbIn  { from { opacity:0 } to { opacity:1 } }
@keyframes lbImg { from { opacity:0; transform: scale(.965) } to { opacity:1; transform:none } }
.js .lb:not([hidden])     { animation: lbIn var(--d2) var(--ease) both; }
.js .lb:not([hidden]) .lb__img { animation: lbImg var(--d3) var(--ease) both; }
.lb__close, .lb__nav { transition: background-color var(--d1) var(--ease), transform var(--d1) var(--ease); }
.lb__close:hover, .lb__nav:hover { transform: scale(1.06); }

/* ═════════ FORM: the submit says what it is doing ═════════ */
.form { transition: opacity var(--d2) var(--ease); }
.form.is-busy { opacity:.62; pointer-events:none; }
.btn[aria-busy="true"] { position:relative; color: transparent; }
.btn[aria-busy="true"]::after {
  content:""; position:absolute; inset-block-start:calc(50% - 9px); inset-inline-start:calc(50% - 9px);
  width:18px; height:18px; border-radius:50%;
  border:2px solid currentColor; border-block-start-color: var(--navy);
  color: rgba(1,13,39,.35);
  animation: spin 620ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.form__ok--bad { background: var(--orange-wash); color: var(--orange-ink); }

/* ═════════ LANGUAGE SWAP: a beat, not a jump ═════════ */
.js body { transition: opacity var(--d1) var(--ease); }
.js body.is-swapping { opacity:.35; }

/* ═════════ SECTION HEADINGS rise with their section ═════════ */
.js .shead__title.reveal.is-in { animation: rise var(--d4) var(--ease) both; }

/* ═════════ PARTNERS: the row settles one card at a time ═════════ */
.pcard__name { transition: color var(--d2) var(--ease); }
.pcard:hover .pcard__name { color:#fff; }
.pcard__logo img { transition: transform var(--d3) var(--ease); }
.pcard:hover .pcard__logo img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .js .lb:not([hidden]), .js .lb:not([hidden]) .lb__img,
  .js .shead__title.reveal.is-in { animation:none; }
  .reel__track { scroll-behavior:auto; }
  .js body.is-swapping { opacity:1; }
}

/* ═════════ ACCEPTANCE CHECKBOX ═════════
   The native box is kept in the accessibility tree and driven from the label;
   only its painted face is replaced, so focus, Space and the required state
   all behave exactly as the browser intends. */
.row--check { margin-block-start: var(--s2); }
.check {
  display:flex; align-items:flex-start; gap: var(--s3);
  cursor:pointer; font-size:.9rem; line-height:1.7; color: var(--ink-2);
}
.check__box { position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer; }
.check__mark {
  flex:0 0 auto; display:grid; place-items:center;
  inline-size:22px; block-size:22px; margin-block-start:.2rem;
  border:1px solid var(--line-2); border-radius: var(--r1);
  background: var(--ground); color: transparent;
  transition: background-color var(--d1) var(--ease), border-color var(--d1) var(--ease),
              color var(--d1) var(--ease);
}
.check__mark svg { inline-size:15px; block-size:15px; }
.check:hover .check__mark { border-color: var(--blue); }
.check__box:checked ~ .check__mark { background: var(--blue); border-color: var(--blue); color:#fff; }
.check__box:focus-visible ~ .check__mark { outline:3px solid var(--focus); outline-offset:3px; }
.check__box[aria-invalid="true"] ~ .check__mark { border-color: var(--orange); }
.check__text a { color: var(--blue-text); text-decoration: underline; text-underline-offset:3px; }
.check__text a:hover { color: var(--blue-deep); }

/* the footer rule now carries the legal link beside the notice */
.footer__bar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s2) var(--s5);
}
.footer__bar a { color:#8A94B2; }
.footer__bar a:hover { color:#fff; }

/* ═════════ TERMS PAGE ═════════ */
.legal { padding-block: calc(var(--hh) + var(--s8)) var(--sec); }
.legal__head { margin-block-end: clamp(2rem,1.2rem + 2.4vw,3.5rem); }
.legal__head h1 { font-size: var(--t-h2); margin-block-start: var(--s3); }
.legal__updated { color: var(--ink-3); font-size:.88rem; margin-block-start: var(--s3); }
.legal__body { max-width: 68ch; display:flex; flex-direction:column; gap: var(--s6); }
.legal__body section { display:flex; flex-direction:column; gap: var(--s3); }
.legal__body h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); }
.legal__body p, .legal__body li { color: var(--ink-2); font-size:.98rem; }
.legal__body ul { display:flex; flex-direction:column; gap: var(--s2); }
.legal__body li { padding-inline-start: var(--s5); position:relative; }
.legal__body li::before {
  content:""; position:absolute; inset-block-start:.7em; inset-inline-start:0;
  inline-size:5px; block-size:5px; border-radius:2px; background: var(--blue); opacity:.7;
}
.legal__note {
  border-inline-start:2px solid var(--orange); padding-inline-start: var(--s5);
  color: var(--ink-2); font-size:.92rem;
}
.legal__back { display:inline-flex; align-items:center; gap:var(--s2); font-weight:500; }

/* ═════════ LANDING — صفحة هدف واحد ═════════
   لا قائمة تنقّل ولا روابط جانبية: كل شيء يقود إلى النموذج. */
.lp { background: var(--ground); }
.lp__bar {
  position:sticky; inset-block-start: var(--ann); z-index:100;
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-block-end:1px solid rgba(255,255,255,.1);
}
.lp__bar .wrap { display:flex; align-items:center; justify-content:space-between;
  gap: var(--s4); min-height:66px; }
[dir="rtl"] .lp__bar .wrap { flex-direction: row-reverse; }
.lp__bar .logo { height:26px; }

.lp__hero { position:relative; isolation:isolate; color:#fff; overflow:hidden;
  padding-block: clamp(3.5rem,2rem + 7vw,7rem); }
.lp__hero .hero__media { inset:-6% 0; }
/* العلم هو موضوع الصورة، والقص الافتراضي كان يزيحه خارج الكادر. هذا الموضع
   يضعه في الفراغ بين بطاقة النموذج والنص، فيُقرأ بدل أن يصير حافة داكنة. */
.lp__hero .hero__media img { object-position: 58% 45%; }
.lp__grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2rem,1rem + 4vw,4.5rem); align-items:center; }
.lp__copy { display:flex; flex-direction:column; gap: var(--s5); align-items:flex-start; }
.lp__title { font-size: clamp(2rem,1.4rem + 2.6vw,3.4rem); line-height:1.32;
  max-inline-size: 18ch; }
.lp__lede { font-size: var(--t-lede); color: rgba(255,255,255,.9); max-width: 46ch; }

/* ما يشمله العرض: قائمة تُقرأ بلمحة */
.lp__list { display:flex; flex-direction:column; gap: var(--s3); }
.lp__list li { display:flex; align-items:flex-start; gap: var(--s3);
  font-size:.98rem; color:#E4EAF6; }
.lp__tick { flex:0 0 auto; display:grid; place-items:center;
  inline-size:22px; block-size:22px; margin-block-start:.15rem;
  border-radius: var(--pill); background: rgba(255,255,255,.14); color:#fff; }
.lp__tick svg { inline-size:13px; block-size:13px; }

/* بطاقة النموذج: هي السطح الوحيد ذو الظل في الصفحة، كما في الرئيسية */
.lp__form { background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r3); padding: clamp(1.5rem,1rem + 2vw,2.5rem);
  display:flex; flex-direction:column; gap: var(--s4); color: var(--ink);
  box-shadow: var(--shadow); }
.lp__form h2 { font-size: clamp(1.3rem,1.1rem + .7vw,1.7rem); }
.lp__form .shead__lede { font-size:.95rem; }

/* شريط الأعمال: دليل بصري بلا تفاصيل تشتّت */
.lp__proof { padding-block: clamp(2.5rem,1.5rem + 3vw,4rem); }
.lp__shots { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap: var(--s4); }
.lp__shots img { width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: var(--r2); background: var(--ground-2); }

.form__consent { color: var(--ink-3); font-size:.82rem; line-height:1.7; text-align:center; }
.form__consent a { color: var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.form__consent a:hover { color: var(--blue-text); }

@media (max-width:900px){
  .lp__grid { grid-template-columns:1fr; }
  .lp__copy { order:1 }
  .lp__form { order:2 }
}

/* ═════════ صفحة ما بعد الإرسال ═════════
   أرضية كحلية كاملة: الصفحة لا محتوى فيها غير التأكيد، فالتقسيم إلى أقسام
   فاتحة وداكنة يفتعل بنية غير موجودة. الترقيم يقوم مقام البطاقات، والفواصل
   الشعرية تفصل الخطوات بلا صناديق. */
.ty { background: var(--navy); color: #fff; min-block-size: 100svh;
      display: flex; align-items: center;
      padding-block: calc(var(--hh) + var(--s7)) var(--s8); }
.ty__in { display: flex; flex-direction: column; align-items: flex-start;
          gap: var(--s4); max-width: 780px; }
/* العلامة لا تحمل البرتقالي: العنوان يقول إن الطلب وصل، فلو صبغناها صارت
   زينة، والبرتقالي محجوز للشيء المختار الواحد في الشاشة وهو زر الفعل. */
.ty__mark { display: inline-flex; align-items: center; justify-content: center;
            inline-size: 60px; block-size: 60px; border-radius: var(--pill);
            background: rgba(255,255,255,.10); border: 1px solid rgba(143,178,255,.45);
            color: #8FB2FF; margin-block-end: var(--s2); }
.ty__mark svg { inline-size: 30px; block-size: 30px; }
.js .ty__mark { animation: tyIn var(--d4) var(--ease) both; }
@keyframes tyIn { from { opacity: 0; transform: scale(.82) } to { opacity: 1; transform: none } }
.ty__title { font-size: var(--t-hero); line-height: 1.16; }
.ty__lede { font-size: var(--t-lede); color: #B4C0DA; max-width: 46ch; }
.ty__next { display: flex; flex-direction: column; gap: 0;
            margin-block: var(--s5); counter-reset: ty; inline-size: 100%; }
.ty__next li { counter-increment: ty; display: grid; gap: var(--s1) var(--s4);
               grid-template-columns: auto 1fr; padding-block: var(--s4);
               border-block-start: 1px solid rgba(255,255,255,.14); }
.ty__next li:last-child { border-block-end: 1px solid rgba(255,255,255,.14); }
.ty__next li::before { content: counter(ty); grid-row: 1 / span 2;
                       font-weight: 800; font-size: .95rem; color: #8FB2FF;
                       font-variant-numeric: tabular-nums; padding-block-start: .15em; }
.ty__next b { font-size: var(--t-h3); color: #fff; }
.ty__next span { color: #B4C0DA; font-size: .95rem; line-height: 1.75; }
.ty__acts { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 560px) {
  .ty__acts { inline-size: 100%; }
  .ty__acts .btn { inline-size: 100%; }
}

/* ═════════ الأسئلة الشائعة ═════════
   لا صناديق: الفصل بخط شعري كما في بقية الصفحة. <details> أصلًا يفتح ويغلق
   بلا جافاسكربت، والعلامة زاوية تدور، فالحركة على transform وحده. */
.faq__list { max-width: 820px; }
.faq__i { border-block-start: 1px solid var(--line); }
.faq__i:last-child { border-block-end: 1px solid var(--line); }
.faq__i > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s5); cursor: pointer; list-style: none;
  font-size: var(--t-h3); font-weight: 700; color: var(--ink);
  transition: color var(--d1) var(--ease);
}
.faq__i > summary::-webkit-details-marker { display: none; }
.faq__i > summary:hover { color: var(--blue-text); }
.faq__i > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r1); }
.faq__c {
  flex: 0 0 auto; inline-size: 12px; block-size: 12px; margin-inline-start: auto;
  /* حدود فيزيائية عن قصد، خلافًا لبقية الورقة: الزاوية تشير إلى أسفل حين
     يكون البند مغلقًا وإلى أعلى حين يُفتح، وهذا اتجاه لا علاقة له بلغة
     الصفحة. الحدود المنطقية تنقلب مع RTL فتصير الزاوية تشير يمينًا. */
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform var(--d2) var(--ease), border-color var(--d1) var(--ease);
}
.faq__i[open] > summary .faq__c { transform: rotate(-135deg); }
.faq__i > summary:hover .faq__c { border-color: var(--blue-text); }
.faq__i > p {
  margin: 0; padding-block-end: var(--s5); padding-inline-end: var(--s6);
  color: var(--ink-2); max-width: 66ch; line-height: 1.85;
}
.js .faq__i[open] > p { animation: faqIn var(--d2) var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .js .faq__i[open] > p { animation: none; }
}

/* ═════════ شريط الإعلان العلوي ═════════
   أزرق لا برتقالي: البرتقالي محجوز للشيء المختار الواحد في الشاشة وهو زر
   الفعل، وشريط بعرض الصفحة يسحبه من الزر. يُثبَّت فوق الترويسة ويزيحها
   بمقدار ارتفاعه عبر --ann، فلا يغطّي شيئًا ولا يطفو فوق المحتوى. */
.ann {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 151;
  background: var(--blue); color: #fff;
}
.ann__in {
  position: relative;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: var(--s2) clamp(1rem,.4rem + 2.4vw,2.75rem);
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3) var(--s4); flex-wrap: wrap; min-block-size: 44px;
}
.ann__t { font-size: .88rem; font-weight: 500; margin: 0; text-align: center; }
.ann__a {
  font-size: .88rem; font-weight: 700; color: #fff;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.ann__a:hover { text-decoration-thickness: 2px; }
.ann__x {
  position: absolute; inset-inline-end: clamp(.5rem,.2rem + 1.2vw,1.25rem);
  inline-size: 32px; block-size: 32px; display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--pill);
  color: rgba(255,255,255,.8); cursor: pointer; padding: 0;
  transition: background-color var(--d1) var(--ease), color var(--d1) var(--ease);
}
.ann__x:hover { background: rgba(255,255,255,.16); color: #fff; }
.ann__x svg { inline-size: 17px; block-size: 17px; }
.ann__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) {
  /* الزرّ يأخذ ركنه، فالنص يترك له مكانًا بدل أن يمرّ تحته */
  .ann__in { padding-inline-end: 3rem; justify-content: flex-start; }
  .ann__t { text-align: start; }
}

/* ═════════ واتساب عائم ═════════
   قناة التواصل الأقرب على الجوال. كحليّ لا أخضر: البرتقالي محجوز للفعل
   الرئيسي في الشاشة، والشكل وحده يكفي للتعرّف على واتساب. يُخفى وهو فوق
   النموذج حتى لا يغطّي حقلًا ولا يكرّر دعوة موجودة أمام العين. */
.wa {
  position: fixed; inset-block-end: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  inset-inline-end: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  z-index: 140; display: inline-flex; align-items: center; justify-content: center;
  /* الأيقونة وحدها: شكل واتساب معروف، والكلمة تكرّر ما تقوله الأيقونة
     وتأخذ عرضًا فوق المحتوى. القرص 56px فوق حدّ الـ44px للمس. */
  inline-size: 56px; block-size: 56px;
  /* الأزرق لا الكحلي: الصفحة تتناوب بين أقسام كحلية وأخرى فاتحة، والكحلي
     يذوب في الأولى فتبقى الأيقونة معلّقة بلا زر. والأزرق لون الفعل في
     الهوية، ويُقرأ على الأرضيتين. البرتقالي محجوز للفعل الرئيسي. */
  border-radius: var(--pill); background: var(--blue); color: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease),
              background-color var(--d1) var(--ease);
}
.wa svg { inline-size: 28px; block-size: 28px; flex: 0 0 auto; }
.wa:hover { background: var(--blue-deep); text-decoration: none; }
.wa.is-away { opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .wa { transition: opacity var(--d1) linear; }
  .wa.is-away { transform: none; }
}