/* ============================================================
   About Al Arabi — page-specific components.
   Inherits the homepage system entirely (tokens.css + main.css);
   this layer only adds About-only layout. No homepage styles are
   redefined. RTL-first via logical properties → EN mirror = dir=ltr.
   ============================================================ */

/* ---------- About hero: a quieter, type-led chapter opening (distinct from the homepage hook) ---------- */
.about-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-block-size:clamp(560px, 86vh, 940px);
  display:flex; align-items:flex-end;
  background:var(--color-stone, #EFE9DF); /* bright fallback for the bright hero — no dark container even during load */
}
.about-hero img{
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  object-fit:cover; object-position:center 42%; z-index:-2;
}
.about-hero::after{ /* warm umber scrim — never black (KB §16); directional toward the text side */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(130% 118% at 72% 86%, rgba(24,17,6,.78) 0%, rgba(24,17,6,.40) 42%, rgba(24,17,6,.10) 68%, transparent 82%),
    linear-gradient(to top, rgba(22,15,5,.92) 0%, rgba(22,15,5,.52) 36%, rgba(22,15,5,.26) 64%, rgba(22,15,5,.32) 100%);
}
[dir="ltr"] .about-hero::after{
  background:
    radial-gradient(130% 118% at 28% 86%, rgba(24,17,6,.78) 0%, rgba(24,17,6,.40) 42%, rgba(24,17,6,.10) 68%, transparent 82%),
    linear-gradient(to top, rgba(22,15,5,.92) 0%, rgba(22,15,5,.52) 36%, rgba(22,15,5,.26) 64%, rgba(22,15,5,.32) 100%);
}

/* ---------- hero scrim variant for BRIGHT / ivory hero images ----------
   Keeps the upper image (ceiling, carved walls) luminous while darkening only the
   text zone (lower ~2/3) enough for perfect gold + white readability. Opt-in
   modifier: add `hero-bright` alongside `about-hero`. Used by the About hero and
   the Artistic Gypsum service hero (both are bright ivory interiors). */
.about-hero.hero-bright::after{
  background:
    radial-gradient(130% 130% at 68% 66%, rgba(18,12,4,.26) 0%, rgba(18,12,4,.10) 46%, transparent 72%),
    linear-gradient(to top, rgba(20,14,5,.58) 0%, rgba(20,14,5,.38) 30%, rgba(20,14,5,.20) 52%, rgba(20,14,5,.08) 70%, transparent 86%);
}
[dir="ltr"] .about-hero.hero-bright::after{
  background:
    radial-gradient(130% 130% at 32% 66%, rgba(18,12,4,.26) 0%, rgba(18,12,4,.10) 46%, transparent 72%),
    linear-gradient(to top, rgba(20,14,5,.58) 0%, rgba(20,14,5,.38) 30%, rgba(20,14,5,.20) 52%, rgba(20,14,5,.08) 70%, transparent 86%);
}
.about-hero .container{ padding-block:clamp(40px, 6vw, 88px); }
.about-hero .eyebrow{ color:var(--color-accent-champagne-on-dark); }
.about-hero-title{
  font-family:var(--font-display-ar); font-weight:400; color:#FBF7EC;
  font-size:clamp(2.3rem, 1.4rem + 3.9vw, 4.9rem); line-height:1.12;
  letter-spacing:-.01em; margin-block:.2em .5em; max-inline-size:19ch;
  text-shadow:0 2px 30px rgba(20,14,4,.5);
}
.about-hero-title .gold{ color:var(--color-hero-gold); }
.about-hero-standfirst{
  color:#F3ECDD; font-size:clamp(1.02rem, .9rem + .5vw, 1.32rem);
  line-height:1.75; max-inline-size:56ch;
}

/* ---------- section rhythm ---------- */
.about-section{ padding-block:clamp(56px, 7vw, 118px); }
.about-section.tint{ background:var(--color-bg-muted); }
.about-lede{
  font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem); line-height:1.5;
  color:var(--color-text); max-inline-size:26ch; margin:0;
}
.about-columns{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px, 4vw, 72px);
  align-items:start; margin-block-start:var(--space-4);
}
.about-columns p{ margin-block:0 1.1em; line-height:1.95; color:var(--color-text); max-inline-size:62ch; }
.about-columns p:last-child{ margin-block-end:0; }
@media (max-width:820px){ .about-columns{ grid-template-columns:1fr; } }

/* pull-quote — bronze display accent (Phase 2.5: saturated gold retired from type) */
.about-pullquote{
  margin:clamp(40px,5vw,72px) auto; max-inline-size:34ch; text-align:center;
  font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.7rem, 1.2rem + 2vw, 3rem); line-height:1.34;
  color:var(--color-heading-gold);
}
.about-pullquote .by{ display:block; margin-block-start:.7em; font-family:var(--font-text);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent-champagne-deep); }

/* ---------- the making — 7-stage process (richer than the homepage teaser) ---------- */
.process{ counter-reset:stage; margin-block-start:var(--space-4); display:grid; gap:clamp(14px,1.6vw,22px); }
.process-step{
  display:grid; grid-template-columns:112px 1.15fr 1fr; align-items:center;
  gap:clamp(18px,2.4vw,40px);
  padding-block:clamp(16px,1.8vw,26px); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
}
.process-step:first-child{ border-block-start:0; }
.process-num{
  font-family:var(--font-display-lat); font-size:clamp(1.8rem,1.2rem+1.8vw,2.9rem);
  color:var(--color-accent-champagne); line-height:1;
}
.process-body b{ display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.15rem,1rem+.6vw,1.5rem); color:var(--color-text); margin-block-end:.35em; }
.process-body span{ display:block; line-height:1.8; color:var(--color-text-muted); max-inline-size:44ch; }
.process-figure{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--color-bg-muted); }
.process-figure img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover;
  transition:transform var(--motion-ambient, 1.2s) var(--ease-out-quart, ease); }
@media (prefers-reduced-motion:no-preference){ .process-step:hover .process-figure img{ transform:scale(1.05); } }
.process-figure.todo{ display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed rgba(59,44,24,.28); color:var(--color-text-muted); font-size:.82rem; line-height:1.6; padding:12px; }
@media (max-width:720px){
  .process-step{ grid-template-columns:64px 1fr; grid-template-areas:"num body" "fig fig"; row-gap:16px; }
  .process-num{ grid-area:num; } .process-body{ grid-area:body; } .process-figure{ grid-area:fig; aspect-ratio:16/9; }
}

/* ---------- reach / geography band ---------- */
.reach-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-block-start:var(--space-4); }
.reach-cities{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px 14px; margin-block-start:var(--space-3); }
.reach-cities span{ font-family:var(--font-text); font-size:.92rem; color:var(--color-text);
  padding:8px 16px; border:1px solid var(--color-hairline, rgba(59,44,24,.16)); border-radius:100px; background:var(--color-bg, #F8F5EF); }
@media (max-width:720px){ .reach-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- leadership (permission-gated, un-named) ---------- */
.leadership{ max-inline-size:60ch; }
.leadership p{ line-height:1.95; color:var(--color-text); margin-block:0 1.1em; }
.leadership .note{ font-size:.84rem; color:var(--color-text-muted); font-style:italic; }

/* ---------- a slim ivory→gold divider glyph reused from the statement ---------- */
.about-divider{ display:flex; align-items:center; justify-content:center; gap:16px; color:var(--color-accent-champagne); margin-block:clamp(30px,4vw,56px); }
.about-divider .rule{ block-size:1px; inline-size:min(120px,22vw); background:linear-gradient(to var(--_d,right), transparent, currentColor); opacity:.5; }
.about-divider svg{ inline-size:24px; block-size:24px; }

/* ---------- craft divisions (spec-grid: relocated from inner.css so about.html stays self-contained) ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,4vw,64px); margin-block-start:var(--space-4); }
@media (max-width:720px){ .spec-grid{ grid-template-columns:1fr; } }
.spec{ padding-block:clamp(16px,1.8vw,24px); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.spec .n{ font-family:var(--font-display-lat); color:var(--color-accent-champagne); font-size:1rem; margin-inline-end:.55em; }
.spec b{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.2rem,1rem + .7vw,1.6rem); color:var(--color-text); }
.spec span{ display:block; margin-block-start:.5em; line-height:1.85; color:var(--color-text-muted); max-inline-size:46ch; }

/* ---------- convictions band (three pillars inside the warm-stone chapter — Phase 2.5 palette) ---------- */
/* the fourth pillar ("you decide, we execute") is hoisted into the display blockquote above */
.convictions{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,44px); margin-block-start:var(--space-4); }
@media (max-width:980px){ .convictions{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .convictions{ grid-template-columns:1fr; } }
.conviction b{ display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.24rem,1.02rem + .8vw,1.7rem); line-height:1.5; color:var(--color-heading-gold); }
.conviction p{ margin-block-start:.7em; line-height:1.9; color:var(--color-text-muted); max-inline-size:44ch; }

/* ---------- paired figures (two process-figures side by side) ---------- */
.figure-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,28px); margin-block-start:var(--space-4); }
@media (max-width:720px){ .figure-pair{ grid-template-columns:1fr; } }
.figure-pair .process-figure{ margin:0; }

/* ---------- named-work lists (projects, cleared for publication 2026-07-28) ---------- */
.worklist{ margin-block-start:var(--space-3); }
.worklist dt{ font-family:var(--font-text); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-champagne); margin-block-start:1.5em; }
.worklist dd{ margin:0; margin-block-start:.6em; line-height:1.95; color:var(--color-text); max-inline-size:62ch; }
.worklist dd b{ font-weight:600; color:var(--color-heading-gold); }

/* Final polish 2026-07-28: the hero eyebrow sat too low over the hero — lifted clear of the headline */
.about-hero .eyebrow{ margin-block-end:clamp(56px,8vw,110px); }

/* 05A — reach-cities adopt the site-wide editorial chip language (client priority 05A):
   ivory ground, bronze hairline, bronze type. No white floating pills. */
.reach-cities span{ /* reach-cities span: editorial */
  background:var(--color-bg,#FDFBF6) !important;
  border:1px solid rgba(138,109,43,.38) !important;
  border-radius:2px !important;
  color:var(--color-bronze,#8A5E20) !important;
  padding:10px 22px !important;
}