/* ==========================================================================
   STUDIO — base.css
   Reset · base typography · page shell · utilities · HEADER · FOOTER

   Every layout property in this file is LOGICAL (inline-start/end, not
   left/right). Nothing here needs a [dir="rtl"] override to lay out
   correctly — RTL falls out of the logical properties for free. The only
   RTL rules present are for things that must MIRROR (icons/chevrons), which
   is a genuinely directional concern, not a layout one.
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header must not cover an anchored section. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-block-size: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Belt-and-braces against a stray wide child on small screens. */
  overflow-x: clip;
}

img,
svg,
video,
canvas { display: block; max-inline-size: 100%; }

img,
video { block-size: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: none; cursor: pointer; }

ul[role="list"],
ol[role="list"] { list-style: none; }

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

:target { scroll-margin-block-start: calc(var(--header-h) + var(--sp-6)); }

/* Kill the smooth-scroll + reveal machinery for print. */
@media print {
  .hdr, .drawer, .to-top, .footer__bottom { display: none !important; }
}

/* ==========================================================================
   2. TYPOGRAPHY
   Display type is set TIGHT (-0.03em) and heavy-ish. That tension — big,
   tight, quiet — is the type voice of this theme.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  transition: var(--t-color);
}

/* A plain inline link inside prose: quiet, with the red arriving on hover. */
.link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link:hover {
  color: var(--text-accent);
  text-decoration-color: currentColor;
}

strong, b { font-weight: var(--fw-semibold); color: var(--text); }

small { font-size: var(--fs-xs); }

/* Numbers — tabular so stats and specs never wobble. */
.num,
.stat__value,
.spec__value { font-variant-numeric: tabular-nums; }

/* --- The small uppercase meta label. A signature of this theme. --------- */
.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.label--accent { color: var(--text-accent); }
.label--on-ink { color: var(--text-on-ink-mut); }

/* Arabic is a connected script — uppercase + tracking would destroy it. */
[dir="rtl"] .label { text-transform: none; letter-spacing: 0; }

/* A label with the little red tick before it. */
.label--dot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.label--dot::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  letter-spacing: var(--ls-body);
}

.muted { color: var(--text-muted); }

/* Prose block (rich HTML from data.js). */
.prose { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.prose > * + * { margin-block-start: var(--sp-4); }
.prose h3, .prose h4 { color: var(--text); margin-block-start: var(--sp-7); }
.prose ul, .prose ol { padding-inline-start: var(--sp-5); }
.prose li + li { margin-block-start: var(--sp-2); }
.prose strong { color: var(--text); }
.prose a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   3. FOCUS — always visible, always the brand red. Never removed.
   ========================================================================== */
:focus { outline: none; }

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

/* On the dark band the red ring is muddy — go white. */
.band--ink :focus-visible,
.drawer :focus-visible { outline-color: var(--focus); }
.band--ink a:focus-visible,
.band--ink button:focus-visible { outline-color: var(--c-white); }

.skip {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-ink);
  color: var(--text-on-ink);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

/* ==========================================================================
   4. SHELL
   ========================================================================== */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-inline-size: var(--container-wide); }
.container--prose { max-inline-size: var(--container-prose); }

main { display: block; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--flush-top { padding-block-start: 0; }

/* Bands. The page alternates white / grey-50, separated by hairlines.
   The ONE ink band is the closing CTA — the page's only dark moment. */
.band--surface { background: var(--bg-surface); }
.band--ink { background: var(--bg-ink); color: var(--text-on-ink); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--text-on-ink); }
.band--ink .lead { color: var(--text-on-ink-mut); }

/* Hairline rules that do the structural separation. */
.rule       { border: 0; border-block-start: var(--border-1); }
.rule--top    { border-block-start: var(--border-1); }
.rule--bottom { border-block-end: var(--border-1); }

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

.is-hidden,
[hidden] { display: none !important; }

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

.text-start { text-align: start; }
.text-center { text-align: center; }

.nowrap { white-space: nowrap; }

/* Phone numbers / latin codes must stay LTR even inside Arabic. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.bidi-iso { unicode-bidi: isolate; }

/* Mirror an icon in RTL (chevrons, arrows). */
[dir="rtl"] .mirror { transform: scaleX(-1); }

/* Language visibility: app.js sets .lang-en / .lang-ar on <html>. */
.lang-ar .only-en,
.lang-en .only-ar { display: none !important; }

/* ==========================================================================
   6. SCROLL-REVEAL
   Fades and settles. 10px, not 40px. It should read as "arriving", never
   as "flying in".
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   7. HEADER
   Opaque + a hairline. NOT glassy — that is Momentum's move. The hairline
   only arrives once the page has scrolled, so at rest the header dissolves
   into the page.

   EVERY colour in here comes from a --hdr-* token. That is the whole reason
   the customiser's "Bakkar Red" option costs zero code below this line: it
   just re-points those twenty tokens (tokens.css). Light, dark and red are
   three values of one contract. Do not hardcode a colour in this section.

   THE WIDTH BUDGET — and it is spent.

     < 1080  MOBILE BAR:  logo · search icon · burger.  NOTHING ELSE.
                          The language switcher and the Request-a-Quote CTA
                          live in the DRAWER at these widths — the CTA is the
                          primary conversion action and gets the drawer's foot.
     ≥ 1080  DESKTOP:     logo · nav · search icon · customiser icon ·
                          language switcher · Request a Quote.

     The brand descriptor hides below 640. The language switcher spells the
     words out from 1200 up and abbreviates to EN / ع in the cramped
     1080–1199 band (the accessible name stays the full language either way).
   ========================================================================== */
.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--hdr-bg);
  color: var(--hdr-fg);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease),
              background-color var(--dur-3) var(--ease);
}
.hdr.is-stuck { border-block-end-color: var(--hdr-line); }

/* When a dropdown is open the hairline has to be there to anchor it, even at
   scroll-top. */
.hdr.is-open { border-block-end-color: var(--hdr-line); }

/* On the red plate the hairline is always on — it is what separates the bar
   from the page. */
:root[data-header="red"] .hdr { border-block-end-color: var(--hdr-line); }

/* A red ring on a red bar is invisible; on the plate the ring goes white. */
.hdr :focus-visible { outline-color: var(--hdr-focus); }

.hdr__in {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  block-size: var(--header-h);
}

/* --- brand ------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-inline-size: 0;          /* lets it shrink instead of clipping */
  min-block-size: 40px;        /* it is a link — give it a real tap target */
  flex: 0 1 auto;
  margin-inline-end: var(--sp-4);
}
.brand__mark {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
}
.brand__text { min-inline-size: 0; overflow: hidden; }
.brand__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-head);
  color: var(--hdr-fg);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.brand__sub {
  display: block;
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hdr-fg-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
[dir="rtl"] .brand__sub { text-transform: none; letter-spacing: 0; font-size: 0.6875rem; }

/* Below 640 the descriptor is noise — and it is WIDE (a 20-character
   uppercase, letterspaced line is ~145px). */
@media (max-width: 639px) {
  .brand__sub { display: none; }
  .brand { margin-inline-end: var(--sp-2); }
}
/* And again in the 1080–1279 band, where the nav has just appeared but the
   container has not yet reached its 1280 ceiling. The descriptor is the only
   thing in the row that carries no function, so it is the thing that yields. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .brand__sub { display: none; }
}
@media (max-width: 400px) {
  .brand__mark { inline-size: 28px; block-size: 28px; }
  .brand { gap: var(--sp-2); margin-inline-end: var(--sp-1); }
  .brand__name { font-size: 0.875rem; }
}

/* --- primary nav (desktop only) ---------------------------------------- */
.nav {
  display: none;
  align-items: center;
  gap: 2px;
  min-inline-size: 0;
}
@media (min-width: 1080px) {
  .nav { display: flex; }
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) 9px;
  min-block-size: 40px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--hdr-fg-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: var(--t-color);
}
.nav__link:hover { color: var(--hdr-hover-fg); background: var(--hdr-hover-bg); }

/* The small active underline. Rationed colour, doing real work. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline: 9px;
  block-size: 2px;
  background: var(--hdr-mark);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link[aria-current="page"] { color: var(--hdr-fg); font-weight: var(--fw-semibold); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__chev {
  inline-size: 14px;
  block-size: 14px;
  color: currentColor;
  opacity: 0.7;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link[aria-expanded="true"] { color: var(--hdr-fg); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* --- the spacer that pushes the actions to the inline-end -------------- */
.hdr__spacer { flex: 1 1 auto; min-inline-size: 0; }

/* --- header actions ----------------------------------------------------- */
.hdr__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}
@media (max-width: 400px) { .hdr__actions { gap: 0; } }

/* The square icon buttons: search, customiser, burger. They are NOT .btn —
   they are their own class, on the chrome tokens. That is deliberate: a
   header control that is also a .btn re-runs THE CASCADE TRAP every time
   (components.css loads after this file and ties on specificity), and this
   theme has been bitten by it twice already. */
.hdr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--hdr-btn-fg);
  cursor: pointer;
  transition: var(--t-color);
}
.hdr__btn:hover { background: var(--hdr-btn-bg-h); color: var(--hdr-btn-fg-h); }
.hdr__btn[aria-expanded="true"] { background: var(--hdr-btn-bg-h); color: var(--hdr-btn-fg-h); }
.hdr__btn svg { inline-size: 20px; block-size: 20px; }

/* The customiser is a DESKTOP control. On mobile it is INLINE in the drawer —
   opening a second overlay from inside an already-open drawer stacks two focus
   traps and reads as broken. */
.hdr__btn--cust { display: none; }
@media (min-width: 1080px) {
  .hdr__btn--cust { display: inline-flex; }
}

/* --- burger — mobile only ---------------------------------------------- */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--hdr-btn-fg);
  cursor: pointer;
  transition: var(--t-color);
}
.burger:hover { background: var(--hdr-btn-bg-h); color: var(--hdr-btn-fg-h); }
.burger svg { inline-size: 22px; block-size: 22px; }
@media (min-width: 1080px) {
  .burger { display: none; }
}

/* ==========================================================================
   LANGUAGE SWITCHER — the segmented toggle.
   Both languages are on screen at once; the live one sits on a raised thumb
   inside a hairline-bordered track. Flat, small-radius, no gradient, no
   shadow — the Studio idiom applied to a control.

   RTL SAFETY: the thumb is positioned with LOGICAL insets only
   (inset-inline-start), NEVER transform:translateX — so when <html dir> flips
   the thumb lands on the correct side by itself, with no extra rules.

   In the header it is a desktop control (the mobile bar is logo + search +
   burger and nothing else). Inside the DRAWER it goes full-width
   (.langsw--block) and always spells both words out.
   ========================================================================== */
.langsw {
  position: relative;
  display: none;                 /* header: desktop only. See the 1080 rule. */
  align-items: center;
  flex: none;
  block-size: 40px;
  padding: 2px;
  background: var(--hdr-seg-bg);
  border: 1px solid var(--hdr-seg-line);
  border-radius: var(--r);
  margin-inline-start: var(--sp-1);
}
@media (min-width: 1080px) {
  .hdr .langsw { display: flex; inline-size: 92px; }
}
@media (min-width: 1200px) {
  .hdr .langsw { inline-size: 148px; }   /* two 72px options — "العربية" whole */
}

.langsw__opt {
  position: relative;
  z-index: 1;                    /* above the thumb */
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-1);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--hdr-seg-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease);
}
.langsw__opt:hover { color: var(--hdr-seg-fg-on); }
.langsw__opt[aria-pressed="true"] { color: var(--hdr-seg-fg-on); }

/* The Arabic option is set in the Arabic face wherever it appears — it is an
   Arabic word in an English document too. */
.langsw__opt[data-lang="ar"] {
  font-family: var(--font-ar);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}
[dir="rtl"] .langsw__opt[data-lang="en"] { font-family: var(--font-sans); letter-spacing: 0.02em; }

/* Full words are the default. The cramped 1080–1199 header abbreviates. */
.langsw__long  { display: inline; }
.langsw__short { display: none; }
@media (min-width: 1080px) and (max-width: 1199px) {
  .hdr .langsw__long  { display: none; }
  .hdr .langsw__short { display: inline; }
  .hdr .langsw__opt[data-lang="ar"] .langsw__short { font-size: 1.0625rem; }
}

/* the sliding plate under the live option */
.langsw__thumb {
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  inline-size: calc(50% - 2px);
  border-radius: var(--r-sm);
  background: var(--hdr-seg-thumb);
  border: 1px solid var(--hdr-seg-thumb-bd);
  transition: inset-inline-start var(--dur-2) var(--ease);
  pointer-events: none;
}
.langsw[data-active="ar"] .langsw__thumb { inset-inline-start: 50%; }

@media (prefers-reduced-motion: reduce) {
  .langsw__thumb { transition: none; }
}

/* --- header quote CTA ---------------------------------------------------
   It is NOT a .btn either — same reason as .hdr__btn. It reads --hdr-cta-*,
   which is what lets "Bakkar Red" invert it to a white plate with red type
   (a red CTA on a red bar would simply vanish).
   Desktop only: on mobile this action moves to the drawer's foot. */
.hdr__cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex: none;
  min-block-size: 40px;
  padding-inline: var(--sp-5);
  margin-inline-start: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--hdr-cta-bg);
  color: var(--hdr-cta-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--t-color);
}
[dir="rtl"] .hdr__cta { letter-spacing: 0; }
.hdr__cta:hover { background: var(--hdr-cta-bg-h); }
.hdr__cta svg { inline-size: 17px; block-size: 17px; flex: none; }
@media (min-width: 1080px) {
  .hdr .hdr__cta { display: inline-flex; }
}
/* 1080–1279 is the tightest desktop row (nav + 2 icons + switcher + CTA inside
   a container that has not reached 1280 yet): the CTA drops its icon and
   tightens its padding rather than letting anything clip. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .hdr .hdr__cta { padding-inline: var(--sp-4); }
  .hdr .hdr__cta svg { display: none; }
}

/* ==========================================================================
   8. CATEGORY MEGA-MENU
   A wide, quiet, hairline-bordered panel. Columns = root categories.
   It hangs off the header container, so it uses PAGE tokens, not chrome
   tokens — it is a panel over the page, not part of the bar.
   ========================================================================== */
.mega {
  position: absolute;
  inset-block-start: calc(100% + 1px);
  inset-inline: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-raised);
  color: var(--text);
  border: var(--border-1);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--sp-8) var(--sp-7);
  display: none;
}
.mega.is-open { display: block; }
.mega :focus-visible { outline-color: var(--focus); }

@media (prefers-reduced-motion: no-preference) {
  .mega.is-open { animation: mega-in var(--dur-3) var(--ease); }
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-7);
}
.mega__col { min-inline-size: 0; }

.mega__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block-end: var(--sp-3);
  margin-block-end: var(--sp-3);
  border-block-end: var(--border-1);
}
.mega__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: var(--ls-head);
}
.mega__count {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* the descriptor shown under a root category that has no children */
.mega__desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mega__list { list-style: none; }
.mega__item + .mega__item { margin-block-start: 2px; }
.mega__link {
  display: block;
  padding: var(--sp-2) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.mega__link:hover { color: var(--text); background: var(--bg-surface); }

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-6);
  border-block-start: var(--border-1);
}

/* ==========================================================================
   9. MOBILE DRAWER
   Everything the stripped-back mobile bar handed over lives here: the nav,
   the LANGUAGE SWITCHER, the CUSTOMISER (inline — never a second overlay),
   the contact block, and the Request-a-Quote CTA in the foot, where it is the
   most prominent thing in the panel.

   Same contract as the header: every colour is a --dw-* token, so the
   "Mobile sidebar → Bakkar Red" option costs nothing below this line.
   ========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--backdrop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease), visibility var(--dur-3) var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  inline-size: min(360px, 90vw);
  background: var(--dw-bg);
  color: var(--dw-fg);
  border-inline-end: 1px solid var(--dw-line);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  /* Slides in from the inline-START — so it comes from the RIGHT in Arabic,
     automatically, because of the logical inset above. The transform has to be
     flipped by hand though: translateX is physical. */
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease), visibility var(--dur-4) var(--ease);
}
[dir="rtl"] .drawer { transform: translateX(100%); }
.drawer.is-open { transform: translateX(0); visibility: visible; }
[dir="rtl"] .drawer.is-open { transform: translateX(0); }

.drawer :focus-visible { outline-color: var(--dw-focus); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  block-size: var(--header-h);
  border-block-end: 1px solid var(--dw-line);
  flex: none;
}
.drawer__head .brand__name { color: var(--dw-fg); }

.drawer__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--dw-btn-fg);
  cursor: pointer;
  transition: var(--t-color);
}
.drawer__x:hover { background: var(--dw-btn-bg-h); color: var(--dw-fg); }
.drawer__x svg { inline-size: 20px; block-size: 20px; }

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
}
.drawer__foot {
  flex: none;
  padding: var(--sp-5);
  border-block-start: 1px solid var(--dw-line);
  display: grid;
  gap: var(--sp-3);
}

/* The quote CTA. It is the primary conversion action and it looks like it:
   full width, the drawer's only filled control. */
.drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 48px;
  padding-inline: var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--dw-cta-bg);
  color: var(--dw-cta-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  transition: var(--t-color);
}
.drawer__cta:hover { background: var(--dw-cta-bg-h); }
.drawer__cta svg { inline-size: 17px; block-size: 17px; flex: none; }
.drawer__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--dw-fg-3);
  text-align: center;
}

.drawer__nav { list-style: none; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: 48px;
  padding-block: var(--sp-3);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  color: var(--dw-fg);
  border-block-end: 1px solid var(--dw-line);
  transition: var(--t-color);
}
.drawer__link:hover { color: var(--dw-hover-fg); }
.drawer__link[aria-current="page"] { color: var(--dw-active-fg); font-weight: var(--fw-semibold); }

/* The small uppercase section label inside the drawer. */
.drawer__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--dw-fg-3);
  margin-block: var(--sp-6) var(--sp-3);
}
[dir="rtl"] .drawer__label { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }

.drawer__rule {
  border: 0;
  border-block-start: 1px solid var(--dw-line);
  margin-block: var(--sp-6) 0;
}

/* The drawer's copy of the language switcher: full width, always both words. */
.langsw--block {
  display: flex;
  inline-size: 100%;
  block-size: 48px;
  background: var(--dw-seg-bg);
  border-color: var(--dw-seg-line);
  margin-inline-start: 0;
}
.langsw--block .langsw__opt { block-size: 44px; color: var(--dw-seg-fg); font-size: var(--fs-sm); }
.langsw--block .langsw__opt:hover,
.langsw--block .langsw__opt[aria-pressed="true"] { color: var(--dw-seg-fg-on); }
.langsw--block .langsw__thumb { background: var(--dw-seg-thumb); border-color: var(--dw-seg-thumb-bd); }
/* Inside the drawer it ALWAYS spells the words out — there is room. */
.langsw--block .langsw__long  { display: inline; }
.langsw--block .langsw__short { display: none; }

.drawer__contact {
  display: grid;
  gap: var(--sp-1);
}
.drawer__ct {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--dw-fg-2);
  min-block-size: 40px;
  transition: var(--t-color);
}
.drawer__ct:hover { color: var(--dw-hover-fg); }
.drawer__ct svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--dw-fg-3); }
.drawer__ct:hover svg { color: currentColor; }

/* ==========================================================================
   10. FOOTER
   Ink. Hairline-divided columns. Quiet.
   ========================================================================== */
.footer {
  background: var(--bg-ink);
  color: var(--text-on-ink-mut);
  padding-block-start: var(--sp-12);
}
.footer h2, .footer h3 { color: var(--text-on-ink); }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-9);
  padding-block-end: var(--sp-10);
}
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-8); }
}

.footer__brand { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-5); }
.footer__mark { inline-size: 34px; block-size: 34px; flex: none; }
.footer__name {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--text-on-ink);
  letter-spacing: var(--ls-head);
}
.footer__blurb {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-on-ink-mut);
  max-inline-size: 38ch;
}

.footer__title {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-on-ink);
  margin-block-end: var(--sp-5);
}
[dir="rtl"] .footer__title { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }

.footer__list { list-style: none; display: grid; gap: var(--sp-1); }
.footer__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  font-size: var(--fs-sm);
  color: var(--text-on-ink-mut);
}
.footer__link:hover { color: var(--text-on-ink); }

.footer__ct {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-on-ink-mut);
  padding-block: var(--sp-2);
}
.footer__ct svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 3px; color: var(--text-on-ink-faint); }
.footer__ct a:hover { color: var(--text-on-ink); }

.footer__socials { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-6); }
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--border-on-ink);
  border-radius: var(--r);
  color: var(--text-on-ink-mut);
  transition: var(--t-color);
}
.footer__social:hover {
  color: var(--text-on-ink);
  border-color: var(--border-on-ink-h);
  background: var(--bg-on-ink-h);
}
.footer__social svg { inline-size: 18px; block-size: 18px; }

.footer__bottom {
  border-block-start: 1px solid var(--border-on-ink);
  padding-block: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-on-ink-faint);
}
.footer__legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--text-on-ink-mut); }

/* ==========================================================================
   11. THE "BAKKAR RED" CHROME — the two things tokens alone cannot fix.

   The brand emblem is itself a RED mark. On a red bar it reads as a smudge,
   and the active drawer link, which is normally marked with red text, has no
   red left to spend. Both get a WHITE plate instead — flat, small radius, the
   same containment idiom as everything else in this theme.
   ========================================================================== */
:root[data-header="red"] .hdr .brand__mark,
:root[data-sidebar="red"] .drawer__head .brand__mark {
  background: #FFFFFF;
  border-radius: var(--r-sm);
  padding: 3px;
  box-sizing: content-box;
  margin-inline-end: -6px;   /* the padding must not widen the row */
  margin-block: -3px;
}

/* The active nav item. In the default chrome the red TEXT says "you are here";
   on the red plate there is no red left, so the marker becomes an inline-start
   rule — which is the Studio idiom anyway. It is present in both modes so the
   two never disagree about where the eye should land. */
.drawer__link[aria-current="page"] {
  position: relative;
  padding-inline-start: var(--sp-4);
}
.drawer__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 22%;
  inline-size: 2px;
  background: currentColor;
}

/* Unselected on the red plate, the red swatch is red-on-red. Ring it in white
   so the option still reads as "the red one". */
:root[data-sidebar="red"] .drawer .seg__opt[aria-checked="false"] .seg__sw--red {
  border-color: rgba(255, 255, 255, 0.72);
}

/* ---- brand mark sizing: matched to Momentum (44px header / 36px drawer / 52px footer) ---- */
.brand__mark { inline-size: 44px; block-size: 44px; max-inline-size: none; flex: none; }
.drawer__head .brand__mark { inline-size: 36px; block-size: 36px; max-inline-size: none; flex: none; }
.footer__mark { inline-size: 52px; block-size: 52px; max-inline-size: none; flex: none; }
@media (max-width: 559px) { .brand__mark { inline-size: 40px; block-size: 40px; } }