/* =====================================================================
   WebStackRank site kit — "Orbit" (design F) shared styles
   site.css = tokens · fonts · base · type · RTL/Arabic · chrome (top bar,
   nav, mega, drawer, currency, footer) · price slots · component library.
   Page-only styles live in assets/css/pages/<id>.css (home: home.css).
   Every colour derives from --brand-1 / --brand-2 (color-mix in oklab).
   Logical properties throughout; [dir=rtl] only where physics need it.
   Docs + copy-paste snippets: site-src/README.md · gallery: /_kit/
   ===================================================================== */

/* ---------- metric-matched fallbacks (measured in Chrome against the Google faces) ----------
   Google CSS loads async, so text first paints in these. size-adjust matches advance widths,
   ascent/descent overrides match line metrics, so the swap does not move layout. */
@font-face { font-family: "Anton Fallback"; src: local("Impact"), local("Haettenschweiler"), local("Arial Narrow Bold"), local("Roboto Condensed Bold"), local("RobotoCondensed-Bold");
  size-adjust: 94.5%; ascent-override: 124.9%; descent-override: 34.9%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 100 550; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica");
  size-adjust: 107%; ascent-override: 90.6%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 551 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica Bold");
  size-adjust: 102%; ascent-override: 95%; descent-override: 23.5%; line-gap-override: 0%; }
@font-face { font-family: "DM Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic"), local("Noto Serif Italic");
  size-adjust: 94.7%; ascent-override: 109.8%; descent-override: 35.9%; line-gap-override: 0%; }
/* Arabic: Alexandria (display) · IBM Plex Sans Arabic (body) · Aref Ruqaa (accent).
   One fallback face PER WEIGHT BAND: Alexandria and Plex get wider with weight while Tahoma has only regular + bold,
   so a single size-adjust re-wrapped big Arabic titles on swap (CLS). Each face declares its weight range, so the
   browser never fakes bold on top of Tahoma Bold. Measured in Windows Chrome on running Arabic text (5 samples,
   ~1% max deviation per weight): size-adjust = web width / local width; ascent/descent = web metric / size-adjust
   (Alexandria .97/.25 em, Plex 1.09/.42 em, Ruqaa 1.22/.24 em). Alexandria loads 600-900 only, so 400 renders as 600. */
@font-face { font-family: "Alexandria Fallback"; font-weight: 100 650; src: local("Tahoma Bold"), local("Tahoma-Bold"), local("Noto Sans Arabic Bold"), local("Segoe UI Bold");
  size-adjust: 100.9%; ascent-override: 96.1%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Alexandria Fallback"; font-weight: 651 750; src: local("Tahoma Bold"), local("Tahoma-Bold"), local("Noto Sans Arabic Bold"), local("Segoe UI Bold");
  size-adjust: 104.3%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Alexandria Fallback"; font-weight: 751 850; src: local("Tahoma Bold"), local("Tahoma-Bold"), local("Noto Sans Arabic Bold"), local("Segoe UI Bold");
  size-adjust: 107.6%; ascent-override: 90.1%; descent-override: 23.2%; line-gap-override: 0%; }
@font-face { font-family: "Alexandria Fallback"; font-weight: 851 1000; src: local("Tahoma Bold"), local("Tahoma-Bold"), local("Noto Sans Arabic Bold"), local("Segoe UI Bold");
  size-adjust: 110.8%; ascent-override: 87.5%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face { font-family: "Plex Arabic Fallback"; font-weight: 100 450; src: local("Tahoma"), local("Segoe UI"), local("Noto Sans Arabic"), local("Geeza Pro");
  size-adjust: 87.9%; ascent-override: 124%; descent-override: 47.7%; line-gap-override: 0%; }
/* IBM Plex Sans Arabic 500 (leads, notes) sets ~3.5% wider than 400 */
@font-face { font-family: "Plex Arabic Fallback"; font-weight: 451 550; src: local("Tahoma"), local("Segoe UI"), local("Noto Sans Arabic"), local("Geeza Pro");
  size-adjust: 90.7%; ascent-override: 120.1%; descent-override: 46.3%; line-gap-override: 0%; }
@font-face { font-family: "Plex Arabic Fallback"; font-weight: 551 650; src: local("Tahoma Bold"), local("Tahoma-Bold"), local("Segoe UI Bold"), local("Noto Sans Arabic Bold");
  size-adjust: 80.9%; ascent-override: 134.7%; descent-override: 51.9%; line-gap-override: 0%; }
@font-face { font-family: "Plex Arabic Fallback"; font-weight: 651 1000; src: local("Tahoma Bold"), local("Tahoma-Bold"), local("Segoe UI Bold"), local("Noto Sans Arabic Bold");
  size-adjust: 82.6%; ascent-override: 131.9%; descent-override: 50.8%; line-gap-override: 0%; }
@font-face { font-family: "Ruqaa Fallback"; font-weight: 100 1000; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Noto Naskh Arabic Bold"), local("Geeza Pro Bold");
  size-adjust: 84.4%; ascent-override: 144.6%; descent-override: 28.4%; line-gap-override: 0%; }

:root {
  --brand-1: #6D28D9;   /* purple */
  --brand-2: #FF6A1F;   /* orange */

  /* derived — never hard-code a brand colour below this line */
  --b1: var(--brand-1);
  --b2: var(--brand-2);
  --b1-ink: color-mix(in oklab, var(--brand-1) 55%, black);     /* small text on light */
  --b1-accent: color-mix(in oklab, var(--brand-1) 82%, black);  /* large accent text on light */
  --b1-solid: color-mix(in oklab, var(--brand-1) 70%, black);   /* surfaces under cream text */
  --b2-ink: color-mix(in oklab, var(--brand-2) 62%, black);     /* orange-family text on light */
  --deep: color-mix(in oklab, var(--brand-1) 40%, #08060d);
  --deep-2: color-mix(in oklab, var(--brand-1) 50%, #120d1c);
  --cream: color-mix(in oklab, var(--brand-2) 5%, #F6F1EA);
  --cream-2: color-mix(in oklab, var(--brand-2) 10%, #EEE6DA);
  --paper: color-mix(in oklab, var(--brand-2) 3%, #FFFDF9);
  --ink: color-mix(in oklab, var(--brand-1) 12%, #0F0C14);
  --ink-2: color-mix(in oklab, var(--ink) 74%, var(--cream));
  --line: color-mix(in oklab, var(--ink) 15%, transparent);
  --on-deep-2: color-mix(in oklab, var(--cream) 78%, var(--deep));
  --line-deep: color-mix(in oklab, var(--cream) 16%, transparent);
  --hot-2: var(--ink);  /* secondary text on orange: hierarchy by size, not tint (AA for any brand-2) */
  --b2-on-deep: color-mix(in oklab, var(--brand-2) 84%, white);  /* large accents on deep */
  --b2-lite: color-mix(in oklab, var(--brand-2) 58%, white);     /* small text on deep */
  --hot-lite: color-mix(in oklab, var(--brand-2) 72%, white);
  --hot-dark: color-mix(in oklab, var(--brand-2) 78%, var(--brand-1));
  /* ink-reveal wash (sits BEHIND type: light enough that --ink letters keep >= 3:1 on it) */
  --wash-1: color-mix(in oklab, var(--brand-1) 60%, var(--cream));
  --wash-2: color-mix(in oklab, var(--brand-1) 38%, var(--cream));

  /* section context (overridden per band) */
  --bg: var(--cream); --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); --rule: var(--line);

  --f-display: "Anton", "Anton Fallback", "Arial Narrow", sans-serif;
  --f-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "DM Serif Display", "DM Serif Fallback", Georgia, serif;
  --f-num: "Anton", "Anton Fallback", "Arial Narrow", sans-serif;   /* Latin numerals + prices in both languages */
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-ar: "IBM Plex Sans Arabic", "Plex Arabic Fallback", Tahoma, "Segoe UI", sans-serif;
  --accent-style: italic;
  --display-case: uppercase;
  --display-track: .004em;
  --display-lh: .92;

  --g: clamp(16px, 4vw, 40px);
  --max: 1360px;
  --sec: clamp(56px, 8.5vw, 124px);
  --sec-tight: clamp(40px, 6vw, 88px);
  --tb-h: 38px;
  --nav-h: 64px;
  --r-lg: clamp(22px, 2.4vw, 32px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow: 0 1px 2px color-mix(in oklab, var(--ink) 10%, transparent), 0 18px 40px -18px color-mix(in oklab, var(--ink) 38%, transparent);
  --dir: 1;            /* +1 LTR / -1 RTL — multiply any physical x offset by it */
  color-scheme: light;
}
[dir="rtl"] { --dir: -1; }

/* Arabic: own faces, no uppercase, no tracking, roomier leading */
:root:lang(ar) {
  --f-display: "Alexandria", "Alexandria Fallback", Tahoma, sans-serif;
  --f-body: "IBM Plex Sans Arabic", "Plex Arabic Fallback", Tahoma, "Segoe UI", sans-serif;
  --f-serif: "Aref Ruqaa", "Ruqaa Fallback", "Times New Roman", serif;
  --accent-style: normal;
  --display-case: none;
  --display-track: 0;
  --display-lh: 1.22;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; scrollbar-color: color-mix(in oklab, var(--ink) 45%, transparent) var(--cream); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; caret-color: var(--b1); }
:root:lang(ar) body { line-height: 1.8; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, figure, blockquote, address, fieldset, legend { margin: 0; }
/* Bootstrap 5 Reboot coexistence (it may load before this file on the Laravel template):
   neutralise the element defaults the kit does not set itself. Kit class names never reuse Bootstrap's
   (.nav/.btn/.lead/.h1-.h3/.card/.container/... are not used — see README "Bootstrap coexistence"). */
:root { scroll-behavior: auto; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; line-height: inherit; font-size: inherit; color: inherit; }
legend { float: none; width: auto; padding: 0; font-size: inherit; line-height: inherit; }
small { font-size: smaller; }
code { color: inherit; word-wrap: normal; }
label { display: initial; }
summary { display: block; }
table { caption-side: top; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--b2); color: var(--ink); }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.band--deep :focus-visible, .ft :focus-visible, .drawer :focus-visible, .ph--deep :focus-visible { outline-color: var(--b2); }
.band--hot :focus-visible, .poster :focus-visible, .final :focus-visible, .ph--hot :focus-visible { outline-color: var(--deep); }
.skip { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
/* Latin runs inside Arabic text (brand names, codes) keep the Latin display/body faces */
:lang(ar) [lang^="en"], :lang(ar) .ltr { font-family: inherit; }

/* Bootstrap Icons load async: reserve each icon's 1em box so the late icon font never re-wraps a line (CLS) */
:where(i.bi) { display: inline-block; width: 1em; min-width: 1em; line-height: 1; text-align: center; font-style: normal; }
/* mirror directional icons in RTL (on ::before so the <i>'s own transform stays free for motion) */
[dir="rtl"] :is(.bi-arrow-right, .bi-arrow-left, .bi-arrow-up-right, .bi-arrow-down-right, .bi-arrow-up-left, .bi-chevron-right, .bi-chevron-left, .bi-arrow-right-short, .bi-arrow-left-short, .bi-box-arrow-up-right, .bi-arrow-right-circle, .bi-caret-right-fill, .bi-caret-left-fill, .bi-reply)::before { transform: scaleX(-1); }

/* ---------- type system ---------- */
.headline { font: 400 clamp(2.5rem, 6.2vw, 6rem)/var(--display-lh) var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg); text-wrap: balance; }
.headline em, .final__title em, .ph__title em, .acc-word { font-family: var(--f-serif); font-style: var(--accent-style); text-transform: none; letter-spacing: -.012em; font-size: 1.1em; line-height: .8; color: var(--acc); padding-inline-end: .04em; }
.headline--xl { font-size: clamp(2.9rem, 8.4vw, 6rem); }
.headline--md { font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
/* kit line masks (SplitText mask:'lines' -> .ln-mask, overflow: clip): Arabic dots and marks sit outside the line box
   (the dots under a final «ي», hamza/shadda above), so the mask gets room inside (padding) that the negative margin
   gives back: lines stay exactly where they were, nothing is clipped at rest. site.js raises Arabic words from
   further down (yPercent 150) so the bigger mask still hides them before they rise. */
:root:lang(ar) .ln-mask { padding-block: .2em .36em; margin-block: -.2em -.36em; }
.subhead { font: 400 clamp(26px, 2.6vw, 40px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.lede { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.55; color: var(--fg-2); max-width: 34em; }
.head { margin-bottom: clamp(28px, 3.6vw, 52px); display: grid; gap: 16px; }
.head .lede { margin-top: 2px; }
.head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.head--row > div { display: grid; gap: 16px; max-width: 900px; }
.head--center { justify-items: center; text-align: center; }
.head--center .lede { margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sec { position: relative; padding-block: var(--sec); }
.sec--tight { padding-block: var(--sec-tight); }
.sec--flush-top { padding-block-start: 0; }
.sec + .sec:not([class*="band--"]):not(.band--cream) { padding-block-start: calc(var(--sec) * .6); }

/* bands: set the section context (--bg/--fg/--fg-2/--acc/--rule) */
.band--cream { --bg: var(--cream); --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); --rule: var(--line); background: var(--cream); color: var(--ink); }
.band--paper { --bg: var(--paper); background: var(--paper); color: var(--ink); }
.band--deep { --bg: var(--deep); --fg: var(--cream); --fg-2: var(--on-deep-2); --acc: var(--b2-on-deep); --rule: var(--line-deep); background: var(--deep); color: var(--cream); }
.band--hot { --bg: var(--b2); --fg: var(--ink); --fg-2: var(--hot-2); --acc: var(--deep); --rule: color-mix(in oklab, var(--ink) 22%, transparent); background: var(--b2); color: var(--ink); }
.band--ink { --bg: var(--ink); --fg: var(--cream); --fg-2: color-mix(in oklab, var(--cream) 74%, var(--ink)); --acc: var(--b2-on-deep); --rule: var(--line-deep); background: var(--ink); color: var(--cream); }
.band--round { border-radius: clamp(28px, 4vw, 56px); margin-inline: clamp(8px, 1.2vw, 16px); }
.band--ink :focus-visible { outline-color: var(--b2); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--fg); text-decoration: none; min-height: 44px; background: linear-gradient(currentColor 0 0) left calc(100% - 8px) / 100% 1.5px no-repeat; transition: background-size .4s var(--ease); }
[dir="rtl"] .link-arrow { background-position: right calc(100% - 8px); }
.link-arrow:hover { background-size: 0 1.5px; background-position: right calc(100% - 8px); }
[dir="rtl"] .link-arrow:hover { background-position: left calc(100% - 8px); }
.link-arrow i { transition: transform .35s var(--ease); }
.link-arrow:hover i { transform: translateX(calc(4px * var(--dir))); }

.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks i { color: var(--acc); font-size: 18px; line-height: 1.4; flex: none; }
.ticks--sm { gap: 8px; font-size: 14.5px; }
.ticks--sm i { font-size: 16px; }

/* ---------- buttons ---------- */
.button { --bh: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: var(--bh); padding: 0 22px; border-radius: 999px; font: 650 15px/1.1 var(--f-body); text-decoration: none; white-space: nowrap; transition: scale .3s var(--ease), background-color .3s, color .3s, border-color .3s; position: relative; }
.button:active { scale: .97; }
.button--lg { --bh: 60px; padding-block: 0; padding-inline: 28px 10px; font-size: 16px; }
.button--lg:not(:has(.button__dot)) { padding: 0 28px; }
.button--sm { --bh: 44px; padding: 0 18px; font-size: 14px; }
.button--block { width: 100%; }
.button--solid { background: var(--b1-solid); color: var(--cream); }
.button--solid:hover { background: var(--deep); }
.button--accent { background: var(--b2); color: var(--ink); }
.button--accent:hover { background: var(--hot-lite); }
.button--line { box-shadow: inset 0 0 0 1.5px currentColor; color: var(--fg); }
.button--line:hover { background: var(--fg); color: var(--bg); box-shadow: none; }
.button--ghost-light { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cream) 45%, transparent); color: var(--cream); }
.button--ghost-light:hover { background: var(--cream); color: var(--deep); }
.button--ink { background: var(--ink); color: var(--cream); }
.button--ink:hover { background: var(--deep); }
/* on purple / ink surfaces the ink pill would sink into the ground: a cream hairline keeps its edge, hover inverts */
:is(.band--deep, .band--ink, .ph--deep, .midcta__card--deep) .button--ink { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cream) 34%, transparent); }
:is(.band--deep, .band--ink, .ph--deep, .midcta__card--deep) .button--ink:hover { background: var(--cream); color: var(--deep); box-shadow: none; }
.button > .bi:first-child { font-size: 1.1em; }
.button[disabled], .button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.button.is-loading { pointer-events: none; }
.button.is-loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.button__dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 18px; transition: transform .5s var(--ease); }
.button--accent .button__dot { background: var(--deep); color: var(--cream); }
.button:hover .button__dot { transform: rotate(calc(-45deg * var(--dir))); }
:root:lang(ar) .button { font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* =====================================================================
   TOP BAR + CURRENCY SWITCH
   ===================================================================== */
.tb { background: var(--deep); color: var(--cream); font-size: 13px; position: relative; z-index: 60; }
.tb__in { display: flex; align-items: center; justify-content: space-between; height: var(--tb-h); gap: 12px; }
.tb__contact { display: flex; gap: 20px; min-width: 0; }
.tb__link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--on-deep-2); white-space: nowrap; min-height: 38px; }
.tb__link:hover { color: var(--cream); }
.tb__link i { color: var(--b2); }
.tb__link span { direction: ltr; unicode-bidi: isolate; }

.ccy { position: relative; }
.ccy summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 0 10px; min-height: 38px; border-radius: 999px; color: var(--cream); font-weight: 600; }
.ccy summary::-webkit-details-marker { display: none; }
.ccy summary:hover { background: color-mix(in oklab, var(--cream) 10%, transparent); }
.ccy__flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; }
.ccy__chev { font-size: 11px; transition: transform .3s var(--ease); }
.ccy[open] .ccy__chev { transform: rotate(180deg); }
.ccy__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); width: 248px; background: var(--paper); color: var(--ink); border-radius: 18px; padding: 8px; box-shadow: var(--shadow); max-height: 70vh; overflow: auto; z-index: 80; }
.ccy__head { font-size: 12px; font-weight: 650; color: var(--ink-2); padding: 8px 10px 6px; }
.ccy__form { margin: 0; }
.ccy__item { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; text-align: start; font-size: 14px; }
.ccy__item:hover, .ccy__item.is-current { background: var(--cream-2); }
.ccy__code { font-weight: 700; font-family: var(--f-body); direction: ltr; unicode-bidi: isolate; }
.ccy__name { color: var(--ink-2); flex: 1; }
.ccy__tick { color: var(--b1-ink); }

/* =====================================================================
   NAV + MEGA + DRAWER
   ===================================================================== */
.mast { position: sticky; top: 0; z-index: 50; height: var(--nav-h); }
.mast__bar { position: relative; height: 100%; max-width: calc(var(--max) + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); display: flex; align-items: center; gap: 20px; }
.mast__bar::before { content: ""; position: absolute; inset: 9px calc(var(--g) - 12px); border-radius: 999px; background: color-mix(in oklab, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px) scale(.985); transition: opacity .4s var(--ease), transform .5s var(--ease); z-index: -1; }
.mast.is-stuck .mast__bar::before { opacity: 1; transform: none; }
/* pages without a dark/orange poster under the nav get the pill from the start (body class "nav--solid").
   A page that opens with a purple poster (.ph--deep first in <main>) gets it automatically: the ink nav is unreadable
   on purple. :where() keeps the specificity low so the open drawer can still hide the pill. site.js adds the class too
   (browsers without :has). */
.nav--solid .mast__bar::before, :where(body:has(> main > .ph--deep:first-child)) .mast__bar::before { opacity: 1; transform: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; min-height: 44px; direction: ltr; }
.logo__mark { width: 36px; height: 36px; overflow: visible; }
.logo__orbit { fill: none; stroke: currentColor; stroke-width: 2.6; }
.logo__core { fill: var(--b1-solid); }
.logo__moon { fill: var(--cream); stroke: currentColor; stroke-width: 1.6; }
.logo__word { font: 400 23px/1 var(--f-num); text-transform: uppercase; letter-spacing: .02em; }
.logo__word b { font-weight: 400; color: var(--b1-solid); }
.mast .logo__mark { animation: orbit 14s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

.mast__menu { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.mast__item { position: relative; }
.mast__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 999px; transition: background-color .25s; }
.mast__link:hover, .has-mega.is-open > .mast__link, .mast__item.is-current > .mast__link { background: color-mix(in oklab, var(--ink) 9%, transparent); }
.mast__link[aria-current="page"] { box-shadow: inset 0 -2px 0 currentColor; border-radius: 999px 999px 0 0; }
.mast__link .bi { font-size: 11px; transition: transform .3s var(--ease); }
.has-mega.is-open > .mast__link .bi { transform: rotate(180deg); }
.mast__actions { display: flex; align-items: center; gap: 10px; }
.mast__lang { font-family: var(--f-ar); font-weight: 600; text-decoration: none; min-height: 44px; min-width: 44px; display: grid; place-items: center; border-radius: 999px; }
.mast__lang:lang(en) { font-family: var(--f-body); font-weight: 700; letter-spacing: .04em; }
.mast__lang:hover { background: color-mix(in oklab, var(--ink) 9%, transparent); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); place-items: center; position: relative; }
.burger span { position: absolute; inset-inline: 14px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .45s var(--ease); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* mega menus (Services, Industries): every panel hangs from the bar, centred, so a menu item far from the middle never
   pushes its panel off-screen; top = the link's bottom edge (bar middle + 22px) + 14px, bridged by .mega::before */
.mast__item.has-mega { position: static; }
/* keyboard focus moving into the sticky header (Shift+Tab from the page) must not scroll the page up: html's
   scroll-padding-top would treat the always-visible header as hidden behind itself */
.mast :is(a, button) { scroll-margin-top: -200px; }
.mega { position: absolute; top: calc(50% + 36px); left: 50%; width: min(940px, 92vw); display: grid; grid-template-columns: 1fr 276px; gap: 12px; padding: 12px; background: var(--paper); color: var(--ink); border-radius: 26px; box-shadow: 0 30px 70px -30px color-mix(in oklab, var(--ink) 55%, transparent), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .3s; }
.mega::before { content: ""; position: absolute; inset-inline: 0; top: -18px; height: 18px; }
.has-mega.is-open .mega, .has-mega:focus-within:not(.is-esc) .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
/* one panel at a time: a mouse-opened menu wins over another one that only holds keyboard focus */
.mast__menu:has(.has-mega.is-open) .has-mega:not(.is-open) .mega { opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: none; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: start; max-height: calc(100vh - var(--tb-h) - var(--nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Industries: longer names ("Restaurants & Cafés", "Healthcare & Clinics") — a wider panel keeps them on one line at 1440 */
.mega--ind { width: min(1040px, 94vw); }
/* more than nine items (Industries): tighter cells so the panel stays about as tall as its side card */
.mega--dense .mega__grid { gap: 2px; }
.mega--dense .mega__link { padding: 10px 12px; gap: 10px; }
.mega--dense .mega__ico { width: 32px; height: 32px; border-radius: 10px; font-size: 15px; }
.mega__link { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; text-decoration: none; transition: background-color .2s; min-height: 44px; }
.mega__link:hover, .mega__link:focus-visible, .mega__link.is-peek, .mega__link[aria-current="page"] { background: var(--cream-2); }
.mega__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklab, var(--b1) 12%, var(--paper)); color: var(--b1-ink); flex: none; font-size: 16px; }
.mega__title { display: block; font-weight: 650; font-size: 14.5px; line-height: 1.3; }
.mega__desc { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; }
.mega__side { background: var(--deep); color: var(--cream); border-radius: 18px; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.mega__peek { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--deep-2); }
.mega__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .45s var(--ease), transform .8s var(--ease); }
.mega__peek img.is-on { opacity: 1; transform: none; }
.mega__side-title { font: 400 22px/1 var(--f-display); text-transform: var(--display-case); margin-top: 4px; }
:root:lang(ar) .mega__side-title { font-size: 19px; line-height: 1.35; font-weight: 800; }
.mega__side-text { font-size: 13.5px; color: var(--on-deep-2); line-height: 1.45; }
.mega__side .button { background: var(--b2); color: var(--ink); }
.mega__all { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; color: var(--cream); text-decoration: none; min-height: 40px; }

/* ---------- mobile drawer (< 1024 px; 2026-11-11 rework) ----------
   A sheet from the inline-end edge (full width on phones, 440 px with a scrim on tablets) under the sticky header,
   which stays on top with the burger turned into the close button. Inside: language + currency switch, accordion
   sections (Services, Industries) with aria-expanded, the page links, contact shortcuts; a sticky "Get a quote" bar.
   Open / close = transform + opacity only, <= 300 ms (reduced motion: instant, see the media query at the end).
   site.js (NAV) sets --drawer-top (the header's bottom edge) when it opens, traps focus and locks the page. */
.drawer { position: fixed; inset: 0; z-index: 70; --drawer-top: calc(var(--tb-h) + var(--nav-h)); }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--ink) 62%, transparent); opacity: 0; transition: opacity .22s ease-out; touch-action: none; }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(100%, 440px); background: var(--deep); color: var(--cream); display: flex; flex-direction: column; padding-top: var(--drawer-top); overflow: hidden; transform: translateX(calc(100% * var(--dir))); transition: transform .22s cubic-bezier(.4, 0, 1, 1); box-shadow: 0 0 60px -20px color-mix(in oklab, var(--ink) 80%, transparent); }
.drawer.is-open .drawer__scrim { opacity: 1; transition-duration: .3s; }
.drawer.is-open .drawer__panel { transform: none; transition: transform .3s var(--ease); }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-deep) transparent;
  padding: 6px max(var(--g), env(safe-area-inset-right)) 28px max(var(--g), env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 22px; }
/* kit static header (site-src/partials/header.*.html: nav + .drawer__foot straight in the panel): the panel scrolls */
.drawer__panel:not(:has(> .drawer__body)) { overflow-y: auto; padding: calc(var(--drawer-top) + 8px) var(--g) 28px; gap: 28px; }

/* language + currency */
.dprefs { display: flex; gap: 8px; align-items: stretch; }
.dlang { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in oklab, var(--cream) 8%, transparent); box-shadow: inset 0 0 0 1px var(--line-deep); }
.dlang__opt { flex: 1 1 0; min-width: 0; display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; font: 600 16px/1.1 var(--f-body); color: var(--on-deep-2); text-decoration: none; white-space: nowrap; }
.dlang__opt:lang(ar) { font-family: var(--f-ar); }
.dlang__opt.is-on { background: var(--cream); color: var(--ink); }
.dccy { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 999px; background: color-mix(in oklab, var(--cream) 8%, transparent); box-shadow: inset 0 0 0 1px var(--line-deep); color: var(--cream); font-size: 16px; }
.dccy .ccy__chev { font-size: 12px; color: var(--b2); }
.dccy[aria-expanded="true"] { background: var(--cream); color: var(--ink); }
.dccy[aria-expanded="true"] .ccy__chev { transform: rotate(180deg); color: var(--ink); }
.dccy__panel { margin-top: -12px; padding: 12px 10px 10px; border-radius: 22px; background: var(--deep-2); box-shadow: inset 0 0 0 1px var(--line-deep); }
.dccy__head { font-size: 14px; color: var(--on-deep-2); padding: 0 6px 8px; }
.dccy__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); gap: 4px; }
.drawer .ccy__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 56px; padding: 6px 10px; border-radius: 16px; color: var(--cream); background: transparent; text-align: start; }
.drawer .ccy__item.is-current { background: var(--cream); color: var(--ink); }
.drawer .ccy__flag { grid-column: 1; grid-row: 1 / span 2; }
.drawer .ccy__item .ccy__code { grid-column: 2; justify-self: start; font-size: 16px; line-height: 1.2; }
.drawer .ccy__item .ccy__name { grid-column: 2; justify-self: start; font-size: 14px; line-height: 1.25; color: inherit; opacity: .8; }
.drawer .ccy__tick { position: absolute; inset-inline-end: 10px; top: 9px; color: var(--b1-ink); }

/* nav: big rows, accordion sections */
.drawer__nav { display: block; }
.dnav > li { border-bottom: 1px solid var(--line-deep); }
.dnav__btn, .dnav__link { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 0; font: 400 28px/1.05 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); text-decoration: none; text-align: start; color: var(--cream); }
:root:lang(ar) :is(.dnav__btn, .dnav__link) { font-size: 22px; font-weight: 700; line-height: 1.35; }
.dnav__link[aria-current="page"], .dnav__sec.is-current > .dnav__btn { color: var(--b2-on-deep); }
.dnav__link[aria-current="page"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--b2); flex: none; margin-inline-end: 13px; }
.dnav__chev { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--b2); background: color-mix(in oklab, var(--cream) 9%, transparent); transition: transform .3s var(--ease), background-color .2s, color .2s; }
.dnav__btn[aria-expanded="true"] .dnav__chev { transform: rotate(180deg); background: var(--b2); color: var(--ink); }
.dnav__panel { padding: 0 0 14px; }
.dnav__panel:not([hidden]) { animation: dnav-in .24s var(--ease) both; }
@keyframes dnav-in { from { opacity: 0; transform: translateY(-6px); } }
.dnav__sub { display: grid; gap: 2px; }
.dnav__sub a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; margin-inline: -10px; border-radius: 14px; font: 600 16px/1.3 var(--f-body); color: var(--cream); text-decoration: none; }
.dnav__sub a[aria-current="page"] { background: color-mix(in oklab, var(--b2) 20%, transparent); }
.dnav__ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 17px; color: var(--b2); background: color-mix(in oklab, var(--cream) 8%, transparent); }
.dnav__name { min-width: 0; }
.drawer .badge-lang { background: color-mix(in oklab, var(--cream) 14%, transparent); color: var(--on-deep-2); }
.dnav__all { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 4px; font: 650 16px/1.2 var(--f-body); color: var(--b2-lite); text-decoration: none; }
.dnav__all[aria-current="page"] { color: var(--cream); }

/* proposal + contact shortcuts */
.drawer__proposal { --bh: 54px; font-size: 16px; }
.dreach__label { font-size: 14px; font-weight: 600; color: var(--on-deep-2); margin-bottom: 10px; }
.dreach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dreach__item { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 78px; padding: 10px 4px; border-radius: 18px; background: color-mix(in oklab, var(--cream) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line-deep); font: 600 16px/1.2 var(--f-body); color: var(--cream); text-decoration: none; text-align: center; }
.dreach__item i { font-size: 22px; line-height: 1; color: var(--b2); }
.dreach__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin-top: 6px; font-size: 15px; color: var(--on-deep-2); }
.dreach__meta a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; unicode-bidi: isolate; }

/* sticky call to action */
/* hover only where a pointer hovers (a tap must not leave a row lit) */
@media (hover: hover) {
  a.dlang__opt:hover { color: var(--cream); background: color-mix(in oklab, var(--cream) 10%, transparent); }
  .drawer .ccy__item:not(.is-current):hover, .dnav__sub a:not([aria-current]):hover { background: color-mix(in oklab, var(--cream) 8%, transparent); }
  .dreach__item:hover { background: color-mix(in oklab, var(--cream) 13%, transparent); }
  .dreach__meta a:hover { color: var(--cream); text-decoration: underline; }
}
/* content scrolled under the header: a soft edge (site.js toggles .is-scrolled) */
.drawer__panel::after { content: ""; position: absolute; inset-inline: 0; top: var(--drawer-top); height: 24px; background: linear-gradient(var(--deep), transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
.drawer__panel.is-scrolled::after { opacity: 1; }

.drawer__cta { flex: none; padding: 12px max(var(--g), env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(var(--g), env(safe-area-inset-left)); background: var(--deep); box-shadow: 0 -1px 0 var(--line-deep), 0 -24px 32px -24px color-mix(in oklab, var(--ink) 90%, transparent); }
.drawer__quote { --bh: 56px; font-size: 16px; gap: 10px; }

/* kit static header markup (details.drawer__group / a.drawer__link / .drawer__foot): unchanged look */
.drawer__link, .drawer__group summary { font: 400 clamp(38px, 11vw, 64px)/1.05 var(--f-display); text-transform: var(--display-case); text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line-deep); display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
:root:lang(ar) :is(.drawer__link, .drawer__group summary) { font-size: clamp(30px, 8.6vw, 50px); font-weight: 800; line-height: 1.4; }
.drawer__link[aria-current="page"] { color: var(--b2-on-deep); }
.drawer__group summary { list-style: none; cursor: pointer; }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary i { font-size: 22px; transition: transform .4s var(--ease); color: var(--b2); }
.drawer__group[open] summary i { transform: rotate(45deg); }
.drawer__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 0 16px; }
.drawer__sub a { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--on-deep-2); }
.drawer__sub a[aria-current="page"] { color: var(--cream); }
.drawer__sub i { color: var(--b2); }
.drawer__all { grid-column: 1 / -1; color: var(--cream) !important; }
.drawer__foot { display: grid; gap: 10px; margin-top: auto; }
.drawer__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--on-deep-2); padding-top: 8px; }
.drawer__meta a { min-height: 44px; display: inline-flex; align-items: center; }

/* page under the open drawer: locked (Lenis stopped by site.js), scrollbar gutter kept, header on top as the close bar */
html.drawer-open { overflow: hidden; scrollbar-gutter: stable; }
.drawer-open .mast { z-index: 75; pointer-events: none; }
.drawer-open .mast :is(.logo, .burger) { pointer-events: auto; }
.drawer-open .mast .logo { color: var(--cream); }
.drawer-open .mast .logo__word b, .drawer-open .mast .logo__core { color: var(--b2); fill: var(--b2); }
.drawer-open .mast .logo__moon { fill: var(--deep); }
.drawer-open .burger { background: var(--b2); }
.drawer-open .burger span { background: var(--ink); }
.drawer-open .mast__cta, .drawer-open .mast__lang { visibility: hidden; }
.drawer-open .mast__bar::before { opacity: 0; }

/* =====================================================================
   PRICE SLOTS — currency switching never moves layout
   Display price:  <b class="..." data-price="aed" data-amount="990">AED 990</b>
   Build output :  data-w="<widest of 10 variants>" style="--px-em:…"  +  <span class="px__v">AED 990</span>
   The ::after sizer reserves the widest variant (pseudo text: not in DOM text, crawlers read only the value);
   the value is absolutely positioned so it (and scramble frames) can never resize the box.
   Inline (in a sentence):  data-px="inline"  → nowrap, no reservation; site.js guards the paragraph height.
   ===================================================================== */
[data-price], [data-price-sub] { white-space: nowrap; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
/* a sub-line may carry an Arabic prefix/suffix ("السعر المعتمد:", "(السعر الثابت)"): on RTL pages the line itself reads
   right to left and site.js isolates only the price run (U+2066 LRI … U+2069 PDI), so "≈ AED 4,407" stays in order */
[dir="rtl"] [data-price-sub] { direction: rtl; }
[data-w]:not([data-px="inline"]) { position: relative; display: inline-block; vertical-align: baseline; text-align: start; }
:is(div, p, dd, dt, li)[data-w]:not([data-px="inline"]) { display: block; width: fit-content; max-width: 100%; }
[data-w]:not([data-px="inline"])::after { content: attr(data-w); visibility: hidden; display: inline-block; white-space: pre; pointer-events: none; speak: never; }
[data-w]:not([data-px="inline"]) > .px__v { position: absolute; inset-block-start: 0; left: 0; white-space: pre; }
/* align the value to the page's start edge (right in RTL), or to the end with .px--end */
[dir="rtl"] [data-w]:not([data-px="inline"]) > .px__v { left: auto; right: 0; }
.px--end[data-w] > .px__v, [data-px-align="end"][data-w] > .px__v { left: auto; right: 0; }
[dir="rtl"] .px--end[data-w] > .px__v, [dir="rtl"] [data-px-align="end"][data-w] > .px__v { right: auto; left: 0; }
.px--center[data-w] > .px__v { left: 50%; transform: translateX(-50%); }
[dir="rtl"] .px--center[data-w] > .px__v { right: auto; left: 50%; }
/* sub-price lines keep their box (and line) even when empty */
[data-price-sub][data-w][hidden] { display: inline-block; }
[data-price-sub].is-empty > .px__v { visibility: hidden; }
/* fit: in a container, shrink the font so the widest variant always fits (needs container-type on an ancestor) */
.px-fit { font-size: min(var(--px-fs, 1em), calc(var(--px-room, 100cqi) / var(--px-em, 6))); }
[data-px="inline"] { font-weight: inherit; }

/* =====================================================================
   FOOTER · purple band, service index, sitelinks, huge wordmark
   ===================================================================== */
.ft { background: var(--deep); color: var(--cream); padding-top: clamp(64px, 8vw, 110px); overflow: clip; --fg: var(--cream); --fg-2: var(--on-deep-2); --acc: var(--b2-on-deep); --rule: var(--line-deep); }
.ft a { text-decoration: none; }
.svcindex__head { margin-bottom: 18px; }
.svcindex__title, .sitelinks__title { font: 400 clamp(30px, 3.6vw, 52px)/1 var(--f-display); text-transform: var(--display-case); }
:root:lang(ar) :is(.svcindex__title, .sitelinks__title) { font-weight: 800; line-height: 1.3; font-size: clamp(28px, 3.2vw, 46px); }
.svcindex__sub { color: var(--on-deep-2); margin-top: 10px; max-width: 64ch; font-size: 15px; }
.svcindex__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 22px; }
.svcindex__chip { min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-deep); font-size: 13.5px; font-weight: 600; color: var(--on-deep-2); transition: background-color .3s, color .3s; }
.svcindex__chip:hover { color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--cream); }
.svcindex__chip.is-active { background: var(--b2); color: var(--ink); box-shadow: none; }
.svcindex__list { display: flex; flex-wrap: wrap; gap: 8px; }
.svcindex__item a, .svcindex__plain { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; background: color-mix(in oklab, var(--cream) 6%, transparent); font-size: 13.5px; color: var(--on-deep-2); }
.svcindex__item a { color: var(--cream); }
.svcindex__item a:hover { background: var(--cream); color: var(--deep); }
.svcindex__item.is-hidden { display: none; }
.svcindex__toggle { margin-top: 18px; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--cream); font-weight: 650; font-size: 14px; }
.svcindex__toggle:hover { background: var(--cream); color: var(--deep); }
html:not(.js) .svcindex__toggle { display: none; }
.sitelinks { margin-top: clamp(56px, 6vw, 88px); }
.sitelinks__rows { margin-top: 18px; border-top: 1px solid var(--line-deep); }
.sitelinks__row { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line-deep); font-size: 14px; }
.sitelinks__row strong { font-weight: 650; color: var(--cream); }
.sitelinks__row strong a:hover, .sitelinks__items a:hover { color: var(--b2-lite); }
.sitelinks__items { color: var(--on-deep-2); display: flex; flex-wrap: wrap; gap: 2px 8px; }
.sitelinks__items a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--line-deep); }
.sitelinks__sep { opacity: .5; }
.ft__grid { display: grid; grid-template-columns: 1fr; gap: 36px 24px; margin-top: clamp(56px, 6vw, 88px); }
.ft__brand { display: grid; gap: 16px; justify-items: start; }
.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.logo--ft { color: var(--cream); }
.logo--ft .logo__word b { color: var(--b2); }
.logo--ft .logo__core { fill: var(--b2); }
.logo--ft .logo__moon { fill: var(--deep); }
.ft__desc { color: var(--on-deep-2); max-width: 44ch; font-size: 15px; }
.ft__social { display: flex; gap: 8px; }
.ft__social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-deep); transition: background-color .3s, color .3s; }
.ft__social a:hover { background: var(--b2); color: var(--ink); box-shadow: none; }
.ft__meta { display: grid; gap: 4px; font-size: 14px; color: var(--on-deep-2); }
.ft__meta a, .ft__meta > span { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; }
.ft__meta i { color: var(--b2); }
.gps-badge img { width: 190px; height: auto; border-radius: 10px; }
.gps-badge--ar { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding-inline: 14px 18px; background: #000; border: 1px solid #8e918f; border-radius: 12px; color: #fff; font: 500 15px/1.3 var(--f-body); }
.gps-badge--ar img { width: 30px; height: 30px; border-radius: 0; flex: none; }
.gps-badge--ar span { white-space: nowrap; }
.ft__col { display: grid; gap: 2px; align-content: start; }
.ft__col h5 { font: 700 12.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--b2-lite); margin-bottom: 10px; }
:root:lang(ar) .ft__col h5 { letter-spacing: 0; font-size: 14px; line-height: 1.4; }
.ft__col a { color: var(--on-deep-2); font-size: 14.5px; min-height: 34px; display: inline-flex; align-items: center; transition: color .2s, transform .4s var(--ease); }
.ft__col a:hover { color: var(--cream); transform: translateX(calc(4px * var(--dir))); }
.ft__col a[aria-current="page"] { color: var(--cream); }
.ft__wordmark { margin-top: clamp(48px, 6vw, 90px); padding-inline: var(--g); text-align: center; line-height: .8; direction: ltr; }
.ft__wordmark span { display: inline-block; font: 400 calc((min(100vw, 1600px) - 2 * var(--g)) / 5.86)/.8 var(--f-num); text-transform: uppercase; color: var(--b2); white-space: nowrap; letter-spacing: 0; }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-block: 24px 30px; margin-top: 20px; border-top: 1px solid var(--line-deep); font-size: 13.5px; color: var(--on-deep-2); }
.ft__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ft__links a { min-height: 36px; display: inline-flex; align-items: center; }
.ft__links a:hover { color: var(--cream); }
.ft__status { display: inline-flex; align-items: center; gap: 8px; }
.ft__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b2); }

/* =====================================================================
   SIGNATURE LAYERS: tapes · marquee · ink canvas · card ring
   ===================================================================== */
.tapes { position: relative; height: clamp(120px, 14vw, 190px); overflow: clip; margin-top: -10px; }
.tape { position: absolute; left: -5%; width: 110%; top: 50%; overflow: hidden; padding: 12px 0; }
.tape--a { background: var(--deep); color: var(--cream); transform: translateY(-50%) rotate(calc(-3deg * var(--dir))); z-index: 1; }
.tape--b { background: var(--b2); color: var(--ink); transform: translateY(-50%) rotate(calc(2.4deg * var(--dir))); }
.tape__track { display: flex; width: max-content; animation: tape 38s linear infinite; }
.tape--b .tape__track { animation-direction: reverse; animation-duration: 44s; }
.tape__item { display: flex; align-items: center; gap: 26px; padding-inline-end: 26px; font: 400 clamp(22px, 2.6vw, 38px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .02em; white-space: nowrap; }
:root:lang(ar) .tape__item { letter-spacing: 0; font-weight: 800; font-size: clamp(20px, 2.3vw, 34px); line-height: 1.35; }
.tape__item i { width: .5em; height: .5em; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); flex: none; }
.tape--a .tape__item i { background: var(--b2); }
.tapes--single { height: auto; }
.tapes--single .tape { position: relative; left: 0; width: 100%; top: 0; transform: none; }
@keyframes tape { to { transform: translateX(calc(-50% * var(--dir))); } }
.is-paused .tape__track, .is-paused .marq span, .is-paused .proc__marq span { animation-play-state: paused; }
/* giant ghost marquee behind a section */
.marq { position: absolute; inset-inline: 0; top: 54%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; font: 400 clamp(120px, 22vw, 360px)/1 var(--f-display); text-transform: var(--display-case); color: color-mix(in oklab, var(--fg) 8%, transparent); overflow: hidden; }
:root:lang(ar) .marq { font-weight: 900; line-height: 1.3; }
.marq span { display: inline-block; animation: tape 60s linear infinite; padding-inline-end: .3em; }

/* WebGL ink: a decorative layer that always sits BEHIND the type (z 1). The poster paints it light
   enough that ink-coloured letters stay readable on top of it at every moment. */
.ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.ink.is-on { opacity: 1; }

/* card ring: two synced CSS-3D layers (far half behind the type, near half in front). site.js WSR.ring()
   drives --spin and fades a near card while it crosses the words listed in data-avoid.
   Any number of cards (5-12) spreads evenly: site.js writes --n-auto = card count on every .ring; a page may still set
   --n (fewer than the cards in the markup, e.g. 6 of 8 on phones) and site.js hides the extra cards (.rc--off). */
.ring { position: absolute; left: 50%; top: var(--ring-y, 50%); width: 0; height: 0; perspective: var(--persp); pointer-events: none; --R: 220px; --cw: 92px; --ch: calc(var(--cw) * 1.3); --persp: 1400px; --rx: -11deg; --rz: -6deg; }
[dir="rtl"] .ring { --rz: 6deg; }
.ring--back { z-index: 0; }
.ring--front { z-index: 4; }
.ring__layer { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateZ(var(--rz)) rotateX(calc(var(--rx) + var(--tilt, 0deg))) rotateY(var(--spin, 20deg)) scale(var(--ring-s, 1)); }
.rc { position: absolute; width: var(--cw); height: var(--ch); left: calc(var(--cw) / -2); top: calc(var(--ch) / -2); display: flex; flex-direction: column; gap: 4px; padding: 5px 5px 0; background: var(--paper); border-radius: 10px; transform: rotateY(calc(var(--i) * 360deg / var(--n, var(--n-auto, 6)))) translateZ(var(--R)); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 16px 28px -16px color-mix(in oklab, var(--ink) 70%, transparent); transition: opacity .35s linear; }
.ring--back .rc { transform: rotateY(calc(var(--i) * 360deg / var(--n, var(--n-auto, 6)))) translateZ(var(--R)) rotateY(180deg); }
.ring--back .rc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--b2); opacity: .32; }
.ring .rc.rc--off { display: none !important; }
/* no JS: no count yet, so a ring without its own --n shows the first 6 */
:where(html:not(.js) .ring) .rc:nth-child(n+7) { display: none; }
:where(html:not(.js) .ring:is([style*="--n:"], .ring--8)) .rc:nth-child(n+7) { display: flex; }
.rc__img { flex: 1; border-radius: 7px; overflow: hidden; background: var(--grad, var(--cream-2)); }
.rc__img img { width: 100%; height: 100%; object-fit: cover; }
.rc__name { font: 400 11px/1.6 var(--f-display); text-transform: var(--display-case); letter-spacing: .03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px 3px; }
:root:lang(ar) .rc__name { letter-spacing: 0; font-weight: 700; line-height: 1.7; }

/* =====================================================================
   COMPONENT · POSTER PAGE HERO (.ph)
   ===================================================================== */
.ph { position: relative; isolation: isolate; margin-top: calc(-1 * var(--nav-h)); padding-top: var(--nav-h); background: var(--b2); color: var(--ink); overflow: clip; border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px);
  --bg: var(--b2); --fg: var(--ink); --fg-2: var(--hot-2); --acc: var(--deep); --rule: color-mix(in oklab, var(--ink) 22%, transparent); }
.ph--deep { background: var(--deep); color: var(--cream); --bg: var(--deep); --fg: var(--cream); --fg-2: var(--on-deep-2); --acc: var(--b2-on-deep); --rule: var(--line-deep);
  --wash-1: color-mix(in oklab, var(--brand-2) 70%, var(--deep)); --wash-2: color-mix(in oklab, var(--brand-1) 70%, var(--deep)); }
.ph__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(55% 60% at 12% 8%, color-mix(in oklab, var(--b2) 72%, white) 0, transparent 70%), radial-gradient(60% 70% at 96% 104%, color-mix(in oklab, var(--b2) 80%, var(--b1)) 0, transparent 72%), var(--b2); }
.ph--deep .ph__bg { background: radial-gradient(55% 60% at 88% 0%, color-mix(in oklab, var(--b1) 70%, var(--deep)) 0, transparent 70%), radial-gradient(50% 60% at 0% 100%, color-mix(in oklab, var(--b2) 30%, var(--deep)) 0, transparent 72%), var(--deep); }
/* perf 2026-11-11: the grain is painted through -webkit-cross-fade() (100% = exactly the first image, pixel-identical), a
   generated image that Chrome does not report as an LCP candidate: the hero text stays the LCP element. The plain url()
   before it is the fallback where cross-fade() is unsupported (Firefox). */
.ph__bg::after { content: ""; position: absolute; inset: 0; opacity: .16; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-image: -webkit-cross-fade(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), 100%); }
.ph--deep .ph__bg::after { mix-blend-mode: soft-light; opacity: .22; }
.ph__in { position: relative; z-index: 2; display: grid; gap: clamp(18px, 2.4vw, 28px); padding-block: clamp(20px, 4vh, 48px) clamp(32px, 5vw, 72px); }
.ph__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: end; }
.ph__copy { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; min-width: 0; }
.ph__title { position: relative; z-index: 2; font: 400 clamp(40px, 12.5vw, 168px)/.88 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg); text-wrap: pretty; overflow-wrap: break-word; max-width: 100%; }
.ph__title--long { font-size: clamp(38px, 8.2vw, 120px); }
.ph__title--xl { font-size: clamp(56px, 15vw, 220px); line-height: .84; }
.ph__title em { font-size: 1.04em; line-height: .9; color: var(--fg); }
.ph__title .chip-word { display: inline-block; font-family: var(--f-serif); font-style: var(--accent-style); text-transform: none; color: var(--cream); background: var(--b1-solid); padding: .02em .16em .1em .12em; border-radius: .14em; line-height: 1; letter-spacing: -.01em; }
.ph--deep .ph__title .chip-word { background: var(--b2); color: var(--ink); }
:root:lang(ar) .ph__title { font-weight: 800; line-height: 1.18; font-size: clamp(38px, 11vw, 132px); }
:root:lang(ar) .ph__title--long { font-size: clamp(32px, 8.4vw, 100px); line-height: 1.25; }
:root:lang(ar) .ph__title--xl { font-size: clamp(44px, 12vw, 168px); }
:root:lang(ar) .ph__title em, :root:lang(ar) .ph__title .chip-word { font-weight: 700; line-height: 1.1; }
.ph__lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; font-weight: 500; max-width: 32em; color: var(--fg); }
.ph__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; }
/* motion slot: a self-contained mini card ring orbiting a decorative core (numeral / short word) */
.ph__slot { position: relative; z-index: 2; min-height: clamp(210px, 30vw, 430px); pointer-events: none; display: grid; place-items: center; }
.ph__slot .ring { --ring-y: 50%; --R: clamp(96px, 13vw, 200px); --cw: clamp(62px, 6.6vw, 108px); --ch: calc(var(--cw) * 1.3); --persp: 1300px; --rx: -12deg; }
.ph__slot .ring--back { z-index: 0; }
.ph__slot .ring--front { z-index: 3; }
.ph__core { position: relative; z-index: 1; font: 400 clamp(110px, 17vw, 260px)/.8 var(--f-num); color: transparent; -webkit-text-stroke: 2px var(--fg); direction: ltr; user-select: none; }
.ph__core b { position: absolute; inset: 0; color: var(--acc); -webkit-text-stroke: 0; font-weight: inherit; clip-path: inset(calc((1 - var(--fill, .55)) * 100%) 0 0 0); }
.ph__core--word { font-size: clamp(64px, 9vw, 140px); }
:root:lang(ar) .ph__core--word { font: 900 clamp(54px, 8vw, 120px)/1.2 var(--f-display); }
.ph .ink { z-index: 1; }
.ph .ring--back { z-index: 1; }
.ph .ring--front { z-index: 3; }
.ph .ph__copy > :not(.ph__title) { position: relative; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .ph__title { animation: lineIn 1.1s var(--ease) both; }
  .ph__copy > :not(.ph__title):not(.crumbs) { animation: footIn 1.2s .2s var(--ease) both; }
}
@keyframes lineIn { from { transform: translateY(.18em) skewY(4deg); } }
@keyframes footIn { from { transform: translateY(26px); } }

/* breadcrumbs (visible; must mirror the page's BreadcrumbList JSON-LD) */
.crumbs { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(calc(45deg * var(--dir))); opacity: .55; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { opacity: .8; }

/* chip / meta pills used in heroes */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 10%, transparent); font-weight: 600; font-size: 14px; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b1-solid); box-shadow: 0 0 0 3px color-mix(in oklab, var(--b1-solid) 25%, transparent); }
.band--deep .pill__dot, .ph--deep .pill__dot { background: var(--b2); }

/* =====================================================================
   COMPONENT · STAT LEDGER
   ===================================================================== */
.ledger { padding-top: clamp(28px, 4vw, 56px); }
.ledger__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.ledger__item { position: relative; padding: 6px clamp(14px, 2vw, 30px) 4px; min-width: 0; }
.ledger__item::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); transform-origin: top; transform: scaleY(var(--ln, 1)); }
.ledger__num { font: 400 clamp(52px, 7vw, 112px)/.88 var(--f-num); text-transform: uppercase; display: flex; align-items: baseline; gap: .1em; color: var(--fg); white-space: nowrap; }
.ledger__num small { font: 600 15px/1 var(--f-body); text-transform: none; color: var(--fg-2); letter-spacing: 0; }
.ledger__item dd { margin-top: 14px; color: var(--fg-2); font-size: 15px; line-height: 1.45; max-width: 24ch; }
.ledger__item--price .ledger__num { font-size: clamp(36px, 4.9vw, 80px); color: var(--acc); }

/* =====================================================================
   COMPONENT · TICKET (package with giant numeral, price, features)
   ===================================================================== */
.pk__grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.tk { --tk-fg: var(--ink); --tk-fg2: var(--ink-2); --tk-rule: var(--line); --tk-hole: var(--bg, var(--cream)); --fg: var(--ink); position: relative; background: var(--paper); color: var(--tk-fg); border-radius: var(--r-lg); padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 16px; transform-origin: 50% 0; box-shadow: 0 0 0 1px var(--line); container-type: inline-size; isolation: isolate; overflow: clip; overflow-clip-margin: 20px; }
.tk--hot { background: var(--b2); --tk-fg2: var(--hot-2); --tk-rule: color-mix(in oklab, var(--ink) 25%, transparent); box-shadow: 0 34px 60px -34px color-mix(in oklab, var(--b2-ink) 90%, transparent); }
.tk--deep { background: var(--deep); --tk-fg: var(--cream); --tk-fg2: var(--on-deep-2); --tk-rule: var(--line-deep); --fg: var(--cream); box-shadow: none; }
.band--deep .tk--deep { box-shadow: 0 0 0 1px var(--line-deep); }
.tk__num { position: absolute; z-index: -1; inset-inline-end: 14px; top: 12px; font: 400 clamp(120px, 40cqi, 230px)/.78 var(--f-num); color: color-mix(in oklab, var(--tk-fg) 5%, transparent); -webkit-text-stroke: 2px color-mix(in oklab, var(--tk-fg) 20%, transparent); pointer-events: none; user-select: none; }
.tk__flag { position: absolute; top: 14px; inset-inline-end: 18px; padding: 7px 14px; border-radius: 999px; background: var(--deep); color: var(--cream); font-weight: 700; font-size: 13px; transform: rotate(calc(3deg * var(--dir))); z-index: 2; }
.tk--deep .tk__flag { background: var(--b2); color: var(--ink); }
.tk__head { display: grid; gap: 10px; }
.tk__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: color-mix(in oklab, var(--tk-fg) 10%, transparent); }
.tk__name { font: 400 clamp(28px, 2.5vw, 36px)/1 var(--f-display); text-transform: var(--display-case); }
:root:lang(ar) .tk__name { font-weight: 800; line-height: 1.3; font-size: clamp(24px, 2.2vw, 32px); }
.tk__for { font-size: 14.5px; color: var(--tk-fg2); line-height: 1.45; }
.tk__price { margin-top: 6px; container-type: inline-size; }
.tk__label { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tk-fg2); }
:root:lang(ar) .tk__label { letter-spacing: 0; font-size: 13px; }
.tk__amount { display: block; font: 400 min(clamp(48px, 6.2vw, 96px), calc(100cqi / var(--px-em, 5.6)))/.95 var(--f-num); letter-spacing: .005em; white-space: nowrap; margin-top: 6px; }
.tk--paper .tk__amount { color: var(--b1-accent); }
.tk--deep .tk__amount { color: var(--b2-on-deep); }
.tk__approx { display: block; font-size: 13px; line-height: 1.45; min-height: 1.45em; color: var(--tk-fg2); margin-top: 4px; }
.tk__tear { position: relative; height: 0; border-top: 2px dashed var(--tk-rule); margin: 6px calc(-1 * clamp(22px, 2.2vw, 30px)); }
.tk__tear::before, .tk__tear::after { content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--tk-hole); }
.tk__tear::before { inset-inline-start: -14px; } .tk__tear::after { inset-inline-end: -14px; }
/* details: <details class="tk__body"><summary class="tk__toggle">… (native, indexable, keyboard + no-JS ready) */
.tk__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; font-weight: 650; padding: 0 2px; width: 100%; cursor: pointer; list-style: none; }
.tk__toggle::-webkit-details-marker { display: none; }
.tk__toggle i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--tk-rule); transition: transform .4s var(--ease); }
.tk__toggle[aria-expanded="true"] i, .tk__body[open] > .tk__toggle i { transform: rotate(180deg); }
.tk__body[hidden] { display: none; }
.tk__inner { display: grid; gap: 14px; }
details.tk__body > .tk__inner { padding-top: 10px; }
/* the unfold plays only when a visitor opens it (site.js adds .is-anim): a details that is open in the HTML is never
   held at opacity 0 — not without JS, not in a crawler render */
html.js .tk__body.is-anim .tk__inner, html.js details.tk__body.is-anim[open] > .tk__inner { animation: unfold .6s var(--ease) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(-10px); } }
.tk__summary { font-weight: 600; }
.tk__list { display: grid; gap: 8px; font-size: 14.5px; }
.tk__list li { display: flex; gap: 10px; line-height: 1.45; }
.tk__list i { color: var(--b1-ink); flex: none; }
.tk--hot .tk__list i { color: var(--deep); }
.tk--deep .tk__list i { color: var(--b2); }
.tk__excl summary { cursor: pointer; font-weight: 650; font-size: 14px; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: .25em; }
.tk__excl ul { display: grid; gap: 4px; font-size: 14px; color: var(--tk-fg2); padding-inline-start: 18px; list-style: disc; }
.tk__meta { display: grid; gap: 6px; font-size: 13px; color: var(--tk-fg2); }
.tk__meta span { display: flex; gap: 8px; }
.tk__cta { display: grid; gap: 10px; margin-top: auto; padding-top: 4px; }
.tk__cta .button { width: 100%; }
.tk--hot .button--line { color: var(--ink); }
.tk--deep .button--line { color: var(--cream); }
.pk__note { margin: 36px auto 0; font-size: 14.5px; color: var(--fg-2); text-align: center; max-width: 76ch; }
.pk__note a { color: var(--acc); font-weight: 600; }

/* price list (custom projects) */
.custom { margin-top: clamp(48px, 6vw, 88px); border-top: 3px solid var(--fg); padding-top: 26px; }
.custom__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; align-items: flex-end; margin-bottom: 18px; }
.custom__title { font: 400 clamp(30px, 3.4vw, 48px)/1 var(--f-display); text-transform: var(--display-case); }
:root:lang(ar) .custom__title { font-weight: 800; line-height: 1.3; }
.custom__text { color: var(--fg-2); margin-top: 10px; max-width: 60ch; font-size: 15px; }
.custom__side { display: grid; justify-items: end; gap: 4px; }
.price-note { font-size: 13.5px; color: var(--fg-2); }
.custom__grid { display: grid; grid-template-columns: 1fr; column-gap: 48px; }
.custom__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; position: relative; }
.custom__item > * { transition: translate .45s var(--ease); }
.custom__item:hover .custom__ico, .custom__item:hover .custom__main { translate: calc(8px * var(--dir)) 0; }
.custom__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cream-2); color: var(--b1-ink); font-size: 17px; transition: background-color .3s, color .3s; }
.custom__item:hover .custom__ico { background: var(--b1-solid); color: var(--cream); }
.custom__main { display: grid; gap: 3px; }
.custom__name { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.custom__desc { font-size: 14px; color: var(--fg-2); line-height: 1.45; }
.custom__note { font-size: 12.5px; font-weight: 600; color: var(--b2-ink); }
.band--deep .custom__note { color: var(--b2-lite); }
.custom__price { text-align: end; display: grid; justify-items: end; }
.custom__price > span:not([data-price]):not([data-price-sub]) { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
:root:lang(ar) .custom__price > span:not([data-price]):not([data-price-sub]) { letter-spacing: 0; font-size: 12px; }
.custom__price b { font: 400 clamp(20px, 1.8vw, 26px)/1.05 var(--f-num); white-space: nowrap; }
.custom__ref { font-size: 12px; color: var(--fg-2); }
html.js .custom__grid:not(.is-open) .custom__item:nth-child(n+7) { display: none; }
.custom__more { display: flex; margin: 24px auto 0; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 650; box-shadow: inset 0 0 0 1.5px var(--fg); transition: background-color .3s, color .3s; }
.custom__more:hover { background: var(--fg); color: var(--bg); }
.custom__more i { transition: transform .4s var(--ease); }
.custom__more[aria-expanded="true"] i { transform: rotate(180deg); }
html:not(.js) .custom__more { display: none; }

/* =====================================================================
   COMPONENT · CARD GRID (.cards / .sc) and FEATURE ROWS (.feat)
   ===================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.sc { position: relative; }
.sc__a { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--paper); color: var(--ink); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease), box-shadow .4s; position: relative; }
.sc__a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 26px 40px -26px color-mix(in oklab, var(--ink) 55%, transparent); }
.sc__img { display: block; height: 104px; overflow: hidden; background: var(--cream-2); }
.sc__img--tall { height: auto; aspect-ratio: 16 / 10; }
.sc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sc__a:hover .sc__img img { transform: scale(1.07); }
.sc__body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; }
.sc h3, .sc .sc__title { font: 400 24px/1 var(--f-display); text-transform: var(--display-case); padding-inline-end: 30px; }
:root:lang(ar) :is(.sc h3, .sc .sc__title) { font-weight: 800; font-size: 21px; line-height: 1.35; }
.sc p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.sc__meta { font-size: 12.5px; font-weight: 650; color: var(--b2-ink); }
.sc__go { position: absolute; top: 80px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease), background-color .3s, color .3s; }
.sc__img--tall ~ .sc__go { top: 14px; }
.sc__a:hover .sc__go { transform: rotate(calc(45deg * var(--dir))); background: var(--b1-solid); color: var(--cream); }
.feat { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid var(--rule); }
.feats .feat:last-child { border-bottom: 1px solid var(--rule); }
.feat__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 20px; }
.feat h3, .feat h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
:root:lang(ar) :is(.feat h3, .feat h4) { letter-spacing: 0; line-height: 1.5; }
.feat p { color: var(--fg-2); margin-top: 6px; font-size: 15.5px; }
.feat--card { border: 0; padding: 18px; border-radius: 20px; background: var(--deep-2); box-shadow: inset 0 0 0 1px var(--line-deep); }

/* =====================================================================
   COMPONENT · BIG-TYPE LIST with cursor-follow image (.ind)
   touch / no-hover: the row nearest the screen centre lights up (scroll equivalent)
   ===================================================================== */
.ind__list { border-top: 2px solid var(--fg); }
.ind__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "th name" "th desc"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: opacity .35s; }
.ind__thumb { grid-area: th; width: 64px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--cream-2); transform: scale(.82); transition: transform .6s var(--ease); }
.ind__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.25); transition: filter .5s; }
.ind__name { grid-area: name; font: 400 clamp(28px, 7.6vw, 92px)/.98 var(--f-display); text-transform: var(--display-case); color: var(--fg); transition: color .35s, translate .6s var(--ease); overflow-wrap: anywhere; }
:root:lang(ar) .ind__name { font-weight: 800; line-height: 1.3; font-size: clamp(26px, 6vw, 76px); }
.ind__desc { grid-area: desc; font-size: 14px; color: var(--fg-2); line-height: 1.4; }
.ind__go { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 16px; transition: background-color .3s, color .3s, transform .5s var(--ease); }
.ind__row.is-link .ind__name, .ind__row.is-link .ind__desc { padding-inline-end: 52px; }
.ind__row.is-on .ind__thumb { transform: scale(1); }
.ind__row.is-on .ind__thumb img { filter: none; }
.ind__row.is-on .ind__name { color: var(--acc); }
.ind__row.is-on .ind__go { background: var(--b1-solid); color: var(--cream); box-shadow: none; transform: rotate(calc(45deg * var(--dir))); }
.band--deep .ind__row.is-on .ind__go { background: var(--b2); color: var(--ink); }
.ind__float { position: fixed; left: 0; top: 0; width: clamp(240px, 22vw, 340px); aspect-ratio: 16 / 11; z-index: 30; pointer-events: none; display: none; }
.ind__float-in { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; transform: scale(.9); opacity: 0; transition: transform .55s var(--ease), opacity .3s; box-shadow: 0 30px 60px -24px color-mix(in oklab, var(--ink) 60%, transparent); }
.ind__float.is-on .ind__float-in { transform: scale(1); opacity: 1; }
.ind__float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.ind__float img.is-on { opacity: 1; }

/* =====================================================================
   COMPONENT · BIG-TYPE ACCORDION (<details>, content stays in the DOM)
   ===================================================================== */
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font-size: clamp(19px, 1.9vw, 27px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; transition: color .3s; }
:root:lang(ar) .faq__q { letter-spacing: 0; line-height: 1.55; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--acc); }
.faq__icon { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 18px; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--b2); color: var(--ink); box-shadow: none; }
.band--hot .faq__item[open] .faq__icon { background: var(--deep); color: var(--cream); }
.faq__a { padding-block: 0 26px; padding-inline: 0 64px; color: var(--fg-2); font-size: 16.5px; max-width: 70ch; }
.faq__a p + p { margin-top: .8em; }
html.js .faq__item.is-anim[open] .faq__a { animation: unfold .55s var(--ease) both; }   /* only when opened by a visitor (see .tk__body) */
.faq--mega .faq__q { font: 400 clamp(28px, 4.2vw, 60px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
:root:lang(ar) .faq--mega .faq__q { font-weight: 800; line-height: 1.35; font-size: clamp(24px, 3.4vw, 48px); }

/* =====================================================================
   COMPONENT · GIANT-NUMERAL STEPS (.proc)
   ===================================================================== */
.proc { overflow: clip; }
.proc__pin { position: relative; }
.proc__marq { position: absolute; inset-inline: 0; top: 54%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; font: 400 clamp(120px, 22vw, 360px)/1 var(--f-display); text-transform: var(--display-case); color: color-mix(in oklab, var(--fg) 8%, transparent); }
:root:lang(ar) .proc__marq { font-weight: 900; line-height: 1.3; }
.proc__marq span { display: inline-block; animation: tape 60s linear infinite; padding-inline-end: .3em; }
.proc__head { position: relative; display: grid; gap: 18px; margin-bottom: 40px; }
.proc__view { position: relative; }
.proc__steps { display: grid; gap: 34px; padding-inline: var(--g); max-width: calc(var(--max) + 2 * var(--g)); margin-inline: auto; }
.proc__step { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 2px solid var(--fg); }
.proc__num { position: relative; display: block; font: 400 clamp(150px, 20vw, 300px)/.8 var(--f-num); color: transparent; -webkit-text-stroke: 2px var(--fg); margin-bottom: 8px; width: fit-content; direction: ltr; }
.proc__num::after { content: attr(data-n); position: absolute; inset: 0; color: var(--acc); -webkit-text-stroke: 0; clip-path: inset(calc((1 - var(--fill, 1)) * 100%) 0 0 0); }
.band--hot .proc__num::after { color: var(--deep); }
.proc__step h3 { font: 400 clamp(28px, 2.6vw, 40px)/1 var(--f-display); text-transform: var(--display-case); }
:root:lang(ar) .proc__step h3 { font-weight: 800; line-height: 1.35; }
.proc__step p { color: var(--fg-2); font-size: 16px; max-width: 40ch; }
.proc--sm .proc__num { font-size: clamp(110px, 13vw, 190px); }

/* =====================================================================
   COMPONENT · CURVED DRIFTING REEL (.ribbon / .fr)
   ===================================================================== */
.ribbon { position: relative; }
.ribbon__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--g) 18px; scrollbar-width: none; }
.ribbon__track::-webkit-scrollbar { display: none; }
.fr { flex: 0 0 min(78vw, 420px); scroll-snap-align: center; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .6); }
.fr__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 18px; background: var(--deep-2) var(--bg) center / cover; font-size: 12px; overflow: hidden; }
.fr__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr__cap { display: grid; gap: 4px; padding: 16px 18px 18px; }
.fr__cap strong { font: 400 24px/1 var(--f-display); text-transform: var(--display-case); }
:root:lang(ar) .fr__cap strong { font-weight: 800; line-height: 1.35; font-size: 21px; }
.fr__cap span { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
/* 3D reel layout is applied by CSS from the first paint (html.js), so site.js only sets transforms: no layout shift.
   Default: 3D at >= 1024 px only; below that the reel stays the native swipe rail (scroll-snap, no 3D, the .rbtn
   buttons scroll it). data-ribbon="always" keeps the 3D reel at every width. A viewport taller than 1500 px (crawler
   render) also keeps the rail: the 3D reel hides the cards turned away from the viewer. */
@media (min-width: 1024px) and (max-height: 1500px) {
  html.js .ribbon[data-ribbon] { --fw: clamp(360px, 29vw, 440px); height: var(--rh, calc(var(--fw) * .625 + 136px)); perspective: 1500px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; }
  html.js .ribbon[data-ribbon] .ribbon__track { display: block; overflow: visible; padding: 0; position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d; }
  html.js .ribbon[data-ribbon] .fr { position: absolute; top: 16px; left: calc(var(--fw) / -2); width: var(--fw); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}
html.js .ribbon[data-ribbon="always"], .ribbon.is-3d { --fw: min(74vw, 300px); height: var(--rh, calc(var(--fw) * .625 + 136px)); perspective: 1500px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; }
@media (min-width: 640px) { html.js .ribbon[data-ribbon="always"], .ribbon.is-3d { --fw: 340px; } }
@media (min-width: 1024px) { html.js .ribbon[data-ribbon="always"], .ribbon.is-3d { --fw: clamp(360px, 29vw, 440px); } }
.ribbon.is-3d:active { cursor: grabbing; }
html.js .ribbon[data-ribbon="always"] .ribbon__track, .ribbon.is-3d .ribbon__track { display: block; overflow: visible; padding: 0; position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d; }
html.js .ribbon[data-ribbon="always"] .fr, .ribbon.is-3d .fr { position: absolute; top: 16px; left: calc(var(--fw) / -2); width: var(--fw); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ribbon.is-3d .fr img, .ribbon.is-3d .fr * { -webkit-user-drag: none; }
.rbtn { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--fg); font-size: 18px; transition: background-color .3s, color .3s; }
.rbtn:hover { background: var(--b2); color: var(--ink); box-shadow: none; }
.reel__ctrl { display: flex; gap: 8px; }

/* =====================================================================
   COMPONENT · CHIPS / FILTER TABS (show/hide content already in the DOM)
   ===================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.filter { min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 14px; font-weight: 650; color: var(--fg-2); transition: background-color .3s, color .3s, box-shadow .3s; }
.filter:hover { color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.filter[aria-pressed="true"], .filter[aria-selected="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.filter__n { font: 400 .9em var(--f-num); opacity: .7; margin-inline-start: 4px; }
[data-filter-item].is-filtered { display: none; }
html:not(.js) .filters { display: none; }
.chip { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: color .3s; min-height: 44px; }
.chip__code { font: 700 11.5px var(--f-body); letter-spacing: .06em; padding: 5px 8px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--acc); min-width: 44px; text-align: center; }
.chip__name { font: 400 clamp(32px, 4.6vw, 64px)/1 var(--f-display); text-transform: var(--display-case); transition: transform .5s var(--ease); }
:root:lang(ar) .chip__name { font-weight: 800; line-height: 1.35; }
.chip i { margin-inline-start: auto; font-size: 20px; transition: transform .5s var(--ease); }
.chip:hover { color: var(--acc); }
.chip:hover .chip__name { transform: translateX(calc(10px * var(--dir))) skewX(calc(-6deg * var(--dir))); }
.chip:hover i { transform: rotate(calc(45deg * var(--dir))); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 8%, transparent); font-size: 12.5px; font-weight: 650; }

/* =====================================================================
   COMPONENT · CTA PANEL (.midcta) and FINAL STATEMENT (.final)
   ===================================================================== */
.midcta { padding-bottom: var(--sec); }
.midcta__card { position: relative; display: grid; gap: 32px; align-items: center; background: var(--b2); color: var(--ink); border-radius: clamp(28px, 4vw, 48px); padding: clamp(26px, 5vw, 72px); overflow: clip; --fg: var(--ink); --fg-2: var(--hot-2); --bg: var(--b2); --acc: var(--deep); }
.midcta__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 0% 100%, color-mix(in oklab, var(--b2) 70%, var(--b1)) 0, transparent 70%), radial-gradient(40% 50% at 100% 0%, var(--hot-lite) 0, transparent 70%); pointer-events: none; }
.midcta__card--deep { background: var(--deep); color: var(--cream); --fg: var(--cream); --fg-2: var(--on-deep-2); --bg: var(--deep); --acc: var(--b2-on-deep); }
.midcta__card--deep::before { background: radial-gradient(50% 70% at 100% 100%, color-mix(in oklab, var(--b1) 60%, var(--deep)) 0, transparent 70%); }
.midcta__vis { position: relative; display: grid; place-items: center; }
.midcta__copy { position: relative; display: grid; gap: 18px; justify-items: start; }
.midcta__ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--deep); color: var(--b2); font-size: 24px; }
.midcta__card--deep .midcta__ico { background: var(--b2); color: var(--ink); }
.midcta__title { font-size: clamp(2.4rem, 5vw, 5rem); }
.midcta__copy p:not(.headline) { font-size: 17px; max-width: 46ch; color: var(--fg-2); }
.final { position: relative; isolation: isolate; background: var(--b2); color: var(--ink); overflow: clip; padding-block: clamp(72px, 10vw, 150px) clamp(48px, 6vw, 90px); --fg: var(--ink); --bg: var(--b2); --acc: var(--deep); }
.final::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 60% at 90% 0%, var(--hot-lite) 0, transparent 70%), radial-gradient(60% 80% at 0% 100%, var(--hot-dark) 0, transparent 70%); opacity: .7; }
.final__type { position: relative; z-index: 2; --W: min(100vw - 2 * var(--g), 1360px); }
.final__title { width: var(--W); margin: 0 auto; font-family: var(--f-display); font-weight: 400; text-transform: var(--display-case); color: var(--ink); }
.final__title .l { display: block; white-space: nowrap; }
.final__title .f1 { font-size: calc(var(--W) / 5.33); line-height: .88; }
.final__title .f2 { font-size: calc(var(--W) / 4.36); line-height: .88; }
.final__title .f3 { font-size: calc(var(--W) / 6.25); line-height: 1.05; }
.final__title .f3 em { font-size: 1em; line-height: 1; color: var(--deep); padding-inline-end: .06em; }
:root:lang(ar) .final__title { font-weight: 900; }
:root:lang(ar) .final__title .l { white-space: normal; line-height: 1.22; font-size: clamp(46px, 11.5vw, 176px); }
:root:lang(ar) .final__title .f3 { font-size: clamp(42px, 9.5vw, 150px); }
:root:lang(ar) .final__title .f3 em { line-height: 1.15; }
.final .ink { z-index: 1; }
.final__side { position: relative; z-index: 4; display: grid; gap: 22px; margin-top: clamp(28px, 4vw, 56px); }
.final__body { font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; max-width: 44ch; }
.final__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* =====================================================================
   COMPONENT · LONG-FORM PROSE
   ===================================================================== */
.prose { max-width: 70ch; font-size: clamp(16.5px, 1.15vw, 18px); line-height: 1.7; color: var(--fg); }
:root:lang(ar) .prose { line-height: 1.9; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font: 400 clamp(30px, 3.6vw, 52px)/.98 var(--f-display); text-transform: var(--display-case); margin-top: 1.6em; }
.prose h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.25; margin-top: 1.6em; }
:root:lang(ar) .prose h2 { font-weight: 800; line-height: 1.3; }
:root:lang(ar) .prose h3 { line-height: 1.5; }
.prose p, .prose li { color: var(--fg-2); }
.prose a { color: var(--acc); font-weight: 600; text-decoration-thickness: 1.5px; }
.prose ul { list-style: disc; padding-inline-start: 1.3em; display: grid; gap: .45em; }
.prose ol { list-style: decimal; padding-inline-start: 1.3em; display: grid; gap: .45em; }
.prose li::marker { color: var(--acc); }
.prose blockquote { padding-inline-start: 1em; border-inline-start: 1px solid var(--rule); font: 400 clamp(22px, 2.2vw, 30px)/1.3 var(--f-serif); font-style: var(--accent-style); color: var(--fg); }
.prose strong { color: var(--fg); }
.prose code { font: .9em var(--f-mono); color: inherit; background: color-mix(in oklab, var(--fg) 8%, transparent); padding: .1em .35em; border-radius: 6px; }
.prose figure img { border-radius: 18px; width: 100%; }
.prose figcaption { font-size: 13.5px; color: var(--fg-2); margin-top: 8px; }
.prose .callout { padding: 18px 20px; border-radius: 18px; background: var(--cream-2); color: var(--ink); }
.toc { display: grid; gap: 2px; font-size: 14.5px; }
.toc a { display: flex; min-height: 40px; align-items: center; text-decoration: none; color: var(--fg-2); border-inline-start: 2px solid var(--rule); padding-inline-start: 14px; }
.toc a:hover, .toc a.is-on { color: var(--fg); border-inline-start-color: var(--acc); }

/* =====================================================================
   COMPONENT · COMPARISON TABLE (scrolls inside its own box on small screens)
   ===================================================================== */
.cmp-wrap { overflow-x: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--rule); background: var(--paper); color: var(--ink); overscroll-behavior-x: contain; }
.cmp { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.cmp caption { text-align: start; padding: 18px 20px 6px; font-weight: 700; caption-side: top; }
.cmp th, .cmp td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font: 400 clamp(18px, 1.6vw, 24px)/1.1 var(--f-display); text-transform: var(--display-case); background: var(--cream-2); position: sticky; top: 0; }
:root:lang(ar) .cmp thead th { font-weight: 800; line-height: 1.5; font-size: 17px; }
.cmp tbody th { font-weight: 650; color: var(--ink); }
.cmp td { color: var(--ink-2); }
.cmp .is-hl { background: color-mix(in oklab, var(--b2) 14%, var(--paper)); }
.cmp thead .is-hl { background: var(--b2); color: var(--ink); }
.cmp .yes, .cmp .no { font-size: 18px; }
.cmp .yes { color: var(--b1-ink); }
.cmp .no { color: color-mix(in oklab, var(--ink) 40%, transparent); }
.cmp tr:last-child > * { border-bottom: 0; }
/* small screens: each row becomes a card-row (label from td[data-label]); prices shrink to fit their cell */
@media (max-width: 639px) {
  .cmp-wrap { overflow: visible; }
  .cmp { min-width: 0; display: block; }
  .cmp caption { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tbody { display: block; }
  .cmp tr { display: grid; grid-template-columns: repeat(var(--cmp-cols, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .cmp tr:last-child { border-bottom: 0; }
  .cmp tbody th { grid-column: 1 / -1; padding: 12px 14px 2px; border: 0; }
  .cmp td { border: 0; padding: 4px 14px 12px; container-type: inline-size; min-width: 0; }
  .cmp td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 2px; }
  .cmp td [data-price] { font-size: min(1em, calc(100cqi / var(--px-em, 6))); }
}

/* =====================================================================
   COMPONENT · FORMS
   ===================================================================== */
.form { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 8px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px color-mix(in oklab, var(--ink) 50%, transparent); --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); }
.form__row { display: grid; gap: 8px 22px; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { position: relative; display: block; padding-top: 14px; }
.field input, .field textarea, .field select { width: 100%; border: 0; border-bottom: 1.5px solid color-mix(in oklab, var(--ink) 30%, transparent); background: transparent; padding: 18px 0 10px; font: 500 17px/1.4 var(--f-body); color: var(--ink); border-radius: 0; outline: none; resize: vertical; }
.field select { appearance: none; padding-inline-end: 30px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 12px) 62%, calc(100% - 6px) 62%; background-size: 6px 6px; background-repeat: no-repeat; }
/* RTL: the two half-chevrons keep their order (left half first), just moved to the inline end */
[dir="rtl"] .field select { background-position: 6px 62%, 12px 62%; }
.field textarea { min-height: 130px; }
.field > span { position: absolute; inset-inline-start: 0; top: 32px; font-size: 16px; color: var(--ink-2); pointer-events: none; transform-origin: 0 0; transition: transform .4s var(--ease), color .3s; }
[dir="rtl"] .field > span { transform-origin: 100% 0; }
.field::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--b1-solid); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
[dir="rtl"] .field::after { transform-origin: right; }
.field--area::after { bottom: 6px; }
.field:focus-within::after { transform: scaleX(1); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field textarea:focus + span, .field textarea:not(:placeholder-shown) + span,
.field--select > span, .field--static > span { transform: translateY(-22px) scale(.8); color: var(--b1-ink); }
.field__hint, .field__err { display: block; font-size: 13px; margin-top: 6px; min-height: 1.2em; }
.field__hint { color: var(--ink-2); }
.field__err { color: var(--b2-ink); font-weight: 600; }
.field:not(.is-error) .field__err { display: none; }
.field.is-error input, .field.is-error textarea, .field.is-error select { border-bottom-color: var(--b2-ink); }
.field.is-error > span { color: var(--b2-ink); }
.field.is-ok input, .field.is-ok textarea { border-bottom-color: color-mix(in oklab, var(--b1-ink) 70%, transparent); }
.field input:disabled, .field textarea:disabled { opacity: .5; cursor: not-allowed; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-block: 10px; font-size: 15px; cursor: pointer; }
.check input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 45%, transparent); display: grid; place-items: center; transition: background-color .25s, box-shadow .25s; cursor: pointer; }
.check input::after { content: ""; width: 10px; height: 6px; border-inline-start: 2px solid var(--cream); border-bottom: 2px solid var(--cream); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
[dir="rtl"] .check input::after { transform: translateY(-1px) rotate(45deg) scale(0); }
.check input:checked { background: var(--b1-solid); box-shadow: none; }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
[dir="rtl"] .check input:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.check input:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 10px 0 0; }
.choice legend { float: none; width: 100%; font-size: 14px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; font-weight: 600; transition: background-color .25s, color .25s; }
.choice input:checked + span { background: var(--ink); color: var(--cream); box-shadow: none; }
.choice input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 18px; }
.form__note { font-size: 13.5px; color: var(--ink-2); max-width: 32ch; }
.form__status { font-size: 14px; font-weight: 600; color: var(--b2-ink); min-height: 1px; }
.form__status.is-ok { color: var(--b1-ink); }

/* =====================================================================
   COMPONENT · CONTACT METHODS (big type, LTR-isolated values)
   ===================================================================== */
.cm { display: grid; border-top: 2px solid var(--fg); }
.cm__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label go" "value go"; gap: 2px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--fg); }
.cm__label { grid-area: label; display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 650; color: var(--fg-2); }
.cm__label i { color: var(--acc); font-size: 16px; }
.cm__value { grid-area: value; font: 400 clamp(26px, 6.4vw, 72px)/1.05 var(--f-num); direction: ltr; unicode-bidi: isolate; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: color .3s, translate .5s var(--ease); }
[dir="rtl"] .cm__value { text-align: end; justify-self: start; }
.cm__value--mail { font-size: clamp(20px, 4.6vw, 56px); text-transform: none; }
.cm__go { grid-area: go; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 18px; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.cm__row:hover .cm__value { color: var(--acc); translate: calc(10px * var(--dir)) 0; }
.cm__row:hover .cm__go { background: var(--b2); color: var(--ink); box-shadow: none; transform: rotate(calc(45deg * var(--dir))); }

/* =====================================================================
   POSTS (blog lists)
   .posts = card grid (related posts, blog lists): as many ~240 px columns as fit, one column on phones.
   .posts--list = one column of rows split by hairlines (sidebar / compact lists).
   ===================================================================== */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2vw, 26px); align-items: start; }
.posts > .post { position: relative; display: grid; gap: 16px; align-content: start; min-width: 0; }
.posts--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.posts--list > .post { padding-block: 20px; border-top: 1px solid var(--rule); }
.posts--list > .post:last-child { border-bottom: 1px solid var(--rule); }
.post__cover { display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--cream-2); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .post__cover img { transform: scale(1.04); }
.post__body { display: grid; gap: 10px; justify-items: start; }
.post__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--fg-2); }
.post__meta b { color: var(--acc); font-weight: 700; }
.post__title { font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
:root:lang(ar) .post__title { letter-spacing: 0; line-height: 1.55; }
.post__title a { text-decoration: none; background: linear-gradient(currentColor 0 0) left 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); }
[dir="rtl"] .post__title a { background-position: right 100%; }
.post__title a:hover { background-size: 100% 1.5px; }
.post__excerpt { font-size: 15px; color: var(--fg-2); }
.post__link { min-height: 44px; font-size: 14.5px; }
.badge-lang { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; background: color-mix(in oklab, var(--fg) 10%, transparent); font-size: 11.5px; font-weight: 700; vertical-align: middle; margin-inline-start: 6px; }

/* =====================================================================
   REVEAL (no-JS and crawlers: everything visible; JS hides only below-the-fold
   elements at init — see WSR.reveal in site.js)
   ===================================================================== */
[data-reveal] { }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1023px) {
  .mast__menu, .mast__lang { display: none; }
  .burger { display: grid; }
  .mast__actions { margin-inline-start: auto; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* six top-level items (Services, Industries, Pricing, Work, Blog, About) + language + CTA fit from 1024 px */
  .mast__bar { gap: 12px; }
  .mast__menu { gap: 0; }
  .mast__link { padding: 0 10px; }
}
@media (max-width: 560px) {
  .mast__cta { display: none; }
  .button--lg { --bh: 56px; }
  .tb__mail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tb__contact { gap: 14px; }
  .ledger__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .ledger__item:nth-child(odd)::before { display: none; }
  .ledger__item--wide { grid-column: 1 / -1; }
  .faq__a { padding-inline-end: 0; }
  .ft__wordmark span { font-size: calc((100vw - 2 * var(--g)) / 5.86); }
  .custom__item { grid-template-columns: auto minmax(0, 1fr); }
  .custom__price { grid-column: 2; justify-items: start; text-align: start; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .ph .cta-row .button { width: 100%; }
  .cm__go { width: 44px; height: 44px; }
}
@media (min-width: 561px) and (max-width: 1023px) {
  .ledger__grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .ledger__item:nth-child(odd)::before { display: none; }
}
@media (min-width: 640px) {
  .pk__grid { grid-template-columns: 1fr 1fr; }
  .pk__grid > .tk:nth-child(3):last-child { grid-column: 1 / -1; }
  .proc__steps { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .sitelinks__row { grid-template-columns: minmax(200px, 300px) 1fr; }
  .ft__nav { grid-template-columns: repeat(3, 1fr); }
  .ind__row { grid-template-columns: auto minmax(0, 1fr) minmax(180px, 30ch) 60px; grid-template-areas: "th name desc go"; }
  .ind__go { position: static; translate: none; grid-area: go; justify-self: end; }
  .ind__row.is-link .ind__name, .ind__row.is-link .ind__desc { padding-inline-end: 0; }
}
@media (min-width: 1024px) {
  :root { --nav-h: 80px; }
  .pk__grid { grid-template-columns: repeat(3, 1fr); }
  .pk__grid > .tk:nth-child(3):last-child { grid-column: auto; }
  .custom__grid { grid-template-columns: 1fr 1fr; }
  .proc__steps { grid-template-columns: repeat(4, 1fr); }
  .proc.is-track .proc__steps { display: flex; width: max-content; gap: clamp(40px, 5vw, 80px); max-width: none; margin: 0; padding-inline: var(--g) 30vw; }
  .proc.is-track .proc__step { width: clamp(380px, 32vw, 500px); flex: none; }
  .proc.is-track { padding-block: 0; }
  /* minmax(0, 1fr): the track is wider than the viewport; an auto column would grow to its max-content and push the head sideways */
  .proc.is-track .proc__pin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: 40px; }
  .midcta__card { grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); }
  .final__side { grid-template-columns: 1fr auto; align-items: end; }
  .ft__grid { grid-template-columns: minmax(260px, 1.4fr) 5fr; }
  .ft__nav { grid-template-columns: repeat(5, 1fr); }
  .ind__float { display: block; }
  .ph__grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); }
  .ph__grid--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ind__thumb { display: none; }
  .ind__row { grid-template-columns: minmax(0, 1fr) minmax(200px, 30ch) 60px; grid-template-areas: "name desc go"; padding: 18px 0; }
  .ind__list:hover .ind__row:not(:hover) { opacity: .38; }
  .ind__row:hover .ind__name { color: var(--acc); translate: calc(18px * var(--dir)) 0; }
  .ind__row:hover .ind__go { background: var(--b1-solid); color: var(--cream); box-shadow: none; transform: rotate(calc(45deg * var(--dir))); }
}
@media (pointer: coarse) {
  :root { --tb-h: 44px; }
  .tb__link, .ccy summary { min-height: 44px; }
  .svcindex__item a, .svcindex__plain, .svcindex__chip, .ft__links a, .ft__col a, .ft__meta a, .ft__meta > span, .mega__all { min-height: 44px; }
}

/* reduced motion: final states, nothing loops */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tape__track, .proc__marq span, .marq span, .mast .logo__mark { animation: none !important; }
}

/* =====================================================================
   COMPONENT · QUICK CONTACT  <dialog class="qc" id="quick-contact">
   partials/quick-contact.<lang>.html, injected by the layout after the footer (outside <main>).
   Trigger: <a href="https://webstackrank.com/contact" data-quick-contact>…</a>  (AR: /ar/contact)
   ===================================================================== */
html.qc-open { overflow: hidden; scrollbar-gutter: stable; }
.qc { position: fixed; inset: 0; margin: auto; width: min(580px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.qc::backdrop { background: color-mix(in oklab, var(--deep) 74%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qc__card { position: relative; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 60px 100px -40px rgb(0 0 0 / .65); --fg: var(--ink); --fg-2: var(--ink-2); --acc: var(--b1-accent); --rule: var(--line); }
.qc__head { position: relative; background: var(--b2); color: var(--ink); padding: 30px 30px 38px; padding-inline-end: 92px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.qc__head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 100% 0%, var(--hot-lite, color-mix(in oklab, var(--b2) 70%, white)) 0, transparent 70%); pointer-events: none; }
.qc__title { position: relative; font: 400 clamp(40px, 7vw, 60px)/.9 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--ink); }
.qc__title em { font-family: var(--f-serif); font-style: var(--accent-style); text-transform: none; letter-spacing: -.01em; font-size: 1.1em; color: var(--cream); background: var(--b1-solid); padding: 0 .14em .06em .1em; border-radius: .14em; display: inline-block; line-height: 1; rotate: calc(-3deg * var(--dir)); }
.qc__promise { position: relative; margin-top: 14px; font-size: 15.5px; line-height: 1.5; font-weight: 500; max-width: 34ch; }
.qc__stamp { position: absolute; inset-inline-end: 24px; bottom: 26px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-content: center; justify-items: center; background: var(--deep); color: var(--cream); rotate: calc(-12deg * var(--dir)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--deep) 30%, transparent); }
.qc__stamp b { font: 400 28px/.9 var(--f-num); color: var(--b2); }
.qc__stamp small { font-size: 10.5px; font-weight: 700; line-height: 1.3; }
/* ticket perforation between the orange stub and the paper body */
.qc__tear { position: relative; height: 12px; margin-top: -12px; background: radial-gradient(circle at 50% 100%, var(--paper) 5.5px, transparent 6px) 0 0 / 16px 12px repeat-x; }
.qc__form { display: grid; gap: 2px; padding: 12px 30px 4px; }
.qc__row { display: grid; gap: 2px 22px; }
.qc .field input, .qc .field textarea { font-size: 16px; }
.qc .field textarea { min-height: 88px; }
.qc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.qc__note { font-size: 13px; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.qc .form__status:empty { display: none; }
.qc__alt { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 30px 26px; margin-top: 12px; border-top: 1px dashed color-mix(in oklab, var(--ink) 20%, transparent); }
.qc__ch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--cream-2); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .25s, color .25s; }
.qc__ch i { color: var(--b1-ink); transition: color .25s; }
.qc__ch:hover { background: var(--deep); color: var(--cream); }
.qc__ch:hover i { color: var(--b2); }
.qc__close { position: absolute; inset-inline-end: 16px; top: 16px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream); font-size: 17px; transition: rotate .45s var(--ease), background-color .25s; }
.qc__close:hover { rotate: 90deg; background: var(--deep); }
.qc__close:focus-visible { outline-color: var(--deep); }
:root:lang(ar) .qc__title { font-weight: 800; line-height: 1.25; font-size: clamp(30px, 5.6vw, 44px); }
:root:lang(ar) .qc__title em { font-weight: 700; line-height: 1.15; padding: .02em .16em .12em; }
:root:lang(ar) .qc__stamp small { font-size: 11px; }
@media (min-width: 560px) { .qc__row { grid-template-columns: 1fr 1fr; } }
/* phones: a near-full-screen sheet from the bottom */
@media (max-width: 559px) {
  .qc { inset: auto 0 0 0; margin: 0; width: 100%; max-height: calc(100dvh - 10px); }
  .qc__card { max-height: calc(100dvh - 10px); border-radius: 26px 26px 0 0; }
  .qc__head { border-radius: 26px 26px 0 0; padding: 26px 20px 34px; padding-inline-end: 80px; }
  .qc__form { padding: 10px 20px 4px; }
  .qc__alt { padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); }
  .qc__actions .button { width: 100%; }
  .qc__ch { flex: 1 1 auto; justify-content: center; }
  .qc__ch:last-child { flex-basis: 100%; }
  .qc__stamp { width: 56px; height: 56px; inset-inline-end: 18px; bottom: 24px; }
  .qc__stamp b { font-size: 23px; }
}
@media (prefers-reduced-motion: no-preference) {
  .qc[open] .qc__card { animation: qcIn .6s var(--ease) both; }
  .qc[open]::backdrop { animation: qcFade .4s ease-out both; }
  .qc[open] .qc__stamp { animation: qcStamp .7s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 559px) {
  .qc[open] .qc__card { animation-name: qcUp; }
}
@keyframes qcIn { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes qcUp { from { transform: translateY(100%); } }
@keyframes qcFade { from { opacity: 0; } }
@keyframes qcStamp { from { opacity: 0; scale: 1.6; } }

/* footer wordmark: decorative icon field painted inside the letters (site.js); the HTML letters stay underneath */
.ft__wordmark { position: relative; }
.ft__wm-fx { position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.ft__wm-fx.is-on { opacity: 1; }
/* once the canvas is fully in, it is the wordmark: the HTML letters (same shape, underneath) step back so no edge doubles */
.ft__wordmark.has-fx > span { color: transparent; transition: color .2s 1.2s; }
@media (prefers-reduced-motion: reduce) { .ft__wm-fx { transition: none; } }

/* =====================================================================
   ARABIC TYPOGRAPHY (Arabic QA, 2026-11-10). Everything below is scoped to :lang(ar):
   English pages render exactly as before.
   ===================================================================== */
/* Real faces only. Loaded: Alexandria 600–900 (variable), Aref Ruqaa 700, IBM Plex Sans Arabic 400/500/600/700, Anton
   (text= subset). No Arabic face here has an italic, so nothing may slant or embolden a glyph synthetically. */
:root:lang(ar) { font-synthesis: none; }
:root:lang(ar) :is(em, i:not(.bi), cite, dfn, var, address) { font-style: normal; }
/* letter-spacing pulls joined Arabic letters apart: none on anything that is not an isolated Latin run
   (wordmark, prices, .ltr / dir=ltr / lang=en / translate=no runs and the pricing ring's Latin labels keep their tracking) */
:root:lang(ar) body :not(.ltr, [dir="ltr"], [lang^="en"], [translate="no"], .ltr *, [dir="ltr"] *, [lang^="en"] *, [data-price], [data-price-sub], [data-price] *, .logo__word, .logo__word *, .ft__wordmark *, .rc__name) { letter-spacing: 0; }
/* display weights that are loaded: section titles in Alexandria ExtraBold (was 400 = rendered as the 600 instance),
   accent words in Aref Ruqaa Bold (its only weight) */
:root:lang(ar) :is(.headline, .subhead) { font-weight: 800; }
:root:lang(ar) .subhead { line-height: 1.3; }
:root:lang(ar) :is(.headline em, .subhead em, .final__title em, .ph__title em, .ph__title .chip-word, .acc-word, .qc__title em, .ab-quote__mark) { font-weight: 700; }
/* titles wrap as balanced blocks (no one-word last line); running text avoids orphans */
:root:lang(ar) :is(h1, h2, h3, h4, .ph__title, .subhead, .tk__name, .faq__q > span:first-child, .post__title, .pf-cs__title, .fr__cap strong, .final__body) { text-wrap: balance; }
:root:lang(ar) :is(p, li, dd, figcaption, blockquote):not(.headline, .subhead, .final__body, .ph *, .hero *, .poster *) { text-wrap: pretty; }
/* (not in the first-viewport heroes: "pretty" can pick different breaks in the fallback face and the web face, which moved the hero on swap) */
/* Plex Arabic has tall ascenders and many dots: leads at 1.75, running text at 1.8 (was 1.45–1.6 in components).
   The first-viewport hero leads (.ph__lead, .hero__sub) keep the kit's 1.5: their inline-price height guard is tuned to it (no CLS). */
:root:lang(ar) :is(.lede, .ct-cta__text, .sv-answer__text, .sv-intro__lead, .ab-what__lead, .ab-founder__bio, .final__body) { line-height: 1.75; }
:root:lang(ar) main :is(p, li, dd):not([class], [aria-hidden="true"] *, .ltr *, [class*="vis-"] *, [class*="fa-"] *),
:root:lang(ar) :is(.tk__for, .tk__summary, .tk__list li, .custom__desc, .ind__desc, .pl__desc, .pf-cs__p, .prp__note, .pk__note, .band__note, .seal__term, .sv-res__ex, .ct-zone__txt, .ab-facts__v, .faq__a p, .post__excerpt, .bl-post__excerpt, .custom__text, .price-note) { line-height: 1.8; }
/* body weights that are loaded: the kit's 650 / 750 / 800 / 900 accents on Inter (variable) have no Plex Arabic face;
   the browser already draws them with Plex Bold, so request 700 outright (same pixels, honest computed weight) */
:root:lang(ar) :is(.link-arrow, .ccy__head, .mega__title, .svcindex__toggle, .sitelinks__row strong, .tk__label, .tk__toggle, .tk__excl > summary,
  .care__excl > summary, .custom__price > span, .custom__more, .sc__meta, .feat h3, .feat h4, .filter, .cmp tbody th, .cmp td::before, .choice legend,
  .cm__label, .post__title, .ct-line__label, .ct-zone__clock, .ct-privacy a, .pl__note, .qm__tmeta > span, .sv-res__sector, .sv-res__ex strong,
  .sv-post__more, .sv-links__prose a, .sv-answer__text a, .svx-ix__note a, .pf-chip, .pf-tab, .pf-jump a, .why__tag, .vis-cwv__row b,
  .ab-what__lead strong, .bl-post__cat, .bl-badge, .bl-feat__tag, .fa-camp__row b) { font-weight: 700; }
/* Latin names inside Arabic text (span translate="no" / bdi) are bidi-isolated with their own direction, so trailing
   punctuation stays on the Latin side ("Hoppy Tap Brewing Co." not ".Hoppy Tap Brewing Co") */
:root:lang(ar) :is(span[translate="no"], bdi) { unicode-bidi: plaintext; }