/* ============================================================
   Al Arabi Decor — Homepage (production UI)
   RTL-first; logical properties throughout; consumes tokens only.
   BILINGUAL-READY: layout uses logical properties + [dir]-scoped
   scrims only, so the EN mirror is dir="ltr" + translated content
   with zero visual divergence (identical design language).
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--color-bg-base); color:var(--color-text);
  font-family:var(--font-text); font-size:var(--text-body); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 1.1em; max-width:var(--measure)}
h1,h2,h3{margin:0; font-weight:400; text-wrap:balance}

.skip-link{position:absolute; inset-inline-start:8px; top:-48px; z-index:100; background:var(--color-text); color:var(--color-bg-base); padding:10px 18px; font-size:.85rem; transition:top var(--motion-fast)}
.skip-link:focus{top:8px}

:focus-visible{outline:2px solid var(--color-accent-functional); outline-offset:3px}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

/* ---------- editorial primitives ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--text-eyebrow); font-weight:700; color:var(--color-accent-champagne-deep);
  margin:0 0 var(--space-2);
}
.eyebrow::before{content:""; inline-size:32px; block-size:1px; background:var(--color-accent-champagne)}
.on-dark .eyebrow{color:var(--color-hero-gold)}
.on-dark .eyebrow::before{background:var(--color-hero-gold)}

.display-ar{font-family:var(--font-display-ar); line-height:var(--leading-display)}
/* Editorial chapter titles: one consistent premium gold; typography alone carries the hierarchy */
.h2{font-family:var(--font-display-ar); font-size:var(--text-h2); line-height:var(--leading-display); margin-bottom:var(--space-4); color:var(--color-heading-gold)}
.on-dark .h2{color:var(--color-hero-gold)}
.eyebrow{margin-block-end:var(--space-2)}
/* decorative dash removed (final QA) — the eyebrow is now a bare small label */
.eyebrow::before{display:none}
.standfirst{font-size:var(--text-standfirst); color:var(--color-text-muted); max-width:60ch}
.caption{font-size:var(--text-caption); color:var(--color-text-muted)}
.hairline{border:0; border-block-start:var(--hairline); margin:0}

.btn{
  display:inline-block; padding:14px 32px; font-size:.92rem; font-weight:500;
  border:1px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:background var(--motion-fast) var(--ease-out-quart), color var(--motion-fast) var(--ease-out-quart), border-color var(--motion-fast) var(--ease-out-quart);
}
/* Primary CTAs in official Al Arabi gold; charcoal text for contrast */
.btn-primary{background:var(--color-gold-btn); color:var(--color-bg-velvet); font-weight:600}
.btn-primary:hover{background:var(--color-gold-btn-hover)}
/* secondary CTAs are typographic, not boxed (reference principle: kill the buttons) */
.btn-ghost-dark{border:0; padding-inline:6px; color:var(--color-text-on-dark); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; text-decoration-color:rgba(248,245,239,.5)}
.btn-ghost-dark:hover{text-decoration-color:var(--color-accent-champagne-on-dark); background:none}
.btn-ghost-light{border-color:var(--color-text); color:var(--color-text)}
.btn-ghost-light:hover{background:var(--color-text); color:var(--color-bg-base)}
.btn-primary-on-dark{background:var(--color-hero-gold); color:var(--color-bg-velvet-deep); font-weight:600}
.btn-primary-on-dark:hover{background:#EEDCA0}

.text-link{color:var(--color-accent-functional); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; transition:color var(--motion-fast)}
.on-dark .text-link{color:var(--color-accent-functional-on-dark)}

/* placeholder flag (open items) */
.ph-flag{
  position:absolute; z-index:3; inset-inline-start:10px; top:10px;
  background:rgba(59,44,24,.82); color:var(--color-bg-base);
  font-size:.62rem; letter-spacing:.06em; padding:4px 10px; border-radius:var(--radius);
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(248,245,239,.92); backdrop-filter:blur(10px);
  border-block-end:var(--hairline);
  transition:box-shadow var(--motion-base) var(--ease-in-out);
}
.site-header.is-condensed{box-shadow:var(--shadow-md)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-block-size:108px; transition:min-block-size var(--motion-base) var(--ease-in-out)}
.site-header.is-condensed .header-inner{min-block-size:86px}
.brand{display:flex; align-items:center; gap:22px; line-height:1.2}
.brand .brand-logo{inline-size:auto; block-size:80px; transition:block-size var(--motion-base) var(--ease-in-out)}
.site-header.is-condensed .brand .brand-logo{block-size:62px}
.brand .brand-text{display:flex; flex-direction:column; gap:7px}
.brand .brand-name{font-family:var(--font-display-ar); font-size:1.35rem; color:var(--color-text)}
.brand .brand-since{font-size:.66rem; letter-spacing:.2em; color:var(--color-accent-champagne-deep); text-transform:uppercase}
.primary-nav{display:flex; gap:clamp(14px,2vw,28px); font-size:.92rem}
.primary-nav a{padding-block:6px; position:relative}
.primary-nav a::after{content:""; position:absolute; inset-inline-start:0; bottom:0; inline-size:0; block-size:1px; background:var(--color-accent-champagne-deep); transition:inline-size var(--motion-fast) var(--ease-out-quart)}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after{inline-size:100%}
.header-cta{display:flex; align-items:center; gap:var(--space-2)}
.lang-toggle{font-size:.78rem; font-weight:600; color:var(--color-text-muted); border:var(--hairline); padding:6px 12px; border-radius:var(--radius)}
.lang-toggle:hover{color:var(--color-accent-functional); border-color:currentColor}
.nav-burger{display:none; background:none; border:none; cursor:pointer; padding:8px}
.nav-burger span{display:block; inline-size:24px; block-size:2px; background:var(--color-text); margin-block:5px}
@media (max-width:900px){
  .primary-nav, .header-cta .btn{display:none}
  .nav-burger{display:block}
}
@media (max-width:600px){
  .brand{gap:12px}
  .brand .brand-logo{block-size:56px}
  .brand .brand-name{font-size:1.05rem}
  .header-inner{min-block-size:84px}
}

/* ---------- hero ---------- */
/* Wider composition: lower crop anchor reveals both dome clusters + the arcade line
   (scale of the craftsmanship); text sits over the arcade's naturally darker band. */
.hero{position:relative; min-block-size:min(122svh,1280px); display:flex; align-items:flex-end; color:var(--color-text-on-dark); overflow:hidden}
.hero-media{position:absolute; inset:0}
/* Taller frame + centered anchor = widest possible reveal of the dome geometry
   (the making-strip "reveal" angle applied to the hero, per review) */
.hero-media img{inline-size:100%; block-size:100%; object-fit:cover; object-position:center 45%}
@media (prefers-reduced-motion:no-preference){
  .hero.is-loaded .hero-media img{animation:none}  /* drift zoom retired 2026-07-28 — client: use the wider composition, no tighter crop */
}
@keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.05)}}
/* Global scrim kept light — readability comes from placement + the local scrim below */
.hero-scrim{position:absolute; inset:0; background:linear-gradient(348deg, rgba(40,31,15,.44) 0%, rgba(40,31,15,.14) 32%, rgba(40,31,15,0) 54%)}
[dir="ltr"] .hero-scrim{background:linear-gradient(12deg, rgba(40,31,15,.44) 0%, rgba(40,31,15,.14) 32%, rgba(40,31,15,0) 54%)}
.hero-content{position:relative; z-index:2; padding-block-end:clamp(40px,6vw,88px); max-inline-size:860px}
/* Local contrast enhancement behind the typography only — the ceiling stays luminous */
.hero-content::before{
  content:""; position:absolute; z-index:-1; inset:-64px -96px -44px -96px;
  background:radial-gradient(122% 112% at 84% 100%, rgba(42,33,17,.74) 0%, rgba(42,33,17,.46) 46%, rgba(42,33,17,.14) 68%, transparent 80%);
  filter:blur(18px); pointer-events:none;
}
[dir="ltr"] .hero-content::before{background:radial-gradient(122% 112% at 16% 100%, rgba(42,33,17,.74) 0%, rgba(42,33,17,.46) 46%, rgba(42,33,17,.14) 68%, transparent 80%)}
.hero-content{text-shadow:0 2px 26px rgba(42,33,17,.5)}
/* Unified rich warm-gold headline — one tone, commands attention (client direction) */
/* "Carved gold": a fine lower shade + soft depth make the letters read as material, not colored text */
.hero-title{color:var(--color-hero-gold); text-shadow:0 1px 0 rgba(90,70,20,.45), 0 2px 3px rgba(42,33,17,.5), 0 6px 38px rgba(42,33,17,.55)}
.hero .eyebrow{color:var(--color-accent-champagne-on-dark)}
.hero .eyebrow::before{background:var(--color-accent-champagne-on-dark)}
.hero-title{font-family:var(--font-display-ar); font-size:var(--text-display); line-height:var(--leading-display)}
.hero-identity{font-size:var(--text-standfirst); color:rgba(248,245,239,.94); margin-block-start:var(--space-2); line-height:1.7; max-inline-size:56ch}
.hero-support{font-size:.95rem; color:rgba(248,245,239,.78); margin-block-start:var(--space-1); line-height:1.8; max-inline-size:58ch}
.hero-ctas{display:flex; gap:var(--space-2); margin-block-start:var(--space-3); flex-wrap:wrap}
/* line reveals — gated */
@media (prefers-reduced-motion:no-preference){
  .hero-line{opacity:0; transform:translateY(18px); animation:line-in var(--motion-slow) var(--ease-out-expo) forwards}
  .hero-line:nth-child(1){animation-delay:calc(var(--stagger)*1)} /* hook */
  .hero-line:nth-child(2){animation-delay:calc(var(--stagger)*3)} /* the riddle beat → identity */
  .hero-line:nth-child(3){animation-delay:calc(var(--stagger)*4)}
  .hero-line:nth-child(4){animation-delay:calc(var(--stagger)*5)}
  @keyframes line-in{to{opacity:1; transform:none}}
}

/* ---------- stat band ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-block-end:var(--hairline); background:var(--color-bg-base)}
@media (max-width:720px){ .stats{grid-template-columns:repeat(2,1fr)} .stats .stat:nth-child(n+3){border-block-start:var(--hairline)} }
.stat{padding:clamp(24px,3vw,40px) clamp(16px,2.5vw,36px); border-inline-start:var(--hairline)}
.stat:first-child{border-inline-start:0}
.stat b{font-family:var(--font-display-ar); font-weight:400; font-size:clamp(2rem,1.5rem + 1.8vw,3rem); color:var(--color-accent-champagne-deep); display:block; line-height:1.1; font-variant-numeric:tabular-nums}
.stat span{font-size:.78rem; letter-spacing:.04em; color:var(--color-text-muted); display:block; margin-block-start:var(--space-1)}

/* ---------- partners / clients — quiet typographic marquee (no boxes; the names ARE the design) ---------- */
.partners{padding-block:var(--space-section-sm); border-block-end:var(--hairline); overflow:hidden}
.marquee{position:relative; margin-block-start:var(--space-3); overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)}
.marquee-track{display:flex; align-items:baseline; gap:clamp(40px,5vw,88px); inline-size:max-content}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 60s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
/* Track content is duplicated once; +50% of its width returns an identical frame (RTL flow) */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(50%)}}
.partner{display:flex; flex-direction:column; gap:5px; white-space:nowrap}
.partner b{font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem); color:var(--color-text)}
.partner small{font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-support); font-family:var(--font-text)}

/* ---------- breath ---------- */
.breath{padding-block:var(--space-section-sm); display:grid; place-items:center}
.breath i{display:block; inline-size:1px; block-size:56px; background:var(--color-accent-champagne)}

/* ---------- manifesto + making (velvet chapter 1) ---------- */
/* Editorial statement — a full-width gold chapter (same identity as Story), a short editorial transition */
/* Final lock 2026-07-28: warm-ivory manifesto — same chapter language as the About page.
   Typography carries it; bronze display type, champagne divider, whisper of relief texture. */
.manifesto{position:relative; overflow:hidden; background:var(--color-bg-base, #FBF7EC); color:var(--color-text); padding-block:clamp(56px,6vw,104px); text-align:center; border-block:1px solid var(--color-hairline, rgba(59,44,24,.1))}
.manifesto::before{content:""; position:absolute; inset:0; background:url("../assets/glimpse-arabesque.jpg") center/cover no-repeat; mix-blend-mode:multiply; opacity:.05; filter:grayscale(1); pointer-events:none}
.manifesto-inner{position:relative; z-index:1; max-inline-size:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.manifesto-line{font-family:var(--font-display-ar); font-size:clamp(2rem,1.3rem + 2.8vw,3.7rem); line-height:1.24; color:var(--color-heading-gold, #8A5E20)}
/* the second line stays the emotional focus — larger, not exaggerated */
.manifesto-line .carve{display:inline-block; font-size:1.1em; line-height:1.16; margin-block-start:.02em}
/* fine, elegant divider with breathing space */
.statement-divider{display:flex; align-items:center; justify-content:center; gap:22px; inline-size:min(230px,48%); margin:clamp(24px,2.6vw,36px) auto clamp(26px,2.8vw,42px)}
.statement-divider .rule{flex:1; block-size:1px; background:currentColor; opacity:.4}
.statement-divider svg{inline-size:16px; block-size:16px; flex:0 0 auto; opacity:.72}
.manifesto-sub{color:var(--color-text-muted); margin:0 auto; font-size:.96rem; max-inline-size:50ch}
.manifesto .statement-divider{color:var(--color-accent-champagne, #C29F63)}

/* The Making returns to the ivory field — the dark mass breaks after the manifesto's single statement */
.making{padding-block:var(--space-section-sm)}
/* elevated from body text to an editorial subheading — heritage bronze, display serif, more presence */
.making-lead{color:var(--color-heading-gold); font-family:var(--font-display-ar); font-size:clamp(1.35rem,1.1rem + 1.1vw,1.95rem); line-height:1.5; padding-block:0 var(--space-4); max-inline-size:58ch}
.making-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3)}
@media (max-width:820px){ .making-grid{grid-template-columns:repeat(2,1fr)} }
.making-step{margin:0; position:relative}
.making-step .img{aspect-ratio:1/1; background:var(--color-bg-muted); overflow:hidden}
.making-step .img img{inline-size:100%; block-size:100%; object-fit:cover}
.making-step .img.todo{display:grid; place-items:center; color:var(--color-text-muted); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:12px}
.making-step figcaption{font-size:.8rem; color:var(--color-text-muted); margin-block-start:var(--space-1); border-block-start:var(--hairline); padding-block-start:var(--space-1)}
.making-step figcaption b{display:block; font-family:var(--font-display-ar); font-weight:400; color:var(--color-accent-champagne-deep); font-size:1.15rem}

/* ---------- crafts index ---------- */
.crafts{padding-block:var(--space-section)}
.craft-row{
  display:grid; grid-template-columns:72px 1fr auto; gap:var(--space-2) var(--space-3); align-items:center;
  padding-block:var(--space-3); border-block-end:var(--hairline); position:relative;
  transition:color var(--motion-fast) var(--ease-out-quart);
}
.craft-row:first-of-type{border-block-start:var(--hairline); margin-block-start:var(--space-4)}
.craft-num{font-family:var(--font-display-ar); color:var(--color-accent-champagne); font-size:1.15rem}
.craft-name{font-family:var(--font-display-ar); font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem); line-height:1.4}
.craft-desc{display:block; font-family:var(--font-text); font-size:.88rem; color:var(--color-text-muted); margin-block-start:8px; line-height:1.75; max-inline-size:52ch}
.craft-en{font-size:.78rem; letter-spacing:.06em; color:var(--color-accent-support); font-family:var(--font-text)}
.craft-row:hover, .craft-row:focus-visible{color:var(--color-accent-functional)}
/* Hover preview images removed by client direction — the homepage stays purely editorial;
   all photography now lives on the Service pages. The craft rows are navigation only. */
@media (max-width:760px){ .craft-row{grid-template-columns:48px 1fr} .craft-en{display:none} }

/* ---------- portfolio preview: لمحة من أعمالنا — a curated art-book of two traditions ---------- */
.glimpse{padding-block:var(--space-section-sm) var(--space-section)}
.glimpse-flow{display:flex; flex-direction:column; gap:clamp(64px,7vw,120px); margin-block-start:var(--space-5)}
/* each tradition = a titled chapter: one dominant plate + one supporting plate (editorial spread).
   Ratio 1.08:1 — supporting plate widened ~15% per final QA; bottoms align via align-items:end,
   the stagger emerging naturally from the height difference. */
.tradition{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,2.5vw,40px); align-items:end}
.tradition.alt{grid-template-columns:1fr 1.2fr}
.tradition-label{grid-column:1/-1; display:flex; align-items:baseline; gap:var(--space-2); margin-block-end:var(--space-1)}
.tradition-label b{font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem); color:var(--color-text)}
.tradition-label span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-support)}
.tradition-label::after{content:""; flex:1; block-size:1px; background:var(--color-accent-champagne); opacity:.5}
.glimpse-item{margin:0; position:relative}
/* controlled 3:2 plate — dominant wider (taller), supporting narrower but substantial; bottoms align via align-items:end */
.glimpse-item .frame{overflow:hidden; display:block; aspect-ratio:3/2}
.glimpse-item img{inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--motion-ambient) var(--ease-out-quart)}
@media (prefers-reduced-motion:no-preference){ .glimpse-item:hover img{transform:scale(1.03)} }
.tradition.alt .lead-plate{order:2}
.tradition.alt .answer-plate{order:1}
@media (max-width:760px){
  .tradition, .tradition.alt{grid-template-columns:1fr}
  .tradition .lead-plate, .tradition .answer-plate{order:initial}
}
/* museum-label captions: quiet text on the field, never over the image */
.glimpse-item figcaption{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
  padding-block-start:14px; font-size:var(--text-caption); color:var(--color-text-muted); line-height:1.7;
}
.glimpse-item figcaption .meta{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-champagne-deep)}
/* legacy project-card kept for inner pages */
.project-card{margin:0; position:relative}

/* ---------- languages of ornament ---------- */
.languages{padding-block:var(--space-section-sm) var(--space-section)}
.lang-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); margin-block-start:var(--space-4)}
@media (max-width:820px){ .lang-grid{grid-template-columns:repeat(2,1fr)} }
.lang-card{position:relative; overflow:hidden; aspect-ratio:4/5; color:var(--color-text-on-dark); display:flex; align-items:flex-end}
.lang-card img{position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--motion-ambient) var(--ease-out-quart)}
@media (prefers-reduced-motion:no-preference){ .lang-card:hover img{transform:scale(1.05)} }
.lang-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(40,31,15,.72), rgba(40,31,15,.04) 55%)}
.lang-card .cap{position:relative; z-index:2; padding:var(--space-2) var(--space-3); inline-size:100%}
.lang-card .cap b{font-family:var(--font-display-ar); font-size:1.35rem; font-weight:400; display:block}
.lang-card .cap span{font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-accent-champagne-on-dark)}
/* Honest pending state — used when no accurate photograph exists yet */
.lang-card.is-pending, .sector-tile.is-pending{
  background:var(--color-bg-muted); border:1px dashed rgba(59,44,24,.3); color:var(--color-text-muted);
  align-items:center; justify-content:center; text-align:center;
}
.lang-card.is-pending::after, .sector-tile.is-pending::after{display:none}
.lang-card.is-pending .cap, .sector-tile.is-pending .cap{padding:var(--space-3)}
.lang-card.is-pending .cap b, .sector-tile.is-pending .cap b{color:var(--color-text)}
.lang-card.is-pending .cap span, .sector-tile.is-pending .cap span{color:var(--color-accent-champagne-deep); display:block; margin-block-start:6px}
.lang-card.is-pending .cap i{display:block; font-style:normal; font-size:.72rem; margin-block-start:10px; line-height:1.6}
/* AI concept reference tag — clearly labelled until official photography arrives (KB §13) */
.concept-tag{
  position:absolute; z-index:3; inset-block-start:10px; inset-inline-start:10px;
  font-family:var(--font-text); font-style:normal; font-weight:500;
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:#FBF7EC; background:rgba(40,31,15,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:5px 10px; border-radius:100px; border:1px solid rgba(251,247,236,.22);
}

/* ---------- heritage — the gold "heritage-book" chapter (official Al Arabi gold, ivory text) ---------- */
/* height tightened to sit close to the (now compact) editorial statement above */
/* Phase 2.5 palette lock: warm-stone chapter ground, bronze display type, champagne line-work.
   The saturated gold ground is retired — gold appears only as typographic accents and ornament. */
.heritage{position:relative; overflow:hidden; background:var(--color-stone, #EFE9DF); color:var(--color-text); padding-block:clamp(56px,5vw,92px); border-block:1px solid var(--color-hairline, rgba(59,44,24,.12))}
.heritage .container{position:relative; z-index:1}
.heritage-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,88px); align-items:center}
@media (max-width:820px){ .heritage-grid{grid-template-columns:1fr} }
.heritage .eyebrow{color:var(--color-accent-champagne-deep)}
.heritage blockquote{margin:0; font-family:var(--font-display-ar); font-size:clamp(2rem,1.3rem + 3.2vw,3.6rem); line-height:1.55; color:var(--color-heading-gold)}
.heritage .text-link{color:var(--color-accent-functional); text-decoration-color:rgba(127,102,40,.45)}
.heritage .text-link:hover{color:var(--color-heading-gold); text-decoration-color:currentColor}
.timeline{border-inline-start:1px solid var(--color-accent-champagne); padding-inline-start:var(--space-4); display:flex; flex-direction:column; gap:20px}
.timeline > div{position:relative; font-size:.95rem; color:var(--color-text)}
.timeline > div::before{content:""; position:absolute; inset-inline-start:calc(-1 * var(--space-4) - 4px); inset-block-start:10px; inline-size:8px; block-size:8px; border-radius:50%; background:var(--color-accent-champagne)}
.timeline b{font-family:var(--font-display-ar); font-weight:400; color:var(--color-heading-gold); font-size:1.35rem; display:block; margin-block-end:2px}
/* oversized, near-embossed ornamental medallion — champagne line-work on stone */
.heritage-ornament{position:absolute; z-index:0; inset-block-start:50%; inset-inline-end:-9%; inline-size:min(50vw,620px); aspect-ratio:1; transform:translateY(-50%); color:var(--color-accent-champagne); opacity:.28; pointer-events:none}
.heritage-ornament svg{inline-size:100%; block-size:100%; display:block}
@media (max-width:820px){ .heritage-ornament{opacity:.18; inset-inline-end:-24%} }

/* ---------- sectors ---------- */
.sectors{padding-block:var(--space-section-sm) var(--space-section)}
.sector-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); margin-block-start:var(--space-4)}
@media (max-width:820px){ .sector-grid{grid-template-columns:repeat(2,1fr)} }
.sector-tile{position:relative; aspect-ratio:3/4; overflow:hidden; color:var(--color-text-on-dark); display:flex; align-items:flex-end}
.sector-tile img{position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--motion-ambient) var(--ease-out-quart)}
@media (prefers-reduced-motion:no-preference){ .sector-tile:hover img{transform:scale(1.05)} }
.sector-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(40,31,15,.68), rgba(40,31,15,0) 50%)}
.sector-tile .cap-main{position:relative; z-index:2; padding:var(--space-2) var(--space-3); inline-size:100%}
.sector-tile .cap-main b{display:block; font-family:var(--font-display-ar); font-weight:400; font-size:1.3rem}
.sector-tile .cap-main span{display:block; font-size:.72rem; color:rgba(248,245,239,.82); margin-block-start:4px; line-height:1.7}

/* ---------- testimonial placeholder — a quiet line between hairlines, no box ---------- */
.testimonial{padding-block:var(--space-section-sm); text-align:center}
.testimonial .frame{max-inline-size:640px; margin-inline:auto; border-block:var(--hairline); padding-block:clamp(22px,3vw,36px); color:var(--color-text-muted); font-size:.92rem; font-family:var(--font-display-ar)}

/* ---------- commission (velvet, image-free) ---------- */
/* CTA + footer = one continuous closing chapter on the premium ivory field (editorial finish) */
.commission{background:var(--color-bg-base); color:var(--color-text); padding-block:clamp(40px,4.2vw,66px); text-align:center; border-block-start:var(--hairline)}
.commission h2{font-family:var(--font-display-ar); font-size:clamp(1.8rem,1.3rem + 2.2vw,2.8rem); line-height:1.4; color:var(--color-heading-gold)}
.commission .reassure{color:var(--color-text-muted); margin:var(--space-1) auto var(--space-2); max-inline-size:52ch; font-size:.95rem}
.commission .ctas{display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap}
.commission .contacts{margin-block-start:var(--space-2); font-size:.82rem; color:var(--color-text-muted); display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap}
/* controls on the ivory ground: gold primary button, quiet charcoal secondary */
.commission .btn-primary-on-dark{background:var(--color-gold-btn); color:var(--color-bg-velvet)}
.commission .btn-primary-on-dark:hover{background:var(--color-gold-btn-hover)}
.commission .btn-ghost-dark{color:var(--color-text); text-decoration-color:rgba(59,44,24,.4)}
.commission .btn-ghost-dark:hover{text-decoration-color:var(--color-text)}
.commission .text-link{color:var(--color-accent-functional)}

/* ---------- footer — premium ivory close: a natural continuation of the editorial field ---------- */
/* Ivory ground · gold titles · deep-charcoal body · charcoal→gold links · original-colour logo */
.site-footer{background:var(--color-bg-base); color:var(--color-text); border-block-start:var(--hairline); padding-block:11px 8px; font-size:.73rem; line-height:1.45}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:var(--space-2)}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr} }
.site-footer h3{font-family:var(--font-display-ar); font-weight:400; color:var(--color-heading-gold); font-size:1rem; margin-block-end:3px}
.site-footer p{margin-block-end:.4em}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.site-footer a{color:var(--color-text)}
.site-footer a:hover{color:var(--color-heading-gold)}
.footer-legal{display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; margin-block-start:var(--space-1); padding-block-start:10px; border-block-start:var(--hairline); font-size:.68rem; color:var(--color-text-muted)}

/* ---------- floating whatsapp ---------- */
.float-wa{
  position:fixed; z-index:var(--z-float); inset-inline-start:20px; inset-block-end:20px;
  inline-size:52px; block-size:52px; border-radius:50%;
  background:var(--brand-primary); color:var(--color-bg-velvet);
  display:grid; place-items:center; box-shadow:var(--shadow-md);
  transition:transform var(--motion-fast) var(--ease-out-quart);
}
.float-wa:hover{transform:translateY(-3px)}
.float-wa svg{inline-size:24px; block-size:24px; fill:currentColor}

/* ---------- scroll reveals (staggered; image tiles get a soft settle) ---------- */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(16px); transition:opacity var(--motion-slow) var(--ease-out-expo), transform var(--motion-slow) var(--ease-out-expo)}
  .js .reveal.is-in{opacity:1; transform:none}
  /* gentle stagger inside grids */
  .js .making-grid .reveal:nth-child(2), .js .lang-grid .reveal:nth-child(2), .js .sector-grid .reveal:nth-child(2){transition-delay:80ms}
  .js .making-grid .reveal:nth-child(3), .js .lang-grid .reveal:nth-child(3), .js .sector-grid .reveal:nth-child(3){transition-delay:160ms}
  .js .making-grid .reveal:nth-child(4), .js .lang-grid .reveal:nth-child(4), .js .sector-grid .reveal:nth-child(4){transition-delay:240ms}
  .js .lang-grid .reveal:nth-child(5){transition-delay:320ms}
  .js .lang-grid .reveal:nth-child(6){transition-delay:400ms}
  .js .lang-grid .reveal:nth-child(7){transition-delay:480ms}
  .js .lang-grid .reveal:nth-child(8){transition-delay:560ms}
  /* curated visuals settle from a slight scale — the "carved reveal" */
  .js .glimpse-item.reveal{transform:none}
  .js .glimpse-item.reveal .frame{clip-path:inset(0 0 12% 0); transition:clip-path var(--motion-reveal) var(--ease-out-expo)}
  .js .glimpse-item.reveal img{transform:scale(1.06); transition:transform var(--motion-reveal) var(--ease-out-expo)}
  .js .glimpse-item.reveal.is-in .frame{clip-path:inset(0)}
  .js .glimpse-item.reveal.is-in img{transform:scale(1)}
  /* manifesto texture drifts almost imperceptibly */
  .manifesto-tex{animation:tex-drift 36s var(--ease-in-out) infinite alternate}
  @keyframes tex-drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-1.5%)}}
}

/* ---------- Artistic Styles: honest pending tile (Sulaymani — awaiting official photography) ---------- */
.lang-card-pending{display:grid; place-items:center; background:var(--color-bg-muted, #EFE9DF); border:1px solid var(--color-hairline, rgba(59,44,24,.14)); text-align:center}
.lang-card-pending .pending-inner{font-family:var(--font-display-ar); font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem); color:var(--color-heading-gold); padding:16px; line-height:1.6}
.lang-card-pending .pending-inner small{display:block; font-family:var(--font-text); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); margin-block-start:10px}

/* QA fix 2026-07-29: .lang-card's display rule was defeating the [hidden] attribute —
   Islamic & Bespoke rendered despite hidden. The guard below restores true hiding. */
.lang-card[hidden]{display:none !important}


/* ---- EYEBROW AUTHORITY (client 2026-08-01) --------------------------------
   The small editorial labels carry the hierarchy on this site, so they read at
   the same register everywhere — the homepage included. The large display
   headlines are deliberately NOT touched. */
.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;
  margin-block-end:1.15em;
  gap:.85em;
}
.eyebrow::before{
  display:block; content:""; 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"] .eyebrow{ --_lbl:right; }
/* labels sitting on photography keep the champagne and stay rule-free */
.on-dark .eyebrow::before,
.hero .eyebrow::before{ display:none; }

/* ---------- Arabic shaping guard (2026-10-18) ----------
   Arabic is a cursive script: tracking must never be applied to it (CSS Text, letter-spacing: UAs should not
   track cursive scripts). WebKit renders tracked Arabic as disconnected glyphs; Chromium opens gaps inside
   joined words. editorial.css already resets a few labels; this covers the remaining rules that carry Arabic
   text on the RTL pages (eyebrows, pager labels, card locations, imprint, headings, breadcrumbs, contact labels).
   Latin labels on the Arabic pages keep their tracking: these selectors only match Arabic-bearing elements. */
html[dir="rtl"] .eyebrow, html[dir="rtl"] .h2, html[dir="rtl"] .about-hero-title, html[dir="rtl"] .about-hero-title .gold,
html[dir="rtl"] .breadcrumb a, html[dir="rtl"] .breadcrumb span, html[dir="rtl"] .svc-pager .dir,
html[dir="rtl"] .pf-card .where, html[dir="rtl"] .contents-item .where, html[dir="rtl"] .book-end .imprint,
html[dir="rtl"] .plate-link, html[dir="rtl"] .k, html[dir="rtl"] .stat span, html[dir="rtl"] .tradition-label span,
html[dir="rtl"] .glimpse-item figcaption .meta{ letter-spacing:normal; }