/* ===== Design tokens ===== */
:root {
  /* Navy surfaces — Sterling navy is #0B1320. Settled: the build was
     right and design brief §1 (#1a2a44) is stale. Do not derive these
     from #1a2a44 and do not eyedrop the mockups; some frames carry older
     one-off tints. Values come from the round-3 palette table.
     Contrast on #0B1320 is already cleared: white ~15:1, gold ~7:1,
     muted #8A93A0 ~6:1 - no type or accent colour needs to move. */
  --navy: #0B1320;            /* header, hero, page headers, domains */
  --navy-rgb: 11, 19, 32;     /* --navy as a triplet, for gradient stops */
  --navy-related: #131E2E;    /* related band */
  --navy-secondary: #1D2636;  /* CTA band */
  --gold: #C59D5F;
  --gold-hover: #B08849;
  --grey-light: #E6E7EB;
  --bg-offwhite: #EFEEEA;
  --bg-light: #F4F3EF;
  --bg-white: #FFFFFF;
  --footer-dark: #071322;   /* footer */
  --body-grey: #5C5F63;
  --body-grey-2: #6B6E72;
  --on-dark-grey-1: #A9B1BC;
  --on-dark-grey-2: #C7CDD4;
  --nav-muted: #8A93A0;
  /* Hairlines sitting over navy — lifted to a single translucent white so
     they track the surface instead of being re-derived per background. */
  --border-navy: rgba(255, 255, 255, 0.14);
  --border-nav: rgba(255, 255, 255, 0.14);
  --border-hairline: rgba(255, 255, 255, 0.14);
  --border-footer: rgba(255, 255, 255, 0.14);
  --border-light: #E2E1DC;   /* hairline on white or sand */
  --footer-muted: #6B7684;
  --footer-copyright: #5C6570;

  --container-max: 1440px;
  --pad-desktop: 80px;   /* 1440 page - 160 = 1280 content, per round-3 frames */
  --pad-mobile: 24px;
  --radius-btn: 2px;
  --transition: 200ms ease;
}

/* ===== Reset ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-offwhite);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: var(--gold); transition: color var(--transition); }
a:hover { color: var(--gold-hover); }
/* ol as well as ul: the sequence grids are ordered lists so the order is
   carried semantically, but the visible numeral is the .card-num /
   .problem-num / .approach-number span (aria-hidden). Without this, the
   browser paints its own marker as well and the number appears twice -
   in Arabic-Indic too, since the marker follows lang. */
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.cinzel { font-family: 'Cinzel', serif; }
.mont { font-family: 'Montserrat', sans-serif; }
.lato { font-family: 'Lato', sans-serif; }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 16px; top: 16px; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
}
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--navy); }
.btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid var(--border-hairline);
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

.eyebrow {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.center { text-align: center; }

.rule { height: 2px; width: 40px; background: var(--gold); margin: 18px 0; }
.rule.center { margin-inline: auto; }
.rule-light { background: var(--gold); }
.rule-dark { background: var(--gold); }

/* Header and hero share one navy parent, so any rounding between the two
   navy blocks reveals navy rather than the page's white. */
.navy-band { background: var(--navy); }

/* ===== Header / Nav ===== */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 41;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
}
.brand-tagline {
  font-size: 6px;
  letter-spacing: 0.28em;
  color: var(--grey-light);
  text-transform: uppercase;
}
.footer-brand-name { color: #FFFFFF; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  z-index: 41;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--gold);
  width: 20px;
  transition: transform var(--transition), opacity var(--transition), width var(--transition);
}
.nav-toggle span:last-child { width: 14px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); width: 20px; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); width: 20px; }

.primary-nav {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  z-index: 40;
}
.primary-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-grey-2);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: #FFFFFF; }
.nav-link.is-active { color: #FFFFFF; font-weight: 600; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--nav-muted);
  padding: 2px;
}
.lang-btn.is-active { color: var(--on-dark-grey-2); }
.lang-toggle span { color: var(--border-nav); }

.nav-cta { color: var(--navy); }

/* ===== Hero ===== */
/* The hero has no child element for the image at all. Navy, photo and both
   fades are background layers of ONE box, so background-color and
   background-image share a single painting box and there is no edge that
   can round apart at non-integer zoom. A stacked <img> or positioned div
   leaves a 1px light seam at 75/90/110% - nudging, 1px bleeds, negative
   margins, shadows and wrappers all fail at some zoom level.

   Layer order (top to bottom):
     1. vertical scrim  - solid navy top and bottom, clear through the
                          middle; this is what lets the photo meet the
                          header with no visible edge
     2. horizontal fade - solid navy to 54%, ramping to 15% at the far
                          edge; this defines where the image appears to
                          begin, which is why it needs no box of its own
     3. the photo       - auto 100% fills the hero height and keeps aspect

   All three gradients and the background-color are the SAME navy. If the
   token changes they must change together, or the seam returns as a tonal
   edge instead of a white one.

   Never reintroduce a child element or nested overlay here. If something
   needs to move, edit the gradient stops. */
.hero {
  --hero-photo: url('../images/hero-towers.jpg');
  position: relative;
  overflow: hidden;
  background-color: var(--navy);
  background-image:
    linear-gradient(180deg,
      var(--navy) 0%,
      rgba(var(--navy-rgb), 0.45) 6%,
      rgba(var(--navy-rgb), 0) 20%,
      rgba(var(--navy-rgb), 0) 80%,
      rgba(var(--navy-rgb), 0.5) 94%,
      var(--navy) 100%),
    linear-gradient(90deg,
      var(--navy) 0%,
      var(--navy) 62%,
      rgba(var(--navy-rgb), 0.55) 82%,
      rgba(var(--navy-rgb), 0.18) 100%),
    var(--hero-photo);
  background-size: 100% 100%, 100% 100%, auto 100%;
  background-position: center, center, right center;
  background-repeat: no-repeat;
}
.hero-inner {
  position: relative;
  padding-block: 72px 80px;
}
.hero-title {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.22;
  color: #FFFFFF;
}
.hero-copy {
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--on-dark-grey-2);
  max-width: 460px;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-actions .btn { width: 100%; }

/* ===== Who We Are ===== */
.who-we-are {
  background: var(--bg-light);
  padding-block: 40px;
}
.section-title {
  font-weight: 500;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 8px;
}
.section-title-light { color: #FFFFFF; }
.section-copy {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.8;
  color: var(--body-grey);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 36px;
}

.pillars {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: start;
}
.pillar { padding-top: 22px; border-top: 1px solid var(--border-light); }
.pillar:first-child { padding-top: 0; border-top: none; }
.pillar-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 14px 0 8px;
}
.pillar-copy {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--body-grey-2);
}

/* ===== Services ===== */
.services {
  background: var(--navy);
  padding-block: 40px;
  text-align: center;
}
.service-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
  text-align: start;
}
.service-card {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
}
.service-card:first-child { border-top: none; padding-top: 0; }
.service-title {
  font-weight: 600;
  font-size: 13px;
  color: #FFFFFF;
  margin: 14px 0 10px;
}
.service-copy {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.7;
  color: var(--on-dark-grey-1);
  margin-bottom: 14px;
}
.service-link {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.services-cta { margin-top: 36px; }

/* ===== Approach ===== */
.approach {
  background: var(--bg-white);
  padding-block: 40px;
}
.approach-head { margin-bottom: 36px; }
.approach-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1080px;
  margin-inline: auto;
}
.approach-number {
  font-size: 36px;
  color: var(--grey-light);
  margin-bottom: 10px;
}
.approach-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.approach-copy {
  font-size: 13px;
  line-height: 1.75;
  color: var(--body-grey);
}

/* ===== CTA banner ===== */
.cta-banner {
  background: var(--navy-secondary);
  padding-block: 44px;
  text-align: center;
}
.cta-title {
  font-weight: 500;
  font-size: 22px;
  color: #FFFFFF;
  margin-bottom: 14px;
}
.cta-copy {
  font-weight: 300;
  font-size: 13px;
  color: var(--on-dark-grey-2);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: 24px;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--footer-dark);
  padding-block: 40px 24px;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-footer);
}
.footer-blurb {
  font-size: 12px;
  line-height: 1.7;
  color: var(--footer-muted);
  max-width: 320px;
  margin-top: 14px;
}
.footer-heading {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 12px; }
.footer-links a, .footer-links li { color: var(--nav-muted); }
.footer-links a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding-top: 22px;
}
.footer-copyright { font-size: 10.5px; color: var(--footer-copyright); }
.footer-legal {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-copyright);
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-legal a { color: var(--footer-copyright); }
.footer-legal a:hover { color: var(--gold); }

/* ===== Page header (About / Services / Team / Contact) ===== */
.page-header {
  background: var(--navy);
  padding: 44px 0 50px;
}
.breadcrumb {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-muted);
  margin-bottom: 16px;
}
.breadcrumb-current { color: var(--gold); }
.page-title {
  font-weight: 500;
  font-size: 26px;
  color: #FFFFFF;
  margin: 0 0 16px;
  max-width: 760px;
}
.page-intro {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--on-dark-grey-2);
  max-width: 640px;
  margin: 0;
}

/* ===== Story (About) ===== */
.story {
  background: var(--bg-white);
  padding-block: 40px;
}
.story-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.story-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background-image: url('../images/story-office.jpg');
  background-size: cover;
  background-position: center;
}
.story-copy p {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.85;
  color: var(--body-grey);
}
.story-copy p + p { margin-top: 18px; }

/* ===== Offerings grid (Services overview) ===== */
.offerings {
  background: var(--bg-white);
  padding-block: 40px;
}
.offerings-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 36px;
}
.offering {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.offering-icon { flex-shrink: 0; }
.offering-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy);
  margin-bottom: 8px;
}
.offering-copy {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--body-grey);
  margin-bottom: 12px;
}
.offering-link {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== Team grid ===== */
.team {
  background: var(--bg-white);
  padding-block: 40px;
}
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 36px;
}
.team-card { text-align: center; }
.team-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-photo svg { opacity: 0.35; }
.team-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--navy);
  margin-bottom: 6px;
}
.team-role {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.team-bio {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--body-grey-2);
}

/* ===== Contact ===== */
.contact-section { background: var(--bg-white); padding-block: 40px; }
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Honeypot. Functional, not decorative — do not restyle or delete.
   Off-canvas rather than display:none, because a number of bots skip
   fields that are display:none or type=hidden but will happily fill
   one that is merely positioned out of view. */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  color: var(--navy);
  background: var(--bg-light);
  border: 1px solid #DEDDD7;
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-error {
  display: none;
  font-size: 11px;
  color: #B3453D;
  margin-top: 6px;
}
.form-group.has-error input,
.form-group.has-error textarea { border-color: #B3453D; }
.form-group.has-error .form-error { display: block; }
.form-status {
  display: none;
  font-size: 12.5px;
  line-height: 1.7;
  padding: 14px 16px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.form-status.is-success {
  display: block;
  background: #EAF3EC;
  color: #2E6B41;
}
.form-status.is-error {
  display: block;
  background: #FBEAE8;
  color: #B3453D;
}
.office-details h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 18px;
}
.office-item { margin-bottom: 20px; }
.office-item-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-muted);
  margin-bottom: 4px;
}
.office-item-value { font-size: 13px; color: var(--body-grey); line-height: 1.7; }
.office-item-value a { color: var(--body-grey); }
.office-item-value a:hover { color: var(--gold); }
.map-placeholder {
  margin-top: 28px;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =====================================================
   Tablet ≥ 768px
   ===================================================== */
@media (min-width: 768px) {
  .container { padding-inline: 40px; }

  .hero {
    background-image:
      linear-gradient(180deg,
        var(--navy) 0%,
        rgba(var(--navy-rgb), 0.45) 6%,
        rgba(var(--navy-rgb), 0) 20%,
        rgba(var(--navy-rgb), 0) 80%,
        rgba(var(--navy-rgb), 0.5) 94%,
        var(--navy) 100%),
      linear-gradient(90deg,
        var(--navy) 0%,
        var(--navy) 58%,
        rgba(var(--navy-rgb), 0.55) 76%,
        rgba(var(--navy-rgb), 0.15) 100%),
      var(--hero-photo);
  }
  .hero-inner { padding-block: 96px 104px; }
  .hero-title { font-size: 38px; }

  .pillars {
    flex-direction: row;
    text-align: start;
  }
  .pillar { flex: 1; padding: 0 20px; border-top: none; border-inline-end: 1px solid var(--border-light); }
  .pillar:first-child { padding-inline-start: 0; }
  .pillar:last-child { border-inline-end: none; }

  .approach-steps { flex-direction: row; gap: 40px; }

  .footer-grid { flex-direction: row; }
  .footer-brand { flex: 1.4; }
  .footer-col { flex: 1; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }

  .story-grid { flex-direction: row; align-items: center; gap: 48px; }
  .story-media { flex: 1; }
  .story-copy { flex: 1; }

  .offerings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }

  .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

  .contact-grid { flex-direction: row; gap: 64px; }
  .contact-form-col { flex: 1.3; }
  .office-col { flex: 1; }
}

/* =====================================================
   Desktop ≥ 1024px
   ===================================================== */
@media (min-width: 1024px) {
  .container { padding-inline: var(--pad-desktop); }

  .site-header { position: static; }
  .nav { padding-block: 22px; }
  /* Logo enlarged per the final frames. The header lockup steps up from
     34x38 / 19px; the footer mark gets its own rule because the old
     blanket `.brand-mark` above was overriding the 26x29 in its markup
     and pinning both marks to the same size. */
  .site-header .brand-mark  { width: 48px; height: 53px; }
  .site-header .brand-name  { font-size: 24px; }
  .footer-brand .brand-mark { width: 36px; height: 40px; }
  .footer-brand .brand-name { font-size: 19px; }
  .brand-tagline { font-size: 7.5px; }

  .nav-toggle { display: none; }
  .primary-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
  }
  .nav-links { flex-direction: row; gap: 30px; }
  /* Six items now, and `Financial Health Check` / `الفحص المالي الشامل` is long
     enough to break inside its own cell, which pushed the header from
     97px to 134px in Arabic. Nav items hold one line. */
  .nav-link { font-size: 11px; font-weight: 400; white-space: nowrap; }
  .nav-link.is-active { font-weight: 400; border-bottom: 2px solid var(--gold); }
  .lang-toggle {
    border-inline-start: 1px solid var(--border-nav);
    padding-inline-start: 22px;
    font-size: 10px;
  }
  .nav-cta { padding: 11px 20px; font-size: 10.5px; }

  .hero {
    background-image:
      linear-gradient(180deg,
        var(--navy) 0%,
        rgba(var(--navy-rgb), 0.45) 6%,
        rgba(var(--navy-rgb), 0) 20%,
        rgba(var(--navy-rgb), 0) 80%,
        rgba(var(--navy-rgb), 0.5) 94%,
        var(--navy) 100%),
      linear-gradient(90deg,
        var(--navy) 0%,
        var(--navy) 54%,
        rgba(var(--navy-rgb), 0.55) 71%,
        rgba(var(--navy-rgb), 0.15) 100%),
      var(--hero-photo);
  }
  .hero-inner { padding: 120px 0 130px; }
  .hero-title { font-size: 56px; line-height: 1.16; }
  .hero-copy { font-size: 16px; }
  .hero-actions { flex-direction: row; gap: 16px; }
  .hero-actions .btn { width: auto; padding: 16px 28px; }

  .who-we-are, .services, .approach { padding-block: 104px; }
  .section-title { font-size: 38px; margin-bottom: 18px; }
  .services .section-title { font-size: 34px; margin-bottom: 64px; }
  .section-copy { font-size: 15px; margin-bottom: 64px; }

  .pillar-title { font-size: 12px; }
  .service-title { font-size: 13px; }

  .service-cards { flex-direction: row; }
  .service-card {
    flex: 1;
    padding: 0 16px;
    border-top: none;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
  }
  .service-card:first-child { padding-inline-start: 0; }
  .service-card:last-child { border-inline-end: none; padding-inline-end: 0; }

  .services-cta { margin-top: 56px; }
  .services-cta .btn { padding: 15px 30px; font-size: 11px; }

  .approach-head { margin-bottom: 70px; }
  .approach-head .section-title { font-size: 34px; margin-bottom: 0; }
  .approach-number { font-size: 44px; }
  .approach-title { font-size: 14px; }

  .cta-banner { padding-block: 80px; }
  .cta-title { font-size: 32px; }
  .cta-copy { font-size: 14px; }

  .site-footer { padding-block: 70px 30px; }
  .footer-grid { gap: 44px; padding-bottom: 50px; }
  .footer-heading { font-size: 11px; }

  .page-header { padding: 64px 0 90px; }
  .breadcrumb { font-size: 10.5px; margin-bottom: 26px; }
  .page-title { font-size: 48px; margin-bottom: 24px; }
  .page-intro { font-size: 15px; }

  .story, .offerings, .team, .contact-section { padding-block: 96px; }
  .story-media { aspect-ratio: 5 / 4; }

  .offerings-head, .team-head { text-align: center; margin-bottom: 64px; }
  .offering-title { font-size: 14px; }
  .offerings-grid { grid-template-columns: repeat(3, 1fr); }

  .team-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

/* =====================================================
   ROUND 3
   New sections introduced by the round-3 architecture.
   Rules for .service-card / .service-copy are scoped under their
   round-3 grid parents, because the round-2 pages still in the tree
   use those same class names with different geometry.
   ===================================================== */

/* ----- shared section head ----- */
.section-head { margin-bottom: 36px; }
.section-head .section-copy { margin-bottom: 0; }

/* ----- hero type scale: EN 40 / 56 / 64 / 84 ----- */
.hero-title { font-size: 40px; line-height: 1.1; }

/* ----- Problems We Solve ----- */
.section-problems { background: var(--bg-white); padding-block: 56px; }
.problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 80px;
  max-width: 1200px;
  margin-inline: auto;
}
.problem-item {
  display: flex;
  gap: 22px;
  padding-block: 26px 30px;
  border-block-start: 1px solid var(--border-light);
}
.problem-num {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--gold);
  padding-block-start: 3px;
}
.problem-title {
  font-size: 17px;
  line-height: 1.45;
  color: var(--navy);
  font-weight: 400;
  text-wrap: pretty;
}
.problem-copy {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.8;
  color: var(--body-grey);
  margin-top: 14px;
  text-wrap: pretty;
}

/* ----- The four rules ----- */
.section-rules { background: var(--bg-light); padding-block: 56px; }
.rules-grid { display: grid; grid-template-columns: 1fr; gap: 28px; text-align: start; }
.rule-item { color: var(--navy); }
.rule-item svg { margin-bottom: 20px; }
.rule-title {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 11px;
}
.rule-copy {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.8;
  color: var(--body-grey);
  text-wrap: pretty;
}

/* ----- Programs (3 x 2 at desktop) ----- */
.section-programs { background: var(--navy); padding-block: 56px; }
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin-inline: auto;
}
.program-card {
  padding-block: 30px;
  border-block-start: 1px solid var(--border-navy);
}
.card-num { display: block; font-size: 14px; color: var(--gold); margin-bottom: 16px; }
.program-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: #FFFFFF;
  margin-bottom: 14px;
}
.program-copy {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--on-dark-grey-1);
  margin-bottom: 18px;
  text-wrap: pretty;
}

/* ----- Services (4 x 1 at desktop) ----- */
.section-services { background: var(--navy-related); padding-block: 56px; }
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin-inline: auto;
}
.services-grid .service-card {
  padding-block: 26px;
  border-block-start: 1px solid var(--border-navy);
  border-inline-end: none;
}
.services-grid .service-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  color: #FFFFFF;
  margin-bottom: 14px;
}
.services-grid .service-copy {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--on-dark-grey-1);
  margin-bottom: 18px;
  text-wrap: pretty;
}
.section-services .services-cta { margin-top: 40px; text-align: center; }

/* ----- Learn More link (arrow supplied by rtl.css so it flips) ----- */
.link-more {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ----- Approach, now four steps ----- */
.section-approach { background: var(--bg-white); padding-block: 56px; }
.approach-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 1280px; margin-inline: auto; }
.approach-grid .approach-number { display: block; font-size: 36px; color: var(--grey-light); margin-bottom: 10px; }

/* ----- Footer, five columns ----- */
.footer-grid { display: flex; flex-direction: column; gap: 32px; }

/* =====================================================
   ROUND 3 — tablet
   ===================================================== */
@media (min-width: 768px) {
  .hero-title { font-size: 56px; }

  .section-problems,
  .section-rules,
  .section-programs,
  .section-services,
  .section-approach { padding-block: 72px; }

  .rules-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .rule-item { padding-inline: 28px; border-inline-end: 1px solid var(--border-light); }
  .rule-item:first-child { padding-inline-start: 0; }
  .rule-item:last-child { border-inline-end: none; padding-inline-end: 0; }

  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .program-card { padding-inline: 34px; border-inline-end: 1px solid var(--border-navy); }
  .program-card:nth-child(2n) { border-inline-end: none; padding-inline-end: 0; }
  .program-card:nth-child(2n + 1) { padding-inline-start: 0; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid .service-card { padding-inline: 30px; border-inline-end: 1px solid var(--border-navy); }
  .services-grid .service-card:nth-child(2n) { border-inline-end: none; padding-inline-end: 0; }
  .services-grid .service-card:nth-child(2n + 1) { padding-inline-start: 0; }

  .approach-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }

  /* Footer: the brand lifts to its own row and the four link columns
     sit 2 x 2 beneath it. Five-across only arrives at 1200. */
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 44px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-footer);
  }
}

/* =====================================================
   ROUND 3 — desktop
   ===================================================== */
@media (min-width: 1024px) {
  .hero-title { font-size: 64px; }

  .section-problems,
  .section-rules,
  .section-programs,
  .section-services,
  .section-approach { padding-block: 100px; }

  .section-head { margin-bottom: 56px; }

  .problems-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-title { font-size: 19px; }

  .rule-item { padding-inline: 34px; }

  /* three across, two rows */
  .programs-grid { grid-template-columns: repeat(3, 1fr); }
  .program-card:nth-child(2n) { border-inline-end: 1px solid var(--border-navy); padding-inline-end: 34px; }
  .program-card:nth-child(2n + 1) { padding-inline-start: 34px; }
  .program-card:nth-child(3n) { border-inline-end: none; padding-inline-end: 0; }
  .program-card:nth-child(3n + 1) { padding-inline-start: 0; }

  /* Services stay 2 x 2 here — four across is a 1200 step, per the
     responsive proofs. The 768 border rules still apply. */

  /* Footer: brand row above four equal columns. */
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
}

/* =====================================================
   ROUND 3 — 1200 and above
   The three four-across rows all land here, not at 1440:
   "Sterling R3 - Responsive Proofs" sets SERVICES 4 x 1,
   APPROACH 4 x 1 and FOOTER 5 columns at >= 1200, with
   1024 holding 2 x 2, 2 x 2 and brand-row + 4.
   ===================================================== */
@media (min-width: 1200px) {
  /* four across, one row */
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .services-grid .service-card:nth-child(2n) { border-inline-end: 1px solid var(--border-navy); padding-inline-end: 30px; }
  .services-grid .service-card:nth-child(2n + 1) { padding-inline-start: 30px; }
  .services-grid .service-card:first-child { padding-inline-start: 0; }
  .services-grid .service-card:last-child { border-inline-end: none; padding-inline-end: 0; }

  .approach-grid { grid-template-columns: repeat(4, 1fr); gap: 52px; }

  /* footer: brand + Programs + Services + Company + Contact */
  .footer-grid {
    grid-template-columns: 1.25fr 1fr 1fr 0.72fr 1fr;
    gap: 44px;
  }
  .footer-brand {
    grid-column: auto;
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* =====================================================
   ROUND 3 — 1440 and above
   The hero headline reaches its full size at the design
   width; the four-across rows already landed at 1200.
   ===================================================== */
@media (min-width: 1440px) {
  /* 600px measure: what makes the 84px headline stack as two lines.
     Widening this to ~940px and dropping to 76px is the only other
     combination design signed off. */
  .hero-inner { max-width: 600px; }
  .hero-copy { max-width: 560px; line-height: 1.85; }
  .hero-title { font-size: 84px; line-height: 1.04; letter-spacing: 0.005em; }
}

/* =====================================================
   ROUND 3 — light-surface variants
   Home carries programs on navy and services on the related band.
   The Programs & Services page carries the same two grids on white
   and sand, so the surface and its ink flip together.
   ===================================================== */
.section-programs.on-light { background: var(--bg-white); }
.section-services.on-light { background: var(--bg-light); }

.on-light .program-card,
.on-light .services-grid .service-card { border-color: var(--border-light); }

.on-light .program-name,
.on-light .services-grid .service-name { color: var(--navy); }

.on-light .program-copy,
.on-light .services-grid .service-copy { color: var(--body-grey); font-size: 13px; line-height: 1.8; }

/* This page leads each grid with a left-aligned head rather than a centred one. */
.section-head.start { text-align: start; max-width: 1280px; margin-inline: auto; }
.section-head.start .eyebrow,
.section-head.start .section-title { text-align: start; }

/* =====================================================
   ROUND 3 — Financial Health Check
   The longest page on the site. The rail is what stops it
   reading as one continuous scroll.
   ===================================================== */
.page-rail {
  background: var(--bg-white);
  border-block-end: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 30;
}
.page-rail .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  overflow-x: auto;
}
.rail-links {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
}
.rail-links a {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body-grey);
}
.rail-links a:hover { color: var(--navy); }
.page-rail .btn { flex-shrink: 0; }

/* ----- eight diagnostic domains: carded, iconed, on navy ----- */
.section-domains { background: var(--navy); padding-block: 56px; }
.domains-grid { display: grid; grid-template-columns: 1fr; max-width: 1280px; margin-inline: auto; }
.domain-card {
  padding-block: 26px;
  border-block-start: 1px solid var(--border-navy);
  color: var(--gold);
}
.domain-card svg { margin-bottom: 16px; }
.domain-name {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.45;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.domain-copy {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--on-dark-grey-1);
  text-wrap: pretty;
}

/* ----- eight sectors: an index, not a menu.
   No icons, no cards, nothing clickable - so the block cannot be
   mistaken for eight more pages. ----- */
.section-sectors { background: var(--bg-light); padding-block: 56px; }
.sectors-grid { display: grid; grid-template-columns: 1fr; column-gap: 64px; max-width: 1280px; margin-inline: auto; }
.sector-row {
  display: flex;
  gap: 20px;
  padding-block: 18px;
  border-block-start: 1px solid var(--border-light);
}
.sector-name {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--navy);
  line-height: 1.6;
}
.sector-copy {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--body-grey);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .section-domains, .section-sectors { padding-block: 72px; }
  .domains-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-card { padding-inline: 30px; border-inline-end: 1px solid var(--border-navy); }
  .domain-card:nth-child(2n) { border-inline-end: none; padding-inline-end: 0; }
  .domain-card:nth-child(2n + 1) { padding-inline-start: 0; }
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-name { flex-basis: 184px; }
}

@media (min-width: 1024px) {
  .section-domains, .section-sectors { padding-block: 100px; }
  .domains-grid { grid-template-columns: repeat(4, 1fr); }
  .domain-card:nth-child(2n) { border-inline-end: 1px solid var(--border-navy); padding-inline-end: 30px; }
  .domain-card:nth-child(2n + 1) { padding-inline-start: 30px; }
  .domain-card:nth-child(4n) { border-inline-end: none; padding-inline-end: 0; }
  .domain-card:nth-child(4n + 1) { padding-inline-start: 0; }
}

/* =====================================================
   ROUND 3 — Team
   A principal and the disciplines the practice draws on:
   a two-tier structure, not a four-slot grid with holes in it.
   ===================================================== */
.site-photo { display: block; width: 100%; height: auto; object-fit: cover; }

.section-leadership { background: var(--bg-white); padding-block: 56px; }
.leadership-card { display: flex; flex-direction: column; gap: 32px; }
.leadership-portrait {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 400 / 480;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}
.leadership-portrait .site-photo { width: 100%; height: 100%; }
.leadership-name {
  font-weight: 500;
  font-size: 28px;
  color: var(--navy);
  margin-bottom: 10px;
}
.leadership-role {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.leadership-bio {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.9;
  color: var(--body-grey);
  text-wrap: pretty;
  /* Same measure as the credential list beneath it. */
  max-width: 640px;
  margin: 0 0 30px;
}

/* The credential list echoes the consultants' rows exactly - same hairline,
   same rhythm, same 1fr auto so the year lands at the inline end in both
   locales without a per-locale override. Seniority is carried by scale
   elsewhere on the card, not by giving this block its own treatment. */
.leadership-creds { max-width: 640px; }

/* ----- the bench: five hairline cells, gold numerals, no portraits ----- */
.section-bench { background: var(--bg-light); padding-block: 56px; }
.bench-grid { display: grid; grid-template-columns: 1fr; max-width: 1280px; margin-inline: auto; }
.bench-item {
  padding-block: 24px;
  border-block-start: 1px solid var(--border-light);
}
.bench-num { display: block; font-size: 14px; color: var(--gold); margin-bottom: 12px; }
.bench-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 10px;
}
.bench-copy {
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--body-grey);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .section-leadership, .section-bench { padding-block: 72px; }
  .leadership-card { flex-direction: row; align-items: flex-start; gap: 56px; }
  .leadership-portrait { width: 320px; }
  .leadership-name { font-size: 34px; }
  .bench-grid { grid-template-columns: repeat(3, 1fr); }
  .bench-item { padding-inline: 26px; border-inline-end: 1px solid var(--border-light); }
  .bench-item:nth-child(3n) { border-inline-end: none; padding-inline-end: 0; }
  .bench-item:nth-child(3n + 1) { padding-inline-start: 0; }
}

@media (min-width: 1024px) {
  .section-leadership, .section-bench { padding-block: 100px; }
  .leadership-portrait { width: 400px; }
  .leadership-name { font-size: 38px; }
  /* five across in one band */
  .bench-grid { grid-template-columns: repeat(5, 1fr); }
  .bench-item { padding-inline: 22px; border-inline-end: 1px solid var(--border-light); }
  .bench-item:nth-child(3n) { border-inline-end: 1px solid var(--border-light); padding-inline-end: 22px; }
  .bench-item:nth-child(3n + 1) { padding-inline-start: 22px; }
  .bench-item:first-child { padding-inline-start: 0; }
  .bench-item:last-child { border-inline-end: none; padding-inline-end: 0; }
}

/* =====================================================
   ROUND 3 — in-house consultants
   One tier above the bench: portrait beside name and role, then bio,
   then a hairline credential list with the year set at the inline end.
   ===================================================== */
.section-consultants { background: var(--bg-light); padding-block: 56px; }
.consultants-grid { display: grid; grid-template-columns: 1fr; gap: 56px; max-width: 1200px; margin-inline: auto; }
.consultant-head { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 24px; }
.consultant-photo {
  width: 140px;
  height: 173px;
  flex-shrink: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
}
.consultant-photo .site-photo { width: 100%; height: 100%; }
.consultant-name {
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 8px;
}
.consultant-role {
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--body-grey-2);
}
.consultant-bio {
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--body-grey);
  margin-bottom: 26px;
  text-wrap: pretty;
}
.cred-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9A8A6B;
  margin-bottom: 6px;
}
.cred-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding-block: 11px;
  border-block-start: 1px solid #D9D7D0;
}
.cred-text {
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--navy);
}
/* No direction lock: the year is Latin in English and Arabic-Indic in
   Arabic, and each lays out correctly in its own locale. */
.cred-year {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #9A8A6B;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .section-consultants { padding-block: 72px; }
  .consultant-photo { width: 170px; height: 210px; }
  .consultant-name { font-size: 26px; }
}

@media (min-width: 1024px) {
  .section-consultants { padding-block: 92px; }
  .consultants-grid { grid-template-columns: repeat(2, 1fr); column-gap: 80px; }
}


/* =====================================================
   ROUND 3 — eyebrow ramp and the home heading tiers
   Both taken from "Sterling Solutions Website.dc.html"
   (1440) and "Sterling R3 - Responsive Proofs" (1024 /
   768 / 375), measured rather than eyeballed.

   The eyebrow was flat 9px / 0.2em, which left it a size
   below its own Arabic counterpart at every width.

   The headings sit in two tiers: Problems and Who We Are
   one step above the three offering rows. The round-2
   rules that carried this (`.services .section-title`,
   `.approach-head .section-title`) still exist above but
   match nothing — the round-3 markup renamed those hooks
   — so every heading had collapsed to one size.
   Scoped to the home sections; other pages keep the
   existing `.section-title` behaviour.
   ===================================================== */
.page-home .section-programs .section-title,
.page-home .section-services .section-title,
.page-home .section-approach .section-title { font-size: 22px; }

@media (min-width: 768px) {
  .eyebrow { font-size: 9.5px; letter-spacing: 0.28em; }

  .page-home .section-problems .section-title,
  .page-home .section-rules .section-title { font-size: 28px; }
  .page-home .section-programs .section-title,
  .page-home .section-services .section-title,
  .page-home .section-approach .section-title { font-size: 26px; }
}

@media (min-width: 1024px) {
  .eyebrow { font-size: 10px; letter-spacing: 0.30em; }

  .page-home .section-problems .section-title,
  .page-home .section-rules .section-title { font-size: 32px; }
  .page-home .section-programs .section-title { font-size: 30px; }
  .page-home .section-services .section-title,
  .page-home .section-approach .section-title { font-size: 28px; }
}

@media (min-width: 1440px) {
  .eyebrow { font-size: 11px; letter-spacing: 0.32em; }

  .page-home .section-problems .section-title,
  .page-home .section-rules .section-title { font-size: 38px; }
  .page-home .section-programs .section-title,
  .page-home .section-services .section-title,
  .page-home .section-approach .section-title { font-size: 34px; }
}


/* =====================================================
   ROUND 3 — inner-page heading tiers
   The round-2 rule `@media (min-width:1024px) .section-title
   { 38px }` gave every inner page one flat desktop size. The
   round-3 frames give each section its own, measured here from
   "Sterling Solutions Website.dc.html" (About, Programs &
   Services, Financial Health Check, Team) and from
   "Sterling R3 - Detail Page EN.dc.html" (the nine detail
   pages, which share these section classes).

   Home is untouched: its rules are scoped `.page-home` and
   outrank everything below, and it keeps the four-step ramp
   the responsive proofs measured.

   NOTE: the proofs only cover the home sections, so the
   1024 / 768 / 375 steps for these inner sections are not
   specified anywhere. They are set flat from 1024 up at the
   frames' 1440 value — correct at the design width and never
   inverted, but not a ramp. Ask design for the steps.
   ===================================================== */
@media (min-width: 1024px) {
  .page-title { font-size: 52px; }

  /* CTA is 30 on every inner page and 32 on home. */
  .cta-title { font-size: 30px; }
  .page-home .cta-title { font-size: 32px; }

  /* Programs & Services page, and the Team page's two bands. */
  .section-programs .section-title,
  .section-services .section-title,
  .section-consultants .section-title,
  .section-bench .section-title { font-size: 34px; }

  /* Health Check. */
  .section-domains .section-title { font-size: 36px; }

  /* Shared by the Health Check page and the nine detail pages. */
  .offerings .section-title,
  .section-approach .section-title { font-size: 30px; }

  /* Quietest tier. `.section-related` must stay after
     `.section-programs`: the related band carries both classes
     and the two selectors have equal specificity. */
  .section-sectors .section-title,
  .section-related .section-title { font-size: 26px; }
}

/* =====================================================
   HEALTH CHECK METHOD (programs/health-check-method.html)
   Values at 1440 are taken from "EN 04A The Health Check
   Method" in the final frames. The design supplies that
   width only — this page post-dates the 1024/768/375
   proofs — so the narrow steps below are built to the
   site's existing rhythm and want a design read.
   ===================================================== */
.section-idea,
.section-asks,
.section-report { background: var(--bg-white); padding-block: 64px; }
.section-figure { background: var(--navy); padding-block: 64px; }
.section-remedy { background: var(--bg-light); padding-block: 64px; }

/* --- the idea: three steps --- */
.idea-grid,
.asks-grid,
.report-bars { list-style: none; margin: 0; padding: 0; }
.idea-grid { display: grid; gap: 40px; }
.idea-title { font-weight: 600; font-size: 13.5px; line-height: 1.5; color: var(--navy); margin: 14px 0 12px; }
.idea-copy  { font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--body-grey); margin: 0; }

/* --- the figure --- */
.figure-copy { font-weight: 300; font-size: 12.5px; line-height: 1.85; color: #9BA5B2; margin: 0; max-width: 620px; }
.figure-wrap { max-width: 1200px; margin-inline: auto; margin-block-start: 40px; }
.method-figure { width: 100%; height: auto; display: block; }
/* The figure is drawn on a 1080x880 canvas with 14-16px labels. Scaled to a
   375px column those labels land at ~4px, so below the desktop breakpoint the
   diagram holds a legible width and the wrapper pans instead. The frames
   specify 1440 only; this is the narrow behaviour, and it wants a design read. */
@media (max-width: 1023px) {
  .figure-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .method-figure { min-inline-size: 860px; }
}
/* Cairo sits ~4px lower than Montserrat at this size; the Arabic frame
   moves the pin labels up by that much rather than restyling them. */
[dir="rtl"] .figure-label { transform: translateY(-4px); }

/* --- what each one asks --- */
.asks-grid { display: grid; gap: 30px; }
.ask-item { border-block-start: 1px solid var(--border-light); padding-block-start: 26px; }
.ask-item .card-num { font-size: 15px; color: var(--gold); margin-inline-end: 12px; }
.ask-name { display: inline; font-weight: 600; font-size: 14px; color: var(--navy); }
.ask-question { font-weight: 400; font-size: 13.5px; line-height: 1.7; color: var(--navy); margin: 14px 0 10px; }
.ask-copy { font-weight: 300; font-size: 12.5px; line-height: 1.8; color: var(--body-grey); margin: 0 0 12px; }
.ask-organ { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

/* --- from reading to remedy --- */
.remedy-table { width: 100%; max-width: 1200px; margin-inline: auto; border-collapse: collapse; text-align: start; }
.remedy-table th, .remedy-table td { text-align: start; vertical-align: baseline; }
.remedy-table thead th {
  font-weight: 400; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--body-grey-2); padding-block-end: 12px;
}
.remedy-row > * { border-block-start: 1px solid #D9D7D0; padding-block: 18px; }
.remedy-row .card-num { font-size: 13px; color: var(--gold); margin-inline-end: 10px; }
.remedy-name { font-weight: 600; font-size: 12.5px; color: var(--navy); }
.remedy-sees { font-weight: 300; font-size: 12.5px; line-height: 1.7; color: var(--body-grey); padding-inline: 24px; }
/* NOT display:flex — that takes the cell out of the table layout, so its
   collapsed top border lands ~5px below the other two and the rule across
   the row visibly steps down in the last column. The cell stays a
   table-cell and the links stack as blocks instead. */
.remedy-goes .link-more { display: block; }
.remedy-goes .link-more + .link-more { margin-block-start: 7px; }

/* --- the report --- */
.report-copy { font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--body-grey); margin: 0 0 18px; max-width: 640px; }
.report-disclaimer {
  display: inline-block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8A6F3E; background: #F2E9DC; padding: 7px 14px; margin: 0;
}
.report-grid { display: grid; gap: 28px; max-width: 1200px; margin-inline: auto; margin-block-start: 40px; }
.report-panel { border: 1px solid var(--border-light); padding: 28px; margin: 0; }
.report-panel-label { font-weight: 600; font-size: 13.5px; line-height: 1.5; color: var(--navy); margin: 0 0 26px; }
.report-gauge { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.report-score { font-size: 34px; color: var(--navy); text-align: center; margin: 10px 0 8px; }
.report-score-copy { font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--body-grey); text-align: center; margin-inline: auto; max-width: 300px; }
.report-bar { display: grid; grid-template-columns: 1fr 46px; gap: 8px 16px; align-items: center; margin-block-end: 12px; }
.report-bar-name { font-weight: 300; font-size: 12.5px; color: var(--body-grey); }
.report-bar-track { grid-column: 1 / -1; display: block; block-size: 8px; background: #EDEBE4; border-radius: 5px; overflow: hidden; }
.report-bar-fill { display: block; block-size: 100%; background: var(--gold); border-radius: 5px; }
.report-bar-value { font-size: 11px; letter-spacing: 0.04em; font-weight: 600; color: var(--navy); text-align: end; }

@media (min-width: 768px) {
  .section-idea, .section-asks, .section-report,
  .section-figure, .section-remedy { padding-block: 80px; }
  .idea-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .asks-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 44px; }
  .report-bar { grid-template-columns: 200px 1fr 46px; gap: 16px; }
  .report-bar-track { grid-column: auto; }
}

@media (min-width: 1024px) {
  .section-idea, .section-asks, .section-report,
  .section-figure, .section-remedy { padding-block: 92px; }
  .idea-grid { gap: 56px; max-width: 1080px; margin-inline: auto; }
  .asks-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 56px; max-width: 1200px; margin-inline: auto; }
  .remedy-table { table-layout: fixed; }
  .remedy-table th:first-child { width: 220px; }
  .remedy-table th:last-child   { width: 320px; }
  .report-grid { grid-template-columns: 0.8fr 1.2fr; }
  .report-panel { padding: 36px; }
}

/* The Health Check rail's fifth item leaves the page for the method
   write-up, so it is drawn in gold rather than as an in-page anchor. */
.rail-links .rail-link-out { color: var(--gold); }

/* Six nav items need more room than five. The 1440 frame's 30px gutters
   still fit there (300px of slack in English), but between the desktop
   breakpoint and 1200 they push the bar past the viewport, so the gutters
   close up over that band only. */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* The 2x lockup leaves no room for six inline nav items here: the bar
     wanted 1178px inside 1009px. Rather than shrink the logo back down,
     this band keeps the drawer that everything below 1024 already uses,
     so the header is just the lockup and the toggle. The inline nav
     returns at 1440, the first width where the lockup (474px) and the
     six items (800px) both fit the 1280px content column. */
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--navy);
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
  }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links   { flex-direction: column; gap: 28px; }
  .nav-link    { font-size: 13px; }
  .lang-toggle { padding-inline-start: 14px; }
  .nav-cta     { padding: 11px 14px; }

  /* Tightening the gutters was not enough: with the enlarged logo the bar
     still needed 1022px inside 1009px at 1024, which clipped `Get in Touch`
     off the right edge and wrapped the tagline onto a second line. The
     frames only specify the large lockup at 1440, so this band keeps the
     previous smaller one and the header fits again. */
  .site-header .brand-mark { width: 36px; height: 40px; }
  .site-header .brand-name { font-size: 19px; }
  .brand-tagline           { font-size: 5.5px; letter-spacing: 0.2em; }
}

/* The tagline is one line at every width; wrapping it doubles the height of
   the brand block and drags the whole header down with it. */
.brand-tagline { white-space: nowrap; }


/* =====================================================
   LOGO AT 2x  —  requested, and a deliberate departure
   from the round-3 frames, which set the header lockup
   at 48x53 / 24px / 7.5px at 1440.
   Every size below is exactly double the value it
   replaces, at each breakpoint, so the lockup's internal
   proportions are unchanged.
   ===================================================== */
/* The mark must never be the thing that gives: `.brand` is a flex row and at
   2x the tagline is wide enough that the SVG was being shrunk to 0px wide
   while keeping its height. */
.brand-mark { flex-shrink: 0; }

.site-header .brand-mark    { width: 68px; height: 76px; }
.site-header .brand-name    { font-size: 32px; }
.site-header .brand-tagline { font-size: 12px; letter-spacing: 0.28em; }

/* Below 768 a literal 2x does not fit: the lockup came to 392px against a
   375px screen, the tagline alone needing 314px. This is the largest step
   that clears a 375 viewport - about 1.6x rather than 2x - with the
   proportions between mark, wordmark and tagline kept. */
@media (max-width: 767px) {
  .site-header .brand-mark    { width: 56px; height: 62px; }
  .site-header .brand-name    { font-size: 26px; }
  .site-header .brand-tagline { font-size: 9.5px; letter-spacing: 0.2em; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .site-header .brand-mark    { width: 72px; height: 80px; }
  .site-header .brand-name    { font-size: 38px; }
  .site-header .brand-tagline { font-size: 11px; letter-spacing: 0.2em; }
}

@media (min-width: 1440px) {
  .site-header .brand-mark    { width: 96px; height: 106px; }
  .site-header .brand-name    { font-size: 48px; }
  .site-header .brand-tagline { font-size: 15px; letter-spacing: 0.22em; }

  /* The 2x lockup is 474px wide, which overran the bar by 24px at 1440
     against the frames' 30px gutters. These close to 22px to pay for it. */
  .primary-nav { gap: 22px; }
  .nav-links   { gap: 22px; }
  .lang-toggle { padding-inline-start: 16px; }
}

/* =====================================================
   HOME HERO AT HALF  —  also requested, also a departure:
   the frames set 84px EN / 72px AR at 1440, and the
   handback's problem 6 was specifically about sizing this
   two-word headline up. Halved at every step, home only.
   ===================================================== */
.page-home .hero-title { font-size: 20px; }

@media (min-width: 768px) {
  .page-home .hero-title { font-size: 28px; }
}
@media (min-width: 1024px) {
  .page-home .hero-title { font-size: 32px; }
}
@media (min-width: 1440px) {
  .page-home .hero-title { font-size: 42px; line-height: 1.04; letter-spacing: 0.005em; }
}