/* ==========================================================================
   ARK BRIDGE GROUP — main.css
   Foundation stylesheet shared by all pages.
   Table of contents
   -----------------
   1.  Design tokens (CSS variables)
   2.  Reset & base
   3.  Typography
   4.  Layout utilities (container, sections, viewport sections)
   5.  Navigation
   6.  Buttons
   7.  Section headers & labels
   8.  Cards & components
   9.  Page-specific: hero / CTA strip
   10. Footer
   11. Animations & reveal
   12. Responsive breakpoints
   13. RTL / bilingual support
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Scaled so that native 100% browser zoom matches the previous 90% appearance.
   All linear sizes reduced by ~0.9 while preserving proportions.
   ========================================================================== */
:root {
  /* Palette — navy / British racing green / champagne */
  --color-navy:        #10233B;
  --color-navy-deep:   #0B1929;
  --color-navy-soft:   #1C3554;
  --color-green:       #00331C;   /* deeper, richer British racing green */
  --color-green-deep:  #002413;
  --color-green-soft:  #0A5C36;
  --color-champagne:   #E9D8B4;
  --color-champagne-2: #F3EAD3;
  --color-cream:       #F5F1E8;   /* page background */
  --color-cream-alt:   #EDE7DA;   /* alternating section background */
  --color-card:        #FBF8F1;
  --color-ink:         #1E2430;   /* primary text */
  --color-ink-soft:    #4A5260;   /* secondary text */
  --color-line:        #D9D1C0;   /* hairlines / borders */

  /* Typography — Jost (refined geometric, Futura-inspired) for display */
  --font-display: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-arabic:  "Noto Kufi Arabic", "Noto Sans Arabic", "Tahoma", "Arial", sans-serif;

  /* Scaled type scale (≈0.9 of original) */
  --fs-hero:      clamp(1.89rem, 4.5vw, 3.375rem);
  --fs-title:     clamp(1.665rem, 3.42vw, 2.475rem);
  --fs-lead:      clamp(0.9rem, 1.26vw, 1.08rem);
  --fs-body:      0.9rem;
  --fs-small:     0.7875rem;
  --fs-label:     0.675rem;
  --tracking-label: 0.22em;
  --tracking-nav:   0.28em;

  /* Spacing scale — tightened for viewport-fitting sections (≈0.9) */
  --space-xs:  0.45rem;
  --space-sm:  0.9rem;
  --space-md:  1.35rem;
  --space-lg:  2.25rem;
  --space-xl:  3.6rem;
  --space-xxl: 5.4rem;

  /* Structure */
  --container-max: 1152px;
  --container-pad: clamp(1.125rem, 3.6vw, 2.7rem);
  --header-height: 76px;

  /* Effects */
  --radius:     5px;
  --radius-lg:  7px;
  --shadow:     0 16px 40px -16px rgba(16, 35, 59, 0.25);
  --shadow-sm:  0 7px 22px -11px rgba(16, 35, 59, 0.18);
  --transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-ink);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
::selection {
  background: var(--color-champagne);
  color: var(--color-navy-deep);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-navy);
  letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-title); }
h3 { font-size: clamp(1.035rem, 1.44vw, 1.215rem); }
p {
  max-width: 62ch;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Default section padding (used where viewport constraint is not applied) */
.section {
  padding-block: clamp(var(--space-lg), 5.4vw, var(--space-xl));
}
.section-alt {
  background-color: var(--color-cream-alt);
}
/* Full-viewport sections: one screen, no internal scroll */
.section-viewport {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.125rem, 2.7vw, 2.25rem);
  box-sizing: border-box;
}
.section-viewport-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
}
/* Visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   5. NAVIGATION
   (spacing mirrors the reference: wordmark left — links centred — CTA right)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-cream);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}
.hero-glass-page .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(245, 241, 232, 0.32);
  border-bottom-color: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.hero-glass-page .site-header.is-past-hero {
  background: var(--color-cream);
  border-bottom-color: var(--color-line);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-md);
}
/* Brand / wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.brand-logo {
  height: calc(var(--header-height) - 18px);
  max-width: 8.5rem;
  width: auto;
  display: block;
  object-fit: contain;
}
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
}
/* Primary links — centred cluster */
.nav-primary {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-list {
  display: flex;
  gap: clamp(var(--space-md), 3.6vw, 4.05rem);
}
.nav-link {
  position: relative;
  font-size: 0.702rem;
  font-weight: 500;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-ink);
  padding-block: var(--space-xs);
  transition: color var(--transition);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--color-green);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}
/* Right-hand actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/* Language switcher — single destination-language button */
.lang-toggle {
  font-size: 0.702rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding: var(--space-xs) 0;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transition);
  font-family: var(--font-sans);
}
.lang-toggle:hover {
  color: var(--color-navy);
}
html[lang="ar"] .lang-toggle {
  font-family: var(--font-arabic);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.lang-toggle[data-lang-next="ar"] {
  font-family: var(--font-arabic);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
}
/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-navy);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 0.702rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.35;
  padding: 0.495rem 1.125rem;
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.btn .btn-arrow {
  display: inline-block;
  margin-inline-start: var(--space-xs);
  transition: transform var(--transition);
}
.btn:hover .btn-arrow {
  transform: translateX(4px);
}
/* Sub-caption under the main label */
.btn .btn-sub {
  font-size: 0.585rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  opacity: 0.7;
  line-height: 1.3;
}
/* Frosted highlight overlay (shared) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.12) 100%
  );
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  border-radius: inherit;
}
.btn:hover::before {
  opacity: 1;
}
/* Solid — champagne on deep British racing green */
.btn-solid {
  background-color: var(--color-green);
  color: var(--color-champagne-2);
  border: 1px solid transparent;
}
.btn-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px -7px rgba(0, 36, 19, 0.45);
}
/* Outline — navy */
.btn-outline {
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  background-color: transparent;
}
.btn-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px -7px rgba(16, 35, 59, 0.22);
  border-color: var(--color-navy);
  /* keep text/border navy; frosted overlay provides the highlight */
}
/* Text link with arrow (nav CTA, footer links) */
.btn-text {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  color: var(--color-navy);
  overflow: visible;
}
.btn-text::before {
  display: none; /* no frosted overlay on text buttons */
}
.btn-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition);
  transform-origin: left;
}
.btn-text:hover {
  color: var(--color-green);
}
/* Light variant for dark sections */
.btn-light {
  background-color: var(--color-champagne);
  color: var(--color-navy-deep);
}
.btn-light:hover {
  box-shadow: 0 5px 16px -7px rgba(0, 0, 0, 0.25);
}
/* Single-line CTA (Section 4 “Let’s Talk”) — force one line, content-width */
.btn-cta-single {
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
  width: fit-content;
  padding: 0.54rem 1.215rem;
}
.btn-cta-single .btn-sub {
  display: none;
}

/* ==========================================================================
   7. SECTION HEADERS & LABELS
   ========================================================================== */
.section-head {
  max-width: 648px;
  margin-bottom: clamp(var(--space-md), 3.6vw, var(--space-lg));
}
/* Split header: title left + quote right with divider */
.section-head-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  gap: clamp(var(--space-md), 2.7vw, var(--space-xl));
  align-items: start;
  margin-bottom: clamp(var(--space-md), 3.15vw, var(--space-lg));
}
.section-head-left {
  min-width: 0;
}
.section-head-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-line);
  min-height: 4.05rem;
}
.section-quote {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.855rem, 1.125vw, 0.99rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: none;
  font-style: normal;
  border: 0;
  padding: 0;
}
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-sm);
}
.section-label-bar {
  display: inline-block;
  width: 2px;
  height: 1.25em;
  background: var(--color-navy);
}
.section-title {
  margin-bottom: 0;
  font-family: var(--font-display);
}
.section-intro {
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
}
.section-foot {
  margin-top: clamp(var(--space-md), 2.7vw, var(--space-lg));
}

/* ==========================================================================
   8. CARDS & COMPONENTS
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--space-md);
}
.card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
/* Generic / service cards — dual face for hover reveal */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.125rem, 1.8vw, 1.575rem);
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), border-color var(--transition);
}
.service-card {
  position: relative;
  overflow: hidden;
  min-height: 10.35rem;
  cursor: pointer;
}
.service-card:focus-visible {
  outline: 3px solid var(--color-champagne);
  outline-offset: 3px;
}
.service-card .card-face {
  transition: opacity var(--transition), transform var(--transition);
}
.service-card .card-face-default {
  opacity: 1;
  transform: translateY(0);
}
.service-card .card-face-hover {
  position: absolute;
  inset: 0;
  padding: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(9px);
  pointer-events: none;
  background: transparent;
}
.service-card:hover {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.service-card:hover .card-face-default {
  opacity: 0;
  transform: translateY(-7px);
}
.service-card:hover .card-face-hover {
  opacity: 1;
  transform: translateY(0);
}
.service-card:hover .card-title {
  color: var(--color-champagne-2);
}
.service-card:hover .card-text {
  color: rgba(243, 234, 211, 0.85);
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.035rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-navy);
  transition: color var(--transition);
}
.card-text {
  font-size: 0.7875rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  max-width: none;
  transition: color var(--transition);
}
/* People / leadership cards — focus-on-hover (camera focus effect) */
.card-grid-people {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--space-sm), 1.8vw, var(--space-md));
  position: relative;
  /* allow enlarged cards to escape without clipping */
  overflow: visible;
  padding-block: 0.45rem;
}
.person-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(0.675rem, 1.35vw, 0.9rem);
  position: relative;
  z-index: 1;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, filter;
}
/* Default photo treatment */
.person-photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-sm);
  background-color: var(--color-cream-alt);
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.person-name {
  font-family: var(--font-display);
  font-size: 0.855rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 2px;
}
.person-role {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
/* When the grid is hovered, soften every card… */
.card-grid-people:hover .person-card {
  filter: blur(2.5px) brightness(0.92);
  opacity: 0.78;
  transform: scale(0.96);
  z-index: 1;
}
/* …then restore and enlarge the one under the cursor */
.card-grid-people:hover .person-card:hover {
  filter: none;
  opacity: 1;
  z-index: 20;
  box-shadow: 0 25px 54px -18px rgba(16, 35, 59, 0.35);
  /* scale + slight upward lift so it comes toward the viewer */
  transform: scale(1.55) translateY(-16px);
}
.card-grid-people:hover .person-card:hover .person-photo img {
  filter: grayscale(0);
}
/* Intelligent origin so edge cards grow inward */
.card-grid-people .person-card:nth-child(1) {
  transform-origin: left center;
}
.card-grid-people .person-card:nth-child(2) {
  transform-origin: center center;
}
.card-grid-people .person-card:nth-child(3) {
  transform-origin: center center;
}
.card-grid-people .person-card:nth-child(4) {
  transform-origin: right center;
}
/* Ensure the leadership section itself does not clip the enlarged card */
#leadership {
  overflow: visible;
}
#leadership .section-viewport-inner {
  overflow: visible;
}

/* ==========================================================================
   9. PAGE-SPECIFIC — HERO & CTA STRIP
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.home-page .hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--header-height) + clamp(1.125rem, 2.7vw, 2.25rem));
  background-color: var(--color-cream);
  background-image: linear-gradient(to bottom, rgba(245,241,232,0.02) 0%, rgba(245,241,232,0.18) 48%, var(--color-cream) 100%), url("../assets/images/beige.jpg");
  background-size: cover;
  background-position: center top;
}
.hero-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Home keeps the network atmospheric: it lives only in the lower quarter. */
.hero .hero-network {
  clip-path: inset(75% 0 0);
}
/* Shared ARK Network canvas: page content always remains above the visual layer. */
.network-root {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.network-root > .container,
.network-root > .section-viewport-inner {
  position: relative;
  z-index: 1;
}
.hero-inner {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 46.8rem;
  margin-inline: auto;
}
.home-page .hero-inner::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-2.5rem -4rem;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(245,241,232,.88) 0%,rgba(245,241,232,.68) 38%,rgba(245,241,232,.2) 68%,transparent 82%);
  filter:blur(3px);
  pointer-events:none;
}
.hero-title {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  text-shadow:0 1px 1px rgba(245,241,232,.95),0 5px 20px rgba(245,241,232,.8);
}
.hero-title > span { display:block; white-space:nowrap; }
.home-page .hero-title {
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  text-align:center;
}
.hero-lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: var(--space-xs);
}
.hero-descriptor {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: clamp(var(--space-md), 2.7vw, var(--space-lg));
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: clamp(var(--space-md), 2.7vw, var(--space-lg));
}
.hero-cta .btn {
  align-items: center;
  text-align: center;
  min-width: 0;
  max-width: 15.3rem;
}
.hero-primary-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  min-height:3.15rem;
  padding:.7rem .72rem .7rem 1.25rem;
  border:1px solid rgba(233,216,180,.72);
  border-radius:999px;
  background:var(--color-green);
  color:var(--color-champagne-2);
  box-shadow:0 .8rem 2rem -.9rem rgba(0,36,19,.55),inset 0 1px rgba(255,255,255,.12);
  font-size:.69rem;
  font-weight:600;
  letter-spacing:.13em;
  line-height:1.2;
  text-transform:uppercase;
  transition:transform var(--transition),background-color var(--transition),box-shadow var(--transition);
}
.hero-primary-arrow {
  display:grid;
  place-items:center;
  width:1.8rem;
  height:1.8rem;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--color-champagne);
  color:var(--color-green-deep);
  font-size:.95rem;
  line-height:1;
  transition:transform var(--transition),background-color var(--transition);
}
.hero-primary-action:hover,
.hero-primary-action:focus-visible {
  transform:translateY(-2px);
  background:var(--color-green-deep);
  box-shadow:0 1rem 2.3rem -1rem rgba(0,36,19,.68),inset 0 1px rgba(255,255,255,.14);
}
.hero-primary-action:hover .hero-primary-arrow,
.hero-primary-action:focus-visible .hero-primary-arrow {
  transform:translateX(3px);
  background:var(--color-champagne-2);
}
.hero-primary-action:focus-visible {
  outline:2px solid var(--color-champagne);
  outline-offset:3px;
}
html[lang="ar"] .hero-primary-action {
  padding:.7rem 1.25rem .7rem .72rem;
  letter-spacing:.02em;
  font-family:var(--font-arabic);
  text-transform:none;
}
html[lang="ar"] .hero-primary-action:hover .hero-primary-arrow,
html[lang="ar"] .hero-primary-action:focus-visible .hero-primary-arrow {
  transform:translateX(-3px);
}
/* Scroll cue */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: color var(--transition);
}
.scroll-cue em {
  font-style: normal;
  color: var(--color-navy);
}
.scroll-cue:hover {
  color: var(--color-navy);
}
.scroll-cue-arrow {
  display: inline-block;
  animation: cue-bounce 2.2s ease-in-out infinite;
}
/* Closing CTA — compact sophisticated contact-conversion band */
.section-cta {
  background-color: var(--color-navy);
  text-align: left;
  /* Compact height: ~55–65vh, not full viewport */
  min-height: 0;
  height: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  align-items: center;
}
.section-cta .cta-stage { z-index: 1; }
.section-cta .cta-network {
  right: 50%;
  width: 50%;
  opacity: 0.23;
  -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%);
  mask-image: linear-gradient(to right, #000 68%, transparent 100%);
}
.section-cta.section-viewport {
  min-height: clamp(28rem, 60vh, 38rem);
  min-height: clamp(28rem, 60dvh, 38rem);
  justify-content: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.cta-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  width: 100%;
  min-height: 16rem;
  position: relative;
}
.cta-statement {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  text-align: center;
  z-index: 2;
  transition:
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: min(100%, 22rem);
}
.section-cta.cta-phase-split .cta-statement {
  grid-column: 1;
  justify-self: end;
  text-align: end;
  width: 100%;
  max-width: 22rem;
  padding-inline-end: 0.5rem;
}
/* Arabic: statement moves to the RIGHT half */
.section-cta.is-rtl-cta.cta-phase-split .cta-statement {
  grid-column: 3;
  justify-self: start;
  text-align: start;
  padding-inline-end: 0;
  padding-inline-start: 0.5rem;
}
.section-cta .cta-title {
  font-family: var(--font-display);
  color: var(--color-champagne-2);
  margin-bottom: 0;
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: none;
}
.section-cta .cta-line-1 {
  display: block;
  font-weight: 400;
  opacity: 0.92;
}
.section-cta .cta-line-2 {
  display: block;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Divider */
.cta-divider {
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 0;
  background: rgba(233, 216, 180, 0.35);
  justify-self: center;
  align-self: center;
  opacity: 0;
  transition:
    height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.4s ease;
}
.section-cta.cta-phase-divider .cta-divider {
  height: min(14rem, 42vh);
  opacity: 1;
}
/* Form panel */
.cta-form-panel {
  grid-column: 3;
  grid-row: 1;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
  max-width: 26rem;
  width: 100%;
  justify-self: start;
}
.section-cta.is-rtl-cta .cta-form-panel {
  grid-column: 1;
  justify-self: end;
}
.section-cta.cta-phase-form .cta-form-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cta-form-heading {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: 0.35rem;
}
.cta-form-lead {
  font-size: 0.8rem;
  color: rgba(243, 234, 211, 0.65);
  margin-bottom: 1rem;
  max-width: none;
}
.cta-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cta-field-label,
.cta-field label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 216, 180, 0.7);
  margin-bottom: 0.3rem;
}
.cta-input,
.cta-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-champagne-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(233, 216, 180, 0.3);
  border-radius: 0;
  padding: 0.45rem 0;
  transition: border-color var(--transition);
}
.cta-input:focus,
.cta-textarea:focus {
  outline: none;
  border-bottom-color: var(--color-champagne);
}
.cta-input::placeholder,
.cta-textarea::placeholder {
  color: rgba(243, 234, 211, 0.35);
}
.cta-textarea {
  min-height: 4.5rem;
  resize: vertical;
}
.cta-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cta-cat-btn {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(243, 234, 211, 0.75);
  background: transparent;
  border: 1px solid rgba(233, 216, 180, 0.28);
  border-radius: var(--radius);
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  transition:
    color var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}
.cta-cat-btn:hover {
  color: var(--color-champagne-2);
  border-color: rgba(233, 216, 180, 0.55);
}
.cta-cat-btn.is-selected {
  color: var(--color-navy-deep);
  background-color: var(--color-champagne);
  border-color: var(--color-champagne);
}
.cta-submit {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-champagne);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(233, 216, 180, 0.4);
  padding: 0.35rem 0;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.cta-submit:hover {
  color: var(--color-champagne-2);
  border-bottom-color: var(--color-champagne-2);
}
.cta-submit.is-sent {
  opacity: 0.6;
  pointer-events: none;
}
.cta-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cta-form-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}
.cta-form-status.is-success { color: var(--color-green); }
.cta-form-status.is-error { color: #9f3028; }
/* Arabic CTA form: force RTL text alignment (section-cta sets text-align:left) */
html[lang="ar"] .cta-form-panel,
.section-cta.is-rtl-cta .cta-form-panel {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] .cta-form-heading,
html[lang="ar"] .cta-form-lead,
html[lang="ar"] .cta-field-label,
html[lang="ar"] .cta-field label,
html[lang="ar"] .cta-cat-btn,
html[lang="ar"] .cta-submit {
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-arabic);
  text-align: right;
}
html[lang="ar"] .cta-form-heading {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}
html[lang="ar"] .cta-input,
html[lang="ar"] .cta-textarea {
  font-family: var(--font-arabic);
  font-size: 0.92rem;
  text-align: right;
  direction: rtl;
}
html[lang="ar"] .cta-submit {
  align-self: flex-end;
}
html[lang="ar"] .cta-categories {
  justify-content: flex-end;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--color-navy-deep);
  color: rgba(243, 234, 211, 0.8);
  padding-top: clamp(var(--space-lg), 5.4vw, var(--space-xl));
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.brand-footer .brand-wordmark {
  color: var(--color-champagne-2);
}
.brand-footer .brand-logo {
  height: clamp(5.5rem, 10vw, 8rem);
  filter: invert(1);
}
.footer-tagline {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: rgba(243, 234, 211, 0.6);
}
.footer-heading {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-champagne);
  margin-bottom: var(--space-sm);
}
.footer-list li {
  margin-bottom: var(--space-xs);
}
.footer-list a {
  font-size: var(--fs-small);
  transition: color var(--transition);
}
.footer-list a:hover {
  color: var(--color-champagne);
}
.footer-base {
  border-top: 1px solid rgba(243, 234, 211, 0.15);
  padding-block: var(--space-md);
}
.footer-copy {
  font-size: var(--fs-small);
  color: rgba(243, 234, 211, 0.45);
}

/* ==========================================================================
   11. ANIMATIONS & REVEAL
   ========================================================================== */
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
/* Reveal-on-scroll — elements start hidden only when JS is active */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Editorial reveal for CTA statement — slower, cinematic (1.4–1.8s) */
.js .section-cta .cta-title .cta-line-1,
.js .section-cta .cta-title .cta-line-2 {
  display: block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(22px) scale(0.96);
  transition:
    opacity 1.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .section-cta.cta-phase-reveal .cta-title .cta-line-1 {
  opacity: 0.92;
  filter: blur(0);
  transform: translateY(0) scale(1);
  transition-delay: 0.08s;
}
.js .section-cta.cta-phase-reveal .cta-title .cta-line-2 {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  transition-delay: 0.32s;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .section-cta .cta-title .cta-line-1,
  .js .section-cta .cta-title .cta-line-2 {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .cta-statement,
  .cta-divider,
  .cta-form-panel {
    transition: none !important;
  }
  .scroll-cue-arrow {
    animation: none;
  }
  .person-photo img,
  .service-card .card-face,
  .person-card {
    transition: none;
  }
  .card-grid-people:hover .person-card,
  .card-grid-people:hover .person-card:hover {
    filter: none;
    transform: none;
    opacity: 1;
  }
}

/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */
/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .card-grid-4,
  .card-grid-people {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .section-head-split {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .section-head-divider {
    display: none;
  }
  .section-quote {
    max-width: 52ch;
  }
  /* Slightly reduced scale on 2-col so cards stay readable */
  .card-grid-people:hover .person-card:hover {
    transform: scale(1.35) translateY(-11px);
  }
  .card-grid-people .person-card:nth-child(1),
  .card-grid-people .person-card:nth-child(3) {
    transform-origin: left center;
  }
  .card-grid-people .person-card:nth-child(2),
  .card-grid-people .person-card:nth-child(4) {
    transform-origin: right center;
  }
}
/* Tablets — nav collapses into the mobile menu */
@media (max-width: 900px) {
  :root {
    --header-height: 61px;
  }
  .nav-primary {
    position: static;
    transform: none;
  }
  .nav-toggle {
    display: flex;
  }
  /* Dropdown panel under the header */
  .nav-primary {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--color-cream);
    border-bottom: 1px solid var(--color-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav-primary.is-open {
    max-height: 400px;
    box-shadow: var(--shadow);
  }
  .nav-list {
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) var(--container-pad) var(--space-md);
  }
  .nav-link {
    display: block;
    padding-block: var(--space-sm);
    font-size: 0.765rem;
  }
  /* Hide desktop text CTA on small screens; menu covers it */
  .nav-actions .btn-text {
    display: none;
  }
  /* Keep language toggle visible on mobile */
  .nav-actions .lang-toggle {
    display: inline-block;
  }
  /* Allow sections a bit more breathing room on shorter viewports */
  .section-viewport {
    min-height: auto;
    padding-block: clamp(1.8rem, 5.4vw, 3.15rem);
  }
}
/* Phones */
@media (max-width: 600px) {
  .card-grid-4,
  .card-grid-people,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    align-items: center;
    max-width: none;
  }
  .service-card {
    min-height: 9rem;
  }
  /* On single column the focus effect is gentler */
  .card-grid-people:hover .person-card {
    filter: blur(1.5px) brightness(0.94);
    opacity: 0.85;
    transform: scale(0.98);
  }
  .card-grid-people:hover .person-card:hover {
    transform: scale(1.12) translateY(-7px);
  }
  .card-grid-people .person-card {
    transform-origin: center center;
  }
}

/* ========================================================================== 
   17. CONSULTATIVE QUESTIONNAIRE FLOW
   ========================================================================== */
.questionnaire-page { background:var(--color-navy-deep); color:var(--color-champagne-2); min-height:100vh; }
.questionnaire-page .site-header { background:rgba(11,25,41,.94); border-color:rgba(233,216,180,.2); }
.questionnaire-page .brand-wordmark,.questionnaire-page .nav-link { color:var(--color-champagne-2); }
.questionnaire-page .nav-link::after { background:var(--color-champagne); }
.questionnaire-page .lang-toggle { color:var(--color-champagne); }
.questionnaire-page .nav-toggle span { background:var(--color-champagne-2); }
.questionnaire-shell { min-height:calc(100dvh - var(--header-height)); display:flex; align-items:center; padding-block:clamp(2rem,5vw,4.5rem); }
.questionnaire-wrap { width:min(100%,48rem); margin-inline:auto; }
.questionnaire-top { display:flex; justify-content:space-between; gap:var(--space-md); align-items:center; margin-bottom:var(--space-md); color:rgba(243,234,211,.7); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; }
.questionnaire-progress { height:2px; background:rgba(233,216,180,.22); margin-bottom:clamp(2.25rem,5vw,4rem); overflow:hidden; }
.questionnaire-progress > span { display:block; width:20%; height:100%; background:var(--color-champagne); transition:width .5s cubic-bezier(.22,.61,.36,1); }
.questionnaire-step { animation:question-in .5s cubic-bezier(.22,.61,.36,1) both; }
.questionnaire-step.is-leaving { animation:question-out .28s ease both; }
.questionnaire-kicker { color:var(--color-champagne); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; margin-bottom:var(--space-md); }
.questionnaire-step h1 { color:var(--color-champagne-2); font-size:clamp(2rem,4.4vw,3.6rem); max-width:18ch; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.questionnaire-subtitle { color:rgba(243,234,211,.72); font-size:var(--fs-lead); margin-top:calc(var(--space-md) * -1); margin-bottom:var(--space-lg); }
.questionnaire-options { display:grid; gap:.7rem; }
.question-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:1rem 1.1rem; text-align:start; border:1px solid rgba(233,216,180,.3); border-radius:var(--radius); color:var(--color-champagne-2); background:rgba(255,255,255,.025); font-size:clamp(.9rem,1.2vw,1rem); transition:background-color var(--transition),border-color var(--transition),transform var(--transition),color var(--transition); }
.question-option::after { content:"→"; color:var(--color-champagne); font-size:1.1rem; transition:transform var(--transition); }
.question-option:hover,.question-option:focus-visible,.question-option.is-selected { background:rgba(233,216,180,.12); border-color:var(--color-champagne); transform:translateX(4px); outline:none; }
.question-option:hover::after,.question-option:focus-visible::after { transform:translateX(4px); }
.questionnaire-form { display:grid; gap:.8rem; }
.questionnaire-field { display:grid; gap:.35rem; }
.questionnaire-field label { color:rgba(243,234,211,.8); font-size:var(--fs-small); }
.questionnaire-field input,.questionnaire-field textarea { width:100%; border:1px solid rgba(233,216,180,.35); border-radius:var(--radius); background:rgba(255,255,255,.04); color:var(--color-champagne-2); font:inherit; padding:.8rem .95rem; transition:border-color var(--transition),background-color var(--transition),box-shadow var(--transition); }
.questionnaire-field textarea { min-height:6rem; resize:vertical; }
.questionnaire-field input:focus,.questionnaire-field textarea:focus { outline:0; border-color:var(--color-champagne); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(233,216,180,.1); }
.questionnaire-submit { margin-top:var(--space-sm); justify-content:center; align-items:center; flex-direction:row; background:var(--color-champagne); color:var(--color-navy-deep); }
.questionnaire-status { min-height:1.5em; color:var(--color-champagne); font-size:var(--fs-small); text-align:center; }
@keyframes question-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes question-out { to { opacity:0; transform:translateY(-12px); } }
html[lang="ar"] .questionnaire-top,html[lang="ar"] .questionnaire-step,html[lang="ar"] .questionnaire-form { direction:rtl; text-align:right; }
html[lang="ar"] .questionnaire-kicker,html[lang="ar"] .questionnaire-top { letter-spacing:.04em; }
html[lang="ar"] .question-option::after { content:"←"; }
html[lang="ar"] .question-option:hover,html[lang="ar"] .question-option:focus-visible,html[lang="ar"] .question-option.is-selected { transform:translateX(-4px); }
html[lang="ar"] .question-option:hover::after,html[lang="ar"] .question-option:focus-visible::after { transform:translateX(-4px); }
@media (max-width:600px) { .questionnaire-shell { align-items:flex-start; } .questionnaire-step h1 { max-width:none; } .questionnaire-top { font-size:.58rem; } }

/* ========================================================================== 
   16. SHARED ABOUT + SOLUTIONS PAGE COMPONENTS
   ========================================================================== */
.page-hero { background:var(--color-navy-deep); color:var(--color-champagne-2); padding-block:clamp(4rem,9vw,7.5rem); }
.hero-glass-page .page-hero { padding-top:calc(var(--header-height) + clamp(4rem,9vw,7.5rem)); }
.page-hero--solutions {
  background-color: var(--color-navy-deep);
  background-image: linear-gradient(to right, var(--color-navy-deep) 0%, rgba(11,25,41,.96) 28%, rgba(11,25,41,.55) 58%, rgba(11,25,41,.08) 100%), url("../assets/images/modern.jpg");
  background-size: cover;
  background-position: right center;
}
.page-hero--solutions .hero-network { display:none; }
.page-hero--about {
  background-color: var(--color-navy-deep);
  background-image: linear-gradient(rgba(11,25,41,.5), rgba(11,25,41,.5)), url("../assets/images/modern office.jpg");
  background-size: cover;
  background-position: center bottom;
}
.page-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(16rem,.7fr); gap:clamp(2rem,9vw,9rem); align-items:end; }
.page-hero .section-label,.page-hero h1 { color:var(--color-champagne-2); }
.page-hero .section-label-bar { background:var(--color-champagne); }
.page-hero h1 { max-width:17ch; font-size:clamp(2.3rem,5.2vw,4.5rem); }
.page-hero-lead { color:rgba(243,234,211,.78); font-size:var(--fs-lead); max-width:38ch; }
.editorial-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,10vw,10rem); align-items:start; }
.editorial-grid h2 { max-width:17ch; }
.editorial-copy { display:grid; gap:var(--space-md); }
.editorial-copy p { color:var(--color-ink-soft); font-size:var(--fs-lead); }
.editorial-copy .btn { width:fit-content; margin-top:var(--space-sm); }
.principles-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.principle-card { padding:clamp(1.25rem,2.5vw,2rem); min-height:14rem; border-inline-end:1px solid var(--color-line); }
.principle-card:last-child { border-inline-end:0; }
.principle-card > span,.framework-step > span { color:var(--color-green); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--tracking-label); }
.principle-card h3 { margin:clamp(2rem,4vw,4rem) 0 var(--space-xs); }
.principle-card p { color:var(--color-ink-soft); font-size:var(--fs-small); }
.contact-banner { background:var(--color-navy); padding-block:clamp(2rem,4vw,3.5rem); }
.contact-banner-grid { display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); }
.contact-banner .section-label,.contact-banner h2 { color:var(--color-champagne-2); }
.contact-banner .section-label { margin-bottom:var(--space-xs); }
.contact-banner .section-label-bar { background:var(--color-champagne); }
.contact-banner h2 { max-width:25ch; }
.framework-head { display:flex; justify-content:space-between; align-items:end; gap:var(--space-lg); margin-bottom:clamp(2rem,5vw,4rem); }
.framework-head > p,.solutions-showcase-head > p { color:var(--color-ink-soft); font-size:var(--fs-lead); max-width:37ch; }
.framework-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.framework-step { padding:clamp(1.25rem,2.5vw,2rem); min-height:15rem; border-inline-end:1px solid var(--color-line); }
.framework-step:last-child { border-inline-end:0; }
.framework-step h3 { margin:clamp(2rem,4vw,4rem) 0 .2rem; text-transform:uppercase; font-size:.85rem; letter-spacing:.12em; }
.framework-step > p { color:var(--color-navy); font-family:var(--font-display); font-size:1.1rem; margin-bottom:var(--space-sm); }
.framework-step small { display:block; color:var(--color-ink-soft); font-size:var(--fs-small); line-height:1.55; max-width:22ch; }
.solutions-showcase { background:var(--color-navy-deep); }
.solutions-showcase-head { color:var(--color-champagne-2); max-width:46rem; margin-bottom:clamp(2rem,5vw,4rem); }
.solutions-showcase-head .section-label,.solutions-showcase-head h2 { color:var(--color-champagne-2); }
.solutions-showcase-head .section-label-bar { background:var(--color-champagne); }
.solutions-showcase-head > p { color:rgba(243,234,211,.72); margin-top:var(--space-md); }
.objective-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-sm); }
.objective-card { position:relative; min-height:25rem; overflow:hidden; border:1px solid rgba(233,216,180,.22); border-radius:var(--radius); background:var(--color-navy); }
.objective-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,25,41,.02) 15%,rgba(11,25,41,.94) 88%); pointer-events:none; }
.objective-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; opacity:.72; transition:transform var(--transition-slow),opacity var(--transition); }
.objective-card > div { position:relative; z-index:1; height:100%; padding:1.35rem; display:flex; flex-direction:column; justify-content:flex-end; color:var(--color-champagne-2); }
.objective-card:hover img { transform:scale(1.06); opacity:.9; }
.objective-index { color:var(--color-champagne); font-size:.61rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.6rem; }
.objective-card h3 { color:var(--color-champagne-2); font-size:clamp(1.2rem,1.8vw,1.55rem); max-width:13ch; }
.objective-card div > p:not(.objective-index) { color:rgba(243,234,211,.75); font-size:var(--fs-small); margin-top:.65rem; }
.objective-card a { color:var(--color-champagne); font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-top:var(--space-md); width:fit-content; }
.objective-card a span { font-size:1rem; margin-inline-start:.35rem; transition:transform var(--transition); display:inline-block; }
.objective-card a:hover span { transform:translateX(4px); }
.process-list { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--color-line); list-style:none; }
.process-list li { display:flex; gap:var(--space-md); padding:var(--space-md) 0; border-bottom:1px solid var(--color-line); }
.process-list li:nth-child(odd) { padding-inline-end:var(--space-lg); }
.process-list li:nth-child(even) { padding-inline-start:var(--space-lg); }
.process-list li > span { color:var(--color-green); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--tracking-label); }
.process-list h3 { font-size:1.05rem; margin-bottom:.25rem; }
.process-list p { color:var(--color-ink-soft); font-size:var(--fs-small); }
@media (max-width: 900px) {
  .page-hero-grid,.editorial-grid { grid-template-columns:1fr; }
  .page-hero h1 { max-width:21ch; }
  .principles-grid,.framework-grid { grid-template-columns:repeat(2,1fr); }
  .principle-card:nth-child(2),.framework-step:nth-child(2) { border-inline-end:0; }
  .principle-card:nth-child(-n+2),.framework-step:nth-child(-n+2) { border-bottom:1px solid var(--color-line); }
  .objective-grid { grid-template-columns:repeat(2,1fr); }
  .framework-head { display:block; }
  .framework-head > p { margin-top:var(--space-md); }
}
@media (max-width: 600px) {
  .page-hero { padding-block:3.5rem; }
  .principles-grid,.framework-grid,.objective-grid,.process-list { grid-template-columns:1fr; }
  .principle-card,.principle-card:nth-child(2),.framework-step,.framework-step:nth-child(2) { min-height:0; border-inline-end:0; border-bottom:1px solid var(--color-line); }
  .principle-card:last-child,.framework-step:last-child { border-bottom:0; }
  .principle-card h3,.framework-step h3 { margin-top:var(--space-lg); }
  .objective-card { min-height:22rem; }
  .contact-banner-grid { display:block; }
  .contact-banner .btn { margin-top:var(--space-md); }
  .process-list li:nth-child(odd),.process-list li:nth-child(even) { padding-inline:0; }
}


/* CTA stack on smaller screens */
@media (max-width: 900px) {
  .section-cta.section-viewport {
    min-height: auto;
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }
  .cta-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
    min-height: 0;
  }
  .cta-statement {
    grid-column: 1 !important;
    grid-row: 1;
    justify-self: center !important;
    text-align: center !important;
    width: 100%;
    max-width: 22rem;
    padding-inline: 0 !important;
  }
  .section-cta.cta-phase-split .cta-statement {
    grid-column: 1 !important;
    justify-self: center !important;
    text-align: center !important;
  }
  .cta-divider {
    grid-column: 1 !important;
    grid-row: 2;
    width: min(12rem, 60vw);
    height: 1px !important;
    justify-self: center;
  }
  .section-cta.cta-phase-divider .cta-divider {
    height: 1px !important;
    width: min(12rem, 60vw);
    opacity: 1;
  }
  .cta-form-panel,
  .section-cta.is-rtl-cta .cta-form-panel {
    grid-column: 1 !important;
    grid-row: 3;
    justify-self: stretch !important;
    max-width: none;
  }
  .section-cta .cta-title {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
  }
}

/* ==========================================================================
   13. RTL / BILINGUAL SUPPORT
   Header layout remains physically LTR at all times.
   Content (main, footer) uses proper Arabic typography + dir.
   Brand wordmark NEVER switches to Arabic font.
   ========================================================================== */

/* Force header geometry to stay LTR regardless of document dir */
.site-header,
.site-header .nav-bar,
.site-header .nav-primary,
.site-header .nav-actions {
  direction: ltr;
}
.site-header .brand-wordmark {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-nav) !important;
  text-transform: uppercase !important;
  direction: ltr;
}

html[lang="ar"] body {
  font-family: var(--font-arabic);
  word-spacing: 0.04em;
  line-height: 1.75;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .card-title,
html[lang="ar"] .person-name,
html[lang="ar"] .section-title,
html[lang="ar"] .cta-title,
html[lang="ar"] .footer-heading {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  word-spacing: 0.06em;
  line-height: 1.35;
}
/* Slightly larger Arabic type for visual parity with English */
html[lang="ar"] {
  --fs-hero: clamp(2.05rem, 4.7vw, 3.55rem);
  --fs-title: clamp(1.8rem, 3.6vw, 2.65rem);
  --fs-lead: clamp(0.98rem, 1.35vw, 1.15rem);
  --fs-body: 0.98rem;
  --fs-small: 0.85rem;
  --fs-label: 0.72rem;
}
html[lang="ar"] .card-title {
  font-size: 1.12rem;
}
html[lang="ar"] .nav-link {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-arabic);
  padding-inline: 0.15rem;
}
html[lang="ar"] .nav-list {
  gap: clamp(1.1rem, 3.2vw, 3.2rem);
}
html[lang="ar"] .eyebrow,
html[lang="ar"] .section-label,
html[lang="ar"] .btn,
html[lang="ar"] .hero-descriptor,
html[lang="ar"] .scroll-cue {
  letter-spacing: 0.02em;
  text-transform: none;
  font-family: var(--font-arabic);
}
html[lang="ar"] .btn {
  font-size: 0.78rem;
}
html[lang="ar"] .person-name {
  font-size: 0.95rem;
}

/* Keep nav primary centered physically; do not flip header */
html[lang="ar"] .nav-primary {
  left: 50%;
  transform: translateX(-50%);
}
/* Underline origin stays left (physical LTR header) */
html[lang="ar"] .site-header .nav-link::after {
  transform-origin: left;
}

/* Content-area arrows still flip with language */
html[lang="ar"] main .btn:hover .btn-arrow {
  transform: translateX(-4px);
}

html[lang="ar"] .section-label {
  flex-direction: row;
}

/* People cards: mirror origins for Arabic content area only */
html[lang="ar"] .card-grid-people .person-card:nth-child(1) {
  transform-origin: right center;
}
html[lang="ar"] .card-grid-people .person-card:nth-child(4) {
  transform-origin: left center;
}
@media (max-width: 1100px) {
  html[lang="ar"] .card-grid-people .person-card:nth-child(1),
  html[lang="ar"] .card-grid-people .person-card:nth-child(3) {
    transform-origin: right center;
  }
  html[lang="ar"] .card-grid-people .person-card:nth-child(2),
  html[lang="ar"] .card-grid-people .person-card:nth-child(4) {
    transform-origin: left center;
  }
}

/* Mobile nav list text can follow document direction */
html[lang="ar"] .nav-primary.is-open .nav-list {
  text-align: right;
  direction: rtl;
}

html[lang="ar"] .hero-title {
  max-width: 24ch;
}
html[lang="ar"] .section-cta .cta-title {
  max-width: none;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.3;
}

/* New bilingual pages: retain hierarchy while making RTL relationships intentional. */
html[lang="ar"] .page-hero-grid,
html[lang="ar"] .editorial-grid { direction:rtl; }
html[lang="ar"] .page-hero h1,
html[lang="ar"] .page-hero-lead,
html[lang="ar"] .editorial-copy,
html[lang="ar"] .framework-head,
html[lang="ar"] .solutions-showcase-head,
html[lang="ar"] .objective-card > div,
html[lang="ar"] .process-list { text-align:right; }
html[lang="ar"] .page-hero h1 { max-width:19ch; line-height:1.35; }
html[lang="ar"] .framework-step h3,
html[lang="ar"] .objective-index { letter-spacing:.03em; }
html[lang="ar"] .principle-card > span,
html[lang="ar"] .framework-step > span,
html[lang="ar"] .process-list li > span { letter-spacing:.06em; }
html[lang="ar"] .objective-card a span:last-child { display:inline-block; }
html[lang="ar"] .objective-card a:hover span:last-child { transform:translateX(-4px); }
html[lang="ar"] .process-list li:nth-child(odd) { padding-inline-start:var(--space-lg); padding-inline-end:0; }
html[lang="ar"] .process-list li:nth-child(even) { padding-inline-end:var(--space-lg); padding-inline-start:0; }
html[lang="ar"] .contact-banner-grid { direction:rtl; }
@media (max-width:600px) {
  html[lang="ar"] .process-list li:nth-child(odd),
  html[lang="ar"] .process-list li:nth-child(even) { padding-inline:0; }
}

/* Hero/header rules intentionally live last so compact page overrides do not
   undo the overlay spacing on image-led pages. */
.hero-glass-page.solutions-page .page-hero,
.hero-glass-page.about-page .page-hero {
  padding-top: calc(var(--header-height) + clamp(2.75rem, 5.5vw, 4.5rem));
}
@media (max-width: 900px) {
  .section-cta .cta-network {
    inset: 0 0 auto;
    width: 100%;
    height: 45%;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  }
}
@media (max-width: 600px) {
  .home-page .hero-title { font-size:clamp(1.28rem,6vw,1.65rem); letter-spacing:-.04em; }
  .home-page .hero-inner::before { inset:-2rem -.75rem; }
  .hero-glass-page.solutions-page .page-hero,
  .hero-glass-page.about-page .page-hero {
    padding-top: calc(var(--header-height) + 2.5rem);
  }
}

/* Bright, glass-like questionnaire presentation. */
.questionnaire-page { background:linear-gradient(135deg,#f7f3e9 0%,#e9e1cf 52%,#f8f5ed 100%); color:var(--color-navy); overflow:hidden; }
.questionnaire-page .site-header { background:rgba(245,241,232,.78); border-color:rgba(16,35,59,.12); backdrop-filter:blur(16px); }
.questionnaire-page .brand-wordmark,.questionnaire-page .nav-link { color:var(--color-navy); }
.questionnaire-page .nav-link::after { background:var(--color-green); }
.questionnaire-page .lang-toggle { color:var(--color-green); }
.questionnaire-page .nav-toggle span { background:var(--color-navy); }
.questionnaire-shell { min-height:calc(100dvh - var(--header-height)); height:calc(100dvh - var(--header-height)); padding-block:clamp(1.25rem,3vw,2.5rem); }
.questionnaire-wrap { padding:clamp(1.35rem,3vw,2.5rem); border:1px solid rgba(255,255,255,.72); border-radius:var(--radius-lg); background:rgba(255,255,255,.4); box-shadow:0 24px 64px -32px rgba(16,35,59,.28),inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter:blur(18px); }
.questionnaire-top { color:var(--color-ink-soft); }
.questionnaire-progress { background:rgba(16,35,59,.13); }
.questionnaire-progress > span { background:linear-gradient(90deg,var(--color-green),#b78b3c); }
.questionnaire-kicker { color:var(--color-green); }
.questionnaire-step h1 { color:var(--color-navy); }
.questionnaire-subtitle { color:var(--color-ink-soft); }
.question-option { border-color:rgba(16,35,59,.16); color:var(--color-navy); background:rgba(255,255,255,.36); box-shadow:inset 0 1px 0 rgba(255,255,255,.64); }
.question-option::after { color:#9c7124; }
.question-option:hover,.question-option:focus-visible,.question-option.is-selected { background:rgba(255,255,255,.78); border-color:#b78b3c; box-shadow:0 12px 24px -20px rgba(16,35,59,.38); }
.questionnaire-field label { color:var(--color-ink-soft); }
.questionnaire-field input,.questionnaire-field textarea { border-color:rgba(16,35,59,.2); color:var(--color-navy); background:rgba(255,255,255,.52); }
.questionnaire-field input:focus,.questionnaire-field textarea:focus { border-color:#b78b3c; background:#fffdf8; box-shadow:0 0 0 3px rgba(183,139,60,.14); }
.questionnaire-submit { background:var(--color-green); color:var(--color-champagne-2); }
.questionnaire-status { color:var(--color-green); }
.intelligence-hero { padding-block:clamp(2.75rem,5vw,4.5rem); }
@media (max-width:600px) { .questionnaire-page { overflow:auto; } .questionnaire-shell { height:auto; min-height:calc(100dvh - var(--header-height)); } }

/* Floating hub questionnaire — shared by all four solution routes. */
.questionnaire-page { position:relative; isolation:isolate; background:#c6d1d0; overflow-x:hidden; }
.questionnaire-page::before,.questionnaire-page::after { content:""; position:fixed; inset:var(--header-height) 0 0; z-index:-2; background:linear-gradient(115deg,rgba(11,40,59,.72),rgba(0,51,28,.42)),var(--questionnaire-backdrop,url("../assets/images/who-we-help-1.jpg")) center/cover; filter:blur(2px); transform:scale(1.03); }
.questionnaire-page::after { z-index:-1; background:radial-gradient(circle at 17% 82%,rgba(233,216,180,.45),transparent 30%),radial-gradient(circle at 88% 10%,rgba(255,255,255,.46),transparent 31%),linear-gradient(130deg,rgba(16,35,59,.2),rgba(0,51,28,.35)); filter:none; transform:none; }
.questionnaire-shell { height:auto; min-height:calc(100dvh - var(--header-height)); padding-block:clamp(1.5rem,5vh,3.5rem); }
.questionnaire-shell > .container { width:100%; }
/* The hub intentionally sits at a calmer 75% desktop scale; the fixed header is outside this scope. */
@media (min-width:701px) { .questionnaire-page .questionnaire-shell > .container { zoom:.75; } }
.questionnaire-wrap { width:min(100%,61rem); min-height:min(39rem,calc(100dvh - var(--header-height) - 3rem)); margin-inline:auto; padding:clamp(1.1rem,2.4vw,2rem); border:1px solid rgba(255,255,255,.72); border-radius:1.35rem; background:rgba(249,248,242,.72); box-shadow:0 2rem 5rem rgba(9,25,40,.28),inset 0 1px rgba(255,255,255,.94); backdrop-filter:blur(22px); transition:min-height .45s cubic-bezier(.22,.61,.36,1),width .45s cubic-bezier(.22,.61,.36,1); }
.questionnaire-top { margin-bottom:.7rem; color:var(--color-ink-soft); font-size:.61rem; }
.questionnaire-progress { margin-bottom:clamp(1.2rem,2.6vw,2rem); border-radius:99px; }
.questionnaire-step { min-height:30rem; display:grid; align-content:center; animation:question-in .45s cubic-bezier(.22,.61,.36,1) both; }
.questionnaire-step.is-leaving { animation:question-out .3s ease both; pointer-events:none; }
.questionnaire-copy { min-width:0; }
.questionnaire-kicker { margin-bottom:.55rem; color:var(--color-green); }
.questionnaire-step h1 { max-width:18ch; margin-bottom:clamp(1.15rem,2.5vw,1.7rem); color:var(--color-navy); font-size:clamp(1.85rem,3.6vw,3.05rem); line-height:1.08; }
.questionnaire-options { gap:.6rem; }
.question-option { min-height:3.25rem; justify-content:space-between; padding:.8rem 1rem; border-radius:999px; border-color:rgba(16,35,59,.14); background:rgba(255,255,255,.62); color:var(--color-navy); box-shadow:inset 0 1px rgba(255,255,255,.9); opacity:0; animation:option-in .42s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:calc(200ms + var(--option-delay)); }
.question-option::after { display:none; }
.question-option i { display:grid; width:1.1rem; height:1.1rem; place-items:center; flex:0 0 auto; border:1px solid rgba(16,35,59,.18); border-radius:50%; color:transparent; font-size:.65rem; font-style:normal; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.question-option:hover,.question-option:focus-visible { transform:translateY(-2px); border-color:rgba(183,139,60,.75); background:rgba(255,255,255,.9); box-shadow:0 .65rem 1.3rem -1rem rgba(16,35,59,.55),0 0 0 3px rgba(212,175,55,.14); }
.question-option.is-selected { transform:scale(1.02); border-color:#b78b3c; background:#fffdf7; box-shadow:0 0 0 4px rgba(212,175,55,.22),0 .65rem 1.5rem -1rem rgba(16,35,59,.42); }
.question-option.is-selected i { border-color:#b78b3c; background:#b78b3c; color:#fff; }
.questionnaire-step--1 { grid-template-columns:minmax(0,38rem); justify-content:center; text-align:center; }
.questionnaire-step--1 .questionnaire-copy { display:grid; justify-items:center; }
.questionnaire-step--1 h1 { max-width:19ch; }
.questionnaire-step--1 .questionnaire-options { width:min(100%,34rem); margin-inline:auto; }
.questionnaire-step--2 { grid-template-columns:minmax(13rem,.78fr) minmax(18rem,1fr); column-gap:clamp(1.2rem,3vw,2.7rem); }
.questionnaire-step--2 .questionnaire-visual { grid-row:span 2; min-height:25rem; border-radius:.9rem; background-position:center; background-size:cover; box-shadow:inset 0 0 0 1px rgba(255,255,255,.38); overflow:hidden; display:flex; align-items:end; padding:1rem; }
.questionnaire-visual span { color:#fff; font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.questionnaire-step--2 .questionnaire-options { align-self:start; }
.questionnaire-step--3,.questionnaire-step--4 { grid-template-columns:minmax(14rem,.9fr) minmax(17rem,1.1fr); column-gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.questionnaire-context,.questionnaire-subtitle { max-width:31ch; color:var(--color-ink-soft); font-size:var(--fs-lead); }
.questionnaire-step--5 { grid-template-columns:minmax(13rem,.8fr) minmax(18rem,1.2fr); gap:clamp(1.5rem,5vw,4rem); }
.questionnaire-step--5 h1 { max-width:10ch; }
.questionnaire-form { grid-template-columns:1fr 1fr; gap:.8rem; align-content:center; }
.questionnaire-field--wide,.questionnaire-submit,.questionnaire-status { grid-column:1 / -1; }
.questionnaire-field input,.questionnaire-field textarea { border-radius:.45rem; background:rgba(255,255,255,.68); }
.questionnaire-field textarea { min-height:4.6rem; }
.questionnaire-submit { min-height:3.2rem; border-radius:999px; background:var(--color-green); }
@keyframes option-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
html[lang="ar"] .questionnaire-top,html[lang="ar"] .questionnaire-step,html[lang="ar"] .questionnaire-form { direction:rtl; text-align:right; }
html[lang="ar"] .questionnaire-step--1 { text-align:center; }
html[lang="ar"] .questionnaire-step--1 .questionnaire-copy { justify-items:center; }
html[lang="ar"] .questionnaire-step--2 .questionnaire-visual { order:2; }
html[lang="ar"] .question-option:hover,html[lang="ar"] .question-option:focus-visible { transform:translateY(-2px); }
html[lang="ar"] .question-option.is-selected { transform:scale(1.02); }
@media (max-width:700px) {
  .questionnaire-page { overflow:auto; }
  .questionnaire-shell { padding-block:1rem; }
  .questionnaire-wrap { min-height:0; padding:1.05rem; border-radius:1rem; }
  .questionnaire-step,.questionnaire-step--2,.questionnaire-step--3,.questionnaire-step--4,.questionnaire-step--5 { min-height:0; grid-template-columns:1fr; gap:1.15rem; }
  .questionnaire-step--2 .questionnaire-visual { grid-row:auto; min-height:10rem; order:initial; }
  .questionnaire-step h1 { max-width:none; font-size:clamp(1.65rem,8vw,2.25rem); }
  .questionnaire-step--1 { text-align:start; justify-content:stretch; }
  .questionnaire-step--1 .questionnaire-copy { justify-items:start; }
  .questionnaire-step--1 .questionnaire-options { width:100%; }
  .questionnaire-form { grid-template-columns:1fr; }
  .questionnaire-field--wide,.questionnaire-submit,.questionnaire-status { grid-column:auto; }
  html[lang="ar"] .questionnaire-step--1 { text-align:right; }
  html[lang="ar"] .questionnaire-step--1 .questionnaire-copy { justify-items:end; }
}
@media (prefers-reduced-motion:reduce) { .questionnaire-step,.question-option { animation:none; opacity:1; } .questionnaire-wrap,.question-option { transition:none; } }

/* ==========================================================================
   14. SECONDARY PAGE CONTENT (about / solutions / insights)
   Lightweight styles so legacy page markup remains readable within the
   shared design system without a full redesign.
   ========================================================================== */
.section-padding {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.network-about-section .eyebrow,
.capabilities-section .eyebrow,
.dashboard-section .eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
}
.network-header,
.about-intro,
.dashboard-header {
  margin-bottom: clamp(var(--space-md), 3vw, var(--space-lg));
}
.credibility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.credibility-cell,
.capability-block,
.leader-card,
.metric-item {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 1.8vw, 1.5rem);
}
.credibility-title,
.capability-default h3,
.leader-name,
.metric-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.35rem;
}
.credibility-desc,
.leader-bio {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  max-width: none;
}
.capabilities-grid,
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-lg);
}
.about-headline {
  font-size: var(--fs-title);
}
.leadership-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-green);
  margin: var(--space-lg) 0 var(--space-md);
}
.leader-photo-placeholder {
  aspect-ratio: 3/4;
  background: var(--color-cream-alt);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
}
.leader-role {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  display: block;
  margin-bottom: 0.5rem;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.metric-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-navy);
}
.metric-rule {
  height: 1px;
  background: var(--color-line);
  margin-top: 0.5rem;
}
@media (max-width: 900px) {
  .credibility-grid,
  .about-intro,
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   15. INTELLIGENCE DESK + DIRECTOR PROFILE
   ========================================================================== */
.intelligence-hero { padding-block: clamp(4.5rem, 10vw, 8rem); }
.intelligence-hero-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(15rem,.65fr); gap:clamp(2rem,8vw,8rem); align-items:end; }
.intelligence-intro h1 { max-width:16ch; margin-bottom:var(--space-md); }
.intelligence-lead { font-size:var(--fs-lead); color:var(--color-ink-soft); max-width:48ch; }
.intelligence-note { border-inline-start:1px solid var(--color-line); padding-inline-start:var(--space-md); color:var(--color-ink-soft); font-size:var(--fs-small); }
.note-index,.demo-flag { display:inline-block; font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.note-index { color:var(--color-green); margin-bottom:var(--space-sm); }
.demo-flag { color:var(--color-green); border:1px solid currentColor; border-radius:99px; padding:.25rem .45rem; line-height:1.2; }
.intelligence-intro .demo-flag { margin-bottom:var(--space-sm); }
.intelligence-section-head { max-width:42rem; margin-bottom:clamp(1.5rem,4vw,3rem); }
.pulse-grid { display:grid; grid-template-columns:repeat(8,1fr); border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.pulse-grid article { min-height:7.5rem; padding:1rem .75rem; border-inline-end:1px solid var(--color-line); display:flex; flex-direction:column; justify-content:space-between; gap:1rem; }
.pulse-grid article:last-child { border:0; }
.pulse-grid span { font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-ink-soft); line-height:1.4; }
.pulse-grid strong { color:var(--color-navy); font-family:var(--font-display); font-size:clamp(1.5rem,2.3vw,2.25rem); font-weight:500; }
.prototype-note { margin-top:var(--space-sm); color:var(--color-ink-soft); font-size:var(--fs-small); }
.featured-grid { display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; gap:var(--space-md); }
.research-tile { position:relative; text-align:start; display:flex; flex-direction:column; align-items:flex-start; min-height:13rem; width:100%; padding:clamp(1.2rem,2.4vw,2rem); border:1px solid var(--color-line); border-radius:0; background:var(--color-card); color:var(--color-ink); overflow:hidden; transition:transform var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition); }
.research-tile::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:var(--color-green); transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.research-tile:hover,.research-tile:focus-visible { background:var(--color-navy); color:var(--color-champagne-2); border-color:var(--color-navy); transform:translateY(-4px); outline:none; }
.research-tile:hover::after,.research-tile:focus-visible::after { transform:scaleX(1); }
.research-tile h3 { color:var(--color-navy); font-size:clamp(1.1rem,1.7vw,1.5rem); max-width:25ch; margin-block:1.2rem .65rem; transition:color var(--transition); }
.research-tile p { font-size:var(--fs-small); line-height:1.55; color:var(--color-ink-soft); max-width:42ch; transition:color var(--transition); }
.research-tile:hover h3,.research-tile:focus-visible h3 { color:var(--color-champagne-2); }
.research-tile:hover p,.research-tile:focus-visible p { color:rgba(243,234,211,.75); }
.tile-top,.tile-meta { width:100%; display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.tile-top > span:last-child { color:var(--color-ink-soft); }
.tile-meta { margin-top:auto; padding-top:1.25rem; color:var(--color-ink-soft); font-size:.58rem; letter-spacing:.08em; }
.tile-meta b { font-size:1.1rem; font-weight:400; color:inherit; }
.research-tile:hover .tile-top > span:last-child,.research-tile:hover .tile-meta,.research-tile:focus-visible .tile-top > span:last-child,.research-tile:focus-visible .tile-meta { color:rgba(243,234,211,.7); }
.research-tile--lead { grid-row:span 2; min-height:27rem; justify-content:flex-end; background:var(--color-navy); }
.research-tile--lead h3 { color:var(--color-champagne-2); font-size:clamp(1.65rem,3vw,2.6rem); }
.research-tile--lead p,.research-tile--lead .tile-top > span:last-child,.research-tile--lead .tile-meta { color:rgba(243,234,211,.72); }
.research-tile--lead .demo-flag { color:var(--color-champagne); }
.research-tile--lead:hover { background:var(--color-green); }
.gallery-head { display:flex; justify-content:space-between; gap:var(--space-lg); align-items:end; margin-bottom:var(--space-lg); }
.gallery-head > p { color:var(--color-ink-soft); font-size:var(--fs-small); max-width:35ch; }
.research-filters { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:var(--space-lg); }
.research-filter { border:1px solid var(--color-line); padding:.42rem .68rem; border-radius:99px; color:var(--color-ink-soft); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; transition:color var(--transition),background-color var(--transition),border-color var(--transition); }
.research-filter:hover,.research-filter.is-active { color:var(--color-champagne-2); background:var(--color-navy); border-color:var(--color-navy); }
.research-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
.research-grid .research-tile { min-height:15rem; }
.research-grid .research-tile--feature { grid-column:span 2; min-height:19rem; }
.case-work-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,7vw,7rem); align-items:start; }
.case-work-list { display:grid; gap:.7rem; }
.case-work-list .research-tile { min-height:0; padding:1.15rem 1.25rem; }
.case-work-list .research-tile h3 { font-size:1.05rem; margin:.75rem 0 .4rem; }
.case-work-list .research-tile p { display:none; }
.article-reader { position:fixed; z-index:200; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease; }
.article-reader.is-open { opacity:1; pointer-events:auto; }
.article-reader-backdrop { position:absolute; inset:0; background:rgba(11,25,41,.72); backdrop-filter:blur(4px); }
.article-reader-sheet { position:absolute; inset:0 0 0 auto; width:min(100%,52rem); overflow:auto; background:var(--color-cream); padding:clamp(1.5rem,5vw,5rem); transform:translateX(100%); transition:transform .55s cubic-bezier(.22,.61,.36,1); outline:0; }
.article-reader.is-open .article-reader-sheet { transform:translateX(0); }
.article-reader-topline { display:flex; justify-content:space-between; align-items:center; padding-bottom:var(--space-lg); border-bottom:1px solid var(--color-line); color:var(--color-ink-soft); font-size:.65rem; letter-spacing:.15em; }
.reader-close { width:2.5rem; height:2.5rem; border:1px solid var(--color-line); border-radius:50%; font-size:1.7rem; line-height:1; transition:background-color var(--transition),color var(--transition); }
.reader-close:hover { background:var(--color-navy); color:var(--color-champagne); }
.reader-meta { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:clamp(2rem,6vw,5rem); color:var(--color-ink-soft); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.article-reader h1 { margin:1.25rem 0 var(--space-md); font-size:clamp(2rem,5vw,3.65rem); max-width:16ch; }
.reader-lede { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--color-ink-soft); line-height:1.6; max-width:44ch; }
.reader-body { margin-top:clamp(2rem,5vw,4rem); max-width:42rem; }
.reader-body h2 { font-size:clamp(1.25rem,2vw,1.65rem); margin:2.25rem 0 .75rem; }
.reader-body p { font-size:1rem; line-height:1.8; color:var(--color-ink-soft); max-width:62ch; }
.reader-return { margin-top:clamp(2rem,5vw,4rem); flex-direction:row; align-items:center; }
body.reader-open { overflow:hidden; }

.director-hero { padding-block:clamp(3rem,7vw,6rem); }
.director-hero-grid { display:grid; grid-template-columns:1fr minmax(20rem,.85fr); gap:clamp(2rem,9vw,9rem); align-items:center; }
.director-copy h1 { font-size:clamp(2.65rem,5.4vw,5rem); margin-bottom:.4rem; }
.director-title { font-family:var(--font-display); font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--color-green); margin-bottom:var(--space-lg); }
.director-summary { color:var(--color-ink-soft); font-size:var(--fs-lead); max-width:38ch; }
.director-portrait { background:var(--color-navy); padding:clamp(.5rem,1vw,.8rem); margin:0; }
.director-portrait img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top; filter:grayscale(1); transition:filter var(--transition-slow),transform var(--transition-slow); }
.director-portrait:hover img { filter:grayscale(0); transform:scale(1.015); }
.director-portrait figcaption { color:var(--color-champagne); padding:.8rem .25rem .1rem; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; }
.director-editorial { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,9vw,9rem); }
.director-prose h2 { font-size:clamp(1.6rem,3vw,2.5rem); max-width:20ch; margin-bottom:var(--space-lg); }
.director-prose p,.director-role-copy p { color:var(--color-ink-soft); margin-bottom:var(--space-md); font-size:var(--fs-lead); }
.director-role { background:var(--color-navy); }
.director-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,9vw,9rem); align-items:start; }
.director-role .section-label,.director-role h2 { color:var(--color-champagne-2); }
.director-role .section-label-bar { background:var(--color-champagne); }
.director-role-copy p { color:rgba(243,234,211,.75); }
.director-role .btn-text { color:var(--color-champagne); }
.focus-list { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--color-line); }
.focus-list article { min-height:10rem; padding:1.25rem 1rem; border-inline-end:1px solid var(--color-line); }
.focus-list article:last-child { border:0; }
.focus-list span { color:var(--color-green); font-size:.65rem; letter-spacing:.12em; }
.focus-list h3 { font-size:1rem; margin-top:2.3rem; }
.office-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,9vw,9rem); align-items:center; }
.office-grid h2 { max-width:17ch; margin-bottom:var(--space-md); }
.office-grid > div > p { color:var(--color-ink-soft); font-size:var(--fs-lead); }
.office-card { background:var(--color-green); color:var(--color-champagne-2); padding:clamp(1.5rem,4vw,3rem); }
.office-card .demo-flag { color:var(--color-champagne); }
.office-role { margin-top:var(--space-lg); color:rgba(243,234,211,.65); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; }
.office-card h3 { color:var(--color-champagne-2); margin:.35rem 0 var(--space-lg); }
.office-card a { display:block; width:fit-content; margin-bottom:.35rem; border-bottom:1px solid rgba(233,216,180,.4); font-size:.9rem; }
.office-card > p:last-child { margin-top:var(--space-md); color:rgba(243,234,211,.6); font-size:var(--fs-small); }

html[lang="ar"] .intelligence-note { border-inline-start:0; border-inline-end:1px solid var(--color-line); padding-inline-start:0; padding-inline-end:var(--space-md); }
html[lang="ar"] .research-tile,html[lang="ar"] .article-reader-sheet,html[lang="ar"] .director-portrait figcaption { text-align:right; }
html[lang="ar"] .tile-top,html[lang="ar"] .tile-meta,html[lang="ar"] .article-reader-topline { letter-spacing:.03em; }
html[lang="ar"] .article-reader-sheet { inset:0 auto 0 0; transform:translateX(-100%); }
html[lang="ar"] .article-reader.is-open .article-reader-sheet { transform:translateX(0); }
html[lang="ar"] .reader-body p,html[lang="ar"] .reader-lede { line-height:2; }

@media (max-width: 900px) {
  .intelligence-hero-grid,.case-work-grid,.director-hero-grid,.director-editorial,.director-role-grid,.office-grid { grid-template-columns:1fr; }
  .pulse-grid { grid-template-columns:repeat(4,1fr); }
  .pulse-grid article:nth-child(4) { border-inline-end:0; }
  .pulse-grid article { border-bottom:1px solid var(--color-line); }
  .pulse-grid article:nth-last-child(-n+4) { border-bottom:0; }
  .featured-grid { grid-template-columns:1fr 1fr; }
  .research-grid { grid-template-columns:repeat(2,1fr); }
  .focus-list { grid-template-columns:repeat(3,1fr); }
  .focus-list article:nth-child(3) { border-inline-end:0; }
}
@media (max-width: 600px) {
  .intelligence-hero { padding-block:3.5rem; }
  .pulse-grid { grid-template-columns:repeat(2,1fr); }
  .pulse-grid article:nth-child(2n) { border-inline-end:0; }
  .pulse-grid article:nth-last-child(-n+4) { border-bottom:1px solid var(--color-line); }
  .pulse-grid article:nth-last-child(-n+2) { border-bottom:0; }
  .featured-grid,.research-grid { grid-template-columns:1fr; }
  .research-tile--lead,.research-grid .research-tile--feature { grid-column:auto; grid-row:auto; min-height:19rem; }
  .gallery-head { display:block; }
  .gallery-head > p { margin-top:var(--space-md); }
  .focus-list { grid-template-columns:1fr; }
  .focus-list article,.focus-list article:nth-child(3) { min-height:0; padding:1rem 0; border-inline-end:0; border-bottom:1px solid var(--color-line); display:flex; gap:var(--space-md); align-items:baseline; }
  .focus-list article:last-child { border-bottom:0; }
  .focus-list h3 { margin:0; }
  .article-reader-sheet { width:100%; padding:1.5rem; }
  .article-reader h1 { max-width:none; }
}

/* Keep the Insights opening compact after the secondary-page rules above. */
.intelligence-hero { padding-block:clamp(2.75rem,5vw,4.5rem); }
@media (max-width:600px) { .intelligence-hero { padding-block:2.5rem; } }

/* Refinements for the compact Solutions flow and alternating About layout. */
.solutions-page .page-hero { padding-block:clamp(2.75rem,5.5vw,4.5rem); }
.solutions-page .page-hero h1 { max-width:14ch; }
.work-journey { padding-block:clamp(2.5rem,4.5vw,3.75rem); background:var(--color-cream); }
.compact-section-head { text-align:center; margin-bottom:clamp(1.75rem,3vw,2.5rem); }
.compact-section-head .section-label { justify-content:center; }
.compact-section-head h2 { font-size:clamp(1.5rem,2.6vw,2.1rem); }
.journey-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; list-style:none; position:relative; max-width:64rem; margin-inline:auto; }
.journey-steps::before { content:""; position:absolute; height:1px; background:var(--color-line); top:2.05rem; left:12.5%; right:12.5%; }
.journey-steps li { position:relative; z-index:1; text-align:center; padding-inline:var(--space-sm); }
.journey-steps li > span { display:grid; place-items:center; width:4.1rem; aspect-ratio:1; margin:0 auto var(--space-sm); border:1px solid var(--color-navy); border-radius:50%; background:var(--color-cream); color:var(--color-navy); font-family:var(--font-display); font-size:1rem; }
.journey-steps h3 { font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.3rem; }
.journey-steps p { color:var(--color-ink-soft); font-size:var(--fs-small); line-height:1.5; margin-inline:auto; max-width:18ch; }
.showcase-split-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,.8fr); gap:clamp(2rem,7vw,7rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.5rem); }
.showcase-split-head .section-label,.showcase-split-head h2 { color:var(--color-champagne-2); }
.showcase-split-head .section-label-bar { background:var(--color-champagne); }
.showcase-split-head > p { border-inline-start:1px solid rgba(233,216,180,.4); padding-inline-start:var(--space-lg); color:rgba(243,234,211,.74); font-size:var(--fs-lead); }
.objective-card { min-height:22rem; }
.objective-card::after { background:linear-gradient(180deg,rgba(11,25,41,.1) 10%,rgba(11,25,41,.98) 83%); }
.objective-card > div { padding:1.5rem; }
.objective-card h3 { max-width:15ch; }
.solutions-page .contact-banner { background:var(--color-cream); border-top:1px solid var(--color-line); }
.solutions-page .contact-banner .section-label,.solutions-page .contact-banner h2 { color:var(--color-navy); }
.solutions-page .contact-banner .section-label-bar { background:var(--color-green); }
.solutions-page .contact-banner .btn-light { background:var(--color-green); color:var(--color-champagne-2); }
.about-page .page-hero { padding-block:clamp(2.75rem,5.5vw,4.5rem); }
.about-page .section:nth-of-type(2) { padding-block:clamp(2.25rem,4vw,3.5rem); }
.about-page .principle-card { min-height:9.5rem; padding:clamp(1rem,1.8vw,1.4rem); }
.about-page .principle-card > span { display:none; }
.about-page .principle-card h3 { margin:0 0 var(--space-xs); }
.about-page .section:nth-of-type(3) { background:var(--color-navy); }
.about-page .section:nth-of-type(3) .section-label,.about-page .section:nth-of-type(3) h2,.about-page .section:nth-of-type(3) .principle-card h3 { color:var(--color-champagne-2); }
.about-page .section:nth-of-type(3) .section-label-bar { background:var(--color-champagne); }
.about-page .section:nth-of-type(3) .principles-grid { border-color:rgba(233,216,180,.3); }
.about-page .section:nth-of-type(3) .principle-card { border-color:rgba(233,216,180,.3); }
.about-page .section:nth-of-type(3) .principle-card p { color:rgba(243,234,211,.72); }
.about-page #leadership { background:var(--color-cream); }
.about-page #leadership .person-card { background:var(--color-card); }
html[lang="ar"] .showcase-split-head > p { border-inline-start:0; border-inline-end:1px solid rgba(233,216,180,.4); padding-inline-start:0; padding-inline-end:var(--space-lg); }
html[lang="ar"] .journey-steps { direction:rtl; }
@media (max-width:900px) {
  .showcase-split-head { grid-template-columns:1fr; }
  .showcase-split-head > p { padding-inline-start:var(--space-md); }
}
@media (max-width:600px) {
  .solutions-page .page-hero,.about-page .page-hero { padding-block:2.5rem; }
  .journey-steps { grid-template-columns:repeat(2,1fr); gap:var(--space-lg) 0; }
  .journey-steps::before { display:none; }
  .journey-steps li > span { width:3.5rem; }
  .showcase-split-head > p { border-inline-start:0; padding-inline-start:0; border-top:1px solid rgba(233,216,180,.4); padding-top:var(--space-md); }
  html[lang="ar"] .showcase-split-head > p { border-inline-end:0; padding-inline-end:0; }
}

/* Preserve header-overlay clearance after the compact secondary-page rules. */
.hero-glass-page.solutions-page .page-hero,
.hero-glass-page.about-page .page-hero {
  padding-top: calc(var(--header-height) + clamp(2.75rem, 5.5vw, 4.5rem));
}
@media (max-width:600px) {
  .hero-glass-page.solutions-page .page-hero,
  .hero-glass-page.about-page .page-hero {
    padding-top: calc(var(--header-height) + 2.5rem);
  }
}

/* Animated atmosphere shared by every questionnaire in /solutions/. */
.questionnaire-page::before,
.questionnaire-page::after { display:none; }
.questionnaire-atmosphere {
  position:fixed;
  inset:var(--header-height) 0 0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--color-navy-deep);
}
.questionnaire-backdrop {
  position:absolute;
  inset:-2%;
  z-index:0;
  opacity:0;
  background-position:center;
  background-size:cover;
  transform:scale(1.04);
  transition:opacity 2.8s ease-in-out, transform 14s ease-out;
}
.questionnaire-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,rgba(11,25,41,.6),rgba(16,35,59,.25) 55%,rgba(0,51,28,.3));
}
.questionnaire-backdrop.is-visible { opacity:1; transform:scale(1); }
.smoke {
  position:absolute;
  z-index:2;
  width:58vw;
  height:45vh;
  opacity:.38;
  filter:blur(24px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  background:
    radial-gradient(ellipse at 18% 55%,rgba(255,255,255,.92) 0 14%,rgba(255,255,255,.38) 29%,transparent 48%),
    radial-gradient(ellipse at 48% 45%,rgba(255,255,255,.78) 0 17%,rgba(255,255,255,.3) 34%,transparent 52%),
    radial-gradient(ellipse at 78% 58%,rgba(255,255,255,.84) 0 14%,rgba(255,255,255,.32) 31%,transparent 49%);
}
.smoke--left { left:-38vw; top:18%; animation:smoke-from-left 24s ease-in-out infinite alternate; }
.smoke--right { right:-38vw; top:40%; animation:smoke-from-right 29s ease-in-out infinite alternate; }
.smoke--rise { left:22%; bottom:-37vh; width:55vw; animation:smoke-rise 32s ease-in-out infinite; }
@keyframes smoke-from-left {
  0% { transform:translate3d(-8vw,6vh,0) scale(.9); opacity:.18; }
  45% { opacity:.46; }
  100% { transform:translate3d(48vw,-5vh,0) scale(1.18); opacity:.25; }
}
@keyframes smoke-from-right {
  0% { transform:translate3d(8vw,-3vh,0) scale(.92); opacity:.16; }
  50% { opacity:.42; }
  100% { transform:translate3d(-48vw,5vh,0) scale(1.2); opacity:.24; }
}
@keyframes smoke-rise {
  0% { transform:translate3d(-5vw,14vh,0) scale(.88); opacity:.12; }
  48% { opacity:.38; }
  100% { transform:translate3d(9vw,-75vh,0) scale(1.28); opacity:0; }
}
.questionnaire-page .site-header { z-index:100; }
.questionnaire-shell { position:relative; z-index:3; }
.questionnaire-wrap { background:rgba(249,248,242,.66); }

@media (min-width:901px) {
  .director-page #main {
    display:grid;
    grid-template-columns:minmax(1.25rem,1fr) minmax(14rem,21rem) minmax(0,45rem) minmax(1.25rem,1fr);
    column-gap:clamp(2rem,5vw,5rem);
    padding-top:clamp(2.25rem,5vw,4.5rem);
  }
  .director-page #main::before {
    content:"";
    grid-column:2 / 4;
    grid-row:1 / 3;
    border:1px solid rgba(23,48,66,.12);
    border-radius:1.35rem;
    background:rgba(249,248,242,.68);
    box-shadow:0 1.5rem 4rem rgba(12,29,45,.1);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .director-page .director-hero,
  .director-page .director-hero-grid,
  .director-page .director-biography { display:contents; }
  .director-page .director-copy {
    grid-column:3;
    grid-row:1;
    align-self:end;
    z-index:1;
    padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem) 0 0;
  }
  .director-page .director-portrait {
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    z-index:1;
    width:100%;
    max-width:21rem;
    margin:clamp(1.1rem,2vw,1.65rem);
  }
  .director-page .director-biography .director-editorial {
    display:block;
    grid-column:3;
    grid-row:2;
    z-index:1;
    width:auto;
    padding:clamp(1.15rem,2.5vw,1.75rem) clamp(1.25rem,2.5vw,2rem) clamp(1.5rem,3vw,2.5rem) 0;
    border-top:1px solid rgba(23,48,66,.14);
  }
  .director-page .director-copy h1 { font-size:clamp(2.5rem,4.5vw,4.25rem); }
  .director-page .director-title { margin-bottom:1rem; }
  .director-page .director-summary { max-width:42rem; font-size:clamp(1rem,1.5vw,1.16rem); }
  .director-page .director-biography .section-label { margin-bottom:.75rem; }
  .director-page .director-prose h2 { max-width:28ch; margin-bottom:.9rem; font-size:clamp(1.4rem,2.5vw,2.05rem); }
  .director-page .director-prose p { margin-bottom:.75rem; font-size:clamp(.94rem,1.2vw,1.04rem); line-height:1.68; }
  .director-page #main > section:not(.director-hero):not(.director-biography) { grid-column:1 / -1; }
  html[dir="rtl"] .director-page .director-copy,
  html[dir="rtl"] .director-page .director-biography .director-editorial {
    padding-right:0;
    padding-left:clamp(1.25rem,2.5vw,2rem);
  }
}

@media (max-width:900px) {
  .director-page .director-portrait { width:min(100%,18rem); margin-inline:auto; }
}

/* Closing CTA: keep the statement in one grid track and animate only
   composited properties, eliminating the previous discrete grid jump. */
@media (min-width:901px) {
  .cta-statement {
    grid-column:1;
    justify-self:end;
    width:100%;
    max-width:22rem;
    padding-inline-end:.5rem;
    transform:translate3d(calc(50% + clamp(.65rem,1.5vw,1.25rem)),0,0);
    transition:transform 1.15s cubic-bezier(.16,1,.3,1), text-align .6s ease;
    will-change:transform;
  }
  .section-cta.cta-phase-split .cta-statement {
    grid-column:1;
    justify-self:end;
    transform:translate3d(0,0,0);
  }
  .section-cta.is-rtl-cta .cta-statement {
    grid-column:3;
    justify-self:start;
    padding-inline-start:.5rem;
    padding-inline-end:0;
    transform:translate3d(calc(-50% - clamp(.65rem,1.5vw,1.25rem)),0,0);
  }
  .section-cta.is-rtl-cta.cta-phase-split .cta-statement {
    grid-column:3;
    justify-self:start;
    transform:translate3d(0,0,0);
  }
  .cta-divider {
    transition:height .95s cubic-bezier(.16,1,.3,1), opacity .65s ease;
  }
  .cta-form-panel {
    transform:translate3d(2rem,0,0);
    filter:blur(5px);
    transition:opacity .95s ease,transform 1.05s cubic-bezier(.16,1,.3,1),filter .85s ease;
    will-change:transform,opacity,filter;
  }
  .section-cta.is-rtl-cta .cta-form-panel { transform:translate3d(-2rem,0,0); }
  .section-cta.cta-phase-form .cta-form-panel,
  .section-cta.is-rtl-cta.cta-phase-form .cta-form-panel {
    transform:translate3d(0,0,0);
    filter:blur(0);
  }
}
@media (prefers-reduced-motion:reduce) {
  .questionnaire-backdrop { transition:none; transform:none; }
  .smoke { animation:none; opacity:.1; }
}

/* The language control alone needs stronger contrast over the dark image
   heroes. Once the header leaves the hero, the shared ivory-header color
   rules take over again. */
.solutions-page.hero-glass-page .site-header:not(.is-past-hero) .lang-toggle,
.about-page.hero-glass-page .site-header:not(.is-past-hero) .lang-toggle {
  color:#fff;
}
.solutions-page.hero-glass-page .site-header:not(.is-past-hero) .lang-toggle:hover,
.about-page.hero-glass-page .site-header:not(.is-past-hero) .lang-toggle:hover {
  color:var(--color-navy);
}

/* Center the intrinsic two-line home headline in both writing directions;
   this intentionally overrides the older language-specific width caps. */
.home-page .hero-inner .hero-title {
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  text-align:center;
}

/* Legacy standalone articles use the established shared shell and type scale. */
.standalone-article .article-layout, .standalone-article .article-wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--space-xl)) var(--container-pad) var(--space-xl);
}
.standalone-article .article-layout > .container { padding: 0; }
.standalone-article .article-kicker, .standalone-article .eyebrow, .standalone-article .article-meta { color: var(--color-ink-soft); }
.standalone-article h1 { margin: var(--space-sm) 0 var(--space-md); font-size: var(--fs-title); }
.standalone-article .article-lede { font-size: var(--fs-lead); }
.standalone-article .article-body p, .standalone-article .article-body ul { margin: var(--space-md) 0; }
.standalone-article .article-body h2 { margin-top: var(--space-lg); }
.standalone-article .article-body ul { padding-inline-start: 1.5rem; list-style: disc; }
.standalone-article .article-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.standalone-article .article-back { display: inline-block; margin-top: var(--space-lg); }
.office-card > span:not(.demo-flag) { display: block; overflow-wrap: anywhere; }
.cta-form-status.is-error, .questionnaire-status.is-error { color: #b94334; }
.section-cta .cta-form-status { color: var(--color-champagne-2); }
.section-cta .cta-form-status.is-success { color: #b9e6c6; }
.section-cta .cta-form-status.is-error { color: #ffb8aa; }
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: .5rem; inset-inline-start: .5rem; z-index: 300; padding: .75rem; background: var(--color-cream); color: var(--color-navy); }
.article-reader:not(.is-open) { visibility: hidden; }
@media (max-width: 900px) {
  .nav-primary:not(.is-open) { visibility: hidden; }
}
@media (max-width: 480px) {
  .site-header .nav-bar { gap: .55rem; }
  .site-header .brand { gap: .45rem; min-width: 0; }
  .site-header .brand-wordmark { font-size: .67rem; letter-spacing: .16em !important; }
  .site-header .nav-actions { gap: .7rem; flex-shrink: 0; }
  html[lang="ar"] .site-header .lang-toggle { font-family: var(--font-sans); font-size: .702rem; }
  .site-header .nav-toggle { flex-shrink: 0; }
}