/* --------------------------------------------------------------------------
   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 --forest,
   which appears only in the logo sheet and is the one value estimated here.
   ========================================================================== */

: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;   /* Gr.owth — confirmed */
  --forest: #12291f;   /* Hr.esources — ESTIMATED, replace when confirmed */
  --moss:   #a8c1ab;
  --sand:   #e0ddd5;   /* confirmed */
  --sage:   #dfe4e0;
  --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="sage"] {
  --logo-mark: #0062fb; --logo-type: #0b184f;
  --bg: var(--sage); --ink: var(--navy); --soft: #566073;
  --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);
}
[data-ground="forest"] {
  --logo-mark: var(--sage); --logo-type: var(--sage);
  --bg: var(--forest); --ink: var(--sage); --soft: var(--moss);
  --rule: rgba(223,228,224,.22); --accent: var(--sage); --on-accent: var(--forest);
}

/* 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="forest"]::after,
.chapter[data-ground="blue"]::after,
.band[data-ground="forest"]::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; }

/* ==========================================================================
   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; }
.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;
  color: var(--accent);
}
.hero__o .lg-mark { fill: currentColor; }
.hero--mark-white .hero__o { color: #fff; opacity: 1; }
[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); align-items: end;
}
@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); }

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