/* ============================================================================
   Al-Futtaim Engineering & Technologies — site styles
   Built ON the AFET Design System (afet-design-skill). /ds/styles.css supplies
   the canonical tokens (colours, type, spacing, shadows, fonts) + base. This
   file bridges the site's component variables onto those semantic tokens, then
   styles the page components. Source of truth: AFG Brand Guidelines V1.0.
   ========================================================================== */

:root {
  /* Bridge — site variables → AFET Design System semantic tokens */
  --midnight: var(--af-midnight);
  --dark-blue: var(--af-dark-blue);
  --light-blue: var(--af-light-blue);
  --black: var(--af-black);
  --white: var(--af-white);

  --cyan-200: var(--af-cyan-300);
  --cyan-100: var(--af-cyan-100);
  --blue-600: var(--af-steel-400);
  --slate-700: var(--af-slate-400);
  --slate-500: var(--af-slate-300);
  --slate-300: var(--af-slate-200);

  --bg: var(--surface-page);
  --bg-tint: var(--surface-subtle);
  --bg-dark: var(--surface-inverse);
  --bg-dark-2: var(--surface-inverse-2);
  --ink: var(--text-strong);
  --body: var(--text-body);
  --muted: var(--text-muted);
  --border: var(--border-subtle);
  --border-dark: var(--border-on-dark);

  --primary: var(--brand-primary);
  --accent: var(--brand-accent);

  /* shape — map onto DS scale (--font-sans/--font-serif/--shadow-sm/--shadow-lg
     come from the DS tokens directly) */
  --container: var(--container-max);
  --radius: var(--radius-lg);
  --radius-sm: var(--radius-md);
  --shadow: var(--shadow-md);
  --ease: var(--ease-out);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
ul { list-style: none; padding: 0; }
.icon { flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--primary); --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 600; letter-spacing: -0.01em;
  padding: 13px 24px; border: 1.5px solid var(--btn-bg); border-radius: 999px;
  cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, box-shadow 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn .icon { transition: transform 0.25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0, 91, 170, 0.6); }
.btn:hover .icon { transform: translateX(4px); }
.btn--primary { --btn-bg: var(--accent); border-color: var(--accent); color: #04263f; }
.btn--primary:hover { --btn-bg: #16bdf7; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; box-shadow: none; }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--primary);
}
.link-arrow .icon { transition: transform 0.25s var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* ── Kicker device (cyan label + rule) ─────────────────────────────────────── */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dark-blue); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--accent); }
.kicker--on-dark { color: var(--light-blue); }

/* Pill eyebrow (hero / dark sections) — matches the DS UI kit */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; margin-bottom: 26px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.04);
  color: #bfe9fb; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.eyebrow-pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--brand-accent); }

.hl { color: var(--accent); }

/* ── Section header ────────────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--bg-dark); color: rgba(255, 255, 255, 0.78); }

.sec-head { max-width: 720px; margin-bottom: 52px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .kicker { justify-content: center; }
.sec-head__title { font-size: clamp(1.9rem, 3.4vw, 2.85rem); }
.sec-head--light .sec-head__title { color: #fff; }
.sec-head__lead { margin-top: 18px; font-size: 1.1rem; color: var(--body); }
.sec-head--light .sec-head__lead { color: rgba(255, 255, 255, 0.72); }

/* ── Header ────────────────────────────────────────────────────────────────── */
/* Header height is declared once, here, as custom properties on .site-header so
   the mobile nav drawer can offset itself by the *real* header height at every
   breakpoint / scroll state instead of a hard-coded 76px. Both parts are
   redeclared per breakpoint in the "Responsive hardening" section below. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  --topbar-h: 43px;
  --navbar-h: 76px;
  --header-h: calc(var(--topbar-h) + var(--navbar-h));
}
.site-header.is-scrolled { --navbar-h: 66px; }
.topbar {
  background: var(--midnight); color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; height: 42px; }
.topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar__link { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.7); }
.topbar__link:hover { color: #fff; }
.topbar__link .icon { color: var(--light-blue); }
.lang-toggle { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; overflow: hidden; }
.lang-toggle button { background: none; border: 0; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 0.78rem; padding: 3px 11px; cursor: pointer; }
.lang-toggle button.is-active { background: var(--light-blue); color: #04263f; font-weight: 600; }

.navbar {
  background: rgba(4, 30, 66, 0.96);
  backdrop-filter: blur(10px);
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
}
.site-header.is-scrolled .navbar { box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6); }
.navbar__inner { display: flex; align-items: center; gap: 28px; height: 76px; transition: height 0.3s; }
.site-header.is-scrolled .navbar__inner { height: 66px; }

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.navbar__cta { padding-top: 8px; padding-bottom: 8px; font-size: 0.95rem; line-height: 1.1; }
.brand__logo { height: 52px; width: auto; transition: height 0.3s; }
.site-header.is-scrolled .brand__logo { height: 44px; }
.afet-mark { flex: none; }

.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: rgba(255, 255, 255, 0.82); font-weight: 500; font-size: 0.96rem;
  padding: 10px 14px; border-radius: 8px; transition: color 0.2s, background 0.2s;
}
.nav__link:hover, .nav__item.is-active > .nav__link { color: #fff; }
.nav__item.is-active > .nav__link { background: rgba(255, 255, 255, 0.08); }
.nav__chevron { transform: rotate(90deg); opacity: 0.7; transition: transform 0.25s; }
.nav__item--has-menu { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 268px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  border-top: 3px solid var(--accent);
}
.nav__item--has-menu:hover .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__item--has-menu:hover .nav__chevron { transform: rotate(-90deg); }
.nav__menu a {
  display: block; padding: 11px 14px; border-radius: 8px; color: var(--ink);
  font-size: 0.94rem; font-weight: 500; transition: background 0.18s, color 0.18s, padding 0.18s;
}
.nav__menu a:hover { background: var(--bg-tint); color: var(--dark-blue); padding-left: 20px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.nav-toggle span + span { margin-top: 5px; }

/* ── Mega-menu ─────────────────────────────────────────────────────────────── */
.navbar { position: relative; }
.nav__item--has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 90;
  background: #fff; box-shadow: var(--shadow-lg); border-top: 3px solid var(--accent);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav__item--has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; }
.nav__item--has-mega:hover .nav__chevron { transform: rotate(-90deg); }
.mega__inner { padding: 34px 28px 38px; }
.mega__blurb { max-width: 600px; color: var(--muted); margin-bottom: 26px; font-size: 1rem; }
.mega__cols { display: grid; gap: 44px; }
.mega--cols .mega__cols { grid-template-columns: repeat(3, 1fr); }
.mega--grid .mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega__col-title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mega__link { display: block; padding: 9px 12px; border-radius: 8px; color: var(--body); font-weight: 500; font-size: 0.95rem; transition: background 0.15s, color 0.15s, padding 0.15s; }
.mega__link:hover { background: var(--bg-tint); color: var(--dark-blue); padding-left: 16px; }
.mega__link--rich { display: flex; gap: 14px; align-items: flex-start; padding: 12px; }
.mega__link--rich:hover { padding-left: 12px; background: var(--bg-tint); }
.mega__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(0, 174, 239, 0.10); color: var(--accent); }
.mega__lbl { display: block; font-weight: 600; color: var(--ink); }
.mega__desc { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.mega__footer { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; gap: 30px; flex-wrap: wrap; }
.mega__footer a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.9rem; color: var(--dark-blue); }
.mega__footer a:hover { color: var(--accent); }
.mega__footer .icon { color: var(--accent); }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 84vh, 820px);
  display: flex; align-items: center;
  background: var(--midnight); color: #fff;
}
.hero__photo {
  position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%; pointer-events: none;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -3;
  background:
    linear-gradient(100deg, #041e42 0%, rgba(4, 30, 66, 0.96) 38%, rgba(4, 30, 66, 0.74) 64%, rgba(6, 42, 92, 0.52) 100%),
    radial-gradient(1100px 620px at 80% 4%, rgba(0, 174, 239, 0.28), transparent 60%);
}
.hero__plexus {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.14; mix-blend-mode: screen; pointer-events: none;
}
.hero__mark {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  z-index: -1; opacity: 0.10;
}
.hero__inner { padding: 80px 28px; max-width: var(--container); }
.hero__title {
  color: #fff; font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 600;
  letter-spacing: -0.03em; margin: 8px 0 24px;
}
.hero__lead { font-size: clamp(1.08rem, 1.8vw, 1.32rem); color: rgba(255, 255, 255, 0.82); max-width: 640px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 14px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  background: var(--light-blue); border-radius: 2px; animation: scrolldot 1.7s var(--ease) infinite;
}
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }

/* ── Intro + stats ─────────────────────────────────────────────────────────── */
.intro__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.intro__lead h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.intro__body p + p { margin-top: 18px; }
.intro__body p { font-size: 1.08rem; }

.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 72px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.stat { background: #fff; padding: 34px 26px; text-align: center; }
.stat__value {
  display: block; font-size: clamp(2.3rem, 4vw, 3.2rem); font-weight: 700;
  color: var(--dark-blue); letter-spacing: -0.04em; line-height: 1;
}
.stat__label { display: block; margin-top: 10px; font-size: 0.92rem; color: var(--muted); font-weight: 500; }

/* ── Division cards ────────────────────────────────────────────────────────── */
.division-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.division-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}
.division-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.division-card__media {
  position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden;
}
.division-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease); filter: saturate(1.02);
}
.division-card:hover .division-card__media img { transform: scale(1.05); }
.division-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 30, 66, 0.05) 0%, rgba(4, 30, 66, 0.35) 100%);
}
.division-card__icon {
  position: absolute; left: 24px; bottom: -26px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: #e6f6fd; box-shadow: var(--shadow-sm); color: var(--accent);
  border: 1px solid #cdeefb;
}
.division-card__body { padding: 40px 32px 34px; display: flex; flex-direction: column; flex: 1; }
.division-card__title { font-size: 1.5rem; margin-bottom: 12px; }
.division-card__text { margin-bottom: 22px; flex: 1; }

/* ── Tabs / services ───────────────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 6px; padding: 6px; background: var(--bg-tint); border-radius: 999px; margin-bottom: 44px; }
.section--tint .tabs { background: #fff; }
.tab {
  border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted);
  padding: 11px 26px; border-radius: 999px; cursor: pointer; transition: background 0.25s, color 0.25s;
}
.tab.is-active { background: var(--dark-blue); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 91, 170, 0.7); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade 0.4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.service-card__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px; background: rgba(0, 174, 239, 0.12); color: var(--accent);
}
.service-card h4 { font-size: 1.12rem; margin-bottom: 6px; }
.service-card p { font-size: 0.96rem; }

/* ── Partners ──────────────────────────────────────────────────────────────── */
.partners { background: linear-gradient(160deg, var(--midnight), var(--bg-dark-2)); }
.partner-wall {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); overflow: hidden;
}
.partner {
  display: flex; align-items: center; justify-content: center; padding: 40px 24px;
  background: rgba(255, 255, 255, 0.02); transition: background 0.3s;
}
.partner:hover { background: rgba(0, 174, 239, 0.10); }
/* height is a *max*, not a fixed size: a wide wordmark in a ~102px cell at 375px
   must scale down inside the cell instead of pushing the page sideways. */
.partner img {
  height: auto; width: auto; max-height: 34px; max-width: 100%;
  object-fit: contain; opacity: 0.85; transition: opacity 0.3s;
}
.partner:hover img { opacity: 1; }

/* ── Clients ───────────────────────────────────────────────────────────────── */
.client-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
.client-wall li {
  display: flex; align-items: center; justify-content: center;
  min-height: 104px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.client-wall li img {
  max-height: 56px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.7; transition: filter 0.3s, opacity 0.3s;
}
.client-wall li:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.client-wall li:hover img { filter: grayscale(0); opacity: 1; }

/* ── Contact CTA ───────────────────────────────────────────────────────────── */
.cta-contact { background: linear-gradient(150deg, var(--bg-dark-2), var(--midnight)); position: relative; overflow: hidden; }
.cta-contact__grid { display: grid; grid-template-columns: 0.85fr 1.1fr; gap: 64px; align-items: start; }
.cta-contact__intro h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.cta-contact__intro p { color: rgba(255, 255, 255, 0.74); margin-top: 16px; font-size: 1.08rem; }
.contact-points { margin-top: 32px; display: grid; gap: 16px; }
.contact-points li { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.86); }
.contact-points .icon { color: var(--light-blue); }
.contact-points a { color: rgba(255, 255, 255, 0.86); }
.contact-points a:hover { color: #fff; }

.contact-form {
  background: #fff; border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow-lg);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 0.98rem; color: var(--ink);
  padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fcfdff; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.14);
}
.field textarea { resize: vertical; }
.field--check { display: flex; align-items: flex-start; gap: 11px; }
.field--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--dark-blue); flex: none; }
.field--check span { font-size: 0.9rem; color: var(--body); font-weight: 400; }
.contact-form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
.form-status { font-size: 0.94rem; font-weight: 500; }
.form-status.is-success { color: #0a7d3c; }
.form-status.is-error { color: #c0392b; }
.form-status.is-pending { color: var(--muted); }

/* ── Location ──────────────────────────────────────────────────────────────── */
.location__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.location address { font-style: normal; font-size: 1.08rem; color: var(--ink); line-height: 1.8; }
.location__contact { margin-top: 20px; color: var(--body); }
.location__contact .icon { color: var(--dark-blue); vertical-align: -4px; margin-right: 6px; }
.location__map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.location__map iframe { width: 100%; height: 400px; border: 0; }

/* ── Page hero (inner) ─────────────────────────────────────────────────────── */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--midnight) 0%, var(--bg-dark-2) 100%);
  color: #fff; padding: clamp(72px, 12vw, 132px) 0 clamp(60px, 9vw, 104px);
}
.page-hero__mark { position: absolute; right: -80px; bottom: -120px; z-index: -1; opacity: 0.09; }
.page-hero__inner { max-width: 820px; }
.page-hero__title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-bottom: 20px; }
.page-hero__lead { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: rgba(255, 255, 255, 0.78); }

/* ── Detail / value cards ──────────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.detail-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 30px;
  scroll-margin-top: 130px; transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.detail-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.detail-card__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px;
  border-radius: 15px; margin-bottom: 20px; color: var(--accent);
  background: rgba(0, 174, 239, 0.12);
}
.detail-card h3 { font-size: 1.3rem; margin-bottom: 10px; }

.about-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px; align-items: center; }
.about-copy { font-size: 1.08rem; }
.about-copy + .about-copy { margin-top: 18px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-stats .stat { border: 1px solid var(--border); border-radius: var(--radius); }

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px;
  border-top: 3px solid var(--accent);
}
.value-card h3 { font-size: 1.35rem; color: var(--dark-blue); margin-bottom: 12px; }
.value-card p { font-size: 0.98rem; }

/* ── CTA strip ─────────────────────────────────────────────────────────────── */
.cta-strip { background: var(--dark-blue); background: linear-gradient(120deg, var(--dark-blue), var(--light-blue)); }
.cta-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 56px 28px; }
.cta-strip h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cta-strip .btn--primary { background: #fff; border-color: #fff; color: var(--dark-blue); }
.cta-strip .btn--primary:hover { background: var(--midnight); border-color: var(--midnight); color: #fff; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer { background: var(--midnight); color: rgba(255, 255, 255, 0.62); }
.footer__top { display: grid; grid-template-columns: minmax(240px, 1fr) 3.1fr; gap: 48px; padding: 80px 28px 44px; }
.footer__brand .afet-mark { margin-bottom: 18px; }
.footer__logo { height: 64px; width: auto; margin-bottom: 6px; }
.footer__name { color: #fff; font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.02em; }
.footer__name span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-blue); font-weight: 500; }
.footer__tag { margin-top: 14px; font-size: 0.95rem; max-width: 260px; }
.footer__subscribe { margin-top: 22px; }
.footer__subscribe-label { display: block; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; }
.footer__subscribe-row { display: flex; gap: 8px; max-width: 320px; }
.footer__subscribe-row input { flex: 1; min-width: 0; font: inherit; font-size: 0.92rem; color: #fff; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--border-on-dark); background: rgba(255, 255, 255, 0.06); }
.footer__subscribe-row input::placeholder { color: rgba(255, 255, 255, 0.4); }
.footer__subscribe-row input:focus { outline: none; border-color: var(--light-blue); }
.footer__subscribe-row button { flex: none; width: 46px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--light-blue); color: #04263f; cursor: pointer; transition: filter 0.2s; }
.footer__subscribe-row button:hover { filter: brightness(1.08); }
.footer__subscribe-status { font-size: 0.82rem; margin-top: 8px; min-height: 1em; color: rgba(255, 255, 255, 0.6); }
.footer__subscribe-status.is-success { color: #6ee7a8; }
.footer__subscribe-status.is-error { color: #fca5a5; }
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--border-dark); color: rgba(255, 255, 255, 0.8);
  font-weight: 600; font-size: 0.9rem; transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.footer__social a:hover { background: var(--light-blue); border-color: var(--light-blue); color: #04263f; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.footer__heading { color: #fff; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.footer__col li { margin-bottom: 11px; }
.footer__col a { color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; transition: color 0.2s, padding 0.2s; }
.footer__col a:hover { color: var(--light-blue); }
.footer__col--contact p { font-size: 0.95rem; line-height: 1.8; }
.footer__col--contact a { color: var(--light-blue); }
.footer__bottom { border-top: 1px solid var(--border-dark); }
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 28px; font-size: 0.88rem; }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a { color: rgba(255, 255, 255, 0.62); }
.footer__legal a:hover { color: #fff; }

/* ── Announcement bar (admin-managed) ──────────────────────────────────────── */
.announce-bar { background: var(--dark-blue); color: #fff; font-size: 0.92rem; }
.announce-bar__inner { max-width: var(--container); margin: 0 auto; padding: 9px 28px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.announce-bar__inner a { color: #fff; font-weight: 600; text-decoration: underline; }
.announce-bar__x { margin-left: 8px; background: none; border: 0; color: rgba(255, 255, 255, 0.8); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.announce-bar__x:hover { color: #fff; }

/* ── Insights (public, admin-published content) ────────────────────────────── */
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.insight-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--ink); transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; }
.insight-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.insight-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-tint); }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.insight-card:hover .insight-card__media img { transform: scale(1.05); }
.insight-card__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; flex: 1; }
.insight-card__meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.insight-card__title { font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
.insight-card__excerpt { font-size: 0.96rem; color: var(--body); flex: 1; }
.insight-card .link-arrow { font-size: 0.92rem; }
.article-body h2, .article-body h3 { margin: 28px 0 12px; }
.article-body p { margin-bottom: 16px; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 12px 0; }
@media (max-width: 1080px) { .insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .insight-grid { grid-template-columns: 1fr; } }

/* ── Careers (public, admin-managed jobs) ──────────────────────────────────── */
.job-list { display: grid; gap: 14px; }
.job-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 28px; color: var(--ink); transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s; }
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.job-card__title { display: block; font-size: 1.22rem; font-weight: 600; color: var(--ink); margin-top: 5px; }

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 0.84rem; }
.crumbs a { color: rgba(255, 255, 255, 0.62); }
.crumbs a:hover { color: var(--light-blue); }
.crumbs span { color: rgba(255, 255, 255, 0.92); }
.crumbs i { color: rgba(255, 255, 255, 0.3); font-style: normal; }

/* ── Image page-hero ───────────────────────────────────────────────────────── */
.page-hero--image { padding: clamp(96px, 14vw, 168px) 0 clamp(64px, 9vw, 104px); }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.page-hero__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(4, 30, 66, 0.95) 0%, rgba(4, 30, 66, 0.82) 50%, rgba(6, 42, 90, 0.66) 100%); }

/* ── Content blocks (scraped inner pages) ──────────────────────────────────── */
.content-page .container { display: flex; flex-direction: column; gap: 40px; }
.prose { max-width: 760px; }
.prose > * + * { margin-top: 20px; }
/* A heading must own the group beneath it: ~2.2x the paragraph gap above an h2
   and ~1.6x above an h3, so a topic break never reads as a bold paragraph. */
.prose__h {
  font-size: clamp(1.65rem, 2.9vw, 2.2rem); font-weight: 700;
  letter-spacing: -0.025em; margin-top: 44px;
}
.prose__h3 { font-size: 1.3rem; font-weight: 600; color: var(--dark-blue); margin-top: 32px; }
/* …and the first thing under a heading hugs it. */
.prose__h + *, .prose__h3 + * { margin-top: 12px; }
.prose > :first-child { margin-top: 0; }
.prose p { font-size: 1.06rem; color: var(--body); }
.prose__list { display: grid; gap: 12px; }
.prose__list li { display: flex; gap: 12px; align-items: flex-start; }
.li-check { color: var(--accent); flex: none; margin-top: 4px; }
.prose__figure { margin: 8px 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* Cap inline figures so a tall source image never dominates the column;
   small pictograms centre at natural size instead of stretching. */
.prose__figure img { width: 100%; max-height: 440px; object-fit: cover; }
.prose__figure img[src*="-100."], .prose__figure img[src*="icons8"] { width: auto; max-height: 96px; margin: 0 auto; padding: 18px; object-fit: contain; }
.prose__figure figcaption { font-size: 0.88rem; color: var(--muted); padding: 12px 4px 0; }
.prose__quote { border-left: 3px solid var(--accent); padding: 6px 0 6px 24px; }
.prose__quote p { font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); font-style: italic; }
.prose__quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.92rem; color: var(--muted); }

.block-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.block-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; transition: transform 0.3s var(--ease), box-shadow 0.3s; overflow: hidden; }
.block-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.block-card--media { padding: 0; display: flex; flex-direction: column; }
.block-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.block-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.block-card--media:hover .block-card__media img { transform: scale(1.05); }
.block-card--media .block-card__body { padding: 24px 26px 28px; }
.block-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; margin-bottom: 16px; color: var(--accent); background: rgba(0, 174, 239, 0.12); }
.block-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.block-card h3 a { color: inherit; }
.block-card h3 a:hover { color: var(--dark-blue); }
.block-card p { font-size: 0.97rem; margin-bottom: 14px; }

.block-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.block-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.block-gallery .gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg-tint); box-shadow: var(--shadow-sm); }
.block-gallery .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.block-gallery .gallery-item:hover img { transform: scale(1.04); }
.block-gallery .gallery-item figcaption { font-size: 0.82rem; color: var(--muted); padding: 8px 12px; }
@media (max-width: 1080px) { .block-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .block-gallery { grid-template-columns: 1fr; } }

.block-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: center; }
.block-logo { display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.block-logo img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }

.block-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--bg-tint); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 28px 32px; }
.block-cta p { font-size: 1.15rem; font-weight: 600; color: var(--ink); }

@media (max-width: 1080px) { .block-cards { grid-template-columns: repeat(2, 1fr); } .block-logos { grid-template-columns: repeat(3, 1fr); } .block-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .block-cards { grid-template-columns: 1fr; } .block-logos { grid-template-columns: repeat(2, 1fr); } }

/* ── Child grid (hub → child pages) ────────────────────────────────────────── */
.child-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.child-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
  padding: 20px 22px; color: var(--ink); font-weight: 500;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s, color 0.25s;
}
.child-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent); color: var(--dark-blue); }
.child-card__arr { color: var(--accent); transition: transform 0.25s var(--ease); }
.child-card:hover .child-card__arr { transform: translateX(4px); }
@media (max-width: 1080px) { .child-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .child-grid { grid-template-columns: 1fr; } }

/* ── Plexus tech texture on dark sections (DS imagery) ─────────────────────── */
.partners, .cta-contact { position: relative; overflow: hidden; }
.partners::before, .cta-contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/ds/assets/imagery/network-light.webp") center/cover;
  opacity: 0.12; mix-blend-mode: screen;
}
.partners > .container, .cta-contact > .container { position: relative; z-index: 1; }

/* ── Reveal animation ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .service-grid, .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .navbar__cta { display: none; }
  /* The off-screen drawer must not widen the page: its containing block is the
     navbar (backdrop-filter), so translateX(100%) adds 100vw of scrollable
     width. `clip` removes that without creating a scroll container (which
     would break the sticky header the way `hidden` can). */
  html, body { overflow-x: clip; }
  .nav {
    position: fixed; inset: 76px 0 0 0; width: 100%; background: var(--midnight);
    transform: translateX(100%);
    /* visibility guards against any containing-block quirk leaving the panel
       half-visible when closed (backdrop-filter on .navbar shrinks the
       containing block at some widths). */
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s 0.35s;
    overflow-y: auto; padding: 14px 0 60px;
  }
  .site-header.nav-open .nav { transform: translateX(0); visibility: visible; transition: transform 0.35s var(--ease); }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .nav__link { padding: 16px 28px; font-size: 1.05rem; justify-content: space-between; }
  .nav__chevron { transform: rotate(90deg); }
  .nav__item.is-expanded .nav__chevron { transform: rotate(-90deg); }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    background: rgba(255, 255, 255, 0.04); border-radius: 0; border-top: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease);
  }
  .nav__item.is-expanded .nav__menu { max-height: 460px; padding: 6px 0; }
  .nav__menu a { color: rgba(255, 255, 255, 0.7); padding: 12px 40px; }
  .nav__menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; padding-left: 46px; }

  /* mega-menu → mobile accordion */
  .nav__item--has-mega { position: static; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border-top: 0; background: rgba(255, 255, 255, 0.04);
    max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease);
  }
  .nav__item.is-expanded .mega { max-height: 1400px; }
  .mega__inner { padding: 6px 0 14px; max-width: none; }
  .mega__blurb { display: none; }
  .mega--cols .mega__cols, .mega--grid .mega__cols { grid-template-columns: 1fr; gap: 6px; }
  .mega--grid .mega__links { grid-template-columns: 1fr; }
  .mega__col-title { color: rgba(255, 255, 255, 0.45); padding: 10px 40px 2px; margin: 0; }
  .mega__link { color: rgba(255, 255, 255, 0.7); padding: 12px 40px; border-radius: 0; }
  .mega__link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; padding-left: 46px; }
  .mega__link--rich { padding: 12px 40px; }
  .mega__link--rich .mega__ico { display: none; }
  .mega__lbl { color: rgba(255, 255, 255, 0.82); }
  .mega__desc { display: none; }
  .mega__footer { flex-direction: column; gap: 0; margin-top: 4px; padding: 6px 0 0; border-color: rgba(255, 255, 255, 0.1); }
  .mega__footer a { color: rgba(255, 255, 255, 0.7); padding: 12px 40px; }

  .intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .cta-contact__grid, .location__grid, .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .topbar { display: none; }
  .division-grid { grid-template-columns: 1fr; }
  .service-grid, .detail-grid, .value-grid { grid-template-columns: 1fr; }
  .partner-wall { grid-template-columns: repeat(2, 1fr); }
  .client-wall { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 26px; }
  .tabs { display: flex; width: 100%; }
  .tab { flex: 1; padding: 11px 14px; text-align: center; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .hero__mark { right: -200px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ── RTL / Arabic (/ar) ──────────────────────────────────────────────────────
   dir=rtl flips flex layouts natively; these rules cover the Arabic type
   stack (PP Neue Montreal has no Arabic cut self-hosted, so we fall back to
   high-quality system Arabic faces) and explicit left/right offsets. */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea {
  /* Brand Arabic cut first (declared in /ds/tokens/fonts.css), Latin fallback. */
  font-family: "PP Neue Montreal Arabic", "PP Neue Montreal", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  letter-spacing: 0;
}
[dir="rtl"] .hero__title, [dir="rtl"] .page-hero__title, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }
[dir="rtl"] .nav__chevron { transform: scaleX(-1); }
[dir="rtl"] .link-arrow svg, [dir="rtl"] .child-card__arr, [dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .mega { text-align: right; }
[dir="rtl"] .footer__social a { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .breadcrumbs { direction: rtl; }
/* Hero portrait: /ar pages ship a pre-mirrored image variant (subject on the
   left, English poster text removed), so no CSS flip is applied here. */
/* Keep the brand pinned to the start edge and the nav flowing right-to-left. */
[dir="rtl"] .brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .nav__list { justify-content: flex-end; }
/* The hero veil is directional (dark at the start edge). In RTL the subject
   moves to the left — under the darkest part — so mirror the gradient too,
   keeping the portrait at the same brightness as the English page. */
[dir="rtl"] .hero__veil {
  background:
    linear-gradient(260deg, #041e42 0%, rgba(4, 30, 66, 0.96) 38%, rgba(4, 30, 66, 0.74) 64%, rgba(6, 42, 92, 0.52) 100%),
    radial-gradient(1100px 620px at 20% 4%, rgba(0, 174, 239, 0.28), transparent 60%);
}

/* Footer contact strip — full-width row under the link grid so the address
   never wraps mid-phrase in a narrow column. */
.footer__contact {
  display: grid; grid-template-columns: 2.2fr 1.2fr 1fr; gap: 32px;
  padding: 26px 28px; margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.93rem; color: rgba(255, 255, 255, 0.72);
}
.footer__contact-item { display: flex; flex-direction: column; gap: 5px; }
.footer__contact-label {
  color: var(--light-blue); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
}
.footer__contact a { color: rgba(255, 255, 255, 0.85); }
.footer__contact a:hover { color: var(--light-blue); }
/* Five columns need tighter type; wrap long division names cleanly. */
.footer__cols .footer__heading { font-size: 0.76rem; letter-spacing: 0.12em; }
.footer__cols .footer__col a { font-size: 0.9rem; }
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
  .footer__contact { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Design-system additions ─────────────────────────────────────────────────
   New content components used to break up long text pages: numbered steps,
   FAQ accordion, callouts, alternating feature rows and data tables. */
.steps { counter-reset: step; display: grid; gap: 18px; margin: 26px 0; }
.step { display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.step__n { flex: none; font-size: 1.05rem; font-weight: 700; color: var(--accent);
  background: var(--bg-tint); border-radius: 999px; width: 42px; height: 42px;
  display: grid; place-items: center; letter-spacing: -0.02em; }
.step__t { font-size: 1.05rem; margin-bottom: 4px; color: var(--ink); }
.step__p { color: var(--body); font-size: 0.97rem; }

.faq { margin: 26px 0; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none; font-size: 1.02rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { color: var(--accent); transition: transform 0.25s var(--ease); flex: none; }
.faq__item[open] .faq__chev { transform: rotate(90deg); }
.faq__a { padding: 0 4px 20px; color: var(--body); max-width: 78ch; }

.callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--radius-sm); margin: 24px 0; border: 1px solid; }
.callout--info { background: #eff8fd; border-color: #cde7f6; }
.callout--success { background: #eefaf2; border-color: #c7e9d5; }
.callout--warn { background: #fff7ed; border-color: #fadcb5; }
.callout__icon { flex: none; color: var(--dark-blue); }
.callout__t { font-weight: 600; color: var(--ink); margin-bottom: 3px; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin: 46px 0; }
.feature--flip .feature__media { order: 2; }
.feature__media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); }
.feature__t { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 12px; }
.feature__body > * + * { margin-top: 14px; }

.table-wrap { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.data-table th { background: var(--midnight); color: #fff; text-align: left;
  padding: 12px 16px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--body); }
.data-table tbody tr:nth-child(even) { background: var(--bg-tint); }

[dir="rtl"] .step, [dir="rtl"] .callout { text-align: right; }
[dir="rtl"] .data-table th, [dir="rtl"] .data-table td { text-align: right; }
[dir="rtl"] .faq__chev { transform: scaleX(-1); }
[dir="rtl"] .faq__item[open] .faq__chev { transform: scaleX(-1) rotate(-90deg); }

@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature--flip .feature__media { order: 0; }
  .step { padding: 16px; gap: 14px; }
}

/* ── Content rhythm (long-form / generated pages) ────────────────────────────
   Generated pages render as one flat .section.content-page with a uniform gap,
   so the rhythm has to come from inside .prose: a comfortable measure for the
   running text, and visibly larger air around the elements that mark a change
   of gear (lists, quotes, figures) than between two paragraphs. */
.content-page .container { gap: 44px; }
/* Measure: the 760px column runs to ~105 characters a line in PP Neue Montreal,
   well past a comfortable measure. `ch` is that font's *digit* width (a wide
   glyph here), so it is capped in `em` as well to land near 72–78 characters
   whether or not the web font has loaded. Headings, figures, cards and CTAs
   keep the full 760px, so the column edge is still read as a column. */
.content-page .prose p,
.content-page .prose li { max-width: min(74ch, 36em); overflow-wrap: anywhere; }
.content-page .prose > .prose__list { margin-top: 24px; }
.content-page .prose > .prose__list + * { margin-top: 26px; }
.content-page .prose > .prose__figure { margin-top: 34px; }
.content-page .prose > .prose__figure + * { margin-top: 34px; }
.content-page .prose > .prose__quote { margin-top: 38px; padding: 10px 0 10px 28px; }
.content-page .prose > .prose__quote + * { margin-top: 38px; }
/* Heading immediately after a quote / figure keeps its own (larger) break. */
.content-page .prose > .prose__quote + .prose__h,
.content-page .prose > .prose__figure + .prose__h,
.content-page .prose > .prose__list + .prose__h { margin-top: 48px; }
/* Two consecutive prose runs are separate topics — give them a hairline break. */
.content-page .container > .prose + .prose { padding-top: 4px; }

/* ── Responsive hardening ────────────────────────────────────────────────────
   1. nav drawer offset tracks the real header height (topbar + navbar) at every
      breakpoint and in the scrolled state;
   2. the primary CTA (and the 24/7 phone number) survive down to mobile;
   3. every repeat(N) grid reaches a sensible single-column layout ≤480px. */

/* Bind the rendered heights to the custom properties declared on .site-header
   so the drawer offset can never drift out of sync with the header again. */
/* (--topbar-h is the topbar's *border box*: 42px of content + its 1px rule.) */
.topbar__inner { height: calc(var(--topbar-h) - 1px); }
.navbar__inner { height: var(--navbar-h); }

@media (max-width: 960px) {
  /* Drawer offset. `.navbar` carries `backdrop-filter: blur(10px)`, which makes
     it the containing block for its fixed-position descendants — so the old
     `inset: 76px 0 0 0` was measured from the *navbar box*, not the viewport:
       · top 76px happened to equal the un-scrolled navbar height, but drifted
         to a 10px gap once `.is-scrolled` shrank it to 66px;
       · `bottom: 0` resolved to the navbar's own bottom edge, collapsing the
         drawer to its 74px of padding.
     Anchoring to `top: 100%` puts the drawer exactly on the navbar's bottom
     edge in every state (scrolled, un-scrolled, announcement bar shown or
     dismissed, topbar hidden or not), and the height is the viewport minus the
     real header height held in --header-h. */
  .nav {
    inset: auto 0 auto 0;
    top: 100%;
    height: calc(100vh - var(--header-h, 118px));
    height: calc(100dvh - var(--header-h, 118px));
  }
  /* The header CTA is the only conversion point above the fold on mobile:
     keep it, in a compact variant, instead of hiding it. */
  .navbar__cta {
    display: inline-flex; padding: 9px 17px; font-size: 0.9rem; gap: 7px;
    letter-spacing: -0.005em;
  }
}

@media (max-width: 720px) {
  /* The topbar is hidden here, but the 24/7 call-centre number is the site's
     most-repeated call to action — bring back just the tel link as a compact,
     centred call strip. Email + language toggle stay hidden. */
  .site-header { --topbar-h: 41px; }
  .topbar { display: block; }
  .topbar__inner { justify-content: center; }
  .topbar__right { display: none; }
  .topbar__link[href^="tel"] { font-size: 0.85rem; font-weight: 600; color: #fff; }
  .topbar__link[href^="tel"] .icon { color: var(--light-blue); }

  /* Tabs scroll horizontally rather than squeezing 4 multi-word labels. */
  .tabs {
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

  /* A 400px map is ~60% of a 667px viewport. */
  .location__map iframe { height: clamp(240px, 60vw, 400px); }
}

@media (max-width: 640px) {
  .hero { min-height: 78vh; }
  .hero__inner { padding: 56px 24px; }
  .hero__scroll { display: none; }
}

@media (max-width: 560px) {
  /* Logo + compact CTA + burger must all fit one 76px row. */
  .navbar__inner { gap: 14px; }
  .brand__logo { height: 40px; }
  .site-header.is-scrolled .brand__logo { height: 36px; }
  .navbar__cta { padding: 8px 13px; font-size: 0.82rem; gap: 5px; }

  /* Partner wall stays 2-up but the cells stop crowding their logos. */
  .partner { padding: 26px 16px; }
  .partner img { max-height: 26px; }

  .prose__h { margin-top: 34px; }
  .prose__h3 { margin-top: 26px; }
  .content-page .container { gap: 34px; }
}

@media (max-width: 480px) {
  /* 15% of a 375px viewport was gutter. */
  .container { padding: 0 20px; }

  /* Grids that bottomed out at 2 columns: 2 x ~150px cells is not a layout. */
  .block-logos, .block-stats, .stats-band, .client-wall,
  .about-stats { grid-template-columns: 1fr; }
  .block-logo { min-height: 72px; padding: 16px; }
  .block-logo img { max-height: 40px; }
  .client-wall li { min-height: 84px; padding: 16px 18px; }
  .stat { padding: 24px 18px; }
  .stat__value { font-size: 2.4rem; }

  /* Long per-page CTA labels must wrap rather than overflow a 255px box.
     .btn keeps `white-space: nowrap` so the compact header CTA stays one line. */
  .btn--lg { white-space: normal; text-align: center; padding: 14px 22px; font-size: 0.98rem; }
  .block-cta { padding: 24px 22px; }
  .cta-strip__inner { padding: 44px 20px; }

  /* Scraped copy carries unbreakable tokens like "3B+G+M+7+R+UPPER ROOF". */
  .prose p, .prose li, .block-card p, .job-card__title { overflow-wrap: anywhere; }

  /* Deep breadcrumb trails wrap to three lines above the H1 — show the tail. */
  .crumbs { flex-wrap: nowrap; overflow: hidden; font-size: 0.8rem; }
  .crumbs > *:not(:nth-last-child(-n + 3)) { display: none; }
}

@media (max-width: 400px) {
  .navbar__inner { gap: 10px; }
  .brand__logo { height: 36px; }
  .navbar__cta { padding: 8px 11px; font-size: 0.78rem; }
}

/* RTL equivalents for the rules added above (the rest are direction-agnostic:
   grids, spacing, heights and custom properties all flip natively). */
[dir="rtl"] .prose__quote { border-left: 0; border-right: 3px solid var(--accent); padding: 6px 24px 6px 0; }
[dir="rtl"] .content-page .prose > .prose__quote { padding: 10px 28px 10px 0; }
@media (max-width: 720px) {
  [dir="rtl"] .topbar__inner { justify-content: center; }
  [dir="rtl"] .tabs { scroll-snap-type: x mandatory; }
}

/* ── Footer v2 — one spacious row of divisions + a single utility row ────────
   Replaces the 5-column link wall that wrapped into ragged rows. Four division
   blocks sit on ONE row at desktop; company links and contact details share a
   single utility line beneath. Generous gaps, capped link counts. */
.site-footer .footer__top { grid-template-columns: minmax(260px, 0.95fr) 3fr; gap: 64px; padding: 84px 28px 40px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.footer__cols .footer__heading { font-size: 0.8rem; letter-spacing: 0.13em; margin-bottom: 10px; }
.footer__cols .footer__heading a { color: #fff; transition: color 0.2s; }
.footer__cols .footer__heading a:hover { color: var(--light-blue); }
.footer__blurb {
  color: rgba(255, 255, 255, 0.46); font-size: 0.83rem; line-height: 1.5;
  margin-bottom: 16px; max-width: 24ch;
}
.footer__cols .footer__col li { margin-bottom: 9px; }
.footer__cols .footer__col a { font-size: 0.92rem; }

/* Utility row — company links left, ways to reach us right, all on one line. */
.footer__utility {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding: 20px 28px; margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.footer__quick { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer__utility-label {
  color: var(--light-blue); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; flex: none;
}
.footer__quick ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__quick a { color: rgba(255, 255, 255, 0.68); font-size: 0.87rem; }
.footer__quick a:hover { color: var(--light-blue); }
.footer__reach { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer__reach-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255, 255, 255, 0.78); font-size: 0.87rem;
}
.footer__reach-item .icon { color: var(--light-blue); flex: none; }
.footer__reach-item--static { color: rgba(255, 255, 255, 0.55); }
a.footer__reach-item:hover { color: var(--light-blue); }

@media (max-width: 1180px) {
  .site-footer .footer__top { grid-template-columns: 1fr; gap: 44px; padding: 64px 28px 32px; }
  .footer__cols { gap: 32px; }
}
@media (max-width: 860px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
  .footer__utility { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .footer__cols { grid-template-columns: 1fr; gap: 26px; }
  .footer__blurb { max-width: none; }
  .footer__quick ul { gap: 6px 16px; }
}
[dir="rtl"] .footer__utility { text-align: right; }