/* ==========================================================================
   TARAQI — about.html (step 5A). Three page-specific pieces: the quiet page
   head, the four working stages on the Rise Rail, and the single-project
   case. Since step 5B the .about-grid rhythm and the page head are shared
   with project-b162.html — this file loads on both pages. The section label, sand
   veil, contact band and button come from sections.css (shared). Cream dominant; every color is a token; logical
   properties only, so the rail sits on the correct edge in RTL for free.
   The CSS state is the finished page — the rail renders full; js/about.js
   sets its empty state only when it will scrub it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Cover hero — the daylight B162 still (slot 9), full viewport, with the
   page head over it. It replaces the contained .media-cover-page figure +
   .about-head pair this page opened on. project-b162.html took the same
   conversion at step 18 (css/project.css §0) and the MECHANICS here are that
   hero's, unchanged — the height model, the three layers, cream as the
   legibility layer. The NUMBERS are re-derived: different copy, different
   photograph, so the mask stops and the two opacities were measured on this
   page rather than pasted from that one. Three of the four differ.

     height   margin-block-start: var(--nav-h) + min-block-size 100dvh minus
              the bar, with a 100vh line first as the fallback for engines
              without dvh. The nav is position:fixed and transparent at the
              top of the page, so the margin is what keeps the picture out
              from under it. 100vh is the LARGE viewport, so on a phone it is
              taller than what is actually visible and the bottom of the hero
              would sit under the browser chrome until the URL bar collapses;
              dvh tracks the visible viewport, so the hero is exactly one
              screen at both chrome states.

     overlay  the picture, a flat cream veil, then a masked cream wash that
              holds full strength across the copy column and opens toward the
              far edge (below md it turns 90deg and opens above and below the
              copy band). NOT a dark or burgundy gradient: this site's
              legibility layer is cream, which is what keeps brand rule 1
              true over a photograph and why the type here stays burgundy and
              ink instead of reversing out.

     copy     vertically centred, inline-start aligned, inside .max-w-shell.

   ---- what the measurement changed, and what it did not ----

   MASK, inline axis (desktop). Derived the way css/home.css and
   css/project.css derive theirs: measure the widest PAINTED line — 
   Range.getClientRects over the text contents, not the block's layout box —
   and hold the wash that far before letting it fall away. On this page that
   line is the intro paragraph, reaching 47.3% of the hero from the copy edge
   in English and 43.7% in Arabic. Hold 48%, then the same 20-point ramp:
   48% -> 68%. That lands on project-b162.html's stops, but by arriving at them,
   not by copying: this page's English intro is longer and its Arabic shorter,
   and the two effects very nearly cancel.

   MASK, block axis (below md). This one genuinely moved. The copy band runs
   26.4%-79.3% of the hero's height in English and 35.3%-70.4% in Arabic, so
   the hold is 25%-82% — wider than project-b162.html's 28%-78%, which this page
   would have overrun at the bottom. The English intro here is 224 characters
   against that page's short locative line, and at 375px it wraps to seven
   lines and pushes the band 1.3 points past where that hero stops holding.

   OPACITIES. flat 0.20 + wash 0.65, against project-b162.html's 0.30 + 0.60.
   Behind the copy the two are the same strength — 1-(1-f)(1-w) is 72% either
   way, and the worst case measures 5.37:1 in both — but at the OPEN edge,
   where the facade is and where there is no type at all, this hero is veiled
   20% instead of 30%. A third less cream over the subject of the photograph
   for no legibility cost at all. That is the whole of the lightening this
   page could honestly take, and it is the reason to prefer this pair.

   Why not lighter still: the daylight grade READS far brighter than
   project-b162.html's dusk frame, but it carries MORE true black, not less —
   4232 pixels at (0,0,0) against that frame's 2286, in the shadowed soffits
   and the railings — and black lands inside every one of the twelve text
   boxes. The worst case behind this type is therefore cream-over-black, and
   cream-over-black is fixed by the composite alone: 72% gives 5.37:1, 66%
   gives 4.53:1, and 65% gives 4.40:1 and fails. So the AA-feasible floor for
   the composite is about 66%, reachable only at flat 0.15 + wash 0.60, which
   clears the 4.5:1 floor by 0.03 — no margin for a re-crop, a re-grade or a
   copy edit. Anything below that fails outright, however bright the picture
   looks. The full frontier is `--sweep` in the tool below.

   Cross-checked 2026-09-09: the same sweep was run independently on the other
   two heroes. project-b162.html's dusk still took the identical 0.20 + 0.65 for the
   same reason (css/project.css §0); the home page's footage kept 0.30 + 0.60,
   because its loop has a night passage whose open edge would go too dark
   (css/home.css, "Hero footage"). All three share the 66% AA floor — every one
   bottoms out at cream-over-black behind the copy — but they do NOT share an
   open-edge answer, and the amount of black differs by three orders of
   magnitude: 66.4% of the video frame over its loop, 0.131% of this still,
   0.071% of project-b162.html's. Measure per surface; never carry a number across.

   Measured, not eyeballed, by tools/about-hero-veil-contrast.py — the third
   of the family, after the home page's footage and project-b162.html's still, and
   the same pessimistic method: the DARKEST composited pixel inside each
   element's own box, in both languages at 1440 and 375. These are floors:

     section label (burgundy-dark)   5.38:1
     title         (burgundy-dark)   5.37:1
     intro copy    (ink)             6.93:1

   against a 4.5:1 AA floor. Re-run that tool if either opacity, either mask,
   the object-position or a type colour below changes, and paste the new
   figures here.

   The cream ratio on THIS page drops below the usual ~60% for the first
   screen, exactly as it does on the home page (D4) and project-b162.html (D5).
   Logged as D6 in docs/BLUEPRINT.md for the same client sign-off. Cream
   returns as the field from the working stages down.
   -------------------------------------------------------------------------- */
.about-hero {
  background-color: var(--taraqi-cream);
  margin-block-start: var(--nav-h);
  min-block-size: calc(100vh - var(--nav-h));   /* fallback: no dvh support */
  min-block-size: calc(100dvh - var(--nav-h));  /* visible viewport, not the large one */
}

.about-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;               /* under .about-hero-content (z-index 1) */
  overflow: hidden;
}
/* <picture> is a plain inline box — the <img> inside it is what fills. */
.about-hero-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Centred, unlike project-b162.html's 55%: this frame is a level daylight
     elevation with the street in the lower third and no dusk sky to bias
     away from, and the crop at 50% keeps the parapet and the forecourt both
     inside the portrait box at 375. */
  object-position: 50% 50%;
}
/* Flat veil, then the directional wash — .hero-media's two pseudo-elements */
.about-hero-media::before,
.about-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the picture once js/motion.js scales it: a transformed element
     paints over positioned siblings that come before it, so without this
     the flat veil sat UNDER the ken-burns picture (fixed at step 5a). */
  z-index: 1;
  background-color: var(--taraqi-cream);
  pointer-events: none;
}
.about-hero-media::before { opacity: 0.20; }
.about-hero-media::after {
  opacity: 0.65;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 48%, transparent 68%);
          mask-image: linear-gradient(to right, #000 0%, #000 48%, transparent 68%);
}
[dir="rtl"] .about-hero-media::after {
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 48%, transparent 68%);
          mask-image: linear-gradient(to left, #000 0%, #000 48%, transparent 68%);
}
/* Below md the copy spans the full width, so there is no far edge to open up
   along the inline axis — the wash turns 90deg. Held 25%-82% (see above);
   it opens above and below, over the parapet and the forecourt.
   The [dir="rtl"] rule above is a class heavier than the bare selector and a
   media query adds no specificity of its own, so this has to repeat it — the
   same trap css/home.css documents, and the same fix. */
@media (max-width: 767px) {
  .about-hero-media::after,
  [dir="rtl"] .about-hero-media::after {
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.40) 0%, #000 25%, #000 82%, rgb(0 0 0 / 0.45) 100%);
            mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.40) 0%, #000 25%, #000 82%, rgb(0 0 0 / 0.45) 100%);
  }
}

.about-hero-content { position: relative; z-index: 1; }
/* The head's own top margin is what the .about-head padding used to supply;
   inside a centred flex hero the block is centred instead, so the h1 keeps
   only the gap to the label above it. */
.about-hero-content .about-title { margin-block-start: 1.5rem; }
.about-hero-content .about-intro { max-inline-size: 52ch; }
/* The section label drops from --taraqi-burgundy to --taraqi-burgundy-dark
   here, and only here — the same measured failure project-b162.html's hero
   produced, for the same reason. #9B4753 over this veiled still reads
   2.77:1 against the 4.5:1 floor, because the picture carries true black and
   cream at 72% over black is the darkest this backdrop ever gets. #5C2530
   over that same worst-case pixel is 5.38:1. Size, weight and letter-spacing
   still separate the label from the h1; everywhere else on cream,
   .section-label keeps its lighter burgundy. */
.about-hero-content .section-label { color: var(--taraqi-burgundy-dark); }

/* --------------------------------------------------------------------------
   0a. Editorial splits — text beside image, contained within the shell.
   Mobile: image stacks above text. Desktop (md+): two-column grid, 45/55
   text/image, matching the homepage about-teaser. The --flip modifier swaps
   the columns (image start, text end) for visual rhythm down the page.
   -------------------------------------------------------------------------- */
.about-split {
  background-color: var(--taraqi-cream);
  padding-block: clamp(3rem, 7vh, 4.5rem);
}
.about-split-grid {
  display: grid;
  gap: 2rem;
}
.about-split-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-split-body .section-label {
  margin-block-end: 1rem;
}
/* Phase 3c: the three split pictures are the homepage's framed figure
   (css/sections.css .about-teaser-figure / -outline / -media / -parallax —
   4:5 frame, burgundy hairline rectangle offset 14px down and toward the
   inline end, mirrored in Arabic by that sheet). Only two things are this
   page's: the <figure> element carries the frame, so its UA margins are
   reset here, and the frame is placed by .about-split-media as before.
   The .about-figure-frame rules below are the pre-3c frame; nothing on
   this page uses them now and they are kept for one review cycle. */
figure.about-split-figure {
  margin-block-start: 0;
  margin-inline-start: 0;
}
/* The hairline that opens each sand band (values, focus): the homepage's
   .values-rule, one token wide. Drawn by scaleX from the inline start
   (js/motion.js [data-motion-rule]); at rest it is whole, so reduced
   motion and no-GSAP render it drawn. */
.about-rule {
  display: block;
  inline-size: 100%;
  block-size: 1px;
  margin-block-end: clamp(2rem, 4.5vh, 3rem);
  background-color: var(--taraqi-burgundy);
  transform-origin: 0 50%;
}
html[dir="rtl"] .about-rule { transform-origin: 100% 50%; }

.about-figure-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
}
.about-figure-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.about-figure-frame--portrait {
  aspect-ratio: 4 / 5;
}
.about-figure-frame--landscape {
  aspect-ratio: 16 / 9;
}
.about-figure-frame--landscape-wide {
  aspect-ratio: 3 / 2;
}
@media (min-width: 768px) {
  .about-split-grid {
    grid-template-columns: 45fr 55fr;
    gap: clamp(2rem, 4vw, 4rem);
    /* Phase 3c: top-aligned, not centred. Centring a 300px copy block
       beside a 4:5 portrait left ~225px of empty cream above and below the
       copy on every split at 1440, and turned the CEO → Who seam into a
       410px hole. The label now sits on the picture's top edge. */
    align-items: start;
  }
  .about-split-grid .about-split-body { order: 0; }
  .about-split-grid .about-split-media { order: 1; }
  .about-split-grid--flip .about-split-body { order: 1; }
  .about-split-grid--flip .about-split-media { order: 0; }
}

/* --------------------------------------------------------------------------
   0. Page rhythm — .about-grid. Below md the label stacks above its copy as
   plain flow. From md up each section is a 12-column grid: the copy keeps
   its measure in the inline-start columns, and the section label sits alone
   at the outer edge of the inline-end column, top-aligned with the copy —
   so the wide side of the shell carries type instead of sitting empty.
   Grid columns follow direction, so RTL flips the whole composition free.
   Placement only: nothing decorative is added to the open side.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .about-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .about-grid-label {
    grid-column: 10 / 13;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    text-align: end;
  }
  .about-grid-body { grid-column: 1 / 9; grid-row: 1; }
  /* The stacked-layout gaps under the labels collapse inside the grid */
  .about-grid-body .about-title { margin-block-start: 0; }
  .about-grid-body.how-wrap,
  .about-grid-body.focus-copy { margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   1. Page head — label, company name, one paragraph. No hero: generous
   space under the fixed nav and straight into the content.
   -------------------------------------------------------------------------- */
.about-head {
  background-color: var(--taraqi-cream);
  padding-block: clamp(8rem, 20vh, 11.5rem) clamp(3.5rem, 8vh, 5.5rem);
}
/* Project head: the status eyebrow sits inside the body directly above the
   h1, so the md+ margin collapse (which assumes the label lives in the outer
   column) must not pull the title flush against it. */
.about-grid-body .section-label + .about-title { margin-block-start: 1.5rem; }
.about-title {
  margin-block-start: 1.5rem;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.2;
  color: var(--taraqi-burgundy-dark);
}
/* Aref Ruqaa carries tashkeel and deep descenders — needs the taller line */
html[lang="ar"] .about-title { line-height: 1.55; }
.about-intro {
  margin-block-start: 1.5rem;
  max-inline-size: 60ch;
  font-size: 1.125rem;
  line-height: 2;
  color: var(--taraqi-ink);
}

/* --------------------------------------------------------------------------
   2. How we work — a vertical sequence of four stages. From md up, a
   burgundy hairline (the Rise Rail) runs down the inline-start edge with a
   tick marking each stage; the fill on top of the track is what js/about.js
   scrubs. Below md the rail disappears and the stages simply stack.
   -------------------------------------------------------------------------- */
.section-how {
  background-color: var(--taraqi-cream);
  padding-block: clamp(3rem, 7vh, 5rem) clamp(5rem, 12vh, 8rem);
}
.how-wrap { position: relative; margin-block-start: 2.5rem; }
.how-rail { display: none; }
.how-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 4rem);
}
.how-stage-title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.how-stage-body {
  margin: 0.75rem 0 0;
  max-inline-size: 55ch;
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--taraqi-ink);
}

/* Stage counter under the label — the active stage as ٠١ — ٠٤ / 01 — 04 in
   the display face (kept above the serif's 20px floor). The markup's default is
   the c4 key, so reduced-motion and no-JS read the finished sequence. */
.how-counter {
  margin: 0.75rem 0 0;
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--taraqi-burgundy-dark);
}
/* Arabic-Indic digits are bidi class AN: around the dash they resolve as an
   RTL run even inside the LTR-forced .ltr-num, flipping «٠١ — ٠٤» to
   «٠٤ — ٠١». Isolating each token makes the wrapper's LTR order stick. */
.how-counter .ltr-num > span { unicode-bidi: isolate; }

/* Active-stage tracking. js/about.js adds .is-tracking only when motion is
   allowed, so this whole block is inert under prefers-reduced-motion and
   without GSAP — the base render above stays every stage at full strength.
   State changes only: opacity, color, transform. 300ms on the rise ease. */
/* Phase 3c: 0.45 read at 2.7:1 (ink) and 2.0:1 (the burgundy title) over
   cream — three of four stages unreadable at any scroll position. 0.70 is
   the lowest round value that keeps every dimmed line at or above 4.5:1
   on cream: ink #2B2320 at 70% composites to 5.41:1, deep burgundy #5C2530
   to 4.64:1. The inactive title therefore stays deep burgundy: the lighter
   #9B4753 would need 90% opacity to pass, which is no dimming at all. */
.how-stages.is-tracking .how-stage {
  opacity: 0.70;
  transition: opacity 300ms var(--ease-rise);
}
.how-stages.is-tracking .how-stage.is-active { opacity: 1; }

@media (min-width: 768px) {
  .how-rail {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--rail-w);
    background-color: var(--taraqi-line);
  }
  .how-rail-fill {
    position: absolute;
    inset: 0;
    background-color: var(--taraqi-burgundy);
    transform-origin: top;
  }
  .how-stages { padding-inline-start: 3.5rem; }
  .how-stage { position: relative; }
  /* Stage mark: a short tick off the rail, level with the stage title.
     The active tick grows off the rail — transform only, origin on the
     rail side (physical keywords, so RTL needs the flip below). */
  .how-stage::before {
    content: "";
    position: absolute;
    inset-inline-start: -3.5rem;
    inset-block-start: 0.85em;
    inline-size: 1.25rem;
    block-size: var(--rail-w);
    background-color: var(--taraqi-burgundy-dark);
    transform-origin: 0% 50%;
    transition: transform 300ms var(--ease-rise);
  }
  [dir="rtl"] .how-stage::before { transform-origin: 100% 50%; }
  .how-stages.is-tracking .how-stage.is-active::before {
    transform: scaleX(1.6) scaleY(2.5);
  }
}

/* The label + counter stick while the stages pass, then release with the
   section. CSS sticky only — no pin, no layout takeover. Desktop only, and
   never under reduced motion. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .how-label-cell { align-self: stretch; }
  .how-label-sticky {
    position: sticky;
    inset-block-start: calc(var(--nav-h) + 2.5rem);
  }
}

/* --------------------------------------------------------------------------
   3. Why focus — two paragraphs on the sand veil, opened by .about-rule.
   -------------------------------------------------------------------------- */
.section-focus {
  background-color: var(--taraqi-sand-veil);
  padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 6rem);
}
.focus-copy {
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.focus-copy p {
  margin: 0;
  max-inline-size: 60ch;
  font-size: 1.125rem;
  line-height: 2;
  color: var(--taraqi-ink);
}
@media (max-width: 767px) {
  .focus-copy { margin-block-start: 1.5rem; gap: 1.25rem; }
  .focus-copy p { font-size: 1.0625rem; line-height: 1.9; }
}

/* --------------------------------------------------------------------------
   4. From the CEO — the profile's opening word (client Company Profile PDF,
   p.03) at the top of the page's content run. A burgundy bar on the inline-
   start edge, the PDF's own device, drawn in the site's hairline vocabulary
   rather than as a filled tile.

   THE MASK IS THE HERO TAGLINE'S, AT PARAGRAPH SCALE. .ceo-mask clips and
   .ceo-mask-inner rises from behind its own bottom edge — the same
   outer-clips / inner-translates pair as css/home.css .mask/.mask-inner,
   including the padding/negative-margin trick that widens the clip box so
   Aref Ruqaa's ascenders, tashkeel and descenders are never cut without
   changing the line's layout height. Duplicated rather than shared because
   about.html does not load css/home.css and lifting it out would mean
   editing the home page's stylesheet in a step that is not about it.

   THE CSS STATE IS THE FINISHED QUOTE. Nothing here offsets anything:
   js/about.js §3 sets the from-state only past its motion guard, so reduced
   motion and no-GSAP render the quote in place with no inline state — the
   contract every other drawn and masked thing on this site keeps.

   The quote stays in the BODY face. The serif is never body copy and never
   under 20px (brand rule 5), and a five-line quote is body copy however
   large it is set; the weight comes from size, colour and the bar.
   -------------------------------------------------------------------------- */
.section-ceo {
  background-color: var(--taraqi-cream);
  padding-block: clamp(3.5rem, 8vh, 5.5rem) clamp(3rem, 7vh, 4.5rem);
}
.ceo-copy { margin-block-start: 2rem; }
.ceo-quote {
  margin: 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--taraqi-burgundy);
  max-inline-size: 56ch;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.95;
  color: var(--taraqi-burgundy-dark);
}
/* Outer clips, inner translates. */
.ceo-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.18em;
  margin-block: -0.18em;
}
.ceo-mask-inner {
  display: block;
  will-change: transform;
}
.ceo-attrib {
  margin: 1.75rem 0 0;
  padding-block-start: 0.875rem;
  padding-inline-start: 1.5rem;
  max-inline-size: 56ch;
  border-block-start: 1px solid var(--taraqi-line);
  font-family: var(--font-en-body);   /* English on both pages */
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--taraqi-burgundy-dark);
}
/* The element is dir="ltr" on both pages. Under ar it still sits on the
   quote's side: text to its own inline end, and the indent moved there. */
html[dir="rtl"] .ceo-attrib {
  padding-inline: 0 1.5rem;
  text-align: end;
}
@media (max-width: 767px) {
  .ceo-copy { margin-block-start: 1.5rem; }
  .ceo-quote { padding-inline-start: 1.125rem; line-height: 1.9; }
  .ceo-attrib { padding-inline-start: 1.125rem; }
  html[dir="rtl"] .ceo-attrib { padding-inline: 0 1.125rem; }
}

/* THE FOUNDER'S PORTRAIT. One <figure>, two compositions.

   Below lg it is in flow and comes first: full-bleed, 4:5, with a fade into
   the cream along its bottom edge, then the label, the quote and the
   attribution.

   From lg up it leaves the flow and fills the open inline-end half of the
   section at full section height. Everything is a logical property, so ar
   puts the quote on the right and the picture on the left; the picture
   itself is never flipped. The label gives up the inline-end column it
   holds on every other .about-grid (it would sit on the photograph) and
   stacks above the quote, and the copy is held to the six inline-start
   columns — the shell's own half — so no line of the quote runs under the
   picture.

   THE VEIL is .ceo-portrait::after: cream at full strength on the quote's
   edge falling to nothing at 45% of the picture, and cream rising over the
   bottom quarter. No border, no box, no shadow. It is on the figure, not on
   the <img>, so js/about.js can scale the picture underneath it. The
   horizontal gradient is physical, so it is restated for ar. */
.section-ceo {
  position: relative;
  overflow: hidden;
}
.ceo-portrait {
  position: relative;
  overflow: hidden;
  margin: 0 0 2.5rem;
  aspect-ratio: 4 / 5;
  max-block-size: 36rem;
  inline-size: 100%;
}
.ceo-portrait picture { display: block; block-size: 100%; }
.ceo-portrait img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 55% 15%;
}
.ceo-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--taraqi-cream), transparent 25%);
}
@media (min-width: 1024px) {
  .section-ceo .about-grid { position: relative; z-index: 1; }
  .section-ceo .about-grid-label {
    grid-column: 1 / 7;
    justify-self: start;
    text-align: start;
  }
  .section-ceo .about-grid-body { grid-column: 1 / 7; grid-row: 2; }
  .ceo-portrait {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 50%;
    margin: 0;
    aspect-ratio: auto;
    max-block-size: none;
  }
  .ceo-portrait img { object-position: 50% 20%; }
  .ceo-portrait::after {
    background:
      linear-gradient(to top, var(--taraqi-cream), transparent 25%),
      linear-gradient(to right, var(--taraqi-cream), transparent 45%);
  }
  html[dir="rtl"] .ceo-portrait::after {
    background:
      linear-gradient(to top, var(--taraqi-cream), transparent 25%),
      linear-gradient(to left, var(--taraqi-cream), transparent 45%);
  }
}

/* --------------------------------------------------------------------------
   5. Who we are — the profile's «من نحن» (p.04), three sentences at the copy
   measure. Same rhythm and same measure as §3 (Why one project), so the two
   prose blocks on this page read as one voice rather than two components.
   -------------------------------------------------------------------------- */
.whoweare-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.whoweare-copy p {
  margin: 0;
  max-inline-size: 60ch;
  font-size: 1.125rem;
  line-height: 2;
  color: var(--taraqi-ink);
}

/* --------------------------------------------------------------------------
   6. Vision and mission — the profile's two statements (p.05), side by side
   from md up and stacked below it. The split is the grid: no tile and no
   second surface, which keeps the page's one sand veil where §7 puts it.
   The titles sit at .commit-title's weight — a label for the paragraph
   under it, not a section heading, which is what .section-label above
   already is.
   -------------------------------------------------------------------------- */
.section-vm {
  background-color: var(--taraqi-cream);
  padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 5.5rem);
}
.vm-split {
  margin-block-start: 2rem;
  display: grid;
  gap: 2rem;
}
.vm-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.vm-body {
  margin: 0.75rem 0 0;
  max-inline-size: 44ch;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--taraqi-ink);
}
@media (min-width: 768px) {
  .vm-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   7. Core values — the profile's four cards (p.06) on the sand veil, in the
   profile's own order. A list of four peers, set in the shared .commit-*
   register (body face at 600 over body copy) so nothing new is introduced;
   the PDF's alternating burgundy and sand tiles are deliberately NOT
   reproduced — four filled tiles is a component this site does not have, and
   two of them burgundy would spend most of the 15-20% burgundy budget on a
   band of four short paragraphs.
   -------------------------------------------------------------------------- */
.section-values {
  background-color: var(--taraqi-sand-veil);
}
.values-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.value-title {
  margin: 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--taraqi-line);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.value-body {
  margin: 0.75rem 0 0;
  max-inline-size: 40ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--taraqi-ink);
}