/* Sector Security — design system implementation.
   One stylesheet serves LTR and RTL: all directional spacing uses logical properties. */

/* ---------- tokens ---------- */
:root {
  --brand: #af2024;
  --brand-dark: #8e181c;
  --brand-tint: #fbf0f0;
  --grey: #818285;

  --ink: #14171a;
  --ink-soft: #2a2f35;
  --muted: #5c6166;
  --line: #e3e6e9;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --dark: #0f1215;

  --font-display: "Lexend", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  --container: 1200px;
  --gutter: 24px;

  --r-sm: 2px;
  --r-md: 4px;

  --z-dropdown: 10;
  --z-header: 20;
  --z-fab: 25;      /* above the header, below the drawer */
  --z-drawer: 30;
  --z-modal: 50;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t: 200ms var(--ease-out);

  --shadow-sm: 0 1px 2px rgb(20 23 26 / 0.06), 0 1px 3px rgb(20 23 26 / 0.05);
  --shadow-md: 0 4px 12px rgb(20 23 26 / 0.08), 0 2px 4px rgb(20 23 26 / 0.04);
  --shadow-lg: 0 12px 32px rgb(20 23 26 / 0.12), 0 4px 8px rgb(20 23 26 / 0.06);
}

html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* scroll-padding-top clears the sticky header: without it the skip link and the form's
   focus-first-error jump land underneath it. 88px covers both header heights. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (max-width: 768px) { body { font-size: 16px; } }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.35; }

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

::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: var(--z-modal);
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 480px) { :root { --gutter: 20px; } }

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--alt { background: var(--surface-2); }
.section--dark { background: var(--dark); color: #fff; }
.section--dark .section-lead, .section--dark .muted { color: #b4bac1; }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 14px;
}
html[lang="ar"] .kicker { letter-spacing: 0; text-transform: none; font-size: 14.5px; }
.kicker::before { content: ""; width: 24px; height: 2px; background: var(--brand); flex: none; }
.section-head--center .kicker::before { display: none; }

/* Brand red on the dark section is 2.73:1 — fails AA. A lighter tint of the same red
   measures 5.7:1 while keeping the accent on-brand. */
.section--dark .kicker { color: #e4646a; }
.section--dark .kicker::before { background: #e4646a; }

h1, .h1 { font-size: clamp(33px, 5.2vw, 54px); }
h2, .h2 { font-size: clamp(26px, 3.6vw, 42px); }
h3, .h3 { font-size: clamp(19px, 2vw, 21px); }

.section-lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); margin-top: 16px; max-width: 68ch; }
.section-head--center .section-lead { margin-inline: auto; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: 14px 26px; min-height: 48px;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  cursor: pointer; text-align: center;
  /* Without this the label breaks onto three lines inside a flex row. */
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.nav__link svg { width: 14px; height: 14px; opacity: 0.6; }
.lang-toggle svg { width: 16px; height: 16px; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn--onDark { border-color: rgb(255 255 255 / 0.35); color: #fff; }
.btn--onDark:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn .icon-dir { transition: transform var(--t); }
.btn:hover .icon-dir { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon-dir { transform: translateX(-3px); }

/* icons that point somewhere must mirror in RTL */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon-dir { transform: scaleX(-1) translateX(3px); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t);
}
.header.is-stuck { box-shadow: var(--shadow-md); }

.header__bar { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.header__logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.header__logo img { height: 44px; width: auto; }
@media (max-width: 480px) { .header__logo img { height: 36px; } }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
/* The English nav needs ~1094px. Below the old 1024px handoff the bar overflowed and the
   header CTA was clipped between 1025 and ~1052; 1120 gives slack. */
@media (max-width: 1120px) { .nav { display: none; } }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 500; font-size: 15.5px;
  padding: 10px 14px; border-radius: var(--r-sm); color: var(--ink-soft);
  transition: color var(--t), background-color var(--t);
  position: relative; min-height: 44px;
  white-space: nowrap;   /* "Contact Us" was wrapping to two lines and breaking the row */
}
.nav__link:hover { color: var(--brand); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--brand); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px; background: var(--brand);
}

.header__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: 12px; flex: none; }
@media (max-width: 1120px) { .header__actions { margin-inline-start: auto; } }

/* At 320px the logo + language toggle + burger overrun the 280px content width — 4px in
   English, 13px in Arabic where "English" is wider than "العربية". Shrink the logo and drop
   the toggle to icon-only so the bar fits the narrowest phones still in use. */
@media (max-width: 420px) {
  .header__bar { gap: 10px; min-height: 66px; }
  .header__logo img { height: 32px; }
  .lang-toggle { padding-inline: 11px; }
  .lang-toggle span { display: none; }
}

.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  padding: 9px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-soft);
  transition: border-color var(--t), color var(--t);
}
.lang-toggle:hover { border-color: var(--brand); color: var(--brand); }

.header__cta { display: inline-flex; }
@media (max-width: 768px) { .header__cta { display: none; } }

/* mega menu */
.nav__item { position: relative; }
/* top:100% + top padding, NOT `top: calc(100% + 10px)`. A real 10px gap between the trigger
   and the panel is a dead zone: the pointer leaves the nav item before it enters the menu,
   :hover drops, and the panel closes before you can reach it. The padding keeps the hover
   region contiguous while preserving the same visual offset. */
.mega {
  position: absolute; inset-inline-start: 50%; transform: translateX(-50%);
  top: 100%; width: min(760px, 88vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 30px 20px 20px;
  background-clip: padding-box;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  translate: 0 -6px;
  transition: opacity var(--t), translate var(--t), visibility var(--t);
  z-index: var(--z-dropdown);
}
[dir="rtl"] .mega { transform: translateX(50%); }
.nav__item:hover .mega, .nav__item:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; translate: 0 0;
}
.mega__link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: var(--r-sm);
  transition: background-color var(--t);
}
.mega__link:hover { background: var(--surface-2); }
.mega__icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); border-radius: var(--r-sm); }
.mega__icon svg { width: 19px; height: 19px; }
.mega__name { font-family: var(--font-display); font-weight: 600; font-size: 15px; display: block; }
.mega__desc { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.mega__foot { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; }

/* mobile drawer */
/* flex:none — without it the burger was squeezed to 40.5px at 320, under the 44px minimum. */
.burger { display: none; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
@media (max-width: 1120px) { .burger { display: inline-flex; } }
.burger svg { width: 22px; height: 22px; }

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--surface); padding: 20px;
  overflow-y: auto;
  translate: 100% 0; visibility: hidden;
  transition: translate 260ms var(--ease-out), visibility 260ms;
}
[dir="rtl"] .drawer { translate: -100% 0; }
.drawer.is-open { translate: 0 0; visibility: visible; }
/* Both children are flex items with the default shrink:1, and the logo's flex base is its
   intrinsic 500px — so the browser squeezed the close button to 33px and stretched the logo
   to a 7.95 aspect ratio (true ratio is 4.27). */
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.drawer__head img { height: 38px; width: auto; max-width: 100%; }
.drawer__close { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__link {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 19px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.drawer__sub { padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
.drawer__sublink { display: block; padding: 9px 0; padding-inline-start: 14px; color: var(--muted); font-size: 16px; }
.drawer__sublink:hover { color: var(--brand); }
.drawer__foot { margin-top: 22px; display: grid; gap: 10px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg img, .hero__bg svg { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.hero__bg svg { opacity: 1; }
/* Two overlays: a directional wash for text contrast, plus a floor so the copy stays
   readable no matter how the photo is cropped at narrow widths. */
.hero__bg::after { content: ""; position: absolute; inset: 0; }
/* Scoped to desktop so the mobile scrim below can win. Previously
   `[dir="rtl"] .hero__bg::after` (0-2-1) outranked the unscoped mobile rule (0-1-1), so the
   Arabic hero never got the mobile treatment and its text sat on a too-light background. */
@media (min-width: 769px) {
  .hero__bg::after {
    background:
      linear-gradient(100deg, rgb(12 14 17 / 0.95) 18%, rgb(12 14 17 / 0.72) 55%, rgb(12 14 17 / 0.5) 100%),
      linear-gradient(to bottom, rgb(12 14 17 / 0.35), rgb(12 14 17 / 0.55));
  }
  [dir="rtl"] .hero__bg::after {
    background:
      linear-gradient(260deg, rgb(12 14 17 / 0.95) 18%, rgb(12 14 17 / 0.72) 55%, rgb(12 14 17 / 0.5) 100%),
      linear-gradient(to bottom, rgb(12 14 17 / 0.35), rgb(12 14 17 / 0.55));
  }
}
@media (max-width: 768px) {
  .hero__bg::after {
    background: linear-gradient(to bottom, rgb(12 14 17 / 0.82), rgb(12 14 17 / 0.92));
  }
}
.hero__inner {
  position: relative; max-width: 780px;
  padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4.5vw, 60px);
}
.hero__kicker { color: #fff; }
.hero__kicker::before { background: var(--brand); }
.hero h1 { color: #fff; }
.hero__lead { font-size: clamp(17px, 1.8vw, 20px); color: #ccd1d7; margin-top: 20px; max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* hero: supporting points */
.hero__points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px; margin-top: 36px; padding-top: 30px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
@media (max-width: 560px) { .hero__points { grid-template-columns: 1fr; } }
.hero__points li { display: flex; align-items: flex-start; gap: 10px; color: #d5dade; font-size: 15.5px; }
.hero__points svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 3px; }

/* hero: client strip
   A light band rather than a dark one. The logos are supplied as white tiles and several
   brands are dark (Sbitany, TNB, Carmel, Kalimat) — on a dark strip they'd either need white
   chips behind them (visible boxes) or a monochrome-white filter (loses the brand colour).
   Putting the whole band on light keeps every logo in full colour with no box around it. */
/* Pure white, matching the logo tiles exactly — anything else leaves a visible rectangle
   around each logo. (mix-blend-mode can't fix it: the marquee's mask-image and the track's
   animated transform each create a stacking context that isolates the blend.) */
.hero__trust { position: relative; background: #fff; }
.hero__trust-inner { display: flex; align-items: center; gap: 28px; padding-block: 26px; }
@media (max-width: 620px) {
  .hero__trust-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 20px; }
  /* In a column flex, `flex:1` and `min-width:0` govern the vertical axis only — the marquee
     then sized to its max-content track (3864px) and its own fade mask, positioned at 4%/96%
     of that, washed out the first visible logo and hard-cut the last. body{overflow-x:hidden}
     hid the symptom from scrollWidth. flex:none is needed as well as the width. */
  .marquee { width: 100%; flex: none; align-self: stretch; }
}
.hero__trust-label {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); flex: none;
}
html[lang="ar"] .hero__trust-label { letter-spacing: 0; text-transform: none; font-size: 14px; }
/* ---------- logo marquee ---------- */
.marquee {
  flex: 1; min-width: 0; overflow: hidden;
  direction: ltr;                     /* identical motion in Arabic */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
/* Duration scales with the longer track so the pace stays calm at this size. */
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 58s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: 22px; padding-inline-end: 22px; }
/* No chip background — the tiles' own white matches the band exactly.
   The box matches the tile's 5:3 ratio: at a wider ratio the logo fits to height and leaves
   a third of the width empty, which read as small, cropped logos. */
.marquee__logo {
  display: grid; place-items: center; flex: none;
  width: 152px; height: 91px;
}
.marquee__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 560px) { .marquee__logo { width: 116px; height: 70px; } }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

.hero--page { padding: 0; }
.hero--page .hero__inner { padding-block: clamp(48px, 7vw, 84px); }

/* stat band */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 768px) { .stats { grid-template-columns: 1fr; } }
.stat { background: var(--surface); padding: 28px var(--gutter); text-align: center; }
.stat__value { font-family: var(--font-display); font-size: clamp(30px, 4vw, 40px); font-weight: 700; color: var(--brand); line-height: 1; }
.stat__label { font-size: 15px; color: var(--muted); margin-top: 10px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 26px; height: 100%;
  transition: border-color var(--t), box-shadow var(--t);
  display: flex; flex-direction: column;
}
a.card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand); border-radius: var(--r-sm); margin-bottom: 18px;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 8px; }
.card__desc { color: var(--muted); font-size: 15.5px; flex: 1; }
.card__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--brand);
}
.card__more svg { width: 15px; height: 15px; }

.why-card { display: flex; gap: 16px; }
.why-card__num {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1.5px solid var(--brand); color: var(--brand); border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.section--dark .why-card__num { border-color: var(--brand); color: #fff; background: var(--brand); }
.why-card h3 { margin-bottom: 6px; }
.why-card p { color: var(--muted); font-size: 15.5px; }
.section--dark .why-card p { color: #b4bac1; }

/* ---------- client wall ---------- */
/* Hairlines are drawn inside each tile, not via a coloured grid gap — an incomplete
   final row then just reads as white space instead of grey blocks. */
.clients {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
/* auto-fill drops to a SINGLE column below ~356px of content width, which stacked all 14
   logos vertically and made the page enormous on a phone. Pin the column count instead. */
@media (max-width: 620px) { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .clients { grid-template-columns: repeat(2, 1fr); } }
.client {
  position: relative; aspect-ratio: 5 / 3; display: block;
  background: var(--surface);
  box-shadow: inset -1px -1px 0 var(--line);
  transition: box-shadow var(--t), z-index var(--t);
}
/* Logos ship pre-trimmed on identical white tiles, so they fill the cell exactly. */
.client img { width: 100%; height: 100%; object-fit: contain; }
a.client:hover { box-shadow: inset 0 0 0 2px var(--brand); z-index: 1; }
/* .clients has overflow:hidden, which clips an outward focus ring — draw it inside instead. */
a.client:focus-visible { outline-offset: -3px; z-index: 2; }
.client__name {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--grey); text-align: center; transition: color var(--t);
}
.client:hover .client__name { color: var(--ink); }
.client__name {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--grey); text-align: center; transition: color var(--t);
}
.client:hover .client__name { color: var(--ink); }

/* ---------- product cards ---------- */
.product-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; height: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.product-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
/* The media box is absolutely positioned inside a fixed-ratio frame.
   Previously it was a flex item whose default `min-height: auto` let a tall portrait
   product photo push the box past its aspect-ratio — which is why card heights and image
   sizes were all over the place. */
.product-card__media {
  position: relative; aspect-ratio: 4 / 3; min-height: 0; flex: none;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: 18px;
  mix-blend-mode: multiply;
}
.product-card__media > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--grey); }

.product-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.product-card__cat { font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 7px; }
html[lang="ar"] .product-card__cat { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.product-card__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.35; }
/* Pinned to the bottom so model numbers line up across a row. */
.product-card__model {
  font-size: 13.5px; color: var(--muted);
  margin-top: auto; padding-top: 12px; font-variant-numeric: tabular-nums;
}

/* ---------- breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); padding-block: 18px; }
/* Breadcrumb anchors were 24px tall. Grow the links and claw the height back from the
   container's own padding so nothing shifts. */
@media (max-width: 1024px) {
  .breadcrumb { padding-block: 6px; row-gap: 0; }
  .breadcrumb a, .breadcrumb [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }
}
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb svg { width: 15px; height: 15px; opacity: 0.5; flex: none; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.hero--page .breadcrumb { color: #b4bac1; }
.hero--page .breadcrumb [aria-current="page"] { color: #fff; }
.hero--page .breadcrumb a:hover { color: #fff; }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.pdp__media { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 32px; display: grid; place-items: center; aspect-ratio: 1 / 1; position: sticky; top: 100px; }
@media (max-width: 900px) { .pdp__media { position: static; aspect-ratio: 4 / 3; } }
.pdp__media img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp__model {
  display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px 12px; margin-top: 14px; font-variant-numeric: tabular-nums;
}
.pdp__summary { font-size: 17.5px; color: var(--muted); margin-top: 20px; }
.pdp__specs { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.pdp__specs h2 { font-size: 20px; margin-bottom: 16px; }
.rich ul { list-style: none; display: grid; gap: 10px; }
.rich li { position: relative; padding-inline-start: 26px; color: var(--ink-soft); font-size: 16px; }
.rich li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 7px; height: 7px; background: var(--brand); border-radius: 50%;
}
.rich p { margin-bottom: 12px; color: var(--ink-soft); }
.rich p:last-child { margin-bottom: 0; }
.rich table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rich td, .rich th { border: 1px solid var(--line); padding: 9px 12px; text-align: start; }

.datasheet {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 14px 20px; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--t), background-color var(--t);
}
.datasheet:hover { border-color: var(--brand); background: var(--brand-tint); }
.datasheet svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.datasheet__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.datasheet__meta { font-size: 13.5px; color: var(--muted); }

.enquire-box { margin-top: 32px; padding: 24px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.enquire-box h2 { font-size: 19px; margin-bottom: 6px; }
.enquire-box p { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
.enquire-box__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- category page ---------- */
.prose-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .prose-cols { grid-template-columns: 1fr; } }
.prose p { color: var(--muted); font-size: 17px; margin-bottom: 18px; max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.prose .lead { font-size: clamp(19px, 2.2vw, 23px); color: var(--ink); font-family: var(--font-display); font-weight: 500; line-height: 1.45; margin-bottom: 22px; }

.spec-list { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; }
.spec-list h2 { font-size: 18px; margin-bottom: 16px; }
.spec-list ul { display: grid; gap: 12px; }
.spec-list li { position: relative; padding-inline-start: 28px; font-size: 15.5px; color: var(--ink-soft); }
.spec-list li svg { position: absolute; inset-inline-start: 0; top: 0.28em; width: 17px; height: 17px; color: var(--brand); }

.empty-state { text-align: center; padding: clamp(40px, 6vw, 72px) var(--gutter); background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-md); }
.empty-state h2 { font-size: 22px; margin-bottom: 10px; }
.empty-state p { color: var(--muted); max-width: 52ch; margin-inline: auto; margin-bottom: 22px; }

/* ---------- category chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft); background: var(--surface);
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip__count { font-size: 12.5px; opacity: 0.72; font-variant-numeric: tabular-nums; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin-bottom: 7px; }
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(175 32 36 / 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa0a6; }
.field__error { color: var(--brand); font-size: 13.5px; margin-top: 6px; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--brand); }
.field.has-error .field__error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.form-note { font-size: 14px; color: var(--muted); margin-top: 14px; }
.form-status { margin-top: 16px; padding: 14px 18px; border-radius: var(--r-sm); font-size: 15.5px; display: none; }
.form-status.is-ok { display: block; background: #edf7ee; border: 1px solid #bcdfc0; color: #1e5b26; }
.form-status.is-err { display: block; background: var(--brand-tint); border: 1px solid #e6b8ba; color: var(--brand-dark); }

.contact-cards { display: grid; gap: 12px; }
.contact-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
a.contact-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.contact-card__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); border-radius: var(--r-sm); }
.contact-card__icon svg { width: 20px; height: 20px; }
.contact-card__label { font-size: 13.5px; color: var(--muted); }
.contact-card__value { font-family: var(--font-display); font-weight: 600; font-size: 16px; word-break: break-word; }
.ltr-num { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--brand); color: #fff; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding-block: clamp(40px, 5vw, 64px); }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgb(255 255 255 / 0.86); margin-top: 12px; max-width: 52ch; }
.cta-band .btn { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- footer ---------- */
.footer { background: var(--dark); color: #b4bac1; padding-block: clamp(48px, 6vw, 72px) 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { height: 56px; width: auto; margin-bottom: 20px; }
.footer__about { font-size: 15px; max-width: 34ch; }
.footer h3 { color: #fff; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
html[lang="ar"] .footer h3 { letter-spacing: 0; text-transform: none; font-size: 15.5px; }
.footer li { margin-bottom: 10px; }
.footer a { font-size: 15px; transition: color var(--t); }
.footer a:hover { color: #fff; }
/* Footer links rendered 21px tall — too small to tap reliably. Applied up to 1024px, which
   is where the burger nav takes over and the device is likely touch-driven. */
@media (max-width: 1024px) {
  .footer li { margin-bottom: 2px; }
  .footer li a { display: inline-block; padding-block: 12px; }
  /* .footer__by sits in .footer__bottom, outside the li rule above. */
  .footer__bottom a { min-height: 44px; }
}
.footer__bottom {
  margin-top: clamp(40px, 5vw, 56px); padding-block: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 14px;
}
.footer__by {
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--t);
}
.footer__by svg { width: 14px; height: 14px; opacity: 0.7; }
.footer__by:hover { color: #fff; }
.footer__by:hover svg { opacity: 1; }

/* ---------- reveal ----------
   Content is visible by default. Only once the inline head script has confirmed JS is
   running does .reveal start hidden — so a blocked, slow or failed script can never leave
   the page blank. */
.js .reveal {
  opacity: 0; translate: 0 18px;
  transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out);
  /* CSS-only failsafe: if app.js never loads (CDN blocked, parse error, offline), the
     inline .js flag has already hidden this content and nothing would ever reveal it.
     This animation forces it visible after 3s and is cancelled the moment JS takes over. */
  animation: reveal-failsafe 1ms linear 3s forwards;
}
.js .reveal.is-in { opacity: 1; translate: 0 0; animation: none; }
@keyframes reveal-failsafe { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .reveal { opacity: 1; translate: 0 0; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- floating whatsapp ---------- */
/* Shared --z-drawer with .drawer meant the FAB (emitted later in the DOM) won the tie and
   floated over the open menu, stealing taps from the bottom row of drawer links. */
.wa-fab {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: var(--z-fab);
  width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  transition: transform var(--t), box-shadow var(--t);
}
.wa-fab:hover { background: #1eb958; }
.wa-fab svg { width: 28px; height: 28px; }
@media print { .wa-fab, .header, .footer { display: none; } }