/* ==========================================================================
   VIVID — COMPONENT KIT
   The reusable surface every page is built from. Logical properties only.
   --------------------------------------------------------------------------
   CONTENTS
     1  Buttons
     2  Badges / chips / tags / pills
     3  Section header
     4  Product card (image-dominant — the theme's hero component)
     5  Category card + structure tile
     6  Agent card (CSS monogram avatar)
     7  Stat block + count-up
     8  Rail (horizontal momentum scroller) + slider chrome
     9  Marquee / brand ticker
     10 Feature / capability card
     11 Process steps
     12 Breadcrumb
     13 Forms + validation
     14 Pagination
     15 Toast
     16 Modal / lightbox
     17 Empty state
     18 Table
     19 Tabs
     20 Accordion
     21 Quote CTA panel
     22 Misc (spinner, divider, trust, skeleton)
     23 Page header (.phead — the slim interior masthead)
     24 Shared grids (.cgrid categories · .agrid agents · .fgrid features)
     25 Toolbar + view switch (grid ⇄ list)
     26 Gallery (product page)
     27 Map embed (contact page)
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS — chunky, solid, confident. No gradients anywhere.
   ========================================================================== */
.btn {
  --btn-bg: var(--invert-bg);
  --btn-fg: var(--invert-fg);
  --btn-bd: var(--invert-bg);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 46px;
  padding-inline: var(--sp-5);
  padding-block: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: var(--bw) solid var(--btn-bd);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.btn svg { inline-size: 17px; block-size: 17px; flex: none; }

/* Physical hover: the button SHIFTS onto a hard block. Nothing floats. */
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--hard-ink-sm); }
.btn:active { transform: translate(0, 0); box-shadow: none; transition-duration: var(--dur-1); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* --- variants -------------------------------------------------------------- */
.btn--primary {                       /* SOLID red. The quote action. */
  --btn-bg: var(--red-500);
  --btn-fg: var(--white);
  --btn-bd: var(--red-500);
}
.btn--primary:hover {
  --btn-bg: var(--red-600);
  --btn-bd: var(--red-600);
  box-shadow: var(--hard-ink-sm);
}

.btn--ink {                            /* solid near-black */
  --btn-bg: var(--invert-bg);
  --btn-fg: var(--invert-fg);
  --btn-bd: var(--invert-bg);
}
.btn--ink:hover { box-shadow: var(--hard-red-sm); }

.btn--outline {                        /* 2px ink outline on light */
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-bold);
}
.btn--outline:hover {
  --btn-bg: var(--invert-bg);
  --btn-fg: var(--invert-fg);
  box-shadow: var(--hard-red-sm);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-2);
  --btn-bd: transparent;
}
.btn--ghost:hover {
  --btn-bg: var(--surface-sunken);
  --btn-fg: var(--text);
  --btn-bd: var(--surface-sunken);
  transform: none;
  box-shadow: none;
}

/* On an ink band. */
.btn--on-ink {
  --btn-bg: var(--white);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--white);
}
.btn--on-ink:hover { box-shadow: var(--hard-red-sm); }

.btn--outline-on-ink {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.35);
}
.btn--outline-on-ink:hover {
  --btn-bd: var(--white);
  --btn-bg: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  transform: translate(-2px, -2px);
}

/* On the red band. */
.btn--on-red {
  --btn-bg: var(--white);
  --btn-fg: var(--ink-900);
  --btn-bd: var(--white);
}
.btn--on-red:hover { box-shadow: 4px 4px 0 0 var(--ink-900); }

.btn--outline-on-red {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.55);
}
.btn--outline-on-red:hover {
  --btn-bd: var(--white);
  --btn-bg: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.btn--wa {                             /* WhatsApp */
  --btn-bg: #1FA855;
  --btn-fg: var(--white);
  --btn-bd: #1FA855;
}
.btn--wa:hover { --btn-bg: #17904a; --btn-bd: #17904a; }

/* --- sizes ----------------------------------------------------------------- */
.btn--sm  { min-block-size: 38px; padding-inline: var(--sp-4); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn--sm svg { inline-size: 15px; block-size: 15px; }
.btn--lg  { min-block-size: 56px; padding-inline: var(--sp-7); font-size: var(--fs-base); }
.btn--lg svg { inline-size: 19px; block-size: 19px; }
.btn--xl  { min-block-size: 62px; padding-inline: var(--sp-8); font-size: var(--fs-lg); border-radius: var(--r-lg); }

.btn--block { inline-size: 100%; }
.btn--icon  { inline-size: 46px; padding-inline: 0; }
.btn--icon.btn--sm { inline-size: 38px; }

/* Arrow inside a button nudges on hover, and mirrors in RTL. */
.btn__arrow { transition: transform var(--dur-2) var(--ease); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }


/* ==========================================================================
   2. BADGES / CHIPS / TAGS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.badge--red   { background: var(--red-500); color: var(--white); }
.badge--ink   { background: var(--invert-bg); color: var(--invert-fg); }
.badge--white { background: var(--white); color: var(--ink-900); }
.badge--soft  { background: var(--surface-sunken); color: var(--text-2); }
.badge--outline { background: transparent; color: var(--text); border: var(--bw-hair) solid var(--line-bold); }
.badge--new   { background: var(--red-500); color: var(--white); }
.badge svg { inline-size: 12px; block-size: 12px; }

/* Chip — an interactive filter / child-category pill. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  background: var(--surface);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover { border-color: var(--line-bold); transform: translateY(-2px); }
.chip.is-active, .chip[aria-selected="true"] {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.chip__count {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
}
.chip.is-active .chip__count { color: var(--invert-fg); opacity: 0.62; }
.chip--sm { min-block-size: 32px; padding-inline: var(--sp-3); font-size: var(--fs-3xs); }

.chip--on-ink {
  background: transparent;
  border-color: var(--line-on-ink);
  color: var(--text-on-ink-muted);
}
.chip--on-ink:hover { border-color: var(--white); color: var(--white); }
.chip--on-ink.is-active { background: var(--white); border-color: var(--white); color: var(--ink-900); }

/* Tag — a static, non-interactive descriptor. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.tag--on-ink { background: rgba(255,255,255,0.06); border-color: var(--line-on-ink); color: var(--text-on-ink-muted); }

.taglist { display: flex; flex-wrap: wrap; gap: var(--sp-2); }


/* ==========================================================================
   3. SECTION HEADER
   ---------------------------------------------------------------------------
   A hard red rule, a caps kicker, an oversized heavy title, and an optional
   action pinned to the far end.
   ========================================================================== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-block-end: var(--sp-10);
}
.section-head__main { min-inline-size: 0; max-inline-size: 62ch; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
  margin-block-end: var(--sp-3);
}
.kicker::before {
  content: '';
  inline-size: 22px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--red-brand);   /* decorative rule — carries no text */
  flex: none;
}
.band--ink .kicker { color: var(--brand-on-ink); }
.band--red .kicker { color: var(--white); }
.band--red .kicker::before { background: var(--white); }

.section-head__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
}
.section-head__sub {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  line-height: var(--lh-relax);
  max-inline-size: 56ch;
}
.band--ink .section-head__sub { color: var(--text-on-ink-muted); }
.section-head__aside { flex: none; display: flex; align-items: center; gap: var(--sp-3); }

.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-head--center .section-head__main { max-inline-size: 60ch; }
.section-head--center .section-head__sub { margin-inline: auto; }


/* ==========================================================================
   4. PRODUCT CARD — THE PHOTO IS THE CARD.
   ---------------------------------------------------------------------------
   Full-bleed image, category as an overlay badge, name below, and a chunky
   solid quote button. Hover = the image zooms and the whole card SHIFTS up
   and across onto a hard offset block. NO PRICE. EVER.
   ========================================================================== */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-3) var(--ease),
    box-shadow var(--dur-3) var(--ease);
}
.pcard:hover,
.pcard:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: var(--hard-red);
}

.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--media-bed);
  border-block-end: var(--bw) solid var(--line-bold);
}
.pcard__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pcard:hover .pcard__img,
.pcard:focus-within .pcard__img { transform: scale(1.07); }

/* Category as an overlay badge, sitting on the photo. */
.pcard__cat {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 2;
  padding: 6px var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink-900);
  border-radius: var(--r-xs);
  max-inline-size: calc(100% - var(--sp-6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pcard__flag {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
}

/* A quiet "quote" affordance that reveals on hover over the photo. */
.pcard__peek {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  z-index: 2;
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-900);
  background: var(--white);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.pcard:hover .pcard__peek,
.pcard:focus-within .pcard__peek { opacity: 1; transform: none; }
.pcard__peek:hover { background: var(--red-500); color: var(--white); }
.pcard__peek svg { inline-size: 18px; block-size: 18px; }
@media (hover: none) {
  .pcard__peek { opacity: 1; transform: none; }
}

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1 1 auto;
}
.pcard__title {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  color: var(--text);
}
.pcard__title a::after {                 /* whole card is the hit area */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pcard__title a:hover { color: var(--brand-text); }
.pcard__excerpt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
}
.pcard__specs {
  display: block;              /* block, so text-overflow actually applies */
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The quote button must sit ABOVE the card-wide title overlay. */
.pcard__cta { position: relative; z-index: 2; flex: none; }

/* --- product card ON AN INK BAND: the packaging pops. --------------------- */
.pcard--on-ink {
  background: var(--surface-ink-card);
  border-color: var(--surface-ink-line);
}
.pcard--on-ink:hover,
.pcard--on-ink:focus-within { border-color: var(--white); box-shadow: var(--hard-red); }
.pcard--on-ink .pcard__media { border-block-end-color: var(--surface-ink-line); }
.pcard--on-ink:hover .pcard__media { border-block-end-color: var(--white); }
.pcard--on-ink .pcard__title { color: var(--text-on-ink); }
.pcard--on-ink .pcard__title a:hover { color: var(--red-400); }
.pcard--on-ink .pcard__excerpt { color: var(--text-on-ink-muted); }
.pcard--on-ink .pcard__cat { background: var(--white); color: var(--ink-900); }
.pcard--on-ink .pcard__specs { color: var(--text-on-ink-subtle); }

/* --- compact variant (rails, related, search) ----------------------------- */
.pcard--compact .pcard__body { padding: var(--sp-4); }
.pcard--compact .pcard__title { font-size: var(--fs-base); }
.pcard--compact .pcard__media { aspect-ratio: 1 / 1; }

/* --- GRID variant: NO excerpt. -------------------------------------------
   The photo carries the card in a grid; the excerpt is dead weight. Use ONE
   card renderer for both views and switch the modifier: .pcard--grid hides an
   excerpt even if your template emitted it, .pcard--list shows it. (A card with
   no modifier behaves like the homepage: excerpt shown if present.) */
.pcard--grid .pcard__excerpt { display: none; }

/* --- LIST variant: WITH excerpt. ------------------------------------------ */
.pcard--list { flex-direction: row; align-items: stretch; }
.pcard--list .pcard__body { justify-content: center; padding: var(--sp-5) var(--sp-6); }
.pcard--list .pcard__excerpt { display: -webkit-box; -webkit-line-clamp: 3; }
.pcard--list .pcard__media {
  inline-size: 38%;
  max-inline-size: 260px;
  aspect-ratio: auto;
  border-block-end: 0;
  border-inline-end: var(--bw) solid var(--line-bold);
  flex: none;
}
@media (max-width: 559px) {
  .pcard--list { flex-direction: column; }
  .pcard--list .pcard__media {
    inline-size: 100%;
    max-inline-size: none;
    aspect-ratio: 4 / 3;
    border-inline-end: 0;
    border-block-end: var(--bw) solid var(--line-bold);
  }
}

/* --- grid ------------------------------------------------------------------ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: var(--rail-gap);
}
.pgrid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
@media (min-width: 1000px) {
  .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   5. CATEGORY CARD  — image-dominant, dark scrim, big heavy label.
   ========================================================================== */
.ccard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--line-bold);
  background: var(--ink-900);
  min-block-size: 260px;
  isolation: isolate;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.ccard:hover, .ccard:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: var(--hard-red);
}
.ccard__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ccard:hover .ccard__img { transform: scale(1.06); }
.ccard::after {                 /* readability scrim — flat, from the bottom */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 13, 0.88) 0%, rgba(8, 9, 13, 0.55) 38%, rgba(8, 9, 13, 0.08) 72%);
  z-index: 1;
}
.ccard__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 100%;
  min-block-size: inherit;
  padding: var(--sp-5);
  gap: var(--sp-2);
}
.ccard__count {
  align-self: flex-start;
  padding: 5px var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
  background: var(--red-500);
  border-radius: var(--r-xs);
  margin-block-end: auto;
}
.ccard__title {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: 1.15;
  color: var(--white);
}
.ccard__desc {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--ink-200);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccard__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--white);
}
.ccard__go svg {
  inline-size: 15px; block-size: 15px;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .ccard__go svg { transform: scaleX(-1); }
.ccard:hover .ccard__go svg { transform: translateX(4px); }
[dir="rtl"] .ccard:hover .ccard__go svg { transform: scaleX(-1) translateX(4px); }

/* The child-category chips that make the hierarchy legible on the parent. */
.ccard__kids {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.ccard__kid {
  padding: 6px var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ccard__kid:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-900);
}

.ccard--tall { min-block-size: 420px; }
.ccard--tall::after {
  background: linear-gradient(to top, rgba(8, 9, 13, 0.92) 0%, rgba(8, 9, 13, 0.78) 42%, rgba(8, 9, 13, 0.30) 75%, rgba(8, 9, 13, 0.12) 100%);
}
.ccard--tall .ccard__desc { -webkit-line-clamp: 3; margin-block-end: var(--sp-1); }
.ccard--wide { min-block-size: 340px; }

/* --------------------------------------------------------------------------
   SPECIMEN CARD — for a root that has no honest photograph (Labels & Sleeves:
   there is not one label or sleeve in the asset set). Rather than borrow an
   unrelated product shot, the tile becomes a die-line specimen: a sheet of
   die-cut label shapes running off the edge, one of them printed red. Ink,
   red and white only — no new palette, no stock-photo cosplay.
   -------------------------------------------------------------------------- */
.ccard--spec { background: var(--ink-900); }

.ccard__web {
  position: absolute;
  inset: 0;
  z-index: 0;                    /* under the scrim, which keeps the copy safe */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4);
  /* Rotated + overscaled so the sheet bleeds off every edge: a web of labels
     running through the press, not a tidy little diagram. */
  transform: rotate(-9deg) scale(1.35);
  transform-origin: 50% 42%;
  transition: transform var(--dur-4) var(--ease);
}
.ccard__web i {
  border: var(--bw) dashed rgba(255, 255, 255, 0.22);  /* a cut path, not a border */
  border-radius: var(--r-sm);
}
/* Two panels come off the press printed — the red is the payoff. This is the
   one place --red-brand belongs: a decorative fill with no text on it. */
.ccard__web i:nth-child(3) {
  background: var(--red-brand);
  border-color: var(--red-brand);
  border-style: solid;
}
.ccard__web i:nth-child(6) {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
  border-style: solid;
}
.ccard--spec:hover .ccard__web { transform: rotate(-9deg) scale(1.42); }

/* The card is already solid ink, so this scrim is only about text safety — it
   does not need to darken the art. Near-solid under the copy, then clear away
   entirely so the red panel comes off the press at full strength. */
.ccard--spec::after {
  background: linear-gradient(to top,
    rgba(14, 16, 22, 0.97) 0%,
    rgba(14, 16, 22, 0.95) 40%,
    rgba(14, 16, 22, 0.45) 70%,
    rgba(14, 16, 22, 0) 100%);
}
/* Mirror the rake in RTL so the web still runs with the reading direction. */
[dir="rtl"] .ccard__web { transform: rotate(9deg) scale(1.35); }
[dir="rtl"] .ccard--spec:hover .ccard__web { transform: rotate(9deg) scale(1.42); }

/* Structure tile — small, square, for the children rail. */
.stile {
  position: relative;
  display: block;
  inline-size: 220px;
  flex: none;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line-bold);
  overflow: hidden;
  background: var(--surface);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.stile:hover, .stile:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: var(--hard-ink-sm);
}
.stile__media {
  display: block;            /* it is a <span>: without this, aspect-ratio is ignored */
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--media-bed);
}
.stile__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.stile:hover .stile__media img { transform: scale(1.08); }
.stile__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-block-start: var(--bw) solid var(--line-bold);
  background: var(--surface);
}
.stile__name {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  min-inline-size: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stile__n {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  color: var(--invert-fg);
  background: var(--invert-bg);
  border-radius: var(--r-xs);
  padding: 3px 7px;
  flex: none;
  transition: background-color var(--t-fast);
}
.stile:hover .stile__n { background: var(--red-500); }


/* ==========================================================================
   6. AGENT CARD — CSS monogram avatar (there are no agent photos).
   ========================================================================== */
.acard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.acard:hover { transform: translate(-4px, -4px); box-shadow: var(--hard-red); }
.acard__top { display: flex; align-items: center; gap: var(--sp-4); }
.avatar {
  inline-size: 56px;
  block-size: 56px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: 0.02em;
  color: var(--invert-fg);
  background: var(--invert-bg);
  border-radius: var(--r-md);
}
.avatar--red { background: var(--red-500); color: var(--white); }
.avatar--lg { inline-size: 72px; block-size: 72px; font-size: var(--fs-2xl); }
.avatar--sm { inline-size: 40px; block-size: 40px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.acard__id { min-inline-size: 0; }
.acard__name {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.acard__region {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
}
.acard__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relax); }
.acard__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
}


/* ==========================================================================
   7. STAT BLOCK
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-1);
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-4);
  position: relative;
}
/* Divider rules between stats — logical, so they mirror. */
.stat + .stat::before {
  content: '';
  position: absolute;
  inset-block: var(--sp-4);
  inset-inline-start: 0;
  inline-size: 1px;
  background: var(--line-on-ink);
}
@media (max-width: 719px) {
  .stat:nth-child(odd)::before { display: none; }
}
.stat__value {
  font-family: var(--font-head);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--text-on-ink);
  display: block;
  text-align: start;
}
/* The number AND its suffix are ONE left-to-right numeric run, even in Arabic:
   a flex row here would reverse in RTL and render "+20" instead of "20+". */
.stat__num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.stat__suffix { color: var(--red-brand); }   /* large display text — 4.38:1 passes at this size */
.stat__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
  margin-block-start: var(--sp-2);
}
/* Light-band variant. */
.stat--light .stat__value { color: var(--text); }
.stat--light .stat__label { color: var(--text-subtle); }
.stat--light + .stat--light::before { background: var(--line); }


/* ==========================================================================
   8. RAIL — horizontal momentum scroller with mirrored chrome.
   ========================================================================== */
.rail { position: relative; }

.rail__track {
  display: flex;
  gap: var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  padding-block-end: var(--sp-3);
  /* Let cards bleed to the viewport edge, but keep the first aligned. */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .rail__track { scroll-behavior: auto; } }

.rail__item {
  scroll-snap-align: start;
  flex: none;
  inline-size: min(78vw, 300px);
}
.rail__item--sm { inline-size: min(60vw, 220px); }
.rail__item--lg { inline-size: min(85vw, 380px); }

.rail__nav { display: flex; gap: var(--sp-2); }
.rail__btn {
  inline-size: 46px;
  block-size: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.rail__btn:hover:not(:disabled) {
  background: var(--invert-bg);
  color: var(--invert-fg);
  transform: translate(-2px, -2px);
  box-shadow: var(--hard-red-sm);
}
.rail__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rail__btn svg { inline-size: 18px; block-size: 18px; }
/* Chevrons MUST mirror in RTL. */
[dir="rtl"] .rail__btn svg { transform: scaleX(-1); }

.rail__btn--on-ink {
  background: transparent;
  border-color: var(--line-on-ink);
  color: var(--text-on-ink);
}
.rail__btn--on-ink:hover:not(:disabled) {
  background: var(--white);
  color: var(--ink-900);
  border-color: var(--white);
}

/* Slider dots (used by any carousel). */
.dots { display: flex; gap: var(--sp-2); align-items: center; }
.dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  background: var(--line-strong);
  transition: inline-size var(--t-base), background-color var(--t-base);
}
.dot.is-active { inline-size: 28px; background: var(--red-brand); }
.dot--on-ink { background: var(--surface-ink-line); }
.dot--on-ink.is-active { background: var(--white); }


/* ==========================================================================
   9. MARQUEE / BRAND TICKER
   ========================================================================== */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  inline-size: 100%;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-12);
  padding-inline-end: var(--sp-12);
  min-inline-size: 100%;
  animation: marquee 42s linear infinite;
  will-change: transform;
}
/* The loop travels toward the reading direction, and the SIGN of the translate
   has to flip with it — not just the direction of time. In LTR the flex row
   lays the duplicate track to the RIGHT of the original, so the seam closes at
   translateX(-100%). In RTL the row lays it to the LEFT, so the seam closes at
   translateX(+100%). `animation-direction: reverse` only plays the same
   keyframes backwards; it still walks the track off to the LEFT, which drags
   both copies clean out of the box and leaves an empty strip for most of the
   cycle. Two keyframe sets, one per writing direction. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
[dir="rtl"] .marquee__track {
  animation-name: marquee-rtl;
  animation-direction: normal;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Must out-specify the [dir="rtl"] rule above, or animation-name survives. */
  .marquee__track,
  [dir="rtl"] .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text-subtle);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.marquee__item:hover { color: var(--text); }
.marquee__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--red-brand);
  flex: none;
}
.marquee--on-ink .marquee__item { color: var(--text-on-ink-subtle); }
.marquee--on-ink .marquee__item:hover { color: var(--white); }


/* ==========================================================================
   10. FEATURE / CAPABILITY CARD
   ========================================================================== */
.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease);
}
.fcard:hover { transform: translate(-4px, -4px); box-shadow: var(--hard-ink); }
.fcard__ico {
  inline-size: 48px;
  block-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--red-500);
  color: var(--white);
  flex: none;
  transition: transform var(--dur-3) var(--ease);
}
.fcard:hover .fcard__ico { transform: rotate(-6deg) scale(1.05); }
.fcard__ico svg { inline-size: 24px; block-size: 24px; }
.fcard__n {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-4);
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  line-height: 1;
  color: var(--surface-sunken);
  letter-spacing: var(--ls-display);
  pointer-events: none;
  transition: color var(--dur-3) var(--ease);
}
.fcard:hover .fcard__n { color: var(--red-100); }
.fcard__title {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  position: relative;
  z-index: 1;
}
.fcard__desc {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}
.fcard--on-ink {
  background: var(--surface-ink-card);
  border-color: var(--surface-ink-line);
}
.fcard--on-ink:hover { border-color: var(--white); box-shadow: var(--hard-red); }
.fcard--on-ink .fcard__title { color: var(--text-on-ink); }
.fcard--on-ink .fcard__desc { color: var(--text-on-ink-muted); }
.fcard--on-ink .fcard__n { color: var(--surface-ink-soft); }


/* ==========================================================================
   11. PROCESS STEPS
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--sp-1);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  transition: background-color var(--t-base), border-color var(--t-base), transform var(--t-base), z-index 0s;
}
.step:hover {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  transform: scale(1.03);
  z-index: 2;
}
.step__n {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  color: var(--white);
  background: var(--red-500);
  inline-size: 30px;
  block-size: 30px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.step__title {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  transition: color var(--t-base);
}
.step:hover .step__title { color: var(--invert-fg); }
.step__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  transition: color var(--t-base);
}
.step:hover .step__desc { color: var(--invert-fg); opacity: 0.74; }


/* ==========================================================================
   12. BREADCRUMB
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
}
.crumbs__sep { color: var(--line-strong); display: inline-flex; }
.crumbs__sep svg { inline-size: 13px; block-size: 13px; }
[dir="rtl"] .crumbs__sep svg { transform: scaleX(-1); }
.crumbs a { color: var(--text-muted); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--brand-text); }
.crumbs [aria-current="page"] { color: var(--text); }


/* ==========================================================================
   13. FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; }

.label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text);
}
.label__req { color: var(--brand-text); }
.label__opt {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-subtle);
}

.input, .textarea, .select {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 50px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
  background: var(--surface);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); font-weight: var(--fw-medium); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-subtle); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: var(--hard-ink-sm);
  transform: translate(-2px, -2px);
}
.textarea { min-block-size: 140px; resize: vertical; line-height: var(--lh-relax); }

.select {
  appearance: none;
  padding-inline-end: var(--sp-10);
  cursor: pointer;
  /* Caret drawn with a background image so it can be flipped for RTL. */
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right var(--sp-4) center;
}
[dir="rtl"] .select { background-position: left var(--sp-4) center; }

.field__hint { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-subtle); }
.field__error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--err-500);
}
.field__error svg { inline-size: 14px; block-size: 14px; flex: none; }

.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select { border-color: var(--err-500); background: var(--err-050); }
.field.is-invalid .input:focus,
.field.is-invalid .textarea:focus { box-shadow: 4px 4px 0 0 var(--err-500); }
.field.is-invalid .field__error { display: flex; }
.field.is-valid .input,
.field.is-valid .select { border-color: var(--ok-500); }

/* checkbox / radio — chunky, 2px, solid tick */
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.check:hover { border-color: var(--line-strong); background: var(--surface-sunken); }
.check input {
  appearance: none;
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  border: var(--bw) solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked {
  background: var(--red-500);
  border-color: var(--red-500);
  background-image: var(--tick);
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--surface);
}
.check:has(input:checked) { border-color: var(--line-bold); background: var(--surface); }

.fieldset { border: 0; display: grid; gap: var(--sp-3); min-inline-size: 0; }
.fieldset__legend {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text);
  margin-block-end: var(--sp-1);
}
.form-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-grid__full { grid-column: 1 / -1; }


/* ==========================================================================
   14. PAGINATION
   ========================================================================== */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.pager__btn {
  min-inline-size: 44px;
  block-size: 44px;
  padding-inline: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  color: var(--text);
  background: var(--surface);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.pager__btn:hover:not(:disabled) { border-color: var(--line-bold); transform: translateY(-2px); }
.pager__btn[aria-current="page"] {
  background: var(--invert-bg);
  border-color: var(--invert-bg);
  color: var(--invert-fg);
}
.pager__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pager__btn svg { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .pager__btn svg { transform: scaleX(-1); }
.pager__gap { color: var(--text-subtle); padding-inline: var(--sp-1); font-weight: var(--fw-bold); }


/* ==========================================================================
   15. TOAST
   ========================================================================== */
.toasts {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-inline-size: min(380px, calc(100vw - 2 * var(--sp-5)));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface-ink-soft);
  color: var(--text-on-ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
  animation: toastIn var(--dur-4) var(--ease-pop) both;
  border-inline-start: 4px solid var(--red-500);
}
.toast.is-out { animation: toastOut var(--dur-3) var(--ease-in) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(8px) scale(0.98); } }
.toast--ok  { border-inline-start-color: var(--ok-500); }
.toast--err { border-inline-start-color: var(--red-500); }
.toast__ico { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; }
.toast--ok  .toast__ico { color: var(--ok-500); }
.toast--err .toast__ico { color: var(--red-400); }
.toast__body { min-inline-size: 0; flex: 1 1 auto; }
.toast__title { font-size: var(--fs-sm); font-weight: var(--fw-heavy); color: var(--text-on-ink); }
.toast__msg   { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-on-ink-muted); margin-block-start: 2px; }
.toast__x {
  inline-size: 24px; block-size: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-on-ink-subtle);
  border-radius: var(--r-xs);
  flex: none;
}
.toast__x:hover { color: var(--text-on-ink); background: rgba(255,255,255,0.1); }
.toast__x svg { inline-size: 14px; block-size: 14px; }


/* ==========================================================================
   16. MODAL / LIGHTBOX
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fadeIn var(--dur-3) var(--ease) both;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal__panel {
  position: relative;
  z-index: 1;
  inline-size: min(680px, 100%);
  max-block-size: min(88vh, 800px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  animation: modalIn var(--dur-4) var(--ease-out) both;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-block-end: var(--bw) solid var(--line-bold);
}
.modal__title {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.modal__x {
  inline-size: 42px; block-size: 42px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.modal__x:hover { border-color: var(--line-bold); background: var(--surface-sunken); }
.modal__x svg { inline-size: 18px; block-size: 18px; }
.modal__body { padding: var(--sp-6); }
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  border-block-start: var(--bw-hair) solid var(--line);
  background: var(--surface-sunken);
}

/* --------------------------------------------------------------------------
   LIGHTBOX / IMAGE VIEWER — photos AND video, with a real toolbar:
     zoom out · zoom % · zoom in · fit · rotate · full screen · download · close
   plus wheel-to-zoom at the cursor, drag-to-pan, double-click, keyboard
   (+ − 0 F Esc, ← → RTL-aware) and the Fullscreen API. VIVID.lightbox() owns it.

   It is a black room, in BOTH themes — a viewer is not a page surface. The
   chrome inside it is therefore hard-coded white-on-black on purpose, and the
   red is the one accent, flat and solid.
   -------------------------------------------------------------------------- */
.lightbox { z-index: var(--z-lightbox); padding: 0; }
.lightbox .modal__scrim { background: rgba(6, 7, 10, 0.94); }

/* THE BAR IS A ROW, NOT AN OVERLAY.
   Floated above the panel (Momentum's device) it clips off the top of the
   viewport as soon as the window is short: the panel is 88vh and centred, which
   leaves ~50px of margin, and a 44px toolbar sitting -48px above it lands
   half-outside the screen. As a real grid row it can never escape. */
.lightbox__panel {
  position: relative;
  z-index: 1;
  inline-size: min(1200px, calc(100vw - var(--sp-8)));
  block-size: min(92vh, 960px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--sp-3);
  animation: modalIn var(--dur-4) var(--ease-out) both;
}
/* data-lb-close lives on the stage: clicking the empty space AROUND the image
   dismisses. The image itself stops the event, so a click on the picture never
   closes the viewer. */
.lightbox__stage {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;          /* a zoomed image must never escape the stage */
  touch-action: none;        /* we drive pan/zoom ourselves */
  cursor: zoom-out;
}

/* ---- toolbar ---- */
.lightbox__bar {
  grid-row: 1;
  z-index: 2;
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: var(--tap);
}
.lightbox__count {
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
/* Flat, hard-edged, 2px — no glass, no blur. */
.lightbox__tools {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: var(--bw) solid rgba(255, 255, 255, 0.30);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
}
.lightbox__tool {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lightbox__tool:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.16); color: #fff; }
.lightbox__tool:disabled,
.lightbox__tool[aria-disabled="true"] { opacity: 0.32; cursor: not-allowed; }
.lightbox__tool svg { inline-size: 18px; block-size: 18px; }
.lightbox__tool--close:hover { background: var(--red-500); color: #fff; }
.lightbox__tool:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox__level {
  min-inline-size: 5ch;
  text-align: center;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.lightbox__sep {
  inline-size: 2px;
  block-size: 20px;
  margin-inline: var(--sp-1);
  background: rgba(255, 255, 255, 0.22);
  flex: none;
}

/* ---- the picture ---- */
.lightbox__img {
  max-inline-size: 100%;
  /* Anchored to the VIEWPORT, not to a percentage: `max-block-size: 100%`
     computes but does NOT constrain here — the image keeps its natural size and
     runs off the bottom of the screen. A vh cap always resolves. */
  max-block-size: min(72vh, 800px);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  border: var(--bw) solid rgba(255, 255, 255, 0.85);
  transform-origin: center center;
  transition: transform var(--dur-3) var(--ease-out);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
/* While panning, kill the transition so the drag tracks the pointer 1:1. */
.lightbox.is-zoomed .lightbox__img { transition: none; }

.lightbox__caption {
  max-inline-size: 70ch;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.80);
}

/* ---- arrows: INSIDE the stage at every width (outside, they clip) ---- */
.lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border: var(--bw) solid rgba(255, 255, 255, 0.42);
  border-radius: var(--r-sm);
  background: rgba(10, 11, 16, 0.6);
  color: #fff;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.lightbox__nav:hover { background: #fff; color: var(--ink-900); border-color: #fff; }
.lightbox__nav svg { inline-size: 20px; block-size: 20px; }
[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }
.lightbox__nav--prev { inset-inline-start: var(--sp-3); }
.lightbox__nav--next { inset-inline-end: var(--sp-3); }

/* ---- video ---- */
.lightbox__frame {
  inline-size: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  border: var(--bw) solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  background: #000;
}
/* The poster is shown ONLY on file://, where YouTube refuses to embed at all
   (Error 153 — a null page origin). Served over http the real player embeds and
   this never renders. */
.lightbox__poster {
  position: relative;
  display: grid;
  place-items: center;
  max-inline-size: min(100%, 900px);
  border: var(--bw) solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lightbox__poster img { display: block; inline-size: 100%; block-size: auto; max-block-size: 64vh; object-fit: cover; }
.lightbox__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  inline-size: 74px;
  block-size: 74px;
  border-radius: var(--r-md);
  background: var(--red-500);
  color: #fff;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .lightbox__play { transform: translate(50%, -50%); }
.lightbox__poster:hover .lightbox__play { transform: translate(-50%, -50%) scale(1.08); }
[dir="rtl"] .lightbox__poster:hover .lightbox__play { transform: translate(50%, -50%) scale(1.08); }
.lightbox__play svg { inline-size: 28px; block-size: 28px; margin-inline-start: 3px; }
[dir="rtl"] .lightbox__play svg { margin-inline-start: 0; margin-inline-end: 3px; }
.lightbox__poster-note {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(6, 7, 10, 0.9), transparent);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
}

/* In full screen the panel owns the whole viewport, so let the picture use it. */
.lightbox.is-fullscreen .lightbox__panel {
  inline-size: 100vw;
  block-size: 100vh;
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.lightbox.is-fullscreen .lightbox__img { max-block-size: 80vh; }

@media (max-width: 559px) {
  .lightbox__panel { inline-size: calc(100vw - var(--sp-4)); gap: var(--sp-2); }
  .lightbox__bar { gap: var(--sp-2); }
  .lightbox__tool { inline-size: 34px; block-size: 34px; }
  .lightbox__tool svg { inline-size: 16px; block-size: 16px; }
  .lightbox__nav { inline-size: 42px; block-size: 42px; }
  /* At 360–559 the eight tools + the counter cannot share one line. The counter
     drops out (the caption still says where you are) and the bar stays whole. */
  .lightbox__count { display: none; }
  .lightbox__tools { margin-inline: auto; }
}


/* ==========================================================================
   17. EMPTY STATE
   ========================================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  border: var(--bw) dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.empty__ico {
  inline-size: 64px;
  block-size: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  color: var(--text);
}
.empty__ico svg { inline-size: 28px; block-size: 28px; }
.empty__title {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.empty__msg { font-size: var(--fs-base); color: var(--text-muted); max-inline-size: 46ch; }


/* ==========================================================================
   18. TABLE  (spec sheets)
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.table { inline-size: 100%; font-size: var(--fs-sm); }
.table th, .table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  vertical-align: top;
}
.table thead th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--invert-fg);
  background: var(--invert-bg);
  white-space: nowrap;
}
.table tbody tr + tr { border-block-start: var(--bw-hair) solid var(--line); }
.table tbody tr:hover { background: var(--surface-sunken); }
.table th[scope="row"] {
  font-weight: var(--fw-heavy);
  color: var(--text);
  inline-size: 40%;
  white-space: nowrap;
}
.table td { color: var(--text-muted); font-weight: var(--fw-medium); }


/* ==========================================================================
   19. TABS
   ========================================================================== */
.tabs__list {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-block-end: var(--bw) solid var(--line);
}
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: var(--sp-3) var(--sp-5);
  min-block-size: 48px;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.tab::after {
  content: '';
  position: absolute;
  inset-block-end: -2px;
  inset-inline: var(--sp-3);
  block-size: 3px;
  background: transparent;
  border-radius: 2px;
  transition: background-color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { background: var(--red-500); }
.tabs__panel { padding-block-start: var(--sp-6); }
.tabs__panel[hidden] { display: none; }


/* ==========================================================================
   20. ACCORDION
   ========================================================================== */
.acc { border-block-start: var(--bw-hair) solid var(--line); }
.acc__item { border-block-end: var(--bw-hair) solid var(--line); }
.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-1);
  text-align: start;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  transition: color var(--t-fast);
}
.acc__btn:hover { color: var(--brand-text); }
.acc__ico {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-xs);
  transition: transform var(--t-base), background-color var(--t-base), color var(--t-base);
}
.acc__ico svg { inline-size: 15px; block-size: 15px; }
.acc__btn[aria-expanded="true"] .acc__ico {
  transform: rotate(180deg);
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.acc__panel {
  overflow: hidden;
  block-size: 0;
  transition: block-size var(--dur-4) var(--ease);
}
.acc__panel-in {
  padding-block: 0 var(--sp-5);
  padding-inline-end: var(--sp-10);
  color: var(--text-muted);
  line-height: var(--lh-relax);
}


/* ==========================================================================
   21. QUOTE CTA PANEL — the one funnel. Solid red, unmissable.
   ========================================================================== */
.qcta {
  position: relative;
  overflow: hidden;
  background: var(--red-500);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  color: var(--white);
}
/* A hard-edged, rotated block — never a blur. */
.qcta::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -6%;
  inline-size: 340px;
  block-size: 340px;
  background: var(--red-600);
  border-radius: var(--r-xl);
  transform: rotate(24deg);
  pointer-events: none;
}
.qcta > * { position: relative; z-index: 1; }
.qcta__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--white);
  max-inline-size: 20ch;
}
.qcta__body {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text-on-red-muted);
  max-inline-size: 52ch;
  line-height: var(--lh-relax);
}
.qcta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-8); }
.qcta__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-red-muted);
}
.qcta__note svg { inline-size: 15px; block-size: 15px; }


/* ==========================================================================
   22. MISC
   ========================================================================== */
.spinner {
  inline-size: 20px;
  block-size: 20px;
  border: 2.5px solid var(--line);
  border-block-start-color: var(--red-500);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.divider { block-size: 1px; background: var(--line); border: 0; }
.divider--bold { block-size: 2px; background: var(--line-bold); }
.divider--on-ink { background: var(--line-on-ink); }

/* An inline "trust" line item. */
.trust {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text-2);
}
.trust svg { inline-size: 16px; block-size: 16px; color: var(--brand-text); flex: none; }
.trust--on-ink { color: var(--text-on-ink-muted); }
.trust--on-ink svg { color: var(--red-400); }

/* Skeleton for anything loading from data.js. */
.skel {
  background: linear-gradient(90deg, var(--media-bed) 25%, var(--surface-sunken) 50%, var(--media-bed) 75%);
  background-size: 200% 100%;
  animation: skel 1.3s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes skel { to { background-position: -200% 0; } }


/* ==========================================================================
   23. PAGE HEADER  (.phead) — the slim masthead every interior page opens with
   --------------------------------------------------------------------------
   Two flavours, so the light→dark rhythm still works page to page:
     .phead           white, closed by a hard 2px ink rule  → page then goes dark
     .phead--ink      the full-bleed ink band               → page then goes white
   It carries the ONE <h1> of the page. Keep it slim: this is not a hero.
   ========================================================================== */
.phead {
  position: relative;
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--surface);
  border-block-end: var(--bw) solid var(--line-bold);
}
.phead__in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.phead__main { min-inline-size: 0; flex: 1 1 380px; }
.phead__title {
  margin-block-start: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-tight);
  color: var(--text);
  text-wrap: balance;
}
.phead__sub {
  margin-block-start: var(--sp-3);
  max-inline-size: 62ch;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}
.phead__aside { flex: none; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.phead .crumbs { margin-block-end: var(--sp-4); }

/* the ink flavour */
.phead--ink { background: var(--surface-ink); border-block-end-color: var(--surface-ink); }
.phead--ink .phead__title { color: var(--text-on-ink); }
.phead--ink .phead__sub   { color: var(--text-on-ink-muted); }
.phead--ink .crumbs                  { color: var(--text-on-ink-subtle); }
.phead--ink .crumbs a                { color: var(--text-on-ink-muted); }
.phead--ink .crumbs a:hover          { color: var(--text-on-ink); }
.phead--ink .crumbs__sep             { color: var(--surface-ink-line); }
.phead--ink .crumbs [aria-current="page"] { color: var(--text-on-ink); }

/* --------------------------------------------------------------------------
   .phead--slim  ← USE THIS ON EVERY LISTING / CONTENT PAGE
   --------------------------------------------------------------------------
   The thin masthead. ~92px at 390 and ~120px at 1440, so the page STARTS WITH
   THE CONTENT instead of a full-screen hero. It carries a small breadcrumb, a
   modest H1 and AT MOST one short line of sub-copy — no kicker, no metric pills,
   no chip row, no aside stack. If you find yourself wanting those, you want a
   section, not a page header.

     <section class="phead phead--slim">
       <div class="container">
         <div class="phead__in">
           <div class="phead__main">
             <nav class="crumbs" aria-label="Breadcrumb">…</nav>   <- optional
             <h1 class="phead__title" data-i18n="products_title">Products</h1>
             <p class="phead__sub" data-i18n="products_sub">One short line.</p>
           </div>
           <div class="phead__aside">                              <- optional
             <a class="btn btn--primary btn--sm" href="quote.html">…</a>
           </div>
         </div>
       </div>
     </section>

   Combines with --ink: `.phead phead--slim phead--ink` is a slim dark band.
   -------------------------------------------------------------------------- */
.phead--slim {
  padding-block: var(--sp-4) var(--sp-5);
}
.phead--slim .phead__in { align-items: center; gap: var(--sp-4); }
.phead--slim .crumbs { margin-block-end: var(--sp-2); font-size: var(--fs-2xs); }
.phead--slim .phead__title {
  margin-block-start: 0;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}
.phead--slim .phead__sub {
  margin-block-start: var(--sp-1);
  max-inline-size: 74ch;
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .phead--slim { padding-block: var(--sp-5) var(--sp-6); }
  .phead--slim .phead__title { font-size: var(--fs-3xl); }
}


/* ==========================================================================
   24. SHARED GRIDS
   .cgrid → category cards   ·   .agrid → agent cards   ·   .fgrid → feature cards
   (.pgrid, for product cards, lives in section 4.)
   ========================================================================== */
.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--rail-gap);
}
@media (min-width: 900px) { .cgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.agrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-5);
}
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-5);
}


/* ==========================================================================
   25. TOOLBAR + VIEW SWITCH  (products / categories listing chrome)
   The view switch is the SAME segmented mechanic as the language switcher:
   a solid ink block marks the live option. Grid ⇄ List.
   ========================================================================== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-4);
  border-block-end: var(--bw) solid var(--line-bold);
}
.toolbar__count {
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.toolbar__count strong { color: var(--text); }
.toolbar__controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.toolbar .select { inline-size: auto; min-inline-size: 190px; }

.viewsw {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-sm);
  flex: none;
}
.viewsw__btn {
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.viewsw__btn:hover { color: var(--text); background: var(--surface-sunken); }
.viewsw__btn svg { inline-size: 18px; block-size: 18px; }
.viewsw__btn[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); }


/* ==========================================================================
   26. GALLERY  (product page: one big shot + a thumb strip, click → lightbox)
   ========================================================================== */
.gal { display: flex; flex-direction: column; gap: var(--sp-3); min-inline-size: 0; }
/* THE STAGE MUST FIT THE VIEWPORT AT EVERY WIDTH.
   Capped in vh (a percentage cap does not constrain a replaced element here),
   and object-fit: CONTAIN — a tall or square pack must never be cropped, and a
   small one must never be blown up. The bed carries the letterbox. */
.gal__main {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  max-block-size: min(72vh, 640px);
  overflow: hidden;
  background: var(--media-bed);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  cursor: zoom-in;
}
.gal__main img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gal__main:hover img { transform: scale(1.03); }
/* A video slot in the stage: a poster + a play badge, never an autoloaded frame. */
.gal__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 66px;
  block-size: 66px;
  border-radius: var(--r-md);
  background: var(--red-500);
  color: var(--white);
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease);
}
[dir="rtl"] .gal__play { transform: translate(50%, -50%); }
.gal__main:hover .gal__play { transform: translate(-50%, -50%) scale(1.07); }
[dir="rtl"] .gal__main:hover .gal__play { transform: translate(50%, -50%) scale(1.07); }
.gal__play svg { inline-size: 26px; block-size: 26px; margin-inline-start: 3px; }
[dir="rtl"] .gal__play svg { margin-inline-start: 0; margin-inline-end: 3px; }
.gal__zoom {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-900);
  background: var(--white);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.gal__zoom svg { inline-size: 18px; block-size: 18px; }

/* The rail SCROLLS. It never wraps into a tall stack, at any width, in either
   direction — `flex: none` + `overflow-x: auto` is the whole contract. */
.gal__thumbs {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  flex-wrap: nowrap;
  padding-block-end: var(--sp-1);
  scrollbar-width: thin;
}
.gal__thumb {
  position: relative;
  flex: none;
  inline-size: 84px;
  block-size: 84px;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--media-bed);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.gal__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gal__thumb:hover { border-color: var(--line-bold); transform: translateY(-2px); }
.gal__thumb[aria-current="true"] { border-color: var(--red-500); }
/* A video thumb wears a small solid-red play chip, so the rail says at a glance
   which item is film and which is a photograph. */
.gal__thumb--video::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 5px;
  background: var(--red-500) center / 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   27. MAP EMBED  (contact page)
   ========================================================================== */
.mapbox {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  background: var(--media-bed);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
}
@media (max-width: 767px) { .mapbox { aspect-ratio: 4 / 3; } }
.mapbox iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }


/* ==========================================================================
   28. SEARCH DIALOG  (.sdlg) — the header's ONE search affordance
   --------------------------------------------------------------------------
   There is no inline header field and no dropdown under the bar any more. The
   header shows a search ICON; it opens THIS. A real dialog: role="dialog",
   aria-modal, focus moved to the input and TRAPPED, Esc closes, focus returns
   to the trigger, backdrop click closes, body scroll locked. Also opens on "/"
   and on Cmd/Ctrl+K.

   The input is a combobox: ↑ ↓ walk the rows via aria-activedescendant, Enter
   opens the active one. Results are grouped (Categories / Products), there is a
   real empty state before you type and a real no-results state after.

   It is a PAGE surface, not chrome: it stays neutral even when the header is
   painted Bakkar Red. Hard 2px border, medium radius, flat — no glass, no blur.
   ========================================================================== */
.sdlg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  /* Not centred. A command palette belongs in the upper third, where the eye
     already is and where the results have room to grow downwards. */
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 6vh, 5rem) var(--gutter) var(--gutter);
}
.sdlg__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fadeIn var(--dur-3) var(--ease) both;
}
.sdlg__panel {
  position: relative;
  z-index: 1;
  inline-size: min(640px, 100%);
  max-block-size: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: sdlgIn var(--dur-4) var(--ease-out) both;
}
@keyframes sdlgIn { from { opacity: 0; transform: translateY(-14px); } }

/* ---- the field ---- */
.sdlg__form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  padding-inline: var(--sp-4);
  min-block-size: 64px;
  border-block-end: var(--bw) solid var(--line-bold);
}
.sdlg__icon { inline-size: 20px; block-size: 20px; color: var(--brand-text); flex: none; }
.sdlg__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.sdlg__input::placeholder { color: var(--text-subtle); font-weight: var(--fw-medium); }
.sdlg__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sdlg__input:focus-visible { outline: none; }   /* the whole panel IS the field */

/* CLEAR wipes the FIELD; CLOSE dismisses the DIALOG. Two identical bordered
   x-boxes side by side is a coin toss for the user, so they are deliberately
   different objects: clear is a small chromeless glyph that lives inside the
   field, close is the chunky bordered control at the edge of the panel. */
.sdlg__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sdlg__clear:hover { background: var(--invert-bg); color: var(--invert-fg); }
.sdlg__clear svg { inline-size: 12px; block-size: 12px; }

.sdlg__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  margin-inline-start: var(--sp-1);
  border-radius: var(--r-xs);
  border: var(--bw) solid var(--line-bold);
  color: var(--text);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sdlg__close:hover { background: var(--invert-bg); color: var(--invert-fg); }
.sdlg__close svg { inline-size: 15px; block-size: 15px; }

/* ---- results ---- */
.sdlg__results {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
}
.sdlg__group {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
[dir="rtl"] .sdlg__group { text-transform: none; font-size: var(--fs-xs); }

.sdlg__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tap);
  padding: var(--sp-2);
  border: var(--bw) solid transparent;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sdlg__item:hover,
.sdlg__item.is-active {
  background: var(--surface-sunken);
  border-color: var(--line-bold);
}
.sdlg__item.is-active .sdlg__go { opacity: 1; }

.sdlg__thumb {
  inline-size: 46px;
  block-size: 46px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-xs);
  border: var(--bw-hair) solid var(--line);
  background: var(--media-bed);
}
.sdlg__thumb--icon {
  display: grid;
  place-items: center;
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.sdlg__thumb--icon svg { inline-size: 20px; block-size: 20px; }

.sdlg__meta { min-inline-size: 0; flex: 1 1 auto; }
.sdlg__name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  line-height: 1.35;
}
.sdlg__sub {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-text);
}
[dir="rtl"] .sdlg__sub { text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.sdlg__go {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  color: var(--brand-text);
  opacity: 0;
  transition: opacity var(--t-fast);
}
[dir="rtl"] .sdlg__go { transform: scaleX(-1); }
.sdlg__item:hover .sdlg__go { opacity: 1; }

/* Chip row used by the empty state ("popular lines"). */
.sdlg__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }

/* No-results */
.sdlg__empty { padding: var(--sp-8) var(--sp-5); text-align: center; }
.sdlg__empty-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--sp-4);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--text);
}
.sdlg__empty-icon svg { inline-size: 24px; block-size: 24px; }
.sdlg__empty-title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.sdlg__empty-body {
  margin-block-start: var(--sp-2);
  margin-inline: auto;
  max-inline-size: 44ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.sdlg__empty-actions { display: flex; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-5); flex-wrap: wrap; }

/* ---- foot: the keyboard legend + the "view all" action ---- */
.sdlg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-block-start: var(--bw-hair) solid var(--line);
  background: var(--surface-sunken);
}
.sdlg__hints { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.sdlg__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
}
@media (max-width: 559px) { .sdlg__hints { display: none; } }
.kbd {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 4px;
  margin-inline-end: 2px;
  font-family: var(--font-num);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  color: var(--text);
  background: var(--surface);
  border: var(--bw-hair) solid var(--line-strong);
  border-radius: var(--r-xs);
}
.sdlg__all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 36px;
  padding-inline: var(--sp-3);
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.sdlg__all:hover { background: var(--invert-bg); color: var(--invert-fg); }
.sdlg__all svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .sdlg__all svg { transform: scaleX(-1); }


/* ==========================================================================
   29. CUSTOMISER  (.cust) + the segmented radiogroup (.seg)
   --------------------------------------------------------------------------
   Four persisted choices: Appearance (Light / Dark / System), Header style and
   Mobile sidebar style (Default / Bakkar Red), and the Arabic font (.fontsel —
   eleven faces, Sultan Nahia by default). On DESKTOP the header icon opens
   the .cust dialog below. On MOBILE the identical groups are rendered INLINE in
   the drawer (.drawer__cust) — opening a second overlay out of an already-open,
   already-focus-trapped drawer stacks two traps and reads as broken.

   app.js wires [data-cust] DOCUMENT-WIDE, so the two copies can never disagree.
   ========================================================================== */
.cust {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}
.cust__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fadeIn var(--dur-3) var(--ease) both;
}
.cust__panel {
  position: absolute;
  inset-block-start: calc(var(--hdr-h) + var(--sp-3));
  inset-inline-end: var(--gutter);
  inline-size: min(340px, calc(100vw - var(--gutter) * 2));
  max-block-size: calc(100vh - var(--hdr-h) - var(--sp-10));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: custIn var(--dur-3) var(--ease-out) both;
}
@keyframes custIn { from { opacity: 0; transform: translateY(-10px); } }

.cust__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-block-end: var(--bw) solid var(--line-bold);
}
.cust__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
.cust__title svg { inline-size: 18px; block-size: 18px; color: var(--brand-text); }
.cust__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xs);
  color: var(--text-muted);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.cust__close:hover { border-color: var(--line-bold); background: var(--surface-sunken); color: var(--text); }
.cust__close svg { inline-size: 15px; block-size: 15px; }

.cust__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cust__legend {
  display: block;
  margin-block-end: var(--sp-2);
  font-family: var(--font-head);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
[dir="rtl"] .cust__legend { text-transform: none; font-size: var(--fs-xs); }
/* Inside the drawer the legends inherit the drawer's palette, so they stay
   legible when the sidebar is painted Bakkar Red. */
.drawer .cust__legend { color: var(--dw-fg-3); }

/* A one-line qualifier under a legend — used by the Arabic font group, which
   would otherwise look like it changes ALL the type on the page. */
.cust__hint {
  display: block;
  margin-block: -2px var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--text-subtle);
}
.drawer .cust__hint { color: var(--dw-fg-3); }

.cust__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: none;
  padding: var(--sp-3) var(--sp-4);
  border-block-start: var(--bw-hair) solid var(--line);
  background: var(--surface-sunken);
}
.cust__note { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-subtle); line-height: 1.4; }

/* The SAME foot, inline in the drawer. Here it is not the base of a floating
   panel, so it sheds the panel chrome (sunken bar, rule, padding) and resolves
   through --dw-*, which is what lets a Bakkar-Red sidebar invert it for free —
   the bare .btn--ghost would otherwise paint --text-2 (near-black) on the red.
   Scoped (0,2,0)/(0,3,0)/(0,4,0) so it beats .btn--ghost and .btn--ghost:hover
   in this same file no matter the source order — see the cascade note. */
.drawer .cust__foot {
  padding: 0;
  border-block-start: 0;
  background: none;
}
.drawer .cust__foot .btn {
  --btn-bg: transparent;
  --btn-fg: var(--dw-fg);
  --btn-bd: var(--dw-btn-bd);
  /* btn--sm is a 38px pointer target. In the drawer this is a TOUCH control —
     it is the only Reset a phone can reach, since .hdr__btn--cust (and with it
     the desktop panel) is display:none below 1080px. Give it a real thumb. */
  min-block-size: 44px;
}
.drawer .cust__foot .btn:hover {
  --btn-bg: var(--dw-hover-bg);
  --btn-fg: var(--dw-fg);
  --btn-bd: var(--dw-line-bold);
  transform: none;
  box-shadow: none;
}
.drawer .cust__note { color: var(--dw-fg-3); }

/* ---- .seg — the segmented radiogroup. All three settings use it. ----------
   Same mechanic as .langsw and .viewsw: a chunky 2px box, and a SOLID block on
   the live option. Flat. No pill, no gradient, no soft shadow. */
.seg {
  --seg-bg:    var(--surface);
  --seg-bd:    var(--line-bold);
  --seg-fg:    var(--text-muted);
  --seg-fg-on: var(--invert-fg);
  --seg-on:    var(--invert-bg);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--seg-bg);
  border: var(--bw) solid var(--seg-bd);
  border-radius: var(--r-sm);
}
/* In the drawer it takes the drawer's tokens, so a Bakkar-Red sidebar inverts
   it for free. (0,2,0) — it wins over the bare .seg above whatever the order.) */
.drawer .seg {
  --seg-bg:    var(--dw-seg-bg);
  --seg-bd:    var(--dw-seg-bd);
  --seg-fg:    var(--dw-seg-fg);
  --seg-fg-on: var(--dw-seg-fg-on);
  --seg-on:    var(--dw-seg-thumb);
}
.seg__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 40px;
  padding-inline: var(--sp-2);
  border-radius: 7px;
  font-family: var(--font-head);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  color: var(--seg-fg);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.seg__opt svg { inline-size: 15px; block-size: 15px; flex: none; }
.seg__opt:hover { color: var(--seg-fg-on); background: var(--overlay-1); }
.seg__opt[aria-checked="true"],
.seg__opt[aria-checked="true"]:hover {
  background: var(--seg-on);
  color: var(--seg-fg-on);
}
.seg__opt:focus-visible { outline-offset: -1px; }
/* Below 380px the three-up Appearance row would crush its labels — drop to the
   icons, and let the accessible name carry the word. */
@media (max-width: 379px) {
  .seg[data-cust="theme"] .seg__opt span { display: none; }
}

/* The colour swatch on the "Bakkar Red" options — the option shows you what it
   is going to do before you pick it. Hard-edged, flat, 2px. */
.seg__sw {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--overlay-2);
}
.seg__sw--default { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.seg__sw--red     { background: var(--red-brand); box-shadow: none; }


/* ---- .fontsel — the ARABIC FONT radiogroup. ------------------------------
   Eleven faces will not fit a segmented control, so this is the same mechanic
   turned VERTICAL: one chunky 2px box, a scrolling stack of rows inside it, and
   a SOLID invert block on the live one. Flat. No pill, no gradient.

   Every row is set in the face it offers — the Latin name AND a short Arabic
   sample (مطبعة البكار) — so the choice is made by eye, not by name. It moves
   --font-ar only: the Latin type on the page does not budge.
   ------------------------------------------------------------------------- */
.fontsel {
  --seg-bg:    var(--surface);
  --seg-bd:    var(--line-bold);
  --seg-fg:    var(--text-muted);
  --seg-fg-on: var(--invert-fg);
  --seg-on:    var(--invert-bg);

  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  /* ~5 rows, then it scrolls — the panel must never grow past the viewport. */
  max-block-size: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--seg-bg);
  border: var(--bw) solid var(--seg-bd);
  border-radius: var(--r-sm);
  scrollbar-width: thin;
}
.drawer .fontsel {
  --seg-bg:    var(--dw-seg-bg);
  --seg-bd:    var(--dw-seg-bd);
  --seg-fg:    var(--dw-seg-fg);
  --seg-fg-on: var(--dw-seg-fg-on);
  --seg-on:    var(--dw-seg-thumb);
}

.fontsel__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex: none;
  min-block-size: 44px;
  padding-inline: var(--sp-3);
  padding-block: var(--sp-2);
  border-radius: 7px;
  text-align: start;
  color: var(--seg-fg);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.fontsel__opt:hover { color: var(--seg-fg-on); background: var(--overlay-1); }
.fontsel__opt[aria-checked="true"],
.fontsel__opt[aria-checked="true"]:hover {
  background: var(--seg-on);
  color: var(--seg-fg-on);
}
.fontsel__opt:focus-visible { outline-offset: -1px; }

/* The name. It shrinks before the sample does — the sample is the whole point. */
.fontsel__name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 1.3;
}
/* The DEFAULT tag on Sultan Nahia — the face the real site uses. */
.fontsel__tag {
  display: inline-block;
  margin-inline-start: var(--sp-2);
  padding-inline: 5px;
  border-radius: 4px;
  background: var(--red-500);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 15px;
  vertical-align: 1px;
}
[dir="rtl"] .fontsel__tag { letter-spacing: 0; text-transform: none; font-size: 10px; }

/* The Arabic sample — the actual preview. Bigger than the name, and never
   allowed to wrap or clip. */
.fontsel__sample {
  flex: none;
  font-size: 1.0625rem;
  font-weight: var(--fw-normal);
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0.95;
}

/* ---- Each row wears its own face. --------------------------------------- */
.fontsel__opt[data-value="sultan"]    { font-family: 'Sultan Nahia', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="cairo"]     { font-family: 'Cairo', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="tajawal"]   { font-family: 'Tajawal', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="almarai"]   { font-family: 'Almarai', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="plexar"]    { font-family: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="notosans"]  { font-family: 'Noto Sans Arabic', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="notokufi"]  { font-family: 'Noto Kufi Arabic', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="vazirmatn"] { font-family: 'Vazirmatn', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="changa"]    { font-family: 'Changa', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="elmessiri"] { font-family: 'El Messiri', 'Segoe UI', system-ui, 'Tahoma', sans-serif; }
.fontsel__opt[data-value="amiri"]     { font-family: 'Amiri', 'Segoe UI', 'Tahoma', serif; }
/* Amiri and Noto Kufi sit small on the em — nudge their samples back up. */
.fontsel__opt[data-value="amiri"]    .fontsel__sample { font-size: 1.1875rem; }
.fontsel__opt[data-value="notokufi"] .fontsel__sample { font-size: 1rem; }

/* At 360px the row still has to hold both halves. The name gives up first. */
@media (max-width: 379px) {
  .fontsel__opt { padding-inline: var(--sp-2); }
  .fontsel__sample { font-size: 1rem; }
}

/* ==========================================================================
   CUSTOMISER — no blur behind the panel.
   The customiser is where you pick the ARABIC FONT. Blurring (or heavily
   dimming) the page behind it hides the very text you are trying to judge, so
   the panel keeps its own elevation while the page stays legible behind it.
   A light scrim still carries focus without obscuring the type.
   Scoped `.cust .cust__…` (0,2,0) so it wins over the base rule without !important.
   ========================================================================== */
.cust .cust__backdrop,
.cust .cust__scrim,
.cust .cust__veil {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(10, 12, 16, .22);
}