/* ==========================================================================
   TARAQI — home sections below the elevation (step 4). Since step 5A the
   section label, the contact band and the cream button are shared with
   about.html — this file loads on both pages. Cream dominant: who + the
   unit mix sit on cream, the commitments on a sand veil, the contact band
   the page's one burgundy block. Every color is a token. The CSS state is
   the revealed page — js/motion.js's [data-reveal-section] preset sets its
   from-states (opacity and a 24px rise; a clip wipe until step 16) only when
   it will animate them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section label — the elevation.heading treatment, reused so the four
   sections and the elevation read as chapters of one document.
   -------------------------------------------------------------------------- */
.section-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--taraqi-burgundy);
}
html[lang="en"] .section-label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Status pill (step 5a) — a project's status: Villa 13's «استلام فوري» /
   "Ready to Move" in its page hero and in its card's status slot, and,
   since 2026-10-08, B162's «قيد الإنشاء» / "Under construction" in its page
   hero, so the two heroes are one structure. (On the home page B162's
   status stays the plain .project-card-status line.)

   Deep burgundy fill, cream text: 11.2:1, and because the fill is solid the
   label reads the same over a veiled picture as on cream. The section-label
   register (size, weight, the English tracking) on a full-radius chip.

   Two small motions, both CSS, both transform/opacity only:
     pulse    a ring leaves the cream dot and fades, every 2.6s
     shimmer  one light sweep across the chip, once, when js/motion.js marks
              it .is-revealed — the moment its copy block has finished
              arriving (section()'s onComplete), so it is never spent unseen
   REDUCED MOTION: neither exists — the keyframes are only attached under
   (prefers-reduced-motion: no-preference), and js/motion.js never adds the
   class. The chip is static.
   -------------------------------------------------------------------------- */
.status-pill {
  --pill-pad-block: 0.375rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: var(--pill-pad-block) 0.875rem;
  overflow: hidden;                 /* clips the shimmer to the chip */
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background-color: var(--taraqi-burgundy-dark);
  color: var(--taraqi-cream);
}
html[lang="en"] .status-pill {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.status-pill-dot {
  position: relative;
  flex: none;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background-color: var(--taraqi-cream);
}
/* The ring: the dot's own size, scaled out. Hidden at rest. */
.status-pill-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--taraqi-cream);
  opacity: 0;
}
/* The sweep: a cream sheet at low opacity, cut to a soft diagonal band by a
   mask (the veil idiom — no colour literal), parked off the inline-start
   edge. It travels in reading order, hence the [dir] pair. */
.status-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--taraqi-cream);
  opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 50%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .status-pill-dot::after { animation: status-pulse 2.6s var(--ease-rise) infinite; }
  .status-pill.is-revealed::after { animation: status-shimmer 1.1s var(--ease-draw) 1 both; }
  [dir="rtl"] .status-pill.is-revealed::after { animation-name: status-shimmer-rtl; }
}
@keyframes status-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@keyframes status-shimmer {
  0%   { transform: translateX(-100%); opacity: 0.3; }
  100% { transform: translateX(100%);  opacity: 0.3; }
}
@keyframes status-shimmer-rtl {
  0%   { transform: translateX(100%);  opacity: 0.3; }
  100% { transform: translateX(-100%); opacity: 0.3; }
}
/* The eyebrow and the pill on one line above a name (both project heroes). */
.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1rem;
}
/* Phones: always two lines, eyebrow then pill. Left to wrap on its own, a
   long status ("Under construction") dropped under the eyebrow and a short
   one ("Ready to Move") did not, so the two heroes opened differently. */
@media (max-width: 480px) {
  .status-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Page rhythm — cream (projects), veil (commitments), cream
   (who), burgundy. Who carries about.focus's padding (css/about.css
   .section-focus) since 2026-10-04, when it became that block's text-only
   twin. */
.section-who     { background-color: var(--taraqi-cream); padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 6rem); }
.section-commit  { padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 6rem); }
/* Compact band — tagline, line and button close into the footer. */
.section-cta     { padding-block: clamp(3rem, 6.5vh, 4.5rem); }

/* --------------------------------------------------------------------------
   4.1 Who Taraqi is — text only: two paragraphs, no boxes, generous leading.
   The layout is about.html's about.focus block, value for value: .who-grid
   mirrors .about-grid (css/about.css — not loaded here), .who-copy mirrors
   .focus-copy, and the hairline above it is .values-rule. Below md the label
   stacks above the copy; from md the copy keeps its 60ch measure in the
   inline-start columns and the label sits at the outer edge of the
   inline-end column, top-aligned with it. Grid columns follow direction, so
   RTL flips it free.
   -------------------------------------------------------------------------- */
.who-copy {
  margin-block-start: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.who-copy p {
  margin: 0;
  max-inline-size: 60ch;
  font-size: 1.125rem;
  line-height: 2;
  color: var(--taraqi-ink);
}
@media (max-width: 767px) {
  .who-copy { margin-block-start: 1.5rem; gap: 1.25rem; }
  .who-copy p { font-size: 1.0625rem; line-height: 1.9; }
}
@media (min-width: 768px) {
  .who-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .who-grid-label {
    grid-column: 10 / 13;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    text-align: end;
  }
  .who-grid-body { grid-column: 1 / 9; grid-row: 1; }
  .who-grid-body.who-copy { margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   4.3 What we commit to — three columns on the sand veil, a rule of three
   short statements. Bold line in the body face (600 is the heaviest weight
   loaded; the serif stays out of sub-20px sizes).
   -------------------------------------------------------------------------- */
.section-commit { background-color: var(--taraqi-sand-veil); }
.commit-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.commit-body {
  margin: 0.75rem 0 0;
  max-inline-size: 40ch;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--taraqi-ink);
}

/* --------------------------------------------------------------------------
   4.4 Contact band — full-bleed Deep Burgundy, cream text only. A hairline
   at the block end separates it from the (equally burgundy) footer.
   -------------------------------------------------------------------------- */
.section-cta {
  background-color: var(--taraqi-wine);
  color: var(--taraqi-cream);
  border-block-end: 1px solid var(--taraqi-line-onDark);
}
.cta-tagline { margin: 0; }
.cta-tagline-ar {
  display: block;
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.6;
  color: var(--taraqi-cream);
}
.cta-tagline-en {
  font-family: var(--font-en-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--display-l-size);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--taraqi-cream);
}
html[lang="en"] .cta-tagline .cta-tagline-ar,
html[lang="ar"] .cta-tagline .cta-tagline-en { display: none; }

.cta-line {
  margin: 1.25rem auto 0;
  max-inline-size: 52ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--taraqi-cream);
  opacity: 0.85;
}
.cta-action { margin-block-start: 2rem; }

/* The primary CTA in cream fill with burgundy text (same pill as btn-primary). */
.btn-cream {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  background-color: var(--taraqi-cream);
  color: var(--taraqi-burgundy-dark);
  transition: color var(--dur-micro) var(--ease-rise);
}
.btn-cream:hover { color: var(--taraqi-burgundy); }
.btn-cream:focus-visible { outline-color: var(--taraqi-cream); }

/* --------------------------------------------------------------------------
   5. The Register-Interest modal (step 13). Markup is injected by
   js/modal.js on index / about / project; the fields inside it are rendered
   by js/forms.js from the field registry. It lives in this shared sheet
   rather than a css/modal.css of its own because an eighth render-blocking
   stylesheet cost index.html 446ms of LCP and two Lighthouse points, and
   this sheet already loads on every page. contact.html therefore parses
   these rules without ever using them — every selector below is scoped to
   .reg-modal, so nothing reaches that page's own form.

   The pattern is the familiar one — a centred panel over a dimmed page —
   and nothing else was taken from the reference. This is cream on deep
   burgundy, not white on black: the panel is the page's own cream with a
   burgundy hairline, and the scrim is Deep Burgundy at 72% (--taraqi-scrim),
   so the dimmed page reads as the brand rather than as a lightbox.

   Every colour is a token; every inset is logical, so RTL flips for free —
   the close button sits in the panel's inline-end corner in both directions.
   Inputs are underline-only here (the panel is small and the boxed rule the
   contact page uses would fence it in); the pill stays reserved for buttons.
   -------------------------------------------------------------------------- */

.reg-modal {
  position: fixed;
  inset: 0;
  z-index: 70;                      /* over the navbar (40) and the mobile
                                       panel (50) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
/* The [hidden] attribute is the closed state — say so explicitly, because
   the display above would otherwise win over the UA rule. */
.reg-modal[hidden] { display: none; }

.reg-scrim {
  position: absolute;
  inset: 0;
  background-color: var(--taraqi-scrim);
}

.reg-panel {
  position: relative;
  inline-size: 100%;
  max-inline-size: 30rem;
  max-block-size: calc(100dvh - 2.5rem);
  overflow-y: auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  background-color: var(--taraqi-cream);
  border: 1px solid var(--taraqi-burgundy);   /* the burgundy hairline */
  border-radius: 0;                            /* square, like the drafting sheet */
}

/* Close — inline-end corner, so RTL places it correctly with no override.
   36px box around a 24px glyph: a keyboard-reachable, tappable target. */
.reg-close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--taraqi-burgundy-dark);
  background-color: transparent;
  transition: color var(--dur-micro) var(--ease-rise);
}
.reg-close:hover { color: var(--taraqi-burgundy); }

/* Heading in the display face — Aref Ruqaa under ar, Newsreader under en
   (tokens.css drives that off html[lang]). Re-sized down from the .display
   clamp, which is scaled for page titles; the 1.5rem floor keeps the serif above
   its 20px minimum (brand rule 5). */
.reg-title {
  margin: 0;
  padding-inline-end: 2.5rem;        /* clear of the close button */
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.25;
  color: var(--taraqi-burgundy-dark);
}
.reg-line {
  margin: 0.75rem 0 0;
  max-inline-size: 34ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--taraqi-ink);
}

/* --------------------------------------------------------------------------
   The form. Same class names the contact page's form uses — they are the
   same rendered structure — but dressed for the panel: underline-only rules
   instead of boxes, and a full-width submit.
   -------------------------------------------------------------------------- */
.reg-form {
  display: grid;
  gap: 1.125rem;
  margin-block-start: 1.5rem;
}
/* The project question, while a trigger preset stands in for it (the
   coming-soon band — js/forms.js setTriggerPreset): `hidden` has to beat the
   field's own display. */
.reg-modal .form-field[hidden] { display: none; }
.reg-modal .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.reg-modal .form-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.reg-modal .form-field input,
.reg-modal .form-field select {
  inline-size: 100%;
  min-block-size: 44px;                       /* touch target */
  padding: 0.5rem 0;
  border: 0;
  border-block-end: 1px solid var(--taraqi-line);
  border-radius: 0;
  background-color: transparent;              /* the cream shows through */
  font: inherit;
  font-size: 1.0625rem;
  color: var(--taraqi-ink);
  transition: border-color var(--dur-micro) var(--ease-rise);
}
/* Country code + phone, one LTR row (see css/contact.css §2 for the idiom;
   repeated here because contact.css does not load on these pages). */
.reg-modal .phone-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
}
.reg-modal .phone-code,
.reg-modal .phone-number {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-inline-size: 0;
}
[dir="rtl"] .reg-modal .phone-row label { direction: rtl; }
.reg-modal .form-field input:hover,
.reg-modal .form-field select:hover { border-block-end-color: var(--taraqi-sand); }
.reg-modal .form-field input:focus-visible,
.reg-modal .form-field select:focus-visible { border-block-end-color: var(--taraqi-burgundy); }

/* The select's chevron, drawn with borders off the wrapper — no glyph, no
   image, takes the token colour. Logical inset, so RTL places it for free. */
.reg-modal .select-wrap { position: relative; display: block; }
.reg-modal .select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 1.75rem;
}
.reg-modal .select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.25rem;
  inset-block-start: calc(50% - 5px);
  inline-size: 8px;
  block-size: 8px;
  border-block-end: 1px solid var(--taraqi-burgundy-dark);
  border-inline-end: 1px solid var(--taraqi-burgundy-dark);
  transform: rotate(45deg);                   /* pointing down */
  pointer-events: none;
}
/* Logical borders swap sides under RTL — counter-rotate so it still points down */
[dir="rtl"] .reg-modal .select-wrap::after { transform: rotate(-45deg); }
/* The phone row is LTR inside an RTL page: undo the counter-rotation. */
[dir="rtl"] .reg-modal .phone-row[dir="ltr"] .select-wrap::after { transform: rotate(45deg); }

/* The opt-in: a square hairline box, the drafting-sheet idiom — ticked, it
   fills Deep Burgundy and a cream tick is drawn with two borders. */
.reg-modal .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.reg-modal .form-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.1875rem 0 0;
  border: 1px solid var(--taraqi-burgundy-dark);
  border-radius: 0;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-rise);
}
.reg-modal .form-check input:checked { background-color: var(--taraqi-burgundy-dark); }
.reg-modal .form-check input:checked::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 6px;
  inline-size: 5px;
  block-size: 10px;
  border-block-end: 2px solid var(--taraqi-cream);
  border-inline-end: 2px solid var(--taraqi-cream);
  transform: rotate(45deg);
}
[dir="rtl"] .reg-modal .form-check input:checked::after { transform: rotate(-45deg) scaleX(-1); }
.reg-modal .form-check input:focus-visible {
  outline: 2px solid var(--taraqi-burgundy);
  outline-offset: 2px;
}
.reg-modal .form-check label {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--taraqi-ink);
  cursor: pointer;
}

.reg-modal .field-error {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--taraqi-burgundy);
}
.reg-modal .form-field.is-invalid input,
.reg-modal .form-field.is-invalid select { border-block-end-color: var(--taraqi-burgundy); }
.reg-modal .form-field--phone.is-invalid select { border-block-end-color: var(--taraqi-line); }

/* Submit — the site's filled Deep Burgundy pill, full width in the panel. */
.reg-modal .form-action { margin-block-start: 0.25rem; }
.reg-modal .form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 48px;
  padding: 0.75rem 2.25rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  background-color: var(--taraqi-burgundy-dark);
  color: var(--taraqi-cream);
  transition: background-color var(--dur-micro) var(--ease-rise);
}
.reg-modal .form-submit:hover { background-color: var(--taraqi-burgundy); }
.reg-modal .form-submit:disabled { opacity: 0.6; }

/* --------------------------------------------------------------------------
   The submit outcome. While LEAD_WEBHOOK_URL is empty (js/forms.js §1) a
   valid submit lands here: the sentence says plainly that nothing was sent,
   and the button beside it is the route that does work. It sits on the sand
   veil with a burgundy rule so it reads as a hand-off, not a receipt.
   -------------------------------------------------------------------------- */
.reg-modal .form-status { margin: 0; }
.reg-modal .form-status:not(:has(> :not([hidden]))) { display: none; }
/* :not([hidden]) is load-bearing — a bare `display: block` on these would
   out-specify the UA rule behind the [hidden] attribute js/forms.js toggles,
   and the outcome lines would all paint at once. */
.reg-modal .status-success:not([hidden]),
.reg-modal .status-error:not([hidden]) {
  display: block;
  margin-block-start: 1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.7;
}
.reg-modal .status-success { color: var(--taraqi-burgundy-dark); }
.reg-modal .status-error { color: var(--taraqi-burgundy); }

.reg-modal .status-offline {
  margin-block-start: 1.25rem;
  padding: 1rem 1.125rem 1.125rem;
  background-color: var(--taraqi-sand-veil);
  border-inline-start: 2px solid var(--taraqi-burgundy);
}
.reg-modal .status-offline-line {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--taraqi-ink);
}
.reg-modal .status-offline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  margin-block-start: 0.875rem;
  padding: 0.625rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.9375rem;
  background-color: var(--taraqi-burgundy-dark);
  color: var(--taraqi-cream);
  transition: background-color var(--dur-micro) var(--ease-rise);
}
.reg-modal .status-offline-action:hover { background-color: var(--taraqi-burgundy); }

/* The way to the full form, for anyone who wants to tell us more. */
.reg-more {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--taraqi-ink);
}
.reg-more-link {
  color: var(--taraqi-burgundy-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--dur-micro) var(--ease-rise);
}
.reg-more-link:hover { color: var(--taraqi-burgundy); }

/* --------------------------------------------------------------------------
   6. Delivered photography (step 17) — the shared frame for the B162 shots
   the designer delivered against docs/B162-Image-Requirements.md. Four slots
   of that manifest are filled; the rest are still PENDING
   (docs/PLACEHOLDER-REGISTER.md), which is why this is a small shared
   component and not a gallery: it has to look deliberate holding one image
   per page, not like a grid with holes in it.

   Cream still frames every picture. The images sit INSIDE .max-w-shell
   rather than bleeding full-width, so the ≈60% cream rule survives a page
   that now opens on a photograph — the same argument the hero-veil note in
   the register makes for the home page, settled here by containment instead
   of by a veil. No overlay, no tint: these are graded warm already.

   Step 18 took project-b162.html's cover OUT of that argument: it is a
   full-viewport hero with the page head over it now, so it takes the home
   page's route (cream veil) rather than this one (containment). .media-frame
   and the mix/unit stills below are unchanged, and .media-cover-page +
   .about-head is now about.html's alone — see css/project.css §0.

   Aspect ratios are declared in CSS and the intrinsic width/height are on
   the <img>, so the box is reserved before the first byte decodes — the
   step-16 CLS lesson, applied to stills.
   -------------------------------------------------------------------------- */
.media-cover { margin: 0; }
.media-frame {
  display: block;
  /* Explicit, or aspect-ratio + max-block-size below shrinks the WIDTH to
     keep the ratio instead of cropping the height. */
  inline-size: 100%;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--taraqi-sand-veil);
}
.media-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.media-frame-wide  { aspect-ratio: 16 / 9; }
.media-frame-photo { aspect-ratio: 4 / 3; }

/* Caption — the one place a photograph says which unit it belongs to. A
   label, not body copy. */
.media-caption {
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--taraqi-ink);
  opacity: 0.75;
}

/* ORPHANED, markup-side, as of the about-hero step: project-b162.html left this
   pair at step 18 (css/project.css §0) and about.html has now left it too
   (css/about.css §0), so no page carries .media-cover-page any more. Kept
   rather than deleted, on the same terms as .section-pay in css/project.css
   §0 — the rules are correct and self-contained, and the next contained
   page-opening cover wants exactly them. Delete both this block and the
   .media-cover-page line in the max-width:767px block below if that page
   never arrives. NOTE the media query also holds .media-frame-wide's 3/2
   ratio, which is still live on the stills further down this sheet.

   What it did, while it was in use: the site nav is
   position:fixed, so a page's first element has to clear it itself — that is
   what .about-head's very large padding-block-start was doing on both pages
   when it WAS the first element. The cover then became the first element, so
   the cover cleared the nav and the head that followed dropped to ordinary
   section air. (.about-head itself is NOT orphaned — contact.html still
   uses it, as its own first element, with that large padding doing the
   original job.) Without the
   second rule the two paddings stack into ~11rem of empty cream between the
   photograph and the h1. */
.media-cover-page { padding-block-start: calc(var(--nav-h) + 2rem); }
/* Cap the cover against the viewport, not just against its ratio. At 16:9 a
   1232px-wide cover is 693px tall, which on a 900px laptop pushes the h1 off
   the fold — the project page would open on a photograph and no words, which
   is the opposite of how this site is built. object-fit:cover absorbs the
   crop, so the picture stays whole-looking and the title stays visible. */
.media-cover-page .media-frame-wide { max-block-size: 62vh; }
.media-cover-page + .about-head {
  padding-block-start: clamp(2.5rem, 6vh, 4rem);
}
@media (max-width: 767px) {
  .media-frame-wide { aspect-ratio: 3 / 2; }
  .media-cover-page { padding-block-start: calc(var(--nav-h) + 1.25rem); }
}

/* --------------------------------------------------------------------------
   About teaser — editorial split layout: large serif headline with one
   italicised emphasis word, a supporting paragraph, an outline CTA, and a
   square-cornered branding photograph. Generous whitespace throughout.
   -------------------------------------------------------------------------- */
.section-about-teaser {
  background-color: var(--taraqi-cream);
  padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 7rem);
  scroll-margin-block-start: var(--nav-h);
}
.about-teaser {
  display: grid;
  gap: 3rem;
}

/* --- text column --- */
.about-teaser-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-teaser-headline {
  margin: 0;
  color: var(--taraqi-burgundy-dark);
}
.about-teaser-headline em {
  font-style: italic;
}
/* Arabic only: balance the lines. The word-split reveal sets each word as
   its own shaping run, which sets the Arabic line a little wider than plain
   text — at 1440 that pushed the last word alone onto a second line.
   Balanced, the break falls before the emphasised phrase instead. The
   English headline is left exactly as it wraps on its own. */
html[lang="ar"] .about-teaser-headline { text-wrap: balance; }
.about-teaser-text {
  margin: 1.75rem 0 0;
  max-inline-size: 48ch;
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--taraqi-ink);
}

/* --- outline CTA — the arrow (.cta-arrow, css/home.css) slides on
       hover and on keyboard focus; it only decorates, the label carries it --- */
.section-about-teaser .about-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 44px;
  margin-block-start: 2.5rem;
  padding: 0.875rem 2rem;
  border: 1.5px solid var(--taraqi-burgundy-dark);
  border-radius: 0;
  background: transparent;
  color: var(--taraqi-burgundy-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--dur-micro) var(--ease-rise),
              color var(--dur-micro) var(--ease-rise);
  align-self: flex-start;
}
html[lang="ar"] .about-teaser-cta {
  letter-spacing: 0.04em;
  text-transform: none;
}
.section-about-teaser .about-teaser-cta:hover,
.section-about-teaser .about-teaser-cta:focus-visible {
  background-color: var(--taraqi-burgundy-dark);
  color: var(--taraqi-cream);
}

/* --- square-cornered image, with a burgundy hairline rectangle offset 14px
       down and toward the inline end behind it (mirrored in Arabic). The
       outline is a <rect> at the frame's own size in an unscaled SVG (no
       viewBox), so it is 1px at every width without vector-effect — that
       pairing with pathLength made Chrome lay the dash pattern out in screen
       pixels and left long gaps in the drawn line. pathLength="1" keeps the
       draw a 1 → 0 dashoffset. The rect runs clockwise from the top corner:
       the top edge is hidden behind the picture, so the visible line draws
       down the far side and back along the bottom. --- */
.about-teaser-figure {
  position: relative;
  margin-block-end: 14px;
  margin-inline-end: 14px;
}
.about-teaser-outline {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  transform: translate(14px, 14px);
  fill: none;
  stroke: var(--taraqi-burgundy);
  stroke-width: 1;
  pointer-events: none;
}
html[dir="rtl"] .about-teaser-outline { transform: translate(-14px, 14px) scaleX(-1); }
.about-teaser-outline rect {
  shape-rendering: crispEdges;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.about-teaser-media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--taraqi-sand-veil);
}
/* 110% tall so the ±4% scroll parallax never uncovers an edge */
.about-teaser-parallax {
  position: absolute;
  inset: -5% 0;
}
.about-teaser-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* --- desktop: 45 / 55 split, image larger --- */
@media (min-width: 768px) {
  .about-teaser {
    grid-template-columns: 45fr 55fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
  }
  html[lang="ar"] .about-teaser-headline {
    line-height: 1.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-teaser-cta { transition: none; }
}

/* --------------------------------------------------------------------------
   Core Values — «معايير تراقي» / The Taraqi Standard at display size, one
   italic word, then four square-cornered image cards between the about
   teaser and the project. Each card: a portrait picture (3:4), a 01–04
   index, a title and a one-line body. Desktop: four across on one baseline
   — every frame, index, title and body starts on the same line, whatever
   the language or the body's wrap. Tablet pairs them; phone stacks them.
   Each card is a four-row subgrid (frame · index · title · body) of the
   grid's rows, so a card never sits lower than its neighbours; browsers
   without subgrid fall back to a column with identical fixed-size rows
   above the body, which lines up the same way.

   THE BAND (sitewide motion step). The section sits on the sand veil — the
   same 16% tint the commitments carry — full width, and is opened by one
   burgundy hairline (--taraqi-burgundy, the stroke every drawn line on the
   site shares) inside the shell that draws from the inline start
   as the section enters (motion moment #5, js/motion.js [data-motion-rule];
   its transform-origin is flipped for Arabic here, so the script needs no
   direction logic). At rest the rule is drawn: reduced motion and no-GSAP
   render it whole. Spacing tightened against the cream version: the rule
   and the tint do the separating that ~2rem of air used to do. Contrast on
   the veil (#EFE7DE): ink 12.6:1, deep burgundy 9.7:1, burgundy 5.0:1 —
   nothing on the band is ever dimmed with opacity. The rules are scoped to
   [data-values]: about.html's .section-values keeps its own (css/about.css).
   -------------------------------------------------------------------------- */
.section-values[data-values] {
  background-color: var(--taraqi-sand-veil);
  padding-block: clamp(3rem, 7vh, 4.5rem) clamp(4rem, 9vh, 6rem);
}
.values-rule {
  display: block;
  inline-size: 100%;
  block-size: 1px;
  margin-block-end: clamp(2rem, 4.5vh, 3rem);
  background-color: var(--taraqi-burgundy);   /* the drawn-line colour: the about-teaser outline's stroke */
  transform-origin: 0 50%;
}
html[dir="rtl"] .values-rule { transform-origin: 100% 50%; }
.values-headline {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--taraqi-burgundy-dark);
}
html[lang="ar"] .values-headline { line-height: 1.45; }
.values-headline em { font-style: italic; }
.values-grid {
  display: grid;
  gap: 3rem;
  align-items: start;
  margin-block-start: clamp(2rem, 5vh, 3.5rem);
}
.values-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@supports (grid-template-rows: subgrid) {
  .values-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .values-card > * { justify-self: start; }
}
.values-frame {
  display: block;
  align-self: stretch;
  justify-self: stretch;
  inline-size: 100%;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--taraqi-sand-veil);
}
.values-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-rise);
}
.values-index {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  color: var(--taraqi-burgundy);
}
/* The title carries a hairline under it that draws from the inline start on
   hover — decoration only, the card is not a link. */
.values-title {
  position: relative;
  display: inline-block;
  margin: 0.375rem 0 0;
  padding-block-end: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--taraqi-burgundy-dark);
}
.values-title::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background-color: var(--taraqi-burgundy);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-reveal) var(--ease-rise);
}
html[dir="rtl"] .values-title::after { transform-origin: 100% 50%; }
.values-body {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--taraqi-ink);
}
@media (hover: hover) and (pointer: fine) {
  .values-card:hover .values-frame img { transform: scale(1.04); }
  .values-card:hover .values-title::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .values-frame img,
  .values-title::after { transition: none; }
}
@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
}
@media (min-width: 1024px) {
  .values-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
}