/* =========================================================
   ARAM MIZURI ARCHITECTURE — style.css
   Inspired by BIG.dk | Kurdish Edition
   ========================================================= */

/* ---- Variables ----------------------------------------- */
:root {
    --gold:        #F5C518;
    --gold-dim:    #C9A000;
    --red:         #CE1126;
    --green:       #007A3D;
    --black:       #090909;
    --off-white:   #181818;
    --grey-1:      #2a2a2a;
    --grey-2:      #888;
    --grey-3:      #bbb;
    --text:        #E5E2DC;
    --font:        'Inter', 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
    --serif:       'Playfair Display', 'Vazirmatn', Georgia, serif;
    --font-ku:     'Speda', 'XoshnusKurdish', 'Vazirmatn', 'Inter', sans-serif;
    --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --nav-h:       104px;
}

/* ---- Kurdish display font (Xoshnûs) --------------------
   Drop your licensed Xoshnûs font file into public/fonts/ named
   "kurdish.woff2" (or kurdish.ttf) and it is used automatically for
   all Kurdish text. Until the file exists, Vazirmatn is the fallback,
   so the missing-file request is harmless. */
@font-face {
    font-family: 'XoshnusKurdish';
    src: url('/fonts/kurdish.woff2') format('woff2'),
         url('/fonts/kurdish.ttf')   format('truetype');
    font-weight: 100 900;
    font-display: swap;
}
/* SiRWAN_6 — decorative Kurdish face used only for the gold "ئارام مزووری"
   signature on the English hero (see .hero__line-in--accent below). */
@font-face {
    font-family: 'SiRWAN';
    src: url('/fonts/sirwan.ttf') format('truetype');
    font-weight: 400 900;
    font-display: swap;
}
/* Speda — primary Kurdish face for the whole RTL/Kurdish version (--font-ku). */
@font-face {
    font-family: 'Speda';
    src: url('/fonts/speda.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
}

/* ---- Reset --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--off-white);
    color: var(--text);
    cursor: none;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); }
img { display: block; max-width: 100%; }

/* ---- Kurdish (Sorani) type — Speda for ALL texts ----
   Redefining --font/--serif inside the RTL scope makes every element that
   hard-codes them (body, buttons, serif headings, quotes, form inputs, the
   nav brand…) resolve to the Speda stack — one rule covers the whole version. */
[dir="rtl"] {
    --font:  var(--font-ku);
    --serif: var(--font-ku);
    font-family: var(--font-ku);
}
[dir="rtl"] .hero__title,
[dir="rtl"] .about__heading,
[dir="rtl"] .heritage__title,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: var(--font-ku); }
/* Kurdish glyphs carry long descenders (ی ن ڕ و) that the ultra-tight Latin
   line-height would clip under the reveal mask. Give those lines room at the
   BOTTOM (for descenders) with only a hair of top padding, so the gap between
   the two headline lines stays tight. Line 2 is always the Kurdish name. */
.hero__line:nth-child(2) { line-height: 1; padding: .02em .05em .28em; margin-top: -.14em; }
[dir="rtl"] .hero__title { line-height: 1; }
[dir="rtl"] .hero__line { padding: .02em .05em .28em; }

/* ---- RTL polish — mirror what the LTR design hard-codes ---- */
/* directional arrows point the other way */
[dir="rtl"] .hero__go-arrow,
[dir="rtl"] .heritage__cta-arrow,
[dir="rtl"] .form-submit__arrow,
[dir="rtl"] .pgc__cta-arrow,
[dir="rtl"] .map-card__cta svg { display: inline-block; transform: scaleX(-1); }
/* keep the ↗ symbol a simple monochrome glyph, never a colour emoji: the
   Kurdish text font has no arrow glyph and would otherwise fall back to the
   system emoji font (paired with U+FE0E in the markup for older browsers) */
.pg__search-icon, .pgc__cta-arrow, .contact__map-open { font-variant-emoji: text; }
/* the process timeline rail sits with the nodes on the right in RTL */
[dir="rtl"] .process__rail { left: auto; right: 27px; }
/* project card corners + copy swap sides */
[dir="rtl"] .pgc__status { left: auto; right: 16px; }
[dir="rtl"] .pgc__cta    { right: auto; left: 16px; }
[dir="rtl"] .pgc__info   { text-align: right; }
/* the map's section label sits top-right */
[dir="rtl"] .proj-map__label { left: auto; right: 40px; text-align: right; }
/* the contact-method "copy" chip pins to the far (left) edge in RTL */
[dir="rtl"] .cmethod__hint { margin-left: 0; margin-right: auto; }
/* Latin/numeric spec values (year range "2022 – 2024", "8,400 m²", location,
   typology) must render LTR so bidi doesn't reverse them — kept right-aligned. */
[dir="rtl"] .od-spec dd { direction: ltr; text-align: right; }

/* ---- Custom Cursor ------------------------------------- */
.cursor {
    position: fixed; left: 0; top: 0;
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ease), height .25s var(--ease), background .25s;
    will-change: transform;
}
.cursor-follower {
    position: fixed; left: 0; top: 0;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(245,197,24,.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width .3s var(--ease), height .3s var(--ease), border-color .3s;
    will-change: transform;
}
.cursor--expand  { width: 14px; height: 14px; background: var(--text); }
.cursor-follower--expand { width: 58px; height: 58px; border-color: var(--text); }

/* Touch devices have no real pointer to track — a custom cursor just
   ends up stuck wherever the last tap was, so hide it entirely. */
@media (hover: none), (pointer: coarse) {
    .cursor, .cursor-follower { display: none !important; }
}

/* ---- Loader -------------------------------------------- */
.loader {
    position: fixed; inset: 0;
    background: var(--black);
    z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: hidden;
    transition: opacity .8s var(--ease), visibility .8s;
}
/* gold aurora behind the glass — liquid glass over flat black is
   invisible; this gives the disc and rail something to refract */
.loader::before {
    content: ''; position: absolute; inset: -18%;
    background:
        radial-gradient(40% 34% at 30% 32%, rgba(245,197,24,.15), transparent 70%),
        radial-gradient(46% 38% at 72% 68%, rgba(245,197,24,.09), transparent 70%);
    animation: mmAurora 12s ease-in-out infinite alternate;
    pointer-events: none;
}
.loader.out { opacity: 0; visibility: hidden; pointer-events: none; }
/* the sun, held in a liquid-glass disc: glass stays still, sun turns */
.loader__sun {
    position: relative;
    width: 210px; height: 210px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 55%, rgba(245,197,24,.08));
    border: 1px solid rgba(255,255,255,.22);
    border-top-color: rgba(255,255,255,.42);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), 0 0 80px rgba(245,197,24,.14);
}
.loader__sun svg { display: block; animation: spinSlow 8s linear infinite; }
/* light sheen sweeping across the glass disc */
.loader__sun::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 50%, transparent 64%);
    background-size: 250% 100%; background-position: 220% 0; background-repeat: no-repeat;
    animation: mmSheen 4.2s ease-in-out infinite;
    pointer-events: none;
}
.loader__text {
    position: relative;
    color: rgba(255,255,255,.45);
    font-size: 11px; letter-spacing: .45em;
    text-transform: uppercase; margin-top: 30px; font-weight: 300;
}
/* progress line as a liquid-glass rail with a glowing gold fill */
.loader__bar {
    position: relative;
    width: 240px; height: 8px;
    margin-top: 22px; overflow: hidden;
    border-radius: 100px;
    background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 55%, rgba(245,197,24,.05));
    border: 1px solid rgba(255,255,255,.2);
    border-top-color: rgba(255,255,255,.36);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.4);
}
/* Width is set by initLoader as milestones are reached. It used to be a
   fixed 1.6s keyframe animation, which meant the bar reported 100% while a
   slow connection was still fetching — a progress bar that lies is worse
   than no progress bar, because it converts waiting into disbelief. */
.loader__progress {
    height: 100%; width: 0;
    border-radius: 100px;
    background: linear-gradient(90deg, rgba(245,197,24,.65), var(--gold) 60%, #ffe58a);
    box-shadow: 0 0 14px rgba(245,197,24,.55);
}
/* Slow-connection note + escape hatch. Both stay out of the way until the
   loader has been up long enough that silence starts to read as breakage
   (see initLoader in script.js), so a normal visit never sees either. */
.loader__note {
    position: relative;
    max-width: 320px; margin-top: 20px;
    text-align: center;
    color: rgba(255,255,255,.5);
    font-size: 12px; font-weight: 300; line-height: 1.65;
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    pointer-events: none;
}
.loader__note.show { opacity: 1; transform: none; }
.loader__actions {
    position: relative;
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
    margin-top: 16px;
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    pointer-events: none;
}
.loader__actions.show { opacity: 1; transform: none; pointer-events: auto; }
.loader__btn {
    padding: 9px 18px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,.85);
    font-family: inherit; font-size: 11px; font-weight: 400;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s;
}
.loader__btn:hover { background: rgba(245,197,24,.14); border-color: rgba(245,197,24,.45); color: #fff; }
.loader__btn--ghost { background: transparent; color: rgba(255,255,255,.5); }

@media (prefers-reduced-motion: reduce) {
    .loader::before, .loader__sun svg, .loader__sun::after { animation: none; }
    .loader__note, .loader__actions { transition: opacity .01s; transform: none; }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* =========================================================
   LOADING STATES
   One shimmer, used everywhere something is on its way.

   The rule the whole site follows: a wait that happens *inside* a frame
   already on screen gets the shimmer below — the layout never moves, the
   visitor just watches the hole fill in. A wait that takes over the screen
   (the first paint, fetching a full-size original) gets a real loading
   screen with honest progress instead, because past a few seconds a
   shimmer stops reading as "coming" and starts reading as "broken".
   ========================================================= */

/* The primitive. Put .is-loading on any element to give it a dark plate
   with a gold sheen travelling across it; take the class off when the
   content arrives. Sized in percentages so it fits any frame.

   --shimmer-z places the sheen in the host's own stacking order. The
   default sits it on top, which is right for an empty frame; frames that
   hold a fading-in image lower it beneath the image, so the photo simply
   covers the shimmer as it arrives and there is no seam between the two. */
.is-loading {
    position: relative;
    background-color: #131313;
}
.is-loading::after {
    content: '';
    position: absolute; inset: 0;
    z-index: var(--shimmer-z, 3);
    pointer-events: none;
    background:
        linear-gradient(115deg,
            transparent 28%,
            rgba(255,255,255,.06) 42%,
            rgba(255,255,255,.10) 48%,
            rgba(245,197,24,.22) 51%,
            rgba(255,255,255,.10) 54%,
            rgba(255,255,255,.06) 60%,
            transparent 74%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    animation: shimmer 1.6s linear infinite;
}
/* RTL reads right-to-left, so the sweep should too. */
[dir="rtl"] .is-loading::after { animation-name: shimmerRtl; }

@keyframes shimmer    { from { background-position: 180% 0; } to { background-position: -80% 0; } }
@keyframes shimmerRtl { from { background-position: -80% 0; } to { background-position: 180% 0; } }

/* Reduced motion: keep the "something is coming" signal, drop the travel —
   a slow breath instead of a sweep. */
@media (prefers-reduced-motion: reduce) {
    .is-loading::after {
        background: rgba(245,197,24,.06);
        animation: shimmerPulse 2.4s ease-in-out infinite;
    }
    [dir="rtl"] .is-loading::after { animation-name: shimmerPulse; }
}
@keyframes shimmerPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* A standalone placeholder box, for frames whose own ::after is already
   spoken for by a gradient or a border treatment. Drop it in as
   <span class="img-ph is-loading"></span> and it behaves exactly like the
   host-class version, one layer beneath the photo it stands in for. */
.img-ph {
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #131313;
    opacity: 1;
    transition: opacity .45s var(--ease);
}
/* Faded rather than removed, so the photo is never seen to pop in over a
   hard edge; script.js drops the element after the transition. */
.img-ph.is-done { opacity: 0; }

/* Failed image — a quiet mark and a way back, never an empty black box.
   Silence is the thing that reads as broken, so we say so instead. */
.is-failed {
    position: relative;
    background-color: #131313;
}
.is-failed::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%, rgba(245,197,24,.05), transparent 70%);
}
.img-fallback {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    padding: 16px; text-align: center;
    color: rgba(255,255,255,.4);
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.img-fallback svg { width: 26px; height: 26px; opacity: .5; }
.img-fallback__retry {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
    background: transparent; color: rgba(255,255,255,.6);
    font-family: inherit; font-size: 9px; letter-spacing: .16em;
    text-transform: uppercase; cursor: pointer;
    transition: border-color .3s, color .3s;
}
.img-fallback__retry:hover { border-color: rgba(245,197,24,.5); color: var(--gold); }

/* ---- Map skeleton --------------------------------------
   All three Leaflet maps pull their tiles from a CDN, so the container can
   sit empty for a while on a slow line — and an empty dark rectangle where
   a map should be is indistinguishable from a map that failed. This covers
   it with a faint grid (so the shape reads as "map" before any tile lands)
   and steps aside once the first batch arrives. Built by mapSkeleton in
   script.js, which also gives up and shows .is-failed after 12s. */
.map-skeleton {
    /* Above Leaflet's own panes (z-index 400) and below its controls
       (1000) — it is a child of the map container, so it shares their
       stacking order rather than the page's. */
    position: absolute; inset: 0; z-index: 500;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    background-color: #0b0b0b;
    opacity: 1; transition: opacity .6s var(--ease);
}
.map-skeleton.is-done { opacity: 0; pointer-events: none; }
/* graticule — reads as a map before there is a map */
.map-skeleton::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 46px 46px;
}
.map-skeleton__label {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 9px;
    color: rgba(255,255,255,.42);
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
/* a small orbiting dot — the site's pulse, at map scale */
.map-skeleton__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); flex: none;
    box-shadow: 0 0 10px rgba(245,197,24,.7);
    animation: mapSkelPulse 1.5s ease-in-out infinite;
}
@keyframes mapSkelPulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

.map-skeleton.is-failed .map-skeleton__dot { animation: none; background: rgba(255,255,255,.3); box-shadow: none; }
.map-skeleton.is-failed::after { content: none; }

@media (prefers-reduced-motion: reduce) {
    .map-skeleton__dot { animation: mapSkelFade 2.4s ease-in-out infinite; }
}
@keyframes mapSkelFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- Full-size image progress screen -------------------
   "View full resolution" and the download both fetch the untouched
   original — a multi-megabyte file that then has to be decoded and
   watermarked. That is far past the point where a shimmer still reads as
   progress, so it gets a real loading screen with a real percentage read
   off Content-Length, a running byte count, and a way out. Sits above the
   project overlay (z-index 5000) but below the page loader. */
.dlp {
    position: fixed; inset: 0; z-index: 6000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(6,6,10,.72);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility .35s;
}
.dlp.open { opacity: 1; visibility: visible; }

.dlp__panel {
    position: relative;
    width: min(400px, 100%);
    padding: 38px 34px 30px;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(165deg, rgba(255,255,255,.11), rgba(255,255,255,.035) 55%, rgba(245,197,24,.07));
    border: 1px solid rgba(255,255,255,.2);
    border-top-color: rgba(255,255,255,.4);
    backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16);
    transform: translateY(14px) scale(.97);
    transition: transform .42s var(--ease-out);
}
.dlp.open .dlp__panel { transform: none; }

/* the studio's sun, at panel scale — same mark as the page loader, so a
   long wait here feels like the same site, not a browser dialog */
.dlp__sun { display: grid; place-items: center; margin: 0 auto 20px; width: 76px; height: 76px; }
.dlp__sun svg { display: block; animation: spinSlow 8s linear infinite; }

.dlp__title {
    color: rgba(255,255,255,.9);
    font-size: 13px; font-weight: 400;
    letter-spacing: .16em; text-transform: uppercase;
}
.dlp__note {
    margin-top: 9px;
    color: rgba(255,255,255,.42);
    font-size: 11.5px; font-weight: 300; line-height: 1.6;
}

/* Progress rail — the same glass rail as the page loader, but this one is
   driven by bytes actually received rather than a fixed animation. */
.dlp__bar {
    position: relative;
    height: 8px; margin: 22px 0 12px;
    border-radius: 100px; overflow: hidden;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.dlp__fill {
    height: 100%; width: 0;
    border-radius: 100px;
    background: linear-gradient(90deg, rgba(245,197,24,.65), var(--gold) 60%, #ffe58a);
    box-shadow: 0 0 14px rgba(245,197,24,.55);
    transition: width .25s linear;
}
/* Servers that send no Content-Length give us no percentage to show. Rather
   than fake one, the rail slides a short band back and forth: honestly
   "working", with no claim about how far along it is. */
.dlp__bar.is-indeterminate .dlp__fill {
    width: 34%;
    transition: none;
    animation: dlpSlide 1.4s ease-in-out infinite;
}
@keyframes dlpSlide { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
[dir="rtl"] .dlp__bar.is-indeterminate .dlp__fill { animation-name: dlpSlideRtl; }
@keyframes dlpSlideRtl { 0% { margin-right: -34%; } 100% { margin-right: 100%; } }

.dlp__stats {
    display: flex; align-items: baseline; justify-content: space-between;
    color: rgba(255,255,255,.5);
    font-size: 11px; font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}
.dlp__pct { color: var(--gold); font-size: 13px; }

.dlp__actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.dlp__btn {
    padding: 9px 20px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.75);
    font-family: inherit; font-size: 10.5px; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s;
}
.dlp__btn:hover { background: rgba(255,255,255,.11); color: #fff; }
.dlp__btn--gold { border-color: rgba(245,197,24,.45); color: var(--gold); }
.dlp__btn--gold:hover { background: rgba(245,197,24,.16); border-color: rgba(245,197,24,.7); color: #fff; }

/* Failed: the sun stops turning and goes grey, so the state change is
   legible before the words are read. */
.dlp.is-failed .dlp__sun svg { animation: none; filter: grayscale(1) opacity(.45); }
.dlp.is-failed .dlp__bar    { display: none; }
.dlp.is-failed .dlp__stats  { display: none; }
.dlp.is-failed .dlp__title  { color: rgba(255,255,255,.75); }

/* Done: a brief gold confirmation before the panel closes itself. */
.dlp.is-done .dlp__fill { width: 100% !important; }

@media (prefers-reduced-motion: reduce) {
    .dlp__sun svg { animation: none; }
    .dlp__panel { transition: none; transform: none; }
    .dlp__bar.is-indeterminate .dlp__fill { animation: none; width: 100%; margin: 0; opacity: .45; }
}
@media (max-width: 480px) {
    .dlp__panel { padding: 30px 22px 24px; border-radius: 22px; }
    .dlp__sun { width: 62px; height: 62px; }
}

/* ---- Navigation ---------------------------------------- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(8px, 1vh, 13px);
    padding: clamp(12px, 1.6vh, 18px) 24px 0;
    pointer-events: none;                 /* gaps pass clicks through to the page */
}
.nav > * { pointer-events: auto; }
.nav::before {                            /* legibility scrim over any section */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px;
    background: linear-gradient(to bottom, rgba(9,9,11,.72), transparent);
    pointer-events: none; z-index: -1;
}
.nav__logo { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; }
.logo-name {
    font-size: clamp(14px, 1.5vw, 17px); font-weight: 600;
    letter-spacing: .28em; color: var(--text);
}
.logo-sub {
    font-size: 8.5px; letter-spacing: .26em;
    color: var(--gold); margin-top: 5px; font-weight: 300;
}

/* Liquid-glass nav bar */
.nav__bar {
    display: flex; align-items: center; gap: clamp(12px, 1.5vw, 28px);
    padding: 9px 22px; border-radius: 100px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(26px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.1);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.25), 0 12px 36px rgba(0,0,0,.4);
}
.nav__link {
    font-size: 11.5px; font-weight: 400;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.78); position: relative; padding: 3px 1px;
    transition: color .2s;
}
.nav__link:hover { color: #fff; }
.nav__link::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 1px; background: var(--gold);
    transition: width .35s var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav__sep { width: 1px; height: 15px; background: rgba(255,255,255,.16); }
.lang-toggle {
    background: rgba(245,197,24,.14); color: var(--gold);
    border: 1px solid rgba(245,197,24,.32); border-radius: 100px;
    padding: 6px 14px; font-size: 11px; letter-spacing: .06em;
    cursor: none; transition: background .25s, color .25s;
}
.lang-toggle:hover { background: var(--gold); color: var(--black); }
.nav__hamburger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: none; padding: 4px;
    position: absolute; top: 15px; right: 20px;
}
.nav__hamburger span {
    display: block; width: 22px; height: 1.5px;
    background: var(--text);
    transition: transform .3s var(--ease), opacity .3s;
}
.nav__hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }

/* Mobile Menu */
.mobile-menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: rgba(7,7,7,.9); z-index: 800;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    transform: translateX(-100%);
    transition: transform .55s var(--ease-out);
    counter-reset: mnav;
    overflow: hidden;
}
/* drifting gold aurora BEHIND the cards — liquid glass is invisible over
   flat black; this gives each card something to refract */
.mobile-menu::before {
    content: ''; position: absolute; inset: -22%;
    background:
        radial-gradient(42% 34% at 24% 24%, rgba(245,197,24,.17), transparent 70%),
        radial-gradient(50% 40% at 78% 74%, rgba(245,197,24,.11), transparent 70%),
        radial-gradient(36% 30% at 62% 42%, rgba(255,255,255,.055), transparent 70%);
    animation: mmAurora 15s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes mmAurora { to { transform: translate(4%, -5%) scale(1.14) rotate(3deg); } }
.mobile-menu.open { transform: translateX(0); }

/* liquid-glass nav cards: glossy translucent slab, bright top rim,
   refracted aurora behind, and a slow light-sheen sweeping the glass */
.mobile-menu__link {
    counter-increment: mnav;
    position: relative;
    width: min(80vw, 340px);
    padding: 19px 26px;
    border-radius: 18px;
    text-align: center;
    color: rgba(255,255,255,.92); font-size: 23px;
    font-weight: 200; letter-spacing: .15em; text-transform: uppercase;
    background-image:
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.15) 48%, transparent 62%),
        linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 55%, rgba(245,197,24,.08));
    background-size: 240% 100%, 100% 100%;
    background-position: 220% 0, 0 0;
    background-repeat: no-repeat;
    border: 1px solid rgba(255,255,255,.22);
    border-top-color: rgba(255,255,255,.4);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
    opacity: 0; transform: translateY(26px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .25s, color .25s;
}
/* cards surface one after another as the menu opens */
.mobile-menu.open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu.open .mobile-menu__link:nth-child(1) { transition-delay: .12s; }
.mobile-menu.open .mobile-menu__link:nth-child(2) { transition-delay: .19s; }
.mobile-menu.open .mobile-menu__link:nth-child(3) { transition-delay: .26s; }
.mobile-menu.open .mobile-menu__link:nth-child(4) { transition-delay: .33s; }
.mobile-menu.open .mobile-menu__link:nth-child(5) { transition-delay: .40s; }
.mobile-menu.open .mobile-menu__link:nth-child(6) { transition-delay: .47s; }
/* sheen sweeps each card on its own beat */
.mobile-menu.open .mobile-menu__link { animation: mmSheen 5s ease-in-out infinite; }
.mobile-menu.open .mobile-menu__link:nth-child(2) { animation-delay: .7s; }
.mobile-menu.open .mobile-menu__link:nth-child(3) { animation-delay: 1.4s; }
.mobile-menu.open .mobile-menu__link:nth-child(4) { animation-delay: 2.1s; }
.mobile-menu.open .mobile-menu__link:nth-child(5) { animation-delay: 2.8s; }
.mobile-menu.open .mobile-menu__link:nth-child(6) { animation-delay: 3.5s; }
@keyframes mmSheen { 0%, 100% { background-position: 220% 0, 0 0; } 50% { background-position: -120% 0, 0 0; } }
/* drawing-set index in the corner of each card */
.mobile-menu__link::before {
    content: '0' counter(mnav);
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    font-size: 10px; letter-spacing: .2em; color: rgba(245,197,24,.85);
}
[dir="rtl"] .mobile-menu__link::before { left: auto; right: 20px; }
.mobile-menu__link:hover { color: var(--gold); border-color: rgba(245,197,24,.45); }
.mobile-menu__link:active { transform: scale(.965); color: var(--gold); border-color: rgba(245,197,24,.55); }
@media (prefers-reduced-motion: reduce) {
    .mobile-menu::before, .mobile-menu.open .mobile-menu__link { animation: none; }
    .mobile-menu__link { opacity: 1; transform: none; transition: none; }
}

/* ---- Hero ---------------------------------------------- */
/* ═══════════════════════════════════════════════════════════
   HERO — kinetic type on a living dark canvas
   ═══════════════════════════════════════════════════════════ */
.hero {
    position: relative; overflow: hidden;
    min-height: 100svh;
    background: #070707;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 26px) clamp(20px, 6vw, 84px) clamp(84px, 13vh, 128px);
}

/* --- living background --- */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__aurora {
    position: absolute; width: 74vw; height: 74vw; left: 50%; top: 38%;
    background: radial-gradient(circle, rgba(245,197,24,.17), transparent 60%);
    filter: blur(46px); mix-blend-mode: screen; will-change: transform;
    animation: heroAurora 17s ease-in-out infinite alternate;
}
@keyframes heroAurora {
    0%   { transform: translate(-58%, -54%) scale(1); }
    100% { transform: translate(-42%, -44%) scale(1.2); }
}
.hero__grid {
    position: absolute; inset: -2px;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 66px 66px;
    -webkit-mask-image: radial-gradient(120% 92% at 50% 42%, #000 22%, transparent 82%);
            mask-image: radial-gradient(120% 92% at 50% 42%, #000 22%, transparent 82%);
    animation: heroGridPan 26s linear infinite;
}
@keyframes heroGridPan { to { background-position: 66px 66px; } }
/* WebGL stage — sits between the aurora and the grain so the film-grain
   unifies the 3D render with the DOM layers into one "shot" */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* when the 3D scene is live, the CSS grid recedes so the two grids don't fight */
.hero--3d .hero__grid { opacity: .45; }
.hero__grain {
    position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: heroGrain 1.1s steps(3) infinite;
}
@keyframes heroGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-2%)} 100%{transform:translate(0,0)} }

/* --- centre stage (everything centred) --- */
.hero__center {
    position: relative; z-index: 2; width: 100%; max-width: 1200px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: clamp(18px, 3vh, 34px);
}
/* eyebrow + live clock, on one centred line */
.hero__eyebrow {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
    font-size: clamp(9.5px, 1vw, 11px); letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.5);
    opacity: 0; transform: translateY(14px);
}
body.is-loaded .hero__eyebrow { animation: heroFade .8s var(--ease-out) .35s forwards; }
.hero__eyebrow > span:first-child { color: rgba(245,197,24,.85); }
.hero__clock { display: inline-flex; align-items: center; gap: 9px; }
.hero__clock time { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .14em; }
.hero__clock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px var(--gold); animation: heroPulse 2s ease-in-out infinite; }
@keyframes heroPulse { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }
.hero__title {
    margin: 0; color: #fff;
    font-size: clamp(52px, 12.5vw, 200px);
    font-weight: 200; line-height: .88; letter-spacing: -.03em;
}
/* Kurdish headline runs three lines — scale down so the CTA and the
   sheet's title block stay inside the first viewport */
[dir="rtl"] .hero__title { font-size: clamp(44px, 9.5vw, 150px); }
.hero__line { display: block; overflow: hidden; padding: .02em .04em; }
.hero__line-in { display: inline-block; transform: translateY(120%) rotate(5deg); will-change: transform; }
/* the "by" — a tiny gold conjunction, so the two big words nearly touch */
.hero__by {
    display: inline-block;
    font-size: clamp(10px, 1.3vw, 20px);
    font-weight: 400; letter-spacing: .34em; text-transform: uppercase;
    color: rgba(245,197,24,.85);
    margin-inline-start: clamp(10px, 1.4vw, 26px);
    vertical-align: baseline;
}
.hero__by:empty { display: none; }
.hero__line-in--accent {
    color: transparent;
    background: linear-gradient(100deg, #ffe27a, var(--gold) 44%, #c8961a);
    -webkit-background-clip: text; background-clip: text;
    /* English hero: render the "ئارام مزووری" signature in the SiRWAN face */
    font-family: 'SiRWAN', var(--font-ku);
}
/* Kurdish version keeps the standard Kurdish body stack for this line */
[dir="rtl"] .hero__line-in--accent { font-family: var(--font-ku); }
body.is-loaded .hero__line-in { animation: heroLineUp 1.05s cubic-bezier(.16,1,.3,1) forwards; }
body.is-loaded .hero__line:nth-child(2) .hero__line-in { animation-delay: .12s; }
@keyframes heroLineUp { to { transform: translateY(0) rotate(0); } }

.hero__sub {
    margin: 0; max-width: 470px;
    font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; line-height: 1.7; color: rgba(255,255,255,.55);
    opacity: 0; transform: translateY(16px);
}
/* caption + CTA + hint group: flows under the headline on phones,
   pins to the sheet's bottom centre on desktop (the ring stays clear) */
.hero__foot {
    position: relative; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; margin-top: clamp(18px, 3vh, 30px);
    padding: 0 20px; text-align: center;
}
@media (min-width: 769px) {
    /* caption + CTA + hint pinned to the sheet's bottom centre on desktop */
    .hero__foot { position: absolute; left: 0; right: 0; bottom: 82px; margin: 0; }
}
.hero__actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(18px, 3vw, 40px);
    opacity: 0; transform: translateY(16px);
}
body.is-loaded .hero__sub     { animation: heroFade .9s var(--ease-out) .5s forwards; }
body.is-loaded .hero__actions { animation: heroFade .9s var(--ease-out) .68s forwards; }
@keyframes heroFade { to { opacity: 1; transform: none; } }

.hero__go {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 15px 30px; border-radius: 100px;
    background: var(--gold); color: var(--black);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
    box-shadow: 0 12px 34px rgba(245,197,24,.3); cursor: none;
    transition: gap .25s, box-shadow .25s, transform .18s var(--ease-out);
    will-change: transform;
}
.hero__go:hover { gap: 18px; box-shadow: 0 16px 46px rgba(245,197,24,.45); }
.hero__go-arrow { font-size: 15px; }
/* --- stat ring support ---
   The figures render as 3D glass cards in the WebGL ring (hero3d.js).
   The DOM keeps a visually-hidden copy for screen readers, plus a tiny
   drag affordance so the interaction is discoverable, not a secret. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* drag ergonomics: spinning the ring must not select the headline or
   fight vertical scrolling on touch */
.hero--3d { user-select: none; -webkit-user-select: none; touch-action: pan-y; }

/* mobile-only language switch — the nav pill vanishes with the nav bar
   below 768px; this small glass KU/EN badge sits fixed in the top-left
   corner, opposite the hamburger */
.hero__lang {
    display: none;
    position: fixed; top: 16px; left: 16px; z-index: 950;
    padding: 8px 12px; border-radius: 9px;
    font-family: var(--font);
    font-size: 12px; font-weight: 600; letter-spacing: .14em;
    color: rgba(245,197,24,.95);
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 55%, rgba(245,197,24,.09));
    border: 1px solid rgba(245,197,24,.4);
    backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
    opacity: 0; transform: translateY(-8px);
}
body.is-loaded .hero__lang { animation: heroFade .9s var(--ease-out) 1.15s forwards; }
.hero__lang:active { transform: scale(.94); }
@media (max-width: 768px) { .hero__lang { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero__lang { transform: none !important; opacity: 1 !important; } }

/* --- drawing sheet: frame + registration marks --- */
.hero__sheet {
    position: absolute; inset: clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) 72px;
    border: 1px solid rgba(245,197,24,.15);
    pointer-events: none; z-index: 1;
}
.hero__sheet-mark { position: absolute; width: 13px; height: 13px; }
.hero__sheet-mark::before, .hero__sheet-mark::after {
    content: ''; position: absolute; background: rgba(245,197,24,.55);
}
.hero__sheet-mark::before { left: 0; right: 0; top: 6px; height: 1px; }
.hero__sheet-mark::after  { top: 0; bottom: 0; left: 6px; width: 1px; }
.hero__sheet-mark--tl { top: -7px; left: -7px; }
.hero__sheet-mark--tr { top: -7px; right: -7px; }
.hero__sheet-mark--bl { bottom: -7px; left: -7px; }
.hero__sheet-mark--br { bottom: -7px; right: -7px; }

/* --- title block: the signature corner of every drawing sheet --- */
.hero__titleblock {
    position: absolute; right: clamp(26px, 4vw, 58px); bottom: 86px; z-index: 2;
    display: flex; align-items: center; gap: 16px;
    opacity: 0; transform: translateY(12px);
}
body.is-loaded .hero__titleblock { animation: heroFade 1s var(--ease-out) 1.25s forwards; }
.hero__seal {
    width: 74px; height: 74px; flex: none;
    color: rgba(245,197,24,.65);
    animation: sealSpin 46s linear infinite;
}
.hero__seal text {
    font-size: 9.2px; letter-spacing: 1.6px; fill: rgba(245,197,24,.85);
    font-family: var(--font);
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
.hero__tb {
    border: 1px solid rgba(245,197,24,.22);
    background: rgba(7,7,7,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    min-width: 240px;
}
.hero__tb-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 12px;
    font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
}
.hero__tb-row + .hero__tb-row { border-top: 1px solid rgba(245,197,24,.14); }
.hero__tb-row--name { font-size: 9.5px; color: rgba(255,255,255,.85); letter-spacing: .24em; }
.hero__tb-row i { font-style: normal; color: rgba(255,255,255,.38); }
.hero__tb-row b { font-weight: 500; color: rgba(245,197,24,.9); margin-inline-end: 10px; font-variant-numeric: tabular-nums; }
.hero__tb-row--stats { color: rgba(255,255,255,.55); }
.hero__tb-row--stats b { margin-inline-end: 2px; }
.hero__tb-row--stats i { margin-inline-end: 8px; }
/* title block owns the right corner (left in RTL); scroll cue moves aside */
[dir="rtl"] .hero__titleblock { right: auto; left: clamp(26px, 4vw, 58px); }
@media (max-width: 900px) { .hero__titleblock { display: none; } }

/* --- infinite marquee (bottom) --- */
.hero__marquee {
    position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2;
    overflow: hidden; padding: 16px 0 18px;
    border-top: 1px solid rgba(255,255,255,.07);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* ruler ticks along the marquee's top edge — the sheet's measuring strip */
.hero__marquee::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
    background:
        repeating-linear-gradient(90deg, rgba(245,197,24,.5) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(90deg, rgba(245,197,24,.22) 0 1px, transparent 1px 24px);
}
.hero__marquee-track { display: flex; width: max-content; animation: heroMarquee 34s linear infinite; }
.hero__marquee-track span {
    white-space: nowrap;
    font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.28);
}
@keyframes heroMarquee { to { transform: translateX(-50%); } }

/* --- scroll cue (left edge — the title block owns the right corner) --- */
.hero__scroll {
    position: absolute; bottom: 92px; left: clamp(18px, 6vw, 84px); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    color: rgba(255,255,255,.3); font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
    writing-mode: vertical-rl;
}
[dir="rtl"] .hero__scroll { left: auto; right: clamp(18px, 6vw, 84px); }
.hero__scroll-line { width: 1px; height: 52px; background: linear-gradient(to bottom, rgba(245,197,24,.6), transparent); animation: scrollAnim 2.2s ease-in-out infinite; }
@keyframes scrollAnim {
    0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top}
    51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}
}

@media (max-width: 700px) {
    .hero { padding-top: calc(var(--nav-h) + 16px); }
    .hero__actions { flex-direction: column; gap: 18px; }
    .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__aurora, .hero__grid, .hero__grain, .hero__marquee-track, .hero__seal { animation: none; }
    .hero__line-in, .hero__sub, .hero__actions, .hero__eyebrow, .hero__titleblock { transform: none !important; opacity: 1 !important; }
}

/* ---- Kurdish Band -------------------------------------- */
.kurd-band {
    display: flex; height: 36px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.kurd-band__stripe {
    flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
}
.kurd-band__stripe--red   { background: var(--red); }
.kurd-band__stripe--white { background: #fff; }
.kurd-band__stripe--green { background: var(--green); }
.kurd-band__sun { width: 28px; height: 28px; }

/* ---- Section Label ------------------------------------- */
.section-label {
    font-size: 10px; letter-spacing: .38em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 20px; font-weight: 400;
    display: block;
}
.section-label--light { color: rgba(245,197,24,.7); }

/* ---- Projects Grid (BIG-inspired) ---------------------- */
.pg {
    background: var(--black);
    padding-top: var(--nav-h);
}

.pg__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding: 64px 52px 48px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.pg__title {
    font-size: clamp(52px, 7vw, 108px);
    font-weight: 200;
    line-height: .88;
    letter-spacing: -.03em;
    color: #fff;
    margin-top: 12px;
}

.pg__head-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
}

/* Search */
.pg__search-wrap { position: relative; }

.pg__search {
    /* liquid glass: translucent slab, bright top rim, refracting blur */
    background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 55%, rgba(245,197,24,.05));
    border: 1px solid rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.34);
    border-radius: 100px;
    backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: .05em;
    padding: 10px 18px;
    padding-inline-end: 38px;
    width: 240px;
    outline: none;
    transition: border-color .25s;
    appearance: none;
    -webkit-appearance: none;
}
.pg__search::-webkit-search-cancel-button { display: none; }
.pg__search::placeholder { color: rgba(255,255,255,.2); }
.pg__search:focus { border-color: rgba(245,197,24,.55); }

.pg__search-icon {
    position: absolute; inset-inline-end: 16px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.25); font-size: 13px;
    pointer-events: none; transition: color .25s;
}
.pg__search:focus ~ .pg__search-icon { color: var(--gold); }

/* Filter pills */
.pg__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.pgf-btn {
    /* liquid-glass chip: translucent slab + bright top rim */
    background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 55%, rgba(245,197,24,.05));
    border: 1px solid rgba(255,255,255,.16);
    border-top-color: rgba(255,255,255,.3);
    border-radius: 100px;
    backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    color: rgba(255,255,255,.5);
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 7px 15px;
    cursor: none;
    transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.pgf-btn:hover {
    color: var(--gold);
    border-color: rgba(245,197,24,.45);
}
.pgf-btn.active {
    /* selected = gold glass: unmistakable, still translucent */
    background: linear-gradient(165deg, rgba(245,197,24,.32), rgba(245,197,24,.16) 55%, rgba(245,197,24,.24));
    border-color: rgba(245,197,24,.65);
    border-top-color: rgba(255,235,160,.8);
    color: #ffe58a;
    box-shadow: 0 6px 18px rgba(245,197,24,.18), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---- Horizontal masonry (the whole grid scrolls sideways as one block) ---- */
.pg__slider { position: relative; }

/* trailing-edge fade — the last visible card dissolves into the section
   background, so the row visibly CONTINUES. Fades out at the end of the
   track (nothing left to hint at). */
.pg__slider::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: clamp(48px, 7vw, 110px);
    z-index: 2; pointer-events: none;
    background: linear-gradient(to left, var(--black) 8%, transparent);
    opacity: 1; transition: opacity .45s;
}
.pg__slider.at-end::after { opacity: 0; }
[dir="rtl"] .pg__slider::after {
    right: auto; left: 0;
    background: linear-gradient(to right, var(--black) 8%, transparent);
}

/* Same masonry look as before, but flowing into a FIXED number of rows and
   overflowing horizontally instead of growing tall. */
.pg__grid {
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-columns: clamp(210px, 21vw, 300px);
    gap: 12px;
    height: clamp(440px, 72vh, 720px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 24px 52px;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.pg__grid::-webkit-scrollbar { display: none; }   /* WebKit */
.pg__grid.is-dragging { scroll-behavior: auto; }

/* Prev / next arrows */
.pg__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(16,16,22,.72);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(245,197,24,.32);
    color: var(--gold); cursor: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    transition: background .25s, color .25s, opacity .3s, transform .25s;
}
.pg__nav--prev { left: 16px; }
.pg__nav--next { right: 16px; }
.pg__nav:hover { background: var(--gold); color: #000; transform: translateY(-50%) scale(1.06); }
.pg__nav:disabled { opacity: 0; pointer-events: none; }

/* Scroll progress bar */
.pg__progress {
    height: 2px; margin: 0 52px;
    background: rgba(255,255,255,.08); overflow: hidden;
}
.pg__progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    transition: width .12s linear;
}

/* "slide for more" chip — sits at the travelling end of the progress rail.
   The arrow beckons; the count tells visitors how much is out there.
   Gone (for good) after the first real scroll. */
.pg__more {
    margin: 10px 52px 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(245,197,24,.85);
    transition: opacity .6s, transform .6s var(--ease-out);
}
.pg__more-arrow { font-size: 14px; animation: pgBeckon 1.7s ease-in-out infinite; }
@keyframes pgBeckon { 0%, 100% { transform: translateX(0); opacity: .65; } 50% { transform: translateX(9px); opacity: 1; } }
.pg__more.is-done { opacity: 0; transform: translateY(4px); pointer-events: none; }
[dir="rtl"] .pg__more-arrow { animation-name: pgBeckonRtl; }
@keyframes pgBeckonRtl { 0%, 100% { transform: scaleX(-1) translateX(0); opacity: .65; } 50% { transform: scaleX(-1) translateX(9px); opacity: 1; } }
@media (max-width: 768px) { .pg__more { margin: 10px 28px 0; } }
@media (max-width: 600px) { .pg__more { margin: 10px 18px 0; } }
@media (prefers-reduced-motion: reduce) { .pg__more-arrow { animation: none; } }

/* Card base — a tile in the horizontal masonry */
.pgc {
    position: relative;
    overflow: hidden;
    cursor: none;
    background: #111;
    transition: opacity .35s, transform .35s var(--ease);
}
/* Feature tiles span more of the grid, just like the old masonry */
.pgc--large { grid-row: span 2; grid-column: span 2; }
.pgc--wide  { grid-column: span 2; }
.pgc.pg-hidden { display: none; }

.pgc__inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* Cards are lazy-loaded as the row is scrolled, so an empty frame here is
   normal rather than exceptional — the shimmer sits under the photo and is
   simply covered as it fades in. */
.pgc__inner { --shimmer-z: 0; }

/* Image zoom on hover */
.pgc__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    z-index: 1;
    transform: scale(1.0);
    transition: transform .72s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    opacity: 0;
}
.pgc__img.img-loaded { opacity: 1; transition: transform .72s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .4s; }
.pgc:hover .pgc__img { transform: scale(1.07); }

/* Subtle base veil — always on card */
.pgc__overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,.28) 0%, transparent 55%);
}

/* Liquid glass status badge — pill shape, shows on hover */
.pgc__status {
    position: absolute; top: 16px; left: 16px; z-index: 4;
    font-size: 7px; letter-spacing: .24em; text-transform: uppercase;
    padding: 5px 13px; border-radius: 100px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .28s, transform .32s cubic-bezier(.34,1.4,.64,1);
}
.pgc:hover .pgc__status { opacity: 1; transform: translateY(0); }
.pgc__status--done    { color: #4ecb71; background: rgba(78,203,113,.13); border: 1px solid rgba(78,203,113,.28); }
.pgc__status--build   { color: var(--gold); background: rgba(245,197,24,.11); border: 1px solid rgba(245,197,24,.28); }
.pgc__status--concept { color: rgba(255,255,255,.52); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }

/* Liquid glass info panel — rises from bottom of card */
.pgc__info {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    background: rgba(7,7,12,.52);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 18px 22px 22px;
    transform: translateY(100%);
    transition: transform .44s cubic-bezier(.34,1.32,.64,1);
}
/* Specular highlight on top edge of glass panel */
.pgc__info::before {
    content: '';
    position: absolute; top: -1px; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.3) 50%, transparent);
}
.pgc:hover .pgc__info { transform: translateY(0); }

.pgc__num {
    font-size: 8px; letter-spacing: .34em;
    color: rgba(245,197,24,.6); text-transform: uppercase;
    margin-bottom: 8px;
}
.pgc__name {
    font-size: clamp(13px, 1.5vw, 22px);
    font-weight: 200; color: #fff;
    letter-spacing: .01em; line-height: 1.15;
    margin-bottom: 6px;
}
.pgc__meta {
    font-size: 8.5px; letter-spacing: .18em;
    text-transform: uppercase; color: rgba(255,255,255,.4);
}

/* CTA — glass circle at top-right, pops in on hover */
.pgc__cta {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 0;          /* hide "View Project" text */
    gap: 0;
    opacity: 0; transform: scale(.72);
    transition: opacity .3s, transform .36s cubic-bezier(.34,1.5,.64,1), background .2s;
    z-index: 4;
}
.pgc:hover .pgc__cta { opacity: 1; transform: scale(1); }
.pgc__cta:hover { background: rgba(255,255,255,.18); }
.pgc__cta-arrow {
    font-size: 16px; color: rgba(255,255,255,.85);
    transition: transform .22s var(--ease-out);
}
.pgc:hover .pgc__cta-arrow { transform: translate(1px,-1px); }

/* Card stagger when overlay opens */
.pgc.proj-fall {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    pointer-events: none;
    transition: transform .55s var(--ease), opacity .55s;
}
.pgc.proj-selected {
    opacity: 1;
    transform: none;
}

/* Empty state */
.pg__empty {
    text-align: center;
    padding: 120px 40px;
}
.pg__empty-text {
    font-size: 15px; font-weight: 300;
    color: rgba(255,255,255,.2); letter-spacing: .06em;
}

/* Responsive */
@media (max-width: 960px) {
    .pg__head { flex-direction: column; align-items: flex-start; padding: 52px 28px 36px; }
    .pg__head-right { align-items: flex-start; width: 100%; }
    .pg__filter { justify-content: flex-start; }
    .pg__search { width: 100%; max-width: 320px; }
    .pg__grid { grid-auto-columns: clamp(180px, 40vw, 260px); height: clamp(380px, 64vh, 560px); padding: 20px 28px; }
    .pg__progress { margin: 0 28px; }
    .pg__nav { display: none; }                /* touch users swipe sideways */
}
@media (max-width: 600px) {
    .pg__head { padding: 44px 20px 28px; }
    .pg__title { font-size: 52px; }
    /* Phones keep the desktop bento: the same three rows and the same tile
       footprints (wide = 2 columns, large = 2x2), so the row reads as one
       layout everywhere and what the admin's Project Grid shows is true on
       every screen. Columns sit just under half the viewport so a two-column
       tile still fits with the side padding, and the row is given more height
       because it now has three rows to divide instead of two. */
    .pg__grid { grid-auto-columns: 42vw; height: clamp(400px, 74vh, 640px); gap: 10px; padding: 14px 18px; }
    .pg__progress { margin: 0 18px; }
    .pgc__overlay { padding: 20px; }
}

/* ---- About --------------------------------------------- */
/* ═══════════════════════════════════════════════════════════
   ABOUT  —  text + portrait, then a ringed stats band
   ═══════════════════════════════════════════════════════════ */
.about {
    background: var(--black); color: #fff;
    padding: clamp(96px, 13vh, 160px) 40px;
    position: relative; overflow: hidden;
}
.about__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.about__aurora {
    position: absolute; width: 42vw; height: 42vw; top: -10vw; left: -8vw;
    border-radius: 50%; filter: blur(90px); opacity: .42; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(245,197,24,.24), transparent 68%);
    animation: aboutDrift 25s ease-in-out infinite alternate;
}
@keyframes aboutDrift { to { transform: translate(7vw, 6vh) scale(1.16); } }
.about__pattern {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg,  transparent 0, transparent 55px, rgba(245,197,24,.018) 55px, rgba(245,197,24,.018) 56px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 55px, rgba(245,197,24,.018) 55px, rgba(245,197,24,.018) 56px);
}
.about__inner {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto;
    display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px);
}
.about__top {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(48px, 6vw, 92px); align-items: stretch;
}
.about__text { display: flex; flex-direction: column; }
.about__heading {
    font-size: clamp(32px, 3.8vw, 56px);
    font-weight: 200; line-height: 1.08;
    color: #fff; margin-bottom: 32px;
}
.about__heading em { font-style: italic; color: var(--gold); font-family: var(--serif); }
.about__bio {
    font-size: 15px; font-weight: 300; line-height: 1.85;
    color: rgba(255,255,255,.6); margin-bottom: 22px;
}
.about__quote {
    border-left: 2px solid var(--gold); padding: 18px 24px;
    margin-top: auto;     /* pushes the quote to the bottom of the text column */
    padding-top: 28px;
}
.about__quote p {
    font-size: 18px; font-weight: 300; font-style: italic;
    font-family: var(--serif); line-height: 1.6;
    color: rgba(255,255,255,.75); margin-bottom: 14px;
}
.about__quote cite {
    font-size: 11px; letter-spacing: .2em;
    color: var(--gold); text-transform: uppercase; font-style: normal;
}

/* Portrait — glass-framed with gold HUD corners */
.about__side { display: flex; flex-direction: column; }
.about__portrait {
    flex: 1; min-height: 440px;
    position: relative; overflow: hidden;
    /* near-black so the photo's own backdrop and the card read as one */
    background: #060606;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.portrait__photo { transition: transform 1.2s var(--ease-out); }
.about__portrait:hover .portrait__photo { transform: scale(1.05); }
.portrait__sun {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    opacity: .1; pointer-events: none;
}
.about__portrait::after {           /* bottom gradient so the caption reads */
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent 38%);
}
.portrait__corner { position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none; }
.portrait__corner--tl { top: 16px; left: 16px; border-top: 2px solid rgba(245,197,24,.6); border-left: 2px solid rgba(245,197,24,.6); }
.portrait__corner--br { bottom: 16px; right: 16px; border-bottom: 2px solid rgba(245,197,24,.6); border-right: 2px solid rgba(245,197,24,.6); }
.portrait__caption {
    position: absolute; bottom: 18px; left: 22px; z-index: 3;
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.7);
}

/* ---- Services ------------------------------------------- */
.services {
    position: relative; overflow: hidden;
    background: var(--black);
    padding: clamp(80px, 10vw, 130px) clamp(20px, 6vw, 84px);
    border-top: 1px solid rgba(245,197,24,.08);
}
/* quiet gold aurora for the glass to refract */
.services::before {
    content: ''; position: absolute; inset: -10%;
    background:
        radial-gradient(34% 30% at 22% 25%, rgba(245,197,24,.08), transparent 70%),
        radial-gradient(40% 34% at 80% 78%, rgba(245,197,24,.06), transparent 70%);
    pointer-events: none;
}
.services__inner { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; }
.services__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.services__title {
    margin-top: 12px;
    font-size: clamp(34px, 4.4vw, 62px); font-weight: 200;
    letter-spacing: -.02em; color: #fff;
}
/* 4 + 3 drafting-sheet layout on desktop */
.services__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.service {
    grid-column: span 3;
    padding: clamp(22px, 2.2vw, 30px);
    border-radius: 20px;
    /* liquid glass, same slab grammar as the rest of the system */
    background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 55%, rgba(245,197,24,.05));
    border: 1px solid rgba(255,255,255,.15);
    border-top-color: rgba(255,255,255,.3);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.35);
    transition: border-color .3s, transform .35s var(--ease-out), box-shadow .35s;
}
.service--third { grid-column: span 4; }
.service:hover {
    border-color: rgba(245,197,24,.45);
    transform: translateY(-5px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 26px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(245,197,24,.1);
}
.service__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.service__icon { width: 38px; height: 38px; color: rgba(245,197,24,.85); }
.service__num {
    font-size: 11px; letter-spacing: .24em; color: rgba(255,255,255,.3);
    font-variant-numeric: tabular-nums;
}
.service__name {
    margin: 0 0 10px;
    font-size: clamp(17px, 1.5vw, 21px); font-weight: 400; letter-spacing: -.01em; color: #fff;
}
.service__desc {
    margin: 0;
    font-size: 13.5px; font-weight: 300; line-height: 1.75;
    color: rgba(255,255,255,.55);
}
@media (max-width: 1100px) {
    .service, .service--third { grid-column: span 6; }
}
@media (max-width: 640px) {
    .service, .service--third { grid-column: span 12; }
}

/* ---- Process ------------------------------------------- */
/* ═══════════════════════════════════════════════════════════
   PROCESS  —  scroll-told timeline (sticky meter + glowing rail)
   ═══════════════════════════════════════════════════════════ */
.process {
    position: relative; overflow: hidden;
    padding: clamp(96px, 13vh, 160px) 40px;
    background:
        radial-gradient(120% 80% at 80% 0%, #15151d 0%, #0c0c11 55%, #090909 100%);
    color: var(--text);
}
/* Ambient background — drifting aurora blobs + faint grid */
.process__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.process__aurora {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .5; mix-blend-mode: screen;
    will-change: transform;
}
.process__aurora--a {
    width: 46vw; height: 46vw; top: -12vw; right: -6vw;
    background: radial-gradient(circle, rgba(245,197,24,.32), transparent 68%);
    animation: procDriftA 22s ease-in-out infinite alternate;
}
.process__aurora--b {
    width: 38vw; height: 38vw; bottom: -10vw; left: -8vw;
    background: radial-gradient(circle, rgba(120,170,255,.16), transparent 68%);
    animation: procDriftB 26s ease-in-out infinite alternate;
}
@keyframes procDriftA { to { transform: translate(-6vw, 8vh) scale(1.12); } }
@keyframes procDriftB { to { transform: translate(7vw, -6vh) scale(1.16); } }
.process__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

.process__inner {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(320px, 645px) 1fr;
    gap: clamp(44px, 5vw, 80px);
    align-items: start;
}

/* ── Sticky narrative rail ───────────────────────────────── */
.process__aside { position: sticky; top: 130px; align-self: start; }
.process__title {
    font-size: clamp(32px, 4vw, 58px); font-weight: 200;
    line-height: 1.04; letter-spacing: -.02em; color: #fff;
    margin-top: 4px;
}
.process__meter { margin-top: 40px; }
.process__count { display: flex; align-items: baseline; gap: 10px; }
.process__count-now {
    font-size: 64px; font-weight: 200; line-height: 1; color: var(--gold);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 28px rgba(245,197,24,.35);
}
.process__count-total {
    font-size: 18px; font-weight: 300; letter-spacing: .12em;
    color: rgba(255,255,255,.35);
}
.process__bar {
    margin-top: 20px; height: 3px; border-radius: 100px;
    background: rgba(255,255,255,.08); overflow: hidden;
}
.process__bar-fill {
    display: block; height: 100%; width: 25%;
    background: linear-gradient(90deg, rgba(245,197,24,.6), var(--gold));
    border-radius: 100px;
    box-shadow: 0 0 14px rgba(245,197,24,.5);
    transition: width .65s cubic-bezier(.65,0,.35,1);
}

/* ── Timeline ────────────────────────────────────────────── */
.process__list { position: relative; list-style: none; margin: 0; padding: 0; }

/* the vertical track + its gold fill */
.process__rail {
    position: absolute; top: 24px; bottom: 24px; left: 27px; width: 2px;
    background: rgba(255,255,255,.09); border-radius: 2px; z-index: 0;
}
.process__rail-fill {
    position: absolute; top: 0; left: 0; width: 100%; height: 0;
    background: linear-gradient(180deg, var(--gold), rgba(245,197,24,.35));
    box-shadow: 0 0 16px rgba(245,197,24,.55);
    border-radius: 2px;
    transition: height .65s cubic-bezier(.65,0,.35,1);
}

.process__item {
    position: relative; z-index: 1;
    display: flex; gap: clamp(20px, 3vw, 40px);
    padding-bottom: clamp(40px, 6vh, 76px);
    /* enter animation */
    opacity: 0; transform: translateY(46px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.process__item:last-child { padding-bottom: 0; }
.process__item.in { opacity: 1; transform: translateY(0); }

/* node orb on the rail */
.process__node { flex: 0 0 56px; display: flex; justify-content: center; }
.process__orb {
    position: relative; width: 18px; height: 18px; margin-top: 18px;
    border-radius: 50%;
    background: #14141b;
    border: 2px solid rgba(255,255,255,.22);
    transition: border-color .45s var(--ease-out), background .45s, box-shadow .45s, transform .45s var(--ease-out);
}
.process__item.is-done .process__orb {
    background: var(--gold); border-color: var(--gold);
}
.process__item.is-active .process__orb {
    background: var(--gold); border-color: var(--gold);
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(245,197,24,.16), 0 0 22px rgba(245,197,24,.7);
}
/* pulse ring on the active orb */
.process__item.is-active .process__orb::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(245,197,24,.5);
    animation: procPulse 1.8s ease-out infinite;
}
@keyframes procPulse {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* glass step card */
.process__card {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    padding: clamp(26px, 3vw, 40px);
    border-radius: 20px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.32);
    transition: border-color .45s, transform .55s var(--ease-out), box-shadow .55s, background .45s;
}
/* pointer-tracking spotlight */
.process__card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
        rgba(245,197,24,.12), transparent 60%);
    opacity: 0; transition: opacity .4s; z-index: 1;
}
.process__card:hover::before { opacity: 1; }
.process__item.is-active .process__card {
    border-color: rgba(245,197,24,.34);
    background: rgba(245,197,24,.04);
    transform: translateX(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(245,197,24,.12);
}

.process__ghost {
    /* inset-inline-end = right in English, left in Kurdish (RTL): the ghost
       numeral sits on the opposite side of the card when the site flips */
    position: absolute; top: -18px; inset-inline-end: 6px; z-index: 0;
    font-size: clamp(120px, 13vw, 190px); font-weight: 200; line-height: 1;
    letter-spacing: -.04em;
    color: rgba(255,255,255,.04);
    transition: color .5s;
    pointer-events: none; user-select: none;
}
.process__item.is-active .process__ghost { color: rgba(245,197,24,.1); }

.process__card-body { position: relative; z-index: 2; }
.process__kicker {
    display: inline-block; margin-bottom: 16px;
    font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(245,197,24,.75);
    padding: 5px 12px; border-radius: 100px;
    background: rgba(245,197,24,.07); border: 1px solid rgba(245,197,24,.18);
}
.process__card-title {
    font-size: clamp(20px, 2vw, 27px); font-weight: 400;
    color: #fff; letter-spacing: -.01em; margin-bottom: 14px;
}
.process__card-desc {
    font-size: 14.5px; font-weight: 300; line-height: 1.85;
    color: rgba(229,226,220,.62); max-width: 56ch;
}

/* ---- Heritage ------------------------------------------ */
/* ═══════════════════════════════════════════════════════════
   HERITAGE  —  the 7,000-year citadel, on archaeological strata
   ═══════════════════════════════════════════════════════════ */
.heritage {
    position: relative; overflow: hidden;
    padding: clamp(96px, 13vh, 160px) 40px;
    background: radial-gradient(130% 100% at 75% 30%, #16110a 0%, #0c0a08 50%, #090909 100%);
}
.heritage__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.heritage__aurora {
    position: absolute; right: 4%; top: 14%; width: 42vw; height: 42vw;
    border-radius: 50%; filter: blur(100px); opacity: .42; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(245,197,24,.32), transparent 66%);
    animation: heritageDrift 26s ease-in-out infinite alternate;
}
@keyframes heritageDrift { to { transform: translate(-5vw, 5vh) scale(1.14); } }
/* sediment layers fading upward — the citadel mound is a tell of stacked eras */
.heritage__strata {
    position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
    background: repeating-linear-gradient(to top,
        rgba(245,197,24,.06) 0, rgba(245,197,24,.06) 1px,
        transparent 1px, transparent clamp(26px, 4.6vh, 50px));
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%);
            mask-image: linear-gradient(to top, #000 0%, transparent 92%);
}
.heritage__inner {
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(48px, 6vw, 90px); align-items: center;
    position: relative; z-index: 1;
}
.heritage__title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(34px, 4.6vw, 66px); line-height: 1.05;
    color: #fff; letter-spacing: -.01em; margin-bottom: 28px;
}
.heritage__desc {
    font-size: 15px; font-weight: 300; line-height: 1.85;
    color: rgba(255,255,255,.55); margin-bottom: 0; max-width: 52ch;
}

/* Focal figure — the citadel's age */
.heritage__age {
    display: flex; align-items: center; gap: clamp(16px, 2vw, 26px);
    margin: clamp(32px, 4vw, 44px) 0;
    padding: clamp(22px, 2.4vw, 30px) 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.heritage__age-num {
    flex: none; font-family: var(--serif); font-weight: 400; line-height: .85;
    font-size: clamp(54px, 6.5vw, 92px); color: var(--gold);
    text-shadow: 0 0 56px rgba(245,197,24,.32);
}
.heritage__age-meta { display: flex; flex-direction: column; gap: 5px; }
.heritage__age-unit {
    font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2vw, 23px);
    color: rgba(255,255,255,.72);
}
.heritage__age-lbl {
    font-size: 12px; line-height: 1.65; color: rgba(255,255,255,.45); max-width: 36ch;
}

.heritage__cta {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--gold); font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(245,197,24,.4); padding-bottom: 4px;
    transition: gap .3s, border-color .3s;
}
.heritage__cta:hover { gap: 20px; border-color: var(--gold); }
.heritage__cta-arrow { font-size: 16px; }

/* Citadel stage — glow pool beneath the illustration */
.heritage__visual { position: relative; }
.heritage__visual::before {
    content: ''; position: absolute; left: 50%; top: 38%;
    transform: translate(-50%, -50%);
    width: 78%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,197,24,.2), transparent 64%);
    filter: blur(34px); pointer-events: none; z-index: 0;
}
.citadel-img {
    position: relative; z-index: 1;
    width: 100%; max-width: 500px; display: block; margin: 0 auto;
    /* the illustration's dark ground matches the section, and this radial
       feather melts its square edge into the page so it reads as native art */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 66%, transparent 90%);
            mask-image: radial-gradient(circle at 50% 50%, #000 66%, transparent 90%);
    animation: citadelGlow 5.5s ease-in-out infinite;
}
@keyframes citadelGlow {
    0%, 100% { filter: drop-shadow(0 24px 60px rgba(245,197,24,.16)); }
    50%      { filter: drop-shadow(0 24px 80px rgba(245,197,24,.30)); }
}
/* ---- Contact ------------------------------------------- */
/* ═══════════════════════════════════════════════════════════
   CONTACT  —  glass form card + interactive contact methods
   ═══════════════════════════════════════════════════════════ */
.contact {
    position: relative; overflow: hidden;
    padding: clamp(96px, 13vh, 160px) 40px;
    background: radial-gradient(120% 80% at 15% 100%, #15151d 0%, #0c0c11 55%, #090909 100%);
    color: var(--text);
}
.contact__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.contact__aurora {
    position: absolute; width: 44vw; height: 44vw; left: -8vw; bottom: -12vw;
    border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(245,197,24,.26), transparent 68%);
    animation: contactDrift 24s ease-in-out infinite alternate;
}
@keyframes contactDrift { to { transform: translate(6vw, -6vh) scale(1.15); } }
.contact__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 100%, #000 30%, transparent 78%);
            mask-image: radial-gradient(120% 90% at 50% 100%, #000 30%, transparent 78%);
}
.contact__inner {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px);
    /* both columns share one height: the form stretches to end exactly
       where the map card ends — symmetric bottom edges */
    align-items: stretch;
}
.contact__title {
    font-size: clamp(38px, 5vw, 66px); font-weight: 200;
    line-height: 1.05; letter-spacing: -.02em; color: #fff;
    margin: 6px 0 44px;
}
.contact__title em { color: var(--gold); font-style: normal; }

/* Process showcase — liquid-glass design reel (desktop only) */
.process__showcase {
    margin-top: 36px;
    border-radius: 20px; overflow: hidden;
    /* same slab grammar as the phase cards across the rail */
    background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 55%, rgba(245,197,24,.06));
    border: 1px solid rgba(255,255,255,.18);
    border-top-color: rgba(255,255,255,.34);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
    padding: clamp(16px, 1.6vw, 22px);
    cursor: none;
    transition: border-color .3s, transform .3s var(--ease-out);
}
.process__showcase:hover { border-color: rgba(245,197,24,.5); transform: translateY(-3px); }
/* kicker pill — mirrors .process__kicker on the phase cards */
.pshow__label {
    display: inline-block; margin: 0 0 14px;
    font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(245,197,24,.75);
    padding: 5px 12px; border-radius: 100px;
    background: rgba(245,197,24,.07); border: 1px solid rgba(245,197,24,.18);
}
.pshow__frame {
    position: relative; aspect-ratio: 4 / 3;
    border-radius: 13px; overflow: hidden;
    background: rgba(0,0,0,.4);
    --shimmer-z: 0;              /* under the reel, covered as each slide lands */
}
.pshow__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; z-index: 1;
    transition: opacity .8s var(--ease);
}
.pshow__img.on { opacity: 1; }
.pshow__foot {
    display: flex; align-items: baseline; gap: 12px;
    padding: 15px 2px 2px;
}
.pshow__num {
    flex: none; font-size: 11px; letter-spacing: .2em;
    color: rgba(245,197,24,.9); font-variant-numeric: tabular-nums;
}
.pshow__name {
    flex: 1; min-width: 0;
    /* title scale of the phase cards */
    font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; letter-spacing: -.01em;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pshow__go { flex: none; color: rgba(245,197,24,.7); font-size: 15px; transition: transform .25s var(--ease-out); }
.process__showcase:hover .pshow__go { transform: translateX(4px); }
[dir="rtl"] .pshow__go { transform: scaleX(-1); }
[dir="rtl"] .process__showcase:hover .pshow__go { transform: scaleX(-1) translateX(4px); }
/* desktop-only feature: gone wherever the aside stacks (tablet/mobile) */
@media (max-width: 1100px) { .process__showcase { display: none; } }

/* Office locator — dark map card + pulsing gold pin + visiting policy.
   The whole map is a door to Google Maps (initOfficeMap wires the click). */
.contact__map {
    position: relative;
    margin-top: 16px;
    border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-top-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.03);
    box-shadow: 0 18px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
    transition: border-color .3s;
}
.contact__map:hover { border-color: rgba(245,197,24,.4); }
.contact__map-canvas { height: 230px; background: #0b0b0b; cursor: pointer; }
/* the promise, printed on the glass */
.contact__map-open {
    position: absolute; top: 12px; inset-inline-end: 12px; z-index: 800;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 100px;
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(245,197,24,.9);
    background: rgba(7,7,7,.72);
    border: 1px solid rgba(245,197,24,.3);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    transition: color .25s, border-color .25s;
}
.contact__map:hover .contact__map-open { color: var(--gold); border-color: rgba(245,197,24,.6); }
.contact__map-canvas .leaflet-tile-pane { filter: brightness(.85) saturate(.85); }
.office-pin {
    display: block; position: relative;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(245,197,24,.2), 0 0 18px rgba(245,197,24,.85);
}
.office-pin::after {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    border: 1.5px solid rgba(245,197,24,.65);
    animation: officePing 2.2s ease-out infinite;
}
@keyframes officePing { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.contact__map-foot {
    border-top: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.contact__map-addr {
    margin: 0; padding: 12px 18px 9px;
    font-size: 12.5px; font-weight: 300; letter-spacing: .02em; line-height: 1.55;
    color: rgba(255,255,255,.82);
}
.contact__map-note {
    margin: 0; display: flex; align-items: center; gap: 10px;
    padding: 0 18px 13px;
    font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(245,197,24,.9);
}
.contact__map-dot {
    flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 9px var(--gold);
    animation: heroPulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .office-pin::after, .contact__map-dot { animation: none; } }

/* Interactive contact methods */
.contact__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cmethod {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 20px; border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color .3s, background .3s, transform .35s var(--ease-out);
}
.cmethod--copy { cursor: none; }
.cmethod--copy:hover, .cmethod--copy:focus-visible {
    border-color: rgba(245,197,24,.34); background: rgba(245,197,24,.05);
    transform: translateX(5px); outline: none;
}
.cmethod__icon {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.2);
    color: var(--gold);
    transition: box-shadow .3s, background .3s;
}
.cmethod--copy:hover .cmethod__icon { box-shadow: 0 0 18px rgba(245,197,24,.3); background: rgba(245,197,24,.14); }
.cmethod__icon svg { width: 18px; height: 18px; }
.cmethod__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmethod__label { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.cmethod__value { font-size: 15px; font-weight: 300; color: var(--text); line-height: 1.45; word-break: break-word; }
.cmethod__hint {
    margin-left: auto; flex: none;
    font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
    padding: 5px 11px; border-radius: 100px; border: 1px solid rgba(255,255,255,.1);
    transition: color .3s, border-color .3s, background .3s;
}
.cmethod--copy:hover .cmethod__hint { color: var(--gold); border-color: rgba(245,197,24,.3); }
.cmethod.is-copied .cmethod__hint { color: var(--black); background: var(--gold); border-color: var(--gold); }

/* ── Glass form card ─────────────────────────────────────── */
.contact__form {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;  /* lets the message field absorb spare height */
    padding: clamp(26px, 3vw, 44px);
    border-radius: 24px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 70px rgba(0,0,0,.4);
}
.form-field { position: relative; margin-bottom: 16px; }
.form-field input,
.form-field textarea {
    width: 100%; font-family: var(--font); font-size: 15px; font-weight: 300;
    color: var(--text); cursor: none; outline: none;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    padding: 23px 16px 9px;
    transition: border-color .25s, background .25s, box-shadow .25s;
}
.form-field textarea { resize: none; min-height: 120px; padding-top: 26px; }
/* the message field grows to fill whatever height the left column sets */
.form-field--grow { flex: 1; display: flex; flex-direction: column; }
.form-field--grow textarea { flex: 1; }
.form-field input:focus,
.form-field textarea:focus {
    border-color: rgba(245,197,24,.5);
    background: rgba(245,197,24,.04);
    box-shadow: 0 0 0 3px rgba(245,197,24,.1);
}
.form-field label {
    position: absolute; left: 17px; top: 15px; pointer-events: none;
    font-size: 14px; color: var(--grey-2); transform-origin: left center;
    transition: transform .2s var(--ease-out), color .2s;
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
    transform: translateY(-9px) scale(.74);
    color: var(--gold);
}

.form-submit {
    position: relative; overflow: hidden;
    width: 100%; margin-top: 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    background: linear-gradient(100deg, var(--gold), #ffd955);
    color: var(--black); border: none; border-radius: 12px;
    padding: 18px 32px; font-size: 12px; letter-spacing: .18em; font-weight: 600;
    text-transform: uppercase; cursor: none;
    box-shadow: 0 10px 30px rgba(245,197,24,.22);
    transition: gap .25s, box-shadow .25s, transform .15s;
}
.form-submit::before {                    /* sheen sweep on hover */
    content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg); transition: left .6s var(--ease-out); pointer-events: none;
}
.form-submit:hover { gap: 18px; box-shadow: 0 14px 40px rgba(245,197,24,.36); }
.form-submit:hover::before { left: 120%; }
.form-submit:active { transform: scale(.985); }
.form-submit__arrow { font-size: 17px; }
.form-success {
    margin-top: 16px; font-size: 13px; color: #4ecb71;
    letter-spacing: .04em;
}

/* ---- Footer -------------------------------------------- */
.footer { background: var(--black); padding: 64px 40px 40px; }
.footer__inner {
    max-width: 1360px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 40px; align-items: end;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer__logo {
    font-size: 22px; font-weight: 200; letter-spacing: .22em;
    color: #fff; margin-bottom: 8px;
}
.footer__tagline {
    font-size: 11px; letter-spacing: .18em;
    color: rgba(255,255,255,.25); text-transform: uppercase; margin-bottom: 6px;
}
.footer__kurdish {
    font-size: 13px; color: var(--gold); opacity: .5;
    letter-spacing: .04em;
    /* Stays dir="rtl" so the Kurdish shapes and reads correctly, but the line
       is pinned left so it starts on the same edge as the English tagline
       above it. Left by name, not `start` — `start` in an RTL box is the right
       edge, which is what floated it into the middle of the footer. */
    text-align: left;
}
.footer__col--sun { display: flex; justify-content: center; }
.footer__sun-wrap { width: 52px; height: 52px; opacity: .3; }
.footer__social {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 10px; margin-bottom: 20px;
}
.footer__link {
    font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.35);
    text-transform: uppercase; transition: color .25s;
}
.footer__link:hover { color: var(--gold); }
.footer__copy {
    font-size: 10px; letter-spacing: .08em;
    color: rgba(255,255,255,.18); text-align: right; line-height: 1.7;
}

/* ---- Clients & Partners -------------------------------- */
/* ---- Stats band (between hero + map) ---------------------
   The practice figures as a row of liquid-glass slabs: a gold aurora
   drifts behind the band, each tile refracts it through backdrop blur,
   a light sheen sweeps every slab on its own beat, and the numerals
   themselves are glass — a white→gold gradient with a slow shimmer
   travelling inside the glyphs. */
.statbar {
    position: relative;
    background: var(--black);
    border-top: 1px solid rgba(245,197,24,.12);
    border-bottom: 1px solid rgba(245,197,24,.12);
    padding: clamp(30px, 3.8vw, 54px) 0;
    overflow: hidden;
}
/* the aurora the glass refracts — liquid glass over flat black is invisible */
.statbar::before {
    content: ''; position: absolute; inset: -30%;
    background:
        radial-gradient(34% 42% at 18% 40%, rgba(245,197,24,.14), transparent 70%),
        radial-gradient(30% 40% at 55% 65%, rgba(255,255,255,.05), transparent 70%),
        radial-gradient(36% 44% at 86% 45%, rgba(245,197,24,.10), transparent 70%);
    animation: mmAurora 16s ease-in-out infinite alternate;
    pointer-events: none;
}
.statbar__inner {
    position: relative;
    display: flex; align-items: center; gap: clamp(28px, 4.5vw, 72px);
    max-width: 1320px; margin: 0 auto;
    padding: 0 clamp(20px, 6vw, 84px);
}
/* the caption — the record, stated before it is counted */
.statbar__caption { flex: 0 0 clamp(230px, 24vw, 330px); text-align: start; }
.statbar__title {
    margin-top: 10px;
    font-size: clamp(24px, 2.4vw, 38px); font-weight: 200;
    line-height: 1.18; letter-spacing: -.01em; color: #fff;
}
.statbar__title em { font-family: var(--serif); font-style: italic; color: var(--gold); }
.statbar__sub {
    margin-top: 12px;
    font-size: 13px; font-weight: 300; line-height: 1.75;
    color: rgba(255,255,255,.45);
}
.statbar__track {
    position: relative; flex: 1; min-width: 0;
    display: flex; align-items: stretch; justify-content: space-between;
    gap: clamp(18px, 2.2vw, 40px);
    cursor: grab;
}
.statbar__track.dragging { cursor: grabbing; }
.statbar__item {
    /* size to the figure itself — flex:1 boxes were narrower than the
       glyphs, so wide numbers overflowed into their neighbours */
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 13px; text-align: center;
    padding: 8px 4px;
    transition: transform .35s var(--ease-out);
}
.statbar__item:hover { transform: translateY(-4px); }
/* Molten-gold glass numerals — the figure is a slab of glowing gold
   glass in the site's own palette: lit amber body, white gloss across
   the top, a breathing gold halo cast by the glyph itself, and a
   liquid light wave rolling through on its own beat. */
.statbar__num {
    position: relative; z-index: 0;
    font-size: clamp(46px, 4vw, 68px); font-weight: 600; line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    /* lit gold-glass body + top gloss (two layers, both clipped in) */
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 24%, rgba(255,255,255,0) 42%),
        linear-gradient(180deg, #fff3c4 0%, #ffd75e 30%, var(--gold) 52%, #c08a06 78%, #7d5a02 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(245,197,24,.42))
            drop-shadow(0 4px 34px rgba(245,197,24,.22))
            drop-shadow(0 12px 22px rgba(0,0,0,.55));
    /* reveal: each numeral settles up as it counts */
    opacity: 0; transform: translateY(16px);
}
/* the halo: the number's own light, breathing behind it.
   text-shadow (not a blur filter) — it follows the glyph shape and is
   never boxed in by the compositor, so the glow can't get cut off */
.statbar__num::before {
    content: attr(data-n);
    position: absolute; inset: 0; z-index: -1;
    color: transparent; -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 22px rgba(245,197,24,.75),
        0 0 52px rgba(245,197,24,.4),
        0 0 100px rgba(245,197,24,.2);
    animation: statBreathe 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .5s);
}
@keyframes statBreathe { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
/* liquid light: a bright wave rolling through the glass */
.statbar__num::after {
    content: attr(data-n);
    position: absolute; inset: 0;
    background-image: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.95) 48%, rgba(255,248,220,.5) 54%, transparent 68%);
    background-size: 300% 100%; background-position: 250% 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px transparent;
    mix-blend-mode: screen;
    animation: statGlassSweep 6.5s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .6s);
    pointer-events: none;
}
@keyframes statGlassSweep { 0%, 100% { background-position: 250% 0; } 50% { background-position: -150% 0; } }
.statbar.counted .statbar__num,
.statbar__num.on {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
}
/* dimension line under the figure — the drawing-set pedestal motif */
.statbar__rule {
    position: relative; width: 44px; height: 1px;
    background: rgba(245,197,24,.5);
}
.statbar__rule::before, .statbar__rule::after {
    content: ''; position: absolute; top: -3px; width: 1px; height: 7px;
    background: rgba(245,197,24,.5);
}
.statbar__rule::before { left: 0; }
.statbar__rule::after  { right: 0; }
.statbar__label {
    font-size: clamp(9px, .95vw, 11px); letter-spacing: .24em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
    white-space: nowrap;   /* "M² Designed" stays on one line */
}
/* swipe hint — mobile only, dies after the first real swipe */
.statbar__hint {
    display: none;
    margin: 18px 0 0; justify-content: center; align-items: center; gap: 10px;
    font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(245,197,24,.65);
    transition: opacity .5s var(--ease), visibility .5s;
}
.statbar__hint-arrow { display: inline-block; animation: statHintNudge 1.6s ease-in-out infinite; }
@keyframes statHintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
[dir="rtl"] .statbar__hint-arrow { transform: scaleX(-1); animation: statHintNudgeRtl 1.6s ease-in-out infinite; }
@keyframes statHintNudgeRtl { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(7px); } }
.statbar__hint.gone { opacity: 0; visibility: hidden; }

/* mobile: caption on top, ~2 glass figures visible, drag through the rest */
@media (max-width: 700px) {
    .statbar__inner { flex-direction: column; align-items: stretch; gap: 26px; }
    .statbar__caption { flex: none; }
    .statbar__track {
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        gap: 12px;
        touch-action: pan-x pan-y;
        /* the scroller clips its children — give the glow room to live
           inside the scrollport (padding), reclaimed by negative margin */
        padding: 48px 24px; margin: -48px -24px;
        scroll-padding-inline: 24px;
        /* trailing-edge fade: the last visible figure dissolves, saying
           "the row continues" before the hint even needs to */
        -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
                mask-image: linear-gradient(to right, #000 82%, transparent);
    }
    /* Kurdish (RTL) mobile: lay the stat strip left-to-right so it always
       starts at Projects → Clients → …. iOS Safari and Android Chrome
       disagree on where an RTL scroller starts (iOS opens on the far end,
       showing m² Designed first); forcing LTR here sidesteps that entirely
       while the Kurdish labels inside each figure still read correctly. */
    [dir="rtl"] .statbar__track { direction: ltr; }
    /* …but direction is inherited, so that LTR reached the Kurdish labels
       inside each figure and laid them out left-to-right too. Only the track
       wants LTR — for the scroll order. Hand the text its own back. */
    [dir="rtl"] .statbar__item { direction: rtl; }
    [dir="rtl"] .statbar__hint-arrow { transform: none; animation: statHintNudge 1.6s ease-in-out infinite; }
    .statbar__track::-webkit-scrollbar { display: none; }
    .statbar__track.at-end { -webkit-mask-image: none; mask-image: none; }
    .statbar__item { flex: 0 0 auto; width: 46%; scroll-snap-align: center; }
    .statbar__hint { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .statbar::before, .statbar__item, .statbar__num,
    .statbar__num::before, .statbar__num::after { animation: none; }
    .statbar__num { opacity: 1; transform: none; }
    .statbar__num::before { opacity: .35; }
}

.clients {
    background: var(--black);
    padding: 60px 0 72px;
    overflow: hidden;
    border-bottom: 1px solid rgba(245,197,24,.1);
}
.clients__head {
    text-align: center;
    padding: 0 40px 60px;
}
.section-label--center { text-align: center; }
.clients__title {
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 200; color: #fff;
    margin-top: 12px; letter-spacing: .02em;
}
.clients__track-wrap {
    position: relative; overflow: hidden;
    /* draggable strip: horizontal is ours, vertical stays the page's */
    cursor: grab; touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
}
.clients__track-wrap.dragging { cursor: grabbing; }
.clients__track-wrap::before,
.clients__track-wrap::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 140px; z-index: 2; pointer-events: none;
}
.clients__track-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--black), transparent);
}
.clients__track-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--black), transparent);
}
.clients__track {
    display: flex; align-items: center;
    width: max-content;
    animation: clientsMarquee 44s linear infinite;
}
.clients__track:hover { animation-play-state: paused; }
@keyframes clientsMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.client-logo {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 24px 52px;
    opacity: .28;
    transition: opacity .35s var(--ease);
    border-right: 1px solid rgba(255,255,255,.06);
    min-width: 190px; cursor: none;
}
.client-logo:hover { opacity: .88; }
.client-logo__mark { width: 48px; height: 48px; }
/* uploaded logo, auto-converted to a faithful white monochrome: shown as an
   image so its internal detail survives, height-normalised so every client
   logo sits at a consistent visual weight (wordmarks wider, icons square) */
.client-logo__mark--img {
    width: auto; height: 48px; max-width: 152px;
    object-fit: contain; object-position: center;
}
.client-logo__mark--text {
    display: flex; align-items: center; justify-content: center;
    font-size: 27px; font-weight: 300; color: #fff;
}
.client-logo__name {
    font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; color: #fff;
    font-weight: 500; white-space: nowrap;
}
.client-logo__sub {
    font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3); white-space: nowrap;
}
.clients__hint {
    margin: 14px 0 0;
    font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(245,197,24,.55);
}
.client-logo:hover .client-logo__name { color: var(--gold); }

/* ---- Clients modal — the liquid-glass roster ------------ */
.clients-modal {
    position: fixed; inset: 0; z-index: 950;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(5,5,5,.72);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease-out), visibility 0s .4s;
}
.clients-modal.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out); }
/* gold aurora behind the glass — gives the panel something to refract */
.clients-modal::before {
    content: ''; position: absolute; inset: -15%;
    background:
        radial-gradient(38% 32% at 28% 30%, rgba(245,197,24,.15), transparent 70%),
        radial-gradient(46% 38% at 74% 70%, rgba(245,197,24,.10), transparent 70%);
    animation: mmAurora 16s ease-in-out infinite alternate;
    pointer-events: none;
}
.clients-modal__panel {
    position: relative; z-index: 1;
    width: min(920px, 100%);
    max-height: min(86vh, 100%);
    overflow-y: auto;
    padding: clamp(28px, 5vw, 52px);
    border-radius: 26px;
    background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 45%, rgba(245,197,24,.06));
    border: 1px solid rgba(255,255,255,.22);
    border-top-color: rgba(255,255,255,.4);
    backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(26px) scale(.97);
    transition: transform .45s var(--ease-out);
    text-align: center;
}
.clients-modal.open .clients-modal__panel { transform: none; }
.clients-modal__close {
    position: absolute; top: 18px; right: 18px;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.75); font-size: 15px;
    transition: color .25s, border-color .25s, transform .2s;
}
.clients-modal__close:hover { color: var(--gold); border-color: rgba(245,197,24,.5); transform: rotate(90deg); }
[dir="rtl"] .clients-modal__close { right: auto; left: 18px; }
.clients-modal__title {
    margin: 10px 0 30px;
    font-size: clamp(24px, 3vw, 34px); font-weight: 200; color: #fff; letter-spacing: .02em;
}
.clients-modal__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px;
}
.clients-modal__tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 12px 18px;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 55%, rgba(245,197,24,.06));
    border: 1px solid rgba(255,255,255,.16);
    border-top-color: rgba(255,255,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    transition: border-color .25s, transform .25s var(--ease-out);
    opacity: 0; transform: translateY(16px);
}
.clients-modal__tile .client-logo__sub { white-space: normal; }
.clients-modal.open .clients-modal__tile {
    animation: tilePop .5s var(--ease-out) both;
    animation-delay: calc(.12s + var(--i) * 45ms);
}
@keyframes tilePop { to { opacity: 1; transform: none; } }
.clients-modal__tile:hover { border-color: rgba(245,197,24,.45); transform: translateY(-3px); }
.clients-modal__tile:hover .client-logo__name { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
    .clients-modal::before { animation: none; }
    .clients-modal.open .clients-modal__tile { animation: none; opacity: 1; transform: none; }
    .clients-modal__panel { transition: none; }
}

/* ---- Scroll Reveal -------------------------------------- */
.reveal {
    opacity: 0; transform: translateY(36px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal-delay-3 { transition-delay: .32s; }

/* ---- Portrait photo ------------------------------------ */
.portrait__photo {
    width: 100%; height: 100%;
    /* the whole photo stays visible; its black backdrop merges with the
       card background, so any letterboxing is invisible */
    object-fit: contain; object-position: center;
    display: block;
}

/* ---- Press & Recognition ------------------------------- */
.press {
    background: var(--off-white);
    padding: 100px 40px;
    border-top: 1px solid var(--grey-1);
}
.press__inner { max-width: 1360px; margin: 0 auto; }
.press__top {
    display: flex; align-items: baseline;
    justify-content: space-between; flex-wrap: wrap; gap: 16px;
    margin-bottom: 64px;
}
.press__title { font-size: clamp(26px, 3vw, 40px); font-weight: 200; }

.press__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--grey-1);
    border: 1px solid var(--grey-1);
    margin-bottom: 80px;
}
.press__item {
    background: var(--off-white);
    padding: 40px 36px;
    display: flex; flex-direction: column; gap: 16px;
    transition: background .25s;
}
.press__item:hover { background: #242424; }
.press__pub {
    font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold); font-weight: 500;
}
.press__quote {
    font-size: 16px; font-weight: 300; line-height: 1.65;
    color: var(--text); font-style: italic; font-family: var(--serif);
}
.press__meta {
    font-size: 11px; letter-spacing: .12em; color: var(--grey-2);
    text-transform: uppercase; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--grey-1);
}

.awards__title {
    font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--grey-2); margin-bottom: 32px;
}
.awards__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--grey-1);
    border: 1px solid var(--grey-1);
}
.award__item {
    background: var(--off-white);
    padding: 28px 24px;
    display: flex; flex-direction: column; gap: 8px;
    transition: background .25s;
}
.award__item:hover { background: #242424; }
.award__year {
    font-size: 22px; font-weight: 200; color: var(--gold); line-height: 1;
}
.award__name {
    font-size: 13px; font-weight: 400; color: var(--text); line-height: 1.4;
}
.award__org {
    font-size: 11px; letter-spacing: .1em; color: var(--grey-2); text-transform: uppercase;
}

/* ---- Project Overlay (BIG-style full page) -------------- */
/* Backdrop — the page stays visible (blurred + dimmed) behind the card, so this
   reads as an in-page overlay rather than a navigation to a new screen. */
.proj-overlay {
    position: fixed; inset: 0;
    z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(12px, 1.4vw, 22px);       /* space between map window + detail window */
    padding: clamp(12px, 3vh, 44px);
    background: rgba(6,6,10,.5);
    backdrop-filter: blur(9px) saturate(115%);
    -webkit-backdrop-filter: blur(9px) saturate(115%);
    opacity: 0; visibility: hidden;
    transition: opacity .42s ease, visibility .42s;
}
.proj-overlay.open { opacity: 1; visibility: visible; }

/* The detail itself — a bounded glass card that scales in over the page */
.od-modal {
    position: relative;
    width: min(1240px, 100%);
    height: min(880px, 100%);
    display: flex; flex-direction: column;
    background: #0b0b10; overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    box-shadow: 0 50px 130px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03);
    transform: scale(.92) translateY(10px); opacity: 0;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.proj-overlay.open .od-modal { transform: scale(1) translateY(0); opacity: 1; }

/* Topbar — liquid glass */
.proj-overlay__topbar {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px; flex-shrink: 0;
    background: rgba(8,8,14,.58);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
    z-index: 20; position: relative;
}
.proj-overlay__back {
    background: none; border: none;
    color: rgba(255,255,255,.65);
    font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
    cursor: none; padding: 0;
    display: flex; align-items: center; gap: 10px;
    transition: color .2s;
}
.proj-overlay__back::before {
    content: '←'; font-size: 16px; letter-spacing: 0;
    transition: transform .25s var(--ease);
}
.proj-overlay__back:hover { color: #fff; }
.proj-overlay__back:hover::before { transform: translateX(-4px); }

.proj-overlay__proj-nav { display: flex; align-items: center; gap: 6px; }
.proj-overlay__proj-btn {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    color: rgba(255,255,255,.45); font-size: 13px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: none;
    transition: background .2s, color .2s, border-color .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.proj-overlay__proj-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.18); }
.proj-overlay__counter {
    font-size: 9px; letter-spacing: .2em;
    color: rgba(255,255,255,.22);
    padding: 0 10px;
}

/* Overlay body — relative stacking context, fills remaining height */
.proj-overlay__body {
    flex: 1; position: relative; overflow: hidden;
    display: flex;                       /* image column + info column, side by side */
    --odpw: clamp(340px, 33%, 430px);    /* info column width */
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY  —  liquid glass floating panel
   ═══════════════════════════════════════════════════════════ */

/* Image column — takes all the space left of the info panel */
/* pan-y: vertical stays the page's to scroll, horizontal is ours to read as a
   swipe between the project's photos (see initImageSwipe in script.js) */
.od-bg { position: relative; flex: 1 1 auto; min-width: 0; z-index: 0; touch-action: pan-y; }
/* Ambient backdrops — blurred, darkened copies of the project image so the full
   image (and the info panel) sit on the project's own colour, not flat black. */
.od-ambient {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-size: cover; background-position: center;
}
.od-bg__ambient    { filter: blur(42px) brightness(.5) saturate(1.25); transform: scale(1.25); }
.od-panel__ambient { filter: blur(64px) brightness(.5) saturate(1.5);  transform: scale(1.4); }

/* The hero shimmers under the photo until it has actually decoded. It used
   to fade in the moment the overlay opened whether or not there was
   anything to show, which on a slow line meant an empty frame beside a
   full info panel — the one arrangement that looks like a bug rather than
   a wait. .img-ready is set by paintHero once the file is in hand. */
.od-bg { --shimmer-z: 1; }

.od-bg__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;   /* full image, never cropped */
    z-index: 2;
    opacity: 0; transform: scale(1.03);
    transition: opacity .9s ease, transform 1.1s cubic-bezier(.25,.46,.45,.94);
    transition-delay: .3s;
}
.proj-overlay.open .od-bg__img.img-ready { opacity: 1; transform: scale(1); }

/* Soft vignette to seat the image in its ambient frame */
.od-bg__veil {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse 130% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* HUD bracket decorations (image side) */
.od-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.od-hud__c {
    position: absolute; width: 0; height: 0;
    transition: width .4s var(--ease-out), height .4s var(--ease-out);
}
.proj-overlay.open .od-hud__c { width: 20px; height: 20px; transition-delay: .8s; }
.od-hud__c--tl { top: 24px; left: 24px; border-top: 1.5px solid rgba(245,197,24,.45); border-left: 1.5px solid rgba(245,197,24,.45); }
.od-hud__c--bl { bottom: 24px; left: 24px; border-bottom: 1.5px solid rgba(245,197,24,.45); border-left: 1.5px solid rgba(245,197,24,.45); }

/* Image nav — glass circle buttons */
.od-img-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    color: rgba(255,255,255,.7); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: none; z-index: 4;
    opacity: 0; transition: opacity .22s, background .2s, color .2s;
}
.proj-overlay__body:hover .od-img-btn { opacity: 1; }
.od-img-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
/* One to each edge of the photo, rather than a pair in the left corner. These
   sit in the body, which spans the info panel too, so `next` clears the panel
   by the same margin the thumbstrip uses instead of hiding behind it. */
.od-img-btn--prev { left: 20px; }
.od-img-btn--next { right: calc(var(--odpw) + 28px); }

/* Full-resolution view + download controls (top-right of the image) */
.od-fullres {
    position: absolute; top: 16px; right: 16px; z-index: 5;
    display: flex; align-items: center; gap: 6px;
}
.od-fullres__view,
.od-fullres__dl {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 34px;
    background: rgba(8,8,14,.5);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 100px;
    color: rgba(255,255,255,.82);
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.4);
    cursor: none; text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.od-fullres__view { padding: 0 15px; }
.od-fullres__dl   { width: 34px; flex: none; }
.od-fullres__view:hover,
.od-fullres__dl:hover {
    background: rgba(245,197,24,.18);
    border-color: rgba(245,197,24,.42);
    color: #fff;
}
.od-fullres svg { width: 14px; height: 14px; flex: none; }

/* Thumbstrip — liquid glass bar at bottom-left */
/* Thumbstrip — a reel that slides so the current photo sits dead centre.
   The thumbs used to be flex: 1 inside an overflow:hidden shell, so a project
   with thirty photos squashed them all to their minimum and clipped everything
   past the right edge — unreachable, and the current photo pinned to the end.
   Now the shell is a fixed window and the reel travels behind it. */
.od-thumbs {
    position: absolute; bottom: 20px; left: 20px;
    right: calc(var(--odpw) + 28px);
    display: flex; height: 52px;
    background: rgba(8,8,14,.44);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    overflow: hidden; z-index: 4;
    padding: 4px;
}
/* The window the reel moves behind. The mask dissolves both ends so thumbs
   arrive and leave rather than being sliced off by the glass edge. */
.od-thumbs__viewport {
    position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.od-thumbs__reel {
    display: flex; gap: 4px; height: 100%; width: max-content;
    will-change: transform;
    /* a soft, slightly overshooting ease so the strip feels thrown, not stepped */
    transition: transform .58s cubic-bezier(.22, .68, .28, 1);
}
.od-thumb {
    flex: 0 0 auto; width: 72px; height: 100%;
    object-fit: cover; cursor: none; border-radius: 8px;
    opacity: .26; transform: scale(.9);
    outline: 2px solid transparent; outline-offset: 1px;
    transition: opacity .4s var(--ease), transform .4s var(--ease),
                outline-color .3s, box-shadow .4s;
}
/* the two either side read brighter, so the eye is led along the reel */
.od-thumb--near   { opacity: .52; transform: scale(.94); }
.od-thumb:hover   { opacity: .8;  transform: scale(.96); }
.od-thumb.active  {
    opacity: 1; transform: scale(1);
    outline-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(8,8,14,.9), 0 6px 20px rgba(245,197,24,.28);
}
@media (prefers-reduced-motion: reduce) {
    .od-thumbs__reel { transition: none; }
    .od-thumb { transition: opacity .2s; transform: none; }
    .od-thumb--near, .od-thumb.active, .od-thumb:hover { transform: none; }
}

/* ── LOCATION MAP — a separate window beside the detail window ── */
.od-sidemap {
    position: relative;
    flex: 0 0 auto;
    width: clamp(240px, 21vw, 380px);
    height: min(880px, 100%);            /* matches the detail window height */
    border-radius: 24px; overflow: hidden;
    background: #0b0e14;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 50px 130px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.03);
    opacity: 0; transform: translateX(28px) scale(.94);
    transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.proj-overlay.open .od-sidemap { opacity: 1; transform: translateX(0) scale(1); }

.od-sidemap__canvas { position: absolute; inset: 0; background: #0b0e14; }
.od-sidemap__canvas .leaflet-container { background: #0b0e14; font: inherit; }
.od-sidemap__canvas .leaflet-tile      { filter: saturate(.85) brightness(.95); }

/* Gold teardrop pin */
.od-sidemap__pin {
    position: relative; display: block;
    width: 18px; height: 18px; margin: 0 auto;
    background: var(--gold);
    border: 2px solid rgba(0,0,0,.42);
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    box-shadow: 0 0 0 5px rgba(245,197,24,.2), 0 4px 9px rgba(0,0,0,.6);
}
.od-sidemap__pin::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
    background: #0b0b10; border-radius: 50%;
}

/* City label bar (top) */
.od-sidemap__bar {
    position: absolute; left: 0; right: 0; top: 0; z-index: 500;
    display: flex; align-items: center; gap: 8px;
    padding: 17px 19px 24px;
    background: linear-gradient(to bottom, rgba(5,5,9,.92), rgba(5,5,9,.42) 64%, transparent);
    pointer-events: none;
}
.od-sidemap__dot {
    flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 8px rgba(245,197,24,.85);
}
.od-sidemap__city {
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ≤1600px: not enough room beside the detail window, so the location map drops
   BELOW it and the whole overlay becomes a single vertical scroll. */
@media (max-width: 1600px) {
    .proj-overlay {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-y: auto; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .od-modal { flex: 0 0 auto; }
    .od-sidemap {
        display: block; order: 2; flex: 0 0 auto;
        width: min(1240px, 100%);
        height: min(560px, 56vh);
        border-radius: 22px;
        transform: none;                 /* no desktop slide-in offset */
    }
    .proj-overlay.open .od-sidemap { transform: none; }
}

/* ── LIQUID GLASS DATA PANEL ────────────────────────────────── */
.od-panel {
    position: relative;
    flex: 0 0 var(--odpw);
    align-self: stretch;
    margin: 16px 16px 16px 6px;          /* floats beside the image, never over it */
    z-index: 5;
    display: flex; flex-direction: column;
    overflow: hidden;

    /* Glass substance */
    background: rgba(10,10,18,.58);
    backdrop-filter: blur(38px) saturate(190%) brightness(1.07);
    -webkit-backdrop-filter: blur(38px) saturate(190%) brightness(1.07);

    /* Shape */
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.11);

    /* Depth */
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(0,0,0,.3),
        0 0 0 0.5px rgba(255,255,255,.04),
        0 28px 72px rgba(0,0,0,.62),
        0 8px 22px rgba(0,0,0,.38);

    /* The modal scales in as a whole; the panel's contents stagger in below. */
}

/* Iridescent border overlay */
.od-panel::after {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 23px;
    padding: 1px;
    background: linear-gradient(140deg,
        rgba(245,197,24,.5)  0%,
        rgba(255,255,255,.1) 28%,
        rgba(160,200,255,.18) 50%,
        rgba(255,255,255,.08) 72%,
        rgba(245,197,24,.42) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none; z-index: 4;
}

/* Scrim over the ambient image — guarantees text stays at ≥4.5:1 contrast
   while the project's colour still bleeds through at the top. */
.od-panel__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(8,8,13,.72) 0%, rgba(8,8,13,.82) 50%, rgba(8,8,13,.9) 100%);
}
.od-panel__scroll {
    flex: 1; overflow-y: auto;
    padding: 32px 28px 36px;
    display: flex; flex-direction: column;
    position: relative; z-index: 2;
}
.od-panel__scroll::-webkit-scrollbar { width: 0; }

/* Status pill — glass pill */
.od-status-row {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    padding: 6px 14px 6px 10px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 100px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    margin-bottom: 24px;
    opacity: 0; transform: translateY(14px) scale(.95);
    transition: opacity .5s, transform .5s cubic-bezier(.34,1.3,.64,1);
}
.proj-overlay.open .od-status-row { opacity: 1; transform: translateY(0) scale(1); transition-delay: .60s; }

.od-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.od-dot.s-done    { background: #4ecb71; box-shadow: 0 0 8px rgba(78,203,113,.8); animation: dotPulse 2.4s ease-in-out infinite; }
.od-dot.s-build   { background: var(--gold); box-shadow: 0 0 8px rgba(245,197,24,.8); animation: dotPulse 1.8s ease-in-out infinite; }
.od-dot.s-concept { background: rgba(255,255,255,.28); }

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.6); }
}

.od-status-text {
    font-size: 8px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
}
.od-status-text.s-done    { color: #4ecb71; }
.od-status-text.s-build   { color: var(--gold); }
.od-status-text.s-concept { color: rgba(255,255,255,.35); }

/* Project number */
.od-num {
    font-size: 10px; letter-spacing: .38em; color: rgba(245,197,24,.45);
    text-transform: uppercase; margin-bottom: 10px;
    opacity: 0; transform: translateY(12px);
    transition: opacity .48s, transform .48s var(--ease-out);
}
.proj-overlay.open .od-num { opacity: 1; transform: translateY(0); transition-delay: .68s; }

/* Project name */
.od-name {
    font-size: clamp(24px, 2.8vw, 46px);
    font-weight: 200; color: #fff;
    letter-spacing: -.02em; line-height: 1.08;
    margin-bottom: 0;
    opacity: 0; transform: translateY(14px);
    transition: opacity .52s, transform .52s var(--ease-out);
}
.proj-overlay.open .od-name { opacity: 1; transform: translateY(0); transition-delay: .74s; }

/* Gold rule — draws in from left */
.od-rule {
    height: 1px; margin: 22px 0 20px;
    background: rgba(255,255,255,.06);
    position: relative;
    transform: scaleX(0); transform-origin: left;
    transition: transform .6s var(--ease-out);
}
.od-rule::after {
    content: ''; position: absolute; left: 0; top: 0;
    height: 1px; width: 48px;
    background: linear-gradient(to right, var(--gold), transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .48s var(--ease-out); transition-delay: .96s;
}
.proj-overlay.open .od-rule        { transform: scaleX(1); transition-delay: .84s; }
.proj-overlay.open .od-rule::after { transform: scaleX(1); }

/* Spec grid — individual glass chips */
.od-specs {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 7px; margin-bottom: 18px;
}
.od-spec {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 13px 15px;
    position: relative; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    opacity: 0; transform: translateY(12px) scale(.97);
    transition: opacity .38s, transform .38s cubic-bezier(.34,1.2,.64,1);
}
.od-spec::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.2), transparent);
}
.proj-overlay.open .od-spec:nth-child(1) { opacity: 1; transform: none; transition-delay: .92s; }
.proj-overlay.open .od-spec:nth-child(2) { opacity: 1; transform: none; transition-delay: .98s; }
.proj-overlay.open .od-spec:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.04s; }
.proj-overlay.open .od-spec:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.10s; }

.od-spec dt {
    font-size: 7px; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(255,255,255,.22); margin-bottom: 5px;
}
.od-spec dd {
    font-size: 12px; font-weight: 300; color: rgba(255,255,255,.85);
    line-height: 1.4; margin: 0;
}

/* Hashtags — liquid glass gold pills */
.od-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 20px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .44s, transform .44s var(--ease-out);
}
.proj-overlay.open .od-tags { opacity: 1; transform: translateY(0); transition-delay: 1.16s; }

.od-tag {
    font-size: 7.5px; letter-spacing: .2em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 100px;
    background: rgba(245,197,24,.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(245,197,24,.24);
    color: rgba(245,197,24,.82);
    box-shadow: 0 0 12px rgba(245,197,24,.1), inset 0 1px 0 rgba(245,197,24,.14);
    transition: background .22s, border-color .22s, color .22s, box-shadow .22s;
    cursor: default;
}
.od-tag:hover {
    background: rgba(245,197,24,.15);
    border-color: rgba(245,197,24,.52);
    color: #F5C518;
    box-shadow: 0 0 20px rgba(245,197,24,.22), inset 0 1px 0 rgba(245,197,24,.22);
}

/* Description */
.od-desc {
    font-size: 13px; line-height: 1.88;
    color: rgba(255,255,255,.45); font-weight: 300;
    opacity: 0; transform: translateY(10px);
    transition: opacity .52s, transform .52s var(--ease-out);
}
.proj-overlay.open .od-desc { opacity: 1; transform: translateY(0); transition-delay: 1.24s; }

/* Overlay responsive — STACK on smaller screens so the whole image stays
   visible and the info flows beneath it as a glass card (never covering it). */
@media (max-width: 840px) {
    /* The body becomes a vertical scroll: image, thumbs, then panel */
    .proj-overlay__body {
        display: flex; flex-direction: column;
        overflow-y: auto; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Image — a contained block at the top: the ENTIRE photo is shown */
    .od-bg {
        position: relative; inset: auto;
        flex: 0 0 auto; height: 46vh;
        background: #0a0a10;
    }
    .od-bg__img { object-fit: contain; object-position: center; }
    .od-bg__veil { display: none; }      /* no vignette over a contained image */
    .od-hud { display: none; }
    .od-img-btn { display: none; }        /* switch images via the thumbnails */

    /* Location map — its own card at the very top, above the detail window, so
       a project reads place, then photos, then details. `order` is flipped
       because the ≤1600px rule above parks the map after the modal. */
    .od-sidemap {
        order: -1;
        height: clamp(120px, 18vh, 180px);
        border-radius: 18px;
    }
    .od-sidemap__bar { padding: 13px 15px 22px; }

    /* Thumbnails — a normal-flow strip under the image */
    .od-thumbs {
        position: relative; inset: auto; flex: none;
        left: auto; right: auto; bottom: auto; top: auto;
        width: auto; margin: 12px 14px 0; height: 54px;
    }

    /* Info — flows below as a glass card, no fixed height, no overlap */
    .od-panel {
        position: relative; inset: auto; flex: none;
        top: auto; right: auto; bottom: auto; left: auto;
        width: auto; height: auto; align-self: auto;
        margin: 14px; border-radius: 18px;
        transform: none;
    }
    .proj-overlay.open .od-panel { transform: none; }
    .od-panel__scroll { flex: none; overflow: visible; padding: 26px 22px 30px; }
}
@media (max-width: 500px) {
    .proj-overlay { padding: 8px; }
    .od-modal { border-radius: 18px; }
    .proj-overlay__topbar { padding: 0 14px; }
    .od-bg { height: 40vh; }
    .od-thumbs { margin: 10px 10px 0; }
    .od-panel { margin: 10px; }
    .od-panel__scroll { padding: 22px 18px 26px; }
    .od-sidemap { height: clamp(110px, 16vh, 158px); border-radius: 16px; }

    /* Icon-only on small screens to avoid crowding the photo */
    .od-fullres { top: 12px; right: 12px; }
    .od-fullres__view span { display: none; }
    .od-fullres__view { padding: 0; width: 34px; }
}

/* ---- Projects Map ------------------------------------- */
.proj-map {
    position: relative;
    height: 92vh; min-height: 600px;
    background: #060606;
    border-top: 1px solid rgba(255,255,255,.04);
    overflow: hidden;
}
/* Small-viewport height: mobile Safari counts its collapsing address bar as a
   resize, so a `vh` section changes height mid-scroll and drags the map through
   a re-measure every time. `svh` is the height with the bar showing and never
   moves. */
@supports (height: 92svh) {
    .proj-map { height: 92svh; }
}

/* Leaflet container */
#projectMapEl {
    position: absolute; inset: 0; z-index: 1;
    background: #060606;    /* shows through the tiles' own opacity */
}
/* NB: the tile pane deliberately carries no `filter`. It used to invert a light
   basemap to get dark land, which made the browser re-run that pixel chain on
   every frame the pane was transformed — the single biggest cause of pinch-zoom
   stutter on iPad and iPhone. The tiles are served dark instead (script.js). */

/* Border canvas, painted by the KurdistanOutline layer in script.js */
.kurd-outline { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Edge-darkening gradient veil */
.proj-map__veil {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(6,6,6,.62) 0%, transparent 18%, transparent 72%, rgba(6,6,6,.82) 100%),
        linear-gradient(to right,  rgba(6,6,6,.55) 0%, transparent 28%);
}

/* Top-left label overlay */
.proj-map__label {
    position: absolute; top: 44px; left: 48px;
    z-index: 10; pointer-events: none;
}
.proj-map__label .section-label { margin-bottom: 8px; }
.proj-map__title {
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 200; color: rgba(255,255,255,.88);
    letter-spacing: .02em; line-height: 1.25; margin: 0;
}

/* Bottom stat bar */
.proj-map__stats {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 10; height: 62px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,6,6,.92); border-top: 1px solid rgba(245,197,24,.07);
    backdrop-filter: blur(12px); pointer-events: none;
}
.map-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 44px; gap: 3px;
}
.map-stat__val {
    font-size: 18px; font-weight: 300; color: var(--gold);
    letter-spacing: .04em; line-height: 1;
}
.map-stat__lbl {
    font-size: 8px; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(255,255,255,.28);
}
.map-stat__div { width: 1px; height: 26px; background: rgba(255,255,255,.07); flex-shrink: 0; }

/* Override Leaflet attribution for dark theme */
.leaflet-control-attribution {
    background: transparent !important;
    color: rgba(255,255,255,.14) !important;
    font-size: 8px !important;
}
.leaflet-control-attribution a { color: rgba(255,255,255,.22) !important; }

/* ── Custom pin markers ────────────────────────────────── */
.map-pin { position: relative; width: 36px; height: 36px; cursor: none; }

.pin__ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border: 1.5px solid rgba(245,197,24,.55);
    border-radius: 50%;
    animation: pinPulse 2.8s ease-out infinite;
}
.pin__ring:nth-child(2) { animation-delay: 1.1s; }
@keyframes pinPulse {
    0%   { transform: translate(-50%,-50%) scale(1);   opacity: .65; }
    100% { transform: translate(-50%,-50%) scale(4.6); opacity: 0;   }
}

.pin__dot {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    background: var(--gold); border-radius: 50%; z-index: 2;
    box-shadow: 0 0 0 2.5px rgba(245,197,24,.18), 0 2px 8px rgba(0,0,0,.6);
    transition: transform .38s cubic-bezier(.34,1.56,.64,1), background .25s;
}
.map-pin:hover .pin__dot,
.map-pin.active .pin__dot {
    transform: translate(-50%,-50%) scale(2.1);
    background: #fff;
}
.pin__num {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 5px; font-weight: 700; color: #060606; z-index: 3;
    transition: opacity .2s;
    pointer-events: none;
}
.map-pin:hover .pin__num, .map-pin.active .pin__num { opacity: 0; }

/* ── Floating project card ─────────────────────────────── */
/* Liquid-glass floating card: frosted panel over the dark map, gold aurora
   refracting behind it, a sheen that sweeps once on open. Two modes — a photo
   card, and a spec-only card (.map-card--specs) for map-only projects. */
.map-card {
    position: absolute;
    width: 322px;
    border-radius: 20px;
    z-index: 20;
    overflow: hidden;
    background:
        linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 42%, rgba(245,197,24,.05)),
        rgba(13,13,15,.66);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255,255,255,.14);
    border-top-color: rgba(255,255,255,.3);
    box-shadow: 0 30px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.14), 0 0 44px rgba(245,197,24,.06);
    opacity: 0; visibility: hidden;
    transform: scale(.94) translateY(10px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), visibility .5s;
    pointer-events: none;
}
.map-card.open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); pointer-events: auto; }

/* aurora the glass refracts, and a one-shot diagonal sheen on open */
.map-card__glow {
    position: absolute; left: -30%; right: -30%; top: -45%; height: 85%; z-index: 0;
    background: radial-gradient(58% 60% at 32% 0%, rgba(245,197,24,.22), transparent 70%);
    pointer-events: none;
}
.map-card__sheen {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.1) 50%, transparent 58%);
    background-size: 250% 100%; background-position: 210% 0;
}
.map-card.open .map-card__sheen { animation: mapCardSheen 1.1s ease-out .12s 1; }
@keyframes mapCardSheen { to { background-position: -90% 0; } }

.map-card__close {
    position: absolute; top: 12px; right: 12px; z-index: 6;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.7); font-size: 11px; cursor: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .2s, color .2s, border-color .2s;
}
.map-card__close:hover { background: rgba(245,197,24,.16); color: #fff; border-color: rgba(245,197,24,.5); }

.map-card__img-wrap {
    position: relative; z-index: 2; height: 176px; overflow: hidden;
    margin: 6px 6px 0; border-radius: 15px; background: #060606;
}
.map-card__img {
    position: relative; z-index: 1;      /* above its .img-ph placeholder */
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block; transition: transform .8s var(--ease);
}
.map-card:hover .map-card__img { transform: scale(1.06); }
.map-card__img-wrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6,6,7,.85), transparent 46%);
}
.map-card__num {
    position: absolute; bottom: 11px; left: 13px; z-index: 2;
    font-size: 9px; letter-spacing: .3em; color: var(--gold);
    text-shadow: 0 1px 6px rgba(0,0,0,.85);
}

.map-card__body { position: relative; z-index: 2; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }

.map-card__badge {
    align-self: flex-start;
    font-size: 8px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--gold);
    padding: 5px 11px; border-radius: 100px;
    background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.25);
}
.map-card__name {
    font-size: 17px; font-weight: 300; color: #fff;
    letter-spacing: .01em; line-height: 1.28; margin: 0;
}
.map-card__meta {
    font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.3); margin: 0; line-height: 1.6;
}
.map-card__excerpt {
    font-size: 11.5px; line-height: 1.78; color: rgba(255,255,255,.42);
    font-weight: 300; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* spec grid — the map-only variant's content, glass tiles with gold labels */
.map-card__specs {
    display: none; margin: 2px 0 0;
    grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.09); border-radius: 12px; overflow: hidden;
}
.map-card__spec {
    background: rgba(10,10,12,.4); padding: 11px 13px;
    display: flex; flex-direction: column; gap: 5px;
}
.map-card__spec--wide { grid-column: 1 / -1; }
.map-card__spec dt {
    font-size: 7.5px; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(245,197,24,.62);
}
.map-card__spec dd {
    margin: 0; font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.9); line-height: 1.35;
}

.map-card__cta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 15px; margin-top: 4px;
    background: rgba(245,197,24,.04);
    border: 1px solid rgba(245,197,24,.22); border-radius: 11px; color: var(--gold);
    font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
    cursor: none; transition: background .25s, border-color .25s, color .25s;
}
.map-card__cta:hover { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.55); color: #fff; }
.map-card__cta svg { opacity: .65; transition: transform .3s, opacity .3s; }
.map-card__cta:hover svg { transform: translateX(4px); opacity: 1; }

/* map-only variant: no photo, no excerpt, no CTA — the spec grid instead */
.map-card--specs .map-card__img-wrap,
.map-card--specs .map-card__excerpt,
.map-card--specs .map-card__cta { display: none; }
.map-card--specs .map-card__specs { display: grid; }
.map-card--specs .map-card__body { padding-top: 20px; }

/* Zoom controls */
.proj-map__zoom {
    position: absolute;
    bottom: 82px; right: 24px;
    z-index: 10;
    display: flex; flex-direction: column;
    gap: 1px;
}
.map-zoom-btn {
    width: 38px; height: 38px;
    background: rgba(9,9,9,.9);
    border: 1px solid rgba(245,197,24,.18);
    color: rgba(245,197,24,.7);
    font-size: 20px; font-weight: 200; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: none; letter-spacing: 0;
    transition: background .22s, border-color .22s, color .22s;
    user-select: none;
}
.map-zoom-btn:hover {
    background: rgba(245,197,24,.09);
    border-color: rgba(245,197,24,.5);
    color: #fff;
}
.map-zoom-btn:active { background: rgba(245,197,24,.14); }

/* Map responsive */
@media (max-width: 768px) {
    .proj-map { height: 72vh; }
    .proj-map__label { top: 24px; left: 20px; }
    .map-stat { padding: 0 18px; }
    .map-stat__val { font-size: 15px; }
    .map-card { width: calc(100vw - 32px); left: 16px !important; top: auto !important; bottom: 76px; }
    .map-card::before { display: none; }
}
@supports (height: 72svh) {
    @media (max-width: 768px) { .proj-map { height: 72svh; } }
}

/* Map performance on touch hardware.
   These were gated on `max-width: 768px`, which is why the map still stuttered
   on an iPad: it reports 768–1366px wide and so matched none of them, while its
   GPU pays exactly the same per-frame costs a phone's does. Pointer type is the
   honest test — it catches every iPad and iPhone and leaves desktop untouched. */
@media (hover: none), (pointer: coarse) {
    /* The stat bar sits over the moving map, so its backdrop-blur re-samples and
       re-blurs the map every frame of a pan or pinch. The bar is already 92%
       opaque, so dropping the blur is invisible. */
    .proj-map__stats {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(6,6,6,.96);
    }

    /* Same story for the project card — 22px of live blur over a map that is
       being pinched is the most expensive thing on the screen. */
    .map-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background:
            linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 42%, rgba(245,197,24,.05)),
            rgba(13,13,15,.95);
    }

    /* Every pin runs two never-ending pulse animations; with a pin per project
       that is dozens of layers the compositor keeps repainting behind the map.
       On touch the pins hold still — the gold dot is enough. */
    .map-pin .pin__ring { animation: none; opacity: .5; }
    .map-pin .pin__ring:nth-child(2) { display: none; }
}

/* ---- Responsive ---------------------------------------- */
@media (max-width: 1100px) {
    .about__inner, .heritage__inner, .contact__inner { grid-template-columns: 1fr; gap: 60px; }
    .about__top { grid-template-columns: 1fr; }
    .about__portrait { flex: none; min-height: 0; height: clamp(420px, 56vh, 600px); }  /* bounded when stacked */
    .about__quote { margin-top: 36px; }
    .process__inner { grid-template-columns: 1fr; gap: 44px; }
    .process__aside { position: static; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
    .footer__col--sun { display: none; }
}
@media (max-width: 768px) {
    :root { --nav-h: 60px; }
    .nav { padding: 13px 18px 0; }
    .nav__bar { display: none; }            /* links move into the hamburger menu */
    .nav__hamburger { display: flex; }
    .about, .process, .heritage, .contact { padding: 80px 20px; }
    .process__rail { left: 21px; }
    .process__node { flex: 0 0 44px; }
    .process__orb  { margin-top: 16px; }
    .process__ghost { font-size: 96px; top: -10px; }
    .footer { padding: 48px 20px 28px; }
    .footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .footer__copy, .footer__social { text-align: left; align-items: flex-start; }
    .hero__scroll { display: none; }
}

/* ---- Kurdish: let the letters join --------------------- */
/* Kurdish is written in a joining script: each letter fuses to the next, and
   the shape a letter takes depends on what it is joined to. `letter-spacing`
   forces a gap between every glyph, which pulls those joins apart and leaves a
   word looking like a row of loose characters. This stylesheet sets tracking on
   86 rules — all of them written for the Latin version, none with an RTL
   override — so every tracked label came apart the moment the site switched to
   Kurdish.

   Flagged !important deliberately. This is not a style preference to be
   outranked: tracking must never reach a cursive script, and the rule has to
   beat both the existing declarations and any added later, whatever their
   specificity. Digits and Latin do not join, so the handful of elements that
   only ever carry those keep their tracking, listed below. */
[dir="rtl"], [dir="rtl"] * { letter-spacing: normal !important; }

/* Non-joining content — numerals, and the Latin wordmark on the loader. */
[dir="rtl"] .loader__text        { letter-spacing: .45em !important; }
[dir="rtl"] .od-num              { letter-spacing: .38em !important; }
[dir="rtl"] .pgc__num            { letter-spacing: .34em !important; }
[dir="rtl"] .map-card__num       { letter-spacing: .3em  !important; }
[dir="rtl"] .service__num        { letter-spacing: .24em !important; }
[dir="rtl"] .hero__clock time    { letter-spacing: .14em !important; }
[dir="rtl"] .process__count-now,
[dir="rtl"] .process__count-total { letter-spacing: .12em !important; }