/* ==========================================================================
   BAKKAR PRINTING — THEME "MOMENTUM"
   base.css — reset, base typography, page shell, utilities,
              and the fully-styled HEADER + FOOTER.
   --------------------------------------------------------------------------
   OWNED BY: foundation agent. Page agents must NOT edit this file.
   Direction is handled with CSS LOGICAL PROPERTIES only. There is no mirrored
   RTL stylesheet anywhere in this theme.
   ========================================================================== */

/* ==========================================================================
   1. RESET / NORMALISE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--sp-6));
  -moz-tab-size: 2;
  tab-size: 2;
}

body {
  min-block-size: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* The one hard guarantee: nothing may ever scroll sideways. */
  overflow-x: hidden;
}

img, svg, video, canvas, iframe, picture {
  display: block;
  max-inline-size: 100%;
}
img, video { block-size: auto; }
img { border: 0; }

/* Icons inherit the text colour — but ONLY when they have not said otherwise.
   A bare `svg { fill: currentColor }` beats the fill="none" PRESENTATION
   ATTRIBUTE (CSS always wins over presentation attributes), which flooded
   every outline icon in the theme solid: the quote document became a filled
   slab, the magnifier a blob, the chevrons wedges. :not([fill]) leaves any
   icon that declares its own fill alone. */
svg:not([fill]) { fill: currentColor; }
svg { flex: none; }

button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { background: none; border: 0; cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; inline-size: 100%; }

[hidden] { display: none !important; }

fieldset { border: 0; min-inline-size: 0; }
legend { padding: 0; }

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Consistent, scroll-safe fixed-position behaviour when a dialog is open. */
body.is-locked {
  overflow: hidden;
  touch-action: none;
}

/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); letter-spacing: var(--ls-tighter); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); letter-spacing: var(--ls-tighter); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
h6 { font-size: var(--fs-sm); font-weight: var(--fw-bold); }

p { text-wrap: pretty; }

strong, b { font-weight: var(--fw-bold); color: var(--text); }
em, i { font-style: italic; }
small { font-size: var(--fs-xs); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

hr {
  border: 0;
  block-size: 1px;
  background: var(--line);
  margin-block: var(--sp-8);
}

/* Links inside flowing copy get the brand red + an animated underline.
   Structural links (nav, cards, buttons) opt out via their own classes. */
a:not([class]) {
  color: var(--link);
  font-weight: var(--fw-semibold);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--e-out), color var(--d-fast) var(--e-soft);
}
[dir="rtl"] a:not([class]) { background-position: 100% 100%; }
a:not([class]):hover { color: var(--link-hover); background-size: 100% 2px; }

/* Numbers, phone numbers, emails, sizes: always LTR, even inside Arabic. */
.ltr, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
.num, .tnum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   3. FOCUS — always visible, never removed
   ========================================================================== */
:focus { outline: none; }

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

/* On ink/photo surfaces the blue ring needs a light halo to survive. */
.on-ink :focus-visible,
.footer :focus-visible,
.hero-slide :focus-visible,
.cta-band :focus-visible {
  outline-color: #93B4FF;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--invert-bg);
  color: var(--invert-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  box-shadow: var(--sh-4);
  transform: translateY(-160%);
  transition: transform var(--d-base) var(--e-spring);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   4. PAGE SHELL
   ========================================================================== */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-inline-size: var(--w-2xl); }
.container--md   { max-inline-size: var(--w-md); }
.container--sm   { max-inline-size: var(--w-sm); }
.container--prose{ max-inline-size: var(--w-xs); }

.main { display: block; min-block-size: 40vh; }

/* Section rhythm + the tinted bands the theme leans on. */
.section { padding-block: var(--sp-section); }
.section--tight { padding-block: var(--sp-section-s); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section--warm { background: var(--bg-warm); }
.section--tint { background: var(--bg-tint); }
.section--soft { background: var(--grad-hot-soft); }
.section--ink {
  background: var(--bg-ink);
  color: var(--text-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

/* A tinted band with the rounded geometry the theme is built on. */
.band {
  border-radius: var(--r-3xl);
  padding: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
}
.band--warm { background: var(--bg-warm); box-shadow: var(--sh-ring-warm); }
.band--ink  { background: var(--grad-ink); color: var(--text-on-ink); }
.band--hot  { background: var(--grad-hot-soft); box-shadow: inset 0 0 0 1px var(--brand-soft-line); }

/* Page hero used by every inner page (home overrides it with the bento). */
.page-head {
  position: relative;
  padding-block: calc(var(--sp-12) + var(--sp-2)) var(--sp-10);
  background: var(--grad-paper);
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -6%;
  inline-size: 46rem;
  block-size: 46rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(249,115,22,.10) 0%, rgba(255,0,16,.06) 45%, rgba(255,0,16,0) 70%);
  pointer-events: none;
}
.page-head__in { position: relative; z-index: var(--z-raised); }
.page-head__title { font-size: var(--fs-4xl); }
.page-head__sub {
  margin-block-start: var(--sp-4);
  max-inline-size: 56ch;
  color: var(--text-2);
  font-size: var(--fs-md);
}

/* --- SLIM page head -------------------------------------------------------
   The listing pages must START WITH THE CONTENT. This variant is a thin band
   (~120px desktop, ~92px mobile): breadcrumb, a modest H1, at most one short
   line of sub-copy. No eyebrow, no metric pills, no chip rows, no big padding.

     <header class="page-head page-head--slim">
       <div class="container page-head__in">
         <nav class="crumbs">…</nav>                     <- optional
         <h1 class="page-head__title">All Products</h1>
         <p class="page-head__sub">One short line.</p>   <- optional
       </div>
     </header>
   -------------------------------------------------------------------------- */
.page-head--slim {
  padding-block: var(--sp-4);
  background: var(--bg-warm);
  border-block-end: 1px solid var(--line);
}
.page-head--slim::before { display: none; }          /* no giant glow orb */
.page-head--slim .page-head__in {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-head--slim .crumbs { margin-block-end: 0; }
.page-head--slim .page-head__title {
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.page-head--slim .page-head__sub {
  margin-block-start: 0;
  max-inline-size: 78ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  /* ONE line of sub-copy. Anything longer belongs in the page body — that is
     the whole point of this variant. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 767px) {
  .page-head--slim { padding-block: var(--sp-3); }
  .page-head--slim .page-head__title { font-size: var(--fs-lg); }
}

/* ==========================================================================
   5. TOPBAR  (thin ink strip above the header; collapses on scroll)
   ========================================================================== */
.topbar {
  position: relative;
  z-index: var(--z-header);
  background: var(--bg-ink);
  color: var(--text-on-ink-2);
  font-size: var(--fs-xs);
  block-size: var(--topbar-h);
  overflow: hidden;
  transition: block-size var(--d-base) var(--e-out), opacity var(--d-fast) var(--e-soft);
}
body[data-scrolled="true"] .topbar {
  block-size: 0;
  opacity: 0;
}
/* The CHROME (topbar + header) runs on a slightly wider grid than the page
   body — it is a full-bleed bar, and the extra room is what lets the header
   carry brand + a 7-item nav + search + customiser + language + CTA without
   ever clipping. */
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-inline-size: var(--w-chrome);
  block-size: var(--topbar-h);
  min-inline-size: 0;
}
/* The note is a flex CONTAINER, so text-overflow can never apply to it — its
   text lives in a child <span>, and text-overflow only ever truncates a block
   container's own inline content. Left on the parent it just hard-cut the
   tagline mid-word at ~768px. So: let the note shrink below its content width
   (min-inline-size:0 — flex items default to min-*-size:auto and refuse to),
   and hang the ellipsis on the span that actually holds the text. */
.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  min-inline-size: 0;
  overflow: hidden;
}
.topbar__note > span:not(.topbar__dot) {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-circle);
  background: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .22);
  flex: none;
}
.topbar__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-on-ink-2);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-soft);
}
.topbar__link:hover { color: #fff; }
.topbar__link svg { inline-size: 14px; block-size: 14px; opacity: .7; }

@media (max-width: 767px) {
  .topbar__note { display: none; }
  .topbar__in { justify-content: center; }
  .topbar__links { gap: var(--sp-4); }
  .topbar__link--mail { display: none; }
}

/* ==========================================================================
   6. HEADER  (glassy, sticky, condenses on scroll)
   --------------------------------------------------------------------------
   THE HEADER PAINTS ITSELF ENTIRELY FROM --hdr-* TOKENS (tokens.css §9b).
   That is what makes the customiser's "Bakkar Red" option a one-line change:
   :root[data-header="red"] re-points those tokens and every child inverts.
   Never hard-code a colour in here.

   MOBILE (< 1024px) THE HEADER CARRIES EXACTLY THREE THINGS:
     the logo, the search icon, the burger.
   The language switcher and the Request-a-Quote CTA live in the drawer.
   ========================================================================== */
.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--hdr-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-block-end: 1px solid var(--hdr-line);
  transition:
    background var(--d-base) var(--e-soft),
    box-shadow var(--d-base) var(--e-soft),
    border-color var(--d-base) var(--e-soft);
}
/* No backdrop-filter support -> fall back to a near-solid bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: var(--hdr-bg-solid); }
}
/* The red header is a solid gradient: blurring it just muddies the red. */
:root[data-header="red"] .hdr {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-scrolled="true"] .hdr {
  background: var(--hdr-bg-solid);
  border-block-end-color: var(--hdr-line-lit);
  box-shadow: var(--hdr-sh);
}

/* Focus rings inside the chrome follow the chrome, so a blue ring never lands
   on a red bar (where it is effectively invisible). */
.hdr :focus-visible { outline-color: var(--hdr-focus); }
.drawer :focus-visible { outline-color: var(--dw-focus); }

/* THE HEADER FITS. That is a hard rule, not an aspiration.
   The row is one nowrap flex line and every child declares how it behaves
   when the line runs short:
     brand    flex:none, its TEXT only appears at >= 1440
     nav      flex:0 1 auto, min-inline-size:0  (hidden below 1024 -> burger)
     actions  flex:none. Below 1024 everything but the search icon and the
              burger leaves the bar and reappears in the drawer.
   Budget at 1280 (content 1216, EN):
     brand 44 + nav 624 + search 44 + customiser 44 + lang 158 + cta 176
     + gaps 48 ≈ 1138. */
.hdr__in {
  position: relative;   /* containing block for the mega menu */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  max-inline-size: var(--w-chrome);
  min-inline-size: 0;
  block-size: var(--header-h);
  transition: block-size var(--d-base) var(--e-out);
}
@media (min-width: 1440px) { .hdr__in { gap: var(--sp-3); } }
body[data-scrolled="true"] .hdr__in { block-size: var(--header-h-condensed); }

/* ---- brand lock-up ----
   The mark is the app-icon: a rounded square that is ITSELF solid Bakkar red.
   On the default header (light or dark) it sits on the bar directly and reads
   as an emblem. On the RED header that would be a red square on a red bar — a
   smudge — so --hdr-mark-plate turns on a white chip behind it and the mark
   becomes a deliberate badge instead of a sticker. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  min-inline-size: 0;
  border-radius: var(--r-md);
  transition: transform var(--d-quick) var(--e-spring);
}
.brand:hover { transform: scale(1.02); }
.brand__plate {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border-radius: 13px;
  background: var(--hdr-mark-plate);
  box-shadow: var(--hdr-mark-ring);
  transition:
    padding var(--d-base) var(--e-out),
    background var(--d-base) var(--e-soft),
    box-shadow var(--d-base) var(--e-soft);
}
:root[data-header="red"] .brand__plate { padding: 5px; }
.brand__mark {
  inline-size: 44px;
  block-size: 44px;
  object-fit: contain;
  flex: none;
  transition: inline-size var(--d-base) var(--e-out), block-size var(--d-base) var(--e-out);
}
body[data-scrolled="true"] .brand__mark { inline-size: 36px; block-size: 36px; }

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-inline-size: 0;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--hdr-fg);
  white-space: nowrap;
}
.brand__tag {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--hdr-fg-3);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  transition: opacity var(--d-fast) var(--e-soft), max-block-size var(--d-base) var(--e-out);
  max-block-size: 2em;
  overflow: hidden;
}
body[data-scrolled="true"] .brand__tag { opacity: 0; max-block-size: 0; }

/* The monogram owns the bar only where the horizontal 7-item nav does — i.e.
   desktop. On mobile/tablet the nav is collapsed into the burger (<=1023px:
   .nav{display:none} L581, .burger{display:inline-flex} L916, and the cust
   button / language switch / CTA all move into the drawer), so the row has
   room and the NAME rides beside the logo the way studio/vivid do. The tagline
   stays a desktop-only luxury. */
.brand__text { display: flex; }   /* mobile/tablet: show the wordmark box */
.brand__tag  { display: none; }   /* small screens: NAME only, no slogan */
/* Never let the full-length name blow out a narrow bar — truncate instead. */
.brand__name { overflow: hidden; text-overflow: ellipsis; }
/* Let the brand shrink where the wordmark is shown (mobile/tablet) so the
   name ellipsises rather than pushing the burger off-screen; min-inline-size:0
   is already set on .brand (L464). Desktop keeps flex:none (wordmark hidden
   1024-1439, and at >=1440 the name fits), so this is a no-op there. */
@media (max-width: 1023px) { .brand { flex: 0 1 auto; } }
/* Crowded mid-desktop band (1024-1439): the full nav is up but the row hasn't
   earned room for the wordmark yet, so the whole thing yields. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .brand__text { display: none; }
}
/* Large desktop: genuine room — name AND slogan both return. */
@media (min-width: 1440px) {
  .brand__text { display: flex; }
  .brand__tag  { display: block; }
}

/* ---- primary nav (pills) ----
   Home · Products ▾ · All Products · Categories · About Us · Our Agents ·
   Contact Us — IDENTICAL to the drawer, same order, same labels, same
   [data-nav] active mechanism. */
.nav {
  flex: 0 1 auto;
  min-inline-size: 0;
  margin-inline-start: var(--sp-1);
}
.nav__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  block-size: 40px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--hdr-fg-2);
  white-space: nowrap;
  transition:
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    transform var(--d-quick) var(--e-spring);
}
@media (min-width: 1536px) { .nav__link { padding-inline: var(--sp-3); } }
.nav__link:hover {
  background: var(--hdr-hover-bg);
  color: var(--hdr-hover-fg);
  transform: translateY(-1px);
}
.nav__link[aria-current="page"],
.nav__link.is-active {
  background: var(--hdr-active-bg);
  color: var(--hdr-active-fg);
  font-weight: var(--fw-bold);
}
.nav__link[aria-expanded="true"] {
  background: var(--hdr-hover-bg);
  color: var(--hdr-hover-fg);
}
.nav__caret {
  inline-size: 12px;
  block-size: 12px;
  opacity: .6;
  transition: transform var(--d-quick) var(--e-spring);
}
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

@media (max-width: 1023px) {
  .nav { display: none; }
}

/* ---- mega menu ----
   Anchored to .hdr__in (the header container), NOT to the little <li> — so it
   spans the content width and can never overflow the viewport. Direction-
   agnostic: inset-inline handles LTR and RTL with the same declaration.
   The panel is a normal SURFACE even under a red header: a red mega menu on a
   red bar would be an unreadable wall. */
.mega {
  position: absolute;
  inset-block-start: calc(100% + 2px);
  inset-inline: 0;
  z-index: var(--z-mega);
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-5), var(--sh-ring);
  animation: mega-in var(--d-base) var(--e-out) both;
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.mega :focus-visible { outline-color: var(--focus); }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.mega__col {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  transition: background var(--d-quick) var(--e-soft);
}
.mega__col:hover { background: var(--surface-2); }
.mega__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}
.mega__thumb {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--surface-3);
  flex: none;
}
.mega__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--text);
  line-height: 1.25;
}
.mega__count {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
}
.mega__links { display: flex; flex-direction: column; gap: 2px; }
.mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-2);
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft), padding-inline-start var(--d-quick) var(--e-spring);
}
.mega__link:hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
  padding-inline-start: var(--sp-4);
}
.mega__link .mega__n {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}
.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: var(--border);
}
.mega__note {
  font-size: var(--fs-sm);
  color: var(--text-2);
  max-inline-size: 48ch;
}

/* ---- header actions ---- */
.hdr__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
  flex: none;
  min-inline-size: 0;
}
@media (max-width: 559px) { .hdr__actions { gap: 6px; } }

/* ---- the two chrome icon buttons: search + customiser ----
   These are NOT .btn — a .btn on a red bar would need a pile of overrides.
   They are their own thing, and they read from --hdr-btn-*. */
.hdr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  flex: none;
  border-radius: var(--r-pill);
  background: var(--hdr-btn-bg);
  color: var(--hdr-btn-fg);
  transition:
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    transform var(--d-quick) var(--e-spring);
}
.hdr__btn:hover {
  background: var(--hdr-btn-bg-h);
  color: var(--hdr-btn-fg-h);
  transform: translateY(-1px);
}
.hdr__btn[aria-expanded="true"] {
  background: var(--hdr-btn-bg-h);
  color: var(--hdr-btn-fg-h);
}
.hdr__btn svg { inline-size: 19px; block-size: 19px; }

/* The customiser lives in the drawer on mobile (the bar is down to logo +
   search + burger there). */
@media (max-width: 1023px) {
  .hdr__btn--cust { display: none; }
}

/* ---- language switch — SEGMENTED TOGGLE ----
   Both languages are on screen at once and the live one is unmistakable. No
   mystery-meat globe.

   LABELS: the full words in each script ("English" / "العربية") from 1024 up;
   "EN" / "ع" below that (which is where the control lives INSIDE THE DRAWER).
   The accessible name is the aria-label either way, so nothing is ever lost.

   THE THUMB is placed with inset-inline-start, never translateX, so it tracks
   the active option when the direction flips. DOM order is EN,AR; in RTL the
   grid puts EN at the inline-start (visually right) and the thumb follows it,
   because both use the same logical axis.

   EQUAL HALVES — load-bearing. The thumb is a 50%-wide box parked at
   inset-inline-start 4px|50%, so the two options must be EXACTLY half the pill
   each. That is a grid, not a flex row: two 1fr columns resolve to 2 x the
   widest option. (flex:1 1 0 lets the Arabic label overflow its own box.) The
   thumb is absolutely positioned, so it is out of flow and claims no column. */
.langsw {
  /* Skinned by whichever chrome it is sitting in. */
  --seg-bg:     var(--hdr-seg-bg);
  --seg-line:   var(--hdr-seg-line);
  --seg-fg:     var(--hdr-seg-fg);
  --seg-fg-on:  var(--hdr-seg-fg-on);
  --seg-thumb:  var(--hdr-seg-thumb);

  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  flex: none;
  /* No block padding: each option is a full 44px touch target, and the 4px
     inset lives on the thumb instead. Same look, honest tap area. */
  padding-inline: 4px;
  block-size: var(--tap);
  border-radius: var(--r-pill);
  background: var(--seg-bg);
  box-shadow: inset 0 0 0 1px var(--seg-line);
}
.drawer .langsw {
  --seg-bg:     var(--dw-seg-bg);
  --seg-line:   var(--dw-seg-line);
  --seg-fg:     var(--dw-seg-fg);
  --seg-fg-on:  var(--dw-seg-fg-on);
  --seg-thumb:  var(--dw-seg-thumb);
}
.langsw--block { display: grid; inline-size: 100%; }

.langsw__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap);
  block-size: var(--tap);
  padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  white-space: nowrap;
  color: var(--seg-fg);
  transition: color var(--d-quick) var(--e-soft);
}
.langsw__opt:hover { color: var(--seg-fg-on); }
.langsw__opt[aria-pressed="true"] { color: var(--seg-fg-on); }
/* Each label renders in its OWN script's face, whatever the UI language is. */
.langsw__opt[data-lang="en"] .langsw__label { font-family: var(--font-display); letter-spacing: var(--ls-wide); }
.langsw__opt[data-lang="ar"] .langsw__label {
  font-family: var(--font-ar);
  letter-spacing: 0;
  font-size: var(--fs-sm);
}
[dir="rtl"] .langsw__opt[data-lang="en"] .langsw__label {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.02em;
}

/* Initials in the cramped header bar; full words from 1024 up. */
.langsw__label--long  { display: none; }
.langsw__label--short { display: inline; }
@media (min-width: 1024px) {
  .langsw__label--long  { display: inline; }
  .langsw__label--short { display: none; }
}
/* …but the drawer is full-width and has room, so it ALWAYS spells them out. */
.langsw--block .langsw__label--long  { display: inline; }
.langsw--block .langsw__label--short { display: none; }

.langsw__thumb {
  position: absolute;
  z-index: 0;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--seg-thumb);
  box-shadow: var(--sh-2);
  transition: inset-inline-start var(--d-base) var(--e-spring);
}
.langsw[data-active="ar"] .langsw__thumb { inset-inline-start: 50%; }

/* MOBILE: the switcher is not in the bar at all — it is in the drawer. */
@media (max-width: 1023px) {
  .hdr .langsw { display: none; }
}

/* ---- header quote CTA ----
   The one funnel. It is NOT .btn--primary: on the red header a red gradient
   button would disappear into the bar, so it reads from --hdr-cta-* and
   inverts to a white pill with red type. */
/* Scoped to .hdr deliberately: components.css loads AFTER this file, so a bare
   `.hdr__cta` (0,1,0) loses to `.btn` (0,1,0) on source order and the button
   silently falls back to the default paper fill. `.hdr .hdr__cta` (0,2,0) wins. */
.hdr .hdr__cta {
  --btn-bg: var(--hdr-cta-bg);
  --btn-fg: var(--hdr-cta-fg);
  --btn-sh: var(--hdr-cta-sh);
  flex: none;
}
.hdr__cta:hover { --btn-sh: var(--glow-brand-lg), var(--sh-3); }
:root[data-header="red"] .hdr__cta:hover {
  --btn-sh: 0 14px 30px -10px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .3);
}
/* Sheen sweep, same as .btn--primary. */
.hdr__cta::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 55%;
  z-index: -1;
  background: var(--grad-sheen);
  transform: skewX(-18deg);
  opacity: 0;
  transition: inset-inline-start var(--d-slower) var(--e-out), opacity var(--d-fast) var(--e-soft);
}
.hdr__cta:hover::after { inset-inline-start: 110%; opacity: 1; }
:root[data-header="red"] .hdr__cta::after { display: none; }

.hdr__cta-label { display: inline; }

/* MOBILE: the CTA leaves the bar and becomes the drawer's foot button. */
@media (max-width: 1023px) {
  .hdr .hdr__cta { display: none; }
}

/* ---- burger ---- */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-pill);
  background: var(--hdr-burger-bg);
  color: var(--hdr-burger-fg);
  flex: none;
  transition: transform var(--d-quick) var(--e-spring), background var(--d-quick) var(--e-soft);
}
.burger:hover { transform: scale(1.05); }
.burger__box {
  position: relative;
  inline-size: 18px;
  block-size: 12px;
}
.burger__bar {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--d-base) var(--e-spring), opacity var(--d-fast) var(--e-soft);
}
.burger__bar:nth-child(1) { inset-block-start: 0; }
.burger__bar:nth-child(2) { inset-block-start: 5px; }
.burger__bar:nth-child(3) { inset-block-start: 10px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) { .burger { display: inline-flex; } }

/* ==========================================================================
   7. MOBILE DRAWER
   --------------------------------------------------------------------------
   Paints itself from --dw-* (tokens.css §9b). The customiser's "Mobile sidebar
   style: Bakkar Red" re-points those and the whole panel inverts to white-on-red
   — independently of the header.

   It carries the SAME nav as the header (same items, same order, same labels),
   plus the language switcher and the quote CTA that the mobile bar gave up.
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
  animation: fade-in var(--d-base) var(--e-soft) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(88vw, 400px);
  display: flex;
  flex-direction: column;
  background: var(--dw-bg);
  color: var(--dw-fg);
  box-shadow: var(--sh-5);
  border-start-start-radius: var(--r-2xl);
  border-end-start-radius: var(--r-2xl);
  animation: drawer-in var(--d-slow) var(--e-out) both;
  overflow: hidden;
}
@keyframes drawer-in {
  from { transform: translateX(102%); }
  to   { transform: translateX(0); }
}
[dir="rtl"] .drawer__panel { animation-name: drawer-in-rtl; }
@keyframes drawer-in-rtl {
  from { transform: translateX(-102%); }
  to   { transform: translateX(0); }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--dw-line);
  flex: none;
}
.drawer__brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-inline-size: 0; }
.drawer__plate {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border-radius: 11px;
  background: var(--dw-mark-plate);
}
:root[data-sidebar="red"] .drawer__plate { padding: 4px; }
.drawer__brand img { inline-size: 36px; block-size: 36px; object-fit: contain; }
.drawer__brand-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--dw-fg);
  min-inline-size: 0;
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-pill);
  background: var(--dw-btn-bg);
  color: var(--dw-btn-fg);
  flex: none;
  transition: background var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.drawer__close:hover { background: var(--dw-active-bg); color: var(--dw-active-fg); transform: rotate(90deg); }
.drawer__close svg { inline-size: 15px; block-size: 15px; }

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}

.drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--dw-fg);
  text-align: start;
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.drawer__link:hover { background: var(--dw-hover-bg); color: var(--dw-hover-fg); }
.drawer__link[aria-current="page"] { background: var(--dw-active-bg); color: var(--dw-active-fg); }
.drawer__link svg { inline-size: 14px; block-size: 14px; opacity: .55; flex: none; transition: transform var(--d-quick) var(--e-spring); }
.drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.drawer__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-inline-start: var(--sp-4);
  margin-block: var(--sp-1) var(--sp-2);
  border-inline-start: 2px solid var(--dw-line);
}
.drawer__sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--dw-fg-2);
  transition: background var(--d-fast) var(--e-soft), color var(--d-fast) var(--e-soft);
}
.drawer__sublink:hover { background: var(--dw-sub-bg); color: var(--dw-fg); }
.drawer__sublink .mega__n { font-family: var(--font-num); font-size: var(--fs-2xs); color: var(--dw-fg-3); }

.drawer__divider {
  block-size: 1px;
  background: var(--dw-line);
  margin-block: var(--sp-5);
}
.drawer__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--dw-fg-3);
  margin-block-end: var(--sp-3);
}
[dir="rtl"] .drawer__label { text-transform: none; font-size: var(--fs-xs); }

/* The customiser lives INLINE in the drawer — the options sit right there under
   the label. Opening a second overlay from inside an already-open drawer was
   inconsistent (and stacked two focus traps), so the drawer just shows them. */
.drawer__cust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--dw-sub-bg);
}
.drawer__cust .cust__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.drawer__cust .cust__legend {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--dw-fg-3);
}
/* the segmented radiogroups stretch to the drawer's full width */
.drawer__cust .seg { inline-size: 100%; }
.drawer__cust .seg__opt { flex: 1 1 0; min-inline-size: 0; justify-content: center; }

.drawer__contact { display: flex; flex-direction: column; gap: var(--sp-2); }
.drawer__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 40px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--dw-fg-2);
  transition: color var(--d-fast) var(--e-soft);
}
.drawer__contact a:hover { color: var(--dw-fg); }
.drawer__contact svg { inline-size: 16px; block-size: 16px; color: var(--dw-icon); flex: none; }

.drawer__foot {
  flex: none;
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--dw-line);
  background: var(--dw-bg-2);
}
/* The primary conversion action. It is the biggest, loudest thing in the panel
   — and on a red sidebar it inverts to a white pill so it still stands out. */
.drawer__cta {
  --btn-bg: var(--dw-cta-bg);
  --btn-fg: var(--dw-cta-fg);
  --btn-sh: var(--dw-cta-sh);
}
.drawer__note {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--dw-fg-3);
  text-align: center;
}

/* ==========================================================================
   8. (was the floating quote FAB — REMOVED)
   The drawer now carries the quote CTA on mobile and the header carries it on
   desktop, so a second floating quote button was just clutter competing with it.
   ========================================================================== */

/* ==========================================================================
   9. FOOTER  (an ink slab in BOTH themes — it is the page's full stop)
   ========================================================================== */
.footer {
  position: relative;
  margin-block-start: var(--sp-section);
  padding-block: clamp(3rem, 2rem + 3.4vw, 4.5rem) var(--sp-8);
  background: var(--bg-ink);
  color: var(--text-on-ink-2);
  border-start-start-radius: var(--r-3xl);
  border-start-end-radius: var(--r-3xl);
  overflow: hidden;
}
/* Warm glow so the ink slab does not read as a dead rectangle. */
.footer::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -10%;
  inline-size: 40rem;
  block-size: 40rem;
  border-radius: var(--r-circle);
  background: radial-gradient(circle, rgba(255,0,16,.22) 0%, rgba(249,115,22,.08) 40%, rgba(255,0,16,0) 68%);
  pointer-events: none;
}
.footer__in { position: relative; z-index: var(--z-raised); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.35fr;
  gap: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
}
@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
/* The mark is a red app-icon; on the ink slab it needs no plate at all — it
   reads as a lit emblem. A soft rim keeps its rounded corners from vanishing. */
.footer__logo {
  inline-size: 52px;
  block-size: 52px;
  border-radius: 15px;
  object-fit: contain;
  flex: none;
  box-shadow: 0 10px 26px -10px rgba(255, 0, 16, .55);
}
.footer__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  color: #fff;
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
}
.footer__slogan {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--amber-300);
  letter-spacing: var(--ls-wide);
}
.footer__about {
  margin-block-start: var(--sp-5);
  max-inline-size: 42ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-ink-2);
}

.footer__title {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #fff;
}
[dir="rtl"] .footer__title { text-transform: none; font-size: var(--fs-xs); }

.footer__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  inline-size: fit-content;
  padding-block: 5px;
  font-size: var(--fs-sm);
  color: var(--text-on-ink-2);
  transition: color var(--d-fast) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.footer__link::before {
  content: '';
  inline-size: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--grad-hot);
  transition: inline-size var(--d-base) var(--e-spring);
}
.footer__link:hover { color: #fff; transform: translateX(2px); }
[dir="rtl"] .footer__link:hover { transform: translateX(-2px); }
.footer__link:hover::before { inline-size: 12px; }

.footer__contact { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.footer__row svg {
  inline-size: 17px;
  block-size: 17px;
  margin-block-start: 3px;
  color: var(--amber-400);
  flex: none;
}
.footer__row a { color: var(--text-on-ink-2); transition: color var(--d-fast) var(--e-soft); }
.footer__row a:hover { color: #fff; }
.footer__row strong {
  display: block;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  margin-block-end: 2px;
}

.footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: background var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.footer__social a:hover { background: var(--grad-hot); transform: translateY(-3px); }
.footer__social svg { inline-size: 17px; block-size: 17px; }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line-ink);
  font-size: var(--fs-xs);
}
.footer__copy { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.footer__made { color: var(--ink-500); }
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-weight: var(--fw-bold);
  transition: background var(--d-quick) var(--e-soft), transform var(--d-quick) var(--e-spring);
}
.footer__top:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.footer__top svg { inline-size: 13px; block-size: 13px; }


/* ==========================================================================
   10. SCROLL REVEAL  (driven by IntersectionObserver in app.js)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="scale"] { transform: translateY(14px) scale(.97); }
[data-reveal="left"]  { transform: translateX(-22px); }
[data-reveal="right"] { transform: translateX(22px); }
[dir="rtl"] [data-reveal="left"]  { transform: translateX(22px); }
[dir="rtl"] [data-reveal="right"] { transform: translateX(-22px); }

/* A not-yet-revealed element sits 22px off its resting place. Below 768px the
   page gutter is only ~16px, so a full-width element parked at translateX(-22px)
   hangs 6px OFF THE VIEWPORT until it scrolls into view — a real horizontal
   overflow that body{overflow-x:hidden} was quietly clipping. On small screens
   the sideways reveals become the vertical one. Same feel, no overhang. */
@media (max-width: 767px) {
  [data-reveal="left"],
  [data-reveal="right"],
  [dir="rtl"] [data-reveal="left"],
  [dir="rtl"] [data-reveal="right"] { transform: translateY(18px); }
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ==========================================================================
   11. UTILITIES
   ========================================================================== */
.visually-hidden,
.sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack       { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-block-start: var(--sp-2); }
.stack-3 > * + * { margin-block-start: var(--sp-3); }
.stack-4 > * + * { margin-block-start: var(--sp-4); }
.stack-6 > * + * { margin-block-start: var(--sp-6); }
.stack-8 > * + * { margin-block-start: var(--sp-8); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }
.row--top { align-items: flex-start; }

.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Auto-fit product grids: never fewer than 2 up until 560px. */
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.grid-cards-lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.flow > * + * { margin-block-start: var(--flow, var(--sp-4)); }

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }
.text-balance{ text-wrap: balance; }
.mx-auto     { margin-inline: auto; }
.w-prose     { max-inline-size: 62ch; }
.w-narrow    { max-inline-size: 48ch; }

.muted   { color: var(--text-2); }
.faint   { color: var(--text-3); }
.hot     { color: var(--brand-ink); }
.on-ink  { color: var(--text-on-ink); }

/* Big display type may use the true brand red / gradient — it clears the
   3:1 large-text threshold comfortably. */
.grad-text {
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-inline-end: 0.06em;   /* stops the last glyph clipping */
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text { color: var(--brand-ink); -webkit-text-fill-color: currentColor; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-ink);
}
[dir="rtl"] .eyebrow { text-transform: none; }
.eyebrow::before {
  content: '';
  inline-size: 22px;
  block-size: 3px;
  border-radius: 3px;
  background: var(--grad-hot);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--ink { color: var(--amber-400); }

.hide-sm { }
@media (max-width: 767px) { .hide-sm { display: none !important; } }
@media (min-width: 768px) { .only-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }

/* Directional glyphs (arrows, chevrons) mirror; logos and photos never do. */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* Aspect helpers for photography. */
.ratio { position: relative; overflow: hidden; }
.ratio > img,
.ratio > iframe,
.ratio > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ratio--1x1   { aspect-ratio: 1 / 1; }
.ratio--4x3   { aspect-ratio: 4 / 3; }
.ratio--3x2   { aspect-ratio: 3 / 2; }
.ratio--16x9  { aspect-ratio: 16 / 9; }
.ratio--21x9  { aspect-ratio: 21 / 9; }

/* Rich HTML coming out of data.js description_en / description_ar. */
.prose { color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose h4 {
  margin-block-start: var(--sp-8);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}
.prose h4:first-child { margin-block-start: 0; }
.prose p { color: var(--text-2); }
.prose strong { color: var(--text); font-weight: var(--fw-bold); }
.prose ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.prose li {
  position: relative;
  padding-inline-start: var(--sp-7);
  color: var(--text-2);
}
.prose li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--r-circle);
  background: var(--grad-hot);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.prose a { color: var(--link); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   12. REDUCED MOTION — respected everywhere, no exceptions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* The language thumb still MOVES (it must, it is the state indicator) —
     it just gets there instantly. */
  .langsw__thumb { transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   13. PRINT
   ========================================================================== */
@media print {
  .topbar, .hdr, .drawer, .sdlg, .cust, .footer__social, .footer__top, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
  .footer { background: #fff; color: #000; border-radius: 0; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; }
}