/* ============================================================
   ZAMCO — main.css
   Requires tokens.css + fonts.css loaded before this file.
   RTL: authored with logical properties — dir="rtl" mirrors
   automatically. Only directional icons are flipped explicitly.
   2026-09-24 redesign: modern-corporate pass — radius scale,
   elevation shadows, navy gradients, glass stats, card polish.
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-en);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[lang="ar"] body, [lang="ar"] { font-family: var(--font-ar); }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: var(--radius);
}
h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { font-weight: 700; letter-spacing: 0; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
code, kbd, .mono { font-family: var(--font-mono); }
::selection { background: var(--navy); color: #fff; }

/* ---------- Layout utilities ---------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2.5rem, var(--container-wide)); margin-inline: auto; }
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }
.section--navy { background: var(--grad-navy); color: var(--text-on-navy); }
.section--ink { background: var(--footer-bg); color: var(--text-on-navy); }
.section--surface { background: var(--surface); }
.hairline-top { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--sp-3); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }

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

/* Section header: uppercase technical label + H2 with amber accent bar */
.section-head { max-width: 46rem; margin-block-end: var(--sp-4); }
.section-head h2 { position: relative; padding-block-end: var(--sp-2); }
.section-head h2::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0;
  inline-size: 3rem; block-size: 2px; background: var(--amber); border-radius: 2px;
}
.label {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy);
  margin-block-end: var(--sp-1);
}
.label::before {
  content: ""; inline-size: 1.75rem; block-size: 1px; background: var(--amber);
}
.section--navy .label, .section--ink .label { color: var(--text-on-navy); }
.section-head p { color: var(--text-muted); font-size: var(--fs-lg); }
.section--navy .section-head p, .section--ink .section-head p { color: var(--text-on-navy-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .8em 1.6em;
  font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--navy-deep); color: #fff; box-shadow: var(--shadow-2); }
/* amber fill passes AA only with --ink text (8.15:1) — never white text on amber */
.btn--amber { background: var(--grad-amber); color: var(--ink); box-shadow: var(--shadow-1); }
.btn--amber:hover { background: #c98f2c; color: var(--ink); box-shadow: var(--shadow-2); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { background: transparent; color: var(--text-on-navy); border-color: var(--line-navy); }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Icons: single-stroke inline SVG, 1.5px stroke, currentColor */
.icon { inline-size: 1.15em; block-size: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-2); top: -4rem; z-index: 200;
  background: var(--navy); color: #fff; padding: .6em 1.2em;
  font-weight: 700; text-decoration: none; border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-1); color: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-2); }
.header-inner {
  display: flex; align-items: center; gap: var(--sp-3);
  min-block-size: var(--header-h);
}
.brand { flex: none; text-decoration: none; display: flex; align-items: center; }
.brand img { display: block; block-size: 2.75rem; inline-size: auto; }
/* Small phones: keep the original compact logo so the header row never overflows. */
@media (max-width: 28rem) {
  .brand img { block-size: 2rem; }
}
.main-nav { margin-inline-start: auto; }
.main-nav > ul { display: flex; align-items: center; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; }
.main-nav a {
  text-decoration: none; color: var(--text); font-weight: 500; font-size: var(--fs-sm);
  padding: .45em .8em; border-block-end: 2px solid transparent; border-radius: 999px;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.main-nav a:hover { color: var(--navy); background: rgba(40,73,144,.08); }
.main-nav a[aria-current="page"] { color: var(--navy); font-weight: 700; border-block-end-color: var(--amber); }

/* Solutions dropdown */
.has-drop { position: relative; }
.has-drop > button {
  display: inline-flex; align-items: center; gap: .35em;
  background: none; border: 0; cursor: pointer;
  color: var(--text); font-weight: 500; font-size: var(--fs-sm); padding-block: .35em;
  white-space: nowrap;
}
.has-drop > button:hover { color: var(--navy); }
.has-drop > button .icon { transition: transform var(--dur) var(--ease); }
.has-drop.open > button .icon, .has-drop:focus-within .icon, .has-drop:hover .icon { transform: rotate(180deg); }
.drop-menu {
  position: absolute; inset-inline-start: 0; top: calc(100% + .5rem);
  min-inline-size: 17rem;
  background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--amber);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-2);
  padding: var(--sp-1);
  list-style: none; margin: 0;
  display: none;
  flex-direction: column; gap: 0; align-items: stretch;
}
.has-drop.open .drop-menu, .has-drop:focus-within .drop-menu, .has-drop:hover .drop-menu { display: flex; }
.drop-menu a { padding: .55em 1em; font-size: var(--fs-sm); border: 0; border-radius: var(--radius-sm); }
.drop-menu a:hover { background: rgba(40,73,144,.08); color: var(--navy); }

/* Language switcher + header actions */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: var(--sp-2); }
.lang-switch {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
}
.lang-switch a, .lang-switch span { padding: .45em .8em; text-decoration: none; color: var(--text); }
.lang-switch span[aria-current="true"] { background: var(--navy); color: #fff; }
.header-call { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-size: var(--fs-sm); color: var(--navy); text-decoration: none; }
.header-call:hover { color: var(--navy-deep); }
/* HF-rearrange: WhatsApp icon-button — mobile bar only (shown ≤72rem below),
   same bordered icon style as .nav-toggle. Hidden on desktop. */
.header-wa {
  display: none; align-items: center; padding: .5em;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); text-decoration: none;
}
.header-wa:hover { color: var(--navy-deep); border-color: var(--navy); }
/* HF-rearrange: second phone line — leaves the cramped mobile bar and becomes
   a proper row at the end of the mobile nav panel (shown ≤72rem below). */
.nav-call2 { display: none; }
.nav-call2 a { gap: .6em; align-items: center; }

/* Burger */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5em; cursor: pointer; color: var(--navy);
}
.nav-toggle .icon { inline-size: 1.4em; block-size: 1.4em; }
.nav-toggle .icon-close { display: none; }
.site-header.nav-open .nav-toggle .icon-open { display: none; }
.site-header.nav-open .nav-toggle .icon-close { display: block; }

@media (max-width: 72rem) {
  .nav-toggle { display: inline-flex; }
  /* HF-rearrange: mobile bar order = logo · call · WhatsApp · language · ☰
     (hamburger last). The right cluster is pushed to the far end; the nav
     panel is position:absolute so it drops out of the flex row. */
  .header-actions { order: 1; margin-inline-start: auto; }
  .nav-toggle { order: 2; }
  .header-wa { display: inline-flex; }
  .header-call--2 { display: none; }   /* second number lives in the panel now */
  .nav-call2 { display: list-item; }
  .main-nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--surface); border-block-end: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(16,23,37,.12);
    display: none; margin: 0;
  }
  .site-header.nav-open .main-nav { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-1) 0; }
  .main-nav > ul > li { border-block-start: 1px solid var(--line); }
  .main-nav a, .has-drop > button { display: flex; width: 100%; padding: .8em 1.25rem; }
  .drop-menu { position: static; box-shadow: none; border: 0; border-top: 1px solid var(--line); padding-inline-start: 1rem; }
  .has-drop.open .drop-menu { display: flex; }
  .has-drop:focus-within .drop-menu, .has-drop:hover .drop-menu { display: none; }
  .has-drop.open:focus-within .drop-menu, .has-drop.open:hover .drop-menu { display: flex; }
}

/* HF-rearrange: small-phone compaction (≤28rem) so the full mobile bar —
   logo · call (icon + number) · WhatsApp · language · ☰ — stays on one line
   with zero horizontal overflow. (Replaces the old ≤62rem rule that hid the
   call text and the second number in the bar.) */
@media (max-width: 28rem) {
  .header-inner { gap: var(--sp-1); width: min(100% - 1.25rem, var(--container)); }
  .brand img { block-size: 1.65rem; }
  .header-actions { gap: .3rem; }
  .header-call { gap: .35em; font-size: var(--fs-xs); }
  .header-call .header-call-text { white-space: nowrap; }
  .header-wa, .nav-toggle { padding: .4em; }
  .lang-switch a, .lang-switch span { padding: .45em .5em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  background: var(--navy-deep);
  color: var(--text-on-navy);
}
.hero__img {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; max-width: none;
}
/* blueprint grid over the duotone photo — 1px technical linework, CSS only */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}
.hero::after { /* readability scrim on the text side + soft bottom fade */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(14,26,51,.55), transparent 32%),
    linear-gradient(to right, rgba(14,26,51,.82) 0%, rgba(14,26,51,.45) 55%, rgba(14,26,51,.15) 100%);
}
[dir="rtl"] .hero::after { background: linear-gradient(to top, rgba(14,26,51,.55), transparent 32%), linear-gradient(to left, rgba(14,26,51,.82) 0%, rgba(14,26,51,.45) 55%, rgba(14,26,51,.15) 100%); }
.hero__inner { position: relative; z-index: 2; padding-block: var(--sp-7); max-width: 40rem; }
.hero .label {
  color: var(--amber); font-size: var(--fs-sm); /* large-bold uppercase ≥3:1 OK */
  border: 1px solid rgba(224,164,58,.45); border-radius: 999px;
  padding: .35em .9em; background: rgba(14,26,51,.35);
}
.hero .label::before { display: none; }
.hero h1 { margin-block-end: var(--sp-2); }
.hero__lead { font-size: var(--fs-lg); color: #dfe5ef; max-width: 34rem; margin-block-end: var(--sp-3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero--page .hero__inner { padding-block: var(--sp-6); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: var(--fs-sm); padding-block: var(--sp-2); color: var(--text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .4em; }
.breadcrumb li + li::before { content: "/"; color: var(--text-muted); }
.breadcrumb a { color: var(--navy); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }
.hero .breadcrumb { color: var(--text-on-navy-muted); }
.hero .breadcrumb a { color: var(--text-on-navy); }

/* ---------- Solution cards ---------- */
.sol-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-1);
  text-decoration: none; color: var(--text);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.sol-card:hover {
  border-color: rgba(40,73,144,.45); transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.sol-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-block-end: 1px solid var(--line); }
.sol-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.sol-card:hover .sol-card__media img { transform: scale(1.04); }
.sol-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: .5em; flex: 1; }
.sol-card__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.sol-card__text { color: var(--text-muted); font-size: var(--fs-sm); flex: 1; }
.sol-card__cta {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy);
}
.sol-card:hover .sol-card__cta { color: var(--navy-deep); }
.sol-card__num {
  position: absolute; inset-inline-start: 0; top: 0; z-index: 1;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--navy); color: #fff; padding: .3em .7em;
  border-end-end-radius: var(--radius);
}
/* number-only media (process cards): designed navy banner with the same
   blueprint grid as .hero::before, number centered as large amber display text
   (#e0a43a on #122340 — lightest gradient stop — = 7.12:1, per tokens amber rule) */
.sol-card__media--num {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(135deg, #0e1a33 0%, #122340 100%);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px, 100% 100%;
  border-block-end-color: var(--line-navy);
}
.sol-card__media--num .sol-card__num {
  position: static;
  background: transparent; padding: 0;
  color: var(--amber); font-size: var(--fs-2xl); font-weight: 500;
}

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem,100%),1fr)); gap: var(--sp-3); }
/* Card-style stats. Light sections: white card, navy numeral (fixes an old
   amber-on-white contrast failure on light backgrounds). Navy/ink sections:
   translucent glass card, amber numeral (≥3:1 large text per tokens contract). */
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3);
  box-shadow: var(--shadow-1);
}
.stat__num { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 500; color: var(--navy); }
.stat__label { font-size: var(--fs-sm); color: var(--text-muted); }
.section--navy .stat, .section--ink .stat, .cta-band .stat {
  background: rgba(255,255,255,.06); border-color: var(--line-navy); box-shadow: none;
}
.section--navy .stat__num, .section--ink .stat__num, .cta-band .stat__num { color: var(--amber); }
.section--navy .stat__label, .section--ink .stat__label, .cta-band .stat__label { color: var(--text-on-navy-muted); }

/* ---------- Leadership quote ---------- */
.quote { max-width: 50rem; margin-inline: auto; text-align: center; }
.quote__text { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); font-weight: 500; line-height: 1.45; color: var(--navy); }
.quote__text p { margin: 0; }
.quote__text::before { content: "\201C"; display: block; font-size: 3.2rem; line-height: .8; color: var(--amber); }
.quote__cite { font-style: normal; color: var(--text-muted); font-size: var(--fs-sm); }
.quote__cite::before { content: ""; display: block; inline-size: 3rem; block-size: 2px; background: var(--amber); margin: 0 auto var(--sp-2); }
.quote__name { font-weight: 700; color: var(--text); }

/* ---------- Sector chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1.1em; font-size: var(--fs-sm); font-weight: 500;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.chip::before { content: ""; inline-size: .45em; block-size: .45em; background: var(--amber); border-radius: 50%; }
/* Link chips (About "What We Do" pillar cards): .chip reused as a neat text link inside cards */
a.chip { text-decoration: none; color: var(--text); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.chip:hover { color: var(--navy); border-color: var(--navy); box-shadow: var(--shadow-1); }

/* ---------- Spec table ---------- */
/* border-collapse: separate + 0 spacing so border-radius/overflow clip cleanly */
.spec-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.spec-table caption { text-align: start; font-weight: 700; padding-block-end: var(--sp-1); }
.spec-table th, .spec-table td { padding: .7em 1em; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
.spec-table thead th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  background: var(--navy); color: #fff; border-block-end: 0;
}
.spec-table tbody th { font-weight: 500; color: var(--text-muted); inline-size: 40%; }
.spec-table td { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; }
.spec-table tbody tr { transition: background-color var(--dur) var(--ease); }
.spec-table tbody tr:hover { background: rgba(40,73,144,.045); }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-block-end: 0; }

/* ---------- Partner strip ---------- */
.partners { border-block: 1px solid var(--line); background: var(--surface); }
.partner-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem,100%),1fr));
  gap: 0; background: transparent;
  border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1);
  list-style: none; padding: 0;
}
.partner-strip li {
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  padding: var(--sp-2);
  border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line);
}
/* logos enlarged ~35% (2.75rem -> 3.7rem) per user request; grid auto-fit wraps gracefully;
   shown in original brand colors */
.partner-strip img { block-size: 3.7rem; inline-size: auto; max-inline-size: 100%; object-fit: contain; }

/* ---------- FAQ (details-based, card items) ---------- */
.faq { display: grid; gap: var(--sp-2); }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: rgba(40,73,144,.4); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); cursor: pointer; font-weight: 700; font-size: var(--fs-lg);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform var(--dur) var(--ease); color: var(--navy); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details > div { padding: 0 var(--sp-3) var(--sp-2); color: var(--text-muted); max-width: 46rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--grad-navy); color: var(--text-on-navy); overflow: clip; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cta-band__inner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-5);
}
.cta-band h2 { font-size: var(--fs-2xl); flex: 1 1 24rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Quote form ---------- */
.quote-form { display: grid; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--amber); padding: var(--sp-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.quote-form .field { display: grid; gap: .35em; }
.quote-form label { font-size: var(--fs-sm); font-weight: 700; }
.quote-form input, .quote-form select, .quote-form textarea {
  padding: .65em .8em; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); inline-size: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(40,73,144,.18);
}
.quote-form__row { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .quote-form__row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: var(--fs-sm); color: var(--text-muted); }
.form-status { font-size: var(--fs-sm); font-weight: 500; padding: .8em 1em; border: 1px solid var(--line); border-radius: var(--radius); display: none; }
.form-status.is-error { display: block; border-color: #b3261e; color: #b3261e; background: #fdf3f2; }
.form-status.is-info { display: block; border-color: var(--navy); color: var(--navy); background: #eef2f9; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--footer-bg); color: var(--text-on-navy-muted); font-size: var(--fs-sm); }
/* amber-to-transparent accent strip along the top edge */
.site-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; block-size: 3px;
  background: linear-gradient(to right, var(--amber), rgba(224,164,58,0));
}
[dir="rtl"] .site-footer::before { background: linear-gradient(to left, var(--amber), rgba(224,164,58,0)); }
/* HF-rearrange: balanced 5-column footer via named areas (all logical, so
   dir="rtl" mirrors column order automatically).
   Desktop ≥72rem:  brand | solutions A | solutions B | quick links | contact
   Mid 62–72rem:    3 columns, contact spans two — no empty grid cells.
   Mobile <62rem:   stacked brand → contact → solutions → quick links.
   .footer-sols wraps the two solution navs: a real sub-grid on mobile (two
   side-by-side columns whenever 2×10rem fit, else stacked), and
   display:contents ≥62rem so the navs join the parent grid directly. */
.footer-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
  grid-template-areas: "brand" "contact" "sols" "quick";
  padding-block: var(--sp-6) var(--sp-4);
}
.footer-brand { grid-area: brand; }
.footer-sols {
  grid-area: sols;
  display: grid; gap: var(--sp-4) var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.footer-col--quick { grid-area: quick; }
.footer-col--contact { grid-area: contact; }
@media (min-width: 62rem) {
  .footer-sols { display: contents; }
  /* sola/solb areas exist only on the parent grid from here up — assigning them
     below 62rem (where the sub-grid has no such named areas) would overlap the
     two navs in an implicit grid. */
  .footer-col--sol-a { grid-area: sola; }
  .footer-col--sol-b { grid-area: solb; }
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-areas:
      "brand   sola solb"
      "contact contact quick";
  }
}
@media (min-width: 72rem) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr .9fr 1.3fr;
    grid-template-areas: "brand sola solb quick contact";
  }
}
.site-footer h2, .site-footer h3 {
  color: var(--text-on-navy); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-block-end: var(--sp-2);
}
/* HF-rearrange: brand column is a flex column; the social row anchors to the
   bottom of the grid row on wide screens (margin-top:auto) so there is no dead
   gap under the brand block. On mobile the row is content-height, the auto
   margin collapses and logo → tagline → socials stay one grouped stack. */
.footer-brand { display: flex; flex-direction: column; }
.footer-brand img { block-size: 2.4rem; inline-size: auto; margin-block-end: var(--sp-2); align-self: flex-start; }
.footer-brand p { margin-block-end: var(--sp-1); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55em; }
.site-footer a { color: var(--text-on-navy-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-nap { display: grid; gap: .55em; font-style: normal; }
.footer-nap .nap-line { display: flex; gap: .6em; align-items: baseline; }
.footer-nap .icon { color: var(--amber); transform: translateY(2px); } /* graphic, ≥3:1 vs #0c1526 OK */
.socials { display: flex; gap: .75rem; list-style: none; padding: 0; margin-block-start: auto; padding-block-start: var(--sp-2); }
.socials a {
  display: inline-flex; padding: .5em; border: 1px solid var(--line-navy); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.socials a:hover { border-color: var(--amber); background: rgba(224,164,58,.12); }
.socials .icon { inline-size: 1.1em; block-size: 1.1em; }
.footer-bottom {
  border-top: 1px solid var(--line-navy);
  padding-block: var(--sp-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center;
  font-size: var(--fs-xs);
}
.footer-bottom .push { margin-inline-start: auto; }
.verify-token { color: var(--amber); font-family: var(--font-mono); font-size: var(--fs-xs); }

/* ---------- Mobile sticky call CTA ---------- */
.call-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: none; gap: 1px; background: var(--line-navy);
  border-top: 1px solid var(--line-navy);
  border-start-start-radius: var(--radius); border-start-end-radius: var(--radius);
  box-shadow: 0 -6px 20px rgba(14,26,51,.16);
}
.call-cta a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em; font-weight: 700; font-size: var(--fs-sm); text-decoration: none;
  text-transform: uppercase; letter-spacing: .05em;
}
.call-cta__call { background: var(--amber); color: var(--ink); }
.call-cta__quote { background: var(--navy); color: #fff; }
@media (max-width: 47.99rem) {
  .call-cta { display: flex; }
  body { padding-block-end: 3.4rem; }
}

/* ---------- Photo treatment ---------- */
/* .duotone: baked into hero WebPs by the pipeline; this class is the runtime
   fallback/treatment for any full-bleed photo placed on navy. */
.photo-duotone { position: relative; overflow: hidden; background: var(--navy-deep); }
.photo-duotone img { filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; opacity: .9; }
.photo-duotone::after { content: ""; position: absolute; inset: 0; background: rgba(14,26,51,.55); pointer-events: none; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .sol-card:hover { transform: none; }
  .sol-card__media img { transition: none; }
  .sol-card:hover .sol-card__media img { transform: none; }
}
/* No-JS: never hide content */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Print ---------- */
@media print {
  .site-header, .call-cta, .skip-link { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDESIGN v2 — bold premium dark homepage (2026-09)
   Aurora hero · animated counters · bento solutions · client/partner marquees
   ════════════════════════════════════════════════════════════════════════════ */

/* ---------- Hero v2: aurora + gridlines + proof chips ---------- */
.hero--home {
  min-block-size: max(92svh, 42rem);
  display: flex; align-items: center;
  background:
    radial-gradient(120% 90% at 85% -10%, #1d3568 0%, transparent 55%),
    linear-gradient(180deg, #0a1428 0%, var(--navy-deep) 58%, #0c1830 100%);
  overflow: clip;
}
.hero--home .hero__inner { max-width: 62rem; padding-block: calc(var(--sp-7) + 2rem); }
.hero__aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  will-change: transform;
}
.hero__aurora span:nth-child(1) {
  inline-size: 34rem; block-size: 34rem; inset-block-start: -12rem; inset-inline-end: -6rem;
  background: radial-gradient(circle, rgba(224,164,58,.5), transparent 65%);
  animation: aurora-a 14s ease-in-out infinite alternate;
}
.hero__aurora span:nth-child(2) {
  inline-size: 28rem; block-size: 28rem; inset-block-end: -10rem; inset-inline-start: -8rem;
  background: radial-gradient(circle, rgba(56,96,180,.55), transparent 65%);
  animation: aurora-b 18s ease-in-out infinite alternate;
}
.hero__aurora span:nth-child(3) {
  inline-size: 18rem; block-size: 18rem; inset-block-start: 30%; inset-inline-start: 38%;
  background: radial-gradient(circle, rgba(224,164,58,.28), transparent 65%);
  animation: aurora-a 11s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-4rem, 3rem, 0) scale(1.15); } }
@keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(5rem, -3rem, 0) scale(.95); } }
.hero--home::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 100%);
}
.hero__chip {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-sm); font-weight: 700; color: #f3e8cf;
  border: 1px solid rgba(224,164,58,.5); border-radius: 999px;
  padding: .45em 1.1em; margin: 0 0 var(--sp-3);
  background: rgba(14,26,51,.5); backdrop-filter: blur(6px);
}
.hero__chip::before {
  content: ""; inline-size: .55em; block-size: .55em; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 12px 2px rgba(224,164,58,.8);
}
.hero--home h1 {
  font-size: clamp(2.7rem, 1.5rem + 5vw, 4.9rem);
  line-height: 1.02; letter-spacing: -.03em; font-weight: 800;
  margin-block-end: var(--sp-3); text-wrap: balance;
}
.hero--home h1 .grad {
  background: linear-gradient(92deg, #f2c063 10%, var(--amber) 45%, #f7e3ae 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--home .hero__lead { font-size: var(--fs-xl); color: #cdd6e6; max-width: 42rem; }
.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0;
  margin: var(--sp-4) 0 0;
}
.hero__proof li {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding: .7em 1.15em; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px); font-size: var(--fs-sm); color: #cdd6e6;
}
.hero__proof strong { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; color: var(--amber); }
.hero__scroll {
  position: absolute; inset-block-end: var(--sp-3); inset-inline-start: 50%; translate: -50% 0;
  z-index: 2; color: var(--text-on-navy-muted); text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: .3em;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
}
.hero__scroll::after {
  content: ""; inline-size: 1px; block-size: 2.4rem;
  background: linear-gradient(180deg, var(--amber), transparent);
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ---------- Animated counters (JS adds .is-in) ---------- */
.stat__num [data-count] { display: inline-block; }

/* ---------- Bento solutions grid ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.bento > .sol-card { grid-column: span 2; }
.bento .sol-card--feature { grid-column: span 4; grid-row: span 1; flex-direction: row; }
.bento .sol-card--feature .sol-card__media { flex: 1.15; block-size: auto; aspect-ratio: auto; border-block-end: 0; border-inline-end: 1px solid var(--line); }
/* raster illustrations must not be cover-cropped in the tall feature slot */
.bento .sol-card--feature .sol-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; background: #f2ede4; }
.bento .sol-card--feature .sol-card__body { flex: 1; justify-content: center; padding: var(--sp-4); }
.bento .sol-card--feature .sol-card__title { font-size: var(--fs-2xl); }
.bento .sol-card--feature .sol-card__text { font-size: var(--fs-base, 1rem); }
.bento .sol-card--cta {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
  background: linear-gradient(100deg, var(--navy-deep), var(--navy) 60%, #2a4a8f);
  border-color: transparent; color: #fff; padding: var(--sp-3) var(--sp-4);
}
.bento .sol-card--cta:hover { transform: none; box-shadow: var(--shadow-2); border-color: rgba(224,164,58,.55); }
.bento .sol-card--cta .sol-card__cta { color: var(--amber); }
.bento .sol-card--cta-title { font-size: var(--fs-xl); font-weight: 800; }
.bento .sol-card--cta-text { color: var(--text-on-navy-muted); font-size: var(--fs-sm); }
@media (max-width: 62rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > .sol-card, .bento .sol-card--feature { grid-column: span 2; grid-row: auto; }
  .bento .sol-card--feature { flex-direction: column; }
  .bento .sol-card--feature .sol-card__media { aspect-ratio: 4 / 3; border-inline-end: 0; border-block-end: 1px solid var(--line); }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: 1fr; }
  .bento > .sol-card, .bento .sol-card--feature, .bento .sol-card--cta { grid-column: span 1; }
}

/* ---------- Marquee (clients & partners) ---------- */
.marquee { overflow: hidden; padding-block: var(--sp-2); }
.marquee__track {
  display: flex; align-items: center; gap: var(--sp-4);
  inline-size: max-content;
  animation: marquee var(--marquee-dur, 42s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee--edgefade {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__item {
  display: inline-flex; align-items: center; gap: .8em; white-space: nowrap;
  font-weight: 700; font-size: var(--fs-lg); color: rgba(255,255,255,.82);
}
.marquee__item::after { content: "✦"; color: var(--amber); font-size: .7em; }
.marquee__item--logo {
  padding: .8em 1.4em; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
}
.marquee__item--logo img { display: block; block-size: 2rem; inline-size: auto; }
.marquee__item--logo::after { content: none; }
.marquee__item--plain { padding: .6em 1.2em; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
.clients-band { background: linear-gradient(180deg, var(--navy-deep), #101f3d); color: var(--text-on-navy); }

/* ---------- CTA band v2: gradient glow ---------- */
.cta-band {
  background:
    radial-gradient(80% 140% at 15% 0%, rgba(224,164,58,.28), transparent 55%),
    linear-gradient(105deg, var(--navy-deep) 20%, var(--navy) 70%, #2a4a8f);
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__aurora span, .hero__scroll::after { animation: none; }
  .marquee__track { animation: none; flex-wrap: wrap; inline-size: auto; }
  .bento .sol-card, .hero__proof li { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDESIGN v2 — inner pages (2026-09)
   Aurora inner hero with floating isometric art · feature-card grids
   ════════════════════════════════════════════════════════════════════════════ */

/* ---------- Inner hero v2: aurora + floating card art ---------- */
.hero--v2 {
  min-block-size: max(34rem, 62svh);
  display: flex; align-items: center;
  background:
    radial-gradient(110% 90% at 88% -12%, #1d3568 0%, transparent 55%),
    radial-gradient(90% 80% at -10% 110%, #14264c 0%, transparent 50%),
    linear-gradient(180deg, #0a1428 0%, var(--navy-deep) 60%, #0c1830 100%);
}
/* soften the photo-era scrims; keep the blueprint grid, drop the side scrim */
.hero--v2::after {
  background: linear-gradient(to top, rgba(14,26,51,.5), transparent 30%);
}
.hero--v2 .breadcrumb [aria-current="page"] { color: var(--text-on-navy-muted); }
.hero--v2 .hero__inner { max-width: 72rem; }
.hero--v2 .hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--sp-5); align-items: center;
}
.hero--v2 .hero__content { max-width: 40rem; }
.hero--v2 h1 {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.05; letter-spacing: -.02em; font-weight: 800;
  margin-block-end: var(--sp-3); text-wrap: balance;
}
.hero--v2 h1 .grad {
  background: linear-gradient(92deg, #f2c063 10%, var(--amber) 45%, #f7e3ae 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--v2 .hero__lead { font-size: var(--fs-lg); color: #cdd6e6; max-width: 36rem; }
.hero--v2 .hero__proof { margin-block-start: var(--sp-3); }
/* floating isometric artwork */
.hero__art { position: relative; z-index: 2; display: flex; justify-content: center; }
.hero__art img {
  inline-size: min(100%, 30rem); block-size: auto;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 24px 40px rgba(4,10,24,.5));
  animation: hero-art-float 7s ease-in-out infinite;
}
@keyframes hero-art-float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-.7rem) }
}
@media (max-width: 56rem) {
  .hero--v2 { min-block-size: 0; }
  .hero--v2 .hero__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hero__art { order: -1; margin-block-start: var(--sp-2); }
  .hero__art img { inline-size: min(72vw, 20rem); animation: none; }
}

/* ---------- Feature cards (Key Features upgrade) ---------- */
.feat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-2);
  list-style: none; padding: 0; margin: 0;
}
.feat {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feat:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.feat__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--radius-sm, 6px);
  background: rgba(40,73,144,.1); color: var(--navy);
}
.feat__icon .icon { inline-size: 1.3em; block-size: 1.3em; }
.feat p { margin: 0; font-weight: 500; font-size: var(--fs-base, 1rem); }

/* ---------- Sector story cards (Where It's Used upgrade) ---------- */
.sector-cards { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.sector-cards .sol-card__title { font-size: var(--fs-lg); }

/* ---------- Motion safety for v2 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__art img { animation: none; }
  .feat:hover { transform: none; }
}

/* ---------- Selected projects list (projects page, 2026 profile) ---------- */
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.proj-list li { padding-block-start: var(--sp-2); border-block-start: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-sm); }
.proj-list li:first-child { padding-block-start: 0; border-block-start: 0; }
.proj-list strong { display: block; color: var(--text); font-size: var(--fs-base); }
.proj-meta { display: block; margin-block-start: .3rem; color: var(--navy); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; }

/* ---------- Z-Suite software page (2026 profile) ---------- */
.zs-grid { align-items: stretch; }
.zs-card .sol-card__body { display: flex; flex-direction: column; gap: .55rem; block-size: 100%; }
.zs-card .feat__icon { margin-block-end: .2rem; }
.zs-tag { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.zs-card .sol-card__text { flex: 1; }
.zs-runs { padding-block-start: .6rem; border-block-start: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-muted); }
.zs-badge { display: inline-block; margin-inline-start: .4rem; padding: .1em .5em; border-radius: var(--radius-sm); background: var(--amber); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
/* layout refinements: projects 2x2, Z-Suite 4-up on wide screens, Arabic meta in body font */
.proj-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.zs-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
[dir="rtl"] .proj-meta { font-family: inherit; letter-spacing: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   HEADER v3 — charcoal & yellow (2026-10)
   Top info bar · glass charcoal bar · animated nav underline · Solutions mega
   menu with 3D thumbnails · Get-a-Quote CTA · scroll progress line.
   Yellow (#f5b81c) is only a fill or text on charcoal (contrast ≥ 8:1).
   ════════════════════════════════════════════════════════════════════════════ */
.site-header {
  --hd-y: #f5b81c; --hd-y2: #ffd45a; --hd-bg: rgba(24, 26, 31, .94); --hd-tx: #d6d9de; --hd-line: rgba(255, 255, 255, .09);
  background: var(--hd-bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* lets the Solutions menu's own frosted blur work */
  border-block-end: 1px solid var(--hd-line);
  color: var(--hd-tx);
}
.site-header.is-stuck { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55); }

/* top info bar (desktop) */
.header-top { background: #121417; border-block-end: 1px solid var(--hd-line); font-size: var(--fs-xs); overflow: hidden; max-block-size: 2.5rem; transition: max-block-size .35s var(--ease), opacity .35s var(--ease); }
.header-top__inner { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 2.3rem; }
.header-top__inner > * { display: inline-flex; align-items: center; gap: .5em; color: #a9aeb6; text-decoration: none; white-space: nowrap; }
.header-top__inner a:hover { color: var(--hd-y2); }
.header-top__inner .icon { inline-size: 1em; block-size: 1em; fill: none; stroke: var(--hd-y); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-top__iso { color: #e9ebee !important; font-weight: 700; }
.header-top__iso::before { content: ""; inline-size: .5em; block-size: .5em; border-radius: 50%; background: var(--hd-y); box-shadow: 0 0 10px 2px rgba(245, 184, 28, .7); }
.header-top__push { margin-inline-start: auto; }
.site-header.is-stuck .header-top { max-block-size: 0; opacity: 0; border-block-end-color: transparent; }

/* main bar */
.header-inner { position: relative; transition: min-block-size .35s var(--ease); }
.site-header.is-stuck .header-inner { min-block-size: calc(var(--header-h) - .9rem); }
.brand img { transition: block-size .35s var(--ease), filter .3s; filter: brightness(1.25); }
.brand:hover img { filter: brightness(1.45); }
.site-header.is-stuck .brand img { block-size: 2.4rem; }
.main-nav a, .has-drop > button { color: var(--hd-tx); background: none; position: relative; border-block-end: 0; }
.main-nav > ul > li > a::after, .has-drop > button::after {
  content: ""; position: absolute; inset-inline: .8em; inset-block-end: .1em; block-size: 2px; border-radius: 2px;
  background: var(--hd-y); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
[dir="rtl"] .main-nav > ul > li > a::after, [dir="rtl"] .has-drop > button::after { transform-origin: right; }
.has-drop > button::after { inset-inline: 0; inset-block-end: -.15em; }
.main-nav a:hover, .has-drop > button:hover, .has-drop:hover > button, .has-drop.open > button { color: #fff; background: none; }
.main-nav > ul > li > a:hover::after, .has-drop:hover > button::after, .has-drop.open > button::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--hd-y2); font-weight: 700; }
.main-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Solutions mega menu: grouped categories + featured Z-Suite card (2026-10-09) */
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-h { margin: 0; }
@media (min-width: 72.01rem) {
  .has-drop { position: static; }
  .has-drop::before {                     /* hover bridge between button and panel */
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: .8rem; display: none;
  }
  .has-drop:hover::before { display: block; }
  .drop-menu {
    position: absolute; inset-inline: 0; top: calc(100% + .6rem);
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(14rem, .85fr); column-gap: 1.4rem; align-items: start;
    padding: 1.1rem 1.3rem 1.2rem; min-inline-size: 0; overflow: visible;
    background: rgba(24, 26, 30, .7); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid var(--hd-line); border-block-start: 3px solid var(--hd-y);
    border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  }
  .has-drop.open .drop-menu, .has-drop:focus-within .drop-menu, .has-drop:hover .drop-menu {
    opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
  }
  .drop-menu a::after { display: none; }
  .mm-group { min-inline-size: 0; }
  .mm-h {
    display: flex; align-items: center; gap: .7rem; margin-block-end: .55rem; padding-inline: .55rem;
    font: 700 .68rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hd-y);
  }
  .mm-h::after { content: ""; flex: 1; block-size: 1px; background: var(--hd-line); }
  [dir="rtl"] .mm-h { font-family: var(--font-ar); font-size: .82rem; letter-spacing: 0; }
  .mm-list { display: grid; gap: .1rem; }
  .drop-menu .mm-list a {
    position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: .75rem; align-items: center;
    padding: .4rem .55rem; border-radius: 12px; color: var(--hd-tx); white-space: normal;
    transition: background-color .2s;
  }
  .drop-menu .mm-list a::before {        /* yellow accent bar on hover */
    content: ""; position: absolute; inset-inline-start: 0; inset-block: .7rem; inline-size: 3px; border-radius: 3px;
    background: var(--hd-y); transform: scaleY(0); transition: transform .2s var(--ease);
  }
  .mm-list a img {
    inline-size: 2.8rem; block-size: 2.1rem; object-fit: cover; border-radius: 8px;
    background: #f2ede4; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .3s var(--ease), box-shadow .3s;
  }
  .mm-t { color: #fff; font-size: .88rem; font-weight: 700; line-height: 1.2; }
  .mm-d {
    align-self: start; color: #9aa3ae; font-size: .74rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .drop-menu .mm-list a:hover, .drop-menu .mm-list a:focus-visible, .drop-menu .mm-list a[aria-current="page"] { background: rgba(245, 184, 28, .09); }
  .drop-menu .mm-list a:hover::before, .drop-menu .mm-list a:focus-visible::before, .drop-menu .mm-list a[aria-current="page"]::before { transform: scaleY(1); }
  .drop-menu .mm-list a:hover .mm-t, .drop-menu .mm-list a[aria-current="page"] .mm-t { color: var(--hd-y2); }
  .drop-menu .mm-list a:hover img { transform: scale(1.05); box-shadow: 0 0 0 2px var(--hd-y); }
  .mm-feature { display: flex; flex-direction: column; gap: .7rem; padding-inline-start: 1.4rem; border-inline-start: 1px solid var(--hd-line); align-self: stretch; }
  .drop-menu .mm-card {
    display: flex; flex-direction: column; gap: .3rem; padding: .7rem .7rem .85rem; border-radius: 14px; white-space: normal;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(245, 184, 28, .35); color: var(--hd-tx); transition: border-color .2s, transform .25s var(--ease);
  }
  .mm-card img { inline-size: 100%; aspect-ratio: 16 / 8; block-size: auto; object-fit: cover; border-radius: 10px; background: #f2ede4; margin-block-end: .35rem; transition: transform .35s var(--ease); }
  .mm-tag { font: 700 .62rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hd-y); }
  [dir="rtl"] .mm-tag { font-family: var(--font-ar); font-size: .74rem; letter-spacing: 0; }
  .mm-card b { color: #fff; font-size: 1.02rem; }
  .mm-cd { color: #9aa3ae; font-size: .76rem; line-height: 1.4; }
  .mm-go { margin-block-start: .25rem; color: var(--hd-y2); font-size: .8rem; font-weight: 700; }
  .mm-go::after { content: " \2192"; }
  [dir="rtl"] .mm-go::after { content: " \2190"; }
  .drop-menu .mm-card:hover { border-color: var(--hd-y); transform: translateY(-2px); }
  .drop-menu .mm-card:hover img { transform: scale(1.03); }
  .drop-menu .mm-all {
    display: flex; justify-content: center; align-items: center; gap: .4rem; padding: .8rem; border-radius: 12px;
    background: var(--hd-y); color: #16181c; font-weight: 800; font-size: .88rem; transition: background-color .2s;
  }
  .drop-menu .mm-all::after { content: "\2192"; }
  [dir="rtl"] .drop-menu .mm-all::after { content: "\2190"; }
  .drop-menu .mm-all:hover, .drop-menu .mm-all[aria-current="page"] { background: var(--hd-y2); color: #16181c; }
}

/* actions */
.header-call {
  color: #fff; padding: .4em .9em .4em .45em; border: 1px solid var(--hd-line); border-radius: 999px;
  background: rgba(255, 255, 255, .04); transition: border-color .25s, background-color .25s;
}
[dir="rtl"] .header-call { padding: .4em .45em .4em .9em; }
.header-call:hover { color: #fff; border-color: rgba(245, 184, 28, .6); background: rgba(245, 184, 28, .08); }
.header-call > .icon {
  inline-size: 1.9em; block-size: 1.9em; padding: .42em; border-radius: 50%;
  background: var(--hd-y); color: #16181c; fill: none; stroke: currentColor;
  box-shadow: 0 0 0 0 rgba(245, 184, 28, .6); animation: hd-ping 2.4s ease-out infinite;
}
@keyframes hd-ping { 0% { box-shadow: 0 0 0 0 rgba(245, 184, 28, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(245, 184, 28, 0); } }
.header-call--2 { border: 0; background: none; padding: 0; color: #a9aeb6; }
.header-call--2:hover { background: none; color: var(--hd-y2); }
.header-quote {
  display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.15em; border-radius: 999px;
  background: var(--hd-y); color: #16181c; font-weight: 800; font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(245, 184, 28, .7); transition: background-color .25s, transform .25s, box-shadow .25s;
}
.header-quote:hover { background: var(--hd-y2); color: #16181c; transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(245, 184, 28, .85); }
.header-quote .icon { inline-size: 1em; block-size: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .header-quote .icon { transform: scaleX(-1); }
.lang-switch { border-color: var(--hd-line); }
.lang-switch a, .lang-switch span { color: var(--hd-tx); }
.lang-switch a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.lang-switch span[aria-current="true"] { background: var(--hd-y); color: #16181c; }
.header-wa, .nav-toggle { border-color: var(--hd-line); color: #fff; }
.header-wa:hover, .nav-toggle:hover { color: var(--hd-y2); border-color: var(--hd-y); }

/* scroll progress line */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px;
    background: linear-gradient(90deg, var(--hd-y), var(--hd-y2));
    transform-origin: left; transform: scaleX(0);
    animation: hd-progress linear both; animation-timeline: scroll(root);
  }
  [dir="rtl"] .site-header::after { transform-origin: right; }
  @keyframes hd-progress { to { transform: scaleX(1); } }
}

/* tablet / phone */
@media (max-width: 72rem) {
  .header-top, .header-quote { display: none; }
  .main-nav { background: #1c1f24; border-block-end-color: var(--hd-line); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .7); }
  .main-nav > ul > li { border-block-start-color: var(--hd-line); }
  .main-nav > ul > li > a::after, .has-drop > button::after { display: none; }
  .main-nav a[aria-current="page"] { background: rgba(245, 184, 28, .08); }
  .drop-menu { background: #16181c; border-top-color: var(--hd-line); flex-direction: column; padding-block: .4rem .8rem; }
  .mm-h { padding: .8rem 1.25rem .3rem; font: 700 .66rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hd-y); }
  [dir="rtl"] .mm-h { font-family: var(--font-ar); font-size: .8rem; letter-spacing: 0; }
  .drop-menu a { display: flex; align-items: center; gap: .75rem; color: var(--hd-tx); }
  .drop-menu .mm-list a { padding-block: .55em; }
  .drop-menu a img { inline-size: 3rem; block-size: 2.2rem; object-fit: cover; border-radius: 6px; background: #f2ede4; flex: none; }
  .drop-menu a:hover { background: rgba(245, 184, 28, .1); color: #fff; }
  .mm-d, .mm-card img, .mm-tag, .mm-cd, .mm-go { display: none; }
  .mm-feature { display: flex; flex-direction: column; gap: .4rem; margin-block-start: .6rem; padding: .6rem 1.25rem 0; border-block-start: 1px solid var(--hd-line); }
  .drop-menu .mm-card, .drop-menu .mm-all { justify-content: center; padding: .7rem; border-radius: 10px; font-weight: 700; }
  .drop-menu .mm-card { border: 1px solid rgba(245, 184, 28, .45); color: var(--hd-y2); }
  .drop-menu .mm-all { background: var(--hd-y); color: #16181c; }
  .header-call > .icon { inline-size: 1.7em; block-size: 1.7em; }
}
@media (min-width: 72.01rem) {
  .header-call--2 { display: none; }          /* second line lives in the top info bar */
}
.header-call, .header-call-text { white-space: nowrap; }
@media (max-width: 28rem) {
  .header-call, [dir="rtl"] .header-call { padding: 0; border: 0; background: none; gap: .35em; }
  .header-call > .icon { inline-size: 1.55em; block-size: 1.55em; padding: .35em; }
  .header-actions { gap: .25rem; }
  .header-wa, .nav-toggle { padding: .35em; }
}
@media (prefers-reduced-motion: reduce) {
  .header-call > .icon, .site-header::after { animation: none; }
  .header-top, .header-inner, .brand img, .drop-menu { transition: none !important; }
}

/* ---------- Traffic Solutions: live 3D scene (js/traffic-3d.js) ---------- */
.hero__art[data-traffic3d], .hero__art[data-parking3d], .hero__art[data-pgs3d], .hero__art[data-vd3d] { position: relative; }
.t3d {
  position: absolute; inset-block-start: 50%; left: 50%; translate: -50% -50%;   /* physical left: centring is direction-neutral */
  inline-size: min(100%, 36rem); aspect-ratio: 1200 / 880; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #2b3650 0%, #161d2c 55%, #0e131d 100%);
  border: 1px solid rgba(245, 184, 28, .28);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(245, 184, 28, .35);
  opacity: 0; transition: opacity .8s var(--ease); cursor: grab; touch-action: pan-y;
}
.t3d:active { cursor: grabbing; }
.t3d canvas { display: block; inline-size: 100% !important; block-size: 100% !important; }
.hero__art.has-3d .t3d { opacity: 1; }
.hero__art.has-3d > img { opacity: 0; animation: none; }
/* leadership quote: name + role on separate lines */
.quote__name { display: block; font-size: var(--fs-base); }
.quote__role { display: block; margin-block-start: .6rem; }
.quote__text { font-size: var(--fs-xl); }

/* Wide screens: one wider page column for header, heroes and sections, so large
   monitors are not left with big empty side bands (2026-10-08) */
@media (min-width: 1024px) {
  .container, .container--wide { width: min(100% - 5rem, 88rem); }
  .hero--v2 .hero__inner { max-width: none; }
  .hero--v2 .hero__grid { column-gap: clamp(3rem, 5vw, 6rem); }
}