/* =============================================================================
   theme.css — Layout, components, typography, a11y & RTL-base for the child theme
   -----------------------------------------------------------------------------
   • Consumes the :root token contract from style.css — NEVER hardcodes a brand hex.
     (Only translucent alpha composites of brand colors appear as rgba() literals,
      because the tokens are opaque and CSS cannot add alpha to a hex token without
      color-mix(); each is commented with the token it derives from.)
   • Generic, framework-agnostic class namespaces only — no builder/utility classes
     are used as styling hooks, so framework updates cannot break authored styles.
   • CSS logical properties everywhere → Arabic/RTL mirrors automatically. No
     physical left/right for flow layout. (True RTL exceptions live in rtl.css.)
   • Animates compositor-friendly props only (transform / opacity / filter).
   • Direction: dark-luxury / enterprise-confident. Orange is a scalpel.
   ============================================================================= */


/* =============================================================================
   1. BASE / RESET ADDITIONS
   ============================================================================= */

/* Divi parent theme interference reset — neutralize layout rules from
   style-static.min.css that conflict with our code-first responsive design. */
.et_right_sidebar #main-content .container:before,
.et_right_sidebar #main-content .container:after { display: none; }
#main-content { padding: 0; }
.container { width: auto; max-width: none; padding: 0; }
#main-content .container { width: auto; max-width: none; }
.et_pb_gutters3 .et_pb_column { padding: 0; }
body.et_divi_theme { min-width: 0 !important; }
.site-main { max-width: 100%; overflow-x: clip; }   /* 100% (not 100vw) — 100vw includes the scrollbar gutter and clips content at the right edge on narrow viewports */
#page-container { min-width: 0 !important; width: 100% !important; }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--eie-font-body);
  font-size: var(--eie-text-body);
  line-height: 1.6;
  color: var(--eie-grey-800);
  background-color: var(--eie-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
video { max-width: 100%; height: auto; }

img { display: block; }

a {
  color: var(--eie-navy); /* AA link text on light (~16:1); orange-on-white fails 4.5:1 (DESIGN §AA) */
  text-decoration: none;
  transition: color var(--eie-duration-fast) var(--eie-ease-out);
}
a:hover { color: var(--eie-orange-deep, #9c5b00); } /* AA on light (orange-600 is 2.8:1) */
/* Dark bands keep the bright hover — the deep amber is only ~3:1 on navy. Footer
   links carry their own hover rule and are unaffected either way. */
.on-navy a:hover { color: var(--eie-orange); }
/* Non-colour affordance for inline links inside body copy. */
.t-prose a { text-decoration: underline; text-underline-offset: 0.15em; }

hr {
  border: 0;
  border-block-start: 1px solid var(--eie-grey-100);
  margin-block: 2rem;
}


/* =============================================================================
   2. ACCESSIBILITY PRIMITIVES — skip link + visually-hidden
   ============================================================================= */

/* Skip link (WCAG 2.4.1). Hidden until focused, then pinned to the start edge
   (logical → flips in RTL). Target: <main id="main" tabindex="-1">. */
.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 10000;
  margin: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  transform: translateY(-150%);
  transition: transform var(--eie-duration-fast) var(--eie-ease-out);
  background-color: var(--eie-navy);
  color: var(--eie-white);
  font-weight: 600;
  font-size: var(--eie-text-small);
  border-radius: var(--eie-radius-card);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bidi isolation for Latin tokens (product names, URLs, numerals) inside Arabic. */
.bidi-isolate { unicode-bidi: isolate; }


/* =============================================================================
   3. CONTAINER / LAYOUT
   ============================================================================= */

.app-container {
  inline-size: 100%;
  max-inline-size: var(--eie-container);             /* 80rem / 1280px */
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
}
.app-container--narrow { max-inline-size: 64rem; }   /* hero / page-hero */
.app-container--prose  { max-inline-size: 48rem; }   /* long-form copy */

.section { padding-block: var(--eie-section-py); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.section--loose { padding-block: clamp(5rem, 3.5rem + 7vw, 9rem); }

.section--alt  { background-color: var(--eie-grey-50); }
.section--navy {
  background-color: var(--eie-navy);
  color: var(--eie-white);
}

.section__body { margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); }


/* =============================================================================
   4. TYPOGRAPHY CLASSES
   ============================================================================= */

.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--eie-font-display);
  font-weight: 700;
  color: var(--eie-navy);
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.t-display { font-size: var(--eie-text-display); line-height: 1.05; letter-spacing: -0.02em; }
.t-h1      { font-size: var(--eie-text-h1);      line-height: 1.1;  letter-spacing: -0.02em; }
.t-h2      { font-size: var(--eie-text-h2);      line-height: 1.1;  letter-spacing: -0.02em; }
.t-h3      { font-size: var(--eie-text-h3);      line-height: 1.2;  letter-spacing: -0.01em; }

.t-body-lg { font-size: var(--eie-text-body-lg); line-height: 1.6; color: var(--eie-grey-600); }
.t-body    { font-size: var(--eie-text-body);    line-height: 1.6; color: var(--eie-grey-600); }
.t-small   { font-size: var(--eie-text-small);   font-weight: 500; color: var(--eie-grey-600); }

.t-prose { max-inline-size: 70ch; text-align: start; }

/* On navy surfaces: headings white, paragraphs at ≥78% white (DESIGN §2). */
.section--navy :is(.t-display, .t-h1, .t-h2, .t-h3),
.on-navy :is(.t-display, .t-h1, .t-h2, .t-h3),
.page-hero :is(.t-display, .t-h1, .t-h2, .t-h3) { color: var(--eie-white); }
.section--navy :is(.t-body-lg, .t-body, .t-small),
.on-navy :is(.t-body-lg, .t-body, .t-small),
.page-hero :is(.t-body-lg, .t-body, .t-small) { color: rgba(255, 255, 255, 0.82); }

/* --- Arabic typography (language-bound, not direction-bound). WPML sets
   lang="ar" server-side on <html>; :lang(ar) also catches nested AR blocks.
   Arabic glyphs join → never track, never uppercase, looser leading. --- */
[lang="ar"],
:lang(ar) {
  font-family: var(--eie-font-arabic);
  line-height: 1.8;
}
:is(.t-display, .t-h1, .t-h2, .t-h3):lang(ar) {
  font-family: var(--eie-font-arabic);
  letter-spacing: 0;          /* overrides the -0.02em Latin tracking */
  line-height: 1.4;
}
/* `font-family` here, not only `line-height`.
   The block above sets the Arabic face on the [lang="ar"] element, but `body`
   (§2) sets --eie-font-body with a directly-matching rule, which beats an
   INHERITED value for the whole subtree. So Arabic body copy resolved to Manrope
   while the heading resolved to IBM Plex Sans Arabic — one page, two faces, from a
   specificity difference rather than a decision. Manrope's unicode-range is
   Latin-only, so the Arabic then falls through to whatever generic follows.
   Stated as a CASCADE fact, not a screenshot: assets/fonts/* carries no .woff2 on a
   clean checkout (only .gitkeep and a README), so both sides resolve to the same fallback and the
   difference is invisible until the faces are vendored. Latent until the Arabic
   privacy route became the first page to declare lang="ar". */
:is(.t-body, .t-body-lg, .t-prose):lang(ar) {
  font-family: var(--eie-font-arabic);
  line-height: 1.85;
}


/* =============================================================================
   5. BUTTONS — sizes sm 36 / md 44 (default) / xl 56
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--eie-font-body);
  font-size: var(--eie-text-body);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--eie-radius-card);
  block-size: 2.75rem;
  padding-inline: 1.5rem;
  transition:
    transform var(--eie-duration-fast) var(--eie-ease-out),
    background-color var(--eie-duration-fast) var(--eie-ease-out),
    border-color var(--eie-duration-fast) var(--eie-ease-out),
    color var(--eie-duration-fast) var(--eie-ease-out),
    box-shadow var(--eie-duration-fast) var(--eie-ease-out);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-sm { min-block-size: 2.75rem; padding-inline: 1.25rem; font-size: var(--eie-text-small); } /* >=44px tap target (WCAG 2.5.8) */
.btn-md { block-size: 2.75rem; padding-inline: 1.5rem; }
.btn-xl { block-size: 3.5rem;  padding-inline: 1.75rem; font-size: var(--eie-text-body-lg); }

.btn-primary {
  background-color: var(--eie-orange);
  color: var(--eie-navy-deep);
  border-color: var(--eie-orange);
}
.btn-primary:hover {
  background-color: var(--eie-orange-600);
  border-color: var(--eie-orange-600);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--eie-white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--eie-orange);
  transform: translateY(-2px);
}
.btn-secondary:active { transform: translateY(0); }

.btn-outline {
  background-color: transparent;
  border-color: var(--eie-navy);
  color: var(--eie-navy);
}
.btn-outline:hover { background-color: var(--eie-navy); color: var(--eie-white); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); }

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--eie-navy);
  padding-inline: 1rem;
}
.btn-ghost:hover { background-color: var(--eie-grey-50); }
.section--navy .btn-ghost,
.on-navy .btn-ghost { color: var(--eie-white); }
.section--navy .btn-ghost:hover,
.on-navy .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.08); }


/* =============================================================================
   6. CARDS — sparingly; not every block is a card
   ============================================================================= */

.card-group {
  display: grid;
  grid-auto-flow: dense;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .card-group { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-group { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .card-group--compact { grid-template-columns: repeat(4, 1fr); } }
/* B15 — location cards balance evenly (2x2) so a single card is not alone beside empty white. */
@media (min-width: 48rem) { .card-group--offices { grid-template-columns: repeat(2, 1fr); } }

.card-item {
  display: flex;
  flex-direction: column;
  background-color: var(--eie-white);
  border: 1px solid var(--eie-grey-100);
  border-radius: var(--eie-radius-card);
  box-shadow: var(--eie-shadow-card);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  transition:
    transform var(--eie-duration-base) var(--eie-ease-out),
    border-color var(--eie-duration-base) var(--eie-ease-out),
    box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.card-item:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, 0.4);   /* --eie-orange @ 40% */
  box-shadow: var(--eie-shadow-elegant);
}

.card-item--glass {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);   /* white @ 10% hairline */
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--eie-white);
}
.card-item--glass:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, 0.4);
  box-shadow: var(--eie-shadow-elegant);
}

.card-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 0.75rem;
  background-color: var(--eie-grey-50);
  color: var(--eie-orange-600);
  margin-block-end: 1rem;
}
.card-item--glass .card-item__icon {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--eie-orange);
}
.card-item__title { margin-block: 0 0.5rem; }
.card-item__text  { margin: 0; }
.card-item__meta  { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--eie-grey-600, #5b6573); }

/* Capability tag chips — homepage-bento parity for the solutions cards. */
.card-item__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.card-item__tag  { font-size: 0.72rem; font-weight: 600; color: var(--eie-navy, #0a1f3d); background: var(--eie-grey-50, #f4f6fa); border: 1px solid var(--eie-grey-100, #e8edf4); border-radius: 999px; padding: 0.25rem 0.6rem; line-height: 1.3; }
.card-item--glass .card-item__tag { color: var(--eie-white, #fff); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }

/* Solutions hero value-prop accent (orange keyword on the navy archive hero). */
.arch-hero__title-accent { color: var(--eie-orange, #f5a623); }

/* Flagship-wide bento card — editorial asymmetry in the solutions card grid. */
.card-item--featured { grid-column: span 2; background: linear-gradient(160deg, var(--eie-white, #fff), #fbf6ec); }
@media (min-width: 64rem) {
  /* start, not center: with a short title and few tags the left column is
     shorter than the prose, and centring both left dead space under the
     title while the description floated in the middle of the right half. */
  .card-item--featured { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
  .card-item--featured > .card-item__icon,
  .card-item--featured > .card-item__title,
  .card-item--featured > .card-item__tags,
  .card-item--featured > .card-item__more { grid-column: 1; }
  .card-item--featured > .card-item__text { grid-column: 2; grid-row: 1 / span 99; align-self: start; margin: 0; font-size: 1.02rem; }
}
@media (max-width: 48rem) { .card-item--featured { grid-column: auto; } }

/* Quiet CTA tile — closes the focused products catalog row without faking a
   product card. Outlined rather than filled, so it reads as an invitation. */
.card-item--cta {
  background: transparent;
  border: 1px dashed rgba(10, 31, 61, 0.22);
  box-shadow: none;
  transition: border-color var(--eie-dur, 200ms) ease, background-color var(--eie-dur, 200ms) ease;
}
.card-item--cta .card-item__icon { color: var(--eie-orange); background: var(--eie-grey-50, #f4f6fa); }
.card-item--cta .card-item__more { color: var(--eie-orange-deep, #9c5b00); }
.card-item--cta:hover,
.card-item--cta:focus-within {
  border-color: var(--eie-orange);
  background: var(--eie-grey-50, #f4f6fa);
}

/* Insights empty state — centered, evenly spaced. */
.empty-state { text-align: center; }
.empty-state > * + * { margin-block-start: 1rem; }


/* =============================================================================
   7. EYEBROW PILL + SECTION HEADING BLOCK
   ============================================================================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--eie-font-body);
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eie-navy);
  background-color: rgba(245, 166, 35, 0.1);    /* --eie-orange @ 10% */
  border: 1px solid rgba(245, 166, 35, 0.25);   /* --eie-orange @ 25% */
  border-radius: var(--eie-radius-pill);
  padding-block: 0.375rem;
  padding-inline: 0.875rem;
}
.eyebrow::before {
  content: "";
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--eie-radius-pill);
  background-color: var(--eie-orange);
  flex: 0 0 auto;
}
.section--navy .eyebrow,
.on-navy .eyebrow,
.eyebrow--dark {
  color: var(--eie-orange);
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}
/* Arabic: no tracking, no uppercase. */
.eyebrow:lang(ar) { letter-spacing: 0; text-transform: none; }

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  text-align: start;
  max-inline-size: 48rem;
}
.section-heading__lead { margin: 0; }
.section-heading--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}


/* =============================================================================
   8. PAGE HERO — navy field, layered: gradient → faint grid → soft orange glow.
   Decorative layers are pseudo-elements (pointer-events:none) so they never
   trap focus or intercept clicks.
   ============================================================================= */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--eie-navy-deep) 0%, var(--eie-navy) 55%, var(--eie-navy-700) 100%);
  color: var(--eie-white);
  padding-block: clamp(3.25rem, 2.5rem + 4.5vw, 6rem);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 40%, transparent 80%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  inline-size: 32rem;
  block-size: 32rem;
  border-radius: var(--eie-radius-pill);
  background: radial-gradient(circle, rgba(245, 166, 35, 0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-inline-size: 56rem;
}
.page-hero--center .page-hero__inner { align-items: center; text-align: center; margin-inline: auto; }
.page-hero--tight { padding-block: clamp(3rem, 2.5rem + 3vw, 5rem); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 0.5rem; }

/* Purely decorative floating elements hide below lg (DESIGN §8). */
.page-hero__decor { display: none; }
@media (min-width: 64rem) { .page-hero__decor { display: block; } }


/* =============================================================================
   9. STATS BAND — navy; orange/white numerals; muted white labels
   ============================================================================= */

.stats-band {
  background-color: var(--eie-navy);
  color: var(--eie-white);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
}
.stats-band__grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 48rem) { .stats-band__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .stats-band__grid--5 { grid-template-columns: repeat(5, 1fr); } }

.stats-band__value {
  font-family: var(--eie-font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--eie-orange);
}
.stats-band__value--plain { color: var(--eie-white); }
.stats-band__label {
  margin-block-start: 0.5rem;
  font-size: var(--eie-text-small);
  color: rgba(255, 255, 255, 0.65);
}
.stats-band__value:lang(ar) { letter-spacing: 0; }


/* =============================================================================
   10. CTA BAND — navy gradient card + faint grid + soft orange glow
   ============================================================================= */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--eie-radius-cta);
  background: linear-gradient(135deg, var(--eie-navy-deep) 0%, var(--eie-navy) 60%, var(--eie-navy-700) 100%);
  color: var(--eie-white);
  box-shadow: var(--eie-shadow-glow);
  padding: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-inline-size: 44rem;
  margin-inline: auto;
}
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-block-start: 0.75rem; }
@media (max-width: 36rem) {
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { inline-size: 100%; text-align: center; }
}


/* =============================================================================
   11. SITE FOOTER — navy-deep, asymmetric multi-column, hairline divider
   ============================================================================= */

.site-footer {
  background-color: var(--eie-navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block-start: clamp(3rem, 2.5rem + 3vw, 5rem);
  overflow: hidden;
}
.site-footer__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.site-footer__col { min-inline-size: 0; }
.site-footer__heading {
  font-family: var(--eie-font-display);
  font-size: var(--eie-text-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eie-white);
  margin-block: 0 1rem;
}
.site-footer__heading:lang(ar) { letter-spacing: 0; text-transform: none; }

.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.site-footer__link {
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--eie-duration-fast) var(--eie-ease-out);
}
.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--eie-orange); }

/* Footer links otherwise inherit the global navy `a` colour — navy-on-navy, near
   invisible. Scope a legible light tone for every footer link (WCAG AA: white@78%
   on navy-deep ≈ 10:1). */
.site-footer__links a,
.site-footer__email,
.site-footer__office-tel {
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--eie-duration-fast) var(--eie-ease-out);
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__email:hover,
.site-footer__email:focus-visible,
.site-footer__office-tel:hover,
.site-footer__office-tel:focus-visible { color: var(--eie-orange); }

.site-footer__contact { display: flex; align-items: flex-start; gap: 0.625rem; }
.site-footer__contact-icon { color: var(--eie-orange); flex: 0 0 auto; margin-block-start: 0.125rem; }

.site-footer__bottom {
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--eie-text-small);
  color: rgba(255, 255, 255, 0.6);
}


/* =============================================================================
   12. UTILITIES
   ============================================================================= */

.glass-panel {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.grid-texture {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.shadow-card    { box-shadow: var(--eie-shadow-card); }
.shadow-elegant { box-shadow: var(--eie-shadow-elegant); }
.shadow-glow    { box-shadow: var(--eie-shadow-glow); }


/* =============================================================================
   13. FOCUS VISIBILITY (WCAG 2.4.11)
   Solid 3px outline, offset 2px. Navy on light (16.45:1), orange on navy
   (8.12:1). Never a translucent ring. :focus-visible keeps mouse clicks clean.
   ============================================================================= */

:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 3px solid var(--eie-focus-light);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--navy :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.on-navy :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.page-hero :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.stats-band :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.cta-band :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.site-header :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.site-drawer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.site-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.editable-region--navy :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--eie-focus-dark);
}

/* Fallback for engines without :focus-visible — never leave focus unindicated. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus {
  outline: 3px solid var(--eie-focus-light);
  outline-offset: 2px;
}
@supports selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }
}


/* =============================================================================
   14. REDUCED MOTION (WCAG 2.3.3)
   Broad neutraliser + defensive flatten of framework-injected scroll/parallax
   animation. 1ms (not 0) so transitionend/animationend still fire; opacity:1 so
   reveal-from-hidden never strands content invisible.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Cancel hover lifts so nothing shifts. */
  .btn:hover,
  .card-item:hover,
  .card-item--glass:hover,
  .card-item--premium:hover,
  .product-card--enhanced:hover,
  .bento-tile:hover,
  .sector-strip-card:hover { transform: none; }

  /* Defensive: tame builder-injected scroll/parallax/animation to resting state. */
  [class*="_animation_"],
  [class*="-animated"],
  [class*="scroll_effect"],
  [class*="parallax"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    background-attachment: scroll !important;
  }
}


/* =============================================================================
   15. SCROLL REVEAL (progressive enhancement — paired with assets/js/reveal.js)
   The hidden pre-state is gated on BOTH the `eie-js` flag (reveal.js adds it to
   <html>) AND (prefers-reduced-motion: no-preference). So with no JS, or under
   reduced motion, content is always visible and never stranded hidden. reveal.js
   adds `.is-revealed` (and per-item animation-delay via CSSOM) to play the
   entrance. Compositor-only (opacity/transform). ~0.6s matches prototype pacing.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .eie-js [data-eie-reveal] {
    opacity: 0;
    transform: translateY(28px);
  }
  .eie-js [data-eie-reveal].is-revealed {
    animation: eie-reveal-in 0.6s var(--eie-ease-out) both;
  }
}

@keyframes eie-reveal-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   16. HOSPITALITY GOLD (vertical-scoped — paired with inc/theme-builder.php)
   Unlocked ONLY by the `eie-sector-hospitality` body class that theme-builder.php
   adds when an eie_sector single has ACF sector_is_hospitality = true. Remaps the
   accent tokens to gold for that page only, so gold appears NOWHERE else
   (DESIGN §2). Focus ring stays AA: gold #C8A24A on navy = 6.83:1 (≥ 3:1).
   ============================================================================= */

.eie-sector-hospitality {
  --eie-orange:      var(--eie-gold);   /* accent → gold on Hospitality pages only */
  --eie-orange-600:  var(--eie-gold);
  --eie-orange-deep: var(--eie-gold-deep, #7a5d10); /* AA text links stay gold + legible */
}


/* =============================================================================
   17. BREADCRUMB (visible nav — markup from inc/theme-builder.php)
   Separator is a CSS pseudo-element (never in the DOM, so it isn't read aloud)
   and uses logical spacing so it mirrors automatically in RTL.
   ============================================================================= */

.eie-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding-inline: 0;
  list-style: none;
  font-size: var(--eie-text-small);
}
.eie-breadcrumb__item { display: inline-flex; align-items: center; }
.eie-breadcrumb__item + .eie-breadcrumb__item::before {
  content: "/";
  margin-inline: 0.5rem;
  color: var(--eie-grey-500);
}
.eie-breadcrumb__link {
  color: var(--eie-grey-700, #334155);
  font-weight: 500;
  text-decoration: none;
}
.eie-breadcrumb__link:hover,
.eie-breadcrumb__link:focus-visible { color: var(--eie-orange-deep, #9c5b00); text-decoration: underline; text-underline-offset: 0.2em; }
.eie-breadcrumb__current { color: var(--eie-navy); font-weight: 600; }


/* =============================================================================
   18. SITE HEADER + PRIMARY NAV + MOBILE DRAWER (markup from inc/chrome.php)
   Sticky navy-deep bar (solid baseline; transparent-over-hero-on-scroll is a
   future JS enhancement). Desktop shows the inline nav; below lg a ≥44×44 toggle
   reveals a top-anchored full-width drawer (display/opacity — no left/right
   transform, so it mirrors in RTL with nothing in rtl.css). Drawer open state is
   the `.is-open` class set by assets/js/a11y.js; the X morph is keyed off the
   toggle's aria-expanded so CSS needs no extra JS hook.
   ============================================================================= */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background-color: var(--eie-navy-deep);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: saturate(140%);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 0.75rem + 0.6vw, 1.375rem);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex: 0 0 auto;
  text-decoration: none;
}
.site-header__logo {
  block-size: clamp(2.25rem, 2rem + 0.5vw, 2.75rem);
  inline-size: auto;
}
.site-header__logo-text {
  color: var(--eie-white);
  font-family: var(--eie-font-display);
  font-weight: 800;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  letter-spacing: -0.01em;
}

/* Canonical v3 mark + HTML-composed bilingual identity. */
.eie-brand-identity__mark {
  flex: 0 0 auto;
  inline-size: clamp(2.375rem, 2.125rem + 0.5vw, 2.875rem);
  block-size: clamp(2.375rem, 2.125rem + 0.5vw, 2.875rem);
  object-fit: contain;
}
.eie-brand-identity__wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  align-items: start;
  min-inline-size: 0;
  text-align: start;
}
.eie-brand-identity__wordmark > bdi {
  display: block;
  align-self: flex-start;
  align-self: start;
}
.eie-brand-identity__latin {
  display: flex;
  gap: 0.32em;
  color: var(--eie-white);
  font-family: var(--eie-font-display);
  font-size: clamp(0.75rem, 0.71rem + 0.16vw, 0.875rem);
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1;
}
.eie-brand-identity__wordmark [lang="ar"] {
  align-self: flex-start;
  align-self: start;
  margin-block-start: 0.2rem;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--eie-font-arabic);
  font-size: clamp(0.625rem, 0.59rem + 0.14vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: start;
  text-transform: none;
}

/* Desktop inline nav (hidden < lg). */
.site-header__nav { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--eie-text-small);
  font-weight: 500;
  transition: color var(--eie-duration-fast) var(--eie-ease-out);
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: var(--eie-orange); }
.site-header__lang { display: inline-flex; align-items: center; }

/* Mobile toggle — ≥44×44 target (WCAG 2.5.8); animated hamburger → X. */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--eie-radius-card);
  color: var(--eie-white);
  cursor: pointer;
}
.site-header__toggle-bar { position: relative; display: block; inline-size: 1.25rem; block-size: 2px; }
.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  background-color: var(--eie-white);
  border-radius: 2px;
  transition:
    transform var(--eie-duration-fast) var(--eie-ease-out),
    opacity var(--eie-duration-fast) var(--eie-ease-out);
}
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 1.25rem;
  block-size: 2px;
}
.site-header__toggle-bar::before { inset-block-start: -6px; }
.site-header__toggle-bar::after  { inset-block-start: 6px; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar { background-color: transparent; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* Top-anchored mobile drawer; hidden until a11y.js adds .is-open. */
.site-drawer { display: none; background-color: var(--eie-navy-deep); border-block-end: 1px solid rgba(255, 255, 255, 0.1); }
.site-drawer.is-open { display: block; animation: eie-drawer-in var(--eie-duration-base) var(--eie-ease-out) both; }
.site-drawer__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-block: 0.5rem;
  padding-inline: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  list-style: none;
}
.site-drawer a {
  display: block;
  padding-block: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--eie-text-body);
  border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}
.site-drawer a:hover { color: var(--eie-orange); }
.site-drawer__lang { padding-block: 0.75rem; padding-inline: clamp(1.25rem, 0.9rem + 1.6vw, 2rem); }

@keyframes eie-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 64rem) {
  .site-header__nav { display: flex; align-items: center; gap: 1.5rem; }
  .site-header__toggle { display: none; }
  .site-drawer { display: none !important; }   /* desktop never shows the drawer */
}

/* Header CTA — visible on all viewports so the bar always has visual weight even
   when no primary nav menu is registered. */
.site-header__cta {
  display: none;
  flex-shrink: 0;
}
@media (min-width: 36rem) {
  .site-header__cta { display: inline-flex; }
}

/* <main> target offset so the sticky header never hides the skip-link landing. */
.site-main { scroll-margin-block-start: 5rem; }


/* =============================================================================
   19. SITE FOOTER — sub-classes emitted by inc/chrome.php (complements §11)
   ============================================================================= */

.site-footer__brand {
  color: var(--eie-white);
  font-family: var(--eie-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  margin-block: 0 0.5rem;
}
.site-footer__brand.eie-brand-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  inline-size: fit-content;
  text-decoration: none;
}
.site-footer__slogan { margin: 0; color: rgba(255, 255, 255, 0.6); font-size: var(--eie-text-small); }

.site-footer__offices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.site-footer__office { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--eie-text-small); min-inline-size: 0; }
.site-footer__office-city { color: var(--eie-white); font-weight: 600; }
.site-footer__office-street {
  color: rgba(255, 255, 255, 0.6);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  max-inline-size: 100%;
  display: block;
}
.site-footer__office-tel {
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: anywhere;
}
.site-footer__office-tel:hover,
.site-footer__office-tel:focus-visible { color: var(--eie-orange); }
.site-footer__email {
  display: inline-block;
  margin-block-start: 1rem;
  color: var(--eie-orange);
  font-size: var(--eie-text-small);
}
.site-footer__email:hover,
.site-footer__email:focus-visible { color: var(--eie-orange-600); }


/* =============================================================================
   20. CARD LINK HIT AREA + CONTACT FORM SLOT
   ============================================================================= */

/* Whole-card click target via a stretched link (WCAG 2.5.8) — solution-card has
   a single link (the title), so this is unambiguous. */
.card-item { position: relative; }
.card-item__title a { color: var(--eie-navy); }
.card-item__title a::after { content: ""; position: absolute; inset: 0; }
.card-item__title a:hover,
.card-item__title a:focus-visible { color: var(--eie-orange-deep, #9c5b00); }
.card-item--glass .card-item__title a { color: var(--eie-white); }
.card-item--glass .card-item__title a:hover { color: var(--eie-orange); }

.contact-form-slot { margin-block-start: 1.5rem; }
.contact-form-slot__pending {
  margin: 0;
  color: var(--eie-grey-500);
  font-size: var(--eie-text-small);
  font-style: italic;
}


/* =============================================================================
   21. TRUST STRIP — compact navy bar with qualitative positioning markers.
   Sits below the hero; no fake stats, just verified qualitative claims.
   ============================================================================= */

.trust-strip {
  background-color: var(--eie-navy);
  border-block-start: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
}
.trust-strip__grid {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1.5vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 48rem) { .trust-strip__grid { grid-template-columns: repeat(4, 1fr); } }

.trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.trust-strip__value {
  font-family: var(--eie-font-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--eie-orange);
}
.trust-strip__label {
  font-size: var(--eie-text-small);
  color: rgba(255, 255, 255, 0.6);
  max-inline-size: 14ch;
}
.trust-strip__value:lang(ar) { letter-spacing: 0; }


/* =============================================================================
   22. PREMIUM SECTION HEADINGS — centered with eyebrow + lead
   ============================================================================= */

.section-heading--premium {
  align-items: center;
  text-align: center;
  margin-inline: auto;
  margin-block-end: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  max-inline-size: 52rem;
}
.section-heading--premium .eyebrow { margin-block-end: 0.75rem; }
.section-heading--premium .t-h2 { margin-block: 0 0.75rem; }
.section-heading--premium .t-body-lg { max-inline-size: 48ch; margin-inline: auto; }


/* =============================================================================
   23. ENHANCED CARDS — gradient border on hover, icon glow, better spacing
   ============================================================================= */

.card-item--premium {
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  border: 1px solid var(--eie-grey-100);
  border-radius: var(--eie-radius-card);
  background:
    linear-gradient(var(--eie-white), var(--eie-white)) padding-box,
    linear-gradient(135deg, var(--eie-grey-100), var(--eie-grey-100)) border-box;
  transition:
    transform var(--eie-duration-base) var(--eie-ease-out),
    box-shadow var(--eie-duration-base) var(--eie-ease-out),
    border-color var(--eie-duration-base) var(--eie-ease-out);
}
.card-item--premium:hover {
  transform: translateY(-6px);
  border-color: transparent;
  background:
    linear-gradient(var(--eie-white), var(--eie-white)) padding-box,
    linear-gradient(135deg, var(--eie-orange), var(--eie-navy-700)) border-box;
  box-shadow:
    0 20px 50px -12px rgba(10, 31, 61, 0.25),
    0 0 0 1px transparent;
}
.card-item--premium .card-item__icon {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.04));
  border: 1px solid rgba(245, 166, 35, 0.15);
  color: var(--eie-orange);
  transition: box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.card-item--premium:hover .card-item__icon {
  box-shadow: 0 0 24px -4px rgba(245, 166, 35, 0.35);
}
.card-item--premium .card-item__title { font-size: var(--eie-text-h3); margin-block: 0.75rem 0.5rem; }
.card-item--premium .card-item__text { color: var(--eie-grey-600); line-height: 1.6; }

/* Number label overlay on premium cards */
.card-item__number {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  font-family: var(--eie-font-display);
  font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(10, 31, 61, 0.04);
  pointer-events: none;
  user-select: none;
}
.card-item--premium:hover .card-item__number { color: rgba(245, 166, 35, 0.08); }


/* =============================================================================
   24. WHY EIE — premium feature grid with icon circles + stronger hierarchy
   ============================================================================= */

.why-eie-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .why-eie-grid { grid-template-columns: repeat(2, 1fr); } }

.why-eie-grid__item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--eie-radius-card);
  background-color: var(--eie-grey-50);
  border: 1px solid var(--eie-grey-100);
  transition:
    border-color var(--eie-duration-base) var(--eie-ease-out),
    background-color var(--eie-duration-base) var(--eie-ease-out);
}
.why-eie-grid__item:hover {
  border-color: rgba(245, 166, 35, 0.3);
  background-color: var(--eie-white);
}
.why-eie-grid__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--eie-navy), var(--eie-navy-700));
  color: var(--eie-orange);
}
.why-eie-grid__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.why-eie-grid__content { display: flex; flex-direction: column; gap: 0.25rem; }
.why-eie-grid__title {
  font-family: var(--eie-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--eie-navy);
  margin: 0;
}
.why-eie-grid__desc {
  margin: 0;
  font-size: var(--eie-text-body);
  color: var(--eie-grey-600);
  line-height: 1.6;
}


/* =============================================================================
   25. HOSPITALITY FLAGSHIP SECTION — gold accent, premium dark variant
   ============================================================================= */

.hospitality-flagship {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--eie-navy-deep) 0%, var(--eie-navy) 50%, var(--eie-navy-700) 100%);
  color: var(--eie-white);
  padding-block: var(--eie-section-py);
}
.hospitality-flagship::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(200, 162, 74, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 162, 74, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%);
  pointer-events: none;
}
.hospitality-flagship::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -10%;
  inset-inline-start: -5%;
  inline-size: 28rem;
  block-size: 28rem;
  border-radius: var(--eie-radius-pill);
  background: radial-gradient(circle, rgba(200, 162, 74, 0.12), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.hospitality-flagship__inner {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) { .hospitality-flagship__inner { grid-template-columns: 1fr 1fr; } }

.hospitality-flagship__content { display: flex; flex-direction: column; gap: 1.25rem; }
.hospitality-flagship .eyebrow {
  color: var(--eie-gold);
  background-color: rgba(200, 162, 74, 0.08);
  border-color: rgba(200, 162, 74, 0.25);
}
.hospitality-flagship .eyebrow::before { background-color: var(--eie-gold); }
.hospitality-flagship .t-h2 { color: var(--eie-white); }
.hospitality-flagship .t-body-lg { color: rgba(255, 255, 255, 0.78); }

.hospitality-flagship__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.hospitality-flagship__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--eie-text-body);
  color: rgba(255, 255, 255, 0.85);
}
.hospitality-flagship__feature::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--eie-radius-pill);
  background-color: var(--eie-gold);
}

.hospitality-flagship__visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
  border-radius: var(--eie-radius-card);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 162, 74, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hospitality-flagship__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}
.hospitality-flagship__stat:last-child { border-block-end: none; }
.hospitality-flagship__stat-label {
  font-size: var(--eie-text-small);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hospitality-flagship__stat-label:lang(ar) { letter-spacing: 0; text-transform: none; }
.hospitality-flagship__stat-value {
  font-family: var(--eie-font-display);
  font-size: var(--eie-text-h3);
  font-weight: 700;
  color: var(--eie-gold);
}


/* =============================================================================
   26. SOFTWARE/PRODUCTS — enhanced product cards on dark alt background
   ============================================================================= */

.section--products {
  background: linear-gradient(175deg, var(--eie-grey-50) 0%, var(--eie-white) 100%);
  position: relative;
}
.section--products::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(10, 31, 61, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(245, 166, 35, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.product-card--enhanced {
  position: relative;
  padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  border-radius: var(--eie-radius-card);
  background: var(--eie-white);
  border: 1px solid var(--eie-grey-100);
  box-shadow: var(--eie-shadow-card);
  overflow: hidden;
  transition:
    transform var(--eie-duration-base) var(--eie-ease-out),
    box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.product-card--enhanced::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--eie-orange), var(--eie-navy-700));
  opacity: 0;
  transition: opacity var(--eie-duration-base) var(--eie-ease-out);
}
.product-card--enhanced:hover {
  transform: translateY(-6px);
  box-shadow: var(--eie-shadow-elegant);
}
.product-card--enhanced:hover::before { opacity: 1; }

.product-card--enhanced .card-item__icon {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--eie-navy), var(--eie-navy-700));
  color: var(--eie-orange);
  margin-block-end: 1.25rem;
}
.product-card--enhanced .card-item__title {
  font-size: var(--eie-text-h3);
  margin-block: 0 0.5rem;
}
.product-card--enhanced .card-item__text {
  color: var(--eie-grey-600);
  line-height: 1.6;
}
.product-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 1rem;
  padding-block: 0.25rem;
  padding-inline: 0.625rem;
  border-radius: var(--eie-radius-pill);
  background-color: rgba(10, 31, 61, 0.04);
  border: 1px solid var(--eie-grey-100);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--eie-navy);
  letter-spacing: 0.04em;
}
.product-card__badge:lang(ar) { letter-spacing: 0; }
.product-card__badge::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--eie-radius-pill);
  background-color: var(--eie-orange);
}


/* =============================================================================
   27. ENHANCED CTA BAND — stronger visual with urgency elements
   ============================================================================= */

.cta-band--premium {
  padding: clamp(3rem, 2.5rem + 4vw, 5.5rem);
  border-radius: var(--eie-radius-cta);
  background: linear-gradient(135deg, var(--eie-navy-deep) 0%, var(--eie-navy) 40%, var(--eie-navy-700) 100%);
  box-shadow:
    0 0 80px -16px rgba(245, 166, 35, 0.25),
    0 40px 80px -30px rgba(10, 31, 61, 0.5);
}
.cta-band--premium .t-h2 { font-size: var(--eie-text-h1); }
.cta-band--premium .t-body-lg { max-inline-size: 44ch; }

.cta-band__detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-block-start: 1rem;
  font-size: var(--eie-text-small);
  color: rgba(255, 255, 255, 0.55);
}
.cta-band__detail-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.cta-band__detail-item::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--eie-radius-pill);
  background-color: var(--eie-orange);
  opacity: 0.6;
}


/* =============================================================================
   28. HERO ENHANCEMENTS — stronger presence + decorative compositing
   ============================================================================= */

.page-hero--home {
  padding-block: clamp(6rem, 4rem + 9vw, 12rem) clamp(4rem, 3rem + 5vw, 7rem);
}
.page-hero--home .t-display {
  font-size: clamp(3rem, 1.75rem + 4vw, 4.5rem);
  max-inline-size: 18ch;
}
.page-hero--home .t-body-lg {
  max-inline-size: 48ch;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
}

/* Second glow for stronger depth on home hero */
.page-hero--home::after {
  inline-size: 40rem;
  block-size: 40rem;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.14), transparent 65%);
  filter: blur(60px);
}

/* Subtle floating line decoration (desktop only, decorative) */
.page-hero__line-decor {
  display: none;
  position: absolute;
  inset-block-start: 20%;
  inset-inline-end: 8%;
  inline-size: 200px;
  block-size: 200px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2rem;
  transform: rotate(15deg);
  pointer-events: none;
  z-index: 0;
}
.page-hero__line-decor::after {
  content: "";
  position: absolute;
  inset: 2rem;
  border: 1px solid rgba(245, 166, 35, 0.1);
  border-radius: 1.5rem;
  transform: rotate(-8deg);
}
@media (min-width: 64rem) { .page-hero__line-decor { display: block; } }


/* =============================================================================
   29. PREMIUM HERO — asymmetric layout with capability-stack visual
   ============================================================================= */

.premium-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70rem 50rem at 78% 35%, rgba(245, 166, 35, 0.14), transparent 55%),
    radial-gradient(50rem 40rem at 12% 75%, rgba(245, 166, 35, 0.05), transparent 55%),
    radial-gradient(60rem 50rem at 50% -10%, rgba(95, 130, 200, 0.08), transparent 60%),
    linear-gradient(180deg, #04101f 0%, var(--eie-navy-deep) 35%, var(--eie-navy) 100%);
  color: var(--eie-white);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
}
.premium-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.premium-hero__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  filter: saturate(112%) contrast(108%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 35%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 35%, rgba(0,0,0,1) 100%);
  opacity: 0;
  will-change: transform, opacity;
}
.premium-hero__photo--1 {
  background-image: url("../img/hero-bg.png"); /* fallback for no image-set() support */
  background-image: image-set( url("../img/hero-bg.avif") type("image/avif"), url("../img/hero-bg.webp") type("image/webp"), url("../img/hero-bg.png") type("image/png") );
  opacity: 0.6;
}
.premium-hero__photo--2 {
  background-image: url("../img/hero-bg-2.png");
  background-image: image-set( url("../img/hero-bg-2.avif") type("image/avif"), url("../img/hero-bg-2.webp") type("image/webp"), url("../img/hero-bg-2.png") type("image/png") );
}
.premium-hero__photo--3 {
  background-image: url("../img/hero-bg-3.png");
  background-image: image-set( url("../img/hero-bg-3.avif") type("image/avif"), url("../img/hero-bg-3.webp") type("image/webp"), url("../img/hero-bg-3.png") type("image/png") );
}

[dir="rtl"] .premium-hero__photo {
  background-position: center left;
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 35%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(270deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 35%, rgba(0,0,0,1) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  /* 30s carousel: each image gets the active 10s window with overlap fade. */
  .premium-hero__photo--1 { animation: hero-carousel-1 30s ease-in-out infinite; }
  .premium-hero__photo--2 { animation: hero-carousel-2 30s ease-in-out infinite; }
  .premium-hero__photo--3 { animation: hero-carousel-3 30s ease-in-out infinite; }
}

/* Each keyframe sequence:
   - opacity rises from 0 to 0.6 during its slot, then fades back to 0
   - transform scales 1.05 -> 1.18 over the slot for cinematic Ken Burns drift */
@keyframes hero-carousel-1 {
  0%   { opacity: 0.6; transform: scale(1.05) translate3d(0, 0, 0); }
  30%  { opacity: 0.6; transform: scale(1.15) translate3d(-1.5%, -0.75%, 0); }
  37%  { opacity: 0;    transform: scale(1.16) translate3d(-1.6%, -0.8%, 0); }
  93%  { opacity: 0;    transform: scale(1.05) translate3d(0, 0, 0); }
  100% { opacity: 0.6; transform: scale(1.05) translate3d(0, 0, 0); }
}
@keyframes hero-carousel-2 {
  0%   { opacity: 0;    transform: scale(1.05) translate3d(1.5%, 0, 0); }
  30%  { opacity: 0;    transform: scale(1.06) translate3d(1.4%, 0, 0); }
  37%  { opacity: 0.6; transform: scale(1.07) translate3d(1.3%, 0, 0); }
  63%  { opacity: 0.6; transform: scale(1.18) translate3d(0, -1%, 0); }
  70%  { opacity: 0;    transform: scale(1.18) translate3d(0, -1%, 0); }
  100% { opacity: 0;    transform: scale(1.05) translate3d(1.5%, 0, 0); }
}
@keyframes hero-carousel-3 {
  0%   { opacity: 0;    transform: scale(1.05) translate3d(0, 1%, 0); }
  63%  { opacity: 0;    transform: scale(1.06) translate3d(0, 0.9%, 0); }
  70%  { opacity: 0.6; transform: scale(1.07) translate3d(0, 0.8%, 0); }
  93%  { opacity: 0.6; transform: scale(1.18) translate3d(1%, -0.5%, 0); }
  100% { opacity: 0;    transform: scale(1.18) translate3d(1%, -0.5%, 0); }
}
/* Mobile: fetch only the first hero photo — skip the 2nd/3rd carousel images
   (display:none prevents their download) and freeze it static. One ~70KB asset,
   not three. Comes after the carousel block so animation:none wins. */
@media (max-width: 767px) {
  .premium-hero__photo--2,
  .premium-hero__photo--3 { display: none; }
  .premium-hero__photo--1 { animation: none; opacity: 0.6; }
}

.premium-hero__photo-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 16, 31, 0.78) 0%, rgba(4, 16, 31, 0.55) 35%, rgba(4, 16, 31, 0.32) 70%, rgba(4, 16, 31, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 16, 31, 0.4) 0%, transparent 30%, transparent 70%, rgba(4, 16, 31, 0.55) 100%);
}
[dir="rtl"] .premium-hero__photo-tint {
  background:
    linear-gradient(270deg, rgba(4, 16, 31, 0.78) 0%, rgba(4, 16, 31, 0.55) 35%, rgba(4, 16, 31, 0.32) 70%, rgba(4, 16, 31, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 16, 31, 0.4) 0%, transparent 30%, transparent 70%, rgba(4, 16, 31, 0.55) 100%);
}
.premium-hero__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 100% 90% at 50% 50%, #000 35%, transparent 85%);
}
.premium-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.9;
  will-change: transform, opacity;
}
.premium-hero__glow--1 {
  inset-block-start: -8%;
  inset-inline-end: 5%;
  inline-size: 36rem;
  block-size: 36rem;
  background: rgba(245, 166, 35, 0.22);
}
.premium-hero__glow--2 {
  inset-block-end: -25%;
  inset-inline-start: -8%;
  inline-size: 32rem;
  block-size: 32rem;
  background: rgba(10, 31, 61, 0.6);
}
.premium-hero__glow--3 {
  inset-block-start: 40%;
  inset-inline-end: 25%;
  inline-size: 18rem;
  block-size: 18rem;
  background: rgba(245, 166, 35, 0.12);
}
.premium-hero__glow--4 {
  inset-block-start: 25%;
  inset-inline-start: -6%;
  inline-size: 22rem;
  block-size: 22rem;
  background: rgba(245, 166, 35, 0.08);
}
@media (prefers-reduced-motion: no-preference) {
  .premium-hero__glow--1 { animation: hero-glow-breathe-a 12s ease-in-out infinite alternate; }
  .premium-hero__glow--2 { animation: hero-glow-breathe-b 16s ease-in-out infinite alternate; }
  .premium-hero__glow--3 { animation: hero-glow-breathe-c 9s ease-in-out infinite alternate; }
  .premium-hero__glow--4 { animation: hero-glow-breathe-d 14s ease-in-out infinite alternate; }
}
@keyframes hero-glow-breathe-a {
  from { opacity: 0.7; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(-1.5rem, 1rem, 0) scale(1.08); }
}
@keyframes hero-glow-breathe-b {
  from { opacity: 0.6; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0.95; transform: translate3d(2rem, -1rem, 0) scale(1.12); }
}
@keyframes hero-glow-breathe-c {
  from { opacity: 0.5; transform: translate3d(0, 0, 0) scale(0.95); }
  to   { opacity: 1;   transform: translate3d(-0.75rem, -1.25rem, 0) scale(1.15); }
}
@keyframes hero-glow-breathe-d {
  from { opacity: 0.55; transform: translate3d(0, 0, 0) scale(0.95); }
  to   { opacity: 0.95; transform: translate3d(1.25rem, -0.5rem, 0) scale(1.1); }
}

/* Floating particle layer */
.premium-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.5px at 12% 18%, rgba(245, 166, 35, 0.55) 0, transparent 1.6px),
    radial-gradient(circle 1px at 88% 9%, rgba(255, 255, 255, 0.35) 0, transparent 1.2px),
    radial-gradient(circle 1.5px at 24% 78%, rgba(245, 166, 35, 0.4) 0, transparent 1.6px),
    radial-gradient(circle 1px at 60% 92%, rgba(255, 255, 255, 0.4) 0, transparent 1.2px),
    radial-gradient(circle 1.5px at 73% 32%, rgba(245, 166, 35, 0.5) 0, transparent 1.6px),
    radial-gradient(circle 1px at 38% 48%, rgba(255, 255, 255, 0.3) 0, transparent 1.2px),
    radial-gradient(circle 1px at 92% 60%, rgba(245, 166, 35, 0.45) 0, transparent 1.2px),
    radial-gradient(circle 1.5px at 6% 55%, rgba(255, 255, 255, 0.3) 0, transparent 1.6px);
  background-size: 100% 100%;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .premium-hero__bg::after {
    animation: hero-particles-rise 24s linear infinite;
    will-change: transform, opacity;
  }
}
@keyframes hero-particles-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.85; }
  50%  { opacity: 0.5; }
  100% { transform: translate3d(0.6%, -3%, 0); opacity: 0.85; }
}
.premium-hero__circuit {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0.7;
}
.premium-hero__inner {
  position: relative;
  z-index: 1;
}

/* Layout: asymmetric on desktop, stacked on mobile */
.premium-hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .premium-hero__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.premium-hero__content {
  position: relative;
  max-inline-size: 38rem;
}

/* Eyebrow with leading dot */
.premium-hero__content .eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.45rem 0.95rem;
  margin-block-end: 1.5rem;
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid rgba(245, 166, 35, 0.22);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(245, 166, 35, 0.95);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 30rem) {
  .premium-hero__content .eyebrow {
    display: flex;
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    max-inline-size: 100%;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.75rem;
  }
}
.eyebrow__dot {
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: var(--eie-orange);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.18);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow__dot {
    animation: hero-dot-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes hero-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4), 0 0 0 4px rgba(245, 166, 35, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(245, 166, 35, 0), 0 0 0 4px rgba(245, 166, 35, 0.18); }
}

/* Headline */
.premium-hero__title {
  font-size: clamp(2.1rem, 1.5rem + 4vw, 4.25rem);
  line-height: 1.04;
  margin: 0 0 1.5rem;
  text-wrap: balance;
  letter-spacing: -0.025em;
  color: var(--eie-white);
  font-weight: 800;
}
.premium-hero__title-grad {
  background: linear-gradient(135deg, #ffd089 0%, var(--eie-orange) 45%, #ffaf3a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.premium-hero__title-faint {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  font-size: 0.85em;
  margin-block-start: 0.25rem;
}

.premium-hero__lead {
  margin-block-end: 2rem;
  max-inline-size: 38rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  line-height: 1.65;
}

.premium-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-block-end: 2.25rem;
}
@media (max-width: 36rem) {
  .premium-hero__actions { flex-direction: column; align-items: stretch; }
  .premium-hero__actions .btn { inline-size: 100%; text-align: center; justify-content: center; }
}

/* Proof chips below CTAs */
.premium-hero__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.premium-hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--eie-font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.premium-hero__chip-mark {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.85);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.4);
}

/* Right-column visual: capability stack */
.premium-hero__visual {
  position: relative;
  display: none;
}
@media (min-width: 64rem) {
  .premium-hero__visual { display: block; }
}
.hero-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem;
}
.hero-stack__halo {
  position: absolute;
  inset: -2rem;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(245, 166, 35, 0.12) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.hero-stack__beam {
  position: absolute;
  inset-block: 1.5rem;
  inset-inline-start: 2.5rem;
  inline-size: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(245, 166, 35, 0.5) 12%,
    rgba(245, 166, 35, 0.5) 88%,
    transparent 100%);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stack__beam::after {
    content: "";
    position: absolute;
    inset-inline: -1px;
    inset-block-start: 0;
    block-size: 25%;
    background: linear-gradient(180deg, rgba(255, 220, 150, 0) 0%, rgba(255, 220, 150, 0.95) 50%, rgba(255, 220, 150, 0) 100%);
    border-radius: 2px;
    animation: hero-beam-flow 3.5s ease-in-out infinite;
  }
}
@keyframes hero-beam-flow {
  0%   { transform: translateY(-25%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(400%); opacity: 0; }
}
.hero-stack__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.875rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 32px -12px rgba(0, 0, 0, 0.4);
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              border-color var(--eie-duration-base) var(--eie-ease-out),
              background var(--eie-duration-base) var(--eie-ease-out);
}
.hero-stack__card:hover {
  border-color: rgba(245, 166, 35, 0.35);
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}
/* Stagger horizontally for depth */
.hero-stack__card--1 { margin-inline-end: 2rem; }
.hero-stack__card--2 { margin-inline-end: 0.5rem; margin-inline-start: 0.75rem; }
.hero-stack__card--3 { margin-inline-end: 1.5rem; margin-inline-start: 0.25rem; }
.hero-stack__card--4 { margin-inline-end: 0; margin-inline-start: 1.25rem; }

.hero-stack__card-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-stack__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.18) 0%, rgba(245, 166, 35, 0.06) 100%);
  border: 1px solid rgba(245, 166, 35, 0.3);
  font-family: var(--eie-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--eie-orange);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  z-index: 1;
}
.hero-stack__label {
  font-family: var(--eie-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--eie-white);
  letter-spacing: -0.01em;
}
.hero-stack__card-bars {
  display: flex;
  gap: 0.4rem;
  padding-inline-start: 3.25rem;
}
.hero-stack__card-bars span {
  block-size: 0.3rem;
  border-radius: 0.15rem;
  background: rgba(255, 255, 255, 0.08);
  flex: 1;
}
.hero-stack__card-bars span:nth-child(1) { background: rgba(245, 166, 35, 0.35); flex: 2; }
.hero-stack__card-bars span:nth-child(2) { background: rgba(245, 166, 35, 0.18); flex: 1.4; }
.hero-stack__card-bars span:nth-child(3) { background: rgba(255, 255, 255, 0.06); flex: 1; }

@media (prefers-reduced-motion: no-preference) {
  .premium-hero__circuit g[fill] circle {
    animation: hero-node-blink 3.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  .premium-hero__circuit g[fill] circle:nth-child(2)  { animation-delay: 0.3s; }
  .premium-hero__circuit g[fill] circle:nth-child(3)  { animation-delay: 0.6s; }
  .premium-hero__circuit g[fill] circle:nth-child(4)  { animation-delay: 0.9s; }
  .premium-hero__circuit g[fill] circle:nth-child(5)  { animation-delay: 1.2s; }
  .premium-hero__circuit g[fill] circle:nth-child(6)  { animation-delay: 1.5s; }
  .premium-hero__circuit g[fill] circle:nth-child(7)  { animation-delay: 1.8s; }
  .premium-hero__circuit g[fill] circle:nth-child(8)  { animation-delay: 2.1s; }
  .premium-hero__circuit g[fill] circle:nth-child(9)  { animation-delay: 2.4s; }
  .premium-hero__circuit g[fill] circle:nth-child(10) { animation-delay: 2.7s; }
}
@keyframes hero-node-blink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}


/* =============================================================================
   30. PROOF STRIP — safe factual chips (no fake stats)
   ============================================================================= */

.proof-strip {
  background: linear-gradient(180deg, #050d1a 0%, var(--eie-navy-deep) 100%);
  color: var(--eie-white);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-block-end: 1px solid rgba(245, 166, 35, 0.15);
}
.proof-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 48rem) {
  .proof-strip__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .proof-strip__grid { grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
}
.proof-strip__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.625rem;
  border-radius: var(--eie-radius-card, 12px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  min-inline-size: 0;
  transition: border-color var(--eie-duration-base) var(--eie-ease-out),
              background var(--eie-duration-base) var(--eie-ease-out);
}
.proof-strip__chip:hover {
  border-color: rgba(245, 166, 35, 0.25);
  background: rgba(245, 166, 35, 0.04);
}
.proof-strip__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--eie-orange);
  flex-shrink: 0;
}
.proof-strip__label {
  font-family: var(--eie-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
  inline-size: 100%;
}
@media (max-width: 30rem) {
  .proof-strip__label { font-size: 0.75rem; }
}


/* =============================================================================
   31. SOLUTIONS GRID — premium 7-card service layout
   ============================================================================= */

.solutions-grid {
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
}
.solutions-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 36rem) {
  .solutions-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .solutions-grid__cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
@media (min-width: 80rem) {
  .solutions-grid__cards { grid-template-columns: repeat(4, 1fr); }
}
.solutions-grid__card {
  position: relative;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-radius: var(--eie-radius-card, 12px);
  border: 1px solid var(--eie-grey-100, #e2e8f0);
  background: var(--eie-white);
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              border-color var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
  overflow: hidden;
}
.solutions-grid__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--eie-orange) 30%, var(--eie-orange) 70%, transparent);
  opacity: 0;
  transition: opacity var(--eie-duration-base) var(--eie-ease-out);
}
.solutions-grid__card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, 0.35);
  box-shadow: 0 16px 48px -12px rgba(10, 31, 61, 0.12);
}
.solutions-grid__card:hover::before { opacity: 1; }
.solutions-grid__card-icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--eie-orange);
  margin-block-end: 1rem;
}
.solutions-grid__card-icon svg {
  width: 100%;
  height: 100%;
}
.solutions-grid__card-title {
  font-family: var(--eie-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--eie-navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.solutions-grid__card-desc {
  font-size: 0.875rem;
  color: var(--eie-grey-600, #4a5568);
  line-height: 1.55;
  margin: 0 0 1rem;
}
.solutions-grid__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.solutions-grid__tag {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.2);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--eie-orange-deep, #9c5b00);
  white-space: nowrap;
}


/* =============================================================================
   32. SECTORS GRID — premium 8-sector tile layout
   ============================================================================= */

.sectors-grid {
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
}
.section--alt {
  background-color: var(--eie-grey-50, #f8fafc);
}
.sectors-grid__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 48rem) {
  .sectors-grid__tiles { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (min-width: 64rem) {
  .sectors-grid__tiles { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
.sectors-grid__tile {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
  border-radius: var(--eie-radius-card, 12px);
  border: 1px solid var(--eie-grey-100, #e2e8f0);
  background: var(--eie-white);
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              border-color var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
  text-align: center;
}
.sectors-grid__tile:focus-visible {
  outline: 2px solid var(--eie-orange);
  outline-offset: 3px;
}
.sectors-grid__tile:hover .sectors-grid__tile-title {
  color: var(--eie-orange);
}
.sectors-grid__tile:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, 0.3);
  box-shadow: 0 12px 36px -8px rgba(10, 31, 61, 0.1);
}
.sectors-grid__tile-icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--eie-orange);
  margin-inline: auto;
  margin-block-end: 0.75rem;
}
.sectors-grid__tile-icon svg {
  width: 100%;
  height: 100%;
}
.sectors-grid__tile-title {
  font-family: var(--eie-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--eie-navy);
  margin: 0 0 0.375rem;
}
.sectors-grid__tile-desc {
  font-size: 0.8125rem;
  color: var(--eie-grey-600, #4a5568);
  line-height: 1.45;
  margin: 0;
}


/* =============================================================================
   33. MISSION-CRITICAL SECTION — dark why-EIE section
   ============================================================================= */

.mission-critical {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60rem 40rem at 30% 50%, rgba(245, 166, 35, 0.06), transparent 60%),
    linear-gradient(180deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  color: var(--eie-white);
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
}
.mission-critical::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mission-critical__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .mission-critical__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}
.mission-critical__copy {
  max-inline-size: 32rem;
}
.mission-critical .t-h2 {
  color: var(--eie-white);
  margin-block-end: 1rem;
}
.mission-critical .t-body-lg {
  color: rgba(255, 255, 255, 0.78);
}
.mission-critical__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 36rem) {
  .mission-critical__grid { grid-template-columns: repeat(2, 1fr); }
}
.mission-critical__card {
  padding: 1.25rem;
  border-radius: var(--eie-radius-card, 12px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color var(--eie-duration-base) var(--eie-ease-out),
              background var(--eie-duration-base) var(--eie-ease-out);
}
.mission-critical__card:hover {
  border-color: rgba(245, 166, 35, 0.3);
  background: rgba(245, 166, 35, 0.05);
}
.mission-critical__card-icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--eie-orange);
  margin-block-end: 0.75rem;
}
.mission-critical__card-icon svg {
  width: 100%;
  height: 100%;
}
.mission-critical__card-title {
  font-family: var(--eie-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--eie-white);
  margin: 0 0 0.375rem;
}
.mission-critical__card-desc {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}


/* =============================================================================
   34. TECHNOLOGY ECOSYSTEM — neutral capability categories
   ============================================================================= */

.tech-ecosystem {
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
}
.tech-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 48rem) {
  .tech-ecosystem__grid { grid-template-columns: repeat(4, 1fr); }
}
.tech-ecosystem__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border-radius: var(--eie-radius-card, 12px);
  border: 1px solid var(--eie-grey-100, #e2e8f0);
  background: var(--eie-white);
  text-align: center;
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              border-color var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.tech-ecosystem__item:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, 0.25);
  box-shadow: 0 8px 24px -8px rgba(10, 31, 61, 0.08);
}
.tech-ecosystem__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--eie-orange);
}
.tech-ecosystem__icon svg {
  width: 100%;
  height: 100%;
}
.tech-ecosystem__label {
  font-family: var(--eie-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--eie-navy);
}


/* =============================================================================
   35. OUTCOMES SECTION — capability scenarios (not fake case studies)
   ============================================================================= */

.outcomes-section {
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
}
.outcomes-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 48rem) {
  .outcomes-section__grid { grid-template-columns: repeat(2, 1fr); }
}
.outcomes-section__card {
  border-radius: var(--eie-radius-card, 12px);
  overflow: hidden;
  border: 1px solid var(--eie-grey-100, #e2e8f0);
  background: var(--eie-white);
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.outcomes-section__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px -12px rgba(10, 31, 61, 0.12);
}
.outcomes-section__card-visual {
  position: relative;
  block-size: 8rem;
  overflow: hidden;
}
.outcomes-section__card-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.outcomes-section__card--gold .outcomes-section__card-visual {
  background: linear-gradient(135deg, var(--eie-navy) 0%, rgba(200, 162, 74, 0.3) 100%);
}
.outcomes-section__card--blue .outcomes-section__card-visual {
  background: linear-gradient(135deg, var(--eie-navy-deep) 0%, rgba(59, 130, 246, 0.3) 100%);
}
.outcomes-section__card--orange .outcomes-section__card-visual {
  background: linear-gradient(135deg, var(--eie-navy) 0%, rgba(245, 166, 35, 0.3) 100%);
}
.outcomes-section__card--navy .outcomes-section__card-visual {
  background: linear-gradient(135deg, #0d2347 0%, rgba(10, 31, 61, 0.8) 100%);
}
.outcomes-section__card-body {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.outcomes-section__card-title {
  font-family: var(--eie-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--eie-navy);
  margin: 0 0 0.5rem;
}
.outcomes-section__card-desc {
  font-size: 0.875rem;
  color: var(--eie-grey-600, #4a5568);
  line-height: 1.55;
  margin: 0;
}


/* =============================================================================
   36. FINAL CTA — premium light closing block (white background, navy copy)
   ============================================================================= */

.final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(50rem 30rem at 50% 100%, rgba(245, 166, 35, 0.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--eie-grey-50, #f4f6fa) 100%);
  color: var(--eie-navy);
  padding-block: clamp(5rem, 4rem + 5vw, 8rem);
  text-align: center;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(10, 31, 61, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 31, 61, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 75%);
  pointer-events: none;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 20%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 166, 35, 0.4) 50%, transparent 100%);
  pointer-events: none;
}
.final-cta .t-h2 {
  color: var(--eie-navy);
  margin-block-end: 1rem;
  letter-spacing: -0.025em;
}
.final-cta .t-body-lg {
  color: var(--eie-grey-600, #475569);
  max-inline-size: 40rem;
  margin-inline: auto;
  margin-block-end: 2rem;
}
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (max-width: 36rem) {
  .final-cta__actions { flex-direction: column; align-items: stretch; }
  .final-cta__actions .btn { inline-size: 100%; text-align: center; justify-content: center; }
}

/* Light-variant secondary button: navy on white (replaces white-on-navy default) */
.final-cta--light .btn-secondary {
  background-color: rgba(10, 31, 61, 0.04);
  border-color: rgba(10, 31, 61, 0.18);
  color: var(--eie-navy);
}
.final-cta--light .btn-secondary:hover {
  background-color: rgba(10, 31, 61, 0.08);
  border-color: var(--eie-orange);
  color: var(--eie-navy);
}


/* =============================================================================
   37. SECTION UTILITY CLASSES
   ============================================================================= */

.section {
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.section--tight {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.section--navy {
  background: linear-gradient(180deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  color: var(--eie-white);
}
.section-intro--centered {
  text-align: center;
  max-inline-size: 48rem;
  margin-inline: auto;
  margin-block-end: 0;
}


/* =============================================================================
   38. HEADER / NAVIGATION — premium sticky with fallback links
   ============================================================================= */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  background: rgba(5, 13, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--eie-duration-base) var(--eie-ease-out);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.875rem;
}
.site-header__nav .menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}
@media (min-width: 64rem) {
  .site-header__nav .menu {
    display: flex;
    align-items: center;
  }
}
.site-header__nav .menu-item a {
  display: block;
  padding: 0.5rem 0.875rem;
  font-family: var(--eie-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: color var(--eie-duration-fast) var(--eie-ease-out),
              background var(--eie-duration-fast) var(--eie-ease-out);
}
.site-header__nav .menu-item a:hover {
  color: var(--eie-white);
  background: rgba(255, 255, 255, 0.06);
}
.site-header__cta {
  margin-inline-start: auto;
}
@media (max-width: 63.99rem) {
  .site-header__cta { display: none; }
}


/* =============================================================================
   39. MOBILE DRAWER
   ============================================================================= */

.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5, 13, 26, 0.98);
  padding: 5rem 2rem 2rem;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}
.mobile-drawer[aria-expanded="true"] {
  display: flex;
}
.mobile-drawer .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-drawer .menu-item a {
  display: block;
  padding: 1rem 1.25rem;
  font-family: var(--eie-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 0.75rem;
  transition: background var(--eie-duration-fast) var(--eie-ease-out);
}
.mobile-drawer .menu-item a:hover {
  background: rgba(255, 255, 255, 0.06);
}


/* =============================================================================
   40. PREMIUM CTA BUTTONS (overrides / enhancements)
   ============================================================================= */

.btn-primary.btn-xl {
  background: linear-gradient(135deg, var(--eie-orange) 0%, var(--eie-orange-600) 100%);
  box-shadow: 0 4px 20px -4px rgba(245, 166, 35, 0.4);
  transition: transform var(--eie-duration-fast) var(--eie-ease-out),
              box-shadow var(--eie-duration-fast) var(--eie-ease-out),
              filter var(--eie-duration-fast) var(--eie-ease-out);
}
.btn-primary.btn-xl:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px -4px rgba(245, 166, 35, 0.55);
  filter: brightness(1.05);
}


/* =============================================================================
   41. EYEBROW UTILITY
   ============================================================================= */

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--eie-text-eyebrow, 0.75rem);
  font-weight: 600;
  /* Text colour stays the navy from the §7 pill recipe — bright orange is
     ~1.9:1 on the translucent pill over light surfaces (SC 1.4.3 fail).
     Orange text is reserved for .eyebrow--dark / .on-navy contexts. */
  margin-block-end: 0.75rem;
}
.eyebrow:lang(ar) {
  text-transform: none;
  letter-spacing: 0;
}
.eyebrow--dark {
  color: rgba(245, 166, 35, 0.9);
}


/* =============================================================================
   42. TYPOGRAPHY HELPERS
   ============================================================================= */

.t-body-lg {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--eie-grey-600, #4a5568);
}
.section--navy .t-body-lg,
.on-navy .t-body-lg {
  color: rgba(255, 255, 255, 0.78);
}


/* =============================================================================
   43. FOOTER PREMIUM ENHANCEMENTS
   ============================================================================= */

.site-footer__office {
  position: relative;
  padding-block: 0.5rem;
}
.site-footer__office + .site-footer__office::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: rgba(255, 255, 255, 0.1);
}


/* =============================================================================
   44. INTEGRATION FABRIC — center platform + 6 orbital nodes (signature section)
   ============================================================================= */

.integration-fabric {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(50rem 40rem at 50% 50%, rgba(245, 166, 35, 0.08), transparent 70%),
    linear-gradient(180deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  color: var(--eie-white);
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
  overflow: hidden;
}
.integration-fabric::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.integration-fabric__inner {
  position: relative;
  z-index: 1;
}
.integration-fabric__heading {
  text-align: center;
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block-end: 2.5rem;
}
.integration-fabric__heading .t-h2 {
  color: var(--eie-white);
}
.integration-fabric__heading .t-body-lg {
  color: rgba(255, 255, 255, 0.78);
  max-inline-size: 48rem;
  margin-inline: auto;
}
.integration-fabric__diagram {
  display: block;
  inline-size: 100%;
  max-inline-size: 56rem;
  margin-inline: auto;
  block-size: auto;
}
.integration-fabric__bullets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block-start: 2.5rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .integration-fabric__bullets { grid-template-columns: repeat(3, 1fr); }
}
.integration-fabric__bullet {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  padding-inline-start: 1.25rem;
  position: relative;
}
.integration-fabric__bullet::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--eie-orange);
}
.integration-fabric__cta {
  display: flex;
  justify-content: center;
  margin-block-start: 2rem;
}

/* Integration diagram SVG classes */
.integration-diagram__bg-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.integration-diagram__connector {
  fill: none;
  stroke: rgba(245, 166, 35, 0.45);
  stroke-width: 1.25;
  stroke-linecap: round;
}
.integration-diagram__node {
  fill: var(--eie-navy-deep);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}
.integration-diagram__node-icon {
  fill: none;
  stroke: var(--eie-orange);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.integration-diagram__node-label {
  font-family: var(--eie-font-display);
  font-size: 10px;
  font-weight: 600;
  fill: rgba(255, 255, 255, 0.85);
  text-anchor: middle;
}
.integration-diagram__node-label:lang(ar) {
  font-family: var(--eie-font-arabic);
}
.integration-diagram__core-bg {
  fill: rgba(245, 166, 35, 0.06);
  stroke: rgba(245, 166, 35, 0.2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.integration-diagram__core {
  fill: url(#eie-core-fill);
  stroke: rgba(245, 166, 35, 0.55);
  stroke-width: 1.5;
}
.integration-diagram__core-accent {
  fill: var(--eie-orange);
}
.integration-diagram__core-label {
  font-family: var(--eie-font-display);
  font-size: 11px;
  font-weight: 700;
  fill: var(--eie-white);
  text-anchor: middle;
  letter-spacing: 0.04em;
}
.integration-diagram__core-label:lang(ar) {
  font-family: var(--eie-font-arabic);
  letter-spacing: 0;
}
.integration-diagram__core-mark {
  font-family: var(--eie-font-display);
  font-size: 8px;
  font-weight: 600;
  fill: var(--eie-orange);
  text-anchor: middle;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.integration-diagram__core-mark:lang(ar) {
  font-family: var(--eie-font-arabic);
  letter-spacing: 0;
  text-transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .integration-diagram__connector {
    stroke-dasharray: 4 6;
    animation: fabric-flow 4s linear infinite;
  }
}
@keyframes fabric-flow {
  to { stroke-dashoffset: -40; }
}


/* =============================================================================
   45. HOSPITALITY FLAGSHIP — gold accent, premium dark variant
   ============================================================================= */

.hospitality-flagship {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--eie-navy-deep) 0%, var(--eie-navy) 50%, #08182f 100%);
  color: var(--eie-white);
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.hospitality-flagship__photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../img/hospitality-atmosphere.png"); /* fallback for no image-set() support */
  background-image: image-set( url("../img/hospitality-atmosphere.avif") type("image/avif"), url("../img/hospitality-atmosphere.webp") type("image/webp"), url("../img/hospitality-atmosphere.png") type("image/png") );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  filter: saturate(105%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.5) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hospitality-flagship__photo {
    animation: hospitality-photo-drift 36s ease-in-out infinite alternate;
  }
}
@keyframes hospitality-photo-drift {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.1) translate3d(1.2%, -1%, 0); }
}
.hospitality-flagship__photo-tint {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(170deg, rgba(6, 21, 43, 0.85) 0%, rgba(10, 31, 61, 0.6) 50%, rgba(8, 24, 47, 0.85) 100%);
  pointer-events: none;
}
.hospitality-flagship::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(200, 162, 74, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 162, 74, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%);
  pointer-events: none;
}
.hospitality-flagship::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -10%;
  inset-inline-start: -5%;
  inline-size: 28rem;
  block-size: 28rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(200, 162, 74, 0.12), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}
.hospitality-flagship__inner {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hospitality-flagship__inner { grid-template-columns: 1fr 1fr; }
}
.hospitality-flagship__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.hospitality-flagship .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.4rem 0.9rem;
  background-color: rgba(200, 162, 74, 0.08);
  border: 1px solid rgba(200, 162, 74, 0.25);
  border-radius: 999px;
  color: rgba(200, 162, 74, 0.95);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hospitality-flagship .eyebrow:lang(ar) {
  letter-spacing: 0;
  text-transform: none;
}
.hospitality-flagship .t-h2 {
  color: var(--eie-white);
  margin: 0;
}
.hospitality-flagship .t-body-lg {
  color: rgba(255, 255, 255, 0.78);
}
.hospitality-flagship__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.hospitality-flagship__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}
.hospitality-flagship__feature::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background-color: #c8a24a;
}
.hospitality-flagship__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-block-start: 0.5rem;
}
.hospitality-flagship__visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 162, 74, 0.15);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}


/* =============================================================================
   46. HOTEL SYSTEMS DIAGRAM — for Hospitality flagship visual column
   ============================================================================= */

.hotel-diagram {
  inline-size: 100%;
  block-size: auto;
  display: block;
}
.hotel-diagram__building {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.2;
}
.hotel-diagram__floor-line {
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.hotel-diagram__hotspot {
  fill: #c8a24a;
}
.hotel-diagram__hotspot-halo {
  fill: rgba(200, 162, 74, 0.18);
}
.hotel-diagram__label {
  font-family: var(--eie-font-display);
  font-size: 9px;
  font-weight: 600;
  fill: rgba(255, 255, 255, 0.85);
}
.hotel-diagram__label:lang(ar) {
  font-family: var(--eie-font-arabic);
}
.hotel-diagram__caption {
  font-family: var(--eie-font-display);
  font-size: 8px;
  font-weight: 600;
  fill: #c8a24a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hotel-diagram__caption:lang(ar) {
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--eie-font-arabic);
}
@media (prefers-reduced-motion: no-preference) {
  .hotel-diagram__hotspot-halo {
    transform-origin: center;
    animation: hotel-halo 3.5s ease-in-out infinite;
  }
  .hotel-diagram__hotspot-halo:nth-of-type(2n) { animation-delay: 0.7s; }
  .hotel-diagram__hotspot-halo:nth-of-type(3n) { animation-delay: 1.4s; }
}
@keyframes hotel-halo {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}


/* =============================================================================
   47. CONTACT PANEL — premium office/coverage grid + brief form slot
   ============================================================================= */

.contact-page {
  display: block;
}
.contact-page .page-hero {
  text-align: start;
}

.contact-intro {
  background-color: var(--eie-grey-50, #f4f6fa);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.contact-intro__body {
  color: var(--eie-grey-700, #334155);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
}
.contact-intro__body p {
  margin-block: 0 1rem;
}
.contact-intro__body :last-child {
  margin-block-end: 0;
}

.contact-panel {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(245, 166, 35, 0.05), transparent 60%),
    linear-gradient(180deg, var(--eie-white) 0%, var(--eie-grey-50, #f4f6fa) 100%);
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.contact-panel::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 20%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 166, 35, 0.4) 50%, transparent 100%);
  pointer-events: none;
}
.contact-panel__heading {
  text-align: center;
  max-inline-size: 56rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.contact-panel__heading .t-h2 {
  color: var(--eie-navy);
  margin-block-start: 0.5rem;
  margin-block-end: 0.75rem;
}
.contact-panel__lead {
  color: var(--eie-grey-600, #475569);
  margin-inline: auto;
  max-inline-size: 44rem;
}
.contact-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  margin-block-end: clamp(2.5rem, 2rem + 3vw, 4rem);
}
@media (min-width: 36rem) {
  .contact-panel__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .contact-panel__grid { grid-template-columns: repeat(4, 1fr); }
}

.contact-panel__form {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  background: var(--eie-white);
  border: 1px solid var(--eie-grey-100, #e2e8f0);
  border-radius: var(--eie-radius-card, 12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 12px 36px -16px rgba(10, 31, 61, 0.08);
}
.contact-panel__form-heading {
  font-family: var(--eie-font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700;
  color: var(--eie-navy);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}


/* =============================================================================
   48. OFFICE CARD — single tile (city + composed address + tel + email)
   ============================================================================= */

.office-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--eie-white);
  border: 1px solid var(--eie-grey-100, #e2e8f0);
  border-radius: var(--eie-radius-card, 12px);
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              border-color var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.office-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 1.25rem;
  block-size: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--eie-orange) 30%, var(--eie-orange) 70%, transparent 100%);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--eie-duration-base) var(--eie-ease-out);
}
.office-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, 0.35);
  box-shadow: 0 12px 36px -10px rgba(10, 31, 61, 0.1);
}
.office-card:hover::before {
  opacity: 1;
}
.office-card__city {
  font-family: var(--eie-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--eie-navy);
  margin: 0;
  letter-spacing: -0.01em;
}
.office-card__address {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--eie-grey-600, #475569);
  margin: 0;
}
.office-card__tel,
.office-card__email {
  display: inline-flex;
  align-items: center;
  font-family: var(--eie-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--eie-navy);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--eie-duration-fast) var(--eie-ease-out),
              border-color var(--eie-duration-fast) var(--eie-ease-out);
}
.office-card__tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.office-card__email {
  color: var(--eie-orange-deep, #9c5b00); /* AA on the white card (orange-600 is 2.8:1) */
}
.office-card__tel:hover,
.office-card__tel:focus-visible,
.office-card__email:hover,
.office-card__email:focus-visible {
  color: var(--eie-orange-deep, #9c5b00); /* affordance = the underline, not a brighter (failing) orange */
  border-block-end-color: currentColor;
}
.office-card__tel:focus-visible,
.office-card__email:focus-visible {
  outline: 2px solid var(--eie-orange);
  outline-offset: 3px;
  border-block-end-color: transparent;
}
@media (max-width: 30rem) {
  .office-card__address { font-size: 0.8125rem; }
  .office-card__tel,
  .office-card__email { font-size: 0.85rem; }
}

/* ── Operating model (delivery lifecycle strip — reused on CPT singles) ───────
   Compact, dark, four-phase row. Without these rules the section renders
   unstyled (white-on-white text, oversized inline-SVG icons), so it both
   theming AND density-fixes the single pages. */
.operating-model {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(46rem 32rem at 50% 0%, rgba(245, 166, 35, 0.07), transparent 70%),
    linear-gradient(180deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  padding-block: var(--eie-section-py-compact, clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem));
}
.operating-model .section-intro--centered { margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.operating-model__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}
@media (min-width: 30rem) { .operating-model__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .operating-model__grid { grid-template-columns: repeat(4, 1fr); } }
.operating-model__phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--eie-radius-card, 1rem);
  background: rgba(255, 255, 255, 0.03);
}
.operating-model__icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--eie-orange);
}
.operating-model__icon svg { width: 100%; height: 100%; }
.operating-model__num {
  font-family: var(--eie-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(245, 166, 35, 0.85);
}
.operating-model__title {
  font-family: var(--eie-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--eie-white);
  margin: 0;
}
.operating-model__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
.operating-model__connector { display: none; }

/* ── Platform stewardship — the products depth band ──────────────────────────
   A supplied specialist-platform plate sitting on EIE's four-layer accountability
   foundation (supply → deploy → integrate → support). The products family's
   distinct dark moment: a layered "third-party platform + local accountability"
   model, not the solutions orbit or the sectors lifecycle row. Navy gradient with
   an orange-as-scalpel accent; compositor-friendly reveal only. RTL-safe (logical
   properties). */
.platform-stewardship {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(40rem 26rem at 50% 0%, rgba(245, 166, 35, 0.08), transparent 68%),
    linear-gradient(180deg, var(--eie-navy-deep) 0%, var(--eie-navy) 100%);
  padding-block: var(--eie-section-py-compact, clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem));
}
.platform-stewardship__head { margin-block-end: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.platform-stewardship__model {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.platform-stewardship__plate {
  position: relative;
  inline-size: min(100%, 27rem);
  text-align: center;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: var(--eie-radius-card, 1rem);
  background:
    linear-gradient(180deg, rgba(245, 166, 35, 0.07), transparent 70%),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 1.5rem 3rem -1.75rem rgba(0, 0, 0, 0.7);
}
.platform-stewardship__plate-tag {
  position: absolute;
  inset-block-start: -0.7rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.7rem;
  font-family: var(--eie-font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eie-navy-deep);
  background: var(--eie-orange);
  border-radius: 999px;
}
[dir="rtl"] .platform-stewardship__plate-tag { transform: translateX(50%); }
.platform-stewardship__plate-tag:lang(ar) { letter-spacing: 0; text-transform: none; }
.platform-stewardship__plate-icon {
  display: inline-flex;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin-block-start: 0.4rem;
  color: var(--eie-orange);
}
.platform-stewardship__plate-icon svg { inline-size: 100%; block-size: 100%; }
.platform-stewardship__plate-title {
  font-family: var(--eie-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--eie-white);
  margin: 0.35rem 0 0.3rem;
}
.platform-stewardship__plate-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
.platform-stewardship__feed {
  inline-size: 2px;
  block-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: linear-gradient(180deg, var(--eie-orange), rgba(245, 166, 35, 0.1));
}
.platform-stewardship__layers {
  list-style: none;
  margin: 0;
  padding: 0;
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
@media (min-width: 40rem) { .platform-stewardship__layers { grid-template-columns: repeat(2, 1fr); } }
.platform-stewardship__layer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.4rem 0.85rem;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-inline-start: 2px solid rgba(245, 166, 35, 0.55);
  border-radius: var(--eie-radius-card, 1rem);
  background: rgba(255, 255, 255, 0.03);
}
.platform-stewardship__num {
  grid-row: 1 / span 2;
  font-family: var(--eie-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(245, 166, 35, 0.85);
  padding-block-start: 0.15rem;
}
.platform-stewardship__icon {
  display: inline-flex;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  color: var(--eie-orange);
}
.platform-stewardship__icon svg { inline-size: 100%; block-size: 100%; }
.platform-stewardship__body { display: block; }
.platform-stewardship__title {
  display: block;
  font-family: var(--eie-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--eie-white);
  margin-block-end: 0.15rem;
}
.platform-stewardship__desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}
.platform-stewardship__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-inline-size: 46rem;
  margin: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) auto 0;
  padding-block-start: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}
.platform-stewardship__foot-mark {
  flex: none;
  display: inline-flex;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  color: var(--eie-orange);
}
.platform-stewardship__foot-mark svg { inline-size: 100%; block-size: 100%; }

/* ── Operations loop — the projects family's distinct dark depth band ─────────
   A navy band hosting the continuous managed-operations ring in its dark plate;
   the run-phase counterpart to the linear delivery-lifecycle flagship. */
.operations-loop {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(42rem 28rem at 50% 0%, rgba(245, 166, 35, 0.07), transparent 70%),
    linear-gradient(180deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  padding-block: var(--eie-section-py-compact, clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem));
}
.operations-loop__head { margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.operations-loop__figure { max-inline-size: 44rem; margin-inline: auto; }

/* ── B3.3 premium refinements — platform-grade card accents, focus, rhythm ───
   Additive polish over the existing system (DESIGN.md: layered surfaces,
   orange-as-scalpel, engineered restraint). No new colors, fonts, or assets;
   no added vertical bulk. Lifts the plain content/capability cards on CPT
   singles + archives toward a "platform capability" feel. */

/* Precise orange top-accent that resolves on hover/focus — the scalpel, not a
   paint roller. Card already has position:relative + radius. */
.card-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  border-start-start-radius: var(--eie-radius-card, 1rem);
  border-start-end-radius: var(--eie-radius-card, 1rem);
  background: linear-gradient(90deg, var(--eie-orange), var(--eie-orange-600));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--eie-duration-base) var(--eie-ease-out);
  pointer-events: none;
}
.card-item:hover::before,
.card-item:focus-within::before { transform: scaleX(1); }

/* Keyboard parity: a linked card lifts on focus exactly as on hover. */
.card-item:focus-within {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, 0.4);
  box-shadow: var(--eie-shadow-elegant);
}
/* Accessible, on-system focus ring for the stretched card link (DESIGN.md:
   navy outline on light surfaces — never a translucent orange ring). */
.card-item__title a:focus-visible {
  outline: 2px solid var(--eie-navy);
  outline-offset: 3px;
  border-radius: 2px;
}
[dir="rtl"] .card-item::before { transform-origin: inline-end; }

/* Crisper rhythm at light → alt-section boundaries. */
.section--alt { border-block-start: 1px solid var(--eie-grey-100, #e8edf4); }

/* ── B5.1 premium visual system — icon orbs, editorial article, panels ───────
   Lifts plain cards and prose-only pages to an enterprise standard using only
   inline SVG glyphs, gradients, and the existing token palette (no images). */

/* Card icon → premium gradient orb (was a flat grey square). */
.card-item__icon {
  background: linear-gradient(135deg, var(--eie-navy), var(--eie-navy-700));
  color: var(--eie-orange);
  box-shadow: 0 10px 26px -12px rgba(10, 31, 61, 0.45);
}
.card-item__icon svg { inline-size: 1.45rem; block-size: 1.45rem; }
.card-item:hover .card-item__icon { box-shadow: 0 14px 30px -10px rgba(245, 166, 35, 0.35); }

/* Standalone icon orb for editorial/section use. */
.icon-orb {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.8rem; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--eie-navy), var(--eie-navy-700));
  color: var(--eie-orange);
}
.icon-orb svg { inline-size: 1.3rem; block-size: 1.3rem; }
.icon-orb--soft { background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(245,166,35,.04)); border: 1px solid rgba(245,166,35,.22); }

/* Editorial article shell: sticky TOC rail + reading column on desktop. */
.article-shell { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 64rem) { .article-shell { grid-template-columns: 16rem minmax(0, 1fr); } }
.editorial-toc { display: none; }
@media (min-width: 64rem) {
  .editorial-toc { display: block; position: sticky; inset-block-start: 6rem; font-size: 0.875rem; }
  .editorial-toc__label { font-family: var(--eie-font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eie-grey-600); margin: 0 0 0.75rem; }
  .editorial-toc ol { list-style: none; margin: 0; padding: 0 0 0 1rem; border-inline-start: 2px solid var(--eie-grey-100); display: flex; flex-direction: column; gap: 0.6rem; }
  .editorial-toc a { color: var(--eie-grey-600); text-decoration: none; line-height: 1.4; display: block; }
  .editorial-toc a:hover { color: var(--eie-orange-deep, #9c5b00); }
}
.article-col { max-inline-size: 44rem; }
.article-col :is(h2, h3) { scroll-margin-block-start: 6rem; }

/* Executive summary card — sets up the article. */
.executive-summary {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--eie-radius-card); margin-block-end: 2rem;
  background: linear-gradient(135deg, rgba(10,31,61,.04), rgba(245,166,35,.05));
  border: 1px solid var(--eie-grey-100); border-inline-start: 3px solid var(--eie-orange);
}
.executive-summary__label { font-family: var(--eie-font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eie-orange-deep, #9c5b00); margin: 0 0 0.35rem; }
.executive-summary p { margin: 0; color: var(--eie-grey-700, #334155); line-height: 1.6; }

/* Pull-quote / callout for the prose body. */
.insight-callout {
  margin: 2rem 0; padding: 1.25rem 1.5rem; border-radius: var(--eie-radius-card);
  background: linear-gradient(135deg, var(--eie-navy), var(--eie-navy-deep)); color: var(--eie-white);
  font-family: var(--eie-font-display); font-size: 1.125rem; line-height: 1.5;
}

/* Key-takeaways / checklist grid. */
.key-takeaways { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .key-takeaways { grid-template-columns: repeat(2, 1fr); } }
.key-takeaways li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--eie-grey-100); border-radius: var(--eie-radius-card); background: var(--eie-white); }
.key-takeaways li::before { content: ""; inline-size: 1.4rem; block-size: 1.4rem; flex: 0 0 auto; margin-block-start: 0.1rem; border-radius: 50%; background: rgba(245,166,35,.15); box-shadow: inset 0 0 0 2px var(--eie-orange); }

/* Related capabilities band. */
.related-capability-band { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .related-capability-band { grid-template-columns: repeat(3, 1fr); } }
.related-capability { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.1rem; border: 1px solid var(--eie-grey-100); border-radius: var(--eie-radius-card); background: var(--eie-white); text-decoration: none; transition: border-color var(--eie-duration-base) var(--eie-ease-out), transform var(--eie-duration-base) var(--eie-ease-out); }
.related-capability:hover { transform: translateY(-3px); border-color: rgba(245,166,35,.4); }
.related-capability span { font-family: var(--eie-font-display); font-weight: 700; color: var(--eie-navy); }

/* At-a-glance side panel for solution/sector overviews. */
.at-a-glance { padding: 1.25rem 1.4rem; border-radius: var(--eie-radius-card); background: var(--eie-grey-50); border: 1px solid var(--eie-grey-100); }
.at-a-glance__label { font-family: var(--eie-font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eie-orange-deep, #9c5b00); margin: 0 0 0.75rem; } /* AA on grey-50 (<64rem, before the navy re-colour); orange-600 was 2.6:1 */
.at-a-glance ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.at-a-glance li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--eie-grey-700, #334155); line-height: 1.45; }
.at-a-glance li::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; margin-block-start: 0.4rem; flex: 0 0 auto; border-radius: 50%; background: var(--eie-orange); }

/* ── B5.2 premium rescue — contact brief, office pins, archive lede/coverage ──
   Propagates the icon-led card system to the remaining internal pages and
   replaces empty placeholders with designed, on-system panels. Tokens only. */

/* Section lede — an intro paragraph that opens an archive/section with weight. */
.section-lede {
  max-inline-size: 60ch;
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  color: var(--eie-grey-600);
}

/* Contact "send us a brief" panel — honest, designed fallback (no fake form). */
.contact-brief {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-brief__intro {
  margin: 0;
  color: var(--eie-grey-700, #334155);
  line-height: 1.6;
}
.contact-brief__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.contact-brief__list li {
  position: relative;
  padding-inline-start: 1.9rem;
  color: var(--eie-grey-700, #334155);
  line-height: 1.5;
}
.contact-brief__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.15rem;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.15);
  box-shadow: inset 0 0 0 2px var(--eie-orange);
}
.contact-brief__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-block-start: 0.25rem;
}

/* Office card location pin — orange glyph leading the city name. */
.office-card__city {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.office-card__pin {
  display: inline-flex;
  color: var(--eie-orange-600);
  flex: 0 0 auto;
}
.office-card__pin svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* Projects references — editorial intro + coverage grid heading. */
.references-intro { max-inline-size: 60ch; margin-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.references-intro > * + * { margin-block-start: 1rem; }

/* B15 — references empty-state as a balanced two-column lead (fills the right
   half so the section is not a 60ch text column beside empty white). */
.references-lead { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 64rem) { .references-lead { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.references-lead__copy { max-inline-size: none; margin-block-end: 0; }
.references-lead__aside { min-inline-size: 0; }

/* Dark "how references work" process card — honest process, no fabricated proof. */
.references-assurance { margin: 0; padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); border-radius: 20px; color: #fff; position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(150deg, var(--pilot-navy-900, #06152B), var(--pilot-navy, #0A1F3D) 60%, var(--pilot-surface, #12305C));
  border: 1px solid var(--pilot-hair, rgba(255, 255, 255, 0.12)); box-shadow: 0 24px 60px -30px rgba(6, 21, 43, 0.65); }
.references-assurance::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(120% 90% at 84% 0%, #000 30%, transparent 74%); mask-image: radial-gradient(120% 90% at 84% 0%, #000 30%, transparent 74%); }
.references-assurance > * { position: relative; z-index: 1; }
.references-assurance__eyebrow { font-family: var(--pilot-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pilot-accent); margin: 0 0 1.1rem; }
.references-assurance__steps { list-style: none; margin: 0; padding: 0; }
.ra-step { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding-block: 0.85rem; }
.ra-step + .ra-step { border-block-start: 1px solid rgba(255, 255, 255, 0.08); }
.ra-step__node { position: relative; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--pilot-accent); }
.ra-step__node svg { inline-size: 1.15rem; block-size: 1.15rem; }
.ra-step__n { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--pilot-accent); color: var(--pilot-navy-900, #06152B); font-family: var(--pilot-body); font-size: 0.66rem; font-weight: 700; display: grid; place-items: center; }
.ra-step__body { display: grid; gap: 0.2rem; align-content: center; }
.ra-step__t { font-family: var(--pilot-display); font-weight: 700; font-size: 1rem; }
.ra-step__d { font-family: var(--pilot-body); font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.references-assurance__signals { list-style: none; margin: 1.3rem 0 0; padding: 1.2rem 0 0; border-block-start: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.references-assurance__signals li { font-family: var(--pilot-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.82); padding: 0.32rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); }

/* B15 — About heritage becomes a balanced lineage + engineering-discipline band. */
.about-lineage { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 64rem) { .about-lineage { grid-template-columns: 1.25fr 0.75fr; gap: clamp(2.5rem, 2rem + 3vw, 4rem); } }
.about-lineage__copy .t-prose { max-inline-size: none; }
.about-lineage__pillars { padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); border: 1px solid var(--eie-grey-100, #e2e8f0); border-radius: 18px; background: var(--eie-grey-50, #f8fafc); }
@media (min-width: 64rem) { .about-lineage__pillars { position: sticky; inset-block-start: 6rem; } }
.about-lineage__pillars .eyebrow { margin-block-end: 1rem; }
.discipline-pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.discipline-pillars li { position: relative; padding-inline-start: 1.6rem; font-family: var(--pilot-body); font-size: 0.92rem; line-height: 1.5; color: var(--eie-grey-600, #475569); }
.discipline-pillars li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5rem; inline-size: 8px; block-size: 8px; border-radius: 3px; background: var(--pilot-accent); }
.discipline-pillars .pillar__t { display: block; font-family: var(--pilot-display); font-weight: 700; font-size: 1rem; color: var(--pilot-navy, #0A1F3D); margin-block-end: 0.15rem; }
[data-theme="dark"] .about-lineage__pillars { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.references-coverage__title {
  margin: 0 0 1.5rem;
  padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-block-start: 1px solid var(--eie-grey-100);
}

/* ── B5.3 — two-column overview band (overview prose + at-a-glance) ───────────
   Replaces the narrow-left / empty-right intro on solution & sector singles. */
.overview-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 64rem) {
  .overview-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .overview-grid__figure { position: sticky; inset-block-start: 6rem; }
}
/* Left column stacks the overview prose + the at-a-glance spec card. */
.overview-grid__main > * + * { margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.overview-grid__main .t-prose { max-inline-size: none; }

/* ── B5.4 — premium polish: spec-card at-a-glance + archive "Explore" cue ─────
   Tokens only; inherits the hospitality gold swap on that page automatically. */

/* At-a-glance → executive spec card: gradient tint, accent edge, check bullets. */
.at-a-glance {
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  background: linear-gradient(135deg, rgba(10, 31, 61, 0.05), rgba(245, 166, 35, 0.05));
  border-inline-start: 3px solid var(--eie-orange);
  box-shadow: var(--eie-shadow-card);
}
.at-a-glance__label { font-size: 0.78rem; color: var(--eie-navy); }
.at-a-glance ul { gap: 0.85rem; }
.at-a-glance li { font-size: 0.95rem; color: var(--eie-grey-700, #334155); }
.at-a-glance li::before { content: none; }   /* replace the dot with a check glyph */
.at-a-glance__check {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--eie-orange-600);
  margin-block-start: 0.05rem;
}
.at-a-glance__check svg { inline-size: 1.15rem; block-size: 1.15rem; }
.at-a-glance__text { min-inline-size: 0; }

/* Archive card "Explore →" affordance — only renders on linked cards. */
.card-item__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: auto;
  padding-block-start: 0.9rem;
  font-family: var(--eie-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--eie-orange-deep, #9c5b00); /* AA on white/grey-50 (orange-600 is 2.8:1) */
}
.card-item__arrow { transition: transform var(--eie-duration-base) var(--eie-ease-out); }
.card-item:hover .card-item__arrow,
.card-item:focus-within .card-item__arrow { transform: translateX(0.25rem); }

/* ── B6 — enterprise diagram system (per-page figures) ───────────────────────
   Premium navy field + a tokenised `.eie-dgm` kit so every bespoke diagram is
   consistent and inherits the hospitality gold swap. Diagram parts are trusted
   inline SVG (no user input). */
.enterprise-diagram { margin: 0; }
.enterprise-diagram__field {
  position: relative;
  border-radius: var(--eie-radius-card);
  padding: clamp(1rem, 0.5rem + 2vw, 1.75rem);
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(245, 166, 35, 0.10), transparent 60%),
    linear-gradient(160deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--eie-shadow-elegant);
  overflow: hidden;
}
.enterprise-diagram__field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 85%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 85%);
}
.enterprise-diagram__field > svg { position: relative; z-index: 1; }
.enterprise-diagram__caption {
  margin-block-start: 0.75rem;
  font-size: 0.85rem;
  color: var(--eie-grey-600);
  text-align: center;
}

/* Diagram kit primitives — used by every figures/diagram-*.php. */
.eie-dgm { display: block; inline-size: 100%; block-size: auto; }
.eie-dgm__grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.eie-dgm__layer { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.eie-dgm__layer--accent { fill: rgba(245, 166, 35, 0.06); stroke: var(--eie-orange); stroke-opacity: 0.55; }
.eie-dgm__node { fill: var(--eie-navy-700); stroke: rgba(255, 255, 255, 0.20); stroke-width: 1.5; }
.eie-dgm__node--core { fill: var(--eie-navy-deep); stroke: var(--eie-orange); stroke-width: 2; }
.eie-dgm__halo { fill: var(--eie-orange); opacity: 0.12; }
.eie-dgm__line { fill: none; stroke: rgba(255, 255, 255, 0.20); stroke-width: 1.5; }
.eie-dgm__line--accent { stroke: var(--eie-orange); stroke-opacity: 0.65; }
.eie-dgm__line--dashed { stroke-dasharray: 6 6; }
.eie-dgm__glyph { fill: none; stroke: var(--eie-orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eie-dgm__dot { fill: var(--eie-orange); }
.eie-dgm__label { fill: rgba(255, 255, 255, 0.85); font-family: var(--eie-font-display); font-size: 14px; }
.eie-dgm__label--sm { font-size: 11px; fill: rgba(255, 255, 255, 0.6); }
.eie-dgm__label--accent { fill: var(--eie-orange); }
.eie-dgm__label--core { fill: var(--eie-white); font-weight: 700; }

/* Featured-capability bento — the lead card spans the full row on desktop and
   lays out icon-left so it fills the width; others stay standard; mobile stacks. */
.card-group--bento {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 64rem) {
  .card-group--bento { grid-template-columns: repeat(3, 1fr); }
  .card-group--bento .card-item--featured { grid-column: 1 / -1; }
}
.card-item--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--eie-white), var(--eie-white)) padding-box,
    linear-gradient(135deg, rgba(245, 166, 35, 0.45), var(--eie-grey-100)) border-box;
}
@media (min-width: 64rem) {
  .card-item--featured {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: center;
  }
  .card-item--featured .card-item__icon {
    grid-row: 1 / -1;
    align-self: center;
    margin-block-end: 0;
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }
  .card-item--featured .card-item__title { margin-block: 0 0.4rem; font-size: var(--eie-text-h3); }
  .card-item--featured .card-item__text { margin: 0; }
}

/* ── B6 P1 — About heritage timeline (navy depth band) ───────────────────────*/
.heritage-band {
  position: relative;
  background: linear-gradient(160deg, var(--eie-navy) 0%, var(--eie-navy-deep) 100%);
  color: var(--eie-white);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem);
  overflow: hidden;
}
.heritage-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 50%, transparent 85%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 50%, transparent 85%);
}
.heritage-band > .app-container { position: relative; z-index: 1; }
.heritage-band .section-intro { margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem); }
.heritage-band .eie-dgm { max-inline-size: 62rem; margin-inline: auto; }


/* =============================================================================
   49. ENGAGEMENT FLOW — "How an EIE engagement runs" (B17, projects archive).
   Asymmetric sticky intro + signal rail. Qualitative Challenge/Action stages;
   micro-labels use the AA grey token (never opacity-dimmed navy — B16.1 lesson);
   tag focus rides --eie-focus-light; spine pulse is reduced-motion gated.
   Stage rhythm uses explicit modifiers (--shift / --tint), never nth-child.
   ============================================================================= */

.engagement-flow { position: relative; overflow: hidden; }
.engagement-flow .ef-topo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: -4rem;
  inline-size: min(46rem, 60vw);
  opacity: 0.55;
  pointer-events: none;
}
.ef-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.ef-intro { align-self: start; position: sticky; inset-block-start: clamp(1.5rem, 4vw, 3rem); }
.ef-title { margin-block: 1.1rem 0.9rem; max-inline-size: 16ch; }
.ef-accent { color: var(--eie-orange-deep); }
.ef-lede { max-inline-size: 38ch; }
.ef-note {
  margin-block-start: 1.4rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--eie-orange);
  font-size: 0.9rem;
  color: var(--eie-grey-600);
  max-inline-size: 34ch;
}
.ef-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 1.8rem; }
.ef-ledger {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 1.4rem 0 0;
  border-block-start: 1px solid rgba(10, 31, 61, 0.12);
  display: grid;
  gap: 0.95rem;
  max-inline-size: 36ch;
}
.ef-ledger__row { display: flex; align-items: flex-start; gap: 0.75rem; }
.ef-ledger__row svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
  stroke: var(--eie-orange-deep);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-block-start: 0.15rem;
}
.ef-ledger__row b { display: block; font-size: 0.85rem; font-weight: 800; }
.ef-ledger__row span { font-size: 0.82rem; color: var(--eie-grey-600); }

/* --- signal rail --- */
.ef-rail { position: relative; padding-inline-start: clamp(2.4rem, 4vw, 3.2rem); }
.ef-spine {
  position: absolute;
  inset-inline-start: calc(clamp(2.4rem, 4vw, 3.2rem) / 2 - 1px);
  inset-block: 0.5rem;
  inline-size: 2px;
  border-radius: 2px;
  background: rgba(10, 31, 61, 0.12);
  overflow: hidden;
}
.ef-pulse {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100%;
  transform-origin: top;
  transform: scaleY(1);
  background: linear-gradient(180deg, var(--eie-orange) 0%, rgba(245, 166, 35, 0.15) 100%);
}
.ef-stage {
  --ef-shift: 0rem; /* editorial offset; the spine marker counter-offsets so dots stay ON the spine. */
  position: relative;
  padding-block: 1.5rem;
  padding-inline: 0 1.5rem;
  margin-block-end: clamp(1rem, 2vw, 1.6rem);
}
.ef-stage--shift { --ef-shift: clamp(0rem, 4vw, 3.4rem); margin-inline-start: var(--ef-shift); }
.ef-stage::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * clamp(2.4rem, 4vw, 3.2rem) / 2 - 6px - var(--ef-shift));
  inset-block-start: 2.2rem;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--eie-white, #fff);
  border: 3px solid var(--eie-navy);
}
.ef-stage--live::before { border-color: var(--eie-orange); box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.18); }
.ef-stage__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem 1.35rem;
  background: var(--eie-white, #fff);
  border: 1px solid rgba(10, 31, 61, 0.12);
  border-radius: 14px;
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  box-shadow: 0 1px 2px rgba(10, 31, 61, 0.04);
  transition: transform 0.22s var(--eie-ease-out), box-shadow 0.22s var(--eie-ease-out), border-color 0.22s var(--eie-ease-out);
}
.ef-stage--tint .ef-stage__card { background: var(--eie-grey-50); }
.ef-stage__card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 166, 35, 0.45);
  box-shadow: 0 18px 34px -18px rgba(10, 31, 61, 0.28);
}
.ef-symbol {
  inline-size: 3.1rem;
  block-size: 3.1rem;
  border-radius: 12px;
  background: var(--eie-navy);
  display: grid;
  place-items: center;
}
.ef-symbol svg {
  inline-size: 1.7rem;
  block-size: 1.7rem;
  stroke: var(--eie-orange);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ef-stage__head { display: flex; flex-direction: column; gap: 0.2rem; justify-content: center; }
.ef-k {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eie-orange-deep);
}
.ef-stage__title { font-size: clamp(1.12rem, 1rem + 0.6vw, 1.4rem); letter-spacing: -0.01em; margin: 0; }
.ef-body { grid-column: 1 / -1; display: grid; gap: 0.7rem; margin: 0; }
.ef-line { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; }
.ef-line dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eie-grey-600);
}
.ef-line--action dt { color: var(--eie-orange-deep); }
.ef-line dd { margin: 0; font-size: 0.95rem; color: var(--eie-grey-600); }
.ef-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.35rem; }
.ef-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.5rem; /* 40px comfortable touch target (44px on mobile below). */
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--eie-navy);
  text-decoration: none;
  border: 1px solid rgba(10, 31, 61, 0.12);
  border-radius: var(--eie-radius-pill, 999px);
  padding: 0.32rem 0.8rem;
  transition: border-color 0.18s var(--eie-ease-out), background-color 0.18s var(--eie-ease-out);
}
.ef-tag::before { content: ""; inline-size: 0.32rem; block-size: 0.32rem; border-radius: 50%; background: var(--eie-orange); }
.ef-tag:hover { border-color: var(--eie-orange); background: rgba(245, 166, 35, 0.08); }
.ef-tag:focus-visible { outline: 3px solid var(--eie-focus-light); outline-offset: 2px; }

/* Arabic: no tracking, no uppercase on the micro-labels. */
.ef-k:lang(ar),
.ef-line dt:lang(ar) { text-transform: none; letter-spacing: 0; }

/* Spine pulse draws with the first reveal; static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .eie-js .ef-pulse { transform: scaleY(0); transition: transform 1.4s var(--eie-ease-out); }
  .eie-js .ef-spine.is-revealed .ef-pulse { transform: scaleY(1); }
}

@media (max-width: 900px) {
  .ef-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .ef-intro { position: static; }
  .ef-title { max-inline-size: none; }
  .engagement-flow .ef-topo { display: none; }
  .ef-stage--shift { --ef-shift: 0rem; margin-inline-start: 0; }
  .ef-rail { padding-inline-start: 2.1rem; }
  .ef-spine { inset-inline-start: 0.55rem; }
  .ef-stage::before { inset-inline-start: calc(-2.1rem + 0.18rem); }
  .ef-line { grid-template-columns: 1fr; gap: 0.15rem; }
  .ef-tag { min-block-size: 2.75rem; } /* 44px touch target on mobile. */
  .ef-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   MANUS HOMEPAGE PARITY — below-hero bands
   --------------------------------------------------------------------------
   Everything here styles the eight sections ported from the live Manus
   homepage. It is deliberately scoped to new class names so it cannot reach
   the locked hero: the hero CSS-scope hash is located by selector match, so a
   single mention of a hero class here — even in a comment — would swallow this
   whole block into the locked scope and break the baseline.

   Band rhythm follows the reference: cream, white, gold, cream, navy, navy,
   white, navy.
   ========================================================================== */

/* ---------- Display serif ----------
   The reference sets EVERY h1-h4 in Playfair; body, nav, buttons and data stay
   sans. This scope now covers the internal pages as well as the homepage bands.

   `.t-display` is deliberately absent and must stay absent: it carries the
   locked homepage hero H1, which is display-SANS by design. Inner-page titles
   that also use `.t-display` opt in with `.t-serif` alongside it, so the hero
   cannot be reached by widening this list. Changing that needs the owner token
   CHANGE LOCAL HERO APPROVED. */
.t-serif,
.t-h1,
.t-h2,
.t-h3,
.arch-hero__title,
.card-item__title,
.sec-head__title,
.bento-card__title,
.photo-tile__title,
.ed-card__title,
.spec-card__title,
.home-cta__title,
.home-difference__card-title,
.home-careers__track-title,
.home-heritage__stat-value,
.home-heritage__point-label,
.operating-model__title,
.capability-domain__title,
.product-row__title,
.platform-stewardship__plate-title,
.ef-stage__title,
.office-card__city,
.sector-strip-card__title,
.solutions-grid__card-title,
.home-insights__title,
.site-footer__lead-title,
.editable-region__inner :is(h2, h3, h4),
.editable-region__inner blockquote {
  font-family: var(--eie-font-serif);
  letter-spacing: -0.02em;
}
/* Playfair carries no Arabic glyphs; repoint the token for Arabic content. */
:lang(ar) {
  --eie-font-serif: var(--eie-font-arabic);
}

/* ---------- Shared band header ---------- */
.sec-head { margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sec-head__eyebrow {
  font-family: var(--eie-font-body);
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eie-orange-deep);
  margin: 0;
}
.sec-head__rule {
  display: block;
  inline-size: 3rem;
  block-size: 3px;
  border-radius: 2px;
  margin-block: 0.75rem 1.5rem;
  background-image: linear-gradient(90deg, var(--eie-orange), transparent);
}
.sec-head__title {
  font-size: var(--eie-text-h2);
  line-height: 1.15;
  color: var(--eie-navy);
  margin: 0;
}
.sec-head__lead {
  margin-block-start: 1rem;
  max-inline-size: 46ch;
  color: var(--eie-grey-600);
}
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__text { max-inline-size: 42rem; margin-inline: auto; }
.sec-head--center .sec-head__rule {
  margin-inline: auto;
  background-image: linear-gradient(90deg, transparent, var(--eie-orange), transparent);
}
.sec-head--dark .sec-head__eyebrow { color: rgba(248, 246, 242, 0.62); }
.sec-head--dark .sec-head__title   { color: var(--eie-white); }
.sec-head--dark .sec-head__lead    { color: rgba(255, 255, 255, 0.66); }
.sec-head--gold .sec-head__eyebrow { color: var(--eie-gold); }
.sec-head--gold .sec-head__title   { color: var(--eie-white); }
.sec-head--gold .sec-head__rule    { background-image: linear-gradient(90deg, var(--eie-gold), transparent); }

/* Split header: title block left, action right, baselines aligned. */
.sec-head--split { display: grid; gap: 1.25rem; }
.sec-head--split .sec-head__cta { justify-self: start; }
@media (min-width: 48rem) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .sec-head--split .sec-head__cta { justify-self: end; }
}
[dir="rtl"] .sec-head__rule { background-image: linear-gradient(270deg, var(--eie-orange), transparent); }
[dir="rtl"] .sec-head--gold .sec-head__rule { background-image: linear-gradient(270deg, var(--eie-gold), transparent); }

/* ==========================================================================
   HERITAGE — cream editorial split
   ========================================================================== */
.home-heritage { background-color: var(--eie-cream); }
.home-heritage__grid { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 3.5rem); }
@media (min-width: 64rem) {
  .home-heritage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.home-heritage__lede { color: var(--eie-grey-600); line-height: 1.7; margin-block: 0 1.25rem; max-inline-size: 60ch; }
.home-heritage__points {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.home-heritage__point { display: flex; align-items: flex-start; gap: 0.75rem; }
.home-heritage__check { flex: 0 0 auto; inline-size: 1.25rem; block-size: 1.25rem; color: var(--eie-orange); margin-block-start: 0.15rem; }
.home-heritage__check svg { inline-size: 100%; block-size: 100%; }
.home-heritage__point-body { display: block; min-inline-size: 0; }
.home-heritage__point-label { display: block; color: var(--eie-navy); font-size: 0.9375rem; font-weight: 600; margin-block-end: 0.15rem; }
.home-heritage__point-desc { display: block; color: var(--eie-grey-600); font-size: 0.8125rem; line-height: 1.5; }

.home-heritage__media { position: relative; padding-block-end: 2rem; padding-inline-start: 1.5rem; }
.home-heritage__plate {
  position: absolute;
  inset-block-start: -1rem;
  inset-inline-end: -1rem;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--eie-radius-card);
  background-color: rgba(10, 31, 61, 0.07);
}
.home-heritage__img,
.home-heritage__media .media-frame {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: clamp(18rem, 14rem + 14vw, 26rem);
  object-fit: cover;
  border-radius: var(--eie-radius-card);
  box-shadow: var(--eie-shadow-elegant);
}
.home-heritage__stat {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: 1.15rem 1.4rem;
  border-radius: var(--eie-radius-card);
  background-color: var(--eie-navy);
  box-shadow: var(--eie-shadow-elegant);
}
.home-heritage__stat-value { display: block; font-size: 2.25rem; line-height: 1; font-weight: 700; color: var(--eie-orange); }
.home-heritage__stat-label { display: block; margin-block-start: 0.35rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   CAPABILITIES — asymmetric bento
   ========================================================================== */
.home-capabilities { background-color: var(--eie-white); }
.home-capabilities__grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .home-capabilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .home-capabilities__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The reference intends an asymmetric bento but applies an inert class. With
     eight capabilities a uniform 3-up grid leaves a two-cell hole, so the lead
     card takes the span the reference meant it to have and the grid closes. */
  .home-capabilities__grid .bento-card--wide { grid-column: span 2; }
}
.home-capabilities__foot { margin-block-start: 2.5rem; text-align: center; }

.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
  border-radius: 0.75rem;
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(10, 31, 61, 0.14); }
.bento-card__corner {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 5rem;
  block-size: 5rem;
  border-end-start-radius: 100%;
  background-color: var(--eie-orange);
  opacity: 0.1;
}
.bento-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 0.5rem;
  margin-block-end: 1.25rem;
}
.bento-card__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.bento-card__title { font-size: 1.125rem; line-height: 1.25; margin: 0 0 0.5rem; }
.bento-card__title a { text-decoration: none; color: inherit; }
.bento-card__title a::after { content: ""; position: absolute; inset: 0; }
.bento-card__text { font-size: 0.875rem; line-height: 1.6; margin: 0 0 1.25rem; }
.bento-card__more { margin-block-start: auto; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; }
.bento-card__arrow { transition: transform var(--eie-duration-base) var(--eie-ease-out); }
.bento-card:hover .bento-card__arrow { transform: translateX(3px); }
[dir="rtl"] .bento-card:hover .bento-card__arrow { transform: translateX(-3px); }

.bento-card--cream { background-color: var(--eie-cream); border: 1px solid var(--eie-grey-100); }
.bento-card--cream .bento-card__icon { background-color: rgba(10, 31, 61, 0.08); color: var(--eie-navy); }
.bento-card--cream .bento-card__title { color: var(--eie-navy); }
.bento-card--cream .bento-card__text { color: var(--eie-grey-600); }
.bento-card--cream .bento-card__more { color: var(--eie-orange-deep); }

.bento-card--navy { background-color: var(--eie-navy); }
.bento-card--navy .bento-card__icon { background-color: rgba(255, 255, 255, 0.1); color: var(--eie-orange); }
.bento-card--navy .bento-card__title { color: var(--eie-white); }
.bento-card--navy .bento-card__text { color: rgba(255, 255, 255, 0.62); }
.bento-card--navy .bento-card__more { color: var(--eie-orange); }
.bento-card--navy .bento-card__title a:focus-visible { outline: 2px solid var(--eie-focus-dark); outline-offset: 3px; }

.bento-card--gold { background-image: linear-gradient(135deg, #2a1a00, #1a0f00); }
.bento-card--gold .bento-card__corner { background-color: var(--eie-gold); }
.bento-card--gold .bento-card__icon { background-color: rgba(200, 162, 74, 0.2); color: var(--eie-gold); }
.bento-card--gold .bento-card__title { color: var(--eie-white); }
.bento-card--gold .bento-card__text { color: rgba(255, 255, 255, 0.62); }
.bento-card--gold .bento-card__more { color: var(--eie-gold); }
.bento-card--gold .bento-card__title a:focus-visible { outline: 2px solid var(--eie-gold); outline-offset: 3px; }

/* ==========================================================================
   HOSPITALITY — flagship photo split (gold is hospitality-only)
   ========================================================================== */
.home-hospitality {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, #1a0f00 0%, #2a1a00 100%);
  color: var(--eie-white);
}
.home-hospitality__bg { position: absolute; inset: 0; }
.home-hospitality__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.2; }
.home-hospitality__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(26, 15, 0, 0.95), rgba(26, 15, 0, 0.6));
}
/* The grid swaps sides in RTL, so the strong end of the scrim must swap with
   it — otherwise the dense side covers the photo and the text sits over the
   thin side, losing the contrast this scrim exists to guarantee. */
[dir="rtl"] .home-hospitality__bg::after {
  background-image: linear-gradient(270deg, rgba(26, 15, 0, 0.95), rgba(26, 15, 0, 0.6));
}
.home-hospitality__grid { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 4vw, 4rem); }
@media (min-width: 64rem) {
  .home-hospitality__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.home-hospitality__lede { color: rgba(255, 255, 255, 0.68); line-height: 1.7; margin-block: 0 2rem; max-inline-size: 56ch; }
.home-hospitality__layers {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.home-hospitality__layer { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.74); }
.home-hospitality__dot { flex: 0 0 auto; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background-color: var(--eie-gold); }
.home-hospitality__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--eie-gold);
  text-decoration: none;
}
.home-hospitality__link:hover { gap: 0.75rem; }
.home-hospitality__link:focus-visible { outline: 2px solid var(--eie-gold); outline-offset: 3px; }
.home-hospitality__arrow { transition: transform var(--eie-duration-base) var(--eie-ease-out); }

.home-hospitality__media { position: relative; display: none; }
@media (min-width: 64rem) { .home-hospitality__media { display: block; } }
.home-hospitality__img {
  display: block;
  inline-size: 100%;
  block-size: clamp(22rem, 16rem + 16vw, 30rem);
  object-fit: cover;
  border-radius: var(--eie-radius-card);
  box-shadow: var(--eie-shadow-elegant);
}
.home-hospitality__caption {
  position: absolute;
  inset-inline: 1.5rem;
  inset-block-end: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(6, 10, 4, 0.62);
  backdrop-filter: blur(10px);
}
.home-hospitality__caption-label {
  margin: 0 0 0.25rem;
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eie-gold);
}
.home-hospitality__caption-text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   SECTORS — photographic mosaic
   ========================================================================== */
.home-sectors { background-color: var(--eie-cream); }
.home-sectors__mosaic {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row dense;
}
@media (min-width: 40rem) { .home-sectors__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .home-sectors__mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 4 cells (flagship 2x2) + 2 (one wide) + 6 singles = 12 over 3 columns. */
  .home-sectors__mosaic .photo-tile--wide { grid-column: span 2; }
  .home-sectors__mosaic .photo-tile--tall { grid-row: span 2; }
}

.photo-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 0.75rem;
  min-block-size: 16.25rem;
  isolation: isolate;
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.photo-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(10, 31, 61, 0.14); }
.photo-tile__media { position: absolute; inset: 0; z-index: -1; background-color: var(--eie-navy); }
.photo-tile__media picture { display: block; inline-size: 100%; block-size: 100%; }
.photo-tile__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--eie-photo-x, 50%) var(--eie-photo-y, 50%);
  transition: transform 500ms var(--eie-ease-out);
}
.photo-tile:hover .photo-tile__img { transform: scale(1.05); }
.photo-tile[data-eie-photo-motion]:hover .photo-tile__img { transform: scale(1.03); }
.photo-tile__illustrative-label {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 1;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--eie-radius-pill);
  color: var(--eie-white);
  background-color: rgba(6, 21, 43, 0.82);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
[dir="rtl"] .photo-tile__illustrative-label { letter-spacing: 0; }
.photo-motion-toggle {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: var(--eie-white);
  background-color: rgba(6, 21, 43, 0.86);
  cursor: pointer;
}
.photo-tile.is-photo-motion-active .photo-motion-toggle,
.photo-motion-toggle:focus { display: inline-flex; }
.photo-motion-toggle:hover { background-color: var(--eie-navy-deep); }
.photo-motion-toggle:focus-visible {
  outline: 3px solid var(--eie-orange);
  outline-offset: 2px;
}
.photo-motion-toggle__icon { inline-size: 1.125rem; block-size: 1.125rem; fill: currentColor; }
.photo-motion-toggle__play { display: none; }
.photo-motion-toggle[data-motion-paused="true"] .photo-motion-toggle__pause { display: none; }
.photo-motion-toggle[data-motion-paused="true"] .photo-motion-toggle__play { display: block; }
@keyframes eie-photo-drift-left {
  from { transform: scale(1.02) translate3d(0.75%, 0, 0); }
  to { transform: scale(1.03) translate3d(-0.75%, 0, 0); }
}
@keyframes eie-photo-drift-right {
  from { transform: scale(1.02) translate3d(-0.75%, 0, 0); }
  to { transform: scale(1.03) translate3d(0.75%, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .photo-tile.is-photo-motion-active[data-eie-photo-motion="drift-left"] .photo-tile__img {
    animation: eie-photo-drift-left 20s ease-in-out infinite alternate;
  }
  .photo-tile.is-photo-motion-active[data-eie-photo-motion="drift-right"] .photo-tile__img {
    animation: eie-photo-drift-right 20s ease-in-out infinite alternate;
  }
  .photo-tile.is-photo-motion-active.is-photo-motion-paused .photo-tile__img { animation-play-state: paused; }
}
.photo-tile__scrim {
  position: absolute;
  inset: 0;
  /* Weighted to the lower half, where the title and lede sit: the Riyadh
     skyline tile puts bright city lights directly behind that text. */
  background-image: linear-gradient(to top, rgba(6, 21, 43, 0.96) 0%, rgba(10, 31, 61, 0.86) 30%, rgba(10, 31, 61, 0.42) 62%, rgba(10, 31, 61, 0.12) 100%);
}
.photo-tile__badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eie-navy-deep);
  background-color: var(--eie-gold);
}
.photo-tile__body { display: flex; flex-direction: column; justify-content: flex-end; inline-size: 100%; padding: 1.5rem; }
.photo-tile__title { font-size: 1.25rem; line-height: 1.25; color: var(--eie-white); margin: 0 0 0.4rem; }
.photo-tile__title a { color: inherit; text-decoration: none; }
.photo-tile__title a::after { content: ""; position: absolute; inset: 0; }
.photo-tile__title a:focus-visible { outline: 2px solid var(--eie-focus-dark); outline-offset: 3px; }
.photo-tile__text { font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.68); margin: 0; }
.photo-tile__more {
  margin-block-start: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--eie-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.photo-tile__arrow { transition: transform var(--eie-duration-base) var(--eie-ease-out); }
.photo-tile:hover .photo-tile__arrow { transform: translateX(3px); }
[dir="rtl"] .photo-tile:hover .photo-tile__arrow { transform: translateX(-3px); }
.photo-tile--flagship .photo-tile__more { color: var(--eie-gold); }
.photo-tile--flagship .photo-tile__title a:focus-visible { outline-color: var(--eie-gold); }
.photo-tile--tall .photo-tile__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }

/* ---------- Governed media frame ---------- */
.media-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 10rem;
  padding: 1.25rem;
  text-align: center;
  /* Measured 3.44:1 at 0.55 on navy-deep. The label is aria-hidden but it is
     still visible text, so 1.4.3 applies: 0.85 measures 6.7:1. */
  color: rgba(245, 166, 35, 0.85);
  background-color: var(--eie-navy-deep);
  background-image:
    radial-gradient(120% 90% at 22% 8%, rgba(18, 48, 92, 0.95) 0%, rgba(6, 21, 43, 0) 62%),
    linear-gradient(150deg, var(--eie-navy) 0%, var(--eie-navy-deep) 78%);
}
.media-frame--gold {
  color: rgba(200, 162, 74, 0.9);
  background-image:
    radial-gradient(120% 90% at 22% 8%, rgba(200, 162, 74, 0.22) 0%, rgba(6, 21, 43, 0) 62%),
    linear-gradient(150deg, #241703 0%, #120c02 78%);
}
.media-frame__motif {
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0.09;
}
.media-frame__motif .schematic-bg { inline-size: 100%; block-size: 100%; }
.media-frame__mark { position: relative; inline-size: 2rem; block-size: 2rem; opacity: 0.8; }
.media-frame__mark svg { inline-size: 100%; block-size: 100%; }
/* Inside a sector tile the frame shares the box with the tile's own title and
   description, which are pinned to the bottom edge. Centred frame content
   collided with them — the "PHOTOGRAPHY PENDING" pill printed straight through
   the heading. Anchor the frame to the top-start instead, so the governed slot
   reads as a badge above the copy rather than behind it. */
.photo-tile__media .media-frame {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: start;
  gap: 0.5rem;
  padding: 1.25rem;
}
.photo-tile__media .media-frame__mark { inline-size: 1.5rem; block-size: 1.5rem; }
.photo-tile__media .media-frame__label { font-size: 0.625rem; padding: 0.2rem 0.55rem; }

.media-frame__label {
  position: relative;
  max-inline-size: 24ch;
  padding: 0.3rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: var(--eie-radius-pill);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ==========================================================================
   DIFFERENTIATION — navy, glass cards
   ========================================================================== */
.home-difference { position: relative; overflow: hidden; background-color: var(--eie-navy); color: var(--eie-white); }
.home-difference__motif { position: absolute; inset: 0; color: rgba(255, 255, 255, 0.5); opacity: 0.05; }
.home-cta__motif { position: absolute; inset: 0; color: rgba(255, 255, 255, 0.5); opacity: 0.06; }
.schematic-bg { inline-size: 100%; block-size: 100%; }
.home-difference__grid { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 4vw, 4rem); }
@media (min-width: 64rem) {
  .home-difference__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.home-difference__lede { color: rgba(255, 255, 255, 0.62); line-height: 1.7; margin: 0; max-inline-size: 52ch; }
.home-difference__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .home-difference__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-difference__card {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color var(--eie-duration-base) var(--eie-ease-out);
}
.home-difference__card:hover { background-color: rgba(255, 255, 255, 0.08); }
.home-difference__rule { display: block; inline-size: 2rem; block-size: 2px; background-color: var(--eie-orange); margin-block-end: 0.85rem; }
.home-difference__card-title { font-size: 1.0625rem; color: var(--eie-white); margin: 0 0 0.5rem; }
.home-difference__card-text { font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.58); margin: 0; }

/* ==========================================================================
   CAREERS — dark feature band (no vacancy is implied anywhere)
   ========================================================================== */
.home-careers {
  position: relative;
  background-image: linear-gradient(135deg, var(--eie-navy) 0%, #112952 100%);
  color: var(--eie-white);
}
.home-careers__tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) { .home-careers__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-careers__track {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.04);
}
.home-careers__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.5rem;
  background-color: rgba(245, 166, 35, 0.14);
  color: var(--eie-orange);
}
.home-careers__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.home-careers__track-body { min-inline-size: 0; }
.home-careers__track-title { font-size: 1rem; color: var(--eie-white); margin: 0 0 0.35rem; }
.home-careers__track-text { font-size: 0.875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.58); margin: 0; }
.home-careers__note { margin-block-start: 1.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); max-inline-size: 62ch; }

/* ==========================================================================
   INSIGHTS — editorial two-tone grid
   ========================================================================== */
.home-insights { background-color: var(--eie-white); }
.home-insights__grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .home-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .home-insights__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-insights__grid .ed-card--featured,
  .home-insights__grid .ed-card--topics { grid-column: span 2; }
}

.ed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--eie-grey-100);
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              box-shadow var(--eie-duration-base) var(--eie-ease-out);
}
.ed-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(10, 31, 61, 0.14); }
.ed-card__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  min-block-size: 7.5rem;
  background-color: var(--eie-navy);
}
.ed-card--featured .ed-card__head,
.ed-card--topics .ed-card__head { min-block-size: 12.5rem; }
.ed-card__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eie-orange);
}
.ed-card__title { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--eie-white); }
.ed-card--featured .ed-card__title,
.ed-card--topics .ed-card__title { font-size: 1.25rem; }
.ed-card__title a { color: inherit; text-decoration: none; }
.ed-card__title a::after { content: ""; position: absolute; inset: 0; }
.ed-card__title a:focus-visible { outline: 2px solid var(--eie-focus-dark); outline-offset: 3px; }
.ed-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem; background-color: var(--eie-white); }
.ed-card__text { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--eie-grey-600); }
.ed-card__foot { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ed-card__meta { font-size: 0.75rem; color: var(--eie-grey-500); }
.ed-card__dot { margin-inline: 0.4rem; }
.ed-card__arrow { color: var(--eie-orange-deep); transition: transform var(--eie-duration-base) var(--eie-ease-out); }
.ed-card:hover .ed-card__arrow { transform: translateX(3px); }
[dir="rtl"] .ed-card:hover .ed-card__arrow { transform: translateX(-3px); }
.ed-card__topics { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ed-card__topics a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--eie-radius-pill);
  border: 1px solid var(--eie-grey-100);
  background-color: var(--eie-grey-50);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--eie-navy);
  text-decoration: none;
}
.ed-card__topics a:hover { border-color: var(--eie-orange); color: var(--eie-orange-deep); }
.ed-card__note { margin: auto 0 0; font-size: 0.8125rem; color: var(--eie-grey-500); }

/* ==========================================================================
   CLOSING CTA — navy, centred
   ========================================================================== */
.home-cta {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--eie-navy-deep) 0%, var(--eie-navy) 100%);
  color: var(--eie-white);
}
.home-cta__inner { position: relative; max-inline-size: 48rem; text-align: center; }
.home-cta__eyebrow {
  margin: 0 0 1rem;
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 246, 242, 0.6);
}
.home-cta__title { margin: 0 0 1.5rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.12; color: var(--eie-white); }
.home-cta__lede { margin: 0 auto 2.5rem; font-size: var(--eie-text-body-lg); line-height: 1.7; color: rgba(255, 255, 255, 0.64); max-inline-size: 54ch; }
.home-cta__actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
@media (min-width: 40rem) { .home-cta__actions { flex-direction: row; justify-content: center; } }
.home-cta__offices {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
}
.home-cta__office { display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.42); }
.home-cta__office-city { color: rgba(255, 255, 255, 0.72); }
.home-cta__office-role {
  /* Inheriting the parent's 0.42 white measured 3.94:1 on the navy gradient —
     under AA for normal text. 0.66 measures 7.8:1. */
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Reduced motion — every band above animates transform/opacity only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bento-card,
  .photo-tile,
  .ed-card,
  .photo-tile__img,
  .bento-card__arrow,
  .photo-tile__arrow,
  .ed-card__arrow,
  .home-hospitality__arrow {
    transition: none;
  }
  .bento-card:hover,
  .photo-tile:hover,
  .ed-card:hover { transform: none; }
  .photo-tile:hover .photo-tile__img { transform: none; }
}

/* ==========================================================================
   MANUS CHROME PARITY — deep footer
   --------------------------------------------------------------------------
   The reference footer opens with a contact band, then a five-column link
   register, then a legal bar. Its own build has no Footer component in the
   export, so this is built from the live probe.

   Five of its columns (Parking, BMS, Teams, AV, Virtualisation) are dropped:
   none of those routes exist here, and a footer that links nowhere is worse
   than a shorter one.
   ========================================================================== */

.site-footer__lead {
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(135deg, rgba(18, 48, 92, 0.55) 0%, rgba(6, 21, 43, 0) 70%);
  margin-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.site-footer__lead-inner { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 64rem) {
  .site-footer__lead-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer__lead-contact { grid-column: 1 / -1; }
}
.site-footer__lead-eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eie-orange);
}
.site-footer__lead-title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--eie-white);
}
.site-footer__lead-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.site-footer__lead-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.site-footer__lead-tel,
.site-footer__lead-mail {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--eie-text-small);
  font-weight: 600;
  transition: color var(--eie-duration-fast) var(--eie-ease-out);
}
.site-footer__lead-tel:hover,
.site-footer__lead-tel:focus-visible,
.site-footer__lead-mail:hover,
.site-footer__lead-mail:focus-visible { color: var(--eie-orange); }

.site-footer__blurb {
  margin-block: 0.85rem 0;
  font-size: var(--eie-text-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.52);
  max-inline-size: 34ch;
}

/* Five columns now that Sectors has joined the register. */
@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; }
}

.site-footer__office-role {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 0.45 measured 4.47:1 on navy-deep — resting on the AA line. 0.58 is 6.7:1. */
  color: rgba(255, 255, 255, 0.58);
}
.site-footer__office-city { color: var(--eie-white); font-weight: 600; }
.site-footer__office-street { color: rgba(255, 255, 255, 0.55); line-height: 1.45; }

/* ==========================================================================
   MANUS MENU PARITY — desktop mega panels + mobile drawer disclosures
   --------------------------------------------------------------------------
   Reference measurements (live, 1440x900): header 72px; nav links 14px/500 at
   85% white; Solutions panel 800x601 as a 3-column grid of 244.7px with a 16px
   gap; Sectors 520x413; More 520x324; all panels navy with a 6px radius.

   The header's own positioning model is deliberately NOT changed. The reference
   header is `fixed` and transparent over its hero; this one is `sticky` and in
   flow. Making it fixed would pull the locked homepage hero up by the header's
   height — a hero layout change, which is a blocker.
   ========================================================================== */

@media (min-width: 64rem) {
  .site-header__nav { display: flex; align-items: center; }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item { position: relative; display: flex; align-items: center; }

.site-nav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-family: var(--eie-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: color var(--eie-duration-fast) var(--eie-ease-out),
              background-color var(--eie-duration-fast) var(--eie-ease-out);
}
.site-nav__link:hover { color: var(--eie-white); background-color: rgba(255, 255, 255, 0.06); }
.site-nav__item.is-current > .site-nav__link { color: var(--eie-orange); }

/* Active underline — the reference marks the current branch in orange. */
.site-nav__item.is-current::after {
  content: "";
  position: absolute;
  inset-block-end: -0.35rem;
  inset-inline: 0.75rem;
  block-size: 2px;
  border-radius: 2px;
  background-color: var(--eie-orange);
}

/* The disclosure is a separate control from the link: one element cannot be
   both "go to the archive" and "open the panel" for a keyboard user. */
.site-nav__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 2rem;
  margin-inline-start: -0.4rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
}
.site-nav__disclosure:hover { color: var(--eie-white); }
.site-nav__chevron {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--eie-duration-fast) var(--eie-ease-out);
}
.site-nav__item.is-open .site-nav__chevron { transform: rotate(-135deg) translate(-1px, -1px); }
.site-nav__item.is-open > .site-nav__link { color: var(--eie-white); background-color: rgba(255, 255, 255, 0.06); }

/* ---------- Mega panel ---------- */
.mega {
  position: absolute;
  inset-block-start: calc(100% + 0.75rem);
  inset-inline-start: 0;
  z-index: 120;
  inline-size: 32.5rem;                 /* 520px — Sectors / Company */
  padding: 1.25rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--eie-navy);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
}
.mega--wide { inline-size: 50rem; }     /* 800px — Solutions / Sectors */
.mega[hidden] { display: none; }

/* Keep a wide panel inside the viewport when its trigger sits far right. */
@media (min-width: 64rem) {
  .site-nav__item:nth-last-child(-n+3) .mega { inset-inline-start: auto; inset-inline-end: 0; }
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega--wide .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mega__link {
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color var(--eie-duration-fast) var(--eie-ease-out);
}
.mega__link:hover { background-color: rgba(255, 255, 255, 0.06); }
.mega__link:focus-visible { outline: 2px solid var(--eie-focus-dark); outline-offset: 2px; }
.mega__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--eie-white);
  margin-block-end: 0.2rem;
}
.mega__desc {
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mega__link:hover .mega__desc { color: rgba(255, 255, 255, 0.78); }

.mega__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  inline-size: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--eie-orange);
  text-decoration: none;
}
.mega__all:hover { color: var(--eie-orange); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Mobile drawer ---------- */

/* The drawer lives inside the sticky header, so with three disclosures open it
   would otherwise grow past the viewport and drag the header with it. Give it
   its own scroll area and stop scroll chaining, then lock the page behind it.
   Doing the lock in CSS keeps it declarative — a11y.js already owns open/close
   and does not need a second script reaching into it. Engines without :has()
   simply do not lock, which is a degraded experience rather than a broken one. */
.site-drawer.is-open {
  max-block-size: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body:has(.site-drawer.is-open) { overflow: hidden; }

.site-drawer__list { list-style: none; margin: 0; padding: 0; }
.site-drawer__item { border-block-end: 1px solid rgba(255, 255, 255, 0.08); }
.site-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.site-drawer__link {
  flex: 1 1 auto;
  display: block;
  padding-block: 0.95rem;
  font-family: var(--eie-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
.site-drawer__item.is-current > .site-drawer__row > .site-drawer__link { color: var(--eie-orange); }

.site-drawer__disclosure {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;               /* >=44px tap target (WCAG 2.5.8) */
  block-size: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
}
.site-drawer__chevron {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--eie-duration-fast) var(--eie-ease-out);
}
.site-drawer__item.is-open .site-drawer__chevron { transform: rotate(-135deg) translate(-1px, -1px); }

.site-drawer__sublist { list-style: none; margin: 0; padding: 0 0 0.75rem; }
.site-drawer__sublist[hidden] { display: none; }
.site-drawer__sublink {
  display: block;
  padding: 0.6rem 0 0.6rem 0.9rem;
  border-inline-start: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.site-drawer__sublink:hover,
.site-drawer__sublink:focus-visible { color: var(--eie-orange); border-inline-start-color: var(--eie-orange); }

@media (prefers-reduced-motion: reduce) {
  .site-nav__chevron,
  .site-drawer__chevron,
  .site-nav__link,
  .mega__link { transition: none; }
}

/* ==========================================================================
   SPECIALISMS — restored Manus §6
   --------------------------------------------------------------------------
   Reference: band #060F1E, py 96px, 3 columns of 378.7px with a 24px gap, five
   cards, serif h3 at 20px, four tag pills per card, and a photograph washed
   behind each card at 15% opacity.

   Two things differ deliberately. The wash is the local circuit motif, because
   at 15% the reference's image is texture rather than photography and nothing
   here should imply a photograph exists. And one card spans two columns: five
   cards over three columns leaves a trailing hole, which the reference itself
   has and which this build closes everywhere else.
   ========================================================================== */

.home-specialisms {
  background-color: #060f1e;
  color: var(--eie-white);
}
.home-specialisms__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .home-specialisms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .home-specialisms__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 4 singles + 1 double = 6 cells over 3 columns: two whole rows. */
  .home-specialisms__grid .spec-card--wide { grid-column: span 2; }
}

.spec-card {
  position: relative;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(160deg, rgba(18, 48, 92, 0.55) 0%, rgba(6, 15, 30, 0.9) 62%);
  transition: transform var(--eie-duration-base) var(--eie-ease-out),
              border-color var(--eie-duration-base) var(--eie-ease-out);
}
.spec-card:hover { transform: translateY(-4px); border-color: rgba(245, 166, 35, 0.35); }

/* The reference's 15%-opacity photo wash, as texture rather than photography. */
.spec-card__motif {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0.07;
}
.spec-card__motif .schematic-bg { inline-size: 100%; block-size: 100%; }

.spec-card__body {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}
.spec-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.5rem;
  background-color: rgba(245, 166, 35, 0.14);
  color: var(--eie-orange);
  margin-block-end: 1.1rem;
}
.spec-card__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }

.spec-card__eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--eie-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.spec-card__title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--eie-white);
}
.spec-card__link { color: inherit; text-decoration: none; }
.spec-card__link::after { content: ""; position: absolute; inset: 0; }
.spec-card__link:focus-visible { outline: 2px solid var(--eie-focus-dark); outline-offset: 3px; }
.spec-card__text {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}
.spec-card__tags {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.spec-card__tag {
  padding: 0.22rem 0.6rem;
  border-radius: var(--eie-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.04);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}
.spec-card__more {
  margin-block-start: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--eie-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.spec-card__arrow { transition: transform var(--eie-duration-base) var(--eie-ease-out); }
.spec-card:hover .spec-card__arrow { transform: translateX(3px); }
[dir="rtl"] .spec-card:hover .spec-card__arrow { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .spec-card,
  .spec-card__arrow { transition: none; }
  .spec-card:hover { transform: none; }
  .spec-card:hover .spec-card__arrow { transform: none; }
}

/* ==========================================================================
   SAFE DIVI-EDITABLE PAGE SECTIONS
   --------------------------------------------------------------------------
   An editor-owned region has to inherit the design system without the theme
   reaching into the Divi parent's own classes. So everything here styles
   ORDINARY elements — headings, paragraphs, lists, links, tables, images —
   which works identically for a Divi text module, a Gutenberg block, or plain
   HTML pasted into the editor. The parent theme's own module class names are
   deliberately never referenced: overriding them would fight Divi and break the
   moment it renames one.

   The region is additive. It renders only when an editor has put governed
   content there, so an empty layout leaves no band and no hole.
   ========================================================================== */

.editable-region { background-color: var(--eie-white); }
.editable-region--cream { background-color: var(--eie-cream); }
.editable-region--navy {
  background-color: var(--eie-navy);
  color: var(--eie-white);
}

.editable-region__inner > *:first-child { margin-block-start: 0; }
.editable-region__inner > *:last-child { margin-block-end: 0; }

/* Typography: same scale and serif/sans split as the rest of the site. Every
   level an editor can produce is covered — an h5 or h6 nobody styled would
   render at browser defaults, off-system. An h1 never arrives: the region
   demotes it so the page keeps exactly one. */
.editable-region__inner :is(h2, h3, h4, h5, h6) {
  letter-spacing: -0.02em;
  color: var(--eie-navy);
  margin-block: 2rem 0.75rem;
}
.editable-region__inner h2 { font-size: var(--eie-text-h2); line-height: 1.15; }
.editable-region__inner h3 { font-size: var(--eie-text-h3); line-height: 1.25; }
.editable-region__inner h4 { font-size: 1.125rem; line-height: 1.3; }
.editable-region__inner :is(h5, h6) {
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.editable-region--navy .editable-region__inner :is(h2, h3, h4, h5, h6) { color: var(--eie-white); }

.editable-region__inner p,
.editable-region__inner li {
  font-size: var(--eie-text-body);
  line-height: 1.7;
  color: var(--eie-grey-600);
}
.editable-region--navy .editable-region__inner :is(p, li) { color: rgba(255, 255, 255, 0.78); }
.editable-region__inner p { margin-block: 0 1.1rem; max-inline-size: 70ch; }
.editable-region__inner :is(ul, ol) { margin-block: 0 1.25rem; padding-inline-start: 1.35rem; max-inline-size: 70ch; }
.editable-region__inner li { margin-block-end: 0.4rem; }
.editable-region__inner li::marker { color: var(--eie-orange); }

.editable-region__inner a { color: var(--eie-orange-deep); text-decoration: underline; text-underline-offset: 0.15em; }
.editable-region__inner a:hover { color: var(--eie-navy); }
/* Hover on the navy tone needs the same specificity as the base link rule, or
   the two tie and source order silently wins. */
.editable-region--navy .editable-region__inner a { color: var(--eie-orange); }
.editable-region--navy .editable-region__inner a:hover { color: var(--eie-white); }
/* Focus is NOT restated here. Section 13 already gives every link and every
   [tabindex] element the site's 3px indicator; a local rule would only be a
   second, weaker copy of it. The navy tone is registered with that system
   instead — see the dark-surface scope list. */

.editable-region__inner blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--eie-orange);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.35rem);
  line-height: 1.5;
  color: var(--eie-navy);
}
.editable-region--navy .editable-region__inner blockquote { color: var(--eie-white); }

/* Media never breaks the grid, whatever an editor drops in. */
.editable-region__inner :is(img, video, iframe) {
  max-inline-size: 100%;
  border-radius: var(--eie-radius-card);
}
/* Height is reset for images and video only. An embed ships with a height
   attribute, and block-size:auto discards it — an iframe with an auto height
   falls back to the 150px replaced-element default and the embed collapses. */
.editable-region__inner :is(img, video) { block-size: auto; }
.editable-region__inner iframe { aspect-ratio: 16 / 9; block-size: auto; }

/* Tables scroll rather than forcing the page to — but the scrolling happens on
   the wrapper the region adds, never on the <table>. `display: block` on a
   table is the usual one-line fix and it drops the table's role out of the
   accessibility tree, so a screen reader stops announcing rows and columns.
   The wrapper carries role="region" and tabindex="0" so the scrollable area is
   also reachable by keyboard. */
.editable-region__scroll {
  overflow-x: auto;
  max-inline-size: 100%;
  margin-block: 0 1.25rem;
}
.editable-region__inner table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--eie-text-small);
  margin-block: 0;
}
.editable-region__inner :is(th, td) {
  border: 1px solid var(--eie-grey-100);
  padding: 0.5rem 0.7rem;
  text-align: start;
}
.editable-region__inner th { background-color: var(--eie-grey-50); font-weight: 600; color: var(--eie-navy); }

/* -----------------------------------------------------------------------------
   Long-form legal document (page-privacy-policy.php + sections/legal-document).

   .t-prose caps the measure at 70ch for readability, which is right — but it is
   `text-align: start`, so inside the wider .app-container--prose it hugged the
   inline start and left the remainder as dead space on one side. Centring the
   BLOCK keeps the 70ch measure and removes the lopsided gutter; it does not
   centre the text.
   -------------------------------------------------------------------------- */
.legal-doc { margin-inline: auto; }

/* The lede is the page's opening statement, but `.editable-region__inner p`
   (0,2,0) beat `.t-body-lg` (0,1,0), so it rendered at body size — a 4-sentence
   wall of bold grey with no size step. Matched specificity restores the step. */
.legal-doc .legal-doc__lede {
  font-size: var(--eie-text-body-lg);
  line-height: 1.6;
  margin-block-end: 1.5rem;
}

/* --eie-grey-700 is not defined anywhere; every other use writes the fallback.
   Without it the declaration is invalid at computed-value time and the meta line
   inherited body colour, so "Effective Date" had no visual distinction at all. */
.legal-doc .legal-doc__meta { color: var(--eie-grey-700, #334155); }

/* The blockquote's own colour and size were being applied to the element while
   its <p> child kept body styling — so the pull-quote rendered SMALLER and
   lighter than the copy it exists to emphasise. Style the child. */
.legal-doc .legal-doc__callout > p {
  font-size: var(--eie-text-body-lg);
  color: var(--eie-navy);
}

/* `padding-inline-start: 0` lost to `.editable-region__inner :is(ul, ol)`
   (0,1,1 beats 0,1,0 — source order is irrelevant), so the contact block hung
   21.6px right of every paragraph. */
.legal-doc ul.legal-doc__contact {
  list-style: none;
  padding-inline-start: 0;
}

/* LIST MARKERS. The Divi parent resets `ol, ul { list-style: none }`, and
   `.editable-region__inner` never restored it — so 33 <li> rendered as bare
   indented text and the `li::marker` colour rule below was styling a marker box
   that did not exist. Restoring the marker is what makes that rule real. */
.editable-region__inner :is(ul, ol) { list-style: revert; }
.editable-region__inner ul { list-style-type: disc; }
.editable-region__inner ol { list-style-type: decimal; }

/* RTL: `border-inline-start` flips to the right and leaves Divi's
   `blockquote { border-left: 5px solid #2EA3F2; padding-left: 20px }` unopposed —
   an off-brand 5px blue bar on the wrong side, and 20px of dead space beside the
   side that has no border. The first fix reset the border and left the padding,
   so the callout's content box narrowed by 20px in RTL. Reset both physical
   declarations; the logical ones already mirror correctly. */
[dir="rtl"] .editable-region__inner blockquote,
[dir="rtl"] .legal-doc blockquote {
  border-left: 0;
  padding-left: 0;
}

/* §17 styles the breadcrumb list, items and links but never the <nav>, and the
   list zeroes the UA <ol> padding — so the trail sat flush at x=0 while the
   brand, hero and prose all respected the page gutter. The container itself is
   applied in page-privacy-policy.php (.app-container, the existing token), so
   the gutter clamp is not duplicated here; only the block rhythm is. */
.privacy-page > .app-container > .eie-breadcrumb {
  padding-block: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem) 0;
}