/* D — Golden Fin Signature (PROTOTYPE). Builds on ../shared/tokens.css; A/B/C are untouched. */
/* M3.11 contrast: small muted text on dark ≥ 4.8:1, small brass text on paper ≥ 5:1 (WCAG AA); tokens.css unchanged */
:root { --muted-dark: #8A8D92; --brass-ink: #7D6134; }
:root {
  --bg: var(--charcoal-950);
  --d-max: 1600px;
  --d-sec: clamp(96px, 14vh, 168px);
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
html.gf-reduced { scroll-behavior: auto; }
body { background: var(--charcoal-950); }
::selection { background: var(--champagne-400); color: var(--charcoal-950); }

/* Cross-document page transition (Chromium, same-origin http only; ignored elsewhere) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: d-vt-out 420ms var(--ease-fin) both; }
::view-transition-new(root) { animation: d-vt-in 620ms var(--ease-fin) both; }
@keyframes d-vt-out { to { opacity: .2; transform: scale(.985); } }
@keyframes d-vt-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--offwhite-50); color: var(--charcoal-950); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- Header / navigation ---------- */
.d-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: 24px;
  padding-inline: var(--margin); color: var(--offwhite-50); transition: transform 500ms var(--ease-fin), background 300ms; }
.d-header.solid { background: color-mix(in srgb, var(--charcoal-950) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--graphite-700) 60%, transparent); }
.d-header.hide { transform: translateY(-100%); }
/* M3.11: sticky bars follow the header (one state: html.chrome-hidden), same duration and easing — no gap, no overlap */
.p-toc, .d-serv .media { transition: transform 500ms var(--ease-fin); }
@media (min-width: 1024px) { html.chrome-hidden .p-toc, html.chrome-hidden .d-serv .media { transform: translateY(calc(-1 * var(--header-h))); } }
@media (max-width: 1023px) { html.chrome-hidden .p-toc { transform: translateY(calc(-100% - var(--header-h) - 1px)); } }
@media (prefers-reduced-motion: reduce) { .d-header, .p-toc, .d-serv .media { transition: none; } }
.d-brand { display: grid; gap: 6px; margin-inline-end: auto; min-height: 44px; align-content: center; }
.d-brand b { font: 500 13px/1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
html[lang="ar"] .d-brand b { font-size: 16px; text-transform: none; }
.d-brand i { width: 28px; height: 1px; background: var(--champagne-400); transition: width 500ms var(--ease-fin); }
.d-brand:hover i { width: 56px; }
.d-nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.d-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; font: 500 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--stone-300); transition: color var(--t-ui); }
html[lang="ar"] .d-nav a { font-size: 15px; letter-spacing: 0; text-transform: none; }
.d-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 10px; height: 1px; background: var(--champagne-400); transform: scaleX(0); transform-origin: var(--origin-start, left); transition: transform 500ms var(--ease-fin); }
html[dir="rtl"] { --origin-start: right; --origin-end: left; }
html[dir="ltr"] { --origin-start: left; --origin-end: right; }
.d-nav a:hover, .d-nav a.on { color: var(--offwhite-50); }
.d-nav a:hover::after, .d-nav a.on::after { transform: scaleX(1); }
.d-lang { display: flex; align-items: center; }
.d-lang button { min-width: 44px; min-height: 44px; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--muted-dark); transition: color var(--t-ui); }
.d-lang button[lang="ar"] { font: 500 16px/1 var(--font-sans-ar); }
.d-lang button[aria-pressed="true"] { color: var(--offwhite-50); }
.d-lang span { width: 1px; height: 14px; background: var(--graphite-700); }
.d-menu-btn { display: none; min-height: 44px; min-width: 44px; align-items: center; gap: 10px; font: 500 12px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; }
html[lang="ar"] .d-menu-btn { font-size: 15px; letter-spacing: 0; }
.d-menu-btn i { display: grid; gap: 5px; width: 24px; }
.d-menu-btn i::before, .d-menu-btn i::after { content: ""; height: 1px; background: currentColor; transition: transform 300ms var(--ease-fin); }
.d-menu-btn i::after { width: 60%; justify-self: end; background: var(--champagne-400); }
.d-menu-btn[aria-expanded="true"] i::before { transform: translateY(3px) rotate(12deg); }
.d-menu-btn[aria-expanded="true"] i::after { width: 100%; transform: translateY(-3px) rotate(-12deg); }
@media (max-width: 1023px) { .d-nav { display: none; } .d-menu-btn { display: inline-flex; } }

.d-menu { position: fixed; inset: 0; z-index: 45; background: var(--charcoal-950); display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 28px) var(--margin) 28px; visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path 700ms var(--ease-fin), visibility 0s linear 700ms; }
.d-menu.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--ease-fin); }
.d-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.d-menu ol a { display: flex; align-items: baseline; gap: 18px; min-height: 64px; font: 300 clamp(38px, 9vw, 64px)/1.1 var(--font-sans); letter-spacing: -.02em; border-bottom: 1px solid var(--graphite-800); }
html[lang="ar"] .d-menu ol a { font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.d-menu ol a span { font: 400 12px/1 var(--font-mono); color: var(--champagne-400); letter-spacing: .12em; }
.d-menu-foot { display: grid; gap: 18px; }
.d-menu-foot .meta a { color: var(--offwhite-50); }

/* ---------- Shared bits ---------- */
.wrap { padding-inline: var(--margin); max-width: var(--d-max); margin-inline: auto; }
.sec { padding-block: var(--d-sec); position: relative; }
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(36px, 6vh, 64px); }
.sec-head .meta { grid-column: 1 / span 3; color: var(--champagne-400); align-self: start; padding-top: .9em; }
.sec-head h2 { grid-column: 4 / span 6; margin: 0; font: 300 clamp(32px, 4vw, 60px)/1.05 var(--font-sans); letter-spacing: -.025em; }
html[lang="ar"] .sec-head h2 { font-weight: 400; letter-spacing: 0; line-height: 1.35; }
.sec-head p { grid-column: 10 / -1; margin: 0; color: var(--stone-300); font-size: 14px; }
@media (max-width: 1023px) { .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } .sec-head > * { grid-column: 1 / -1 !important; } }
.draft { display: inline-flex; gap: 8px; align-items: center; font: 400 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite-500); border: 1px dashed var(--graphite-700); padding: 5px 8px; }
html[lang="ar"] .draft { font: 500 12px/1 var(--font-sans-ar); letter-spacing: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 26px; border: 1px solid var(--champagne-400); color: var(--offwhite-50);
  font: 500 12px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate; transition: color 400ms var(--ease-fin); }
html[lang="ar"] .btn { font-size: 15px; letter-spacing: 0; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--champagne-400); transform: scaleX(0); transform-origin: var(--origin-start); transition: transform 500ms var(--ease-fin); }
.btn:hover, .btn:focus-visible { color: var(--charcoal-950); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 500 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--offwhite-50); }
html[lang="ar"] .link { font-size: 15px; letter-spacing: 0; }
.link::after { content: ""; width: 28px; height: 1px; background: var(--champagne-400); transition: width 500ms var(--ease-fin); }
.link:hover::after, .link:focus-visible::after { width: 56px; }
.arw { display: inline-block; }
html[dir="rtl"] .arw { transform: scaleX(-1); }

/* Reveal on enter: text rises, images open through fins */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.fin-reveal { position: relative; overflow: hidden; }
.fin-reveal .fins { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); direction: ltr; pointer-events: none; z-index: 2; }
.fin-reveal .fins i { background: var(--charcoal-950); transform-origin: left; transition: transform 900ms var(--ease-fin); }
html[dir="rtl"] .fin-reveal .fins i { transform-origin: right; }
.fin-reveal.in .fins i { transform: scaleX(0); }
html.gf-reduced .rv { opacity: 1; transform: none; }
html.gf-reduced .fin-reveal .fins { display: none; }
html.no-js .rv { opacity: 1; transform: none; }

/* ---------- HERO ---------- */
.d-hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--charcoal-950); isolation: isolate; }
.d-stage { position: absolute; inset: 0; }
.d-base { position: absolute; inset: 0; }
.d-base img { width: 100%; height: 100%; object-fit: cover; }
.d-base.settle img { animation: d-settle 2400ms var(--ease-out) both; }
@keyframes d-settle { from { transform: scale(1.06); } to { transform: none; } }
.d-fins { position: absolute; inset: 0; direction: ltr; perspective: 1800px; z-index: 2; }
.d-fin { position: absolute; top: 0; bottom: 0; transform-style: preserve-3d; transition: transform 950ms var(--ease-fin); }
.d-fin.turn { transform: rotateY(-180deg); }
.d-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.d-face.back { transform: rotateY(180deg); }
.d-face img { position: absolute; top: 0; height: 100%; max-width: none; object-fit: cover; }
.d-fin .edge { position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--champagne-400); opacity: 0; transform: translateZ(1px); transition: opacity 300ms; }
.d-fin.turn .edge { opacity: .7; }
.d-fade { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 600ms var(--ease-out); }
.d-fade.on { opacity: 1; }
.d-fade img { width: 100%; height: 100%; object-fit: cover; }
.d-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(18,19,20,.92) 0%, rgba(18,19,20,.45) 30%, rgba(18,19,20,0) 56%), linear-gradient(to bottom, rgba(18,19,20,.6), rgba(18,19,20,0) 20%), linear-gradient(var(--shade-dir, to right), rgba(18,19,20,.62) 0%, rgba(18,19,20,.25) 38%, rgba(18,19,20,0) 60%); }
html[dir="rtl"] .d-shade { --shade-dir: to left; }
.d-mullions { position: absolute; inset: 0; z-index: 4; pointer-events: none; padding-inline: var(--margin); display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gutter); }
.d-mullions span { border-inline-start: 1px solid rgba(242,239,233,.14); transform-origin: top; animation: d-draw 1400ms var(--ease-fin) both; }
.d-mullions span:last-child { border-inline-end: 1px solid rgba(242,239,233,.14); }
@keyframes d-draw { from { transform: scaleY(0); } }
.d-copy { position: absolute; z-index: 5; inset-inline: var(--margin); bottom: clamp(150px, 22vh, 230px); max-width: min(820px, 64vw); text-shadow: 0 1px 16px rgba(18,19,20,.55); }
.d-kicker { display: flex; align-items: center; gap: 14px; color: var(--champagne-400); text-shadow: 0 1px 3px rgba(18,19,20,.9), 0 0 18px rgba(18,19,20,.8); }
.d-kicker::before { content: ""; width: 44px; height: 1px; background: currentColor; transform-origin: var(--origin-start); animation: d-line 1200ms var(--ease-fin) 300ms both; }
@keyframes d-line { from { transform: scaleX(0); } }
.d-copy h1 { margin: 18px 0 28px; font: 300 clamp(38px, 5vw, 80px)/1.02 var(--font-sans); letter-spacing: -.03em; }
html[lang="ar"] .d-copy h1 { font-weight: 400; letter-spacing: 0; line-height: 1.32; font-size: clamp(34px, 4.4vw, 70px); }
.d-copy h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.d-copy h1 .ln > span { display: inline-block; animation: d-rise 1100ms var(--ease-fin) both; }
.d-copy h1 .ln:nth-child(2) > span { animation-delay: 110ms; }
.d-copy h1 .ln:nth-child(3) > span { animation-delay: 220ms; }
@keyframes d-rise { from { transform: translateY(105%); } }
.d-ctas { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; animation: d-fadeup 900ms var(--ease-out) 500ms both; }
@keyframes d-fadeup { from { opacity: 0; transform: translateY(12px); } }
.d-sel { position: absolute; z-index: 5; inset-inline: var(--margin); bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr) auto; column-gap: var(--gutter); align-items: end; }
.d-sel button.it { text-align: start; padding: 18px 0 22px; display: grid; gap: 6px; position: relative; min-height: 76px; color: var(--stone-300); transition: color 300ms; }
.d-sel button.it::before, .d-sel button.it i { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; }
.d-sel button.it::before { background: rgba(242,239,233,.2); }
.d-sel button.it i { background: var(--champagne-400); transform: scaleX(0); transform-origin: var(--origin-start); }
.d-sel button.it.on { color: var(--offwhite-50); }
.d-sel button.it.on i { animation: d-prog var(--dur, 7000ms) linear forwards; }
.d-hero.paused .d-sel button.it.on i { animation-play-state: paused; }
html.gf-reduced .d-sel button.it.on i, .d-hero.stopped .d-sel button.it.on i { animation: none; transform: scaleX(1); }
@keyframes d-prog { to { transform: scaleX(1); } }
.d-sel .no { font: 400 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--champagne-400); }
.d-sel strong { font: 400 15px/1.3 var(--font-sans); }
.d-sel .pl { font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); }
html[lang="ar"] .d-sel .pl { font: 400 12px/1.2 var(--font-sans-ar); letter-spacing: 0; }
.d-sel .pause { width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid rgba(242,239,233,.3); border-radius: 50%; display: grid; place-items: center; }
.d-sel .pause:hover { border-color: var(--champagne-400); }
.d-sel .pause svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.d-scroll { position: absolute; z-index: 5; top: 50%; right: var(--margin); transform: translateY(-50%); writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; color: var(--stone-300); }
html[dir="rtl"] .d-scroll { right: auto; left: var(--margin); }
.d-scroll::after { content: ""; width: 1px; height: 64px; background: linear-gradient(var(--champagne-400), transparent); }
@media (max-width: 1023px) {
  .d-sel { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); scrollbar-width: none; inset-inline: 0; padding-inline: var(--margin); }
  .d-sel::-webkit-scrollbar { display: none; }
  .d-sel button.it { scroll-snap-align: start; }
  .d-scroll { display: none; }
}
@media (max-width: 767px) {
  .d-copy { max-width: none; bottom: 128px; }
  .d-shade { background: linear-gradient(to top, rgba(18,19,20,.94) 0%, rgba(18,19,20,.6) 42%, rgba(18,19,20,.1) 70%), linear-gradient(to bottom, rgba(18,19,20,.6), rgba(18,19,20,0) 20%); }
  .d-copy h1 { font-size: 34px; margin-bottom: 22px; }
  html[lang="ar"] .d-copy h1 { font-size: 30px; }
  .d-ctas .btn { flex: 1 1 100%; }
  .d-sel { grid-template-columns: repeat(4, 62vw) 56px; }
  .d-sel button.it { min-height: 68px; padding: 14px 0 16px; }
}

/* ---------- Intro statement ---------- */
.d-intro .say { margin: 0; grid-column: 4 / -2; font: 300 clamp(26px, 3.2vw, 50px)/1.25 var(--font-sans); letter-spacing: -.015em; }
html[lang="ar"] .d-intro .say { font-weight: 400; letter-spacing: 0; line-height: 1.6; font-size: clamp(24px, 2.8vw, 42px); }
.d-intro .say .w { opacity: .16; transition: opacity 600ms var(--ease-out); }
.d-intro .say .w.on { opacity: 1; }
html.gf-reduced .d-intro .say .w { opacity: 1; }
.d-intro .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.d-intro .meta { grid-column: 1 / span 3; color: var(--champagne-400); padding-top: .8em; }
@media (max-width: 1023px) { .d-intro .grid > * { grid-column: 1 / -1; } .d-intro .meta { margin-bottom: 18px; } }

/* ---------- Featured ---------- */
.d-feat { display: grid; gap: clamp(72px, 12vh, 140px); }
.d-feat article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.d-feat figure { margin: 0; grid-column: 1 / span 7; aspect-ratio: 16 / 10; background: var(--graphite-800); }
.d-feat article:nth-child(even) figure { grid-column: 6 / -1; grid-row: 1; }
.d-feat article:nth-child(even) .txt { grid-column: 1 / span 4; grid-row: 1; }
.d-feat figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out); }
.d-feat article:hover figure img { transform: scale(1.03); }
.d-feat .txt { grid-column: 9 / -1; display: grid; gap: 14px; padding-bottom: 8px; }
.d-feat .no { font: 300 clamp(48px, 5vw, 80px)/.9 var(--font-sans); color: var(--champagne-400); letter-spacing: -.04em; }
.d-feat h3 { margin: 0; font: 300 clamp(26px, 2.6vw, 40px)/1.1 var(--font-display-en); }
html[lang="ar"] .d-feat h3 { font: 500 clamp(24px, 2.3vw, 34px)/1.45 var(--font-display-ar); }
.d-feat p { margin: 0; color: var(--stone-300); max-width: 40ch; }
@media (max-width: 1023px) {
  .d-feat article { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .d-feat article figure, .d-feat article:nth-child(even) figure, .d-feat .txt, .d-feat article:nth-child(even) .txt { grid-column: 1 / -1; grid-row: auto; }
  .d-feat figure { aspect-ratio: 4 / 3.4; margin-inline: calc(var(--margin) * -1); }
}

/* ---------- Before / After ---------- */
.ba-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--graphite-700); color: var(--stone-300); font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; transition: border-color 300ms, color 300ms, background 300ms; white-space: nowrap; }
html[lang="ar"] .chip { font: 500 14px/1 var(--font-sans-ar); letter-spacing: 0; }
.chip:hover { color: var(--offwhite-50); border-color: var(--graphite-500); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { color: var(--offwhite-50); border-color: var(--champagne-400); background: color-mix(in srgb, var(--champagne-400) 10%, transparent); }
.chip .n { color: var(--muted-dark); margin-inline-start: 6px; }
.ba { position: relative; overflow: hidden; background: var(--graphite-800); aspect-ratio: var(--ar, 16 / 9); max-height: 82vh; margin-inline: auto; direction: ltr; --pos: 50%; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--pos)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--champagne-400); pointer-events: none; }
.ba .handle b { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(18,19,20,.86); border: 1px solid var(--champagne-400); display: grid; place-items: center; color: var(--champagne-400); font: 400 18px/1 var(--font-sans); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba input:focus-visible ~ .handle b { outline: 2px solid var(--champagne-400); outline-offset: 4px; }
.ba .lb { position: absolute; top: 14px; padding: 7px 10px; background: rgba(18,19,20,.78); }
.ba .lb.l { left: 14px; } .ba .lb.r { right: 14px; }
.ba-note { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--stone-300); font-size: 13px; }
.ba.hint { animation: none; }

/* ---------- Gallery ---------- */
.g-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 28px; }
.g-filters::-webkit-scrollbar { display: none; }
.g-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gutter); align-items: start; }
.g-card { grid-column: span 4; }
.g-card.wide { grid-column: span 8; }
.g-card.half { grid-column: span 6; }
.g-card[hidden] { display: none; }
.g-card a { display: block; }
.g-card figure { margin: 0; aspect-ratio: 4 / 3; background: var(--graphite-800); }
.g-card.wide figure { aspect-ratio: 16 / 9; }
.g-card.tall figure { aspect-ratio: 4 / 5.2; }
.g-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1300ms var(--ease-out); }
.g-card figure .lines { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.g-card figure .lines i { border-inline-end: 1px solid rgba(200,180,138,.0); transition: border-color 500ms var(--ease-out); }
.g-card a:hover figure img, .g-card a:focus-visible figure img { transform: scale(1.04); }
.g-card a:hover figure .lines i, .g-card a:focus-visible figure .lines i { border-color: rgba(200,180,138,.32); }
.g-card .cap { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; align-items: baseline; }
.g-card h3 { margin: 0; font: 400 17px/1.3 var(--font-sans); }
.g-card .tag { position: absolute; z-index: 3; top: 12px; inset-inline-start: 12px; background: rgba(18,19,20,.78); padding: 6px 8px; }
@media (max-width: 1023px) { .g-card, .g-card.half { grid-column: span 6; } .g-card.wide { grid-column: span 12; } }
@media (max-width: 767px) { .g-grid { gap: 32px; } .g-card, .g-card.wide, .g-card.half { grid-column: span 12; } .g-card.tall figure { aspect-ratio: 4 / 4.6; } }

/* ---------- Philosophy (editorial paper section, from B) ---------- */
.d-paper { background: var(--offwhite-50); color: var(--charcoal-900); --fg-muted: #5F6266; }
.d-paper .meta { color: #5F6266; }
.d-paper .sec-head .meta { color: var(--brass-ink); }
.d-philo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; }
.d-philo blockquote { grid-column: 1 / span 8; margin: 0; font: 300 clamp(34px, 4.6vw, 76px)/1.08 var(--font-display-en); letter-spacing: -.01em; }
html[lang="ar"] .d-philo blockquote { font: 500 clamp(30px, 3.6vw, 58px)/1.5 var(--font-display-ar); }
.d-philo blockquote em { font-style: italic; color: var(--brass-600); }
html[lang="ar"] .d-philo blockquote em { font-style: normal; }
.d-philo .portrait { grid-column: 10 / -1; grid-row: 1 / span 3; aspect-ratio: 4 / 5; border: 1px dashed rgba(26,27,29,.25); display: grid; place-items: center; text-align: center; padding: 20px; color: #5F6266; font-size: 13px; }
/* Portrait of the architect — shown whole at its own ratio (725×1032): no stretching, no cropping */
.d-philo .portrait.has-img { aspect-ratio: 725 / 1032; border: 0; padding: 0; margin: 0; display: block; overflow: hidden; background: #E9E5DD; align-self: start; }
.d-philo .portrait.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.d-principles { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); border-top: 1px solid rgba(26,27,29,.15); padding-top: 28px; }
.d-principles h3 { margin: 10px 0 8px; font: 400 26px/1.1 var(--font-display-en); }
html[lang="ar"] .d-principles h3 { font: 500 22px/1.5 var(--font-display-ar); }
.d-principles p { margin: 0; color: #5F6266; font-size: 15px; }
.d-principles .n { font: 400 11px/1 var(--font-mono); color: var(--brass-ink); letter-spacing: .12em; }
@media (max-width: 1023px) {
  .d-philo > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .d-philo .portrait { max-width: 320px; }
  .d-philo .portrait.has-img { width: 100%; }
  .d-principles { grid-template-columns: 1fr; }
}

/* ---------- Services ---------- */
.d-serv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.d-serv ol { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--graphite-700); }
.d-serv li button { width: 100%; text-align: start; display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--graphite-700); position: relative; }
.d-serv li button::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 100%; height: 1px; background: var(--champagne-400); transform: scaleX(0); transform-origin: var(--origin-start); transition: transform 700ms var(--ease-fin); }
.d-serv li button[aria-expanded="true"]::after, .d-serv li button:hover::after { transform: scaleX(1); }
.d-serv .n { font: 400 12px/1 var(--font-mono); color: var(--champagne-400); }
.d-serv h3 { margin: 0; font: 300 clamp(24px, 2.6vw, 40px)/1.15 var(--font-sans); letter-spacing: -.015em; }
html[lang="ar"] .d-serv h3 { font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.d-serv .plus { width: 16px; height: 16px; position: relative; }
.d-serv .plus::before, .d-serv .plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 400ms var(--ease-fin); }
.d-serv .plus::after { transform: rotate(90deg); }
.d-serv button[aria-expanded="true"] .plus::after { transform: rotate(0); }
.d-serv .body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 600ms var(--ease-fin); }
.d-serv .body > div { overflow: hidden; }
.d-serv .body.open { grid-template-rows: 1fr; }
.d-serv .body p { margin: 0; padding: 0 0 8px 72px; color: var(--stone-300); max-width: 56ch; }
html[dir="rtl"] .d-serv .body p { padding: 0 72px 8px 0; }
.d-serv .body .meta { display: block; padding: 0 0 26px 72px; }
html[dir="rtl"] .d-serv .body .meta { padding: 0 72px 26px 0; }
.d-serv .body .thumb { display: none; }
.d-serv .media { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; aspect-ratio: 4 / 5; overflow: hidden; background: var(--graphite-800); }
.d-serv .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease-out), transform 1200ms var(--ease-out); transform: scale(1.04); }
.d-serv .media img.on { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .d-serv ol { grid-column: 1 / -1; }
  .d-serv .media { display: none; }
  .d-serv .body .thumb { display: block; margin: 0 0 18px 72px; width: calc(100% - 72px); aspect-ratio: 16 / 10; object-fit: cover; }
  html[dir="rtl"] .d-serv .body .thumb { margin: 0 72px 18px 0; }
}
@media (max-width: 767px) {
  .d-serv li button { grid-template-columns: 36px 1fr auto; }
  .d-serv .body p, .d-serv .body .meta { padding-inline-start: 52px !important; padding-inline-end: 0 !important; padding-left: 0; }
  .d-serv .body .thumb { margin-inline-start: 52px !important; margin-inline-end: 0 !important; width: calc(100% - 52px); }
}

/* ---------- Contact ---------- */
.d-contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 48px; }
.d-contact .big { grid-column: 1 / span 6; }
.d-contact h2 { margin: 0 0 28px; font: 300 clamp(44px, 6.4vw, 104px)/.98 var(--font-sans); letter-spacing: -.035em; }
html[lang="ar"] .d-contact h2 { font-weight: 400; letter-spacing: 0; line-height: 1.3; font-size: clamp(40px, 5.4vw, 86px); }
.d-contact dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; margin: 0; }
.d-contact dt { color: var(--muted-dark); }
.d-contact dd { margin: 0; }
.d-contact dd a[href^="mailto:"], .d-menu-foot a[href^="mailto:"] { text-transform: none; letter-spacing: .02em; }   /* email addresses stay lowercase */
.d-form { grid-column: 8 / -1; display: grid; gap: 22px; }
.d-form label { display: grid; gap: 8px; }
.d-form input, .d-form select, .d-form textarea { font: 400 16px/1.4 var(--font-sans); color: var(--offwhite-50); background: transparent; border: 0; border-bottom: 1px solid var(--graphite-700); padding: 10px 0; min-height: 44px; border-radius: 0; transition: border-color 300ms; }
.d-form select option { background: var(--charcoal-900); }
.d-form textarea { min-height: 110px; resize: vertical; }
.d-form input:focus, .d-form select:focus, .d-form textarea:focus { outline: none; border-color: var(--champagne-400); }
.d-form .out { min-height: 1.6em; color: var(--stone-300); font-size: 14px; }
.d-form .out.is-ok { color: var(--champagne-400); }
.d-form .out.is-err, .d-form .err { color: #E8A6A0; }
.d-form .err { font-size: 13px; }
.d-form [aria-invalid="true"] { border-color: #E8A6A0; }
.d-form { position: relative; }
.d-form .hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* spam trap: invisible, but inside the page */
.d-form button[disabled] { opacity: .6; cursor: progress; }
.d-form .d-f-privacy { margin: 0; color: var(--muted-dark); }
.d-ct-p { margin: 0 0 30px; max-width: 42ch; color: var(--stone-300); font-size: 17px; line-height: 1.65; }
html[lang="ar"] .d-ct-p { font-size: 18px; line-height: 1.9; }
/* M3.11 About text in the Studio section */
.d-philo .d-about { grid-column: 1 / span 8; display: grid; gap: 14px; max-width: 64ch; }
.d-philo .d-about p { margin: 0; color: #3E4145; font-size: 17px; line-height: 1.75; }
html[lang="ar"] .d-philo .d-about p { font-size: 18px; line-height: 1.95; }
@media (max-width: 1023px) { .d-contact > * { grid-column: 1 / -1 !important; } }

.d-foot { border-top: 1px solid var(--graphite-800); padding: 40px var(--margin) 48px; display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.d-foot nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; direction: ltr; }
.d-foot nav a { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--graphite-700); font: 400 12px/1 var(--font-mono); letter-spacing: .08em; }
.d-foot nav a[aria-current="page"] { border-color: var(--champagne-400); color: var(--offwhite-50); }
.d-privacy { flex-basis: 100%; max-width: 72ch; }
.d-privacy summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted-dark); }
.d-privacy summary:hover, .d-privacy[open] summary { color: var(--offwhite-50); }
.d-privacy p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted-dark); }

/* ---------- Lightbox ---------- */
.d-lb { border: 0; padding: 0; background: rgba(12,13,14,.96); width: 100vw; height: 100vh; max-width: none; max-height: none; color: var(--offwhite-50); }
.d-lb::backdrop { background: rgba(12,13,14,.9); }
.d-lb figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 64px var(--margin) 24px; gap: 14px; }
.d-lb img { width: 100%; height: 100%; object-fit: contain; }
.d-lb .bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.d-lb .bar div { display: flex; gap: 8px; }
.d-lb .x { position: absolute; top: 14px; inset-inline-end: var(--margin); }
.d-lb button { min-width: 44px; min-height: 44px; border: 1px solid var(--graphite-700); padding: 0 12px; }
.d-lb button:hover { border-color: var(--champagne-400); }

/* ================= PROJECT PAGE (editorial storytelling, from B) ================= */
.p-hero { position: relative; height: 92vh; height: 92svh; min-height: 560px; overflow: hidden; }
.p-hero img { width: 100%; height: 100%; object-fit: cover; animation: d-settle 2400ms var(--ease-out) both; }
.p-hero .d-shade { z-index: 1; }
.p-hero .d-mullions { z-index: 2; }
.p-hero .in { position: absolute; z-index: 3; inset-inline: var(--margin); bottom: clamp(40px, 8vh, 80px); display: grid; gap: 16px; }
.p-hero h1 { margin: 0; font: 300 clamp(44px, 7vw, 120px)/.95 var(--font-display-en); letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(18,19,20,.5); }
html[lang="ar"] .p-hero h1 { font: 500 clamp(38px, 5.6vw, 92px)/1.3 var(--font-display-ar); }
.p-hero h1 .ln { display: block; overflow: hidden; }
.p-hero h1 .ln > span { display: inline-block; animation: d-rise 1100ms var(--ease-fin) 120ms both; }
.p-hero .back { color: var(--stone-300); }
.p-facts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-block: 1px solid var(--graphite-700); }
.p-facts div { padding: 22px 18px 22px 0; display: grid; gap: 8px; border-inline-end: 1px solid var(--graphite-800); padding-inline-start: 18px; }
.p-facts div:first-child { padding-inline-start: 0; }
.p-facts div:last-child { border-inline-end: 0; }
.p-facts dt { margin: 0; }
.p-facts dd { margin: 0; font-size: 15px; }
.p-facts dd.tbc { color: var(--muted-dark); }
@media (max-width: 1199px) { .p-facts { grid-template-columns: repeat(4, 1fr); } .p-facts div { border-bottom: 1px solid var(--graphite-800); } }
@media (max-width: 767px) { .p-facts { grid-template-columns: 1fr 1fr; } .p-facts div { padding-inline-start: 0 !important; border-inline-end: 0; } }

.p-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-block: var(--d-sec); }
.p-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.p-toc ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.p-toc a { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: baseline; min-height: 40px; padding-block: 8px; color: var(--muted-dark); font-size: 14px; transition: color 300ms; position: relative; }
.p-toc a span { font: 400 11px/1 var(--font-mono); }
.p-toc a::before { content: ""; position: absolute; inset-inline-start: -14px; top: 50%; width: 6px; height: 1px; background: var(--champagne-400); transform: scaleX(0); transition: transform 400ms var(--ease-fin); }
.p-toc a.on { color: var(--offwhite-50); }
.p-toc a.on::before { transform: scaleX(1); }
.p-toc .bar { height: 1px; background: var(--graphite-800); margin-top: 16px; position: relative; overflow: hidden; }
.p-toc .bar i { position: absolute; inset: 0; background: var(--champagne-400); transform: scaleX(var(--p, 0)); transform-origin: var(--origin-start); }
.p-main { grid-column: 4 / -1; display: grid; gap: clamp(88px, 14vh, 150px); }
.p-ch { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; scroll-margin-top: calc(var(--header-h) + 64px); }
.p-ch > header { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; border-top: 1px solid var(--graphite-700); padding-top: 18px; }
.p-ch > header .meta { color: var(--champagne-400); }
.p-ch > header h2 { margin: 0; font: 400 clamp(26px, 2.6vw, 40px)/1.15 var(--font-display-en); }
html[lang="ar"] .p-ch > header h2 { font: 500 clamp(24px, 2.2vw, 34px)/1.5 var(--font-display-ar); }
.p-lede { grid-column: 1 / span 7; margin: 0; font: 300 clamp(22px, 2.1vw, 32px)/1.45 var(--font-sans); }
html[lang="ar"] .p-lede { font-weight: 400; line-height: 1.85; font-size: clamp(20px, 1.8vw, 27px); }
.p-text { grid-column: 1 / span 6; margin: 0; color: var(--stone-300); font-size: 17px; line-height: 1.7; }
html[lang="ar"] .p-text { font-size: 18px; line-height: 1.95; }
.p-seen { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.p-statement { grid-column: 1 / span 7; margin: 0; padding: 26px 28px; border: 1px dashed var(--graphite-700); font: 300 clamp(20px, 1.8vw, 26px)/1.5 var(--font-display-en); font-style: italic; color: var(--stone-300); }
html[lang="ar"] .p-statement { font: 500 20px/1.8 var(--font-display-ar); font-style: normal; }
.p-fig { margin: 0; grid-column: 1 / -1; }
.p-fig.native { justify-self: start; }
.p-fig img { width: 100%; height: auto; }
.p-fig.native img { max-width: 100%; height: auto; }
.p-fig figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }
.p-mat { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); }
.p-mat figure { margin: 0; }
.p-mat figure > div { aspect-ratio: 3 / 4; overflow: hidden; background: var(--graphite-800); }
.p-mat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.p-mat figure:hover img { transform: scale(1.05); }
.p-mat figcaption { padding-top: 10px; font-size: 14px; color: var(--stone-300); }
@media (max-width: 1199px) { .p-mat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .p-mat { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); scrollbar-width: none; } .p-mat figure { scroll-snap-align: start; } }
.p-gal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); }
.p-gal button { display: block; padding: 0; position: relative; overflow: hidden; background: var(--graphite-800); grid-column: span 3; aspect-ratio: 16 / 10; }
.p-gal button.w { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.p-gal button.t { grid-column: span 2; aspect-ratio: 4 / 5; }
.p-gal button img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.p-gal button:hover img, .p-gal button:focus-visible img { transform: scale(1.04); }
.p-gal button::after { content: "+"; position: absolute; z-index: 3; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; display: grid; place-items: center; background: rgba(18,19,20,.7); color: var(--champagne-400); opacity: 0; transition: opacity 300ms; }
.p-gal button:hover::after, .p-gal button:focus-visible::after { opacity: 1; }
@media (max-width: 767px) { .p-gal { grid-template-columns: minmax(0, 1fr); } .p-gal button, .p-gal button.w, .p-gal button.t { grid-column: 1 / -1; aspect-ratio: 4 / 3; } }
.p-site { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.p-site figure { margin: 0; }
.p-site img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 767px) { .p-site { grid-template-columns: 1fr; } }
.p-dwg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--gutter); align-items: end; }
.p-dwg figure { margin: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.p-dwg img { max-width: 100%; height: auto; }
.p-ba { grid-column: 1 / -1; }
.p-next { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding: 56px var(--margin); border-top: 1px solid var(--graphite-700); }
.p-next a.big { font: 300 clamp(30px, 4vw, 60px)/1.05 var(--font-sans); letter-spacing: -.02em; display: inline-flex; gap: 18px; align-items: center; min-height: 44px; }
html[lang="ar"] .p-next a.big { font-weight: 400; letter-spacing: 0; }
@media (max-width: 1023px) {
  .p-body { grid-template-columns: minmax(0, 1fr); }
  .p-toc { grid-column: 1; position: sticky; top: var(--header-h); z-index: 20; background: var(--charcoal-950); margin-inline: calc(var(--margin) * -1); padding: 0 var(--margin); border-bottom: 1px solid var(--graphite-800); }
  .p-toc > .meta, .p-toc .bar { display: none; }
  .p-toc ol { display: flex; margin: 0; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .p-toc ol::-webkit-scrollbar { display: none; }
  .p-toc a { white-space: nowrap; grid-template-columns: auto auto; min-height: 48px; }
  .p-toc a::before { inset-inline-start: 0; top: auto; bottom: 0; width: 100%; }
  .p-main { grid-column: 1; margin-top: 40px; }
  .p-ch { grid-template-columns: minmax(0, 1fr); }
  .p-ch > * { grid-column: 1 / -1 !important; }
}

/* ================= M2.13 — catalog-driven additions ================= */
.g-more { display: flex; justify-content: center; margin-top: 40px; }
.g-card figure.is-empty, .g-card figure.is-drawing { position: relative; }
.g-card figure.is-drawing img { object-fit: contain; background: var(--offwhite-50); }
.g-card figure.is-empty { display: grid; place-items: center; background: var(--charcoal-900); border: 1px solid var(--graphite-800); }
.ph { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.ph i { border-inline-end: 1px solid rgba(200,180,138,.14); }
.ph i:last-child { border: 0; }
.ph-t { position: relative; z-index: 2; display: grid; gap: 8px; text-align: center; padding: 24px; }
.ph-t b { font: 300 clamp(22px, 2vw, 30px)/1.2 var(--font-sans); color: var(--champagne-400); letter-spacing: -.01em; }
html[lang="ar"] .ph-t b { font-weight: 400; letter-spacing: 0; }
.ph-t small { color: var(--stone-300); font-size: 13px; max-width: 32ch; }
/* project hero: framed mode for images too small to fill the screen, and empty mode */
.p-hero.is-framed { background: var(--charcoal-950); }
.p-hero.is-framed #p-hero-img { position: absolute; inset: calc(var(--header-h) + 24px) var(--margin) clamp(240px, 36vh, 340px); display: flex; align-items: center; justify-content: center; }
.p-hero.is-framed #p-hero-img img { width: auto; height: auto; max-height: min(100%, var(--nh, 100%)); min-height: 0; flex: 0 1 auto; max-width: min(100%, var(--nw, 100%)); object-fit: contain; animation: none; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.p-hero.is-framed .d-shade { background: linear-gradient(to top, rgba(18,19,20,.95) 0%, rgba(18,19,20,0) 30%); }
.p-hero.is-empty { background: var(--charcoal-900); }
.p-hero.is-empty #p-hero-img { position: absolute; inset: 0; }
.p-hero .in .ph-t { text-align: start; padding: 0; }
/* project gallery: masonry columns, natural proportions, never wider than the file */
.pg { columns: 3 300px; column-gap: var(--gutter); }
.pg-it { display: block; width: 100%; padding: 0; margin: 0 0 var(--gutter); break-inside: avoid; background: var(--graphite-800); position: relative; overflow: hidden; cursor: zoom-in; }
.pg-it img { width: 100%; height: auto; transition: transform 1200ms var(--ease-out); }
.pg-it:hover img, .pg-it:focus-visible img { transform: scale(1.03); }
.pg-it[hidden] { display: none; }
.p-ch > .pg, .p-ch > .btn, .p-ch > .p-ba, .p-ch > .p-dwg { grid-column: 1 / -1; }
.p-ch > .btn { justify-self: start; }
.pdw { padding: 0; display: block; background: var(--offwhite-50); cursor: zoom-in; }
.pdw img { max-width: min(100%, 1100px); height: auto; }
.p-next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 48px var(--margin); border-top: 1px solid var(--graphite-700); }
.p-next .pn { display: grid; gap: 6px; min-height: 44px; }
.p-next .pn b { font: 300 clamp(20px, 2vw, 30px)/1.2 var(--font-sans); }
html[lang="ar"] .p-next .pn b { font-weight: 400; }
.p-next .next { text-align: end; }
@media (max-width: 767px) { .p-next { grid-template-columns: 1fr 1fr; } .p-next .link { grid-column: 1 / -1; grid-row: 2; justify-self: center; } .pg { columns: 1; } }

/* M2.13.9 — split hero for portrait/square images (desktop): image fills the hero height, never above its own size */
.p-hero.is-split { background: var(--charcoal-950); }
.p-hero.is-split #p-hero-img { position: absolute; z-index: 1; inset-block: calc(var(--header-h) + 20px) 32px; inset-inline-end: var(--margin); width: 52%; display: flex; align-items: center; justify-content: center; }
.p-hero.is-split #p-hero-img img { width: auto; height: auto; max-width: min(100%, var(--nw, 100%)); max-height: min(100%, var(--nh, 100%)); min-height: 0; object-fit: contain; animation: none; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.p-hero.is-split .d-shade { background: linear-gradient(var(--shade-dir, to right), rgba(18,19,20,.0) 0%, rgba(18,19,20,0) 100%); }
.p-hero.is-split .in { inset-inline-end: auto; width: 40%; bottom: auto; top: 50%; transform: translateY(-30%); }
.p-hero.is-split h1 { font-size: clamp(40px, 4.6vw, 84px); }
html[lang="ar"] .p-hero.is-split h1 { font-size: clamp(34px, 3.8vw, 66px); }
/* featured rows: portrait images shown whole (no crop), height-capped, never enlarged */
.d-feat figure.is-portrait { aspect-ratio: auto; height: min(78vh, 760px); background: var(--charcoal-900); display: flex; align-items: center; justify-content: center; }
.d-feat figure.is-portrait img { width: auto; height: 100%; max-width: min(100%, var(--nw, 100%)); max-height: var(--nh, 100%); object-fit: contain; }
@media (max-width: 1023px) { .d-feat figure.is-portrait { height: auto; aspect-ratio: auto; } .d-feat figure.is-portrait img { width: 100%; height: auto; } }

/* ===== M2.13 responsive art direction (phones ≤767px). Choices live in site-curation.json ===== */
.d-base picture { display: contents; }
@media (max-width: 767px) {
  /* project page, no phone image: the computer image WHOLE at full width (no crop, no empty frame), title directly below */
  .p-hero.is-whole { height: auto; min-height: 0; overflow: visible; background: var(--charcoal-950); padding-top: var(--header-h); }
  .p-hero.is-whole #p-hero-img { position: relative; }
  .p-hero.is-whole #p-hero-img img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; animation: none; }
  .p-hero.is-whole .d-shade { display: none; }
  .p-hero.is-whole .in { position: relative; inset: auto; bottom: auto; padding: 28px 0 8px; margin-inline: var(--margin); }
  .p-hero.is-whole h1 { text-shadow: none; }
  /* no image yet (ARC-030): a compact block instead of a near-full-screen empty frame */
  .p-hero.is-empty { height: auto; min-height: 0; padding-top: calc(var(--header-h) + 120px); }
  .p-hero.is-empty .in { position: relative; inset: auto; bottom: auto; padding: 0 0 36px; margin-inline: var(--margin); }
}
/* full mode: the image box covers the whole hero (it previously took the image's own height, leaving a band below on phones) */
.p-hero[data-mode="full"] #p-hero-img { position: absolute; inset: 0; }

/* ===== M2.14 editorial timeline (project page), e.g. ARC-031 «2025 — The Vision / 2026 — The Shift». Texts: site-content.json ===== */
.tl { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.tl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tl-col:not(.has-img) { padding: clamp(22px, 3vw, 40px); background: var(--charcoal-900); border: 1px solid var(--graphite-800); }
.tl-y { font: 300 clamp(64px, 8.5vw, 132px)/.9 var(--font-display-en); letter-spacing: -.02em; color: var(--champagne-400); }
.tl-l { margin: 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg); }
html[lang="ar"] .tl-l { font: 600 16px/1.5 var(--font-sans-ar); letter-spacing: 0; text-transform: none; }
.tl-t { margin: 0; color: var(--stone-300); font-size: 17px; line-height: 1.7; max-width: 46ch; }
html[lang="ar"] .tl-t { font-size: 18px; line-height: 1.95; }
.tl-img { margin: 8px 0 0; }
.tl-img img { display: block; width: 100%; height: auto; }
.tl-rule { position: relative; background: var(--graphite-800); }
.tl-rule i { position: absolute; inset: 0; background: var(--champagne-400); transform-origin: top; transform: scaleY(0); transition: transform 1600ms var(--ease-fin) 300ms; }
.tl.in .tl-rule i { transform: scaleY(1); }
.tl-close { grid-column: 1 / span 7; margin: clamp(8px, 2vw, 24px) 0 0; font: 300 clamp(24px, 2.8vw, 40px)/1.3 var(--font-display-en); }
html[lang="ar"] .tl-close { font: 500 clamp(22px, 2.3vw, 32px)/1.7 var(--font-display-ar); }
.tl-note { grid-column: 1 / span 7; margin: 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--champagne-400); color: var(--fg-muted); font-size: 13px; line-height: 1.6; }
html[lang="ar"] .tl-note { font-size: 14px; line-height: 1.8; }
html.gf-reduced .tl-rule i { transition: none; transform: none; }
@media (max-width: 767px) {
  .tl { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .tl-rule { height: 1px; }
  .tl-rule i { transform-origin: left; transform: scaleX(0); }
  html[dir="rtl"] .tl-rule i { transform-origin: right; }
  .tl.in .tl-rule i { transform: scaleX(1); }
  .tl-close, .tl-note { grid-column: 1 / -1; }
}
/* academic badge on cards: second line under the usual tag position */
.g-card .tag.is-academic { color: var(--champagne-400); }
/* M2.15: keep the brand on one line on narrow phones (it wrapped at 360px on project pages) */
.d-brand b { white-space: nowrap; }
@media (max-width: 420px) { .d-header { column-gap: 14px; } }   /* room for the menu button on phones */
.d-menu-btn { flex-shrink: 0; }   /* room for the menu button at 360px */
/* M2.15: a long before/after tab («Executive Office with Cuneiform Garden») was wider than a 320–360px screen and widened the whole homepage */
@media (max-width: 400px) { .ba-tabs .chip { white-space: normal; max-width: 100%; line-height: 1.35; padding-block: 8px; text-align: start; } }
/* M2.15: on phones «gap: 32px» also set 11 × 32px COLUMN gaps (352px) in the 12-column grid, wider than a 320–360px screen. Rows keep 32px; columns use the normal gutter */
@media (max-width: 767px) { .g-grid { row-gap: 32px; column-gap: var(--gutter); } }

/* ===== M2.15 identity: «ALI AL-MAAMAR / علي المعمار» — refined wordmark (serif capitals, wide tracking; Naskh in Arabic), gold rule kept ===== */
.d-brand b { font: 500 15px/1 var(--font-display-en); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
html[lang="ar"] .d-brand b { font: 500 19px/1.1 var(--font-display-ar); letter-spacing: 0; text-transform: none; }
.d-brand i { width: 34px; }
.d-brand:hover i { width: 64px; }
@media (max-width: 420px) { .d-brand b { font-size: 14px; letter-spacing: .18em; } html[lang="ar"] .d-brand b { font-size: 18px; } }
@media (max-width: 380px) { .d-brand b { font-size: 13px; letter-spacing: .14em; } }   /* 360px phones: name + language + menu fit inside the side margins */