/* =============================================================================
   Dr. BuAbbas v2, base CSS on the Diriyah DNA. Reads only tokens.css. Logical properties only, so the Arabic
   pages (dir=rtl) are a true mirror. Hooks for site.js: _work/JS-CONTRACT.md. No em or en dashes anywhere.
   ========================================================================== */

:root { --bp-nav: 1280; }  /* five nav items plus the language switch and WhatsApp fit from 1280 */
@media (min-width: 768px) { :root { --gutter: 48px; --gap-head-motif: 32px; --gap-motif: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 64px; --sec: 80px; --head-h: 114px; } }
@media (min-width: 1280px) { :root { --gutter: 80px; } }
@media (min-width: 1536px) { :root { --gutter: 104px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 120px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-body); font-weight: var(--w-body);
  font-size: var(--t-b5); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
[dir="rtl"] body { line-height: var(--lh-body-ar); }
img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 16px; inset-block-start: -80px; z-index: 200; padding: 12px 20px;
  background: var(--ink); color: var(--white); border-radius: var(--r); text-decoration: none; }
.skip:focus { inset-block-start: 16px; }
.ic-mirror { transition: none; }
[dir="rtl"] .ic-mirror, [dir="rtl"] .ext { transform: scaleX(-1); }
.wrap { inline-size: 100%; max-inline-size: var(--cap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: var(--sec-tight); }
.svgdefs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* ---- type roles ---- */
.story, .h1, .h2, .h3 { font-family: var(--f-display); font-weight: var(--w-display); line-height: var(--lh-head); letter-spacing: 0; }
.story { font-size: var(--t-story); line-height: var(--lh-story); }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
[dir="rtl"] .story, [dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3 { font-family: var(--f-display-ar); font-weight: var(--w-display-ar); line-height: var(--lh-head-ar); }
[dir="rtl"] .story { font-size: var(--t-story-ar); }
.b1 { font-size: var(--t-b1); font-weight: var(--w-mid); line-height: var(--lh-body); }
.b2 { font-size: var(--t-b2); font-weight: var(--w-mid); line-height: var(--lh-body); }
.b3 { font-size: var(--t-b3); font-weight: var(--w-mid); line-height: var(--lh-body); }
.b4 { font-size: var(--t-b4); line-height: var(--lh-body); }
.b5 { font-size: var(--t-b5); line-height: var(--lh-body); }
.b6 { font-size: var(--t-b6); line-height: var(--lh-body); }
@media (min-width: 1024px) { .b1, .b2, .b4, .b5 { line-height: var(--lh-body-lg); } }
[dir="rtl"] .b1 { font-size: var(--t-b1-ar); font-weight: var(--w-b1-ar); }
[dir="rtl"] .b1, [dir="rtl"] .b2, [dir="rtl"] .b3, [dir="rtl"] .b4, [dir="rtl"] .b5, [dir="rtl"] .b6 { line-height: var(--lh-body-ar); }
.prose p + p { margin-block-start: 1em; }
.cap { font-size: var(--t-cap); line-height: 20px; }

/* ---- the three-motif ornament (DETAILS 2) ---- */
.motifs { display: flex; gap: var(--gap-motif); margin-block-start: var(--gap-head-motif); color: var(--tan); }
.motifs svg { inline-size: 16px; block-size: 22px; fill: currentColor; flex: none; }
.motifs--on { color: var(--white); }
.motifs--c { justify-content: center; }

/* ---- buttons (DETAILS 5) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px;
  padding: 12px 28px; border: 0; border-radius: var(--r); font-size: var(--t-cta); font-weight: var(--w-mid);
  line-height: var(--lh-ui); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn--grad { color: var(--white); background-image: var(--grad); background-size: var(--grad-size);
  background-position: var(--grad-pos); box-shadow: var(--sh-btn);
  transition: background-position var(--d-grad) var(--e-grad); }
.btn--grad:hover, .btn--grad:focus-visible { background-position: var(--grad-pos-hover); }
.btn--grad .smp { color: inherit; }
.btn--full { inline-size: 100%; }
.btn--ghost { color: var(--white); background: transparent; border: 1px solid var(--glass-line-2); box-shadow: none; }
.btn--ghost:hover { background: var(--glass); }
.btn--soft { color: var(--ink); background: var(--tan-lightest); box-shadow: none; }
.btn--soft:hover { color: var(--ink); background: var(--tan-lighter); }
.ext { inline-size: 24px; block-size: 24px; flex: none; }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-cta); font-weight: var(--w-body);
  line-height: var(--lh-ui); color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; transition: color var(--d-fast); }
.tlink:hover { color: var(--plum-light); }
.on-photo .tlink:hover { color: var(--tan-lighter); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-block-start: 32px; }
.rbtn { display: inline-grid; place-items: center; inline-size: 60px; block-size: 60px; border-radius: var(--r-round);
  border: 0; cursor: pointer; padding: 0; transition: background-color var(--d-fast), opacity var(--d-fast); }
.rbtn svg { inline-size: 24px; block-size: 24px; }
.rbtn--glass { color: var(--white); background: var(--glass); border: 1px solid var(--glass-line-2);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.rbtn--glass:hover { background: rgba(255, 255, 255, .22); }
.rbtn--light { color: var(--ink); background: var(--tan-lighter); }
.rbtn--light:hover { background: var(--tan-light); }
.rbtn--light:disabled { background: var(--tan-lightest); cursor: default; }
.rbtn .ic-play { display: none; }
.rbtn.is-paused .ic-play { display: block; }
.rbtn.is-paused .ic-pause { display: none; }

/* ---- tag pills (lavender) and chips (DETAILS 6, 8) ---- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: var(--navy-lightest);
  color: var(--navy); font-size: var(--t-pill); font-weight: var(--w-mid); line-height: var(--lh-ui); text-decoration: none; }
a.tag { transition: background-color var(--d-fast), color var(--d-fast); }
a.tag:hover { background: var(--navy); color: var(--white); }
.tags--lg { gap: 12px; }
.tags--lg .tag { padding: 10px 18px; font-size: var(--t-b6); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: var(--r);
  background: var(--plum-lightest); color: var(--plum); font-size: var(--t-pill); font-weight: var(--w-mid); line-height: var(--lh-ui);
  cursor: pointer; transition: background-color var(--d-fast), color var(--d-fast); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--plum); color: var(--white); }

/* ---- section heads ---- */
.shead { margin-block-end: 40px; }
.shead--c { text-align: center; }
.shead--c .motifs { justify-content: center; }
.shead p.b4 { margin-block-start: 20px; max-inline-size: 60ch; }
.shead--c p.b4 { margin-inline: auto; }
@media (max-width: 767px) { .shead { text-align: center; } .shead .motifs { justify-content: center; } .shead p.b4 { margin-inline: auto; } }

/* ---- the cream linen texture, our own: soft diagonal light over fine woven noise (never Diriyah's PNG) ---- */
.tex { position: relative; isolation: isolate;
  background-color: var(--ground);
  background-image:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .75) 26%, rgba(255, 255, 255, 0) 44%,
      rgba(236, 222, 210, .55) 62%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(120% 90% at 85% 10%, rgba(232, 214, 199, .55), rgba(232, 214, 199, 0) 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(225, 205, 190, .45), rgba(225, 205, 190, 0) 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .24 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 220px 220px; }

/* ---- entrances (JS-CONTRACT 1); visible without JS ---- */
.js [data-in="fade"] { opacity: 0; translate: 0 35px; transition: opacity var(--d-fade) var(--e-fade), translate var(--d-fade) var(--e-fade); }
.js [data-in="card"] { opacity: 0; translate: 0 30px; transition: opacity var(--d-rise) var(--e-fade), translate var(--d-rise) var(--e-fade); transition-delay: var(--d, 0ms); }
.js [data-in="img"] { opacity: 0; transition: opacity .7s ease; }
.js [data-in="reveal"] { overflow: hidden; }
.js [data-in="reveal"] img { translate: -100% 0; transition: translate 1.4s var(--e-reveal) .3s; }
[dir="rtl"].js [data-in="reveal"] img, .js [dir="rtl"] [data-in="reveal"] img { translate: 100% 0; }
.js [data-in="pin"] { scale: 0; transition: scale 3s var(--e-back); }
.js [data-in].is-in { opacity: 1; translate: 0 0; }
.js [data-in="reveal"].is-in img { translate: 0 0; }
.js [data-in="pin"].is-in { scale: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-in], [data-in] img { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; transition: none !important; }
  .btn--grad { transition: none; }
}

/* =============================================================================
   HEADER (DETAILS 11, JS-CONTRACT 8, 9)
   ========================================================================== */
.head { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; color: var(--white);
  background-color: transparent; background-image: var(--head-grad);
  transition: translate .3s, opacity .3s, background-color .3s, box-shadow .3s, backdrop-filter .3s, color .3s;
  transition-timing-function: var(--e-head); }
.head__in { display: flex; align-items: center; gap: 24px; max-inline-size: var(--cap); margin-inline: auto;
  padding: 20px var(--gutter); min-block-size: var(--head-h); }
@media (min-width: 1024px) { .head__in { padding-block: 32px; } }
.head.is-hidden { translate: 0 -100%; opacity: 0; }
.head.is-solid, .head--opaque, .head.is-open { color: var(--ink); background-color: var(--ground); background-image: none; box-shadow: var(--sh-head); }
.head--opaque.is-top { box-shadow: none; border-block-end: 1px solid var(--tan-lighter); }
.brand { display: block; flex: none; color: inherit; border-radius: var(--r); }
.brand__mark { display: block; inline-size: 135px; block-size: 42px; background-color: currentColor;
  -webkit-mask: url("/assets/brand/wordmark-en.svg") left center / contain no-repeat;
  mask: url("/assets/brand/wordmark-en.svg") left center / contain no-repeat; }
[dir="rtl"] .brand__mark { -webkit-mask-image: url("/assets/brand/wordmark-ar.svg"); mask-image: url("/assets/brand/wordmark-ar.svg");
  -webkit-mask-position: right center; mask-position: right center; }
@media (min-width: 1024px) { .brand__mark { inline-size: 160px; block-size: 50px; } }
.head.is-solid .brand, .head--opaque .brand, .head.is-open .brand, .foot .brand { color: var(--tan); }
.nav { flex: 1; }
.nav__list { display: flex; justify-content: center; gap: 16px; }
.nav__list a { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 8px; font-size: var(--t-nav);
  font-weight: var(--w-mid); line-height: var(--lh-ui); text-decoration: none; text-underline-offset: 6px; }
.nav__list a:hover, .nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }
.nav__more { display: none; }
.head-r { display: flex; align-items: center; gap: 16px; margin-inline-start: auto; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: var(--t-nav); font-weight: var(--w-mid);
  line-height: var(--lh-ui); text-decoration: none; border-radius: var(--r); }
.lang-switch svg { inline-size: 32px; block-size: 32px; }
.lang-switch:hover span { text-decoration: underline; text-underline-offset: 5px; }
.head-wa { padding-inline: 24px; }
.burger { display: none; inline-size: 40px; block-size: 40px; padding: 8px 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.burger__lines { display: grid; gap: 7px; }
.burger__lines span { display: block; block-size: 2px; background: currentColor; border-radius: 1px; transition: translate .3s, rotate .3s, opacity .3s; }
.head.is-open .burger__lines span:nth-child(1) { translate: 0 9px; rotate: 45deg; }
.head.is-open .burger__lines span:nth-child(2) { opacity: 0; }
.head.is-open .burger__lines span:nth-child(3) { translate: 0 -9px; rotate: -45deg; }
.nav__demo { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; padding: 8px; border: 0;
  background: none; color: inherit; cursor: pointer; }
.nav__demo svg { inline-size: 22px; block-size: 22px; }
@media (min-width: 1280px) { .nav__demo { display: none; } }
@media (max-width: 1279px) {
  .js .burger { display: inline-grid; place-items: center; }
  .js .nav { position: fixed; inset: var(--head-h) 0 auto; block-size: calc(100dvh - var(--head-h)); overflow-y: auto;
    background: var(--ground); color: var(--ink); padding: 32px var(--gutter) 48px; display: none; }
  .js .nav.is-open { display: block; }
  .js .head-lang { display: none; }
  .nav { order: 9; flex-basis: 100%; }
  .js .nav { order: 0; flex-basis: auto; }
  .nav__list { flex-direction: column; gap: 0; justify-content: flex-start; flex-wrap: wrap; }
  .js .nav__list a { min-block-size: 56px; font-size: var(--t-b2); border-block-end: 1px solid var(--tan-lighter); inline-size: 100%; padding-inline: 0; }
  .js .nav__more { display: grid; gap: 24px; margin-block-start: 32px; justify-items: start; }
  .head__in { flex-wrap: wrap; }
  .js .head__in { flex-wrap: nowrap; }
  html:not(.js) .nav__list { flex-direction: row; gap: 4px 12px; }
  html:not(.js) .head { position: absolute; }
}
@media (max-width: 559px) { .js .head-wa { display: none; } }
@media (min-width: 560px) and (max-width: 1279px) { .js .head-wa { display: inline-flex; } }
@media (max-width: 479px) { .head-r { gap: 8px; } .js .head-r .nav__demo { margin-inline-end: -4px; } }

/* =============================================================================
   HOME SPOTLIGHT (h01, JS-CONTRACT 2)
   ========================================================================== */
.spot { position: relative; color: var(--white); background: var(--black); }
.spot__vp { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.spot__vp::-webkit-scrollbar { display: none; }
.js .spot__vp { overflow: hidden; }
.spot__track { display: flex; }
.spot__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-block-size: max(640px, 100svh); max-block-size: 2000px;
  display: flex; align-items: flex-end; overflow: hidden; }
.spot__bg, .sspot__bg, .vst__bg, .plan__bg, .statement__bg { position: absolute; inset: 0; z-index: 0; }
.spot__bg img, .sspot__bg img, .vst__bg img, .plan__bg img, .statement__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.spot__bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-grad-b), var(--hero-grad); }
[dir="rtl"] .spot__bg::after { background: var(--hero-grad-b), var(--hero-grad-rtl); }
.spot__in { position: relative; z-index: 1; inline-size: 100%; display: grid; gap: 32px; align-items: end;
  padding-block: calc(var(--head-h) + 24px) 132px; }
.spot__txt { max-inline-size: 760px; }
.spot__eyebrow { margin-block-end: 20px; }
.spot__t { margin: 0; }
.spot__name { display: block; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-story);
  line-height: var(--lh-story); color: var(--on-photo); }
[dir="rtl"] .spot__name { font-family: var(--f-display-ar); font-weight: var(--w-display-ar); font-size: var(--t-story-ar); line-height: var(--lh-head-ar); }
.spot__name > span { display: block; }
.spot__role { display: block; margin-block-start: 24px; font-family: var(--f-body); font-weight: var(--w-mid); font-size: var(--t-b1); line-height: var(--lh-body); max-inline-size: 30ch; }
[dir="rtl"] .spot__role { font-weight: var(--w-b1-ar); font-size: var(--t-b1-ar); line-height: var(--lh-body-ar); }
.spot__h { color: var(--on-photo); max-inline-size: 16ch; }
.spot__lede { margin-block-start: 24px; max-inline-size: 52ch; }
.spot .actions .tlink { color: var(--white); }
.mount { position: relative; justify-self: end; inline-size: min(372px, 100%); aspect-ratio: 9 / 16; }
.mount__panel { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: calc(100% - 16px); block-size: calc(100% - 12px); background: var(--navy); }
.mount__frame { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: calc(100% - 16px); block-size: calc(100% - 12px);
  padding-inline-start: 15px; padding-block-end: 15px; background: var(--tan); clip-path: url(#torn); }
.mount__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.spot__ctl { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: flex; align-items: center; gap: 24px;
  max-inline-size: var(--cap); margin-inline: auto; padding: 0 var(--gutter) 40px; pointer-events: none; }
.spot__ctl > * { pointer-events: auto; }
.spot__prog { flex: 1; display: flex; gap: 10px; }
@media (min-width: 768px) { .spot__prog { gap: 16px; } }
.spot__seg { flex: 1; block-size: 2px; background: linear-gradient(to right, var(--white) var(--percent, 0%), rgba(255, 255, 255, .3) 0); }
[dir="rtl"] .spot__seg { background: linear-gradient(to left, var(--white) var(--percent, 0%), rgba(255, 255, 255, .3) 0); }
.spot__btns { display: flex; gap: 16px; }
@media (max-width: 767px) { .spot__prev, .spot__next { display: none !important; } .spot__btns .rbtn { inline-size: 48px; block-size: 48px; } }
@media (min-width: 1024px) {
  .spot__in { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
  .mount { inline-size: clamp(300px, 26vw, 456px); }
}
@media (max-width: 1023px) {
  .spot__slide { align-items: stretch; }
  .spot__in { justify-items: center; text-align: center; padding-block-end: 112px; align-content: center; }
  .spot__txt { display: grid; justify-items: center; }
  .spot .motifs { justify-content: center; }
  .spot .actions { justify-content: center; }
  .mount { justify-self: center; order: -1; inline-size: 200px; }
  .spot__role { margin-inline: auto; }
}

/* ---- short spotlight (d01) ---- */
.sspot { position: relative; display: flex; align-items: flex-end; justify-content: center; min-block-size: 520px; color: var(--white);
  text-align: center; background: var(--navy); overflow: hidden; }
@media (min-width: 1024px) { .sspot { min-block-size: var(--short-hero); } }
.sspot__bg::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.sspot__in { position: relative; z-index: 1; display: grid; justify-items: center; padding-block: calc(var(--head-h) + 48px) 64px; max-inline-size: 980px; }
.sspot__eyebrow { margin-block-end: 16px; }
.sspot__t { color: var(--on-photo); }
.sspot__lede { margin-block-start: 20px; max-inline-size: 62ch; }
.sspot .actions { justify-content: center; }
.sspot .tlink { color: var(--white); }

/* ---- legal page headline (f01) ---- */
.fhead { padding-block: calc(var(--head-h) + 64px) 24px; }
.fhead__eyebrow { margin-block-end: 16px; color: var(--plum-light); }

/* =============================================================================
   CONTENT SECTIONS
   ========================================================================== */
/* intro block (a02) */
.intro__in { max-inline-size: 1180px; }
.intro .tags { margin-block-end: 32px; }
.intro__body { margin-block-start: 32px; max-inline-size: 70ch; }
.intro__body p + p { margin-block-start: 1em; }
.intro__role { margin-block-start: 24px; font-weight: var(--w-mid); }
.intro .actions { margin-block-start: 40px; }
.intro--pills .tags { margin-block: 40px 0; }

/* info cards (p02) */
.cards__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.icard { display: flex; gap: 20px; padding: 32px; background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.icard__ic { flex: none; inline-size: 40px; block-size: 40px; color: var(--ink); }
.icard__ic svg { inline-size: 40px; block-size: 40px; }
.icard__b { min-inline-size: 0; }
.icard__t { margin-block-end: 12px; }
.icard__x p + p, .icard__x ul { margin-block-start: 12px; }
.icard__x ul li, .article ul li, .promo__list li, .ifo ul li { position: relative; padding-inline-start: 22px; margin-block-start: 8px; }
.icard__x ul li::before, .article ul li::before, .ifo ul li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .62em;
  inline-size: 7px; block-size: 7px; background: var(--tan); rotate: 45deg; border-radius: 1px; }
.icard__meta { margin-block-start: 12px; color: var(--plum-light); }
.icard__lk { margin-block-start: 20px; }
a.icard { text-decoration: none; transition: box-shadow var(--d-fast); }
a.icard:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, .09); }

/* visual stories (h05, JS-CONTRACT 3) */
.vst { position: relative; color: var(--white); background: var(--black); }
.vst__vp { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vst__vp::-webkit-scrollbar { display: none; }
.js .vst__vp { overflow: hidden; }
.vst__track { display: flex; }
.vst__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-block-size: 640px; display: flex; align-items: flex-end; overflow: hidden; }
@media (min-width: 1024px) { .vst__slide { min-block-size: 760px; } }
.vst__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .3)); }
.vst__in { position: relative; z-index: 1; inline-size: 100%; padding-block: 120px 168px; }
.vst__kick { margin-block-end: 16px; }
.vst__h { max-inline-size: 18ch; }
.vst__x { margin-block-start: 16px; max-inline-size: 48ch; }
.vst .tlink { color: var(--white); margin-block-start: 24px; }
.vst__ctl { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; max-inline-size: var(--cap); margin-inline: auto; padding: 0 var(--gutter) 40px; pointer-events: none; }
.vst__ctl > * { pointer-events: auto; }
.vst__thumbs { display: flex; gap: 12px; }
.vst__thumb { position: relative; inline-size: 64px; block-size: 84px; padding: 3px; border: 0; border-radius: var(--r-card); cursor: pointer;
  background: conic-gradient(var(--white) var(--progress, 0%), rgba(255, 255, 255, .2) 0); }
.vst__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 4px; opacity: .75; transition: opacity var(--d-fast); }
.vst__thumb.is-active img, .vst__thumb:hover img { opacity: 1; }
@media (min-width: 1024px) { .vst__thumb { inline-size: 88px; block-size: 116px; } }
.vst__btns { display: flex; gap: 16px; }
@media (max-width: 767px) { .vst__prev, .vst__next { display: none !important; } .vst__ctl { flex-direction: column; align-items: flex-start; } .vst__btns .rbtn { inline-size: 48px; block-size: 48px; } }

/* promotion (h04) with the asterisk badge (DETAILS 4) */
.promo__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .promo__grid { grid-template-columns: minmax(0, 617fr) minmax(0, 560fr); gap: 112px; } }
.promo__fig { position: relative; aspect-ratio: 1; max-inline-size: 617px; margin-inline-end: 40px; }
.promo__fig > .promo__img { inline-size: 100%; block-size: 100%; overflow: hidden; }
.promo__fig > .promo__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.badge { position: absolute; inset-inline-end: -40px; inset-block-end: -32px; inline-size: 98px; aspect-ratio: 202 / 196; transform-origin: 50% 50%; }
@media (min-width: 1280px) { .badge { inline-size: 195px; inset-inline-end: -64px; inset-block-end: -52px; } }
[dir="rtl"] .badge svg { transform: scaleX(-1); }
.promo__list { margin-block-start: 28px; display: grid; gap: 4px; }
.promo__list li { padding-inline-start: 26px; }
.promo__list li svg { position: absolute; inset-inline-start: 0; inset-block-start: .3em; inline-size: 14px; block-size: 14px; color: var(--ink); }
.promo .actions { margin-block-start: 36px; }

/* statement band (h02, static) */
.statement { position: relative; display: grid; place-items: center; min-block-size: 520px; color: var(--white); text-align: center; overflow: hidden; background: var(--plum); }
@media (min-width: 1024px) { .statement { min-block-size: 640px; } }
.statement__bg::after { content: ""; position: absolute; inset: 0; background: rgba(40, 14, 14, .58); }
.statement__in { position: relative; z-index: 1; padding-block: var(--sec); display: grid; justify-items: center; }
.statement__t { color: var(--on-photo); }
.statement__t > span { display: block; }
.statement__x { margin-block-start: 28px; max-inline-size: 56ch; }

/* media banner, image right (o01) */
.mban__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .mban__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; } }
.mban__body { margin-block-start: 32px; }
.mban__body p + p { margin-block-start: 1em; }
.mban__fig { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; max-block-size: 760px; }
.mban__fig--wide { aspect-ratio: 4 / 3; }
.mban__fig img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mban .tags { margin-block-start: 32px; }

/* media tiles (h08) */
.mtile .tags { margin-block-end: 40px; }
.mtile__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .mtile__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; } }
.tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; block-size: 480px; color: var(--white); text-decoration: none; }
@media (min-width: 1024px) { .tile { block-size: 560px; } }
.tile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .9s var(--e-fade); }
a.tile:hover img { scale: 1.03; }
.tile__strip { position: absolute; inset-inline: 20px; inset-block-end: 20px; padding: 20px 24px; border-radius: var(--r); background: var(--glass);
  border: 1px solid var(--glass-line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); background-color: rgba(30, 20, 15, .28); }
.tile__strip p + p { margin-block-start: 6px; }

/* planner band (h07, JS-CONTRACT 5) */
.plan { position: relative; color: var(--white); overflow: hidden; background: var(--navy); }
.plan__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 20, .7), rgba(10, 10, 20, .35)); }
[dir="rtl"] .plan__bg::after { background: linear-gradient(270deg, rgba(10, 10, 20, .7), rgba(10, 10, 20, .35)); }
.plan__in { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; padding-block: var(--sec); }
@media (min-width: 1024px) { .plan__in { grid-template-columns: minmax(0, 1fr) minmax(0, 548px); gap: 80px; padding-block: 112px; } }
.plan__t { color: var(--on-photo); }
.plan__lede { margin-block-start: 20px; max-inline-size: 48ch; }
.plan__steps { margin-block-start: 40px; display: grid; gap: 20px; counter-reset: st; }
.plan__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.plan__n { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h3); line-height: 1; color: var(--tan-lighter); }
[dir="rtl"] .plan__n { font-family: var(--f-display-ar); }
.plan__steps h3 { margin-block-end: 4px; }
.plan__steps p { opacity: .88; }
.plan__panel { position: relative; padding: 32px 24px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur-2); backdrop-filter: var(--blur-2); }
@media (min-width: 1024px) { .plan__panel { padding: 40px; } }
.plan__ui { display: grid; gap: 28px; }
.plan__f { border: 0; margin: 0; padding: 0; min-inline-size: 0; position: relative; }
.plan__f legend, .plan__q { padding: 0; margin-block-end: 16px; font-size: var(--t-b2); font-weight: var(--w-mid); line-height: var(--lh-ui); color: var(--on-photo); }
.plan__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.plan__opt { position: relative; display: inline-flex; }
.plan__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.plan__opt span { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--glass-line-2);
  background: rgba(255, 255, 255, .06); font-size: var(--t-pill); font-weight: var(--w-mid); line-height: var(--lh-ui); transition: background-color var(--d-fast), color var(--d-fast); }
.plan__opt--chip span { border-radius: var(--r); padding: 10px 16px; }
.plan__opt input:checked + span { background: var(--white); color: var(--plum); border-color: var(--white); }
.plan__opt input:focus-visible + span { outline: 2px solid var(--tan-lighter); outline-offset: 2px; }
.plan__date { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; min-block-size: 48px; padding: 0 16px;
  border: 1px solid var(--glass-line-2); border-radius: var(--r); background: rgba(255, 255, 255, .08); color: var(--white); cursor: pointer; text-align: start; font-size: var(--t-b6); }
.plan__date svg { inline-size: 22px; block-size: 22px; flex: none; }
.plan__date.has-value .plan__date-v { font-weight: var(--w-mid); }
.plan__foot { margin-block-start: 28px; padding-block-start: 28px; border-block-start: 1px solid var(--glass-line); display: grid; }
.plan__send { justify-self: stretch; }
.plan__send .ext { display: none; }
.plan__send[target="_blank"] .ext { display: block; }
.cal { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 30; inline-size: min(340px, 100%); padding: 16px;
  background: var(--ground); color: var(--ink); border-radius: var(--r-card); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.cal__title { font-weight: var(--w-mid); font-size: var(--t-b6); }
.cal__nav { inline-size: 36px; block-size: 36px; border: 0; border-radius: var(--r-round); background: var(--tan-lightest); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.cal__nav:hover { background: var(--tan-lighter); }
.cal__grid { inline-size: 100%; border-collapse: collapse; }
.cal__dow { padding: 6px 0; font-size: 12px; font-weight: var(--w-mid); color: var(--muted); }
.cal__grid td { padding: 2px; text-align: center; }
.cal__day { inline-size: 100%; aspect-ratio: 1; min-inline-size: 36px; border: 0; border-radius: var(--r); background: none; color: var(--ink); cursor: pointer; font-size: 14px; }
.cal__day:hover { background: var(--tan-lightest); }
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--tan); }
.cal__day.is-selected { background: var(--plum); color: var(--white); }
.cal__day.is-past, .cal__day[aria-disabled="true"] { color: #8f8f8f; cursor: default; background: none; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.cal__foot { display: flex; justify-content: space-between; margin-block-start: 8px; }
.cal__clear, .cal__close { border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: 6px 4px; }

/* question banner (v04) */
.qban__box { position: relative; display: grid; gap: 32px; padding: 48px 24px; border-radius: var(--r); overflow: visible; }
@media (min-width: 1024px) { .qban__box { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 64px 80px; gap: 64px; } }
.qban__x { margin-block-start: 20px; max-inline-size: 58ch; }
.qban .actions { margin-block-start: 0; }
@media (min-width: 1024px) { .qban .actions { flex-direction: column; align-items: stretch; } }
.qban__badge { position: absolute; inset-block-start: -36px; inset-inline-end: 24px; inline-size: 84px; }
@media (min-width: 1024px) { .qban__badge { inline-size: 110px; inset-block-start: -48px; inset-inline-end: 48px; } }

/* reels / content carousel (h03, JS-CONTRACT 4) */
.arc__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-block-end: 40px; }
.arc__top .shead { margin: 0; }
.arc__pills { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-block-end: 40px; }
.arc__pill { display: inline-flex; align-items: center; gap: 16px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--plum-light);
  font-size: var(--t-cta); font-weight: var(--w-mid); line-height: var(--lh-ui); }
.arc__pic { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--r-round); background: var(--plum-lightest); color: var(--plum);
  transition: background-color var(--d-fast), color var(--d-fast); }
.arc__pic svg { inline-size: 24px; block-size: 24px; }
.arc__pill.is-active .arc__pic, .arc__pill[aria-pressed="true"] .arc__pic { background: var(--plum); color: var(--white); }
.arc__pill.is-active { color: var(--plum); }
.arc__vp { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter); padding-block: 16px 24px; }
.arc__vp::-webkit-scrollbar { display: none; }
.arc__list { display: flex; gap: 32px; }
.arc__card { flex: 0 0 260px; scroll-snap-align: start; }
@media (min-width: 1024px) { .arc__card { flex-basis: 292px; } }
.arc__card > a { display: block; color: var(--white); text-decoration: none; }
.tcard { position: relative; aspect-ratio: 292 / 424; }
.tcard__panel { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: calc(100% - 16px); block-size: calc(100% - 12px); background: var(--navy); }
.tcard__frame { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: calc(100% - 16px); block-size: calc(100% - 12px);
  padding-inline-start: 15px; padding-block-end: 15px; background: var(--tan); clip-path: url(#torn); }
.tcard__img { position: relative; inline-size: 100%; block-size: 100%; overflow: hidden; }
.tcard__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .9s var(--e-fade); }
.arc__card a:hover .tcard__img img { scale: 1.04; }
.tcard__cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 56px 20px 20px; color: var(--white);
  background: linear-gradient(0deg, rgba(20, 12, 8, .85), rgba(20, 12, 8, .55) 55%, rgba(20, 12, 8, 0)); }
.tcard__cap .b2 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__meta { margin-block-start: 8px; display: flex; align-items: center; gap: 8px; opacity: .9; }
.tcard__meta svg { inline-size: 18px; block-size: 18px; }
.arc__ctl { display: flex; align-items: center; gap: 32px; margin-block-start: 24px; }
.arc__prog { flex: 1; block-size: 2px; color: var(--ink);
  background: linear-gradient(to right, currentColor var(--percent, 0%), var(--ink-10) 0); }
[dir="rtl"] .arc__prog { background: linear-gradient(to left, currentColor var(--percent, 0%), var(--ink-10) 0); }
.arc__btns { display: flex; gap: 32px; }
.arc__ctl[hidden] { display: none !important; }
.arc__note { margin-block-start: 16px; color: var(--plum-light); }

/* related cards (q02) */
.rel__grid { display: grid; gap: 32px 24px; }
@media (min-width: 640px) { .rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } }
.rcard { display: grid; gap: 16px; text-decoration: none; }
.rcard__img { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--tan-lightest); }
.rcard__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .9s var(--e-fade); }
.rcard:hover .rcard__img img { scale: 1.04; }
.rcard__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rcard .rbtn { inline-size: 48px; block-size: 48px; flex: none; }
.rcard:hover .rbtn--light { background: var(--tan-light); }
.rcard__x { color: var(--ink); }
.rcard--text { padding: 28px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--sh-card); align-content: start; }

/* navy info band (v01) */
.ifo { background: var(--navy); color: var(--on-photo); }
.ifo .h2 { color: var(--on-photo); }
.ifo .motifs { color: var(--tan); }
.ifo__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .ifo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ifo__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ifo__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dcard { padding: 32px; border-radius: var(--r-card); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.dcard__n { display: block; margin-block-end: 20px; font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h2); line-height: 1; color: var(--tan); }
[dir="rtl"] .dcard__n { font-family: var(--f-display-ar); }
.dcard__t { margin-block-end: 10px; color: var(--white); }
.dcard__x { color: rgba(253, 250, 247, .86); }
.ifo__foot { margin-block-start: 40px; display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; }
.ifo__foot p { max-inline-size: 64ch; color: rgba(253, 250, 247, .86); }
.ifo .tlink { color: var(--white); }

/* contact blocks (c02) */
.cblk__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .cblk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cblk__grid .icard { flex-direction: column; }
.cblk__links { display: grid; gap: 14px; margin-block-start: 8px; }

/* procedure listing (d02) */
.lst__grid { display: grid; gap: 40px 24px; }
@media (min-width: 640px) { .lst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lst__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; } }
.lcard { display: grid; align-content: start; gap: 14px; text-decoration: none; }
.lcard__img { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.lcard__img img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .9s var(--e-fade); }
a.lcard:hover .lcard__img img { scale: 1.04; }
.lcard--text { padding: 28px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--sh-card); }
.lcard__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lcard .rbtn { inline-size: 48px; block-size: 48px; flex: none; }

/* article body (q01) */
.article__in { max-inline-size: 860px; }
.article__item + .article__item { margin-block-start: 48px; padding-block-start: 48px; border-block-start: 1px solid var(--tan-lighter); }
.article__item .h3 { margin-block-end: 20px; }
.article__item h2.h3 { margin-block-end: 20px; }
.article__x p + p, .article__x ul { margin-block-start: 1em; }
.article__note { margin-block-start: 40px; padding: 20px 24px; border-radius: var(--r); background: var(--tan-lightest); }

/* FAQ accordion (f02, JS-CONTRACT 7) */
.faqx__item { border-block-end: 1px solid var(--plum-lightest); }
.faqx__item:first-child { border-block-start: 1px solid var(--plum-lightest); }
.faqx__item.is-open { border-block-end-color: var(--tan); }
.faqx__h { margin: 0; font: inherit; }
.faqx__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; inline-size: 100%; padding: 24px 0; border: 0; background: none;
  text-align: start; cursor: pointer; font-size: var(--t-b2); font-weight: var(--w-mid); line-height: var(--lh-ui); color: var(--ink); }
.faqx__q::after { content: ""; flex: none; inline-size: 32px; block-size: 32px; border-radius: var(--r-round); background-color: var(--tan-lightest);
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat; transition: background-size .3s; }
.faqx__q[aria-expanded="true"]::after { background-size: 12px 1.5px, 1.5px 0; }
html:not(.js) .faqx__q::after { display: none; }
.faqx__a { margin: 0; padding: 0; overflow: hidden; }
.faqx__in { padding-block-end: 24px; max-inline-size: 75ch; }

/* forms (c01), v1 hooks kept */
.cform__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .cform__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 80px; align-items: start; } }
.cform__intro { margin-block: 20px 32px; max-inline-size: 60ch; }
.contact-form { display: grid; gap: 20px; }
@media (min-width: 768px) { .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .field--wide, .field--check, .contact-form > button, .contact-form > p, .contact-form > noscript { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: var(--t-b6); color: var(--muted); }
.field input, .field select, .field textarea { inline-size: 100%; min-block-size: 56px; padding: 14px 16px; border: 1px solid var(--plum-lightest); border-radius: var(--r);
  background: var(--white); color: var(--ink); font-size: var(--t-b6); }
.field textarea { min-block-size: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23623C2C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 20px; background-position: right 14px center; padding-inline-end: 44px; }
[dir="rtl"] .field select { background-position: left 14px center; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tan); box-shadow: 0 0 0 1px var(--tan); }
.field [aria-invalid="true"] { border-color: #A3341F; }
.help { font-size: var(--t-cap); color: var(--muted); }
.field-err, .err { font-size: var(--t-cap); color: #A3341F; }
.field--check { display: flex; gap: 12px; align-items: flex-start; }
.field--check input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; accent-color: var(--plum); flex: none; }
.field--check label { color: var(--ink); font-size: var(--t-b6); }
.contact-form > button { justify-self: start; }
.contact-form > button:disabled { opacity: .55; cursor: not-allowed; }
.form-note { padding: 16px 20px; border-radius: var(--r); background: var(--tan-lightest); }
.form-noscript { color: var(--ink); }
.cform__side { display: grid; gap: 24px; }

/* chips + empty state (f02 chips) */
.emp .chips { margin-block-end: 32px; }
.emp__box { padding: 48px 32px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--sh-card); text-align: center; }
.emp__box p { max-inline-size: 60ch; margin-inline: auto; }
.emp__box svg { inline-size: 48px; block-size: 48px; margin: 0 auto 20px; color: var(--tan); }

/* 404 (z01) */
.nf { min-block-size: 70vh; display: grid; place-items: center; text-align: center; padding-block: calc(var(--head-h) + 64px) 80px; }
.nf .motifs { justify-content: center; }
.nf__x { margin-block-start: 24px; }
.nf .actions { justify-content: center; }

/* =============================================================================
   FOOTER (DETAILS 10)
   ========================================================================== */
.foot { position: relative; overflow: hidden; padding-block: 64px 40px; background: var(--ground); color: var(--ink); isolation: isolate; }
@media (min-width: 1024px) { .foot { padding-block: 80px 48px; } }
.foot__sadu { position: absolute; z-index: -1; inset-inline-end: -40px; inset-block-end: -10px; inline-size: min(926px, 120%); color: var(--tan); opacity: .16; pointer-events: none; }
.foot__sadu svg { inline-size: 100%; block-size: auto; }
@media (max-width: 767px) { .foot__sadu { inset-block-end: auto; inset-block-start: 0; inline-size: 180%; } }
.foot__top { display: grid; gap: 48px; }
@media (min-width: 1024px) { .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px 96px; } }
.foot__h { margin-block-end: 24px; }
.foot__links { display: grid; gap: 14px 32px; }
@media (min-width: 640px) { .foot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot__links a, .foot__legal a { text-decoration: none; text-underline-offset: 4px; }
.foot__links a:hover, .foot__legal a:hover { text-decoration: underline; color: var(--plum-light); }
.ask { display: flex; gap: 16px; margin-block-start: 24px; }
.ask__in { flex: 1; min-inline-size: 0; min-block-size: 56px; padding: 0 16px; border: 1px solid var(--plum-lightest); border-radius: var(--r); background: var(--white); font-size: var(--t-b6); }
.ask__in::placeholder { color: var(--placeholder); }
.ask__in:focus { outline: none; border-color: var(--tan); box-shadow: 0 0 0 1px var(--tan); }
.ask__go { min-block-size: 56px; }
.foot__contact { display: grid; gap: 6px; }
.foot__contact a { text-underline-offset: 4px; }
.foot__mid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-block-start: 48px; }
.social { display: flex; gap: 24px; }
.social a { display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin: -6px; border-radius: var(--r); transition: color var(--d-fast); }
.social a:hover { color: var(--plum-light); }
.social svg { inline-size: 28px; block-size: 28px; }
.totop { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--ink); border-radius: var(--r-round); color: var(--ink); }
.totop:hover { background: var(--tan-lightest); }
.totop svg { inline-size: 20px; block-size: 20px; }
.foot__rule { block-size: 1px; background: var(--tan-lighter); border: 0; margin: 40px 0 32px; }
.foot__base { display: grid; gap: 24px; align-items: end; }
@media (min-width: 1024px) { .foot__base { grid-template-columns: auto minmax(0, 1fr); } }
.foot__base .brand__mark { inline-size: 160px; block-size: 50px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 12px 36px; justify-content: flex-start; }
@media (min-width: 1024px) { .foot__legal { justify-content: flex-end; } .foot__fine { text-align: end; } }
.foot__fine { display: grid; gap: 8px; margin-block-start: 16px; }
.foot__fine p { font-size: var(--t-cap); line-height: 20px; }
.foot__fine a { text-underline-offset: 3px; }

/* ---- cookie banner (DETAILS 12), v1 hooks ---- */
.cookie { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90; background: var(--tan-lightest); color: var(--ink);
  padding: 28px var(--gutter); box-shadow: 0 -10px 34px rgba(0, 0, 0, .08); }
@media (min-width: 1024px) { .cookie { padding: 40px 80px; } }
.cookie__in { max-inline-size: var(--cap); margin-inline: auto; }
.cookie .motifs { margin-block: 16px; }
.cookie__x a { text-underline-offset: 4px; }
.cookie__b { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-block-start: 20px; }
.cookie__b .tlink { border: 0; background: none; padding: 8px 0; cursor: pointer; }

/* ---- Demo notes (studio chrome, v1 hooks), restyled with tokens ---- */
.demo { position: fixed; inset-inline-end: 16px; inset-block-end: 16px; z-index: 95; font-family: var(--f-body); }
.demo__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: var(--r-pill); background: var(--navy);
  color: var(--white); font-size: var(--t-pill); font-weight: var(--w-mid); cursor: pointer; box-shadow: var(--sh-btn); }
.demo__btn svg, .demo__x svg { inline-size: 18px; block-size: 18px; }
.demo__panel { position: fixed; inset-inline-end: 16px; inset-block-end: 72px; inline-size: min(440px, calc(100vw - 32px)); max-block-size: 70vh; overflow: auto;
  padding: 24px; border-radius: var(--r-card); background: var(--ground); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); border: 1px solid var(--tan-lighter); }
.demo__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block-end: 12px; }
.demo__title { font-family: var(--f-display); font-weight: var(--w-display); font-size: 24px; }
.demo__x { border: 0; background: var(--tan-lightest); color: var(--ink); inline-size: 36px; block-size: 36px; border-radius: var(--r-round); display: grid; place-items: center; cursor: pointer; }
.demo__lead { font-size: var(--t-b6); margin-block-end: 16px; }
.demo__list { display: grid; gap: 14px; }
.demo__list li { display: grid; gap: 2px; padding-block-end: 14px; border-block-end: 1px solid var(--tan-lighter); font-size: 14px; line-height: 1.45; }
.demo__k { font-weight: var(--w-mid); color: var(--plum-light); }
.demo__v { font-weight: var(--w-mid); }
.demo-noscript { padding: 12px var(--gutter); background: var(--tan-lightest); font-size: 14px; }
.smp { font-size: .8em; vertical-align: super; line-height: 0; margin-inline-start: 1px; color: inherit; opacity: .85; }
body:has(.cookie:not([hidden])) .demo { inset-block-end: 16px; }

/* =============================================================================
   A2 FIXES (1 Nov 2026, after the planner's first look)
   ========================================================================== */
/* (a) Arabic wordmark: the rebuilt SVG stacks its two lines (2.6:1); the box follows that aspect, aligned to the reading start */
[dir="rtl"] .brand__mark { -webkit-mask-position: right center; mask-position: right center; inline-size: 125px; block-size: 48px; }
@media (min-width: 1024px) { [dir="rtl"] .brand__mark { inline-size: 146px; block-size: 56px; } }
[dir="rtl"] .foot__base .brand__mark { inline-size: 146px; block-size: 56px; }

/* (c) hero name in two lines (Dr. Mohammad / BuAbbas): the story size, or the nearest that fits beside the portrait.
   "Dr. Mohammad" is about 6.2em wide in Alegreya Sans 700; 6.4 leaves a margin */
.spot__name > span { white-space: nowrap; }
.spot__name { font-size: min(var(--t-story), calc((min(100vw, 1536px) - 2 * var(--gutter)) / 6.4)); }
@media (min-width: 1024px) {
  .spot__txt { max-inline-size: none; }
  .spot__name { font-size: min(var(--t-story), calc((min(100vw, 1536px) - 2 * var(--gutter) - 64px - clamp(300px, 26vw, 456px)) / 6.4)); }
}

/* (d) cookie banner at Diriyah's size: 298 px tall at 1440, 314 at 390 (their d16 and x03) */
@media (max-width: 1023px) {
  .cookie { padding: 24px var(--gutter) 20px; }
  .cookie .motifs { margin-block: 12px; }
  .cookie__b { margin-block-start: 16px; }
}
/* the Demo notes button sits under the banner until a choice is made, so it never covers Accept */
body:has(.cookie:not([hidden])) .demo { z-index: 80; }

/* (e) the burger's three lines had no width inside the centred grid, so the button drew nothing */
.burger__lines { inline-size: 24px; }
/* AR hero: El Messiri's 1.3 line height on two name lines pushed the arrows under the fold at 1440; the name lines get 1.12
   and the nearest size that keeps the first screen whole (104 px at 1440) */
@media (min-width: 1024px) {
  [dir="rtl"] .spot__name { font-size: min(var(--t-story-ar), 7.25vw, 6.5rem); line-height: 1.12; }
}
/* the floating Demo notes button (studio chrome, bottom right in both languages) sat on the hero's next arrow in English */
@media (min-width: 768px) { body:has(.demo__btn) .spot__ctl { padding-block-end: 76px; } }
/* reel cards: his covers carry burned in Arabic subtitles, which ran straight through the card titles. The caption's
   backdrop blur (Diriyah's device, 3.75px) is raised and the dark gradient deepened so the title reads over any cover */
.tcard__cap { background: linear-gradient(to top, rgba(20, 12, 8, .86) 0%, rgba(20, 12, 8, .62) 62%, rgba(20, 12, 8, 0) 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to top, #000 78%, transparent); mask-image: linear-gradient(to top, #000 78%, transparent); }
.tcard__img img { object-position: 50% 18%; }
/* the Al Sadu band sat too strong behind the footer's fine print */
.foot__sadu { opacity: .1; }
/* phones: the thumbnails and the pause button stack under the story, so the story's text needs to end above both */
@media (max-width: 767px) { .vst__in { padding-block-end: 236px; } }
/* footer Ask field: the input's intrinsic width made the footer column 416 px wide on a 390 screen, pushing "Ask" off the edge */
.foot__top { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ask__in { inline-size: 0; }
/* phones: the title is centred, so the side gradient only greyed the sun at the top; a bottom gradient carries the text */

/* =============================================================================
   FIX WAVE 1 (1 Nov 2026, _work/FIX-WAVE-1.md)
   ========================================================================== */
/* 1, 2: the home hero is one screen tall at every width. Diriyah's veil: a header gradient on top and a brown gradient on
   the reading side only, clear from 55 percent; a light foot under the progress row, no heavy bottom wash */
.spot__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 22%),
  linear-gradient(0deg, rgba(30, 16, 10, .34) 0%, rgba(30, 16, 10, 0) 18%),
  linear-gradient(90deg, rgba(54, 31, 20, .8) 0%, rgba(54, 31, 20, .52) 30%, rgba(54, 31, 20, 0) 55%); }
[dir="rtl"] .spot__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 22%),
  linear-gradient(0deg, rgba(30, 16, 10, .34) 0%, rgba(30, 16, 10, 0) 18%),
  linear-gradient(270deg, rgba(54, 31, 20, .8) 0%, rgba(54, 31, 20, .52) 30%, rgba(54, 31, 20, 0) 55%); }
.spot__slide { min-block-size: max(560px, 100svh); }
@media (min-width: 1024px) {
  /* the mount follows the screen height, so the section never grows past the screen (C5) */
  .spot__in { padding-block-end: 156px; }
  .spot .mount { inline-size: min(clamp(300px, 26vw, 456px), calc((100svh - 324px) * 9 / 16)); }
}
@media (max-width: 1023px) {
  /* centred title on phones and tablets: the side gradient cannot carry it, so a soft lower veil does, lighter than before */
  .spot__bg::after, [dir="rtl"] .spot__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 20%),
    linear-gradient(0deg, rgba(30, 16, 10, .74) 0%, rgba(30, 16, 10, .5) 45%, rgba(30, 16, 10, .12) 72%, rgba(30, 16, 10, 0) 88%); }
}
@media (max-width: 767px) {
  /* phones (C1, C4): mount about 136 px wide, name 48 px, role 18 px, lede 16 px, so the buttons and the progress row sit
     inside 390x844 in both languages */
  .spot__in { gap: 14px; padding-block: calc(var(--head-h) + 6px) 118px; align-content: start; }
  .spot .mount { inline-size: 132px; }
  .spot__eyebrow { margin-block-end: 8px; }
  .spot__name, [dir="rtl"] .spot__name { font-size: 48px; line-height: .89; }
  [dir="rtl"] .spot__name { line-height: 1.05; }
  .spot__role, [dir="rtl"] .spot__role { margin-block-start: 8px; font-size: 18px; line-height: 1.35; }
  .spot .motifs { margin-block-start: 12px; }
  .spot__lede { margin-block-start: 10px; font-size: 16px; line-height: 1.4; }
  .spot .actions { margin-block-start: 16px; }
  /* the control row sits above the floating Demo notes pill (bottom right, studio chrome) */
  .spot__ctl { padding-block-end: 64px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .spot__in { padding-block-end: 168px; }
  .spot .mount { inline-size: 170px; }
}

/* 3, 4: the inner heroes show him: his crop in the torn-edge tan mount with the navy offset over a warm photo */
.sspot--p { justify-content: stretch; }
.sspot--p .sspot__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 30%),
  linear-gradient(0deg, rgba(30, 16, 10, .78) 0%, rgba(30, 16, 10, .5) 50%, rgba(30, 16, 10, .2) 100%); }
.sspot__in--p { inline-size: 100%; max-inline-size: var(--cap); margin-inline: auto; gap: 24px; text-align: center; }
.sspot__in--p .sspot__txt { display: grid; justify-items: center; }
.sspot--p .motifs { justify-content: center; }
.sspot--p .mount--in { order: -1; justify-self: center; inline-size: 132px; }
@media (min-width: 1024px) {
  .sspot--p .sspot__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(90deg, rgba(54, 31, 20, .82) 0%, rgba(54, 31, 20, .56) 38%, rgba(54, 31, 20, 0) 66%); }
  [dir="rtl"] .sspot--p .sspot__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(270deg, rgba(54, 31, 20, .82) 0%, rgba(54, 31, 20, .56) 38%, rgba(54, 31, 20, 0) 66%); }
  .sspot__in--p { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; gap: 64px;
    text-align: start; padding-block: calc(var(--head-h) + 40px) 64px; }
  .sspot__in--p .sspot__txt { justify-items: start; max-inline-size: 640px; }
  .sspot--p .motifs, .sspot--p .actions { justify-content: flex-start; }
  .sspot--p .mount--in { order: 0; justify-self: end; inline-size: auto; block-size: clamp(320px, 29vw, 420px); }
}
@media (max-width: 767px) { .sspot__in--p { padding-block: calc(var(--head-h) + 24px) 48px; } }

/* 5, 7: his crops in cards and in the promotion: keep the face in a landscape card; the promotion frame is his 4:5 */
.rcard__img img[data-photo^="ig-"], .lcard__img img[data-photo^="ig-"] { object-position: 50% 22%; }
.promo__fig { aspect-ratio: 4 / 5; max-inline-size: 560px; }
.promo__fig > .promo__img img[data-photo^="ig-"] { object-position: 50% 30%; }

/* 12: contact consent box, 20 px, 1 px border, 4 px radius, on the first line of its label; side cards in one column */
.field--check input { -webkit-appearance: none; appearance: none; inline-size: 20px; block-size: 20px; min-block-size: 0;
  margin: 2px 0 0; padding: 0; border: 1px solid #DDD0D5; border-radius: 4px; background: var(--white) no-repeat center / 14px 14px;
  cursor: pointer; }
.field--check input:checked { background-color: #623C2C; border-color: #623C2C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }
.field--check input:focus { box-shadow: none; }
.field--check input:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }
.field--check input[aria-invalid="true"] { border-color: #A3341F; }
.field--check label { line-height: 24px; }
.cform__side .icard { flex-direction: column; gap: 16px; }
.cform__side bdi, .cform__side a[href^="tel:"] { white-space: nowrap; }
.cform__side .tlink { flex-wrap: wrap; row-gap: 2px; }   /* the number moves to its own line instead of squeezing the label */

/* 13: the credential cards carry a 40 px tan line icon, stroke 1.5 px (DETAILS 13) */
.dcard__ic { display: block; inline-size: 40px; block-size: 40px; margin-block-end: 20px; color: var(--tan); }
.dcard__ic svg { inline-size: 40px; block-size: 40px; stroke-width: .9; }
/* 1: the Arabic name runs two El Messiri lines; at 96 px the first screen stays whole at 1440x900 */
@media (min-width: 1024px) { [dir="rtl"] .spot__name { font-size: min(var(--t-story-ar), 6.7vw, 6rem); } }

/* ---- hero on tablets and short phones (planner, after fix wave 1): the buttons and progress stay on the first screen ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .spot__name { font-size: 64px; }
  [dir="rtl"] .spot__name { font-size: 60px; }
  .spot .mount { inline-size: 150px; }
}
@media (max-width: 1023px) and (max-height: 720px) {
  .spot .mount { inline-size: 96px; }
  .spot__in { padding-block-start: calc(var(--head-h) + 8px); }
}