/* --------------------------------------------------------------------------
   1. FONTS
   --------------------------------------------------------------------------
   Safiro              - Latin  (roman + italic at 400 / 500 / 600 / 700)
   ABC Favorit Arabic  - Arabic (300 / 350 Book / 400 / 500 / 700)

   Converted from the supplied .otf to .woff2 - roughly half the bytes over
   the wire. 440K total for 13 files. Source .otf files stay in the brand
   folder; only the .woff2 files ship.

   Favorit ships Book and Regular both tagged weight 400 by the foundry.
   Book is the lighter of the two, so it is mapped to 350 here and Regular
   keeps 400. Nothing that asks for 400 changes.
   -------------------------------------------------------------------------- */

@font-face { font-family:"Safiro"; src:url("../fonts/safiro-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-400-italic.woff2") format("woff2");
             font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-500-italic.woff2") format("woff2");
             font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-600.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-600-italic.woff2") format("woff2");
             font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-700.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("../fonts/safiro-700-italic.woff2") format("woff2");
             font-weight:700; font-style:italic; font-display:swap; }

@font-face { font-family:"ABC Favorit Arabic"; src:url("../fonts/abc-favorit-arabic-300.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Favorit Arabic"; src:url("../fonts/abc-favorit-arabic-350.woff2") format("woff2");
             font-weight:350; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Favorit Arabic"; src:url("../fonts/abc-favorit-arabic-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Favorit Arabic"; src:url("../fonts/abc-favorit-arabic-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Favorit Arabic"; src:url("../fonts/abc-favorit-arabic-700.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }

/* ==========================================================================
   2. GROUNDS
   --------------------------------------------------------------------------
   The company profile is a colour-blocked document: every spread owns a
   ground, and the ground tells you where you are. The site does the same.
   A chapter declares data-ground and every colour inside it follows.

   Hex values are read directly out of the profile PDF, except --green,
   which was confirmed from the brand artwork. There is one green, not three:
   the pale sage / dark forest / moss set used earlier were estimates and have
   been removed now that the official value is known.
   ========================================================================== */

:root {
  --font-sans:  "Safiro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ar:    "ABC Favorit Arabic", ui-sans-serif, system-ui, "Noto Sans Arabic", "Geeza Pro", sans-serif;
  /* The serif italic accent face from the profile is not in the supplied
     font folders. Safiro's own italic stands in until it arrives. */
  --font-serif: "Safiro", ui-serif, Georgia, serif;

  --navy:   #0a174f;
  --blue:   #0164ff;
  --sky:    #ced6dd;   /* confirmed */

  --sand:   #e0ddd5;   /* confirmed */
  --green:  #dbe1dd;   /* the official brand green — People and Careers */
  --steel:  #c5cdd5;
  --ember:  #ce531b;
  --paper:  #ffffff;

  --measure: 64ch;
  --pad: clamp(22px, 5.5vw, 92px);
  --maxw: 1280px;
}

[data-ground="navy"] {
  --bg: var(--navy); --ink: #fff; --soft: var(--sky);
  --logo-mark: #0062fb; --logo-type: #fff;
  --rule: rgba(255,255,255,.2); --accent: var(--blue); --on-accent: #fff;
}
[data-ground="paper"] {
  --logo-mark: #0062fb; --logo-type: #0b184f;
  --bg: var(--paper); --ink: var(--navy); --soft: #5a6486;
  --rule: rgba(10,23,79,.15); --accent: var(--blue); --on-accent: #fff;
}
[data-ground="sand"] {
  --logo-mark: #0062fb; --logo-type: #0b184f;
  --bg: var(--sand); --ink: var(--navy); --soft: #4b5069;
  --rule: rgba(10,23,79,.18); --accent: var(--blue); --on-accent: #fff;
}
[data-ground="steel"] {
  --logo-mark: #0062fb; --logo-type: #0b184f;
  --bg: var(--steel); --ink: var(--navy); --soft: #4e5872;
  --rule: rgba(10,23,79,.22); --accent: var(--blue); --on-accent: #fff;
}
[data-ground="sky"] {
  --logo-mark: #0062fb; --logo-type: #0b184f;
  --bg: var(--sky); --ink: var(--navy); --soft: #3d4763;
  --rule: rgba(10,23,79,.25); --accent: var(--navy); --on-accent: var(--sky);
}
[data-ground="blue"] {
  --logo-mark: #0b184f; --logo-type: #0b184f;
  --bg: var(--blue); --ink: #fff; --soft: #f4f8ff;
  --rule: rgba(255,255,255,.4); --accent: #fff; --on-accent: var(--blue);
}
/* The brand green. A light ground, so it takes navy ink the way sky and
   sand do. Used by People and by Careers. */
[data-ground="green"] {
  --logo-mark: #0062fb; --logo-type: #0b184f;
  --bg: var(--green); --ink: var(--navy); --soft: #404b45;
  --rule: rgba(10,23,79,.22); --accent: var(--navy); --on-accent: var(--green);
}

/* Surface. The deep grounds carry a fine grain so they read as a printed
   field rather than a flat web fill. Pure CSS — no image request. */
.chapter[data-ground="navy"]::after,
.chapter[data-ground="blue"]::after,
.band[data-ground="navy"]::after,
.card[data-ground="navy"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band { position: relative; }
.band__in { position: relative; z-index: 1; }
.card { position: relative; }
.card > * { position: relative; z-index: 1; }

/* ==========================================================================
   3. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[dir="rtl"] { font-family: var(--font-ar); line-height: 1.75; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.3; }
p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* Skip link. Must not use left:-9999px — in RTL that overflows the end of
   the document and adds ~10,000px of horizontal scroll to every Arabic
   page. This hides it properly and shows it when it receives focus. */
.skip {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; inset-block-start: 14px; inset-inline-start: 14px;
  width: auto; height: auto; clip-path: none; z-index: 99;
  background: var(--blue); color: #fff; text-decoration: none;
  padding: 11px 20px; border-radius: 999px; font-size: 15px;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Type scale — modular, ratio ~1.28 */
.t-display { font-size: clamp(40px, 6.2vw, 86px); letter-spacing: -0.042em; }
.t-chapter { font-size: clamp(32px, 4.6vw, 64px); }
.t-h2      { font-size: clamp(25px, 2.9vw, 38px); }
.t-h3      { font-size: clamp(20px, 1.6vw, 23px); letter-spacing: -0.02em; }
.t-lede    { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--soft); max-width: 54ch; }
.t-lede--ink { color: var(--ink); }
.t-small   { font-size: 14.5px; color: var(--soft); }
[dir="rtl"] .t-display { font-size: clamp(33px, 5vw, 68px); }

.it { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
[dir="rtl"] .it { font-family: var(--font-ar); font-style: normal; font-weight: 500; }

/* ==========================================================================
   4. CHAPTERS
   ========================================================================== */

.chapter {
  background: var(--bg);
  color: var(--ink);
  padding-block: clamp(92px, 12vw, 212px);
  position: relative;
}
.chapter__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  position: relative; z-index: 1;
}

/* The slash is the brand's own section marker — /01, /Our Method in the
   profile. It is the only ornament used anywhere on the site. */
.slash { color: var(--accent); font-weight: 500; }

.chapter__head { margin-bottom: clamp(44px, 5.5vw, 92px); position: relative; }
/* That margin exists to separate the head from the body below it. Where the
   head IS the whole chapter it has nothing to separate from, and the chapter
   ends up with ~92px more air under the text than over it. */
.chapter__head:last-child { margin-bottom: 0; }
.chapter__head .t-lede { margin-top: 18px; }

.meta { font-size: 13px; color: var(--soft); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ==========================================================================
   5. MASTHEAD — sits inside the first chapter, inherits its ground
   ========================================================================== */

.mast { padding-block: 26px 0; position: relative; z-index: 3; width: 100%; }
.mast__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; gap: 28px;
}
.wordmark { display: inline-flex; margin-inline-end: auto; text-decoration: none; }
.wordmark .lg { height: 27px; width: auto; display: block; }
.lg-mark { fill: var(--logo-mark, #0062fb); }
.lg-type { fill: var(--logo-type, #0b184f); }
@media (max-width: 520px) { .wordmark .lg { height: 23px; } }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  text-decoration: none; font-size: 15.5px; color: var(--soft);
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: currentColor; }

.mast__tools { display: flex; align-items: center; gap: 10px; }
.lang {
  font-size: 14px; text-decoration: none; color: var(--soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 5px 13px;
  transition: color .18s ease, border-color .18s ease;
}
.lang:hover { color: var(--ink); border-color: currentColor; }
.burger { display: none; background: none; border: 0; padding: 6px; color: inherit; cursor: pointer; }
.burger svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    display: none; width: 100%; order: 3;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 18px; border-top: 1px solid var(--rule);
  }
  .nav.open { display: flex; }
  .nav a { padding-block: 15px; border-bottom: 1px solid var(--rule); font-size: 18px; }
  .mast__in { flex-wrap: wrap; }
}

/* ==========================================================================
   6. HERO — the one bold move: the mark, oversized and cropped
   ========================================================================== */

.hero {
  padding-block: 0 clamp(60px, 7.5vw, 116px);
  overflow: hidden;
  min-height: min(92vh, 880px);
  display: flex; flex-direction: column;
}
.hero__in {
  position: relative; z-index: 2; width: 100%;
  margin-block-start: auto; padding-block-start: clamp(56px, 8vw, 112px);
}
.hero h1 { max-width: 17ch; }

.hero__grid { max-width: 62ch; }
.hero__side {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 26px; margin-block-start: clamp(34px, 4.5vw, 56px);
}
.hero .t-lede { margin-top: clamp(26px, 3vw, 40px); max-width: 46ch; }
.hero__foot {
  margin-top: clamp(36px, 4vw, 56px); display: flex; flex-wrap: wrap;
  align-items: center; gap: 18px 30px;
}

.hero__o {
  position: absolute; z-index: 1; pointer-events: none;
  inset-block-start: 50%; inset-inline-end: -16%; transform: translateY(-50%);
  width: min(40vw, 500px); aspect-ratio: 1;
  /* The hero mark never inherits --accent - that is what kept turning it
     bright blue. White by default; see the rule below for the two grounds
     that need the brand light blue instead. */
  color: #fff;
}
/* Light blue on the dark navy ground, and on white too - a white mark on a
   white ground would be invisible. White everywhere else. */
.hero[data-ground="navy"] .hero__o,
.hero[data-ground="paper"] .hero__o { color: var(--sky); }
.hero__o .lg-mark { fill: currentColor; }
/* Masthead logo in solid white - Strategy, About and Careers heroes. */
.hero--logo-white .mast { --logo-mark: #fff; --logo-type: #fff; }
[dir="rtl"] .hero__o { transform: translateY(-50%) scaleX(-1); }

/* Below the two-column threshold the mark drops further out of the way
   and quietens down so it never fights the headline. */
@media (max-width: 900px) {
  .hero__o {
    inset-block-start: auto; inset-block-end: -26%; inset-inline-end: -38%;
    transform: none; width: 84vw; opacity: .26;
  }
  [dir="rtl"] .hero__o { transform: scaleX(-1); }
}

/* One orchestrated entrance, on load only. Nothing else on the site moves
   unless a person acts. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .t-lede, .hero__foot {
    animation: rise .9s cubic-bezier(.2,.7,.25,1) backwards;
  }
  .hero .t-lede { animation-delay: .09s; }
  .hero__foot   { animation-delay: .17s; }
  .hero__o {
    animation: swell 1.3s cubic-bezier(.2,.7,.25,1) backwards;
  }
  @keyframes rise  { from { opacity: 0; transform: translateY(18px); } }
  @keyframes swell { from { opacity: 0; } }
}

/* ==========================================================================
   7. SERVICE BANDS — full-bleed, each in its own colour. Not cards.
   ========================================================================== */

.band {
  display: block; text-decoration: none;
  background: var(--bg); color: var(--ink);
}
.band__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  padding-block: clamp(64px, 8vw, 118px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  /* Centred, not bottom-aligned: the name is one line and the column
     beside it is four, so aligning ends pushed the name low in the band. */
  align-items: center;
}
@media (max-width: 860px) { .band__in { grid-template-columns: 1fr; align-items: start; gap: 24px; } }

.band__name { font-size: clamp(40px, 6.6vw, 92px); letter-spacing: -0.045em; }
[dir="rtl"] .band__name { font-size: clamp(34px, 5vw, 68px); letter-spacing: 0; }
.band__line { font-size: clamp(17px, 1.5vw, 20px); color: var(--soft); max-width: 40ch; margin-bottom: 20px; }
.band__go {
  display: inline-block; font-size: 15.5px; color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: 3px;
  transition: border-color .18s ease;
}
.band:hover .band__go { border-bottom-color: currentColor; }
.band__list { display: flex; flex-wrap: wrap; gap: 7px 10px; margin-top: 22px; }
.band__list li { font-size: 14.5px; color: var(--soft); }
.band__list li + li::before { content: "/"; margin-inline-end: 10px; opacity: .5; }

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

/* ==========================================================================
   7b. OTHER SERVICES — the quiet index at the foot of a service page.
   Repeating the three other services as full colour bands there costs three
   more screens and says nothing the reader cannot get from one line each.
   The colour chapters stay legible through the chip, not the whole field.
   ========================================================================== */

/* ----- PAGER (OPTION 1) ---------------------------------------------------
   The foot of a service page. Two halves, each in the ground colour of the
   service it points to, so the colour chapters still read without spending
   a screen on each. Order follows the profile and wraps, so every service
   has both a previous and a next. All four stay listed in the footer. */

.pager {
  background: var(--bg); color: var(--ink);
  border-block-start: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr;
}
.pager__half {
  text-decoration: none; color: inherit;
  display: grid; align-content: center; gap: 13px;
  padding: clamp(48px, 5.5vw, 86px) clamp(22px, 4vw, 64px);
  min-height: clamp(210px, 23vw, 290px);
}
/* The one hairline between the two halves. border-inline-start resolves to
   the correct edge in both directions: in LTR "next" is on the right and the
   rule sits on its left; in RTL "next" is on the left and it sits on its
   right. Either way the rule lands between them. */
.pager__half--next { border-inline-start: 1px solid var(--rule); text-align: end; justify-items: end; }
.pager__meta {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--soft); transition: color .18s ease;
}
.pager__half:hover .pager__meta { color: var(--ink); }
.pager__arw { width: 28px; height: 10px; flex: none; }
.pager__half--prev .pager__arw { transform: scaleX(-1); }
[dir="rtl"] .pager__arw { transform: scaleX(-1); }
[dir="rtl"] .pager__half--prev .pager__arw { transform: none; }
.pager__name { font-size: clamp(30px, 4vw, 56px); letter-spacing: -0.04em; margin: 0; }
[dir="rtl"] .pager__name { font-size: clamp(26px, 3.3vw, 46px); letter-spacing: 0; }
.pager__line { color: var(--soft); margin: 0; font-size: 16.5px; max-width: 34ch; }

@media (max-width: 760px) {
  .pager { grid-template-columns: 1fr; }
  .pager__half--next {
    border-inline-start: 0; border-block-start: 1px solid var(--rule);
    text-align: start; justify-items: start;
  }
  .pager__half { min-height: 0; }
}

/* ----- CARDS (OPTION 2) ------------------------------------------------
   The other three as colour cards. Each card is its service's field in
   miniature; the gutters are what keep two solid colours from colliding. */

.chapter--index.chapter--cards { border-block-start: 1px solid var(--rule); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 18px); }
.card {
  background: var(--bg); color: var(--ink); text-decoration: none;
  /* A card in the same colour as the band it sits on would vanish. The
     hairline keeps the pale services (sky, sand) reading as cards. */
  box-shadow: inset 0 0 0 1px var(--rule);
  display: grid; align-content: space-between; gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(26px, 2.5vw, 38px);
  min-height: clamp(210px, 19vw, 268px);
}
.card__name { font-size: clamp(23px, 2.3vw, 33px); letter-spacing: -0.032em; margin: 0 0 10px; }
[dir="rtl"] .card__name { letter-spacing: 0; }
.card__line { color: var(--soft); margin: 0; font-size: 15.5px; }
.card__go {
  justify-self: start; font-size: 15px; color: var(--ink);
  border-block-end: 1px solid var(--rule); padding-block-end: 3px;
  transition: border-color .18s ease;
}
.card:hover .card__go { border-block-end-color: currentColor; }

@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }

/* ----- INDEX (OPTION 3) ------------------------------------------------
   The quieter rule-separated list. Swap back by calling more() instead of
   pager() in page_service(). Kept because this element is still settling. */

/* A chapter's full 212px of air is for a chapter. This is a footer index:
   it gets a label, not a 64px heading, and about a third of the padding. */
.chapter--index { padding-block: clamp(52px, 6vw, 92px); }
.chapter--index .chapter__head { margin-bottom: clamp(18px, 2vw, 26px); }
.more__label {
  font-size: 14.5px; color: var(--soft); font-weight: 400;
  letter-spacing: 0.01em; margin: 0;
}

.more { border-block-start: 1px solid var(--rule); }
.more__row {
  display: grid; align-items: baseline;
  text-decoration: none; color: inherit;
  grid-template-columns: 12px minmax(0, 210px) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.4vw, 40px);
  padding-block: clamp(24px, 2.8vw, 38px);
  border-block-end: 1px solid var(--rule);
}
.more__chip {
  align-self: center; width: 12px; height: 12px; border-radius: 50%;
  background: var(--chip); box-shadow: inset 0 0 0 1px var(--rule);
}
.more__name { font-size: clamp(21px, 2vw, 29px); letter-spacing: -0.025em; margin: 0; }
[dir="rtl"] .more__name { letter-spacing: 0; }
.more__line { color: var(--soft); margin: 0; font-size: 16.5px; }
.more__go {
  font-size: 15.5px; white-space: nowrap;
  border-block-end: 1px solid var(--rule); padding-block-end: 3px;
  transition: border-color .18s ease;
}
.more__row:hover .more__go { border-block-end-color: currentColor; }

@media (max-width: 800px) {
  .more__row { grid-template-columns: 12px minmax(0, 1fr) auto; row-gap: 10px; }
  .more__line { grid-column: 2 / -1; }
}

/* ==========================================================================
   8. PILLARS / TAGS / SEQUENCE / FIGURES
   ========================================================================== */

.pillar { border-top: 1px solid var(--rule); padding-block: clamp(30px, 3.6vw, 52px); }
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.pillar__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); }
@media (max-width: 800px) { .pillar__grid { grid-template-columns: 1fr; gap: 16px; } }
.pillar p { color: var(--soft); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag {
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 15px; font-size: 14.5px; line-height: 1.3;
}

/* Numbered only because Audit → Strategy → Management is a real sequence,
   in the profile's own /01 form. */
.seq { border-top: 1px solid var(--rule); }
.step {
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(26px, 3vw, 42px);
  display: grid; grid-template-columns: 76px minmax(0, 230px) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 44px); align-items: start;
}
@media (max-width: 800px) { .step { grid-template-columns: 56px 1fr; } .step p { grid-column: 2; } }
.step__n { font-size: 19px; color: var(--soft); letter-spacing: -0.02em; }
.step p { color: var(--soft); font-size: 16px; }

.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 640px) { .figures { grid-template-columns: 1fr; } }
.figure__n { font-size: clamp(64px, 11vw, 148px); line-height: .9; letter-spacing: -0.055em; }
.figure__l { margin-top: 16px; color: var(--soft); max-width: 22ch; }

/* ==========================================================================
   9. BUTTONS & LINKS
   ========================================================================== */

.btn {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 13px 28px; font-size: 16px; font-weight: 500;
  transition: opacity .18s ease;
}
.btn:hover { opacity: .85; }
.btn--ghost { background: none; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: currentColor; opacity: 1; }

.link { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.link:hover { border-bottom-color: currentColor; }

/* ==========================================================================
   10. FORMS
   ========================================================================== */

.form { display: grid; gap: 20px; max-width: 620px; margin-top: 30px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 14.5px; color: var(--soft); }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; padding: 11px 2px; width: 100%;
}
select { appearance: none; }
option { color: #0a174f; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.form .btn { justify-self: start; margin-top: 8px; }

.choice { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.choice legend { font-size: 14.5px; color: var(--soft); padding: 0; }
/* Two equal columns so the pair always reads as one either/or choice,
   in both languages. The Arabic label is long enough to wrap inside its
   pill rather than push the pair onto separate lines. */
.choice__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; max-width: 460px;
}
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio { display: block; }
.radio span {
  display: block; text-align: center;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 10px 16px; font-size: 15px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.radio span:hover { border-color: currentColor; }
.radio input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.trap {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.aside {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 18px; font-size: 14.5px; color: var(--soft);
  max-width: 56ch;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.foot { --logo-mark: #0062fb; --logo-type: #fff;
       background: var(--navy); color: #fff; padding-block: clamp(64px, 7vw, 104px) 40px; }
.foot__in { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.foot__grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; gap: 32px; } }
.foot h4 { font-size: 15px; font-weight: 500; color: var(--sky); margin-bottom: 16px; letter-spacing: -0.01em; }
.foot li { margin-bottom: 11px; }
.foot a { text-decoration: none; font-size: 16px; }
.foot a:hover { color: var(--sky); }
.foot__base {
  margin-top: clamp(48px, 6vw, 84px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  font-size: 14px; color: var(--sky);
}