/* ============================================================
   Projects portfolio (2026-10-18) — image-led cards + project gallery.
   Shared by site/portfolio.html and site/en/portfolio.html. Uses the site tokens only.
   Card tiers: [data-tier="feature"] large spreads (the opening projects) · default collection · [data-tier="hero"] full-width opening (available, unused).
   Images are never displayed wider than their real pixels (--w on the <img>).
   ============================================================ */

/* ---------- page opening: compact title so the first project leads the viewport ---------- */
.pf-page .contents-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4em 2em;
  padding-block:clamp(22px,2.6vw,40px) clamp(16px,1.8vw,26px); margin:0; border:0; }
.pf-page .contents-head h1{ font-size:clamp(2.1rem,1.4rem + 2vw,3.3rem); }
.pf-page .contents-head h1{ margin:0; }
.pf-page .contents-head .lead{ margin:0; max-inline-size:52ch; }
html[dir="rtl"] .pf-page .contents-head .lead{ font-size:1.05rem; line-height:1.9; letter-spacing:normal; text-transform:none; }

/* ---------- the collection ---------- */
.pf-list{ list-style:none; margin:0 0 clamp(64px,8vw,128px); padding:0; display:grid; row-gap:clamp(64px,8.5vw,136px); }
.pf-card{ display:grid; gap:clamp(22px,3.2vw,60px); align-items:center; scroll-margin-block-start:110px; }
.pf-media{ margin:0; min-inline-size:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pf-open{ display:flex; justify-content:center; inline-size:100%; padding:0; border:0; background:none; cursor:zoom-in; }
/* the box takes its real width before the photograph loads (no collapse, no shift); contain keeps proportions when the height cap applies */
.pf-open img{ display:block; inline-size:min(100%, calc(var(--w, 9999) * 1px)); max-inline-size:100%; block-size:auto; max-block-size:min(84svh, 880px); object-fit:contain;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
@media (hover:hover){ .pf-open:hover img{ transform:scale(1.02); } }
.pf-open:focus-visible{ outline:2px solid var(--color-accent-functional,#8A5E20); outline-offset:-4px; }

.pf-info{ min-inline-size:0; }
.pf-sector{ font-family:var(--font-text); font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--color-accent-champagne-deep,#8A5E20); margin:0 0 1em; }
.pf-name{ font-family:var(--font-display-ar); font-weight:400; color:var(--color-heading-gold,#8A5E20);
  font-size:clamp(1.85rem,1.15rem + 1.9vw,2.9rem); line-height:1.12; margin:0 0 .35em; }
.pf-where{ font-family:var(--font-text); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted); margin:0 0 1.5em; }
.pf-desc{ font-family:var(--font-text); font-size:1rem; line-height:1.85; color:var(--color-text); max-inline-size:46ch; margin:0 0 1.5em; }
.pf-count{ font-family:var(--font-text); font-size:.8rem; color:var(--color-text-muted); max-inline-size:46ch;
  margin:0 0 1.6em; padding-block-start:1.1em; border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.pf-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.9em 1.7em; }
.pf-more{ display:inline-flex; align-items:center; gap:.8em; border:0; margin:0; cursor:pointer;
  background:var(--color-gold-btn,#D2A049); color:var(--color-bg-velvet,#3A2E19);
  font-family:var(--font-text); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:1em 1.7em; transition:background .25s ease; }
.pf-more:hover{ background:var(--color-gold-btn-hover,#B58538); }
.pf-more:focus-visible{ outline:2px solid var(--color-accent-functional,#8A5E20); outline-offset:3px; }
.pf-arrow::before{ content:"\2192"; font-size:1.05em; }
.pf-page-link, .pf-actions .pf-page{ font-family:var(--font-text); font-size:.85rem; color:var(--color-text);
  text-decoration:underline; text-decoration-color:rgba(59,44,24,.35); text-underline-offset:.35em; }
.pf-actions .pf-page:hover{ text-decoration-color:currentColor; }

/* Arabic: cursive script is never tracked; RTL arrow */
html[dir="rtl"] .pf-sector, html[dir="rtl"] .pf-where, html[dir="rtl"] .pf-more{ letter-spacing:normal; text-transform:none; }
html[dir="rtl"] .pf-sector{ font-size:.92rem; }
html[dir="rtl"] .pf-where{ font-size:.98rem; }
html[dir="rtl"] .pf-more{ font-size:.95rem; }
html[dir="rtl"] .pf-name{ line-height:1.45; }
html[dir="rtl"] .pf-arrow::before{ content:"\2190"; }

/* ---------- desktop: image beside the text, alternating sides ---------- */
@media (min-width:960px){
  .pf-card{ grid-template-columns:minmax(0,56fr) minmax(0,44fr); }
  .pf-card[data-tier="feature"]{ grid-template-columns:minmax(0,63fr) minmax(0,37fr); }
  .pf-card:nth-child(even){ grid-template-columns:minmax(0,44fr) minmax(0,56fr); }
  .pf-card[data-tier="feature"]:nth-child(even){ grid-template-columns:minmax(0,37fr) minmax(0,63fr); }
  .pf-card:nth-child(even) > .pf-media{ order:2; }
  .pf-card[data-tier="feature"] .pf-name{ font-size:clamp(2.2rem,1.3rem + 2.2vw,3.4rem); }
  /* hero: the photograph fills the opening view; an ivory panel overlaps its lower corner so the name reads at once */
  .pf-card[data-tier="hero"]{ grid-template-columns:1fr; gap:0; }
  .pf-card[data-tier="hero"] .pf-open img{ inline-size:100%; max-inline-size:none; block-size:clamp(420px, calc(100svh - 440px), 820px); max-block-size:none; object-fit:cover; }
  .pf-card[data-tier="hero"] .pf-info{ position:relative; z-index:1; inline-size:min(560px, 46%); margin-block-start:clamp(-190px,-14vw,-120px);
    margin-inline-start:clamp(28px,4vw,64px); padding:clamp(26px,2.6vw,40px) clamp(28px,3vw,46px) clamp(26px,2.6vw,38px);
    background:var(--color-bg-base,#F8F5EF); box-shadow:0 24px 60px -36px rgba(36,26,14,.55); }
  .pf-card[data-tier="hero"] .pf-name{ font-size:clamp(2.6rem,1.5rem + 2.6vw,4rem); }
}
/* hero on wide screens is never upscaled past its real pixels */
@media (min-width:960px){ .pf-card[data-tier="hero"] .pf-media{ max-inline-size:calc(var(--hero-w, 9999) * 1px); margin-inline:auto; inline-size:100%; } }

/* ---------- phones and tablets: image first, full width ---------- */
@media (max-width:959px){
  .pf-list{ row-gap:clamp(48px,11vw,72px); }
  .pf-card{ grid-template-columns:1fr; gap:20px; }
  .pf-card[data-tier="hero"] .pf-media{ margin-inline:calc(-1 * var(--gutter, 20px)); }
  .pf-card[data-tier="hero"] .pf-name{ font-size:clamp(2.2rem,1.4rem + 4vw,3rem); }
  .pf-desc, .pf-count{ max-inline-size:none; }
  .pf-more{ padding:1em 1.4em; }
}

/* ============================================================
   Project gallery (dialog) - ivory, image-led; the project text sits beside the photograph
   (desktop) or directly beneath it (phones). RTL mirrors through logical properties.
   ============================================================ */
.pfg{ position:fixed; inset:0; inline-size:100vw; block-size:100dvh; max-inline-size:none; max-block-size:none; margin:0; padding:0; border:0;
  background:var(--color-bg-base,#F8F5EF); color:var(--color-text,#3B2C18); overflow:hidden; }
.pfg::backdrop{ background:rgba(248,245,239,.97); }
.pfg[open]{ display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,27vw,410px); grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"stage tools" "stage title" "thumbs foot"; }
html.pfg-lock, html.pfg-lock body{ overflow:hidden; }
/* the reserved scrollbar strip takes the gallery's colour while it is open */
html.pfg-lock{ background-color:var(--color-bg-base,#F8F5EF); }
/* the scrollbar keeps its space while the gallery is open, so the page never reflows or shifts underneath it */
html:has(.pf-page){ scrollbar-gutter:stable; }
.pfg-head{ display:contents; }
.pfg-tools{ grid-area:tools; display:flex; align-items:center; justify-content:flex-end; gap:clamp(10px,1.4vw,20px);
  padding:clamp(16px,2vw,28px) clamp(18px,2.4vw,40px) 0; border-inline-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.pfg-title{ grid-area:title; min-inline-size:0; min-block-size:0; overflow-y:auto; align-self:stretch;
  padding:clamp(18px,2.4vw,40px) clamp(22px,2.6vw,44px) 18px; border-inline-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.pfg-meta{ font-family:var(--font-text); font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; line-height:1.7;
  color:var(--color-accent-champagne-deep,#8A5E20); margin:0 0 1em; }
.pfg-name{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.8rem,1.1rem + 1.6vw,2.7rem); line-height:1.15;
  color:var(--color-heading-gold,#8A5E20); margin:0 0 .8em; }
.pfg-note{ font-family:var(--font-text); font-size:1rem; line-height:1.85; color:var(--color-text,#3B2C18); margin:0;
  padding-block-start:1.1em; border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.pfg-note:empty{ display:none; }
.pfg-count{ font-family:var(--font-text); font-size:.82rem; color:var(--color-text-muted,#6E5B40); font-variant-numeric:tabular-nums; }
.pfg-close{ inline-size:46px; block-size:46px; border-radius:50%; border:1px solid rgba(138,94,32,.35); background:none;
  color:var(--color-heading-gold,#8A5E20); cursor:pointer; font-size:20px; line-height:1; transition:background .2s, color .2s; }
.pfg-close:hover, .pfg-close:focus-visible{ background:var(--color-gold-btn,#D2A049); color:var(--color-bg-velvet,#3A2E19); border-color:transparent; outline:none; }
.pfg-stage{ grid-area:stage; position:relative; display:grid; place-items:center; min-block-size:0; min-inline-size:0;
  padding:clamp(18px,2.4vw,36px) clamp(64px,6vw,104px) 8px; touch-action:pan-y; }
.pfg-figure{ margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:100%; block-size:100%; min-block-size:0; }
.pfg-img{ display:block; max-inline-size:min(100%, calc(var(--w, 9999) * 1px)); max-block-size:100%; inline-size:auto; block-size:auto; min-block-size:0;
  object-fit:contain; flex:0 1 auto; opacity:1; transition:opacity .35s ease; box-shadow:0 26px 60px -40px rgba(36,26,14,.55); }
.pfg-img.is-loading{ opacity:0; }
.pfg-cap{ font-family:var(--font-text); font-size:.84rem; color:var(--color-text-muted,#6E5B40); margin:.8em 0 0; text-align:center; min-block-size:1.2em; flex:0 0 auto; }
.pfg-spin{ position:absolute; inset:0; margin:auto; inline-size:34px; block-size:34px; border-radius:50%; border:2px solid rgba(138,94,32,.15); border-top-color:var(--color-gold-btn-hover,#B58538);
  animation:pfg-spin 1s linear infinite; opacity:0; pointer-events:none; transition:opacity .2s; }
.pfg.is-busy .pfg-spin{ opacity:1; }
@keyframes pfg-spin{ to{ transform:rotate(360deg); } }
.pfg-nav{ position:absolute; top:50%; transform:translateY(-50%); inline-size:50px; block-size:50px; border-radius:50%; border:1px solid rgba(138,94,32,.35);
  background:rgba(248,245,239,.92); color:var(--color-heading-gold,#8A5E20); font-size:21px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;
  transition:background .2s, color .2s; }
.pfg-nav:hover, .pfg-nav:focus-visible{ background:var(--color-gold-btn,#D2A049); color:var(--color-bg-velvet,#3A2E19); border-color:transparent; outline:none; }
.pfg-nav[disabled]{ opacity:.3; cursor:default; background:rgba(248,245,239,.92); color:var(--color-heading-gold,#8A5E20); border-color:rgba(138,94,32,.35); }
.pfg-prev{ inset-inline-start:clamp(8px,1.4vw,26px); } .pfg-next{ inset-inline-end:clamp(8px,1.4vw,26px); }
.pfg-thumbs{ grid-area:thumbs; display:flex; gap:8px; overflow-x:auto; padding:12px clamp(16px,3vw,44px) clamp(14px,2vw,22px);
  scrollbar-width:thin; scrollbar-color:rgba(138,94,32,.3) transparent; }
.pfg-thumb{ flex:0 0 auto; inline-size:96px; block-size:66px; padding:0; border:0; background:#ECE5D8; cursor:pointer; opacity:.6;
  transition:opacity .2s; outline:2px solid transparent; outline-offset:2px; }
.pfg-thumb img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.pfg-thumb:hover, .pfg-thumb:focus-visible{ opacity:.9; }
.pfg-thumb[aria-current="true"]{ opacity:1; outline-color:var(--color-gold-btn-hover,#B58538); }
.pfg-foot{ grid-area:foot; display:flex; align-items:center; padding:12px clamp(22px,2.6vw,44px) clamp(16px,2vw,24px);
  border-inline-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.pfg-foot a{ font-family:var(--font-text); font-size:.86rem; color:var(--color-text,#3B2C18);
  text-decoration:underline; text-decoration-color:rgba(59,44,24,.35); text-underline-offset:.35em; }
.pfg-foot a:hover{ text-decoration-color:currentColor; }
html[dir="rtl"] .pfg-meta{ letter-spacing:normal; text-transform:none; font-size:.92rem; }
html[dir="rtl"] .pfg-name{ line-height:1.45; }
html[dir="rtl"] .pfg-note{ font-size:1.05rem; line-height:1.95; }
/* phones and small tablets: photograph, thumbnails, then the project text - the gallery scrolls as one column */
@media (max-width:899px){
  .pfg{ overflow-y:auto; overscroll-behavior:contain; }
  .pfg[open]{ display:flex; flex-direction:column; }
  .pfg[open] > *, .pfg-head > *{ flex:0 0 auto; }
  .pfg-tools{ order:0; } .pfg-stage{ order:1; } .pfg-thumbs{ order:2; } .pfg-title{ order:3; } .pfg-foot{ order:4; }
  .pfg-tools{ position:sticky; top:0; z-index:3; justify-content:space-between; padding:10px 14px; border:0;
    background:rgba(248,245,239,.94); border-block-end:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
  .pfg-count{ order:-1; }
  .pfg-stage{ block-size:auto; min-block-size:200px; padding:14px 0 4px; }
  .pfg-figure{ block-size:auto; }
  .pfg-img{ max-block-size:min(60svh, 560px); }
  .pfg-nav{ display:none; }
  .pfg-img{ box-shadow:none; }
  .pfg-thumbs{ padding:10px 14px 4px; }
  .pfg-thumb{ inline-size:72px; block-size:52px; }
  .pfg-title{ overflow:visible; border:0; padding:22px clamp(18px,5vw,28px) 8px; }
  .pfg-foot{ border:0; padding:6px clamp(18px,5vw,28px) 34px; }
}
@media (prefers-reduced-motion:reduce){ .pf-open img, .pfg-img{ transition:none; } }

/* ============================================================
   Service pages (2026-10-20): every approved photograph is shown inline under the opening photographs —
   no second click. Natural proportions (never cropped or stretched); two columns, one on phones.
   ============================================================ */
.svc-photos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px,2vw,28px); align-items:start;
  margin-block-start:clamp(14px,2vw,28px); }
.svc-photos.is-single{ grid-template-columns:minmax(0, 620px); justify-content:center; }
.svc-photo{ margin:0; }
.svc-photo img{ display:block; inline-size:100%; block-size:auto; }
@media (max-width:700px){ .svc-photos{ grid-template-columns:1fr; } }
/* an odd last photograph sits centred under the pair above it */
@media (min-width:701px){ .svc-photos:not(.is-single) > .svc-photo:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; inline-size:calc(50% - clamp(14px,2vw,28px) / 2); } }