/* ============================================================================
   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 28%; 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; }

/* ════════════════════════════════════════════════════════════════════════════
   AFC DESIGN LANGUAGE 2027 — ported from the approved concept prototype
   (public/design-2027/index.html). Seven patterns: kinetic hero, duotone
   photography, icon draw-on, 45° icon accents, lifecycle scroll, marquee +
   magnetic CTA, blueprint divider. Every animation is disabled under
   prefers-reduced-motion (explicitly, below — the global 0.001ms rule is not
   enough for delayed/infinite animations).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ease-2027: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-snap: cubic-bezier(0.6, -0.05, 0.2, 1.2);
}

/* ── 01 · Kinetic hero — drifting arrowhead field + word-by-word rise ──────── */
.hero__field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__field span {
  position: absolute; width: 46px; height: 46px;
  border: 2px solid rgba(0, 174, 239, 0.16); rotate: 45deg;
  animation: hero-drift 14s var(--ease-2027) infinite alternate;
}
.hero__field span:nth-child(2n) { border-color: rgba(255, 255, 255, 0.07); animation-duration: 18s; scale: 1.8; }
.hero__field span:nth-child(3n) { animation-duration: 23s; scale: 2.6; border-width: 1px; }
.hero__field span:nth-child(4n + 1) { animation-delay: -3.4s; }
.hero__field span:nth-child(4n + 2) { animation-delay: -6.8s; }
.hero__field span:nth-child(4n + 3) { animation-delay: -10.2s; }
.hero__field span:nth-child(5n) { animation-delay: -13.6s; }
@keyframes hero-drift { from { translate: 0 0; } to { translate: 34px -60px; } }

.hero__title .l { display: inline-block; animation: hero-rise 0.9s var(--ease-snap) both; }
/* Stagger in CSS (not JS) so the type still assembles without script.
   nth-child counts the <br> (index 3), which just adds a natural beat. */
.hero__title .l:nth-child(1) { animation-delay: 0.06s; }
.hero__title .l:nth-child(2) { animation-delay: 0.14s; }
.hero__title .l:nth-child(4) { animation-delay: 0.24s; }
.hero__title .l:nth-child(5) { animation-delay: 0.32s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(0.65em) rotate(3deg); } }

/* ── 02 · Duotone photography — navy/cyan multiply, released on hover ──────── */
/* (logos, the hero portrait and admin surfaces are deliberately not targeted) */
.block-gallery .gallery-item, .insight-card__media { position: relative; }
.division-card__media img,
.block-gallery .gallery-item img,
.insight-card__media img {
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.6s var(--ease-2027), transform 0.8s var(--ease-2027);
}
.division-card__media::before,
.block-gallery .gallery-item::before,
.insight-card__media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(4, 30, 66, 0.75), rgba(0, 174, 239, 0.35));
  mix-blend-mode: multiply; transition: opacity 0.6s var(--ease-2027);
}
.division-card:hover .division-card__media img,
.block-gallery .gallery-item:hover img,
.insight-card:hover .insight-card__media img { filter: none; transform: scale(1.05); }
.division-card:hover .division-card__media::before,
.block-gallery .gallery-item:hover::before,
.insight-card:hover .insight-card__media::before { opacity: 0; }

/* ── 03 · Icon draw-on — strokes plot in once as cards reveal ──────────────── */
.service-card .icon :is(path, polyline, rect, circle, line, polygon),
.detail-card .icon :is(path, polyline, rect, circle, line, polygon),
.value-card .icon :is(path, polyline, rect, circle, line, polygon) { stroke-dasharray: 260; }
.service-card.is-visible .icon :is(path, polyline, rect, circle, line, polygon),
.detail-card.is-visible .icon :is(path, polyline, rect, circle, line, polygon),
.value-card.is-visible .icon :is(path, polyline, rect, circle, line, polygon) {
  animation: icon-draw 0.9s var(--ease-2027);
}
@keyframes icon-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

/* ── 04 · 45° icon set accent stroke ───────────────────────────────────────── */
.icon .icon__a { stroke: var(--accent); }
/* Where the surrounding chip already paints the icon cyan, the accent stroke
   flips to navy so the two-tone pairing stays visible. */
.service-card__icon .icon__a,
.detail-card__icon .icon__a,
.division-card__icon .icon__a,
.block-card__icon .icon__a,
.mega__ico .icon__a { stroke: var(--dark-blue); }

/* ── 05 · Lifecycle scrollytelling ─────────────────────────────────────────── */
.life { background: var(--midnight); }
.life__title { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.life__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 24px; align-items: start; }
.life__rail { position: sticky; top: 18vh; }
.life__line { position: relative; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 4px; overflow: hidden; margin-top: 34px; }
.life__line i {
  position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark-blue), var(--accent));
  transform-origin: left; scale: 0 1; transition: scale 0.4s var(--ease-2027);
}
.life__stages { margin-top: 34px; display: grid; gap: 10px; }
.life__stage { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.2); transition: color 0.4s; line-height: 1.15; }
.life__stage.on { color: #fff; }
.life__stage .cy { color: inherit; }
.life__stage.on .cy { color: var(--accent); }
.life__steps { display: grid; gap: 40vh; padding: 12vh 0 30vh; }
.life__step {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px); border-radius: var(--radius); padding: 30px;
}
.life__step h3 { color: var(--accent); font-size: 1.15rem; margin-bottom: 10px; }
.life__step p { color: rgba(255, 255, 255, 0.72); line-height: 1.65; }
@media (max-width: 900px) {
  .life__grid { grid-template-columns: 1fr; gap: 34px; }
  .life__rail { position: static; }
  .life__steps { gap: 26px; padding: 30px 0 0; }
}
[dir="rtl"] .life__rail, [dir="rtl"] .life__step { text-align: right; }
[dir="rtl"] .life__line i { transform-origin: right; background: linear-gradient(-90deg, var(--dark-blue), var(--accent)); }

/* ── 06 · Brand marquee + magnetic CTA ─────────────────────────────────────── */
.marq { overflow: clip; background: var(--midnight); border-block: 1px solid rgba(255, 255, 255, 0.12); padding: 18px 0; }
.marq__track { display: flex; gap: 64px; width: max-content; animation: marq-scroll 26s linear infinite; }
.marq__track span { font-size: 1.5rem; font-weight: 500; color: rgba(255, 255, 255, 0.35); white-space: nowrap; }
.marq__track span i { color: var(--accent); font-style: normal; }
@keyframes marq-scroll { to { translate: -50% 0; } }
/* RTL: the track anchors to the right edge, so it must travel rightward. */
[dir="rtl"] .marq__track { animation-name: marq-scroll-rtl; }
@keyframes marq-scroll-rtl { to { translate: 50% 0; } }
.cta-strip .btn { will-change: transform; }

/* ── 07 · Blueprint divider — grid paper + self-plotting skyline ───────────── */
.bp-divider {
  position: relative; height: 140px; overflow: hidden;
  background:
    linear-gradient(rgba(0, 91, 170, 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(0, 91, 170, 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
}
.bp-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-divider svg * { stroke: var(--dark-blue); stroke-width: 2; fill: none; stroke-linecap: square; }
.bp-divider svg .bp-a { stroke: var(--accent); }
@supports (animation-timeline: view()) {
  .bp-divider svg :is(line, polyline, rect) {
    stroke-dasharray: 1400; stroke-dashoffset: 1400;
    animation: bp-plot linear both; animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes bp-plot { to { stroke-dashoffset: 0; } }
}

/* ── Reduced motion: every 2027 animation off, everything fully visible ────── */
@media (prefers-reduced-motion: reduce) {
  .hero__field span,
  .hero__title .l,
  .marq__track,
  .service-card .icon *, .detail-card .icon *, .value-card .icon *,
  .bp-divider svg * { animation: none !important; }
  .hero__title .l { opacity: 1 !important; transform: none !important; }
  .bp-divider svg :is(line, polyline, rect) { stroke-dashoffset: 0 !important; }
}

/* ── Partners carousel (all four divisions) ────────────────────────────────
   Continuous auto-scrolling logo track. Pure CSS (works with JS disabled):
   the track holds two identical .partner-group halves and translates by -50%
   (exactly one group + its trailing padding) for a seamless ~40s loop.
   Logos are untinted third-party originals, so they sit on light chips. */
.partner-carousel { overflow: hidden; }
.partner-track {
  display: flex; width: max-content;
  animation: partners-scroll 40s linear infinite;
}
.partner-carousel:hover .partner-track { animation-play-state: paused; }
.partner-group { display: flex; gap: 16px; padding-inline-end: 16px; }
.partner-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 186px; padding: 20px 18px 14px;
  background: #fff; border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.partner-chip img {
  height: auto; width: auto; max-height: 46px; max-width: 140px;
  object-fit: contain;
}
.partner-chip__division {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted, #6b7280); opacity: 0.75; white-space: nowrap;
}
@keyframes partners-scroll { to { translate: -50% 0; } }
/* RTL: content flows right-to-left, so the loop translates the other way. */
[dir="rtl"] .partner-track { animation-name: partners-scroll-rtl; }
@keyframes partners-scroll-rtl { to { translate: 50% 0; } }
/* Reduced motion: static wrapped grid, duplicate half hidden. */
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none !important; width: auto; }
  .partner-group { flex-wrap: wrap; justify-content: center; padding-inline-end: 0; }
  .partner-group[aria-hidden="true"] { display: none; }
}
@media (max-width: 640px) {
  .partner-chip { width: 158px; padding: 16px 14px 12px; }
  .partner-chip img { max-height: 38px; max-width: 118px; }
}

/* ── Partner text-mark chips ────────────────────────────────────────────────
   Partners named in AFC's own site copy that have no logo file in the legacy
   media library render as typographic name chips — deliberately a set name,
   not a fake logo. Same chip dimensions as the logo chips. */
.partner-chip--text .partner-chip__name {
  display: flex; align-items: center; justify-content: center; min-height: 46px;
  font-family: var(--font-sans);
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--midnight); white-space: nowrap;
}
@media (max-width: 640px) {
  .partner-chip--text .partner-chip__name { min-height: 38px; font-size: 0.92rem; }
}

/* ── Hero taglines — two understated statement lines under the CTAs ────────
   Small-caps treatment, short cyan rule at the start side of each line.
   They join the hero's CSS-only word-rise stagger (delays continue after the
   headline's 0.32s beat); reduced-motion shows them fully, un-animated. */
.hero__taglines { margin-top: 28px; display: grid; gap: 10px; }
.hero__tagline {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.72);
  animation: hero-rise 0.9s var(--ease-snap) both;
}
.hero__tagline::before {
  content: ""; flex: none; width: 24px; height: 2px;
  background: var(--accent);
}
.hero__tagline:nth-child(1) { animation-delay: 0.42s; }
.hero__tagline:nth-child(2) { animation-delay: 0.52s; }
/* RTL: the flex row mirrors on its own (rule lands on the right); Arabic
   script must not be letter-spaced. */
[dir="rtl"] .hero__tagline { text-align: right; letter-spacing: 0; }
@media (max-width: 480px) {
  .hero__tagline { font-size: 0.7rem; letter-spacing: 0.14em; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__tagline { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Office directory — phone-book index tabs + ruled entry page (/contact) ──
   Aesthetic: an old paper phone book set on the 2027 design language. Tabs are
   staggered index tabs with a 45° notched top corner (clip-path); the entry
   card sits on subtle horizontal rules like a directory page; contact rows use
   dotted leaders. No-JS: every panel stacks visibly (.phb--js gates hiding). */
.phb-tabs {
  display: flex; align-items: flex-end; gap: 8px;
  position: relative; z-index: 2; margin-bottom: -1px;
  padding: 0 14px;
}
.phb-tab {
  appearance: none; cursor: pointer; font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-width: 152px; padding: 13px 24px 9px;
  background: var(--bg-tint); color: var(--muted);
  border: 1px solid var(--border); border-bottom: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
/* staggered heights, like thumbed index tabs */
.phb-tab:nth-child(2) { padding-top: 12px; }
.phb-tab:nth-child(3) { padding-top: 11px; }
.phb-tab:nth-child(4) { padding-top: 10px; }
.phb-tab:nth-child(5) { padding-top: 9px; }
.phb-tab__city { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.phb-tab__country { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }
.phb-tab:hover:not(.is-active) { background: #fff; color: var(--ink); }
.phb-tab.is-active { background: var(--light-blue); border-color: var(--light-blue); color: var(--midnight); }
.phb-tab:focus-visible { outline: 2px solid var(--dark-blue); outline-offset: -3px; }
.phb-book {
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(4, 38, 63, 0.025) 27px 28px);
  box-shadow: var(--shadow); overflow: hidden;
}
.phb-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; padding: 46px 52px 52px; }
.phb-panel + .phb-panel { border-top: 1px dashed var(--border); }
.phb--js .phb-panel { display: none; }
.phb--js .phb-panel.is-active { display: grid; animation: fade 0.4s var(--ease); }
.phb-entry__name { font-size: 1.42rem; color: var(--ink); line-height: 28px; margin-bottom: 14px; }
.phb-entry__lines { font-style: normal; color: var(--body); line-height: 28px; }
.phb-entry__note { margin-top: 14px; font-size: 0.92rem; font-style: italic; color: var(--muted); line-height: 28px; }
.phb-entry__contacts { margin-top: 26px; max-width: 520px; }
.phb-line { display: flex; align-items: baseline; gap: 10px; line-height: 28px; }
.phb-line__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dark-blue); white-space: nowrap; }
.phb-line__dots { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--slate-300); transform: translateY(-4px); }
.phb-line__val { color: var(--ink); text-decoration: none; white-space: nowrap; unicode-bidi: isolate; }
a.phb-line__val:hover { color: var(--dark-blue); text-decoration: underline; }
.phb-map { align-self: start; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.phb-map iframe { width: 100%; height: 400px; border: 0; }
/* RTL — mirror the notched corner and alignment */
[dir="rtl"] .phb-tab { text-align: right; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); }
@media (max-width: 900px) {
  .phb-panel { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px 30px; }
}
@media (max-width: 480px) {
  .phb-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 8px; }
  .phb-tabs::-webkit-scrollbar { display: none; }
  .phb-tabs .phb-tab { flex: 0 0 auto; min-width: 86px; padding: 12px 14px 10px; }
  .phb-map iframe { height: 240px; }
}

/* ── Elegance pass for generated content pages ─────────────────────────────
   Scraped icon clip-art collapses into a capability grid / icon strip, and
   heading walls become a quiet reference roll-call. 45° notched corners,
   midnight ink, cyan used sparingly — per the 2027 design language. */
.capgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0; }
.capgrid__item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.section--tint .capgrid__item { border-color: transparent; box-shadow: var(--shadow-sm); }
.capgrid__item:hover { border-color: var(--cyan-200); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.capgrid__icon {
  flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--bg-tint); border-radius: var(--radius-sm);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.capgrid__icon img { width: 34px; height: 34px; object-fit: contain; }
.capgrid__icon--mark { color: var(--dark-blue); }
.capgrid__label { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--ink); }
[dir="rtl"] .capgrid__item { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
[dir="rtl"] .capgrid__icon { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
@media (max-width: 1080px) { .capgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .capgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .capgrid__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .capgrid__icon { width: 48px; height: 48px; }
  .capgrid__icon img { width: 28px; height: 28px; }
  .capgrid__label { font-size: 0.88rem; }
}

.iconstrip { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.iconstrip__chip {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.iconstrip__chip img { width: 26px; height: 26px; object-fit: contain; }

.namelist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.namelist__item {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px;
  background: var(--bg-tint); border-inline-start: 2px solid var(--accent);
  border-radius: var(--radius-sm);
}
.namelist__name { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; color: var(--ink); }
.namelist__sub { font-size: 0.84rem; color: var(--muted); }
@media (max-width: 1080px) { .namelist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .namelist { grid-template-columns: 1fr; } }

/* ── 08 · Homepage hero slider ──────────────────────────────────────────────
   Five-slide rotation over the kinetic hero. Progressive enhancement:
   without JS only the first slide renders (exactly the original hero, no
   layout shift, controls hidden). JS adds .hero--js, stacks slides 2+ as
   absolute layers and crossfades opacity; the first slide in flow always
   defines the section height. Each slide carries its own photo/veil/plexus/
   mark/field so the original stacking order is preserved per slide. */
.hero--slider { display: block; min-height: 0; }
.hero__slides { position: relative; }
.hero__slide {
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  min-height: clamp(560px, 84vh, 820px);
  display: flex; align-items: center;
}
.hero__slide + .hero__slide { display: none; } /* no-JS: slide 1 only */
.hero--js .hero__slide {
  display: flex; position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.hero--js .hero__slide:first-child { position: relative; } /* height definer */
.hero--js .hero__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }

/* Controls — hidden until JS drives the rotation. RTL: logical inset places
   prev at the inline-start edge and the chevrons flip (UI arrows, not photos). */
.hero__arrow, .hero__dots { display: none; }
.hero--js .hero__arrow {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(4, 30, 66, 0.35); color: #fff; cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero--js .hero__arrow:hover,
.hero--js .hero__arrow:focus-visible { background: rgba(0, 174, 239, 0.35); border-color: var(--accent); }
.hero__arrow--prev { inset-inline-start: 18px; }
.hero__arrow--next { inset-inline-end: 18px; }
[dir="rtl"] .hero__arrow svg { transform: scaleX(-1); }
.hero--js .hero__dots {
  display: flex; gap: 10px; position: absolute; bottom: 30px;
  inset-inline-start: 28px; z-index: 3;
}
.hero__dot {
  width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.32); cursor: pointer;
  transition: background 0.25s var(--ease), width 0.25s var(--ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero__dot.is-active { width: 42px; background: var(--accent); }

@media (max-width: 640px) {
  .hero__slide { min-height: 78vh; }
  /* Arrows overlap the copy on narrow screens — swipe + dots take over. */
  .hero--js .hero__arrow { display: none; }
  .hero--js .hero__dots { bottom: 20px; inset-inline-start: 24px; }
}

/* Reduced motion: no autoplay (JS) and no crossfade — dots/arrows still cut
   between slides instantly. */
@media (prefers-reduced-motion: reduce) {
  .hero--js .hero__slide { transition: none; }
}