/* ============================================================
   Al Arabi — Editorial layer
   Creative-direction refinement (client, 2026-07-28):
   quieter, typographic, museum-monograph. Photography recedes
   into discoverable plates; words carry the emotion.
   Uses only existing tokens — no new palette.
   ============================================================ */

/* ---------- editorial rhythm: more air, larger type ---------- */
.editorial .about-section{ padding-block:clamp(76px,9vw,168px); }
.editorial .about-section + .about-section{ padding-block-start:clamp(60px,7vw,132px); }

.editorial .h2{
  font-size:clamp(2.1rem,1.35rem + 3.1vw,4.1rem);
  line-height:1.28;
  letter-spacing:-0.005em;
  max-inline-size:19ch;
}
.editorial .about-lede{
  font-size:clamp(1.32rem,1.06rem + 1.15vw,2.05rem);
  line-height:1.66;
  max-inline-size:34ch;
  color:var(--color-text);
  margin-block-start:var(--space-3);
}
.editorial .about-section p:not(.eyebrow):not(.about-lede):not(.about-pullquote){
  font-size:clamp(1rem,.965rem + .16vw,1.09rem);
  line-height:2.05;
}
.editorial .about-columns{ gap:clamp(32px,5vw,96px); margin-block-start:var(--space-4); }
.editorial .eyebrow{ margin-block-end:1.15em; }

/* a hairline that opens a chapter — replaces a photograph as the divider */
.chapter-rule{
  inline-size:100%; block-size:1px; border:0; margin-block:clamp(40px,5vw,88px) 0;
  background:linear-gradient(to right, transparent, var(--color-hairline, rgba(59,44,24,.18)) 22%, var(--color-hairline, rgba(59,44,24,.18)) 78%, transparent);
}

/* ---------- the one plate a section is allowed ---------- */
.plate{ margin-block-start:clamp(40px,5vw,84px); }
.plate img{ inline-size:100%; block-size:auto; display:block; }
.plate figcaption,
.plate-note{
  margin-block-start:14px; font-family:var(--font-text); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted);
}

/* ---------- quiet trigger: "see the work" ---------- */
.plate-link{
  --_g: var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--_g); line-height:1;
  margin-block-start:var(--space-3);
}
.plate-link .mark{
  inline-size:34px; block-size:34px; border-radius:50%;
  border:1px solid currentColor; opacity:.5;
  display:grid; place-items:center; flex:none;
  transition:opacity var(--motion-fast,.22s) var(--ease-out-quart,ease), transform var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.plate-link .mark svg{ inline-size:13px; block-size:13px; display:block; }
.plate-link .label{ border-block-end:1px solid transparent; padding-block-end:3px; transition:border-color var(--motion-fast,.22s) ease; }
.plate-link:hover .mark, .plate-link:focus-visible .mark{ opacity:1; transform:scale(1.06); }
.plate-link:hover .label, .plate-link:focus-visible .label{ border-block-end-color:currentColor; }
.plate-link:focus-visible{ outline:2px solid var(--_g); outline-offset:6px; }

/* on the warm-stone heritage ground the default bronze trigger reads correctly — no override needed */

/* ---------- named people: dignified, undesigned ---------- */
.roster{ margin-block-start:var(--space-4); }
.roster-group + .roster-group{ margin-block-start:clamp(32px,3.6vw,56px); }
.roster-group > h3{
  font-family:var(--font-text); font-weight:500; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne); margin:0 0 var(--space-2);
}
.roster-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,3.4vw,56px); }
@media (max-width:900px){ .roster-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .roster-list{ grid-template-columns:1fr; } }
.roster-list li{
  padding-block:clamp(14px,1.5vw,20px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
}
.roster-list b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.06rem,.98rem + .3vw,1.24rem); color:var(--color-text); line-height:1.45;
}
[dir="ltr"] .roster-list b{ font-family:var(--font-display-lat); }
.roster-list span{
  display:block; margin-block-start:5px; font-size:.86rem; line-height:1.7;
  color:var(--color-text-muted);
}
.roster-list .since{ color:var(--color-accent-champagne-deep, #8A5E20); font-variant-numeric:lining-nums; }

/* ---------- founders: two names, one vision ---------- */
.founders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(26px,3.4vw,64px); margin-block-start:clamp(36px,4.4vw,72px); }
@media (max-width:760px){ .founders{ grid-template-columns:1fr; } }
.founder{ padding-block-start:var(--space-3); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.16)); }
.founder .role{
  font-family:var(--font-text); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent-champagne); display:block; margin-block-end:12px;
}
.founder .name{
  font-family:var(--font-display-ar); font-weight:400; line-height:1.32;
  font-size:clamp(1.5rem,1.2rem + 1.35vw,2.35rem); color:var(--color-heading-gold); margin:0;
}
[dir="ltr"] .founder .name{ font-family:var(--font-display-lat); }
.founder .detail{ margin-block-start:14px; line-height:1.95; color:var(--color-text-muted); max-inline-size:34ch; }

/* ---------- process: typography first, photography as evidence ---------- */
.stage-list{ counter-reset:stage; margin-block-start:var(--space-4); }
.stage{
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(20px,2.6vw,44px);
  padding-block:clamp(24px,2.6vw,40px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
  align-items:baseline;
}
.stage:last-child{ border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.12)); }
.stage .n{
  font-family:var(--font-display-lat); font-size:.9rem; letter-spacing:.06em;
  color:var(--color-accent-champagne); line-height:1; padding-block-start:.5em;
}
.stage b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.3rem,1.08rem + .85vw,1.9rem); color:var(--color-text); line-height:1.4;
}
[dir="ltr"] .stage b{ font-family:var(--font-display-lat); }
.stage p{ margin-block-start:.6em; line-height:1.95; color:var(--color-text-muted); max-inline-size:52ch; }
@media (max-width:600px){ .stage{ grid-template-columns:1fr; gap:8px; } .stage .n{ padding-block-start:0; } }

/* ============================================================
   LIGHTBOX — discoverable imagery
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(16,12,5,.965);
  opacity:0; transition:opacity .38s var(--ease-out-quart,ease);
}
.lb[data-open]{ display:block; }
.lb.is-shown{ opacity:1; }
.lb-stage{
  position:absolute; inset:clamp(56px,7vh,96px) clamp(20px,7vw,120px) clamp(76px,10vh,120px);
  display:grid; place-items:center;
}
.lb-fig{ margin:0; max-inline-size:100%; max-block-size:100%; display:grid; place-items:center; }
.lb-fig img{
  max-inline-size:100%; max-block-size:calc(100vh - clamp(190px,22vh,260px));
  inline-size:auto; block-size:auto; display:block;
  box-shadow:0 40px 120px rgba(28,20,10,.5);
  opacity:0; transform:scale(.985);
  transition:opacity .42s var(--ease-out-quart,ease), transform .42s var(--ease-out-quart,ease);
}
.lb.is-shown .lb-fig img{ opacity:1; transform:none; }
.lb-cap{
  position:absolute; inset-inline:0; inset-block-end:clamp(26px,4vh,46px);
  text-align:center; color:rgba(248,245,239,.8);
  font-family:var(--font-text); font-size:.82rem; line-height:1.7; padding-inline:24px;
}
.lb-cap .idx{
  display:block; margin-block-end:8px; font-size:.68rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--color-hero-gold,#E4B65E);
}
.lb-close, .lb-nav{
  position:absolute; background:none; border:0; cursor:pointer; padding:0;
  color:rgba(248,245,239,.72); display:grid; place-items:center;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-close{
  inset-block-start:clamp(16px,2.6vh,30px); inset-inline-end:clamp(16px,3vw,40px);
  inline-size:46px; block-size:46px; border:1px solid rgba(248,245,239,.24); border-radius:50%;
}
.lb-nav{
  inset-block-start:50%; transform:translateY(-50%);
  inline-size:52px; block-size:52px; border:1px solid rgba(248,245,239,.2); border-radius:50%;
}
.lb-prev{ inset-inline-start:clamp(10px,2.2vw,34px); }
.lb-next{ inset-inline-end:clamp(10px,2.2vw,34px); }
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible{ color:#F8F5EF; border-color:rgba(248,245,239,.7); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.lb-close svg, .lb-nav svg{ inline-size:17px; block-size:17px; }
.lb-nav[hidden]{ display:none; }
/* arrows follow writing direction */
[dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg{ transform:scaleX(-1); }
body.lb-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .lb, .lb-fig img{ transition:none; }
  .lb-fig img{ opacity:1; transform:none; }
}

/* ============================================================
   SHARED CHROME REFINEMENT (client direction 2026-07-28, §08–09)
   Philosophy extracted from reference: ivory ground, bronze type,
   centered mark, symmetry, minimal links, air. Not copied.
   Additive classes — main.css baseline untouched.
   ============================================================ */

/* ---------- navigation: quieter, fewer, more air ---------- */
.header-editorial .header-inner{ min-block-size:104px; }
.header-editorial.is-condensed .header-inner{ min-block-size:84px; }
.header-editorial .primary-nav{ gap:clamp(22px,3vw,44px); }
.header-editorial .primary-nav a{
  font-size:.86rem; letter-spacing:.04em; color:var(--color-text);
  opacity:.82; transition:opacity var(--motion-fast,.2s) ease;
}
.header-editorial .primary-nav a:hover,
.header-editorial .primary-nav a:focus-visible,
.header-editorial .primary-nav a[aria-current="page"]{ opacity:1; }
.header-editorial .primary-nav a[aria-current="page"]::after{ inline-size:100%; }
.header-editorial .brand .brand-since{ opacity:.85; }

/* ---------- footer: centered mark, one line of links, air ---------- */
.footer-editorial{
  background:var(--color-bg-base); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block:clamp(44px,5vw,78px);
  text-align:center; font-size:.85rem;
}
.footer-editorial .foot-mark{ inline-size:clamp(160px,18vw,230px); block-size:auto; margin-inline:auto; display:block; }
.footer-editorial .foot-brand{
  font-family:var(--font-display-ar); font-size:clamp(1.25rem,1.05rem + .8vw,1.8rem);
  color:var(--color-heading-gold); margin-block:var(--space-3) 0; line-height:1.5;
}
[dir="ltr"] .footer-editorial .foot-brand{ font-family:var(--font-display-lat); }
.footer-editorial .foot-tag{
  margin-block-start:10px; color:var(--color-text-muted);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
}
.footer-editorial .foot-nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,2.6vw,40px);
  margin-block-start:clamp(30px,3.6vw,54px);
}
.footer-editorial .foot-nav a{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-functional); padding-block:4px; position:relative;
}
.footer-editorial .foot-nav a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  inline-size:0; block-size:1px; background:currentColor;
  transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.footer-editorial .foot-nav a:hover::after, .footer-editorial .foot-nav a:focus-visible::after{ inline-size:100%; }
.footer-editorial .foot-offices{
  margin-block-start:clamp(26px,3vw,44px); color:var(--color-text-muted); line-height:2;
  max-inline-size:64ch; margin-inline:auto;
}
.footer-editorial .foot-offices b{ color:var(--color-text); font-weight:500; }
.footer-editorial .foot-rule{
  inline-size:min(220px,40%); block-size:1px; border:0; margin:clamp(30px,3.6vw,54px) auto 0;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne, #C29F63), transparent);
  opacity:.55;
}
.footer-editorial .footer-legal{
  justify-content:center; border-block-start:0; margin-block-start:clamp(18px,2vw,28px);
  padding-block-start:0; font-size:.7rem; color:var(--color-text-muted); letter-spacing:.06em;
}

/* ============================================================
   CENTERED HEADER + MOBILE DRAWER (final refinement 2026-07-28)
   Centered mark, flanking minimal navigation. Logo is the centerpiece.
   ============================================================ */
.header-centered .header-c-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-block-size:118px; gap:clamp(14px,2vw,32px); position:relative;
}
.site-header.header-centered.is-condensed .header-c-inner{ min-block-size:92px; }
.header-centered .nav-side{ display:flex; gap:clamp(13px,1.7vw,26px); align-items:center; }
.header-centered .nav-s{ justify-self:end; }
.header-centered .nav-e{ justify-self:start; }
[dir="ltr"] .header-centered .nav-s{ justify-self:end; }
[dir="ltr"] .header-centered .nav-e{ justify-self:start; }
.header-centered .nav-side a{
  font-family:var(--font-text); font-size:.8rem; white-space:nowrap; letter-spacing:.06em;
  color:var(--color-text); opacity:.82; padding-block:6px; position:relative;
  transition:opacity var(--motion-fast,.2s) ease;
}
.header-centered .nav-side a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:0; block-size:1px;
  background:var(--color-accent-champagne-deep); transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.header-centered .nav-side a:hover, .header-centered .nav-side a:focus-visible,
.header-centered .nav-side a[aria-current="page"]{ opacity:1; }
.header-centered .nav-side a:hover::after, .header-centered .nav-side a[aria-current="page"]::after{ inline-size:100%; }
.header-centered .nav-side .lang-toggle{ opacity:.7; letter-spacing:.14em; }
.brand-center{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; line-height:1.2; }
.brand-center .brand-logo{ inline-size:auto; block-size:44px; transition:block-size var(--motion-base,.3s) var(--ease-in-out,ease); }
.site-header.is-condensed .brand-center .brand-logo{ block-size:34px; }
.brand-center .brand-name{ font-family:var(--font-display-ar); font-size:1.06rem; color:var(--color-text); }
[dir="ltr"] .brand-center .brand-name{ font-family:var(--font-display-lat); }
.brand-center .brand-since{ font-size:.6rem; letter-spacing:.22em; color:var(--color-accent-champagne-deep); text-transform:uppercase; }
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); display:none; }
@media (max-width:880px){
  .header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:96px; }
  .header-centered .nav-side{ display:none; }
  .brand-center{ justify-self:center; }
  .header-centered .nav-burger{ display:flex; }
}

/* ---------- mobile drawer: quiet ivory panel ---------- */
.nav-drawer{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:900;
  inline-size:min(340px,86vw); block-size:100dvh;
  background:var(--color-bg-base,#FBF7EC); border-inline-end:1px solid var(--color-hairline, rgba(59,44,24,.14));
  box-shadow:-24px 0 80px rgba(20,14,5,.16);
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(84px,14vh,120px) clamp(26px,7vw,40px) 40px;
  transform:translateX(102%);           /* panel lives at the inline-start edge (AR right / EN left); +102% is the RTL hide, mirrored for LTR at the end of this file */
  transition:transform .34s var(--ease-out-quart,ease);
}
.nav-drawer[hidden]{ display:none; }    /* display:flex must not defeat the hidden attribute */
.nav-drawer.is-open{ transform:none; }
.nav-drawer a{
  font-family:var(--font-display-ar); font-size:1.35rem; color:var(--color-text);
  padding-block:14px; border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.1));
}
[dir="ltr"] .nav-drawer a{ font-family:var(--font-display-lat); }
.nav-drawer a[aria-current="page"]{ color:var(--color-heading-gold); }
.nav-drawer .lang-toggle{ font-family:var(--font-text); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-champagne-deep); border-block-end:0; margin-block-start:8px; }
body.drawer-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .nav-drawer{ transition:none; } }

/* ---------- footer: flanking ornaments (subtle, champagne line-work) ---------- */
.foot-mark-row{ display:flex; align-items:center; justify-content:center; gap:clamp(22px,4vw,48px); }
.foot-orn{ inline-size:clamp(40px,4.6vw,60px); block-size:auto; color:var(--color-accent-champagne); opacity:.42; flex:none; }
@media (max-width:560px){ .foot-orn{ display:none; } }

/* ============================================================
   HOMEPAGE EDITORIAL AIR (final corrections 2026-07-28 §04)
   Calmer rhythm: more breathing room, typography more prominent.
   Additive — no structural change to the locked sections.
   ============================================================ */
.making, .crafts, .languages, .sectors{ padding-block:clamp(72px,8vw,148px); }
.making .h2, .crafts .h2, .languages .h2, .sectors .h2{
  font-size:clamp(2rem,1.3rem + 2.9vw,3.8rem); line-height:1.28; max-inline-size:20ch;
}
.making .standfirst, .crafts .standfirst, .languages .standfirst, .sectors .standfirst{ margin-block-start:var(--space-2); }
.lang-grid{ gap:clamp(18px,2.4vw,34px); }

/* ============================================================
   FINAL POLISH (client 2026-07-28): burger-only header.
   Navigation lives entirely in the drawer; the centered mark,
   flanked by whisper-subtle champagne ornaments, is the focus.
   ============================================================ */
.header-centered .nav-side{ display:none !important; }
.header-centered .nav-burger{ display:flex; flex-direction:column; justify-content:center; }
.header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:112px; }
.header-centered .brand-center{ justify-self:center; }
/* ornament medallions flanking the wordmark — champagne line-work, very subtle */
.hdr-orn-row{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.hdr-orn{ inline-size:clamp(26px,2.6vw,36px); block-size:auto; color:var(--color-accent-champagne); opacity:.38; flex:none; }
@media (max-width:560px){ .hdr-orn{ display:none; } }
/* burger pinned to the inline-end of the header on all widths */
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); }

/* client's own rosette ornament (from the approved pattern reference) stretching beside the mark */
.hdr-orn-row .hdr-orn{ inline-size:clamp(26px,2.6vw,34px); block-size:auto; opacity:.62; }
.orn-rule{ flex:none; block-size:1px; inline-size:clamp(28px,5vw,96px);
  background:var(--color-accent-champagne); opacity:.32; }
@media (max-width:560px){ .orn-rule{ display:none; } }

/* QA fix 2026-07-29: the generic .editorial eyebrow margin was overriding the About-hero label lift
   (equal specificity, later cascade). This wins: the label sits well clear of the headline. */
.editorial .about-hero .eyebrow{ margin-block-end:clamp(56px,8vw,110px); }

/* ============================================================
   ORNAMENT WATERMARK SYSTEM (prepared 2026-07-29 — awaiting the
   client's official ornament, Open Item V). The ornament becomes
   an architectural watermark carved into the page, never pasted:
   set --orn-url once the official asset arrives and add
   .orn-watermark to any chapter section. Ivory + champagne,
   soft-light emboss, extremely subtle.
   ============================================================ */
:root{ --orn-url:none; }  /* e.g. url("../assets/ornament-official.png") */
.orn-watermark{ position:relative; }
.orn-watermark::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--orn-url);
  background-repeat:no-repeat; background-position:var(--orn-pos, calc(100% + 120px) center);
  background-size:var(--orn-size, min(46vw, 560px));
  mix-blend-mode:soft-light; opacity:var(--orn-opacity, .16);
  filter:sepia(.4) hue-rotate(-8deg) saturate(.7);
}
.orn-watermark > *{ position:relative; z-index:1; }

/* ============================================================
   HORIZONTAL PROCESS TIMELINE (final homepage lock 2026-07-29)
   The homepage previews the workflow typographically; stage
   photography lives in the Service pages.
   ============================================================ */
.timeline-h{
  list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px) 0;
}
.timeline-h li{
  font-family:var(--font-display-ar); font-weight:400; white-space:nowrap;
  font-size:clamp(1.1rem,.95rem + .8vw,1.7rem); color:var(--color-heading-gold);
}
[dir="ltr"] .timeline-h li{ font-family:var(--font-display-lat); }
.timeline-h li + li::before{
  content:""; display:inline-block; vertical-align:middle;
  inline-size:clamp(22px,3.4vw,64px); block-size:1px;
  background:var(--color-accent-champagne); opacity:.55;
  margin-inline:clamp(10px,1.6vw,26px);
}
@media (max-width:640px){
  .timeline-h{ flex-direction:column; align-items:flex-start; gap:6px; }
  .timeline-h li + li::before{ inline-size:1px; block-size:18px; margin-inline:0; margin-block:2px 4px; display:block; margin-inline-start:2px; }
}

/* ============================================================
   FEATURED WORK — balanced editorial pair (client 2026-07-29)
   Two identical cards, generous air, neither dominant.
   ============================================================ */
.glimpse{ padding-block:clamp(84px,10vw,180px); }
.featured-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,72px);
  margin-block-start:clamp(44px,5.5vw,84px);
  max-inline-size:min(1160px,100%); margin-inline:auto;
}
.featured-pair .glimpse-item{ margin:0; inline-size:100%; }
.featured-pair .frame{ display:block; aspect-ratio:4/3; overflow:hidden; }
.featured-pair .frame img{ inline-size:100%; block-size:100%; object-fit:cover; }
@media (max-width:720px){ .featured-pair{ grid-template-columns:1fr; gap:clamp(36px,8vw,56px); } }

/* ============================================================
   FEATURED WORK — magazine rows (client-approved reference, 2026-07-29)
   Two identical editorial rows: text panel + image, alternating sides.
   ============================================================ */
.fw-head{ text-align:center; max-inline-size:62ch; margin-inline:auto; }
.fw-head .h2{ margin-inline:auto; max-inline-size:none; }
.fw-sub{ margin-block-start:var(--space-2); color:var(--color-text-muted); font-size:1rem; }
.fw-row{
  display:grid; grid-template-columns:minmax(280px,1fr) 2.2fr; align-items:stretch;
  margin-block-start:clamp(44px,5.5vw,84px);
}
.fw-row.alt{ grid-template-columns:2.2fr minmax(280px,1fr); }
.fw-row.alt .fw-text{ order:2; }
.fw-row.alt .fw-img{ order:1; }
.fw-text{
  background:var(--color-stone, #EFE9DF); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.6vw,64px);
}
.fw-text h3{
  font-family:var(--font-display-ar); font-weight:400; color:var(--color-text);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); line-height:1.3; margin:0 0 .55em;
}
[dir="ltr"] .fw-text h3{ font-family:var(--font-display-lat); }
.fw-desc{ color:var(--color-text-muted); line-height:1.95; max-inline-size:34ch; margin:0 0 1.4em; }
.fw-img{ block-size:clamp(300px,34vw,480px); overflow:hidden; }
.fw-img img{ inline-size:100%; block-size:100%; object-fit:cover; }
.fw-link{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:8px;
  border-block-end:1px solid transparent; padding-block-end:3px; align-self:flex-start;
  transition:border-color var(--motion-fast,.22s) ease;
}
.fw-link:hover, .fw-link:focus-visible{ border-block-end-color:currentColor; }
.fw-more{ text-align:center; margin-block-start:clamp(44px,5.5vw,84px); }
.fw-more .fw-link{ font-size:.84rem; }
@media (max-width:820px){
  .fw-row, .fw-row.alt{ grid-template-columns:1fr; }
  .fw-row .fw-img, .fw-row.alt .fw-img{ order:1; block-size:clamp(220px,52vw,360px); }
  .fw-row .fw-text, .fw-row.alt .fw-text{ order:2; }
}

/* ============================================================
   OFFICIAL AL ARABI ORNAMENT SYSTEM (client 2026-07-29)
   The official carved-gypsum patterns as embossed atmosphere:
   warm-bronze ridges at 3–8% alpha (baked into the assets),
   carved into the page — never pasted, never touching content.
   One vocabulary, everywhere. Replaces all drawn SVG ornaments.
   ============================================================ */
/* manifesto — diamond linework replaces the old photo overlay */
.manifesto::before{
  background:url("../assets/orn-diamond.png") center/cover no-repeat;
  mix-blend-mode:normal; opacity:1; filter:none;
}
/* heritage chapter — fan palmettes on the warm stone; the drawn medallion is retired */
.heritage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-fans.png") center/cover no-repeat;
}
.heritage-ornament{ display:none; }
/* footer — the pierced floral lattice, barely there */
.footer-editorial{ position:relative; overflow:hidden; }
.footer-editorial::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-lattice.png") center top / min(640px,80vw) repeat;
}
.footer-editorial > .container{ position:relative; z-index:1; }
.footer-editorial p{ max-inline-size:none; margin-inline:auto; }
.footer-editorial .foot-offices{ max-inline-size:64ch; }
/* commission CTA — chevron relief on ivory (appears on every page) */
.commission{ position:relative; overflow:hidden; }
.commission::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-chevron.png") center/cover no-repeat;
}
.commission > .container{ position:relative; z-index:1; }
/* inner-page opening section — a feather-shingle corner watermark, clear of the text column */
.editorial > .about-section:first-child{ position:relative; overflow:hidden; }
.editorial > .about-section:first-child::before{
  content:""; position:absolute; inset-block-start:-30px; inset-inline-end:-70px;
  inline-size:min(44vw,520px); aspect-ratio:445/330; pointer-events:none;
  background:url("../assets/orn-feather.png") center/contain no-repeat;
}
.editorial > .about-section:first-child .container{ position:relative; z-index:1; }
/* utility divider for future pages — the radial sunburst medallion */
.orn-divider{
  display:block; inline-size:56px; aspect-ratio:225/255; margin:clamp(30px,4vw,56px) auto;
  background:url("../assets/orn-sunburst.png") center/contain no-repeat;
}

/* ============================================================
   TEAM PHOTOGRAPHY — natural on the ivory page (client 2026-07-29)
   No dark containers. Clean editorial crops, a whisper of
   champagne mount — like prints mounted in a monograph.
   ============================================================ */
.team-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,44px);
  margin-block-start:clamp(40px,5vw,72px);
}
@media (max-width:760px){ .team-row{ grid-template-columns:1fr; } }
.team-fig{ margin:0; }
.team-fig .mount{
  display:block; padding:clamp(8px,1vw,14px); background:var(--color-bg-base,#FBF7EC);
  border:1px solid var(--color-accent-champagne,#C29F63);
}
.team-fig .mount img{
  inline-size:100%; block-size:auto; aspect-ratio:4/5; object-fit:cover; display:block;
}
.team-fig figcaption{
  margin-block-start:12px; font-family:var(--font-text); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); text-align:center;
}

/* ============================================================
   PROCESS TIMELINE — architectural drafting composition
   (final homepage refinement, client 2026-07-29)
   The section sits on a faint drafting sheet: compass circles,
   construction ticks, proportional guides — bronze at ~3-4%,
   discovered rather than seen. The six stages are joined by one
   fine bronze line through compass-circle nodes: craftsmanship
   as a continuous, measured process.
   ============================================================ */
.making{ position:relative; overflow:hidden; }
.making::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640'><g fill='none' stroke='rgb(138,109,43)' stroke-opacity='0.045' stroke-width='1'><circle cx='1050' cy='300' r='250'/><circle cx='1050' cy='300' r='178'/><circle cx='1050' cy='300' r='96'/><line x1='1050' y1='20' x2='1050' y2='580'/><line x1='770' y1='300' x2='1330' y2='300'/><line x1='860' y1='110' x2='1240' y2='490'/><line x1='1240' y1='110' x2='860' y2='490'/><g stroke-opacity='0.06'><line x1='1050' y1='46' x2='1050' y2='58'/><line x1='1050' y1='542' x2='1050' y2='554'/><line x1='796' y1='300' x2='808' y2='300'/><line x1='1292' y1='300' x2='1304' y2='300'/></g><circle cx='240' cy='430' r='120'/><circle cx='240' cy='430' r='58'/><line x1='90' y1='430' x2='390' y2='430'/><line x1='240' y1='280' x2='240' y2='580'/><line x1='60' y1='80' x2='1340' y2='80' stroke-opacity='0.035'/><line x1='60' y1='560' x2='1340' y2='560' stroke-opacity='0.035'/><line x1='432' y1='40' x2='432' y2='600' stroke-opacity='0.03'/><line x1='866' y1='40' x2='866' y2='600' stroke-opacity='0.03'/></g></svg>");
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* the official sunburst medallion emerging from the construction circle — ornament fragment blended into the drafting sheet */
.making::after{
  content:''; position:absolute; pointer-events:none;
  inset-block-start:12%; inset-inline-start:66%; inline-size:min(24vw,300px); aspect-ratio:640/725;
  background:url('../assets/orn-sunburst-faint.png') center/contain no-repeat;
}
.making > .container{ position:relative; z-index:1; }

/* the six stages — compass nodes on one continuous bronze line */
.timeline-h{
  position:relative; justify-content:space-between;
  padding-block-start:44px; margin-block-start:clamp(40px,5vw,64px);
}
.timeline-h::before{
  content:""; position:absolute; inset-block-start:9px; inset-inline:1%;
  block-size:1px;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent);
  opacity:.5;
}
.timeline-h li{ position:relative; text-align:center; }
.timeline-h li::after{
  content:""; position:absolute; inset-block-start:-42px; inset-inline-start:calc(50% - 9px);
  inline-size:18px; block-size:18px; border-radius:50%;
  border:1px solid var(--color-accent-champagne-deep,#8A5E20); opacity:.75;
  background:
    radial-gradient(circle at center, var(--color-accent-champagne-deep,#8A5E20) 1.6px, transparent 2.2px),
    var(--color-bg-base,#FBF7EC);
}
/* the old dash separators retire — the construction line is the connection now */
.timeline-h li + li::before{ display:none; }
@media (max-width:640px){
  .timeline-h{ padding-block-start:0; padding-inline-start:30px; }
  .timeline-h::before{ inset-inline:auto; inset-inline-start:8px; inset-block:6px 6px; inline-size:1px; block-size:auto;
    background:linear-gradient(to bottom, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent); }
  .timeline-h li{ text-align:start; }
  .timeline-h li::after{ inset-block-start:calc(50% - 9px); inset-inline-start:-30px; }
}

/* ---- Applications as editorial labels, not UI chips (final service review, 2026-07-30) ----
   Bronze hairline + bronze type on ivory, square-cut. Scoped to service pages via .chips-editorial
   so the locked About page keeps its original chips. No letter-spacing in RTL (connected script). */
.editorial .reach-cities.chips-editorial span{
  border:1px solid rgba(138,109,43,.38);
  color:var(--color-bronze, #8A5E20);
  background:var(--color-bg, #FDFBF6);
  border-radius:2px;
  padding:10px 24px;
  font-size:.9rem;
}
[dir="ltr"] .editorial .reach-cities.chips-editorial span{ letter-spacing:.04em; }

/* ---- Service chapter pager (client UX directive 2026-07-30) ----
   Services behave like chapters of one publication: every service page carries
   previous/next links to its neighbouring crafts so a visitor never returns to
   the homepage to change chapter. Logical properties keep it RTL/LTR correct. */
.svc-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,48px);
  margin-block-start:clamp(44px,6vw,86px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block-start:clamp(22px,3vw,38px);
}
.svc-pager a{ text-decoration:none; display:block; }
.svc-pager .dir{
  display:block; font-family:var(--font-text); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep, #A58452); margin-block-end:.7em;
}
.svc-pager b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem); line-height:1.4; color:var(--color-heading-gold, #8A5E20);
}
.svc-pager .en{ display:block; font-family:var(--font-text); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-text-muted); margin-block-start:.5em; }
.svc-pager .next{ text-align:end; }
.svc-pager .prev{ text-align:start; }
.svc-pager a:hover b{ color:var(--color-text); }
@media (max-width:640px){ .svc-pager{ grid-template-columns:1fr; row-gap:26px; }
  .svc-pager .next, .svc-pager .prev{ text-align:start; } }

/* ---- Portfolio: sector chapters + project roster (2026-07-30) ----
   Names are the only thing that changes when approvals land; the layout never does.
   Confidential and pending entries are first-class citizens, not gaps. */
.pf-index{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-block-start:var(--space-3); }
.pf-index a{ font-family:var(--font-text); font-size:.9rem; text-decoration:none;
  color:var(--color-bronze,#8A5E20); border:1px solid rgba(138,109,43,.38); background:var(--color-bg,#FDFBF6);
  border-radius:2px; padding:10px 22px; }
.pf-index a:hover{ border-color:rgba(138,109,43,.7); }
.pf-roster{ margin-block-start:var(--space-4); }
.pf-item{ display:grid; grid-template-columns:1fr auto; gap:8px clamp(16px,2.4vw,40px); align-items:baseline;
  padding-block:clamp(15px,1.7vw,24px); border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); }
.pf-item:first-child{ border-block-start:0; }
.pf-item b{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.1rem,.98rem + .6vw,1.45rem);
  color:var(--color-text); line-height:1.45; }
.pf-item .city{ display:block; font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); margin-block-start:.45em; }
.pf-item .tag{ font-family:var(--font-text); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep,#A58452); white-space:nowrap; }
.pf-item.is-held b{ color:var(--color-heading-gold,#8A5E20); }
@media (max-width:560px){ .pf-item{ grid-template-columns:1fr; } .pf-item .tag{ white-space:normal; } }

/* ---- Portfolio project cards (client refinement 2026-07-30) ----
   Every project is a real editorial card: image (or an honest pending tile),
   title, city, sector, the crafts involved, and a View Project link.
   Only the card DESTINATION changes when detail pages ship. */
.pf-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(26px,3.2vw,54px); margin-block-start:var(--space-4); }
.pf-card{ display:flex; flex-direction:column; }
.pf-card .shot{ position:relative; overflow:hidden; background:var(--color-bg-muted); aspect-ratio:4/3; }
.pf-card .shot img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.pf-card .pending{ display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid rgba(138,109,43,.30); background:var(--color-bg,#FDFBF6); }
.pf-card .pending span{ font-family:var(--font-text); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); padding:0 18px; line-height:1.9; }
.pf-card h3{ font-family:var(--font-display-ar); font-weight:400; line-height:1.4;
  font-size:clamp(1.12rem,1rem + .6vw,1.48rem); color:var(--color-text); margin-block:1em .1em; }
.pf-card.is-held h3{ color:var(--color-heading-gold,#8A5E20); }
.pf-card .where{ font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); }
.pf-card .state{ display:block; font-family:var(--font-text); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); margin-block-start:.85em; }
.pf-crafts{ display:flex; flex-wrap:wrap; gap:7px 8px; margin-block-start:.95em; }
.pf-crafts a{ font-family:var(--font-text); font-size:.72rem; text-decoration:none; color:var(--color-bronze,#8A5E20);
  border:1px solid rgba(138,109,43,.34); border-radius:2px; padding:6px 13px; background:var(--color-bg,#FDFBF6); }
.pf-crafts a:hover{ border-color:rgba(138,109,43,.7); }
.pf-card .go{ margin-block-start:auto; padding-block-start:1.1em; }
.pf-card .go a{ font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--color-heading-gold,#8A5E20); border-block-end:1px solid rgba(138,109,43,.4); padding-block-end:3px; }
.pf-card .go a:hover{ border-color:rgba(138,109,43,.9); }

/* ---- 03 · Editorial project covers (replaces "photography pending" tiles) ----
   An ornament-and-type cover in the house language. It is an editorial introduction
   to the destination — never presented as Al Arabi execution photography.
   When official project photography arrives, only the cover is swapped: the card
   never changes. */
.pf-card .cover{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(138,109,43,.075) 0%, transparent 62%),
    linear-gradient(160deg, #FBF7EE 0%, #F4EDE0 100%);
  border:1px solid rgba(138,109,43,.20);
}
.pf-card .cover::before{                     /* official ornament, carved not pasted */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../assets/orn-fans.png') center/150% no-repeat;
  opacity:.85;
}
.pf-card .cover .mark{                       /* the destination initial, as a monogram */
  position:absolute; inset-block-start:-.18em; inset-inline-end:.12em;
  font-family:var(--font-display-lat); font-size:clamp(5.4rem,9vw,8.2rem); line-height:1;
  color:rgba(138,109,43,.13); user-select:none;
}
.pf-card .cover .label{
  position:relative; padding:clamp(16px,2vw,22px); inline-size:100%;
}
.pf-card .cover .label b{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1.35;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem); color:var(--color-heading-gold,#8A5E20);
}
.pf-card .cover .label span{
  display:block; margin-block-start:.55em; font-family:var(--font-text); font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452);
}

/* ---- 06 · Clients / Trusted by — understated bronze wordmarks, never colourful ---- */
.clients-note{ margin-block-start:var(--space-3); font-size:.86rem; color:var(--color-text-muted); max-inline-size:62ch; }

/* ---- 05B · About statistics — editorial, not dashboard ---- */
.stat-editorial{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,3vw,58px); margin-block-start:var(--space-4);
}
.stat-editorial .fig{ border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); padding-block-start:clamp(16px,1.8vw,24px); }
.stat-editorial .num{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1;
  font-size:clamp(2.6rem,1.9rem + 2.4vw,4.4rem); color:var(--color-heading-gold,#8A5E20);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat-editorial .cap{
  display:block; margin-block-start:.7em; font-family:var(--font-text); font-size:.9rem;
  line-height:1.75; color:var(--color-text-muted); max-inline-size:26ch;
}

/* footer compacted ~28% (client priority 04) — ornament, logo, navigation and
   identity all retained; only empty vertical space removed. */
.footer-editorial{ padding-block:clamp(42px,5vw,76px) !important; }
.footer-editorial .foot-mark{ inline-size:clamp(150px,15vw,196px) !important; margin-block-end:.5em !important; }
.footer-editorial .foot-tag{ margin-block-end:clamp(20px,2.4vw,30px) !important; }
.footer-editorial .foot-nav{ margin-block:clamp(16px,2vw,24px) !important; }
.footer-editorial .foot-offices{ margin-block-start:clamp(14px,1.8vw,22px) !important; line-height:1.85 !important; }
.footer-editorial .foot-rule{ margin-block:clamp(20px,2.6vw,32px) !important; }
.footer-editorial .footer-legal{ margin-block-start:0 !important; }

/* ============================================================
   TYPOGRAPHY — display headlines returned to their approved balance
   (2026-07-31, client correction: the wrong titles were enlarged).
   Hierarchy now comes from the editorial LABELS below, not from
   inflating the display type.
   ============================================================ */



/* POLISH 03 · Portfolio sector previews — two projects, then Explore More */
.pf-card[hidden]{ display:none !important; }   /* author display must not defeat [hidden] */
.pf-more{ margin-block-start:clamp(26px,3vw,44px); }
.pf-more button{
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-heading-gold,#8A5E20); background:none; border:0; cursor:pointer;
  border-block-end:1px solid rgba(138,109,43,.4); padding:0 0 4px;
}
.pf-more button:hover{ border-color:rgba(138,109,43,.9); }
.pf-more .count{ font-size:.72rem; color:var(--color-text-muted); letter-spacing:.06em; text-transform:none; }

/* POLISH 05 · Clients as editorial chips — the same language as applications and cities */
.clients-chips{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-block-start:var(--space-4); }
.clients-chips span{
  font-family:var(--font-text); font-size:.92rem; line-height:1;
  color:var(--color-bronze,#8A5E20);
  background:var(--color-bg,#FDFBF6);
  border:1px solid rgba(138,109,43,.38); border-radius:2px;
  padding:13px 24px;
}

/* EDITORIAL LABELS — القطاع · مختارات · منهجية الصنعة · خدماتنا · مشاريعنا
   These carry the hierarchy now: larger, heavier, darker bronze, and anchored
   by a short rule so a label reads as a chapter marker rather than a caption. */
.editorial .eyebrow{
  font-family:var(--font-text);
  font-size:clamp(1.25rem, 1.15rem + .27vw, 1.45rem);   /* eyebrow +15% again (client 2026-08-03) */
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--color-bronze, #8A5E20);
  display:flex; align-items:center; gap:.85em;
  margin-block-end:1.15em;
}
.editorial .eyebrow::before{
  content:""; display:block; display:block; inline-size:clamp(38px,4vw,66px); block-size:1px; flex:none;
  background:linear-gradient(to var(--_lbl,left), rgba(138,109,43,.75), rgba(138,109,43,.15));
}
[dir="ltr"] .editorial .eyebrow{ --_lbl:right; }
/* the About hero eyebrow sits on photography — keep it champagne and rule-free */
.editorial .about-hero .eyebrow{ display:block; color:var(--color-accent-champagne-on-dark); }
.editorial .about-hero .eyebrow::before{ content:none; }



.editorial .h2{
  font-size:clamp(2.1rem,1.35rem + 3.1vw,4.1rem);
  line-height:1.28;
  letter-spacing:-0.005em;
  max-inline-size:19ch;
}
.editorial .about-lede{
  font-size:clamp(1.32rem,1.06rem + 1.15vw,2.05rem);
  line-height:1.66;
  max-inline-size:34ch;
  color:var(--color-text);
  margin-block-start:var(--space-3);
}
.editorial .about-section p:not(.eyebrow):not(.about-lede):not(.about-pullquote){
  font-size:clamp(1rem,.965rem + .16vw,1.09rem);
  line-height:2.05;
}
.editorial .about-columns{ gap:clamp(32px,5vw,96px); margin-block-start:var(--space-4); }
.editorial .eyebrow{ margin-block-end:1.15em; }

/* a hairline that opens a chapter — replaces a photograph as the divider */
.chapter-rule{
  inline-size:100%; block-size:1px; border:0; margin-block:clamp(40px,5vw,88px) 0;
  background:linear-gradient(to right, transparent, var(--color-hairline, rgba(59,44,24,.18)) 22%, var(--color-hairline, rgba(59,44,24,.18)) 78%, transparent);
}

/* ---------- the one plate a section is allowed ---------- */
.plate{ margin-block-start:clamp(40px,5vw,84px); }
.plate img{ inline-size:100%; block-size:auto; display:block; }
.plate figcaption,
.plate-note{
  margin-block-start:14px; font-family:var(--font-text); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted);
}

/* ---------- quiet trigger: "see the work" ---------- */
.plate-link{
  --_g: var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--_g); line-height:1;
  margin-block-start:var(--space-3);
}
.plate-link .mark{
  inline-size:34px; block-size:34px; border-radius:50%;
  border:1px solid currentColor; opacity:.5;
  display:grid; place-items:center; flex:none;
  transition:opacity var(--motion-fast,.22s) var(--ease-out-quart,ease), transform var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.plate-link .mark svg{ inline-size:13px; block-size:13px; display:block; }
.plate-link .label{ border-block-end:1px solid transparent; padding-block-end:3px; transition:border-color var(--motion-fast,.22s) ease; }
.plate-link:hover .mark, .plate-link:focus-visible .mark{ opacity:1; transform:scale(1.06); }
.plate-link:hover .label, .plate-link:focus-visible .label{ border-block-end-color:currentColor; }
.plate-link:focus-visible{ outline:2px solid var(--_g); outline-offset:6px; }

/* on the warm-stone heritage ground the default bronze trigger reads correctly — no override needed */

/* ---------- named people: dignified, undesigned ---------- */
.roster{ margin-block-start:var(--space-4); }
.roster-group + .roster-group{ margin-block-start:clamp(32px,3.6vw,56px); }
.roster-group > h3{
  font-family:var(--font-text); font-weight:500; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne); margin:0 0 var(--space-2);
}
.roster-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,3.4vw,56px); }
@media (max-width:900px){ .roster-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .roster-list{ grid-template-columns:1fr; } }
.roster-list li{
  padding-block:clamp(14px,1.5vw,20px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
}
.roster-list b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.06rem,.98rem + .3vw,1.24rem); color:var(--color-text); line-height:1.45;
}
[dir="ltr"] .roster-list b{ font-family:var(--font-display-lat); }
.roster-list span{
  display:block; margin-block-start:5px; font-size:.86rem; line-height:1.7;
  color:var(--color-text-muted);
}
.roster-list .since{ color:var(--color-accent-champagne-deep, #8A5E20); font-variant-numeric:lining-nums; }

/* ---------- founders: two names, one vision ---------- */
.founders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(26px,3.4vw,64px); margin-block-start:clamp(36px,4.4vw,72px); }
@media (max-width:760px){ .founders{ grid-template-columns:1fr; } }
.founder{ padding-block-start:var(--space-3); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.16)); }
.founder .role{
  font-family:var(--font-text); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent-champagne); display:block; margin-block-end:12px;
}
.founder .name{
  font-family:var(--font-display-ar); font-weight:400; line-height:1.32;
  font-size:clamp(1.5rem,1.2rem + 1.35vw,2.35rem); color:var(--color-heading-gold); margin:0;
}
[dir="ltr"] .founder .name{ font-family:var(--font-display-lat); }
.founder .detail{ margin-block-start:14px; line-height:1.95; color:var(--color-text-muted); max-inline-size:34ch; }

/* ---------- process: typography first, photography as evidence ---------- */
.stage-list{ counter-reset:stage; margin-block-start:var(--space-4); }
.stage{
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(20px,2.6vw,44px);
  padding-block:clamp(24px,2.6vw,40px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
  align-items:baseline;
}
.stage:last-child{ border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.12)); }
.stage .n{
  font-family:var(--font-display-lat); font-size:.9rem; letter-spacing:.06em;
  color:var(--color-accent-champagne); line-height:1; padding-block-start:.5em;
}
.stage b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.3rem,1.08rem + .85vw,1.9rem); color:var(--color-text); line-height:1.4;
}
[dir="ltr"] .stage b{ font-family:var(--font-display-lat); }
.stage p{ margin-block-start:.6em; line-height:1.95; color:var(--color-text-muted); max-inline-size:52ch; }
@media (max-width:600px){ .stage{ grid-template-columns:1fr; gap:8px; } .stage .n{ padding-block-start:0; } }

/* ============================================================
   LIGHTBOX — discoverable imagery
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(16,12,5,.965);
  opacity:0; transition:opacity .38s var(--ease-out-quart,ease);
}
.lb[data-open]{ display:block; }
.lb.is-shown{ opacity:1; }
.lb-stage{
  position:absolute; inset:clamp(56px,7vh,96px) clamp(20px,7vw,120px) clamp(76px,10vh,120px);
  display:grid; place-items:center;
}
.lb-fig{ margin:0; max-inline-size:100%; max-block-size:100%; display:grid; place-items:center; }
.lb-fig img{
  max-inline-size:100%; max-block-size:calc(100vh - clamp(190px,22vh,260px));
  inline-size:auto; block-size:auto; display:block;
  box-shadow:0 40px 120px rgba(28,20,10,.5);
  opacity:0; transform:scale(.985);
  transition:opacity .42s var(--ease-out-quart,ease), transform .42s var(--ease-out-quart,ease);
}
.lb.is-shown .lb-fig img{ opacity:1; transform:none; }
.lb-cap{
  position:absolute; inset-inline:0; inset-block-end:clamp(26px,4vh,46px);
  text-align:center; color:rgba(248,245,239,.8);
  font-family:var(--font-text); font-size:.82rem; line-height:1.7; padding-inline:24px;
}
.lb-cap .idx{
  display:block; margin-block-end:8px; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-hero-gold,#E4B65E);
}
.lb-close, .lb-nav{
  position:absolute; background:none; border:0; cursor:pointer; padding:0;
  color:rgba(248,245,239,.72); display:grid; place-items:center;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-close{
  inset-block-start:clamp(16px,2.6vh,30px); inset-inline-end:clamp(16px,3vw,40px);
  inline-size:46px; block-size:46px; border:1px solid rgba(248,245,239,.24); border-radius:50%;
}
.lb-nav{
  inset-block-start:50%; transform:translateY(-50%);
  inline-size:52px; block-size:52px; border:1px solid rgba(248,245,239,.2); border-radius:50%;
}
.lb-prev{ inset-inline-start:clamp(10px,2.2vw,34px); }
.lb-next{ inset-inline-end:clamp(10px,2.2vw,34px); }
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible{ color:#F8F5EF; border-color:rgba(248,245,239,.7); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.lb-close svg, .lb-nav svg{ inline-size:17px; block-size:17px; }
.lb-nav[hidden]{ display:none; }
/* arrows follow writing direction */
[dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg{ transform:scaleX(-1); }
body.lb-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .lb, .lb-fig img{ transition:none; }
  .lb-fig img{ opacity:1; transform:none; }
}

/* ============================================================
   SHARED CHROME REFINEMENT (client direction 2026-07-28, §08–09)
   Philosophy extracted from reference: ivory ground, bronze type,
   centered mark, symmetry, minimal links, air. Not copied.
   Additive classes — main.css baseline untouched.
   ============================================================ */

/* ---------- navigation: quieter, fewer, more air ---------- */
.header-editorial .header-inner{ min-block-size:104px; }
.header-editorial.is-condensed .header-inner{ min-block-size:84px; }
.header-editorial .primary-nav{ gap:clamp(22px,3vw,44px); }
.header-editorial .primary-nav a{
  font-size:.86rem; letter-spacing:.04em; color:var(--color-text);
  opacity:.82; transition:opacity var(--motion-fast,.2s) ease;
}
.header-editorial .primary-nav a:hover,
.header-editorial .primary-nav a:focus-visible,
.header-editorial .primary-nav a[aria-current="page"]{ opacity:1; }
.header-editorial .primary-nav a[aria-current="page"]::after{ inline-size:100%; }
.header-editorial .brand .brand-since{ opacity:.85; }

/* ---------- footer: centered mark, one line of links, air ---------- */
.footer-editorial{
  background:var(--color-bg-base); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block:clamp(44px,5vw,78px);
  text-align:center; font-size:.85rem;
}
.footer-editorial .foot-mark{ inline-size:clamp(160px,18vw,230px); block-size:auto; margin-inline:auto; display:block; }
.footer-editorial .foot-brand{
  font-family:var(--font-display-ar); font-size:clamp(1.25rem,1.05rem + .8vw,1.8rem);
  color:var(--color-heading-gold); margin-block:var(--space-3) 0; line-height:1.5;
}
[dir="ltr"] .footer-editorial .foot-brand{ font-family:var(--font-display-lat); }
.footer-editorial .foot-tag{
  margin-block-start:10px; color:var(--color-text-muted);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
}
.footer-editorial .foot-nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,2.6vw,40px);
  margin-block-start:clamp(30px,3.6vw,54px);
}
.footer-editorial .foot-nav a{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-functional); padding-block:4px; position:relative;
}
.footer-editorial .foot-nav a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  inline-size:0; block-size:1px; background:currentColor;
  transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.footer-editorial .foot-nav a:hover::after, .footer-editorial .foot-nav a:focus-visible::after{ inline-size:100%; }
.footer-editorial .foot-offices{
  margin-block-start:clamp(26px,3vw,44px); color:var(--color-text-muted); line-height:2;
  max-inline-size:64ch; margin-inline:auto;
}
.footer-editorial .foot-offices b{ color:var(--color-text); font-weight:500; }
.footer-editorial .foot-rule{
  inline-size:min(220px,40%); block-size:1px; border:0; margin:clamp(30px,3.6vw,54px) auto 0;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne, #C29F63), transparent);
  opacity:.55;
}
.footer-editorial .footer-legal{
  justify-content:center; border-block-start:0; margin-block-start:clamp(18px,2vw,28px);
  padding-block-start:0; font-size:.7rem; color:var(--color-text-muted); letter-spacing:.06em;
}

/* ============================================================
   CENTERED HEADER + MOBILE DRAWER (final refinement 2026-07-28)
   Centered mark, flanking minimal navigation. Logo is the centerpiece.
   ============================================================ */
.header-centered .header-c-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-block-size:118px; gap:clamp(14px,2vw,32px); position:relative;
}
.site-header.header-centered.is-condensed .header-c-inner{ min-block-size:92px; }
.header-centered .nav-side{ display:flex; gap:clamp(13px,1.7vw,26px); align-items:center; }
.header-centered .nav-s{ justify-self:end; }
.header-centered .nav-e{ justify-self:start; }
[dir="ltr"] .header-centered .nav-s{ justify-self:end; }
[dir="ltr"] .header-centered .nav-e{ justify-self:start; }
.header-centered .nav-side a{
  font-family:var(--font-text); font-size:.8rem; white-space:nowrap; letter-spacing:.06em;
  color:var(--color-text); opacity:.82; padding-block:6px; position:relative;
  transition:opacity var(--motion-fast,.2s) ease;
}
.header-centered .nav-side a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:0; block-size:1px;
  background:var(--color-accent-champagne-deep); transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.header-centered .nav-side a:hover, .header-centered .nav-side a:focus-visible,
.header-centered .nav-side a[aria-current="page"]{ opacity:1; }
.header-centered .nav-side a:hover::after, .header-centered .nav-side a[aria-current="page"]::after{ inline-size:100%; }
.header-centered .nav-side .lang-toggle{ opacity:.7; letter-spacing:.14em; }
.brand-center{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; line-height:1.2; }
.brand-center .brand-logo{ inline-size:auto; block-size:44px; transition:block-size var(--motion-base,.3s) var(--ease-in-out,ease); }
.site-header.is-condensed .brand-center .brand-logo{ block-size:34px; }
.brand-center .brand-name{ font-family:var(--font-display-ar); font-size:1.06rem; color:var(--color-text); }
[dir="ltr"] .brand-center .brand-name{ font-family:var(--font-display-lat); }
.brand-center .brand-since{ font-size:.6rem; letter-spacing:.22em; color:var(--color-accent-champagne-deep); text-transform:uppercase; }
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); display:none; }
@media (max-width:880px){
  .header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:96px; }
  .header-centered .nav-side{ display:none; }
  .brand-center{ justify-self:center; }
  .header-centered .nav-burger{ display:flex; }
}

/* ---------- mobile drawer: quiet ivory panel ---------- */
.nav-drawer{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:900;
  inline-size:min(340px,86vw); block-size:100dvh;
  background:var(--color-bg-base,#FBF7EC); border-inline-end:1px solid var(--color-hairline, rgba(59,44,24,.14));
  box-shadow:-24px 0 80px rgba(20,14,5,.16);
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(84px,14vh,120px) clamp(26px,7vw,40px) 40px;
  transform:translateX(102%);           /* panel lives at the inline-start edge (AR right / EN left); +102% is the RTL hide, mirrored for LTR at the end of this file */
  transition:transform .34s var(--ease-out-quart,ease);
}
.nav-drawer[hidden]{ display:none; }    /* display:flex must not defeat the hidden attribute */
.nav-drawer.is-open{ transform:none; }
.nav-drawer a{
  font-family:var(--font-display-ar); font-size:1.35rem; color:var(--color-text);
  padding-block:14px; border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.1));
}
[dir="ltr"] .nav-drawer a{ font-family:var(--font-display-lat); }
.nav-drawer a[aria-current="page"]{ color:var(--color-heading-gold); }
.nav-drawer .lang-toggle{ font-family:var(--font-text); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-champagne-deep); border-block-end:0; margin-block-start:8px; }
body.drawer-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .nav-drawer{ transition:none; } }

/* ---------- footer: flanking ornaments (subtle, champagne line-work) ---------- */
.foot-mark-row{ display:flex; align-items:center; justify-content:center; gap:clamp(22px,4vw,48px); }
.foot-orn{ inline-size:clamp(40px,4.6vw,60px); block-size:auto; color:var(--color-accent-champagne); opacity:.42; flex:none; }
@media (max-width:560px){ .foot-orn{ display:none; } }

/* ============================================================
   HOMEPAGE EDITORIAL AIR (final corrections 2026-07-28 §04)
   Calmer rhythm: more breathing room, typography more prominent.
   Additive — no structural change to the locked sections.
   ============================================================ */
.making, .crafts, .languages, .sectors{ padding-block:clamp(72px,8vw,148px); }
.making .h2, .crafts .h2, .languages .h2, .sectors .h2{
  font-size:clamp(2rem,1.3rem + 2.9vw,3.8rem); line-height:1.28; max-inline-size:20ch;
}
.making .standfirst, .crafts .standfirst, .languages .standfirst, .sectors .standfirst{ margin-block-start:var(--space-2); }
.lang-grid{ gap:clamp(18px,2.4vw,34px); }

/* ============================================================
   FINAL POLISH (client 2026-07-28): burger-only header.
   Navigation lives entirely in the drawer; the centered mark,
   flanked by whisper-subtle champagne ornaments, is the focus.
   ============================================================ */
.header-centered .nav-side{ display:none !important; }
.header-centered .nav-burger{ display:flex; flex-direction:column; justify-content:center; }
.header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:112px; }
.header-centered .brand-center{ justify-self:center; }
/* ornament medallions flanking the wordmark — champagne line-work, very subtle */
.hdr-orn-row{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.hdr-orn{ inline-size:clamp(26px,2.6vw,36px); block-size:auto; color:var(--color-accent-champagne); opacity:.38; flex:none; }
@media (max-width:560px){ .hdr-orn{ display:none; } }
/* burger pinned to the inline-end of the header on all widths */
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); }

/* client's own rosette ornament (from the approved pattern reference) stretching beside the mark */
.hdr-orn-row .hdr-orn{ inline-size:clamp(26px,2.6vw,34px); block-size:auto; opacity:.62; }
.orn-rule{ flex:none; block-size:1px; inline-size:clamp(28px,5vw,96px);
  background:var(--color-accent-champagne); opacity:.32; }
@media (max-width:560px){ .orn-rule{ display:none; } }

/* QA fix 2026-07-29: the generic .editorial eyebrow margin was overriding the About-hero label lift
   (equal specificity, later cascade). This wins: the label sits well clear of the headline. */
.editorial .about-hero .eyebrow{ margin-block-end:clamp(56px,8vw,110px); }

/* ============================================================
   ORNAMENT WATERMARK SYSTEM (prepared 2026-07-29 — awaiting the
   client's official ornament, Open Item V). The ornament becomes
   an architectural watermark carved into the page, never pasted:
   set --orn-url once the official asset arrives and add
   .orn-watermark to any chapter section. Ivory + champagne,
   soft-light emboss, extremely subtle.
   ============================================================ */
:root{ --orn-url:none; }  /* e.g. url("../assets/ornament-official.png") */
.orn-watermark{ position:relative; }
.orn-watermark::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--orn-url);
  background-repeat:no-repeat; background-position:var(--orn-pos, calc(100% + 120px) center);
  background-size:var(--orn-size, min(46vw, 560px));
  mix-blend-mode:soft-light; opacity:var(--orn-opacity, .16);
  filter:sepia(.4) hue-rotate(-8deg) saturate(.7);
}
.orn-watermark > *{ position:relative; z-index:1; }

/* ============================================================
   HORIZONTAL PROCESS TIMELINE (final homepage lock 2026-07-29)
   The homepage previews the workflow typographically; stage
   photography lives in the Service pages.
   ============================================================ */
.timeline-h{
  list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px) 0;
}
.timeline-h li{
  font-family:var(--font-display-ar); font-weight:400; white-space:nowrap;
  font-size:clamp(1.1rem,.95rem + .8vw,1.7rem); color:var(--color-heading-gold);
}
[dir="ltr"] .timeline-h li{ font-family:var(--font-display-lat); }
.timeline-h li + li::before{
  content:""; display:inline-block; vertical-align:middle;
  inline-size:clamp(22px,3.4vw,64px); block-size:1px;
  background:var(--color-accent-champagne); opacity:.55;
  margin-inline:clamp(10px,1.6vw,26px);
}
@media (max-width:640px){
  .timeline-h{ flex-direction:column; align-items:flex-start; gap:6px; }
  .timeline-h li + li::before{ inline-size:1px; block-size:18px; margin-inline:0; margin-block:2px 4px; display:block; margin-inline-start:2px; }
}

/* ============================================================
   FEATURED WORK — balanced editorial pair (client 2026-07-29)
   Two identical cards, generous air, neither dominant.
   ============================================================ */
.glimpse{ padding-block:clamp(84px,10vw,180px); }
.featured-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,72px);
  margin-block-start:clamp(44px,5.5vw,84px);
  max-inline-size:min(1160px,100%); margin-inline:auto;
}
.featured-pair .glimpse-item{ margin:0; inline-size:100%; }
.featured-pair .frame{ display:block; aspect-ratio:4/3; overflow:hidden; }
.featured-pair .frame img{ inline-size:100%; block-size:100%; object-fit:cover; }
@media (max-width:720px){ .featured-pair{ grid-template-columns:1fr; gap:clamp(36px,8vw,56px); } }

/* ============================================================
   FEATURED WORK — magazine rows (client-approved reference, 2026-07-29)
   Two identical editorial rows: text panel + image, alternating sides.
   ============================================================ */
.fw-head{ text-align:center; max-inline-size:62ch; margin-inline:auto; }
.fw-head .h2{ margin-inline:auto; max-inline-size:none; }
.fw-sub{ margin-block-start:var(--space-2); color:var(--color-text-muted); font-size:1rem; }
.fw-row{
  display:grid; grid-template-columns:minmax(280px,1fr) 2.2fr; align-items:stretch;
  margin-block-start:clamp(44px,5.5vw,84px);
}
.fw-row.alt{ grid-template-columns:2.2fr minmax(280px,1fr); }
.fw-row.alt .fw-text{ order:2; }
.fw-row.alt .fw-img{ order:1; }
.fw-text{
  background:var(--color-stone, #EFE9DF); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.6vw,64px);
}
.fw-text h3{
  font-family:var(--font-display-ar); font-weight:400; color:var(--color-text);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); line-height:1.3; margin:0 0 .55em;
}
[dir="ltr"] .fw-text h3{ font-family:var(--font-display-lat); }
.fw-desc{ color:var(--color-text-muted); line-height:1.95; max-inline-size:34ch; margin:0 0 1.4em; }
.fw-img{ block-size:clamp(300px,34vw,480px); overflow:hidden; }
.fw-img img{ inline-size:100%; block-size:100%; object-fit:cover; }
.fw-link{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:8px;
  border-block-end:1px solid transparent; padding-block-end:3px; align-self:flex-start;
  transition:border-color var(--motion-fast,.22s) ease;
}
.fw-link:hover, .fw-link:focus-visible{ border-block-end-color:currentColor; }
.fw-more{ text-align:center; margin-block-start:clamp(44px,5.5vw,84px); }
.fw-more .fw-link{ font-size:.84rem; }
@media (max-width:820px){
  .fw-row, .fw-row.alt{ grid-template-columns:1fr; }
  .fw-row .fw-img, .fw-row.alt .fw-img{ order:1; block-size:clamp(220px,52vw,360px); }
  .fw-row .fw-text, .fw-row.alt .fw-text{ order:2; }
}

/* ============================================================
   OFFICIAL AL ARABI ORNAMENT SYSTEM (client 2026-07-29)
   The official carved-gypsum patterns as embossed atmosphere:
   warm-bronze ridges at 3–8% alpha (baked into the assets),
   carved into the page — never pasted, never touching content.
   One vocabulary, everywhere. Replaces all drawn SVG ornaments.
   ============================================================ */
/* manifesto — diamond linework replaces the old photo overlay */
.manifesto::before{
  background:url("../assets/orn-diamond.png") center/cover no-repeat;
  mix-blend-mode:normal; opacity:1; filter:none;
}
/* heritage chapter — fan palmettes on the warm stone; the drawn medallion is retired */
.heritage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-fans.png") center/cover no-repeat;
}
.heritage-ornament{ display:none; }
/* footer — the pierced floral lattice, barely there */
.footer-editorial{ position:relative; overflow:hidden; }
.footer-editorial::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-lattice.png") center top / min(640px,80vw) repeat;
}
.footer-editorial > .container{ position:relative; z-index:1; }
.footer-editorial p{ max-inline-size:none; margin-inline:auto; }
.footer-editorial .foot-offices{ max-inline-size:64ch; }
/* commission CTA — chevron relief on ivory (appears on every page) */
.commission{ position:relative; overflow:hidden; }
.commission::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-chevron.png") center/cover no-repeat;
}
.commission > .container{ position:relative; z-index:1; }
/* inner-page opening section — a feather-shingle corner watermark, clear of the text column */
.editorial > .about-section:first-child{ position:relative; overflow:hidden; }
.editorial > .about-section:first-child::before{
  content:""; position:absolute; inset-block-start:-30px; inset-inline-end:-70px;
  inline-size:min(44vw,520px); aspect-ratio:445/330; pointer-events:none;
  background:url("../assets/orn-feather.png") center/contain no-repeat;
}
.editorial > .about-section:first-child .container{ position:relative; z-index:1; }
/* utility divider for future pages — the radial sunburst medallion */
.orn-divider{
  display:block; inline-size:56px; aspect-ratio:225/255; margin:clamp(30px,4vw,56px) auto;
  background:url("../assets/orn-sunburst.png") center/contain no-repeat;
}

/* ============================================================
   TEAM PHOTOGRAPHY — natural on the ivory page (client 2026-07-29)
   No dark containers. Clean editorial crops, a whisper of
   champagne mount — like prints mounted in a monograph.
   ============================================================ */
.team-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,44px);
  margin-block-start:clamp(40px,5vw,72px);
}
@media (max-width:760px){ .team-row{ grid-template-columns:1fr; } }
.team-fig{ margin:0; }
.team-fig .mount{
  display:block; padding:clamp(8px,1vw,14px); background:var(--color-bg-base,#FBF7EC);
  border:1px solid var(--color-accent-champagne,#C29F63);
}
.team-fig .mount img{
  inline-size:100%; block-size:auto; aspect-ratio:4/5; object-fit:cover; display:block;
}
.team-fig figcaption{
  margin-block-start:12px; font-family:var(--font-text); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); text-align:center;
}

/* ============================================================
   PROCESS TIMELINE — architectural drafting composition
   (final homepage refinement, client 2026-07-29)
   The section sits on a faint drafting sheet: compass circles,
   construction ticks, proportional guides — bronze at ~3-4%,
   discovered rather than seen. The six stages are joined by one
   fine bronze line through compass-circle nodes: craftsmanship
   as a continuous, measured process.
   ============================================================ */
.making{ position:relative; overflow:hidden; }
.making::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640'><g fill='none' stroke='rgb(138,109,43)' stroke-opacity='0.045' stroke-width='1'><circle cx='1050' cy='300' r='250'/><circle cx='1050' cy='300' r='178'/><circle cx='1050' cy='300' r='96'/><line x1='1050' y1='20' x2='1050' y2='580'/><line x1='770' y1='300' x2='1330' y2='300'/><line x1='860' y1='110' x2='1240' y2='490'/><line x1='1240' y1='110' x2='860' y2='490'/><g stroke-opacity='0.06'><line x1='1050' y1='46' x2='1050' y2='58'/><line x1='1050' y1='542' x2='1050' y2='554'/><line x1='796' y1='300' x2='808' y2='300'/><line x1='1292' y1='300' x2='1304' y2='300'/></g><circle cx='240' cy='430' r='120'/><circle cx='240' cy='430' r='58'/><line x1='90' y1='430' x2='390' y2='430'/><line x1='240' y1='280' x2='240' y2='580'/><line x1='60' y1='80' x2='1340' y2='80' stroke-opacity='0.035'/><line x1='60' y1='560' x2='1340' y2='560' stroke-opacity='0.035'/><line x1='432' y1='40' x2='432' y2='600' stroke-opacity='0.03'/><line x1='866' y1='40' x2='866' y2='600' stroke-opacity='0.03'/></g></svg>");
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* the official sunburst medallion emerging from the construction circle — ornament fragment blended into the drafting sheet */
.making::after{
  content:''; position:absolute; pointer-events:none;
  inset-block-start:12%; inset-inline-start:66%; inline-size:min(24vw,300px); aspect-ratio:640/725;
  background:url('../assets/orn-sunburst-faint.png') center/contain no-repeat;
}
.making > .container{ position:relative; z-index:1; }

/* the six stages — compass nodes on one continuous bronze line */
.timeline-h{
  position:relative; justify-content:space-between;
  padding-block-start:44px; margin-block-start:clamp(40px,5vw,64px);
}
.timeline-h::before{
  content:""; position:absolute; inset-block-start:9px; inset-inline:1%;
  block-size:1px;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent);
  opacity:.5;
}
.timeline-h li{ position:relative; text-align:center; }
.timeline-h li::after{
  content:""; position:absolute; inset-block-start:-42px; inset-inline-start:calc(50% - 9px);
  inline-size:18px; block-size:18px; border-radius:50%;
  border:1px solid var(--color-accent-champagne-deep,#8A5E20); opacity:.75;
  background:
    radial-gradient(circle at center, var(--color-accent-champagne-deep,#8A5E20) 1.6px, transparent 2.2px),
    var(--color-bg-base,#FBF7EC);
}
/* the old dash separators retire — the construction line is the connection now */
.timeline-h li + li::before{ display:none; }
@media (max-width:640px){
  .timeline-h{ padding-block-start:0; padding-inline-start:30px; }
  .timeline-h::before{ inset-inline:auto; inset-inline-start:8px; inset-block:6px 6px; inline-size:1px; block-size:auto;
    background:linear-gradient(to bottom, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent); }
  .timeline-h li{ text-align:start; }
  .timeline-h li::after{ inset-block-start:calc(50% - 9px); inset-inline-start:-30px; }
}

/* ---- Applications as editorial labels, not UI chips (final service review, 2026-07-30) ----
   Bronze hairline + bronze type on ivory, square-cut. Scoped to service pages via .chips-editorial
   so the locked About page keeps its original chips. No letter-spacing in RTL (connected script). */
.editorial .reach-cities.chips-editorial span{
  border:1px solid rgba(138,109,43,.38);
  color:var(--color-bronze, #8A5E20);
  background:var(--color-bg, #FDFBF6);
  border-radius:2px;
  padding:10px 24px;
  font-size:.9rem;
}
[dir="ltr"] .editorial .reach-cities.chips-editorial span{ letter-spacing:.04em; }

/* ---- Service chapter pager (client UX directive 2026-07-30) ----
   Services behave like chapters of one publication: every service page carries
   previous/next links to its neighbouring crafts so a visitor never returns to
   the homepage to change chapter. Logical properties keep it RTL/LTR correct. */
.svc-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,48px);
  margin-block-start:clamp(44px,6vw,86px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block-start:clamp(22px,3vw,38px);
}
.svc-pager a{ text-decoration:none; display:block; }
.svc-pager .dir{
  display:block; font-family:var(--font-text); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep, #A58452); margin-block-end:.7em;
}
.svc-pager b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem); line-height:1.4; color:var(--color-heading-gold, #8A5E20);
}
.svc-pager .en{ display:block; font-family:var(--font-text); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-text-muted); margin-block-start:.5em; }
.svc-pager .next{ text-align:end; }
.svc-pager .prev{ text-align:start; }
.svc-pager a:hover b{ color:var(--color-text); }
@media (max-width:640px){ .svc-pager{ grid-template-columns:1fr; row-gap:26px; }
  .svc-pager .next, .svc-pager .prev{ text-align:start; } }

/* ---- Portfolio: sector chapters + project roster (2026-07-30) ----
   Names are the only thing that changes when approvals land; the layout never does.
   Confidential and pending entries are first-class citizens, not gaps. */
.pf-index{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-block-start:var(--space-3); }
.pf-index a{ font-family:var(--font-text); font-size:.9rem; text-decoration:none;
  color:var(--color-bronze,#8A5E20); border:1px solid rgba(138,109,43,.38); background:var(--color-bg,#FDFBF6);
  border-radius:2px; padding:10px 22px; }
.pf-index a:hover{ border-color:rgba(138,109,43,.7); }
.pf-roster{ margin-block-start:var(--space-4); }
.pf-item{ display:grid; grid-template-columns:1fr auto; gap:8px clamp(16px,2.4vw,40px); align-items:baseline;
  padding-block:clamp(15px,1.7vw,24px); border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); }
.pf-item:first-child{ border-block-start:0; }
.pf-item b{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.1rem,.98rem + .6vw,1.45rem);
  color:var(--color-text); line-height:1.45; }
.pf-item .city{ display:block; font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); margin-block-start:.45em; }
.pf-item .tag{ font-family:var(--font-text); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep,#A58452); white-space:nowrap; }
.pf-item.is-held b{ color:var(--color-heading-gold,#8A5E20); }
@media (max-width:560px){ .pf-item{ grid-template-columns:1fr; } .pf-item .tag{ white-space:normal; } }

/* ---- Portfolio project cards (client refinement 2026-07-30) ----
   Every project is a real editorial card: image (or an honest pending tile),
   title, city, sector, the crafts involved, and a View Project link.
   Only the card DESTINATION changes when detail pages ship. */
.pf-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(26px,3.2vw,54px); margin-block-start:var(--space-4); }
.pf-card{ display:flex; flex-direction:column; }
.pf-card .shot{ position:relative; overflow:hidden; background:var(--color-bg-muted); aspect-ratio:4/3; }
.pf-card .shot img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.pf-card .pending{ display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid rgba(138,109,43,.30); background:var(--color-bg,#FDFBF6); }
.pf-card .pending span{ font-family:var(--font-text); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); padding:0 18px; line-height:1.9; }
.pf-card h3{ font-family:var(--font-display-ar); font-weight:400; line-height:1.4;
  font-size:clamp(1.12rem,1rem + .6vw,1.48rem); color:var(--color-text); margin-block:1em .1em; }
.pf-card.is-held h3{ color:var(--color-heading-gold,#8A5E20); }
.pf-card .where{ font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); }
.pf-card .state{ display:block; font-family:var(--font-text); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); margin-block-start:.85em; }
.pf-crafts{ display:flex; flex-wrap:wrap; gap:7px 8px; margin-block-start:.95em; }
.pf-crafts a{ font-family:var(--font-text); font-size:.72rem; text-decoration:none; color:var(--color-bronze,#8A5E20);
  border:1px solid rgba(138,109,43,.34); border-radius:2px; padding:6px 13px; background:var(--color-bg,#FDFBF6); }
.pf-crafts a:hover{ border-color:rgba(138,109,43,.7); }
.pf-card .go{ margin-block-start:auto; padding-block-start:1.1em; }
.pf-card .go a{ font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--color-heading-gold,#8A5E20); border-block-end:1px solid rgba(138,109,43,.4); padding-block-end:3px; }
.pf-card .go a:hover{ border-color:rgba(138,109,43,.9); }

/* ---- 03 · Editorial project covers (replaces "photography pending" tiles) ----
   An ornament-and-type cover in the house language. It is an editorial introduction
   to the destination — never presented as Al Arabi execution photography.
   When official project photography arrives, only the cover is swapped: the card
   never changes. */
.pf-card .cover{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(138,109,43,.075) 0%, transparent 62%),
    linear-gradient(160deg, #FBF7EE 0%, #F4EDE0 100%);
  border:1px solid rgba(138,109,43,.20);
}
.pf-card .cover::before{                     /* official ornament, carved not pasted */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../assets/orn-fans.png') center/150% no-repeat;
  opacity:.85;
}
.pf-card .cover .mark{                       /* the destination initial, as a monogram */
  position:absolute; inset-block-start:-.18em; inset-inline-end:.12em;
  font-family:var(--font-display-lat); font-size:clamp(5.4rem,9vw,8.2rem); line-height:1;
  color:rgba(138,109,43,.13); user-select:none;
}
.pf-card .cover .label{
  position:relative; padding:clamp(16px,2vw,22px); inline-size:100%;
}
.pf-card .cover .label b{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1.35;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem); color:var(--color-heading-gold,#8A5E20);
}
.pf-card .cover .label span{
  display:block; margin-block-start:.55em; font-family:var(--font-text); font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452);
}

/* ---- 06 · Clients / Trusted by — understated bronze wordmarks, never colourful ---- */
.clients-note{ margin-block-start:var(--space-3); font-size:.86rem; color:var(--color-text-muted); max-inline-size:62ch; }

/* ---- 05B · About statistics — editorial, not dashboard ---- */
.stat-editorial{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,3vw,58px); margin-block-start:var(--space-4);
}
.stat-editorial .fig{ border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); padding-block-start:clamp(16px,1.8vw,24px); }
.stat-editorial .num{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1;
  font-size:clamp(2.6rem,1.9rem + 2.4vw,4.4rem); color:var(--color-heading-gold,#8A5E20);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat-editorial .cap{
  display:block; margin-block-start:.7em; font-family:var(--font-text); font-size:.9rem;
  line-height:1.75; color:var(--color-text-muted); max-inline-size:26ch;
}

/* footer compacted ~28% (client priority 04) — ornament, logo, navigation and
   identity all retained; only empty vertical space removed. */
.footer-editorial{ padding-block:clamp(42px,5vw,76px) !important; }
.footer-editorial .foot-mark{ inline-size:clamp(150px,15vw,196px) !important; margin-block-end:.5em !important; }
.footer-editorial .foot-tag{ margin-block-end:clamp(20px,2.4vw,30px) !important; }
.footer-editorial .foot-nav{ margin-block:clamp(16px,2vw,24px) !important; }
.footer-editorial .foot-offices{ margin-block-start:clamp(14px,1.8vw,22px) !important; line-height:1.85 !important; }
.footer-editorial .foot-rule{ margin-block:clamp(20px,2.6vw,32px) !important; }
.footer-editorial .footer-legal{ margin-block-start:0 !important; }

/* ============================================================
   TYPOGRAPHY — display headlines returned to their approved balance
   (2026-07-31, client correction: the wrong titles were enlarged).
   Hierarchy now comes from the editorial LABELS below, not from
   inflating the display type.
   ============================================================ */



/* POLISH 03 · Portfolio sector previews — two projects, then Explore More */
.pf-card[hidden]{ display:none !important; }   /* author display must not defeat [hidden] */
.pf-more{ margin-block-start:clamp(26px,3vw,44px); }
.pf-more button{
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-heading-gold,#8A5E20); background:none; border:0; cursor:pointer;
  border-block-end:1px solid rgba(138,109,43,.4); padding:0 0 4px;
}
.pf-more button:hover{ border-color:rgba(138,109,43,.9); }
.pf-more .count{ font-size:.72rem; color:var(--color-text-muted); letter-spacing:.06em; text-transform:none; }

/* POLISH 05 · Clients as editorial chips — the same language as applications and cities */
.clients-chips{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-block-start:var(--space-4); }
.clients-chips span{
  font-family:var(--font-text); font-size:.92rem; line-height:1;
  color:var(--color-bronze,#8A5E20);
  background:var(--color-bg,#FDFBF6);
  border:1px solid rgba(138,109,43,.38); border-radius:2px;
  padding:13px 24px;
}

/* EDITORIAL LABELS — القطاع · مختارات · منهجية الصنعة · خدماتنا · مشاريعنا
   These carry the hierarchy now: larger, heavier, darker bronze, and anchored
   by a short rule so a label reads as a chapter marker rather than a caption. */
.editorial .eyebrow{
  font-family:var(--font-text);
  font-size:clamp(1.25rem, 1.15rem + .27vw, 1.45rem);   /* eyebrow +15% again (client 2026-08-03) */
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--color-bronze, #8A5E20);
  display:flex; align-items:center; gap:.85em;
  margin-block-end:1.15em;
}
.editorial .eyebrow::before{
  content:""; display:block; display:block; inline-size:clamp(38px,4vw,66px); block-size:1px; flex:none;
  background:linear-gradient(to var(--_lbl,left), rgba(138,109,43,.75), rgba(138,109,43,.15));
}
[dir="ltr"] .editorial .eyebrow{ --_lbl:right; }
/* the About hero eyebrow sits on photography — keep it champagne and rule-free */
.editorial .about-hero .eyebrow{ display:block; color:var(--color-accent-champagne-on-dark); }
.editorial .about-hero .eyebrow::before{ content:none; }



.editorial .h2{
  font-size:clamp(2.1rem,1.35rem + 3.1vw,4.1rem);
  line-height:1.28;
  letter-spacing:-0.005em;
  max-inline-size:19ch;
}
.editorial .about-lede{
  font-size:clamp(1.32rem,1.06rem + 1.15vw,2.05rem);
  line-height:1.66;
  max-inline-size:34ch;
  color:var(--color-text);
  margin-block-start:var(--space-3);
}
.editorial .about-section p:not(.eyebrow):not(.about-lede):not(.about-pullquote){
  font-size:clamp(1rem,.965rem + .16vw,1.09rem);
  line-height:2.05;
}
.editorial .about-columns{ gap:clamp(32px,5vw,96px); margin-block-start:var(--space-4); }
.editorial .eyebrow{ margin-block-end:1.15em; }

/* a hairline that opens a chapter — replaces a photograph as the divider */
.chapter-rule{
  inline-size:100%; block-size:1px; border:0; margin-block:clamp(40px,5vw,88px) 0;
  background:linear-gradient(to right, transparent, var(--color-hairline, rgba(59,44,24,.18)) 22%, var(--color-hairline, rgba(59,44,24,.18)) 78%, transparent);
}

/* ---------- the one plate a section is allowed ---------- */
.plate{ margin-block-start:clamp(40px,5vw,84px); }
.plate img{ inline-size:100%; block-size:auto; display:block; }
.plate figcaption,
.plate-note{
  margin-block-start:14px; font-family:var(--font-text); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted);
}

/* ---------- quiet trigger: "see the work" ---------- */
.plate-link{
  --_g: var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--_g); line-height:1;
  margin-block-start:var(--space-3);
}
.plate-link .mark{
  inline-size:34px; block-size:34px; border-radius:50%;
  border:1px solid currentColor; opacity:.5;
  display:grid; place-items:center; flex:none;
  transition:opacity var(--motion-fast,.22s) var(--ease-out-quart,ease), transform var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.plate-link .mark svg{ inline-size:13px; block-size:13px; display:block; }
.plate-link .label{ border-block-end:1px solid transparent; padding-block-end:3px; transition:border-color var(--motion-fast,.22s) ease; }
.plate-link:hover .mark, .plate-link:focus-visible .mark{ opacity:1; transform:scale(1.06); }
.plate-link:hover .label, .plate-link:focus-visible .label{ border-block-end-color:currentColor; }
.plate-link:focus-visible{ outline:2px solid var(--_g); outline-offset:6px; }

/* on the warm-stone heritage ground the default bronze trigger reads correctly — no override needed */

/* ---------- named people: dignified, undesigned ---------- */
.roster{ margin-block-start:var(--space-4); }
.roster-group + .roster-group{ margin-block-start:clamp(32px,3.6vw,56px); }
.roster-group > h3{
  font-family:var(--font-text); font-weight:500; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne); margin:0 0 var(--space-2);
}
.roster-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,3.4vw,56px); }
@media (max-width:900px){ .roster-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .roster-list{ grid-template-columns:1fr; } }
.roster-list li{
  padding-block:clamp(14px,1.5vw,20px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
}
.roster-list b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.06rem,.98rem + .3vw,1.24rem); color:var(--color-text); line-height:1.45;
}
[dir="ltr"] .roster-list b{ font-family:var(--font-display-lat); }
.roster-list span{
  display:block; margin-block-start:5px; font-size:.86rem; line-height:1.7;
  color:var(--color-text-muted);
}
.roster-list .since{ color:var(--color-accent-champagne-deep, #8A5E20); font-variant-numeric:lining-nums; }

/* ---------- founders: two names, one vision ---------- */
.founders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(26px,3.4vw,64px); margin-block-start:clamp(36px,4.4vw,72px); }
@media (max-width:760px){ .founders{ grid-template-columns:1fr; } }
.founder{ padding-block-start:var(--space-3); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.16)); }
.founder .role{
  font-family:var(--font-text); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent-champagne); display:block; margin-block-end:12px;
}
.founder .name{
  font-family:var(--font-display-ar); font-weight:400; line-height:1.32;
  font-size:clamp(1.5rem,1.2rem + 1.35vw,2.35rem); color:var(--color-heading-gold); margin:0;
}
[dir="ltr"] .founder .name{ font-family:var(--font-display-lat); }
.founder .detail{ margin-block-start:14px; line-height:1.95; color:var(--color-text-muted); max-inline-size:34ch; }

/* ---------- process: typography first, photography as evidence ---------- */
.stage-list{ counter-reset:stage; margin-block-start:var(--space-4); }
.stage{
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(20px,2.6vw,44px);
  padding-block:clamp(24px,2.6vw,40px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
  align-items:baseline;
}
.stage:last-child{ border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.12)); }
.stage .n{
  font-family:var(--font-display-lat); font-size:.9rem; letter-spacing:.06em;
  color:var(--color-accent-champagne); line-height:1; padding-block-start:.5em;
}
.stage b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.3rem,1.08rem + .85vw,1.9rem); color:var(--color-text); line-height:1.4;
}
[dir="ltr"] .stage b{ font-family:var(--font-display-lat); }
.stage p{ margin-block-start:.6em; line-height:1.95; color:var(--color-text-muted); max-inline-size:52ch; }
@media (max-width:600px){ .stage{ grid-template-columns:1fr; gap:8px; } .stage .n{ padding-block-start:0; } }

/* ============================================================
   LIGHTBOX — discoverable imagery
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(16,12,5,.965);
  opacity:0; transition:opacity .38s var(--ease-out-quart,ease);
}
.lb[data-open]{ display:block; }
.lb.is-shown{ opacity:1; }
.lb-stage{
  position:absolute; inset:clamp(56px,7vh,96px) clamp(20px,7vw,120px) clamp(76px,10vh,120px);
  display:grid; place-items:center;
}
.lb-fig{ margin:0; max-inline-size:100%; max-block-size:100%; display:grid; place-items:center; }
.lb-fig img{
  max-inline-size:100%; max-block-size:calc(100vh - clamp(190px,22vh,260px));
  inline-size:auto; block-size:auto; display:block;
  box-shadow:0 40px 120px rgba(28,20,10,.5);
  opacity:0; transform:scale(.985);
  transition:opacity .42s var(--ease-out-quart,ease), transform .42s var(--ease-out-quart,ease);
}
.lb.is-shown .lb-fig img{ opacity:1; transform:none; }
.lb-cap{
  position:absolute; inset-inline:0; inset-block-end:clamp(26px,4vh,46px);
  text-align:center; color:rgba(248,245,239,.8);
  font-family:var(--font-text); font-size:.82rem; line-height:1.7; padding-inline:24px;
}
.lb-cap .idx{
  display:block; margin-block-end:8px; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-hero-gold,#E4B65E);
}
.lb-close, .lb-nav{
  position:absolute; background:none; border:0; cursor:pointer; padding:0;
  color:rgba(248,245,239,.72); display:grid; place-items:center;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-close{
  inset-block-start:clamp(16px,2.6vh,30px); inset-inline-end:clamp(16px,3vw,40px);
  inline-size:46px; block-size:46px; border:1px solid rgba(248,245,239,.24); border-radius:50%;
}
.lb-nav{
  inset-block-start:50%; transform:translateY(-50%);
  inline-size:52px; block-size:52px; border:1px solid rgba(248,245,239,.2); border-radius:50%;
}
.lb-prev{ inset-inline-start:clamp(10px,2.2vw,34px); }
.lb-next{ inset-inline-end:clamp(10px,2.2vw,34px); }
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible{ color:#F8F5EF; border-color:rgba(248,245,239,.7); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.lb-close svg, .lb-nav svg{ inline-size:17px; block-size:17px; }
.lb-nav[hidden]{ display:none; }
/* arrows follow writing direction */
[dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg{ transform:scaleX(-1); }
body.lb-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .lb, .lb-fig img{ transition:none; }
  .lb-fig img{ opacity:1; transform:none; }
}

/* ============================================================
   SHARED CHROME REFINEMENT (client direction 2026-07-28, §08–09)
   Philosophy extracted from reference: ivory ground, bronze type,
   centered mark, symmetry, minimal links, air. Not copied.
   Additive classes — main.css baseline untouched.
   ============================================================ */

/* ---------- navigation: quieter, fewer, more air ---------- */
.header-editorial .header-inner{ min-block-size:104px; }
.header-editorial.is-condensed .header-inner{ min-block-size:84px; }
.header-editorial .primary-nav{ gap:clamp(22px,3vw,44px); }
.header-editorial .primary-nav a{
  font-size:.86rem; letter-spacing:.04em; color:var(--color-text);
  opacity:.82; transition:opacity var(--motion-fast,.2s) ease;
}
.header-editorial .primary-nav a:hover,
.header-editorial .primary-nav a:focus-visible,
.header-editorial .primary-nav a[aria-current="page"]{ opacity:1; }
.header-editorial .primary-nav a[aria-current="page"]::after{ inline-size:100%; }
.header-editorial .brand .brand-since{ opacity:.85; }

/* ---------- footer: centered mark, one line of links, air ---------- */
.footer-editorial{
  background:var(--color-bg-base); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block:clamp(44px,5vw,78px);
  text-align:center; font-size:.85rem;
}
.footer-editorial .foot-mark{ inline-size:clamp(160px,18vw,230px); block-size:auto; margin-inline:auto; display:block; }
.footer-editorial .foot-brand{
  font-family:var(--font-display-ar); font-size:clamp(1.25rem,1.05rem + .8vw,1.8rem);
  color:var(--color-heading-gold); margin-block:var(--space-3) 0; line-height:1.5;
}
[dir="ltr"] .footer-editorial .foot-brand{ font-family:var(--font-display-lat); }
.footer-editorial .foot-tag{
  margin-block-start:10px; color:var(--color-text-muted);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
}
.footer-editorial .foot-nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,2.6vw,40px);
  margin-block-start:clamp(30px,3.6vw,54px);
}
.footer-editorial .foot-nav a{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-functional); padding-block:4px; position:relative;
}
.footer-editorial .foot-nav a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  inline-size:0; block-size:1px; background:currentColor;
  transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.footer-editorial .foot-nav a:hover::after, .footer-editorial .foot-nav a:focus-visible::after{ inline-size:100%; }
.footer-editorial .foot-offices{
  margin-block-start:clamp(26px,3vw,44px); color:var(--color-text-muted); line-height:2;
  max-inline-size:64ch; margin-inline:auto;
}
.footer-editorial .foot-offices b{ color:var(--color-text); font-weight:500; }
.footer-editorial .foot-rule{
  inline-size:min(220px,40%); block-size:1px; border:0; margin:clamp(30px,3.6vw,54px) auto 0;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne, #C29F63), transparent);
  opacity:.55;
}
.footer-editorial .footer-legal{
  justify-content:center; border-block-start:0; margin-block-start:clamp(18px,2vw,28px);
  padding-block-start:0; font-size:.7rem; color:var(--color-text-muted); letter-spacing:.06em;
}

/* ============================================================
   CENTERED HEADER + MOBILE DRAWER (final refinement 2026-07-28)
   Centered mark, flanking minimal navigation. Logo is the centerpiece.
   ============================================================ */
.header-centered .header-c-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-block-size:118px; gap:clamp(14px,2vw,32px); position:relative;
}
.site-header.header-centered.is-condensed .header-c-inner{ min-block-size:92px; }
.header-centered .nav-side{ display:flex; gap:clamp(13px,1.7vw,26px); align-items:center; }
.header-centered .nav-s{ justify-self:end; }
.header-centered .nav-e{ justify-self:start; }
[dir="ltr"] .header-centered .nav-s{ justify-self:end; }
[dir="ltr"] .header-centered .nav-e{ justify-self:start; }
.header-centered .nav-side a{
  font-family:var(--font-text); font-size:.8rem; white-space:nowrap; letter-spacing:.06em;
  color:var(--color-text); opacity:.82; padding-block:6px; position:relative;
  transition:opacity var(--motion-fast,.2s) ease;
}
.header-centered .nav-side a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:0; block-size:1px;
  background:var(--color-accent-champagne-deep); transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.header-centered .nav-side a:hover, .header-centered .nav-side a:focus-visible,
.header-centered .nav-side a[aria-current="page"]{ opacity:1; }
.header-centered .nav-side a:hover::after, .header-centered .nav-side a[aria-current="page"]::after{ inline-size:100%; }
.header-centered .nav-side .lang-toggle{ opacity:.7; letter-spacing:.14em; }
.brand-center{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; line-height:1.2; }
.brand-center .brand-logo{ inline-size:auto; block-size:44px; transition:block-size var(--motion-base,.3s) var(--ease-in-out,ease); }
.site-header.is-condensed .brand-center .brand-logo{ block-size:34px; }
.brand-center .brand-name{ font-family:var(--font-display-ar); font-size:1.06rem; color:var(--color-text); }
[dir="ltr"] .brand-center .brand-name{ font-family:var(--font-display-lat); }
.brand-center .brand-since{ font-size:.6rem; letter-spacing:.22em; color:var(--color-accent-champagne-deep); text-transform:uppercase; }
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); display:none; }
@media (max-width:880px){
  .header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:96px; }
  .header-centered .nav-side{ display:none; }
  .brand-center{ justify-self:center; }
  .header-centered .nav-burger{ display:flex; }
}

/* ---------- mobile drawer: quiet ivory panel ---------- */
.nav-drawer{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:900;
  inline-size:min(340px,86vw); block-size:100dvh;
  background:var(--color-bg-base,#FBF7EC); border-inline-end:1px solid var(--color-hairline, rgba(59,44,24,.14));
  box-shadow:-24px 0 80px rgba(20,14,5,.16);
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(84px,14vh,120px) clamp(26px,7vw,40px) 40px;
  transform:translateX(102%);           /* panel lives at the inline-start edge (AR right / EN left); +102% is the RTL hide, mirrored for LTR at the end of this file */
  transition:transform .34s var(--ease-out-quart,ease);
}
.nav-drawer[hidden]{ display:none; }    /* display:flex must not defeat the hidden attribute */
.nav-drawer.is-open{ transform:none; }
.nav-drawer a{
  font-family:var(--font-display-ar); font-size:1.35rem; color:var(--color-text);
  padding-block:14px; border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.1));
}
[dir="ltr"] .nav-drawer a{ font-family:var(--font-display-lat); }
.nav-drawer a[aria-current="page"]{ color:var(--color-heading-gold); }
.nav-drawer .lang-toggle{ font-family:var(--font-text); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-champagne-deep); border-block-end:0; margin-block-start:8px; }
body.drawer-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .nav-drawer{ transition:none; } }

/* ---------- footer: flanking ornaments (subtle, champagne line-work) ---------- */
.foot-mark-row{ display:flex; align-items:center; justify-content:center; gap:clamp(22px,4vw,48px); }
.foot-orn{ inline-size:clamp(40px,4.6vw,60px); block-size:auto; color:var(--color-accent-champagne); opacity:.42; flex:none; }
@media (max-width:560px){ .foot-orn{ display:none; } }

/* ============================================================
   HOMEPAGE EDITORIAL AIR (final corrections 2026-07-28 §04)
   Calmer rhythm: more breathing room, typography more prominent.
   Additive — no structural change to the locked sections.
   ============================================================ */
.making, .crafts, .languages, .sectors{ padding-block:clamp(72px,8vw,148px); }
.making .h2, .crafts .h2, .languages .h2, .sectors .h2{
  font-size:clamp(2rem,1.3rem + 2.9vw,3.8rem); line-height:1.28; max-inline-size:20ch;
}
.making .standfirst, .crafts .standfirst, .languages .standfirst, .sectors .standfirst{ margin-block-start:var(--space-2); }
.lang-grid{ gap:clamp(18px,2.4vw,34px); }

/* ============================================================
   FINAL POLISH (client 2026-07-28): burger-only header.
   Navigation lives entirely in the drawer; the centered mark,
   flanked by whisper-subtle champagne ornaments, is the focus.
   ============================================================ */
.header-centered .nav-side{ display:none !important; }
.header-centered .nav-burger{ display:flex; flex-direction:column; justify-content:center; }
.header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:112px; }
.header-centered .brand-center{ justify-self:center; }
/* ornament medallions flanking the wordmark — champagne line-work, very subtle */
.hdr-orn-row{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.hdr-orn{ inline-size:clamp(26px,2.6vw,36px); block-size:auto; color:var(--color-accent-champagne); opacity:.38; flex:none; }
@media (max-width:560px){ .hdr-orn{ display:none; } }
/* burger pinned to the inline-end of the header on all widths */
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); }

/* client's own rosette ornament (from the approved pattern reference) stretching beside the mark */
.hdr-orn-row .hdr-orn{ inline-size:clamp(26px,2.6vw,34px); block-size:auto; opacity:.62; }
.orn-rule{ flex:none; block-size:1px; inline-size:clamp(28px,5vw,96px);
  background:var(--color-accent-champagne); opacity:.32; }
@media (max-width:560px){ .orn-rule{ display:none; } }

/* QA fix 2026-07-29: the generic .editorial eyebrow margin was overriding the About-hero label lift
   (equal specificity, later cascade). This wins: the label sits well clear of the headline. */
.editorial .about-hero .eyebrow{ margin-block-end:clamp(56px,8vw,110px); }

/* ============================================================
   ORNAMENT WATERMARK SYSTEM (prepared 2026-07-29 — awaiting the
   client's official ornament, Open Item V). The ornament becomes
   an architectural watermark carved into the page, never pasted:
   set --orn-url once the official asset arrives and add
   .orn-watermark to any chapter section. Ivory + champagne,
   soft-light emboss, extremely subtle.
   ============================================================ */
:root{ --orn-url:none; }  /* e.g. url("../assets/ornament-official.png") */
.orn-watermark{ position:relative; }
.orn-watermark::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--orn-url);
  background-repeat:no-repeat; background-position:var(--orn-pos, calc(100% + 120px) center);
  background-size:var(--orn-size, min(46vw, 560px));
  mix-blend-mode:soft-light; opacity:var(--orn-opacity, .16);
  filter:sepia(.4) hue-rotate(-8deg) saturate(.7);
}
.orn-watermark > *{ position:relative; z-index:1; }

/* ============================================================
   HORIZONTAL PROCESS TIMELINE (final homepage lock 2026-07-29)
   The homepage previews the workflow typographically; stage
   photography lives in the Service pages.
   ============================================================ */
.timeline-h{
  list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px) 0;
}
.timeline-h li{
  font-family:var(--font-display-ar); font-weight:400; white-space:nowrap;
  font-size:clamp(1.1rem,.95rem + .8vw,1.7rem); color:var(--color-heading-gold);
}
[dir="ltr"] .timeline-h li{ font-family:var(--font-display-lat); }
.timeline-h li + li::before{
  content:""; display:inline-block; vertical-align:middle;
  inline-size:clamp(22px,3.4vw,64px); block-size:1px;
  background:var(--color-accent-champagne); opacity:.55;
  margin-inline:clamp(10px,1.6vw,26px);
}
@media (max-width:640px){
  .timeline-h{ flex-direction:column; align-items:flex-start; gap:6px; }
  .timeline-h li + li::before{ inline-size:1px; block-size:18px; margin-inline:0; margin-block:2px 4px; display:block; margin-inline-start:2px; }
}

/* ============================================================
   FEATURED WORK — balanced editorial pair (client 2026-07-29)
   Two identical cards, generous air, neither dominant.
   ============================================================ */
.glimpse{ padding-block:clamp(84px,10vw,180px); }
.featured-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,72px);
  margin-block-start:clamp(44px,5.5vw,84px);
  max-inline-size:min(1160px,100%); margin-inline:auto;
}
.featured-pair .glimpse-item{ margin:0; inline-size:100%; }
.featured-pair .frame{ display:block; aspect-ratio:4/3; overflow:hidden; }
.featured-pair .frame img{ inline-size:100%; block-size:100%; object-fit:cover; }
@media (max-width:720px){ .featured-pair{ grid-template-columns:1fr; gap:clamp(36px,8vw,56px); } }

/* ============================================================
   FEATURED WORK — magazine rows (client-approved reference, 2026-07-29)
   Two identical editorial rows: text panel + image, alternating sides.
   ============================================================ */
.fw-head{ text-align:center; max-inline-size:62ch; margin-inline:auto; }
.fw-head .h2{ margin-inline:auto; max-inline-size:none; }
.fw-sub{ margin-block-start:var(--space-2); color:var(--color-text-muted); font-size:1rem; }
.fw-row{
  display:grid; grid-template-columns:minmax(280px,1fr) 2.2fr; align-items:stretch;
  margin-block-start:clamp(44px,5.5vw,84px);
}
.fw-row.alt{ grid-template-columns:2.2fr minmax(280px,1fr); }
.fw-row.alt .fw-text{ order:2; }
.fw-row.alt .fw-img{ order:1; }
.fw-text{
  background:var(--color-stone, #EFE9DF); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.6vw,64px);
}
.fw-text h3{
  font-family:var(--font-display-ar); font-weight:400; color:var(--color-text);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); line-height:1.3; margin:0 0 .55em;
}
[dir="ltr"] .fw-text h3{ font-family:var(--font-display-lat); }
.fw-desc{ color:var(--color-text-muted); line-height:1.95; max-inline-size:34ch; margin:0 0 1.4em; }
.fw-img{ block-size:clamp(300px,34vw,480px); overflow:hidden; }
.fw-img img{ inline-size:100%; block-size:100%; object-fit:cover; }
.fw-link{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:8px;
  border-block-end:1px solid transparent; padding-block-end:3px; align-self:flex-start;
  transition:border-color var(--motion-fast,.22s) ease;
}
.fw-link:hover, .fw-link:focus-visible{ border-block-end-color:currentColor; }
.fw-more{ text-align:center; margin-block-start:clamp(44px,5.5vw,84px); }
.fw-more .fw-link{ font-size:.84rem; }
@media (max-width:820px){
  .fw-row, .fw-row.alt{ grid-template-columns:1fr; }
  .fw-row .fw-img, .fw-row.alt .fw-img{ order:1; block-size:clamp(220px,52vw,360px); }
  .fw-row .fw-text, .fw-row.alt .fw-text{ order:2; }
}

/* ============================================================
   OFFICIAL AL ARABI ORNAMENT SYSTEM (client 2026-07-29)
   The official carved-gypsum patterns as embossed atmosphere:
   warm-bronze ridges at 3–8% alpha (baked into the assets),
   carved into the page — never pasted, never touching content.
   One vocabulary, everywhere. Replaces all drawn SVG ornaments.
   ============================================================ */
/* manifesto — diamond linework replaces the old photo overlay */
.manifesto::before{
  background:url("../assets/orn-diamond.png") center/cover no-repeat;
  mix-blend-mode:normal; opacity:1; filter:none;
}
/* heritage chapter — fan palmettes on the warm stone; the drawn medallion is retired */
.heritage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-fans.png") center/cover no-repeat;
}
.heritage-ornament{ display:none; }
/* footer — the pierced floral lattice, barely there */
.footer-editorial{ position:relative; overflow:hidden; }
.footer-editorial::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-lattice.png") center top / min(640px,80vw) repeat;
}
.footer-editorial > .container{ position:relative; z-index:1; }
.footer-editorial p{ max-inline-size:none; margin-inline:auto; }
.footer-editorial .foot-offices{ max-inline-size:64ch; }
/* commission CTA — chevron relief on ivory (appears on every page) */
.commission{ position:relative; overflow:hidden; }
.commission::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-chevron.png") center/cover no-repeat;
}
.commission > .container{ position:relative; z-index:1; }
/* inner-page opening section — a feather-shingle corner watermark, clear of the text column */
.editorial > .about-section:first-child{ position:relative; overflow:hidden; }
.editorial > .about-section:first-child::before{
  content:""; position:absolute; inset-block-start:-30px; inset-inline-end:-70px;
  inline-size:min(44vw,520px); aspect-ratio:445/330; pointer-events:none;
  background:url("../assets/orn-feather.png") center/contain no-repeat;
}
.editorial > .about-section:first-child .container{ position:relative; z-index:1; }
/* utility divider for future pages — the radial sunburst medallion */
.orn-divider{
  display:block; inline-size:56px; aspect-ratio:225/255; margin:clamp(30px,4vw,56px) auto;
  background:url("../assets/orn-sunburst.png") center/contain no-repeat;
}

/* ============================================================
   TEAM PHOTOGRAPHY — natural on the ivory page (client 2026-07-29)
   No dark containers. Clean editorial crops, a whisper of
   champagne mount — like prints mounted in a monograph.
   ============================================================ */
.team-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,44px);
  margin-block-start:clamp(40px,5vw,72px);
}
@media (max-width:760px){ .team-row{ grid-template-columns:1fr; } }
.team-fig{ margin:0; }
.team-fig .mount{
  display:block; padding:clamp(8px,1vw,14px); background:var(--color-bg-base,#FBF7EC);
  border:1px solid var(--color-accent-champagne,#C29F63);
}
.team-fig .mount img{
  inline-size:100%; block-size:auto; aspect-ratio:4/5; object-fit:cover; display:block;
}
.team-fig figcaption{
  margin-block-start:12px; font-family:var(--font-text); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); text-align:center;
}

/* ============================================================
   PROCESS TIMELINE — architectural drafting composition
   (final homepage refinement, client 2026-07-29)
   The section sits on a faint drafting sheet: compass circles,
   construction ticks, proportional guides — bronze at ~3-4%,
   discovered rather than seen. The six stages are joined by one
   fine bronze line through compass-circle nodes: craftsmanship
   as a continuous, measured process.
   ============================================================ */
.making{ position:relative; overflow:hidden; }
.making::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640'><g fill='none' stroke='rgb(138,109,43)' stroke-opacity='0.045' stroke-width='1'><circle cx='1050' cy='300' r='250'/><circle cx='1050' cy='300' r='178'/><circle cx='1050' cy='300' r='96'/><line x1='1050' y1='20' x2='1050' y2='580'/><line x1='770' y1='300' x2='1330' y2='300'/><line x1='860' y1='110' x2='1240' y2='490'/><line x1='1240' y1='110' x2='860' y2='490'/><g stroke-opacity='0.06'><line x1='1050' y1='46' x2='1050' y2='58'/><line x1='1050' y1='542' x2='1050' y2='554'/><line x1='796' y1='300' x2='808' y2='300'/><line x1='1292' y1='300' x2='1304' y2='300'/></g><circle cx='240' cy='430' r='120'/><circle cx='240' cy='430' r='58'/><line x1='90' y1='430' x2='390' y2='430'/><line x1='240' y1='280' x2='240' y2='580'/><line x1='60' y1='80' x2='1340' y2='80' stroke-opacity='0.035'/><line x1='60' y1='560' x2='1340' y2='560' stroke-opacity='0.035'/><line x1='432' y1='40' x2='432' y2='600' stroke-opacity='0.03'/><line x1='866' y1='40' x2='866' y2='600' stroke-opacity='0.03'/></g></svg>");
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* the official sunburst medallion emerging from the construction circle — ornament fragment blended into the drafting sheet */
.making::after{
  content:''; position:absolute; pointer-events:none;
  inset-block-start:12%; inset-inline-start:66%; inline-size:min(24vw,300px); aspect-ratio:640/725;
  background:url('../assets/orn-sunburst-faint.png') center/contain no-repeat;
}
.making > .container{ position:relative; z-index:1; }

/* the six stages — compass nodes on one continuous bronze line */
.timeline-h{
  position:relative; justify-content:space-between;
  padding-block-start:44px; margin-block-start:clamp(40px,5vw,64px);
}
.timeline-h::before{
  content:""; position:absolute; inset-block-start:9px; inset-inline:1%;
  block-size:1px;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent);
  opacity:.5;
}
.timeline-h li{ position:relative; text-align:center; }
.timeline-h li::after{
  content:""; position:absolute; inset-block-start:-42px; inset-inline-start:calc(50% - 9px);
  inline-size:18px; block-size:18px; border-radius:50%;
  border:1px solid var(--color-accent-champagne-deep,#8A5E20); opacity:.75;
  background:
    radial-gradient(circle at center, var(--color-accent-champagne-deep,#8A5E20) 1.6px, transparent 2.2px),
    var(--color-bg-base,#FBF7EC);
}
/* the old dash separators retire — the construction line is the connection now */
.timeline-h li + li::before{ display:none; }
@media (max-width:640px){
  .timeline-h{ padding-block-start:0; padding-inline-start:30px; }
  .timeline-h::before{ inset-inline:auto; inset-inline-start:8px; inset-block:6px 6px; inline-size:1px; block-size:auto;
    background:linear-gradient(to bottom, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent); }
  .timeline-h li{ text-align:start; }
  .timeline-h li::after{ inset-block-start:calc(50% - 9px); inset-inline-start:-30px; }
}

/* ---- Applications as editorial labels, not UI chips (final service review, 2026-07-30) ----
   Bronze hairline + bronze type on ivory, square-cut. Scoped to service pages via .chips-editorial
   so the locked About page keeps its original chips. No letter-spacing in RTL (connected script). */
.editorial .reach-cities.chips-editorial span{
  border:1px solid rgba(138,109,43,.38);
  color:var(--color-bronze, #8A5E20);
  background:var(--color-bg, #FDFBF6);
  border-radius:2px;
  padding:10px 24px;
  font-size:.9rem;
}
[dir="ltr"] .editorial .reach-cities.chips-editorial span{ letter-spacing:.04em; }

/* ---- Service chapter pager (client UX directive 2026-07-30) ----
   Services behave like chapters of one publication: every service page carries
   previous/next links to its neighbouring crafts so a visitor never returns to
   the homepage to change chapter. Logical properties keep it RTL/LTR correct. */
.svc-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,48px);
  margin-block-start:clamp(44px,6vw,86px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block-start:clamp(22px,3vw,38px);
}
.svc-pager a{ text-decoration:none; display:block; }
.svc-pager .dir{
  display:block; font-family:var(--font-text); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep, #A58452); margin-block-end:.7em;
}
.svc-pager b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem); line-height:1.4; color:var(--color-heading-gold, #8A5E20);
}
.svc-pager .en{ display:block; font-family:var(--font-text); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-text-muted); margin-block-start:.5em; }
.svc-pager .next{ text-align:end; }
.svc-pager .prev{ text-align:start; }
.svc-pager a:hover b{ color:var(--color-text); }
@media (max-width:640px){ .svc-pager{ grid-template-columns:1fr; row-gap:26px; }
  .svc-pager .next, .svc-pager .prev{ text-align:start; } }

/* ---- Portfolio: sector chapters + project roster (2026-07-30) ----
   Names are the only thing that changes when approvals land; the layout never does.
   Confidential and pending entries are first-class citizens, not gaps. */
.pf-index{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-block-start:var(--space-3); }
.pf-index a{ font-family:var(--font-text); font-size:.9rem; text-decoration:none;
  color:var(--color-bronze,#8A5E20); border:1px solid rgba(138,109,43,.38); background:var(--color-bg,#FDFBF6);
  border-radius:2px; padding:10px 22px; }
.pf-index a:hover{ border-color:rgba(138,109,43,.7); }
.pf-roster{ margin-block-start:var(--space-4); }
.pf-item{ display:grid; grid-template-columns:1fr auto; gap:8px clamp(16px,2.4vw,40px); align-items:baseline;
  padding-block:clamp(15px,1.7vw,24px); border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); }
.pf-item:first-child{ border-block-start:0; }
.pf-item b{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.1rem,.98rem + .6vw,1.45rem);
  color:var(--color-text); line-height:1.45; }
.pf-item .city{ display:block; font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); margin-block-start:.45em; }
.pf-item .tag{ font-family:var(--font-text); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep,#A58452); white-space:nowrap; }
.pf-item.is-held b{ color:var(--color-heading-gold,#8A5E20); }
@media (max-width:560px){ .pf-item{ grid-template-columns:1fr; } .pf-item .tag{ white-space:normal; } }

/* ---- Portfolio project cards (client refinement 2026-07-30) ----
   Every project is a real editorial card: image (or an honest pending tile),
   title, city, sector, the crafts involved, and a View Project link.
   Only the card DESTINATION changes when detail pages ship. */
.pf-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(26px,3.2vw,54px); margin-block-start:var(--space-4); }
.pf-card{ display:flex; flex-direction:column; }
.pf-card .shot{ position:relative; overflow:hidden; background:var(--color-bg-muted); aspect-ratio:4/3; }
.pf-card .shot img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.pf-card .pending{ display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid rgba(138,109,43,.30); background:var(--color-bg,#FDFBF6); }
.pf-card .pending span{ font-family:var(--font-text); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); padding:0 18px; line-height:1.9; }
.pf-card h3{ font-family:var(--font-display-ar); font-weight:400; line-height:1.4;
  font-size:clamp(1.12rem,1rem + .6vw,1.48rem); color:var(--color-text); margin-block:1em .1em; }
.pf-card.is-held h3{ color:var(--color-heading-gold,#8A5E20); }
.pf-card .where{ font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); }
.pf-card .state{ display:block; font-family:var(--font-text); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); margin-block-start:.85em; }
.pf-crafts{ display:flex; flex-wrap:wrap; gap:7px 8px; margin-block-start:.95em; }
.pf-crafts a{ font-family:var(--font-text); font-size:.72rem; text-decoration:none; color:var(--color-bronze,#8A5E20);
  border:1px solid rgba(138,109,43,.34); border-radius:2px; padding:6px 13px; background:var(--color-bg,#FDFBF6); }
.pf-crafts a:hover{ border-color:rgba(138,109,43,.7); }
.pf-card .go{ margin-block-start:auto; padding-block-start:1.1em; }
.pf-card .go a{ font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--color-heading-gold,#8A5E20); border-block-end:1px solid rgba(138,109,43,.4); padding-block-end:3px; }
.pf-card .go a:hover{ border-color:rgba(138,109,43,.9); }

/* ---- 03 · Editorial project covers (replaces "photography pending" tiles) ----
   An ornament-and-type cover in the house language. It is an editorial introduction
   to the destination — never presented as Al Arabi execution photography.
   When official project photography arrives, only the cover is swapped: the card
   never changes. */
.pf-card .cover{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(138,109,43,.075) 0%, transparent 62%),
    linear-gradient(160deg, #FBF7EE 0%, #F4EDE0 100%);
  border:1px solid rgba(138,109,43,.20);
}
.pf-card .cover::before{                     /* official ornament, carved not pasted */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../assets/orn-fans.png') center/150% no-repeat;
  opacity:.85;
}
.pf-card .cover .mark{                       /* the destination initial, as a monogram */
  position:absolute; inset-block-start:-.18em; inset-inline-end:.12em;
  font-family:var(--font-display-lat); font-size:clamp(5.4rem,9vw,8.2rem); line-height:1;
  color:rgba(138,109,43,.13); user-select:none;
}
.pf-card .cover .label{
  position:relative; padding:clamp(16px,2vw,22px); inline-size:100%;
}
.pf-card .cover .label b{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1.35;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem); color:var(--color-heading-gold,#8A5E20);
}
.pf-card .cover .label span{
  display:block; margin-block-start:.55em; font-family:var(--font-text); font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452);
}

/* ---- 06 · Clients / Trusted by — understated bronze wordmarks, never colourful ---- */
.clients-note{ margin-block-start:var(--space-3); font-size:.86rem; color:var(--color-text-muted); max-inline-size:62ch; }

/* ---- 05B · About statistics — editorial, not dashboard ---- */
.stat-editorial{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,3vw,58px); margin-block-start:var(--space-4);
}
.stat-editorial .fig{ border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); padding-block-start:clamp(16px,1.8vw,24px); }
.stat-editorial .num{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1;
  font-size:clamp(2.6rem,1.9rem + 2.4vw,4.4rem); color:var(--color-heading-gold,#8A5E20);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat-editorial .cap{
  display:block; margin-block-start:.7em; font-family:var(--font-text); font-size:.9rem;
  line-height:1.75; color:var(--color-text-muted); max-inline-size:26ch;
}

/* footer compacted ~28% (client priority 04) — ornament, logo, navigation and
   identity all retained; only empty vertical space removed. */
.footer-editorial{ padding-block:clamp(42px,5vw,76px) !important; }
.footer-editorial .foot-mark{ inline-size:clamp(150px,15vw,196px) !important; margin-block-end:.5em !important; }
.footer-editorial .foot-tag{ margin-block-end:clamp(20px,2.4vw,30px) !important; }
.footer-editorial .foot-nav{ margin-block:clamp(16px,2vw,24px) !important; }
.footer-editorial .foot-offices{ margin-block-start:clamp(14px,1.8vw,22px) !important; line-height:1.85 !important; }
.footer-editorial .foot-rule{ margin-block:clamp(20px,2.6vw,32px) !important; }
.footer-editorial .footer-legal{ margin-block-start:0 !important; }

/* ============================================================
   TYPOGRAPHY — display headlines returned to their approved balance
   (2026-07-31, client correction: the wrong titles were enlarged).
   Hierarchy now comes from the editorial LABELS below, not from
   inflating the display type.
   ============================================================ */



/* POLISH 03 · Portfolio sector previews — two projects, then Explore More */
.pf-card[hidden]{ display:none !important; }   /* author display must not defeat [hidden] */
.pf-more{ margin-block-start:clamp(26px,3vw,44px); }
.pf-more button{
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-heading-gold,#8A5E20); background:none; border:0; cursor:pointer;
  border-block-end:1px solid rgba(138,109,43,.4); padding:0 0 4px;
}
.pf-more button:hover{ border-color:rgba(138,109,43,.9); }
.pf-more .count{ font-size:.72rem; color:var(--color-text-muted); letter-spacing:.06em; text-transform:none; }

/* POLISH 05 · Clients as editorial chips — the same language as applications and cities */
.clients-chips{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-block-start:var(--space-4); }
.clients-chips span{
  font-family:var(--font-text); font-size:.92rem; line-height:1;
  color:var(--color-bronze,#8A5E20);
  background:var(--color-bg,#FDFBF6);
  border:1px solid rgba(138,109,43,.38); border-radius:2px;
  padding:13px 24px;
}

/* EDITORIAL LABELS — القطاع · مختارات · منهجية الصنعة · خدماتنا · مشاريعنا
   These carry the hierarchy now: larger, heavier, darker bronze, and anchored
   by a short rule so a label reads as a chapter marker rather than a caption. */
.editorial .eyebrow{
  font-family:var(--font-text);
  font-size:clamp(1.25rem, 1.15rem + .27vw, 1.45rem);   /* eyebrow +15% again (client 2026-08-03) */
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--color-bronze, #8A5E20);
  display:flex; align-items:center; gap:.85em;
  margin-block-end:1.15em;
}
.editorial .eyebrow::before{
  content:""; display:block; display:block; inline-size:clamp(38px,4vw,66px); block-size:1px; flex:none;
  background:linear-gradient(to var(--_lbl,left), rgba(138,109,43,.75), rgba(138,109,43,.15));
}
[dir="ltr"] .editorial .eyebrow{ --_lbl:right; }
/* the About hero eyebrow sits on photography — keep it champagne and rule-free */
.editorial .about-hero .eyebrow{ display:block; color:var(--color-accent-champagne-on-dark); }
.editorial .about-hero .eyebrow::before{ content:none; }



.editorial .h2{
  font-size:clamp(2.1rem,1.35rem + 3.1vw,4.1rem);
  line-height:1.28;
  letter-spacing:-0.005em;
  max-inline-size:19ch;
}
.editorial .about-lede{
  font-size:clamp(1.32rem,1.06rem + 1.15vw,2.05rem);
  line-height:1.66;
  max-inline-size:34ch;
  color:var(--color-text);
  margin-block-start:var(--space-3);
}
.editorial .about-section p:not(.eyebrow):not(.about-lede):not(.about-pullquote){
  font-size:clamp(1rem,.965rem + .16vw,1.09rem);
  line-height:2.05;
}
.editorial .about-columns{ gap:clamp(32px,5vw,96px); margin-block-start:var(--space-4); }
.editorial .eyebrow{ margin-block-end:1.15em; }

/* a hairline that opens a chapter — replaces a photograph as the divider */
.chapter-rule{
  inline-size:100%; block-size:1px; border:0; margin-block:clamp(40px,5vw,88px) 0;
  background:linear-gradient(to right, transparent, var(--color-hairline, rgba(59,44,24,.18)) 22%, var(--color-hairline, rgba(59,44,24,.18)) 78%, transparent);
}

/* ---------- the one plate a section is allowed ---------- */
.plate{ margin-block-start:clamp(40px,5vw,84px); }
.plate img{ inline-size:100%; block-size:auto; display:block; }
.plate figcaption,
.plate-note{
  margin-block-start:14px; font-family:var(--font-text); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted);
}

/* ---------- quiet trigger: "see the work" ---------- */
.plate-link{
  --_g: var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--_g); line-height:1;
  margin-block-start:var(--space-3);
}
.plate-link .mark{
  inline-size:34px; block-size:34px; border-radius:50%;
  border:1px solid currentColor; opacity:.5;
  display:grid; place-items:center; flex:none;
  transition:opacity var(--motion-fast,.22s) var(--ease-out-quart,ease), transform var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.plate-link .mark svg{ inline-size:13px; block-size:13px; display:block; }
.plate-link .label{ border-block-end:1px solid transparent; padding-block-end:3px; transition:border-color var(--motion-fast,.22s) ease; }
.plate-link:hover .mark, .plate-link:focus-visible .mark{ opacity:1; transform:scale(1.06); }
.plate-link:hover .label, .plate-link:focus-visible .label{ border-block-end-color:currentColor; }
.plate-link:focus-visible{ outline:2px solid var(--_g); outline-offset:6px; }

/* on the warm-stone heritage ground the default bronze trigger reads correctly — no override needed */

/* ---------- named people: dignified, undesigned ---------- */
.roster{ margin-block-start:var(--space-4); }
.roster-group + .roster-group{ margin-block-start:clamp(32px,3.6vw,56px); }
.roster-group > h3{
  font-family:var(--font-text); font-weight:500; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne); margin:0 0 var(--space-2);
}
.roster-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,3.4vw,56px); }
@media (max-width:900px){ .roster-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .roster-list{ grid-template-columns:1fr; } }
.roster-list li{
  padding-block:clamp(14px,1.5vw,20px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
}
.roster-list b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.06rem,.98rem + .3vw,1.24rem); color:var(--color-text); line-height:1.45;
}
[dir="ltr"] .roster-list b{ font-family:var(--font-display-lat); }
.roster-list span{
  display:block; margin-block-start:5px; font-size:.86rem; line-height:1.7;
  color:var(--color-text-muted);
}
.roster-list .since{ color:var(--color-accent-champagne-deep, #8A5E20); font-variant-numeric:lining-nums; }

/* ---------- founders: two names, one vision ---------- */
.founders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(26px,3.4vw,64px); margin-block-start:clamp(36px,4.4vw,72px); }
@media (max-width:760px){ .founders{ grid-template-columns:1fr; } }
.founder{ padding-block-start:var(--space-3); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.16)); }
.founder .role{
  font-family:var(--font-text); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-accent-champagne); display:block; margin-block-end:12px;
}
.founder .name{
  font-family:var(--font-display-ar); font-weight:400; line-height:1.32;
  font-size:clamp(1.5rem,1.2rem + 1.35vw,2.35rem); color:var(--color-heading-gold); margin:0;
}
[dir="ltr"] .founder .name{ font-family:var(--font-display-lat); }
.founder .detail{ margin-block-start:14px; line-height:1.95; color:var(--color-text-muted); max-inline-size:34ch; }

/* ---------- process: typography first, photography as evidence ---------- */
.stage-list{ counter-reset:stage; margin-block-start:var(--space-4); }
.stage{
  display:grid; grid-template-columns:auto 1fr; gap:0 clamp(20px,2.6vw,44px);
  padding-block:clamp(24px,2.6vw,40px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.12));
  align-items:baseline;
}
.stage:last-child{ border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.12)); }
.stage .n{
  font-family:var(--font-display-lat); font-size:.9rem; letter-spacing:.06em;
  color:var(--color-accent-champagne); line-height:1; padding-block-start:.5em;
}
.stage b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.3rem,1.08rem + .85vw,1.9rem); color:var(--color-text); line-height:1.4;
}
[dir="ltr"] .stage b{ font-family:var(--font-display-lat); }
.stage p{ margin-block-start:.6em; line-height:1.95; color:var(--color-text-muted); max-inline-size:52ch; }
@media (max-width:600px){ .stage{ grid-template-columns:1fr; gap:8px; } .stage .n{ padding-block-start:0; } }

/* ============================================================
   LIGHTBOX — discoverable imagery
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(16,12,5,.965);
  opacity:0; transition:opacity .38s var(--ease-out-quart,ease);
}
.lb[data-open]{ display:block; }
.lb.is-shown{ opacity:1; }
.lb-stage{
  position:absolute; inset:clamp(56px,7vh,96px) clamp(20px,7vw,120px) clamp(76px,10vh,120px);
  display:grid; place-items:center;
}
.lb-fig{ margin:0; max-inline-size:100%; max-block-size:100%; display:grid; place-items:center; }
.lb-fig img{
  max-inline-size:100%; max-block-size:calc(100vh - clamp(190px,22vh,260px));
  inline-size:auto; block-size:auto; display:block;
  box-shadow:0 40px 120px rgba(28,20,10,.5);
  opacity:0; transform:scale(.985);
  transition:opacity .42s var(--ease-out-quart,ease), transform .42s var(--ease-out-quart,ease);
}
.lb.is-shown .lb-fig img{ opacity:1; transform:none; }
.lb-cap{
  position:absolute; inset-inline:0; inset-block-end:clamp(26px,4vh,46px);
  text-align:center; color:rgba(248,245,239,.8);
  font-family:var(--font-text); font-size:.82rem; line-height:1.7; padding-inline:24px;
}
.lb-cap .idx{
  display:block; margin-block-end:8px; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-hero-gold,#E4B65E);
}
.lb-close, .lb-nav{
  position:absolute; background:none; border:0; cursor:pointer; padding:0;
  color:rgba(248,245,239,.72); display:grid; place-items:center;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-close{
  inset-block-start:clamp(16px,2.6vh,30px); inset-inline-end:clamp(16px,3vw,40px);
  inline-size:46px; block-size:46px; border:1px solid rgba(248,245,239,.24); border-radius:50%;
}
.lb-nav{
  inset-block-start:50%; transform:translateY(-50%);
  inline-size:52px; block-size:52px; border:1px solid rgba(248,245,239,.2); border-radius:50%;
}
.lb-prev{ inset-inline-start:clamp(10px,2.2vw,34px); }
.lb-next{ inset-inline-end:clamp(10px,2.2vw,34px); }
.lb-close:hover, .lb-nav:hover, .lb-close:focus-visible, .lb-nav:focus-visible{ color:#F8F5EF; border-color:rgba(248,245,239,.7); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.lb-close svg, .lb-nav svg{ inline-size:17px; block-size:17px; }
.lb-nav[hidden]{ display:none; }
/* arrows follow writing direction */
[dir="rtl"] .lb-prev svg, [dir="rtl"] .lb-next svg{ transform:scaleX(-1); }
body.lb-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .lb, .lb-fig img{ transition:none; }
  .lb-fig img{ opacity:1; transform:none; }
}

/* ============================================================
   SHARED CHROME REFINEMENT (client direction 2026-07-28, §08–09)
   Philosophy extracted from reference: ivory ground, bronze type,
   centered mark, symmetry, minimal links, air. Not copied.
   Additive classes — main.css baseline untouched.
   ============================================================ */

/* ---------- navigation: quieter, fewer, more air ---------- */
.header-editorial .header-inner{ min-block-size:104px; }
.header-editorial.is-condensed .header-inner{ min-block-size:84px; }
.header-editorial .primary-nav{ gap:clamp(22px,3vw,44px); }
.header-editorial .primary-nav a{
  font-size:.86rem; letter-spacing:.04em; color:var(--color-text);
  opacity:.82; transition:opacity var(--motion-fast,.2s) ease;
}
.header-editorial .primary-nav a:hover,
.header-editorial .primary-nav a:focus-visible,
.header-editorial .primary-nav a[aria-current="page"]{ opacity:1; }
.header-editorial .primary-nav a[aria-current="page"]::after{ inline-size:100%; }
.header-editorial .brand .brand-since{ opacity:.85; }

/* ---------- footer: centered mark, one line of links, air ---------- */
.footer-editorial{
  background:var(--color-bg-base); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block:clamp(44px,5vw,78px);
  text-align:center; font-size:.85rem;
}
.footer-editorial .foot-mark{ inline-size:clamp(160px,18vw,230px); block-size:auto; margin-inline:auto; display:block; }
.footer-editorial .foot-brand{
  font-family:var(--font-display-ar); font-size:clamp(1.25rem,1.05rem + .8vw,1.8rem);
  color:var(--color-heading-gold); margin-block:var(--space-3) 0; line-height:1.5;
}
[dir="ltr"] .footer-editorial .foot-brand{ font-family:var(--font-display-lat); }
.footer-editorial .foot-tag{
  margin-block-start:10px; color:var(--color-text-muted);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
}
.footer-editorial .foot-nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,2.6vw,40px);
  margin-block-start:clamp(30px,3.6vw,54px);
}
.footer-editorial .foot-nav a{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-functional); padding-block:4px; position:relative;
}
.footer-editorial .foot-nav a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  inline-size:0; block-size:1px; background:currentColor;
  transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.footer-editorial .foot-nav a:hover::after, .footer-editorial .foot-nav a:focus-visible::after{ inline-size:100%; }
.footer-editorial .foot-offices{
  margin-block-start:clamp(26px,3vw,44px); color:var(--color-text-muted); line-height:2;
  max-inline-size:64ch; margin-inline:auto;
}
.footer-editorial .foot-offices b{ color:var(--color-text); font-weight:500; }
.footer-editorial .foot-rule{
  inline-size:min(220px,40%); block-size:1px; border:0; margin:clamp(30px,3.6vw,54px) auto 0;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne, #C29F63), transparent);
  opacity:.55;
}
.footer-editorial .footer-legal{
  justify-content:center; border-block-start:0; margin-block-start:clamp(18px,2vw,28px);
  padding-block-start:0; font-size:.7rem; color:var(--color-text-muted); letter-spacing:.06em;
}

/* ============================================================
   CENTERED HEADER + MOBILE DRAWER (final refinement 2026-07-28)
   Centered mark, flanking minimal navigation. Logo is the centerpiece.
   ============================================================ */
.header-centered .header-c-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-block-size:118px; gap:clamp(14px,2vw,32px); position:relative;
}
.site-header.header-centered.is-condensed .header-c-inner{ min-block-size:92px; }
.header-centered .nav-side{ display:flex; gap:clamp(13px,1.7vw,26px); align-items:center; }
.header-centered .nav-s{ justify-self:end; }
.header-centered .nav-e{ justify-self:start; }
[dir="ltr"] .header-centered .nav-s{ justify-self:end; }
[dir="ltr"] .header-centered .nav-e{ justify-self:start; }
.header-centered .nav-side a{
  font-family:var(--font-text); font-size:.8rem; white-space:nowrap; letter-spacing:.06em;
  color:var(--color-text); opacity:.82; padding-block:6px; position:relative;
  transition:opacity var(--motion-fast,.2s) ease;
}
.header-centered .nav-side a::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:0; block-size:1px;
  background:var(--color-accent-champagne-deep); transition:inline-size var(--motion-fast,.22s) var(--ease-out-quart,ease);
}
.header-centered .nav-side a:hover, .header-centered .nav-side a:focus-visible,
.header-centered .nav-side a[aria-current="page"]{ opacity:1; }
.header-centered .nav-side a:hover::after, .header-centered .nav-side a[aria-current="page"]::after{ inline-size:100%; }
.header-centered .nav-side .lang-toggle{ opacity:.7; letter-spacing:.14em; }
.brand-center{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; line-height:1.2; }
.brand-center .brand-logo{ inline-size:auto; block-size:44px; transition:block-size var(--motion-base,.3s) var(--ease-in-out,ease); }
.site-header.is-condensed .brand-center .brand-logo{ block-size:34px; }
.brand-center .brand-name{ font-family:var(--font-display-ar); font-size:1.06rem; color:var(--color-text); }
[dir="ltr"] .brand-center .brand-name{ font-family:var(--font-display-lat); }
.brand-center .brand-since{ font-size:.6rem; letter-spacing:.22em; color:var(--color-accent-champagne-deep); text-transform:uppercase; }
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); display:none; }
@media (max-width:880px){
  .header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:96px; }
  .header-centered .nav-side{ display:none; }
  .brand-center{ justify-self:center; }
  .header-centered .nav-burger{ display:flex; }
}

/* ---------- mobile drawer: quiet ivory panel ---------- */
.nav-drawer{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:900;
  inline-size:min(340px,86vw); block-size:100dvh;
  background:var(--color-bg-base,#FBF7EC); border-inline-end:1px solid var(--color-hairline, rgba(59,44,24,.14));
  box-shadow:-24px 0 80px rgba(20,14,5,.16);
  display:flex; flex-direction:column; gap:4px;
  padding:clamp(84px,14vh,120px) clamp(26px,7vw,40px) 40px;
  transform:translateX(102%);           /* panel lives at the inline-start edge (AR right / EN left); +102% is the RTL hide, mirrored for LTR at the end of this file */
  transition:transform .34s var(--ease-out-quart,ease);
}
.nav-drawer[hidden]{ display:none; }    /* display:flex must not defeat the hidden attribute */
.nav-drawer.is-open{ transform:none; }
.nav-drawer a{
  font-family:var(--font-display-ar); font-size:1.35rem; color:var(--color-text);
  padding-block:14px; border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.1));
}
[dir="ltr"] .nav-drawer a{ font-family:var(--font-display-lat); }
.nav-drawer a[aria-current="page"]{ color:var(--color-heading-gold); }
.nav-drawer .lang-toggle{ font-family:var(--font-text); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-champagne-deep); border-block-end:0; margin-block-start:8px; }
body.drawer-open{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .nav-drawer{ transition:none; } }

/* ---------- footer: flanking ornaments (subtle, champagne line-work) ---------- */
.foot-mark-row{ display:flex; align-items:center; justify-content:center; gap:clamp(22px,4vw,48px); }
.foot-orn{ inline-size:clamp(40px,4.6vw,60px); block-size:auto; color:var(--color-accent-champagne); opacity:.42; flex:none; }
@media (max-width:560px){ .foot-orn{ display:none; } }

/* ============================================================
   HOMEPAGE EDITORIAL AIR (final corrections 2026-07-28 §04)
   Calmer rhythm: more breathing room, typography more prominent.
   Additive — no structural change to the locked sections.
   ============================================================ */
.making, .crafts, .languages, .sectors{ padding-block:clamp(72px,8vw,148px); }
.making .h2, .crafts .h2, .languages .h2, .sectors .h2{
  font-size:clamp(2rem,1.3rem + 2.9vw,3.8rem); line-height:1.28; max-inline-size:20ch;
}
.making .standfirst, .crafts .standfirst, .languages .standfirst, .sectors .standfirst{ margin-block-start:var(--space-2); }
.lang-grid{ gap:clamp(18px,2.4vw,34px); }

/* ============================================================
   FINAL POLISH (client 2026-07-28): burger-only header.
   Navigation lives entirely in the drawer; the centered mark,
   flanked by whisper-subtle champagne ornaments, is the focus.
   ============================================================ */
.header-centered .nav-side{ display:none !important; }
.header-centered .nav-burger{ display:flex; flex-direction:column; justify-content:center; }
.header-centered .header-c-inner{ grid-template-columns:1fr; min-block-size:112px; }
.header-centered .brand-center{ justify-self:center; }
/* ornament medallions flanking the wordmark — champagne line-work, very subtle */
.hdr-orn-row{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.hdr-orn{ inline-size:clamp(26px,2.6vw,36px); block-size:auto; color:var(--color-accent-champagne); opacity:.38; flex:none; }
@media (max-width:560px){ .hdr-orn{ display:none; } }
/* burger pinned to the inline-end of the header on all widths */
.header-centered .nav-burger{ position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%); }

/* client's own rosette ornament (from the approved pattern reference) stretching beside the mark */
.hdr-orn-row .hdr-orn{ inline-size:clamp(26px,2.6vw,34px); block-size:auto; opacity:.62; }
.orn-rule{ flex:none; block-size:1px; inline-size:clamp(28px,5vw,96px);
  background:var(--color-accent-champagne); opacity:.32; }
@media (max-width:560px){ .orn-rule{ display:none; } }

/* QA fix 2026-07-29: the generic .editorial eyebrow margin was overriding the About-hero label lift
   (equal specificity, later cascade). This wins: the label sits well clear of the headline. */
.editorial .about-hero .eyebrow{ margin-block-end:clamp(56px,8vw,110px); }

/* ============================================================
   ORNAMENT WATERMARK SYSTEM (prepared 2026-07-29 — awaiting the
   client's official ornament, Open Item V). The ornament becomes
   an architectural watermark carved into the page, never pasted:
   set --orn-url once the official asset arrives and add
   .orn-watermark to any chapter section. Ivory + champagne,
   soft-light emboss, extremely subtle.
   ============================================================ */
:root{ --orn-url:none; }  /* e.g. url("../assets/ornament-official.png") */
.orn-watermark{ position:relative; }
.orn-watermark::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--orn-url);
  background-repeat:no-repeat; background-position:var(--orn-pos, calc(100% + 120px) center);
  background-size:var(--orn-size, min(46vw, 560px));
  mix-blend-mode:soft-light; opacity:var(--orn-opacity, .16);
  filter:sepia(.4) hue-rotate(-8deg) saturate(.7);
}
.orn-watermark > *{ position:relative; z-index:1; }

/* ============================================================
   HORIZONTAL PROCESS TIMELINE (final homepage lock 2026-07-29)
   The homepage previews the workflow typographically; stage
   photography lives in the Service pages.
   ============================================================ */
.timeline-h{
  list-style:none; margin:var(--space-4) 0 0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px) 0;
}
.timeline-h li{
  font-family:var(--font-display-ar); font-weight:400; white-space:nowrap;
  font-size:clamp(1.1rem,.95rem + .8vw,1.7rem); color:var(--color-heading-gold);
}
[dir="ltr"] .timeline-h li{ font-family:var(--font-display-lat); }
.timeline-h li + li::before{
  content:""; display:inline-block; vertical-align:middle;
  inline-size:clamp(22px,3.4vw,64px); block-size:1px;
  background:var(--color-accent-champagne); opacity:.55;
  margin-inline:clamp(10px,1.6vw,26px);
}
@media (max-width:640px){
  .timeline-h{ flex-direction:column; align-items:flex-start; gap:6px; }
  .timeline-h li + li::before{ inline-size:1px; block-size:18px; margin-inline:0; margin-block:2px 4px; display:block; margin-inline-start:2px; }
}

/* ============================================================
   FEATURED WORK — balanced editorial pair (client 2026-07-29)
   Two identical cards, generous air, neither dominant.
   ============================================================ */
.glimpse{ padding-block:clamp(84px,10vw,180px); }
.featured-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,72px);
  margin-block-start:clamp(44px,5.5vw,84px);
  max-inline-size:min(1160px,100%); margin-inline:auto;
}
.featured-pair .glimpse-item{ margin:0; inline-size:100%; }
.featured-pair .frame{ display:block; aspect-ratio:4/3; overflow:hidden; }
.featured-pair .frame img{ inline-size:100%; block-size:100%; object-fit:cover; }
@media (max-width:720px){ .featured-pair{ grid-template-columns:1fr; gap:clamp(36px,8vw,56px); } }

/* ============================================================
   FEATURED WORK — magazine rows (client-approved reference, 2026-07-29)
   Two identical editorial rows: text panel + image, alternating sides.
   ============================================================ */
.fw-head{ text-align:center; max-inline-size:62ch; margin-inline:auto; }
.fw-head .h2{ margin-inline:auto; max-inline-size:none; }
.fw-sub{ margin-block-start:var(--space-2); color:var(--color-text-muted); font-size:1rem; }
.fw-row{
  display:grid; grid-template-columns:minmax(280px,1fr) 2.2fr; align-items:stretch;
  margin-block-start:clamp(44px,5.5vw,84px);
}
.fw-row.alt{ grid-template-columns:2.2fr minmax(280px,1fr); }
.fw-row.alt .fw-text{ order:2; }
.fw-row.alt .fw-img{ order:1; }
.fw-text{
  background:var(--color-stone, #EFE9DF); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,3.6vw,64px);
}
.fw-text h3{
  font-family:var(--font-display-ar); font-weight:400; color:var(--color-text);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem); line-height:1.3; margin:0 0 .55em;
}
[dir="ltr"] .fw-text h3{ font-family:var(--font-display-lat); }
.fw-desc{ color:var(--color-text-muted); line-height:1.95; max-inline-size:34ch; margin:0 0 1.4em; }
.fw-img{ block-size:clamp(300px,34vw,480px); overflow:hidden; }
.fw-img img{ inline-size:100%; block-size:100%; object-fit:cover; }
.fw-link{
  font-family:var(--font-text); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep, #8A5E20);
  display:inline-flex; align-items:center; gap:8px;
  border-block-end:1px solid transparent; padding-block-end:3px; align-self:flex-start;
  transition:border-color var(--motion-fast,.22s) ease;
}
.fw-link:hover, .fw-link:focus-visible{ border-block-end-color:currentColor; }
.fw-more{ text-align:center; margin-block-start:clamp(44px,5.5vw,84px); }
.fw-more .fw-link{ font-size:.84rem; }
@media (max-width:820px){
  .fw-row, .fw-row.alt{ grid-template-columns:1fr; }
  .fw-row .fw-img, .fw-row.alt .fw-img{ order:1; block-size:clamp(220px,52vw,360px); }
  .fw-row .fw-text, .fw-row.alt .fw-text{ order:2; }
}

/* ============================================================
   OFFICIAL AL ARABI ORNAMENT SYSTEM (client 2026-07-29)
   The official carved-gypsum patterns as embossed atmosphere:
   warm-bronze ridges at 3–8% alpha (baked into the assets),
   carved into the page — never pasted, never touching content.
   One vocabulary, everywhere. Replaces all drawn SVG ornaments.
   ============================================================ */
/* manifesto — diamond linework replaces the old photo overlay */
.manifesto::before{
  background:url("../assets/orn-diamond.png") center/cover no-repeat;
  mix-blend-mode:normal; opacity:1; filter:none;
}
/* heritage chapter — fan palmettes on the warm stone; the drawn medallion is retired */
.heritage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-fans.png") center/cover no-repeat;
}
.heritage-ornament{ display:none; }
/* footer — the pierced floral lattice, barely there */
.footer-editorial{ position:relative; overflow:hidden; }
.footer-editorial::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-lattice.png") center top / min(640px,80vw) repeat;
}
.footer-editorial > .container{ position:relative; z-index:1; }
.footer-editorial p{ max-inline-size:none; margin-inline:auto; }
.footer-editorial .foot-offices{ max-inline-size:64ch; }
/* commission CTA — chevron relief on ivory (appears on every page) */
.commission{ position:relative; overflow:hidden; }
.commission::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/orn-chevron.png") center/cover no-repeat;
}
.commission > .container{ position:relative; z-index:1; }
/* inner-page opening section — a feather-shingle corner watermark, clear of the text column */
.editorial > .about-section:first-child{ position:relative; overflow:hidden; }
.editorial > .about-section:first-child::before{
  content:""; position:absolute; inset-block-start:-30px; inset-inline-end:-70px;
  inline-size:min(44vw,520px); aspect-ratio:445/330; pointer-events:none;
  background:url("../assets/orn-feather.png") center/contain no-repeat;
}
.editorial > .about-section:first-child .container{ position:relative; z-index:1; }
/* utility divider for future pages — the radial sunburst medallion */
.orn-divider{
  display:block; inline-size:56px; aspect-ratio:225/255; margin:clamp(30px,4vw,56px) auto;
  background:url("../assets/orn-sunburst.png") center/contain no-repeat;
}

/* ============================================================
   TEAM PHOTOGRAPHY — natural on the ivory page (client 2026-07-29)
   No dark containers. Clean editorial crops, a whisper of
   champagne mount — like prints mounted in a monograph.
   ============================================================ */
.team-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,44px);
  margin-block-start:clamp(40px,5vw,72px);
}
@media (max-width:760px){ .team-row{ grid-template-columns:1fr; } }
.team-fig{ margin:0; }
.team-fig .mount{
  display:block; padding:clamp(8px,1vw,14px); background:var(--color-bg-base,#FBF7EC);
  border:1px solid var(--color-accent-champagne,#C29F63);
}
.team-fig .mount img{
  inline-size:100%; block-size:auto; aspect-ratio:4/5; object-fit:cover; display:block;
}
.team-fig figcaption{
  margin-block-start:12px; font-family:var(--font-text); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); text-align:center;
}

/* ============================================================
   PROCESS TIMELINE — architectural drafting composition
   (final homepage refinement, client 2026-07-29)
   The section sits on a faint drafting sheet: compass circles,
   construction ticks, proportional guides — bronze at ~3-4%,
   discovered rather than seen. The six stages are joined by one
   fine bronze line through compass-circle nodes: craftsmanship
   as a continuous, measured process.
   ============================================================ */
.making{ position:relative; overflow:hidden; }
.making::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 640'><g fill='none' stroke='rgb(138,109,43)' stroke-opacity='0.045' stroke-width='1'><circle cx='1050' cy='300' r='250'/><circle cx='1050' cy='300' r='178'/><circle cx='1050' cy='300' r='96'/><line x1='1050' y1='20' x2='1050' y2='580'/><line x1='770' y1='300' x2='1330' y2='300'/><line x1='860' y1='110' x2='1240' y2='490'/><line x1='1240' y1='110' x2='860' y2='490'/><g stroke-opacity='0.06'><line x1='1050' y1='46' x2='1050' y2='58'/><line x1='1050' y1='542' x2='1050' y2='554'/><line x1='796' y1='300' x2='808' y2='300'/><line x1='1292' y1='300' x2='1304' y2='300'/></g><circle cx='240' cy='430' r='120'/><circle cx='240' cy='430' r='58'/><line x1='90' y1='430' x2='390' y2='430'/><line x1='240' y1='280' x2='240' y2='580'/><line x1='60' y1='80' x2='1340' y2='80' stroke-opacity='0.035'/><line x1='60' y1='560' x2='1340' y2='560' stroke-opacity='0.035'/><line x1='432' y1='40' x2='432' y2='600' stroke-opacity='0.03'/><line x1='866' y1='40' x2='866' y2='600' stroke-opacity='0.03'/></g></svg>");
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
/* the official sunburst medallion emerging from the construction circle — ornament fragment blended into the drafting sheet */
.making::after{
  content:''; position:absolute; pointer-events:none;
  inset-block-start:12%; inset-inline-start:66%; inline-size:min(24vw,300px); aspect-ratio:640/725;
  background:url('../assets/orn-sunburst-faint.png') center/contain no-repeat;
}
.making > .container{ position:relative; z-index:1; }

/* the six stages — compass nodes on one continuous bronze line */
.timeline-h{
  position:relative; justify-content:space-between;
  padding-block-start:44px; margin-block-start:clamp(40px,5vw,64px);
}
.timeline-h::before{
  content:""; position:absolute; inset-block-start:9px; inset-inline:1%;
  block-size:1px;
  background:linear-gradient(to right, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent);
  opacity:.5;
}
.timeline-h li{ position:relative; text-align:center; }
.timeline-h li::after{
  content:""; position:absolute; inset-block-start:-42px; inset-inline-start:calc(50% - 9px);
  inline-size:18px; block-size:18px; border-radius:50%;
  border:1px solid var(--color-accent-champagne-deep,#8A5E20); opacity:.75;
  background:
    radial-gradient(circle at center, var(--color-accent-champagne-deep,#8A5E20) 1.6px, transparent 2.2px),
    var(--color-bg-base,#FBF7EC);
}
/* the old dash separators retire — the construction line is the connection now */
.timeline-h li + li::before{ display:none; }
@media (max-width:640px){
  .timeline-h{ padding-block-start:0; padding-inline-start:30px; }
  .timeline-h::before{ inset-inline:auto; inset-inline-start:8px; inset-block:6px 6px; inline-size:1px; block-size:auto;
    background:linear-gradient(to bottom, transparent, var(--color-accent-champagne,#C29F63) 10%, var(--color-accent-champagne,#C29F63) 90%, transparent); }
  .timeline-h li{ text-align:start; }
  .timeline-h li::after{ inset-block-start:calc(50% - 9px); inset-inline-start:-30px; }
}

/* ---- Applications as editorial labels, not UI chips (final service review, 2026-07-30) ----
   Bronze hairline + bronze type on ivory, square-cut. Scoped to service pages via .chips-editorial
   so the locked About page keeps its original chips. No letter-spacing in RTL (connected script). */
.editorial .reach-cities.chips-editorial span{
  border:1px solid rgba(138,109,43,.38);
  color:var(--color-bronze, #8A5E20);
  background:var(--color-bg, #FDFBF6);
  border-radius:2px;
  padding:10px 24px;
  font-size:.9rem;
}
[dir="ltr"] .editorial .reach-cities.chips-editorial span{ letter-spacing:.04em; }

/* ---- Service chapter pager (client UX directive 2026-07-30) ----
   Services behave like chapters of one publication: every service page carries
   previous/next links to its neighbouring crafts so a visitor never returns to
   the homepage to change chapter. Logical properties keep it RTL/LTR correct. */
.svc-pager{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,48px);
  margin-block-start:clamp(44px,6vw,86px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  padding-block-start:clamp(22px,3vw,38px);
}
.svc-pager a{ text-decoration:none; display:block; }
.svc-pager .dir{
  display:block; font-family:var(--font-text); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep, #A58452); margin-block-end:.7em;
}
.svc-pager b{
  display:block; font-family:var(--font-display-ar); font-weight:400;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem); line-height:1.4; color:var(--color-heading-gold, #8A5E20);
}
.svc-pager .en{ display:block; font-family:var(--font-text); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-text-muted); margin-block-start:.5em; }
.svc-pager .next{ text-align:end; }
.svc-pager .prev{ text-align:start; }
.svc-pager a:hover b{ color:var(--color-text); }
@media (max-width:640px){ .svc-pager{ grid-template-columns:1fr; row-gap:26px; }
  .svc-pager .next, .svc-pager .prev{ text-align:start; } }

/* ---- Portfolio: sector chapters + project roster (2026-07-30) ----
   Names are the only thing that changes when approvals land; the layout never does.
   Confidential and pending entries are first-class citizens, not gaps. */
.pf-index{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-block-start:var(--space-3); }
.pf-index a{ font-family:var(--font-text); font-size:.9rem; text-decoration:none;
  color:var(--color-bronze,#8A5E20); border:1px solid rgba(138,109,43,.38); background:var(--color-bg,#FDFBF6);
  border-radius:2px; padding:10px 22px; }
.pf-index a:hover{ border-color:rgba(138,109,43,.7); }
.pf-roster{ margin-block-start:var(--space-4); }
.pf-item{ display:grid; grid-template-columns:1fr auto; gap:8px clamp(16px,2.4vw,40px); align-items:baseline;
  padding-block:clamp(15px,1.7vw,24px); border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); }
.pf-item:first-child{ border-block-start:0; }
.pf-item b{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.1rem,.98rem + .6vw,1.45rem);
  color:var(--color-text); line-height:1.45; }
.pf-item .city{ display:block; font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); margin-block-start:.45em; }
.pf-item .tag{ font-family:var(--font-text); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep,#A58452); white-space:nowrap; }
.pf-item.is-held b{ color:var(--color-heading-gold,#8A5E20); }
@media (max-width:560px){ .pf-item{ grid-template-columns:1fr; } .pf-item .tag{ white-space:normal; } }

/* ---- Portfolio project cards (client refinement 2026-07-30) ----
   Every project is a real editorial card: image (or an honest pending tile),
   title, city, sector, the crafts involved, and a View Project link.
   Only the card DESTINATION changes when detail pages ship. */
.pf-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(26px,3.2vw,54px); margin-block-start:var(--space-4); }
.pf-card{ display:flex; flex-direction:column; }
.pf-card .shot{ position:relative; overflow:hidden; background:var(--color-bg-muted); aspect-ratio:4/3; }
.pf-card .shot img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.pf-card .pending{ display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px solid rgba(138,109,43,.30); background:var(--color-bg,#FDFBF6); }
.pf-card .pending span{ font-family:var(--font-text); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); padding:0 18px; line-height:1.9; }
.pf-card h3{ font-family:var(--font-display-ar); font-weight:400; line-height:1.4;
  font-size:clamp(1.12rem,1rem + .6vw,1.48rem); color:var(--color-text); margin-block:1em .1em; }
.pf-card.is-held h3{ color:var(--color-heading-gold,#8A5E20); }
.pf-card .where{ font-family:var(--font-text); font-size:.85rem; color:var(--color-text-muted); }
.pf-card .state{ display:block; font-family:var(--font-text); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452); margin-block-start:.85em; }
.pf-crafts{ display:flex; flex-wrap:wrap; gap:7px 8px; margin-block-start:.95em; }
.pf-crafts a{ font-family:var(--font-text); font-size:.72rem; text-decoration:none; color:var(--color-bronze,#8A5E20);
  border:1px solid rgba(138,109,43,.34); border-radius:2px; padding:6px 13px; background:var(--color-bg,#FDFBF6); }
.pf-crafts a:hover{ border-color:rgba(138,109,43,.7); }
.pf-card .go{ margin-block-start:auto; padding-block-start:1.1em; }
.pf-card .go a{ font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--color-heading-gold,#8A5E20); border-block-end:1px solid rgba(138,109,43,.4); padding-block-end:3px; }
.pf-card .go a:hover{ border-color:rgba(138,109,43,.9); }

/* ---- 03 · Editorial project covers (replaces "photography pending" tiles) ----
   An ornament-and-type cover in the house language. It is an editorial introduction
   to the destination — never presented as Al Arabi execution photography.
   When official project photography arrives, only the cover is swapped: the card
   never changes. */
.pf-card .cover{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(138,109,43,.075) 0%, transparent 62%),
    linear-gradient(160deg, #FBF7EE 0%, #F4EDE0 100%);
  border:1px solid rgba(138,109,43,.20);
}
.pf-card .cover::before{                     /* official ornament, carved not pasted */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../assets/orn-fans.png') center/150% no-repeat;
  opacity:.85;
}
.pf-card .cover .mark{                       /* the destination initial, as a monogram */
  position:absolute; inset-block-start:-.18em; inset-inline-end:.12em;
  font-family:var(--font-display-lat); font-size:clamp(5.4rem,9vw,8.2rem); line-height:1;
  color:rgba(138,109,43,.13); user-select:none;
}
.pf-card .cover .label{
  position:relative; padding:clamp(16px,2vw,22px); inline-size:100%;
}
.pf-card .cover .label b{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1.35;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem); color:var(--color-heading-gold,#8A5E20);
}
.pf-card .cover .label span{
  display:block; margin-block-start:.55em; font-family:var(--font-text); font-size:.62rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--color-accent-champagne-deep,#A58452);
}

/* ---- 06 · Clients / Trusted by — understated bronze wordmarks, never colourful ---- */
.clients-note{ margin-block-start:var(--space-3); font-size:.86rem; color:var(--color-text-muted); max-inline-size:62ch; }

/* ---- 05B · About statistics — editorial, not dashboard ---- */
.stat-editorial{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(24px,3vw,58px); margin-block-start:var(--space-4);
}
.stat-editorial .fig{ border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14)); padding-block-start:clamp(16px,1.8vw,24px); }
.stat-editorial .num{
  display:block; font-family:var(--font-display-ar); font-weight:400; line-height:1;
  font-size:clamp(2.6rem,1.9rem + 2.4vw,4.4rem); color:var(--color-heading-gold,#8A5E20);
  font-variant-numeric:lining-nums tabular-nums;
}
.stat-editorial .cap{
  display:block; margin-block-start:.7em; font-family:var(--font-text); font-size:.9rem;
  line-height:1.75; color:var(--color-text-muted); max-inline-size:26ch;
}

/* footer compacted ~28% (client priority 04) — ornament, logo, navigation and
   identity all retained; only empty vertical space removed. */
.footer-editorial{ padding-block:clamp(42px,5vw,76px) !important; }
.footer-editorial .foot-mark{ inline-size:clamp(150px,15vw,196px) !important; margin-block-end:.5em !important; }
.footer-editorial .foot-tag{ margin-block-end:clamp(20px,2.4vw,30px) !important; }
.footer-editorial .foot-nav{ margin-block:clamp(16px,2vw,24px) !important; }
.footer-editorial .foot-offices{ margin-block-start:clamp(14px,1.8vw,22px) !important; line-height:1.85 !important; }
.footer-editorial .foot-rule{ margin-block:clamp(20px,2.6vw,32px) !important; }
.footer-editorial .footer-legal{ margin-block-start:0 !important; }

/* ============================================================
   TYPOGRAPHY — display headlines returned to their approved balance
   (2026-07-31, client correction: the wrong titles were enlarged).
   Hierarchy now comes from the editorial LABELS below, not from
   inflating the display type.
   ============================================================ */



/* POLISH 03 · Portfolio sector previews — two projects, then Explore More */
.pf-card[hidden]{ display:none !important; }   /* author display must not defeat [hidden] */
.pf-more{ margin-block-start:clamp(26px,3vw,44px); }
.pf-more button{
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-heading-gold,#8A5E20); background:none; border:0; cursor:pointer;
  border-block-end:1px solid rgba(138,109,43,.4); padding:0 0 4px;
}
.pf-more button:hover{ border-color:rgba(138,109,43,.9); }
.pf-more .count{ font-size:.72rem; color:var(--color-text-muted); letter-spacing:.06em; text-transform:none; }

/* POLISH 05 · Clients as editorial chips — the same language as applications and cities */
.clients-chips{ display:flex; flex-wrap:wrap; gap:12px 14px; margin-block-start:var(--space-4); }
.clients-chips span{
  font-family:var(--font-text); font-size:.92rem; line-height:1;
  color:var(--color-bronze,#8A5E20);
  background:var(--color-bg,#FDFBF6);
  border:1px solid rgba(138,109,43,.38); border-radius:2px;
  padding:13px 24px;
}

/* EDITORIAL LABELS — القطاع · مختارات · منهجية الصنعة · خدماتنا · مشاريعنا
   These carry the hierarchy now: larger, heavier, darker bronze, and anchored
   by a short rule so a label reads as a chapter marker rather than a caption. */
.editorial .eyebrow{
  font-family:var(--font-text);
  font-size:clamp(1.25rem, 1.15rem + .27vw, 1.45rem);   /* eyebrow +15% again (client 2026-08-03) */
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--color-bronze, #8A5E20);
  display:flex; align-items:center; gap:.85em;
  margin-block-end:1.15em;
}
.editorial .eyebrow::before{
  content:""; display:block; display:block; inline-size:clamp(38px,4vw,66px); block-size:1px; flex:none;
  background:linear-gradient(to var(--_lbl,left), rgba(138,109,43,.75), rgba(138,109,43,.15));
}
[dir="ltr"] .editorial .eyebrow{ --_lbl:right; }
/* the About hero eyebrow sits on photography — keep it champagne and rule-free */
.editorial .about-hero .eyebrow{ display:block; color:var(--color-accent-champagne-on-dark); }
.editorial .about-hero .eyebrow::before{ content:none; }

/* ============================================================
   SERVICES OPENING — the craftsman's sheet (v5, 2026-08-03)
   Three layers, back to front:
     ::before      warm paper with a tooth of grain, worked across the whole opening
     .svc-sheet    the real working drawing — half-carved medallion, cornice
                   section, the pencil — multiplied into the ivory so the paper
                   disappears and only the graphite stays
     ::after       quiet set-out geometry spread edge to edge, for rhythm
   70% craft, 30% drafting. Nothing with a hard edge anywhere.
   ============================================================ */
/* the drawing itself — laid on the side the text leaves empty, so it never
   competes with a word. Mirrors automatically: it is pinned to inline-end. */
main.editorial > .about-section.svc-atmosphere > .svc-sheet{
  position:absolute; z-index:-2; pointer-events:none;
  inset-block:-14% -20%; inset-inline-end:-15%;
  inline-size:min(72%, 1080px);
  background:url('../assets/svc-sketch-atmos.jpg') center center / cover no-repeat;
  mix-blend-mode:multiply;
  opacity:.2;
  -webkit-mask-image:radial-gradient(closest-side, #000 0%, #000 26%, rgba(0,0,0,.34) 62%, transparent 94%);
          mask-image:radial-gradient(closest-side, #000 0%, #000 26%, rgba(0,0,0,.34) 62%, transparent 94%);
}
@media (prefers-reduced-motion:no-preference){
  main.editorial > .about-section.svc-atmosphere > .svc-sheet{ will-change:auto; }
}
main.editorial > .about-section.svc-atmosphere{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block-start:clamp(56px,7vw,116px);
  padding-block-end:clamp(72px,8.5vw,132px);
  min-block-size:clamp(430px,44vw,640px);
}
/* the paper itself: a tooth of grain across the whole opening, a warm wash where
   the light falls, and a carved fragment bled off each far corner */
main.editorial > .about-section.svc-atmosphere::before{
  content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  /* the ornament-system feather rule also targets this pseudo-element and gives it
     a fixed inline-size + aspect-ratio. `inset:0` alone cannot stretch a box that
     already has an explicit size, which is why the grain painted as a 520x385
     block in the corner. These three lines are what actually release it. */
  inline-size:auto; block-size:auto; aspect-ratio:auto;
  background:
    url('../assets/paper-grain.png') 0 0 / 200px 200px repeat,
    radial-gradient(120% 90% at 18% 88%, rgba(138,109,43,.06) 0%, transparent 58%),
    radial-gradient(110% 85% at 86% 12%, rgba(138,109,43,.05) 0%, transparent 55%),
    radial-gradient(140% 110% at 50% 40%, rgba(184,152,88,.045) 0%, transparent 70%),
    url('../assets/orn-fans.png')    -8% 112% / min(38vw,420px) no-repeat,
    url('../assets/orn-feather.png') 106% -12% / min(32vw,360px) no-repeat;
  opacity:.92;
}
/* the drawn sheet — masked in far enough that every line genuinely fades out
   before it reaches an edge, so nothing is ever seen to be cut off */
main.editorial > .about-section.svc-atmosphere::after{
  content:""; position:absolute; inset:-4% -3%; z-index:-2; pointer-events:none;
  background:url('../assets/svc-drafting-sheet.svg') center center / 104% auto no-repeat;
  -webkit-mask-image:radial-gradient(88% 96% at 50% 48%, #000 0%, #000 44%, rgba(0,0,0,.45) 76%, transparent 97%);
          mask-image:radial-gradient(88% 96% at 50% 48%, #000 0%, #000 44%, rgba(0,0,0,.45) 76%, transparent 97%);
}
main.editorial > .about-section.svc-atmosphere > .container{ position:relative; }

@media (max-width:900px){
  main.editorial > .about-section.svc-atmosphere{ min-block-size:clamp(400px,52vw,470px); }
  /* the whole rosette sits inside the frame at this width — nothing reads as cropped */
  main.editorial > .about-section.svc-atmosphere::after{ background-size:108% auto; background-position:50% 44%; }
  /* bias off the dimensioned section and onto the carving — the narrower the
     column, the more the atmosphere has to be craft rather than measurement */
  main.editorial > .about-section.svc-atmosphere > .svc-sheet{
    inline-size:min(86%, 720px); inset-inline-end:-22%;
    background-position:34% 48%;
  }
}
@media (max-width:620px){
  /* one whole motif rather than a crop of several — the rosette set-out reads
     clearly at this width and the dome carries the top corner */
  main.editorial > .about-section.svc-atmosphere{ min-block-size:0; }
  main.editorial > .about-section.svc-atmosphere::after{
    background-size:250% auto; background-position:5% 100%;
    -webkit-mask-image:radial-gradient(118% 104% at 30% 76%, #000 0%, #000 58%, rgba(0,0,0,.55) 86%, transparent 99%);
            mask-image:radial-gradient(118% 104% at 30% 76%, #000 0%, #000 58%, rgba(0,0,0,.55) 86%, transparent 99%);
  }
  /* on a phone the drawing goes full-bleed behind the column and settles on the
     half-drawn medallion — pure graphite, no dimension figures, quieter still */
  main.editorial > .about-section.svc-atmosphere > .svc-sheet{
    inset:-6% -8%; inline-size:auto;
    background-size:246% auto; background-position:6% 40%;
    opacity:.17;
    -webkit-mask-image:radial-gradient(118% 92% at 40% 48%, #000 0%, #000 34%, rgba(0,0,0,.35) 70%, transparent 98%);
            mask-image:radial-gradient(118% 92% at 40% 48%, #000 0%, #000 34%, rgba(0,0,0,.35) 70%, transparent 98%);
  }
}

/* ============================================================
   CLIENTS MARQUEE — slow, continuous, premium (client 2026-08-01)
   ~14px/s: you notice the wall has changed, you never catch it moving.
   The edges fade so a mark appears and dissolves rather than sliding past a
   hard boundary. Pauses on hover and on keyboard focus, and stands completely
   still — laid out as a quiet grid — for anyone who prefers reduced motion.
   ============================================================ */
.client-marquee{
  position:relative; overflow:hidden; margin-block-start:var(--space-4);
  border-block:1px solid var(--color-hairline,rgba(59,44,24,.14));
  padding-block:clamp(22px,2.6vw,34px);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.client-marquee .track{
  display:flex; align-items:center; gap:clamp(48px,6vw,104px);
  inline-size:max-content;
  animation:client-drift 195s linear infinite; /* client direction 2026-09-15: pace raised twice — 290s → 220s → 195s */
}
.client-marquee:hover .track,
.client-marquee:focus-within .track{ animation-play-state:paused; }
/* Official brand marks are shown exactly as published — full colour, original
   proportions, no filter, no recolouring. Sizing is OPTICAL, not uniform: a
   stacked crest and a wide wordmark set to the same pixel height read at wildly
   different weights. Each mark is scaled proportionally so the wall sits evenly. */
.client-marquee img{ inline-size:auto; flex:none; opacity:.94; }
.client-marquee img.cm-wide { block-size:clamp(21px,2.1vw,29px); }   /* HYATT, KidZania, wordmarks */
.client-marquee img.cm-mid  { block-size:clamp(27px,2.7vw,37px); }   /* Rosewood, The Avenues */
.client-marquee img.cm-stack{ block-size:clamp(44px,4.5vw,62px); }   /* Hilton, Sheraton, the Ministry, The Avenues */
/* Rosewood is published on a white ground; multiplying lets that ground fall away
   into the ivory without touching a single colour in the mark itself */
.client-marquee img[src$="rosewood.png"]{ mix-blend-mode:multiply; }
/* Ritz-Carlton reads finer than its peers at the shared stack size — ~13%% larger per client direction */
.client-marquee img[src$="ritz-carlton.svg"]{ block-size:clamp(50px,5.1vw,70px); }
/* The 2026-09-15 supplied marks arrived on white grounds; those grounds were made
   genuinely transparent in the PNGs themselves (blend modes cannot be relied on
   here — the track's animated transform isolates the stacking context), so they
   need no treatment. The artwork itself is untouched. */

/* When official full-colour brand marks are supplied they are placed here as-is
   and given class "as-supplied" — never redrawn, never recoloured. Only the
   bronze typographic marks below carry the unifying treatment. */
.client-marquee img.as-supplied{ opacity:1; }
@keyframes client-drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
[dir="rtl"] .client-marquee .track{ animation-name:client-drift-rtl; }
@keyframes client-drift-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
@media (prefers-reduced-motion:reduce){
  [dir] .client-marquee .track,
  .client-marquee .track{
    animation:none !important; flex-wrap:wrap; justify-content:center; inline-size:100%;
    gap:clamp(30px,4vw,60px) clamp(38px,5vw,80px);
  }
}

/* ============================================================
   CLIENTS WALL — the still version, for Portfolio. Same official marks and the
   same optical sizing as the homepage marquee; no movement, because a page that
   is already an archive does not need any.
   ============================================================ */
.client-wall{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  margin-block-start:var(--space-4);
  border-block-start:1px solid var(--color-hairline,rgba(59,44,24,.14));
  border-inline-start:1px solid var(--color-hairline,rgba(59,44,24,.14));
}
.client-wall span{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(22px,2.6vw,34px) clamp(14px,1.8vw,24px);
  border-block-end:1px solid var(--color-hairline,rgba(59,44,24,.14));
  border-inline-end:1px solid var(--color-hairline,rgba(59,44,24,.14));
}
.client-wall img{ inline-size:auto; max-inline-size:100%; opacity:.94; }
.client-wall img.cm-wide { block-size:clamp(20px,2vw,27px); }
.client-wall img.cm-stack{ block-size:clamp(42px,4.3vw,58px); }
.client-wall img[src$="rosewood.png"]{ mix-blend-mode:multiply; }

/* ============================================================
   ARTISTIC STYLES — the monograph (2026-08-03)
   Each chapter is a different architectural language, so each carries its own
   colour without ever leaving the ivory system: one --style-tint per section
   feeds a whisper of wash at the head of the chapter, the numeral, the rule
   under the eyebrow and the swatch frames. Scrolling the page should feel like
   moving between traditions, not between templates.
   ============================================================ */
.style-chapter{ position:relative; isolation:isolate; overflow:hidden; }
.style-chapter::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:min(46%, 340px);
  z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--style-tint, #8A5E20) 7%, transparent) 0%,
    transparent 100%);
}
/* the chapter's own hairline, in its own colour */
.style-chapter > .container > .eyebrow::before{
  background:linear-gradient(to var(--_lbl,left),
    color-mix(in srgb, var(--style-tint,#8A5E20) 85%, transparent),
    color-mix(in srgb, var(--style-tint,#8A5E20) 15%, transparent)) !important;
}
/* the name in both scripts — the second one set as a quiet specimen line */
.style-latin{
  display:block; font-family:var(--font-text);
  font-size:clamp(.78rem,.7rem + .3vw,.95rem); font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--color-text-muted); margin-block-start:.7em;
}
[dir="rtl"] .style-latin{ direction:ltr; text-align:right; }

/* ---------- the index: every card now leads to its chapter ---------- */
.lang-card{ position:relative; }
.style-num{
  font-family:var(--font-text); font-style:normal; font-weight:700;
  font-size:.62em; letter-spacing:.18em; opacity:.72;
  margin-inline-end:.9em; vertical-align:.18em;
}

/* ---------- specimen: elements, materials, ornament, palette ---------- */
.style-spec{
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(28px,4vw,72px);
  align-items:start; margin-block-start:clamp(34px,4vw,64px);
}
@media (max-width:820px){ .style-spec{ grid-template-columns:1fr; } }
.style-spec .worklist{ margin:0; }
.style-orn-note{ color:var(--color-text-muted); }
.style-orn-note b{ color:var(--color-bronze,#8A5E20); font-weight:600; }

.palette{ display:flex; flex-direction:column; gap:10px; }
.palette-label{
  font-family:var(--font-text); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-text-muted); margin:0 0 .5em;
}
.swatch{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-text); font-size:.88rem; color:var(--color-text);
}
.swatch i{
  inline-size:38px; block-size:38px; flex:none; border-radius:1px;
  border:1px solid color-mix(in srgb, var(--style-tint,#8A5E20) 34%, transparent);
  box-shadow:inset 0 0 0 3px var(--color-bg,#FDFBF6);
}

/* ---------- plates ---------- */
.style-plate{ margin-block-start:clamp(34px,4.4vw,68px); }
.style-concept{
  margin-block-start:12px; font-family:var(--font-text); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted);
}
/* the honest empty slot — no borrowed photograph stands in for a missing one */
.style-pending{
  margin-block-start:clamp(34px,4.4vw,68px);
  display:flex; align-items:center; justify-content:center;
  min-block-size:clamp(150px,17vw,230px);
  border:1px solid color-mix(in srgb, var(--style-tint,#8A5E20) 30%, transparent);
  background:color-mix(in srgb, var(--style-tint,#8A5E20) 3%, transparent);
}
.style-pending span{
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--color-bronze,#8A5E20);
}

.style-foot{
  margin-block-start:clamp(34px,4.4vw,66px);
  padding-block-start:clamp(24px,3vw,40px);
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
}

/* Bespoke is a philosophy, not a style: any photograph of a room would imply a
   look it does not have. It carries an editorial cover from the official
   ornament library instead — the same honesty as the pending tile, without
   pretending anything is missing. */
.lang-card-editorial{
  display:flex; align-items:flex-end; justify-content:center; text-decoration:none;
  position:relative; overflow:hidden; min-block-size:220px;
  padding-block-end:clamp(22px,3vw,38px);
  background:
    url('../assets/ornament-rosette.png') center 27% / min(50%, 178px) no-repeat,
    linear-gradient(160deg, #FBF8F2 0%, #F3EEE4 100%);
  border:1px solid rgba(138,109,43,.26);
}
/* the carving sits above the name, never behind it */
.lang-card-editorial::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:40%;
  background:linear-gradient(to top, #FBF8F2 42%, rgba(251,248,242,.86) 72%, transparent 100%);
}
.editorial-inner{
  position:relative; z-index:1; text-align:center; padding:0 18px;
  font-family:var(--font-display-ar); font-size:clamp(1.15rem,1rem + .7vw,1.6rem);
  line-height:1.35; color:var(--color-heading-gold);
}
.editorial-inner small{
  display:block; margin-block-start:.7em; font-family:var(--font-text);
  font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-bronze,#8A5E20); opacity:.85;
}
.editorial-inner .style-num,
.pending-inner .style-num{ display:block; margin:0 0 .5em; opacity:.6; }

/* ============================================================
   INDUSTRIES OPENING — atmosphere, not a banner (2026-08-03)
   The page answers "where". The opening therefore carries the quietest
   possible sense of reach: warm paper, one long low sweep of light, and a
   single carved rosette from the official ornament library bled off the far
   corner. No headline change, no layout change, nothing that reads as a hero.
   ============================================================ */
main.editorial > .about-section.ind-atmosphere{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block-end:clamp(52px,6vw,92px);
}
main.editorial > .about-section.ind-atmosphere::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  /* the ornament-system feather rule also targets this pseudo-element and gives
     it a fixed inline-size + aspect-ratio; inset:0 alone cannot stretch a box
     that already has an explicit size. These three lines release it. */
  inline-size:auto; block-size:auto; aspect-ratio:auto;
  background:
    url('../assets/paper-grain.png') 0 0 / 200px 200px repeat,
    radial-gradient(120% 78% at 78% 8%,  rgba(138,109,43,.055) 0%, transparent 62%),
    radial-gradient(100% 70% at 12% 96%, rgba(138,109,43,.042) 0%, transparent 58%);
  opacity:.9;
  /* dissolve into the first sector rather than stopping on a hard line at the
     section boundary — the ground should never announce where it ends */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
/* one carved rosette, very large, mostly off the page — the same official
   ornament the rest of the site uses, at a strength you notice only after
   you have read the sentence */
main.editorial > .about-section.ind-atmosphere::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block-start:-14%; inset-inline-end:-11%;
  inline-size:min(46vw,540px); aspect-ratio:1/1;
  background:url('../assets/ornament-rosette.png') center / contain no-repeat;
  opacity:.055;
}
@media (max-width:720px){
  main.editorial > .about-section.ind-atmosphere::after{
    inline-size:min(78vw,380px); inset-block-start:-8%; inset-inline-end:-24%; opacity:.045;
  }
}

/* Supporting project photography inside an industry section. Two columns, with
   the first plate carrying the full width so the set opens on its strongest
   frame. Not a gallery: capped at five by the build, and every image belongs to
   the sector it sits in. */
.ind-support{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:clamp(14px,1.8vw,26px);
  margin-block-start:.8em;
}
.ind-support > figure{ margin:0; }
/* only a landscape plate is allowed to run the full width — a portrait one
   spanning both columns becomes taller than the hero and takes the section over */
.ind-support > figure.wide{ grid-column:1 / -1; }
@media (max-width:640px){
  /* same reason as .figure-pair: switching the track count is not enough on this
     page, the spanning plate still resolves into a zero-width track. Leave grid. */
  .ind-support{ display:flex; flex-direction:column; }
  .ind-support > figure.wide{ grid-column:auto; }
  .ind-support > figure{ inline-size:100%; }
}

/* ============================================================
   A figure-pair stacks on phones — always (2026-08-04)
   about.css already says so, but every figure-pair on the site carries an inline
   grid-template-columns to set its own asymmetry, and an inline style wins. At
   phone width the text column's min-content width then squeezes the image column
   to zero, and the photograph renders 0x0: loaded, present, invisible.
   ============================================================ */
@media (max-width:720px){
  /* Overriding grid-template-columns alone does not do it — the inline value keeps
     resolving to a 322px track plus two zero-width ones, and the image lands in a
     zero track. Taking the element out of grid entirely is what actually works:
     verified live, 0x0 -> 350x263. */
  .figure-pair{
    display:flex !important; flex-direction:column;
    gap:clamp(14px,2vw,28px);
  }
  .figure-pair > *{ inline-size:100%; }
}

/* the View More panel */
.ind-more{ margin-block-start:var(--space-4); }
.ind-more .pf-cards{ margin-block-start:.8em; }
.ind-more-toggle button{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-text); font-size:.78rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-bronze,#8A5E20);
}
.ind-more-toggle button:hover{ text-decoration:underline; text-underline-offset:5px; }

/* The supporting plate introduces the sector alongside the hero — it must never
   read as a second hero of its own. Held to under half the column. */
.ind-second{ max-inline-size:min(46%, 430px); }
@media (max-width:720px){ .ind-second{ max-inline-size:min(72%, 320px); } }

/* ===== PROJECT CARD — a project holding more than one photograph =============
   Added 2026-08-05. The client's review established that several photographs can
   belong to ONE documented project (Private Palace, Jeddah — the Old Classic
   Dining Room). They are shown together on that project's card, lead frame at
   full width with the remaining frames paired beneath it, rather than split
   across separate cards. Appended at the end deliberately: editorial.css carries
   three copies of the .pf-card block and the last declaration wins. */
.pf-card .shot-strip{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(6px,.5vw,10px); margin-block-start:clamp(6px,.5vw,10px);
}
.pf-card .shot-strip .shot{ aspect-ratio:4/3; }
/* a project with exactly two photographs reads better as two full-width frames
   than as a lead plus a half-width offcut with dead space beside it */
.pf-card .shot-strip .shot:only-child{ grid-column:1 / -1; }

/* ---------- open drawer: header must stay tappable above the panel ---------- */
/* The burger lives inside the sticky header's stacking context (z-index 60), so the
   z-index:900 panel buried it on LTR, where inline-end puts the burger on the panel's
   side; the panel's own top padding already clears the header, so lifting the header
   only while the drawer is open restores the burger toggle without outranking the
   plate-viewer/lightbox overlays during normal browsing. */
body.drawer-open .site-header{ z-index:901; }


/* ---------- direction-aware drawer (2026-09-17) ---------- */
/* The panel is bound to the inline-start edge with the trigger: AR/RTL opens from
   the right, EN/LTR from the left. Base values above are the RTL ones; LTR mirrors
   the hide-transform and shadow here. */
[dir="ltr"] .nav-drawer{ transform:translateX(-102%); box-shadow:24px 0 80px rgba(20,14,5,.16); }
[dir="ltr"] .nav-drawer.is-open{ transform:none; }

/* ---------- Arabic tracking normalisation (2026-09-20) ---------- */
/* Arabic is cursive: positive letter-spacing fragments joined letterforms on
   engines without cursive-spacing protection and stretches word gaps on the
   rest. These are the Arabic-bearing label selectors (audited sitewide);
   scoped to RTL pages only — Latin/EN tracking is untouched. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .fw-link,
[dir="rtl"] .foot-nav a,
[dir="rtl"] .pf-card .go a,
[dir="rtl"] dt,
[dir="rtl"] figcaption,
[dir="rtl"] .plate-label .num,
[dir="rtl"] .stage .n,
[dir="rtl"] .stat span,
[dir="rtl"] .founder .role,
[dir="rtl"] .palette-label,
[dir="rtl"] .concept-tag,
[dir="rtl"] .footer-legal span,
[dir="rtl"] .label,
[dir="rtl"] .lead,
[dir="rtl"] .end,
[dir="rtl"] .pl-lb .close,
[dir="rtl"] .sf-hint,
[dir="rtl"] .title-block dt,
[dir="rtl"] .plate-label,
[dir="rtl"] .plate-label .craft,
[dir="rtl"] .chapter-next .lead,
[dir="rtl"] .chapter-close .end,
[dir="rtl"] .book-contents .contents-head .lead,
[dir="rtl"] .contents-item .no,
[dir="rtl"] .neighbour .shared{ letter-spacing:normal; }

/* ---------- consolidated release (2026-09-20): client review fixes ---------- */
/* Language switcher moved from the drawer into the header (always visible,
   no line box). Absolute at the inline-end corner, mirroring the burger. */
.header-centered .header-lang{
  position:absolute; inset-inline-end:0; inset-block-start:50%;
  transform:translateY(-50%);
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-champagne-deep);
  text-decoration:none; border:0; background:none; padding:12px 4px;
  opacity:.85; transition:opacity var(--motion-fast,.22s) ease;
}
.header-centered .header-lang:hover,
.header-centered .header-lang:focus-visible{ opacity:1; }
/* Arabic is cursive — the «العربية» label must never be tracked or spaced
   apart. Shared rule: applies wherever the language toggle renders. */
.lang-toggle[lang="ar"]{ letter-spacing:normal; text-transform:none; font-size:.92rem; }
/* Mobile: keep the controls off the screen edge (review: burger too close) */
@media (max-width:880px){
  .header-centered .nav-burger{ inset-inline-start:18px; }
  .header-centered .header-lang{ inset-inline-end:18px; }
}
/* Desktop: opening the menu must never freeze page scrolling (review §1).
   The panel overlays the edge; the page behind remains scrollable, and any
   click outside the panel closes it (js). Mobile keeps the scroll lock. */
@media (min-width:881px){
  body.drawer-open{ overflow:auto; }
}
/* Arabic accents embedded on Latin pages (style names, the «العربية» toggle):
   cursive script never inherits Latin tracking. A hard invariant — !important
   so no decorative tracking rule of any specificity can fragment Arabic. */
[dir="ltr"] [lang="ar"]{ letter-spacing:normal !important; }
/* Sector / portfolio reveal buttons carry Arabic labels — never tracked */
[dir="rtl"] button[data-more]{ letter-spacing:normal; }

/* ============================================================
   CLIENT CHANGES 2026-09-21 — four scoped edits (homepage + about)
   Appended last so these win the cascade over the duplicated blocks above.
   ============================================================ */
/* 1 · Homepage "Our Story" (heritage) → plain ivory ground, no ornament
      watermark. Scoped to .heritage--plain (homepage only) so the About
      "philosophy" chapter, which also uses .heritage, keeps its treatment. */
.heritage--plain{ background:var(--color-bg-base,#F8F5EF); }
.heritage--plain::before{ content:none !important; background:none !important; }

/* 3·4 · About hero is now a clean, text-free image; the statement moved below
        into a homepage-style .manifesto band. hero-clean is scoped to About so
        the shared .about-hero.hero-bright scrim used by the Artistic Gypsum
        service hero stays untouched. */
.about-hero.hero-clean::after{ content:none; }
.about-statement .manifesto-line{ margin:0; font-weight:400; }