/* STATIC LIVE — obsidian, ivory, brushed brass. Logical properties throughout so RTL and LTR share one sheet. */
:root {
  --obsidian:#0a0a0b; --onyx:#111113; --graphite:#1b1b1e; --smoke:#26262a;
  --ivory:#f2ece1; --ivory-2:rgba(242,236,225,.72); --mute:#8f897f; --mute-2:#6d685f;
  --brass:#c2a36b; --brass-hi:#dcc28f; --brass-lo:#7d6a46;
  --line:rgba(242,236,225,.12); --line-2:rgba(242,236,225,.26);
  --ar:'Alexandria','Segoe UI',Tahoma,sans-serif;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --font:var(--ar);
  --ease:cubic-bezier(.2,.75,.15,1); --ease-io:cubic-bezier(.7,0,.25,1);
  --panel-w:400px; --bar-h:60px; --peek:148px; --top-h:72px;
  --pad:clamp(20px, 5vw, 72px);
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
html, body { margin:0; }
body { background:var(--obsidian); color:var(--ivory); font-family:var(--font); font-size:15px; line-height:1.6; font-weight:300;
       -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body[data-view="explore"] { overflow:hidden; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
input, select, textarea { font:inherit; color:inherit; }
a { color:inherit; }
img { max-width:100%; }
:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
[hidden] { display:none !important; }
::selection { background:var(--brass); color:var(--obsidian); }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:fixed; z-index:5000; inset-block-start:10px; inset-inline-start:10px; padding:10px 16px; background:var(--ivory); color:var(--obsidian);
        transform:translateY(-150%); transition:transform .2s; }
.skip:focus { transform:none; }

.eyebrow { margin:0; font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
[lang="ar"] .eyebrow, .eyebrow:lang(ar) { letter-spacing:0; font-size:13px; }
.rule { display:block; width:56px; height:1px; background:var(--brass); margin:22px 0; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 28px;
       border:1px solid var(--ivory); background:var(--ivory); color:var(--obsidian); font-size:14.5px; font-weight:500;
       text-decoration:none; letter-spacing:.02em; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn:hover { background:var(--brass-hi); border-color:var(--brass-hi); }
.btn svg { width:18px; height:18px; flex:none; }
.btn.ghost { background:transparent; color:var(--ivory); border-color:var(--line-2); }
.btn.ghost:hover { border-color:var(--brass); color:var(--brass-hi); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.38; cursor:not-allowed; background:transparent; color:var(--ivory); border-color:var(--line-2); }
.btn .arrow { display:inline-block; transition:transform .35s var(--ease); }
.btn:hover .arrow { transform:translateX(-4px); }
[dir="ltr"] .btn:hover .arrow { transform:translateX(4px); }
[dir="ltr"] .arrow-flip, [dir="ltr"] .arrow { transform:scaleX(-1); }
[dir="ltr"] .btn:hover .arrow { transform:scaleX(-1) translateX(-4px); }

/* ---------- intro cover ---------- */
.intro-cover { position:fixed; inset:0; z-index:4000; background:var(--obsidian); display:grid; place-items:center; pointer-events:none;
               animation:cover-out .8s var(--ease-io) 1.35s forwards; }
.intro-cover div { display:grid; justify-items:center; gap:26px; }
.intro-cover img { width:min(62vw, 400px); height:auto; animation:logo-in 1s var(--ease) both; }
.intro-cover i { display:block; width:min(62vw, 400px); height:1px; background:var(--brass); transform-origin:var(--from, right);
                 animation:line-in 1.1s var(--ease-io) .25s both; }
[dir="ltr"] .intro-cover i { --from:left; }
@keyframes logo-in { from { opacity:0; transform:translateY(8px); filter:blur(6px); } }
@keyframes line-in { from { transform:scaleX(0); } }
@keyframes cover-out { to { opacity:0; visibility:hidden; } }

/* ---------- top bar (home) ---------- */
.top { position:fixed; z-index:900; inset-block-start:0; inset-inline:0; height:calc(var(--top-h) + env(safe-area-inset-top));
       padding:env(safe-area-inset-top) var(--pad) 0; display:flex; align-items:center; gap:24px;
       transition:background .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease); border-bottom:1px solid transparent; }
.top.solid { background:rgba(10,10,11,.86); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); }
body[data-view="explore"] .top { transform:translateY(-110%); }
.top-logo { display:block; flex:none; }
.top-logo img { display:block; height:30px; width:auto; }
.top-nav { margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.top-nav button, .top-nav a { padding:10px 14px; font-size:14px; font-weight:400; color:var(--ivory-2); text-decoration:none; position:relative; }
.top-nav button:hover, .top-nav a:hover { color:var(--ivory); }
.top-nav .lang, .bar-lang { font-family:var(--serif); font-size:17px; font-weight:500; letter-spacing:.04em; color:var(--brass); border:1px solid var(--line-2); padding:6px 14px; }
.top-nav .lang:lang(ar), .bar-lang:lang(ar) { font-family:var(--ar); font-size:14px; letter-spacing:0; }
.top-nav .lang:hover, .bar-lang:hover { border-color:var(--brass); color:var(--brass-hi); }

/* ---------- home ---------- */
.home { position:relative; }
body[data-view="explore"] .home { visibility:hidden; }
.hero { position:relative; min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows:1fr auto;
        align-items:center; column-gap:clamp(24px, 4vw, 72px); padding:calc(var(--top-h) + 24px) var(--pad) 34px; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 72% 45%, rgba(194,163,107,.08), transparent 70%); }
[dir="ltr"] .hero::before { background:radial-gradient(ellipse 60% 55% at 28% 45%, rgba(194,163,107,.08), transparent 70%); }
.hero-copy { position:relative; z-index:2; max-width:760px; }
.hero h1 { margin:22px 0 0; font-weight:200; font-size:clamp(40px, 5vw, 76px); line-height:1.16; letter-spacing:-.01em; }
.hero h1 em { font-style:normal; color:var(--brass-hi); font-weight:300; }
[dir="ltr"] .hero h1 { font-family:var(--serif); font-weight:300; line-height:1.02; letter-spacing:-.015em; font-size:clamp(44px, 5.6vw, 86px); }
[dir="ltr"] .hero h1 em { font-style:italic; }
.lede { margin:28px 0 0; max-width:520px; font-size:clamp(16px, 1.35vw, 18.5px); line-height:1.75; color:var(--ivory-2); }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:42px; }

.plate { position:relative; z-index:1; align-self:stretch; display:grid; place-items:center; min-height:min(64svh, 680px); }
.survey { width:100%; height:100%; max-height:min(68svh, 700px); overflow:visible; }
.survey .grid line { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1400; stroke-dashoffset:1400;
                     animation:draw 2.2s var(--ease-io) forwards; animation-delay:calc(1.3s + var(--k) * 60ms); }
.survey .grid text { fill:var(--mute-2); font:400 10px/1 var(--ar); letter-spacing:.06em; opacity:0; animation:fade .8s ease forwards; animation-delay:calc(2s + var(--k) * 50ms); direction:ltr; }
.survey .frame { fill:none; stroke:var(--brass-lo); stroke-width:1; vector-effect:non-scaling-stroke; }
.survey .site { cursor:pointer; opacity:0; animation:fade .7s var(--ease) forwards; animation-delay:calc(2.3s + var(--i) * 70ms); }
.survey .site circle.core { fill:var(--c); }
.survey .site circle.halo { fill:none; stroke:var(--c); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.6; transform-box:fill-box; transform-origin:center;
                            animation:halo 3.2s ease-out infinite; animation-delay:calc(var(--i) * 140ms); }
.survey .site.done circle.halo { display:none; }
.survey .site text { fill:var(--ivory-2); font:400 11px/1 var(--ar); opacity:0; transition:opacity .3s; pointer-events:none; }
.survey .site:hover text, .survey .site:focus text { opacity:1; }
.survey .site:hover circle.core, .survey .site:focus circle.core { fill:var(--ivory); }
.survey .site:focus { outline:none; }
.survey .site:focus-visible circle.core { stroke:var(--brass-hi); stroke-width:2; vector-effect:non-scaling-stroke; }
.survey .north { fill:none; stroke:var(--brass); stroke-width:1; vector-effect:non-scaling-stroke; }
.survey .caption { fill:var(--mute); font:400 10px/1 var(--ar); letter-spacing:.18em; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fade { to { opacity:1; } }
@keyframes halo { 0% { transform:scale(1); opacity:.7; } 80%, 100% { transform:scale(3.4); opacity:0; } }

.stats { position:relative; z-index:2; grid-column:1 / -1; margin:28px 0 0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
         border-top:1px solid var(--line); }
.stats div { padding:18px 0 0; }
.stats div + div { padding-inline-start:24px; border-inline-start:1px solid var(--line); }
.stats dt { order:2; font-size:12.5px; color:var(--mute); margin-top:2px; }
.stats dd { margin:0; font-family:var(--serif); font-size:clamp(30px, 3.4vw, 46px); font-weight:300; line-height:1; color:var(--ivory); font-variant-numeric:lining-nums; }
.stats div { display:flex; flex-direction:column; }

.section { padding:clamp(80px, 12vw, 160px) var(--pad); border-top:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px 64px; align-items:end; margin-bottom:clamp(40px, 6vw, 80px); }
.section-head h2 { margin:14px 0 0; font-weight:200; font-size:clamp(32px, 4.4vw, 60px); line-height:1.15; }
[dir="ltr"] .section-head h2 { font-family:var(--serif); font-weight:300; font-size:clamp(38px, 5vw, 70px); line-height:1.05; }
.section-head p:not(.eyebrow) { margin:0; color:var(--ivory-2); max-width:480px; font-size:16px; line-height:1.8; }

.phases { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); border-top:1px solid var(--line-2); }
.phases li { position:relative; }
.phases li + li { border-inline-start:1px solid var(--line); }
.phases button { display:flex; flex-direction:column; width:100%; height:100%; padding:28px 22px 30px; gap:12px; text-align:start; transition:background .4s var(--ease); }
.phases button:hover { background:var(--onyx); }
.phases .num { font-family:var(--serif); font-size:15px; color:var(--brass); letter-spacing:.08em; font-variant-numeric:lining-nums; }
.phases h3 { margin:0; font-size:19px; font-weight:400; line-height:1.35; }
.phases p { margin:0; font-size:13.5px; color:var(--mute); line-height:1.7; flex:1; }
.phases .count { display:flex; align-items:baseline; gap:8px; margin-top:18px; font-size:12.5px; color:var(--ivory-2); }
.phases .count b { font-family:var(--serif); font-size:38px; font-weight:300; color:var(--ivory); line-height:1; font-variant-numeric:lining-nums; }
.phases .bar { position:absolute; inset-block-start:-1px; inset-inline-start:0; height:2px; width:var(--w); background:var(--c); transition:width 1.4s var(--ease); }

.portfolio-tools { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.index { list-style:none; margin:0; padding:0; columns:2; column-gap:64px; }
.index li { break-inside:avoid; border-top:1px solid var(--line); }
.index li:last-child { border-bottom:1px solid var(--line); }
.index button { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:18px; width:100%; padding:18px 0; text-align:start; }
.index .mk { width:9px; height:9px; transform:rotate(45deg); background:var(--c); }
.index b { display:block; font-size:16px; font-weight:400; }
.index span span { display:block; font-size:13px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.index em { font-style:normal; font-size:12px; color:var(--ivory-2); white-space:nowrap; }
.index button:hover b { color:var(--brass-hi); }
.index .go-mark { color:var(--mute-2); transition:transform .35s var(--ease), color .35s; }
.index button:hover .go-mark { color:var(--brass); transform:translateX(-4px); }
[dir="ltr"] .index button:hover .go-mark { transform:translateX(4px); }

.contact { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:48px 72px; align-items:end; }
.contact h2 { margin:14px 0 0; font-weight:200; font-size:clamp(36px, 5.6vw, 80px); line-height:1.1; }
[dir="ltr"] .contact h2 { font-family:var(--serif); font-weight:300; line-height:1; }
.contact .lede { margin-top:24px; }
.channels { list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.channels li { display:flex; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; }
.channels li span { color:var(--mute); }
.channels a { text-decoration:none; direction:ltr; unicode-bidi:isolate; }
.channels a:hover { color:var(--brass-hi); }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.foot { display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; padding:40px var(--pad) calc(40px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--mute); font-size:12.5px; }
.foot img { height:24px; width:auto; opacity:.85; }
.foot nav { margin-inline-start:auto; display:flex; gap:20px; }
.foot nav button, .foot nav a { color:var(--mute); text-decoration:none; }
.foot nav button:hover, .foot nav a:hover { color:var(--ivory); }

.reveal { opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- explorer (original app, restyled) ---------- */
.explorer { position:fixed; inset:0; z-index:800; background:var(--obsidian);
            display:grid; grid-template-columns:var(--panel-w) 1fr; grid-template-rows:auto 1fr; grid-template-areas:"brand stage" "panel stage";
            visibility:hidden; opacity:0; clip-path:inset(0 0 100% 0);
            transition:opacity .7s var(--ease), clip-path .9s var(--ease-io), visibility 0s linear .9s; }
body[data-view="explore"] .explorer { visibility:visible; opacity:1; clip-path:inset(0 0 0 0); transition:opacity .6s var(--ease), clip-path .9s var(--ease-io), visibility 0s; }

.brand { grid-area:brand; padding:22px 28px 6px; border-inline-end:1px solid var(--line); }
.brand-bar { display:flex; align-items:center; gap:10px; }
.brand-bar .home-btn { display:inline-flex; align-items:center; gap:10px; padding:6px 0; color:var(--ivory-2); font-size:13px; }
.brand-bar .home-btn:hover { color:var(--ivory); }
.brand-bar .home-btn svg { width:16px; height:16px; }
.brand-bar img { display:block; height:26px; width:auto; }
.brand-bar .spacer { flex:1; }
.brand-bar .bar-btn { padding:6px 10px; font-size:13px; color:var(--ivory-2); }
.brand-bar .bar-btn:hover { color:var(--brass-hi); }
.brand-bar .bar-lang { font-size:15px; padding:3px 10px; }
.brand h2 { margin:26px 0 0; font-size:30px; font-weight:200; line-height:1.2; }
[dir="ltr"] .brand h2 { font-family:var(--serif); font-weight:300; font-size:36px; }
.brand p { margin:4px 0 0; color:var(--mute); font-size:13px; }
.brand p#updated { color:var(--brass); font-size:12px; }

.panel { grid-area:panel; min-height:0; display:flex; flex-direction:column; background:var(--obsidian); border-inline-end:1px solid var(--line); }
.sheet-toggle { display:none; }
.search { position:relative; margin:18px 28px 0; flex:none; }
.search input { width:100%; height:46px; padding:0 40px 0 14px; padding-inline:40px 36px; background:var(--onyx); border:1px solid var(--line); border-radius:0; font-size:14px; color:var(--ivory); }
.search input::placeholder { color:var(--mute-2); }
.search input:focus { outline:none; border-color:var(--brass); }
.search input::-webkit-search-cancel-button { display:none; }
.search svg { position:absolute; inset-inline-start:13px; top:50%; width:16px; height:16px; transform:translateY(-50%); color:var(--mute); pointer-events:none; }
.search .clear { position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center; color:var(--mute); font-size:18px; }
.search .clear:hover { color:var(--ivory); }
.mix { display:flex; gap:2px; height:3px; margin:18px 28px 0; flex:none; }
.mix span { flex:var(--n) 1 0; background:var(--c); transition:opacity .3s; }
.mix span.dim { opacity:.18; }
.chips { display:flex; flex-wrap:wrap; gap:6px; padding:14px 28px 18px; margin:0; list-style:none; }
.chip { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:7px 12px; border:1px solid var(--line); font-size:12.5px; font-weight:400; color:var(--ivory-2);
        transition:border-color .25s, background .25s, color .25s; }
.chip i { width:7px; height:7px; background:var(--c); transform:rotate(45deg); flex:none; }
.chip b { font-weight:500; color:var(--ivory); }
.chip:hover { border-color:var(--line-2); color:var(--ivory); }
.chip[aria-pressed="true"] { background:var(--ivory); color:var(--obsidian); border-color:var(--ivory); }
.chip[aria-pressed="true"] b { color:var(--obsidian); }

.list { flex:1; min-height:0; overflow-y:auto; margin:0; padding:0 0 24px; list-style:none; border-top:1px solid var(--line);
        scrollbar-width:thin; scrollbar-color:#3a3833 transparent; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.list li { display:flex; align-items:stretch; border-bottom:1px solid var(--line); transition:background .25s; }
.list li[hidden] { display:none; }
.row { flex:1; min-width:0; display:flex; align-items:center; gap:16px; padding:15px 28px 15px 6px; padding-inline:28px 6px; }
.row > i { width:8px; height:8px; background:var(--c); flex:none; transform:rotate(45deg); }
.row > span { flex:1; min-width:0; }
.row b { display:block; font-size:15px; font-weight:400; }
.row span span { display:block; font-size:12.5px; color:var(--mute); }
.track { display:flex; gap:3px; }
.track i { width:16px; height:2px; background:#34322e; }
.track i.on { background:var(--c); }
.row .track { display:flex; margin-top:9px; }
.dist { flex:none; font-style:normal; font-size:12.5px; font-weight:500; color:var(--brass); white-space:nowrap; }
.go { flex:none; width:52px; display:grid; place-items:center; color:var(--mute-2); }
.go svg { width:18px; height:18px; }
.go:hover { color:var(--brass-hi); }
.list li:hover { background:var(--onyx); }
.list li.sel { background:var(--graphite); box-shadow:inset 2px 0 0 var(--brass); }
[dir="rtl"] .list li.sel { box-shadow:inset -2px 0 0 var(--brass); }
.list li.sel .track i.on { background:var(--brass-hi); }
.route a { flex:1; display:flex; align-items:center; gap:12px; padding:16px 28px; background:var(--ivory); color:var(--obsidian); font-size:13.5px; font-weight:500; text-decoration:none; }
.route svg { width:18px; height:18px; flex:none; }
.route a:hover { background:var(--brass-hi); }
.route a:focus-visible { outline-color:var(--obsidian); outline-offset:-4px; }
.list .empty { display:block; padding:34px 28px; color:var(--mute); font-size:14px; border:0; }
.list .empty button { display:inline; color:var(--brass); text-decoration:underline; text-underline-offset:4px; }

.stage { grid-area:stage; position:relative; background:#0d0d0e; min-width:0; }
#map { position:absolute; inset:0; direction:ltr; background:#0d0d0e; font-family:var(--font); }
#map.dark .leaflet-tile-pane { filter:brightness(1.18) contrast(1.05) sepia(.18) saturate(.85); }
.map-error { position:absolute; inset:0; display:grid; place-items:center; padding:30px; text-align:center; color:var(--mute); }

.layers { position:absolute; z-index:500; inset-block-start:16px; inset-inline-end:16px; display:flex; background:rgba(10,10,11,.88); border:1px solid var(--line); padding:3px;
          -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.layers button { padding:7px 12px; font-size:12.5px; color:var(--mute); }
.layers button:hover { color:var(--ivory); }
.layers button[aria-pressed="true"] { background:var(--ivory); color:var(--obsidian); font-weight:500; }

.actions { position:absolute; z-index:500; inset-block-start:16px; inset-inline-start:16px; display:flex; gap:8px; }
.actions button { display:inline-flex; align-items:center; gap:9px; background:rgba(10,10,11,.88); border:1px solid var(--line); color:var(--ivory); padding:10px 15px; font-size:12.5px; font-weight:400; white-space:nowrap;
                  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .25s, background .25s; }
.actions svg { width:15px; height:15px; flex:none; color:var(--brass); }
.actions button:hover { border-color:var(--brass); }
.actions button[aria-pressed="true"] { background:var(--ivory); color:var(--obsidian); border-color:var(--ivory); }
.actions button[aria-pressed="true"] svg { color:var(--obsidian); }
.actions button:disabled { opacity:.75; cursor:progress; }

.leaflet-container a { color:inherit; }
.leaflet-bar { border:0 !important; border-radius:0; overflow:hidden; box-shadow:none !important; }
.leaflet-bar a, .leaflet-bar a:hover { background:rgba(10,10,11,.9); color:var(--ivory); border-bottom-color:var(--line); width:38px; height:38px; line-height:38px; font-weight:300; }
.leaflet-bar a:hover { background:var(--graphite); color:var(--brass-hi); }
.leaflet-bar a.leaflet-disabled { color:#555; }
.leaflet-control-attribution { background:rgba(10,10,11,.72) !important; color:#9a958b !important; font-size:10px; }

.pin-wrap { overflow:visible; }
.pin { position:absolute; top:0; left:var(--dx,0px); }
.dot { position:absolute; left:-6px; top:-6px; width:12px; height:12px; transform:rotate(45deg); background:var(--c); border:2px solid var(--obsidian); box-shadow:0 0 0 1px rgba(242,236,225,.85); }
.dot::before { content:""; position:absolute; inset:-14px; }
.stem { position:absolute; left:-.5px; bottom:7px; width:1px; height:var(--h); background:rgba(242,236,225,.85); }
.tag { position:absolute; left:calc(var(--dx,0px) * -1); bottom:calc(var(--h) + 7px + var(--lift,0px)); transform:translateX(-50%);
       background:rgba(10,10,11,.92); color:var(--ivory); direction:rtl; white-space:nowrap;
       font:400 12.5px/1 var(--ar); padding:7px 10px 6px; border-bottom:2px solid var(--c); letter-spacing:.01em; }
.pin.compact .tag, .pin.compact .stem, .pin.stacked .stem { display:none; }
.pin-wrap:hover { z-index:9000 !important; }
.pin-wrap:hover .tag, .pin.sel .tag { background:var(--ivory); color:var(--obsidian); }
.pin.sel .dot::after { content:""; position:absolute; inset:-8px; border:1px solid var(--brass-hi); animation:ping 1.8s ease-out infinite; }
.pin-wrap:focus-visible { outline:none; }
.pin-wrap:focus-visible .dot { outline:2px solid var(--brass-hi); outline-offset:4px; }
@keyframes ping { from { transform:scale(.5); opacity:1; } to { transform:scale(1.9); opacity:0; } }
#map.intro .pin { animation:rise .55s var(--ease) both; animation-delay:calc(900ms + var(--i) * 45ms); }
@keyframes rise { from { opacity:0; transform:translateY(-14px); } }
.me { position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--brass-hi); border:4px solid var(--obsidian); box-shadow:0 0 0 1.5px var(--brass-hi), 0 0 0 10px rgba(220,194,143,.14); }

.leaflet-tooltip.tip { background:rgba(10,10,11,.94); color:var(--ivory); border:1px solid var(--line); border-radius:0; padding:9px 13px; font:400 12.5px/1.55 var(--ar); text-align:start; box-shadow:none; }
.leaflet-tooltip.tip b { font-weight:500; }
.leaflet-tooltip.tip span { color:var(--mute); display:block; }
.leaflet-tooltip-top.tip::before { border-top-color:rgba(10,10,11,.94); }

.sc-pop .leaflet-popup-content-wrapper { background:var(--obsidian); color:var(--ivory); border-radius:0; border:1px solid var(--line-2); box-shadow:0 24px 60px rgba(0,0,0,.65); }
.sc-pop .leaflet-popup-tip { background:var(--obsidian); box-shadow:none; border:1px solid var(--line-2); }
.sc-pop .leaflet-popup-content { margin:20px 20px 18px; min-width:220px; font-family:var(--font); text-align:start; }
.sc-pop a.leaflet-popup-close-button { color:var(--mute); top:6px; width:30px; height:30px; font-size:22px; font-weight:200; background:rgba(10,10,11,.6); border-radius:50%; }
[dir="rtl"] .sc-pop a.leaflet-popup-close-button { left:6px; right:auto; }
.sc-pop a.leaflet-popup-close-button:hover { color:var(--ivory); }
.pop-img { display:block; width:calc(100% + 40px); max-width:none; margin:-20px -20px 16px; aspect-ratio:16/9; object-fit:cover; background:var(--graphite); }
.pop .eyebrow { margin-bottom:8px; }
.pop h2 { margin:0 0 4px; padding-inline-end:24px; font-size:21px; font-weight:300; line-height:1.3; }
.pop p { margin:0 0 14px; font-size:13.5px; color:var(--ivory-2); }
.pop .track { margin:0 0 8px; }
.pop .track i { flex:1; width:auto; height:2px; }
.pop-phase { display:block; margin:0 0 16px; font-size:12px; color:var(--mute); }
.pop .btn { width:100%; min-height:44px; padding:0 14px; font-size:13.5px; gap:8px; color:var(--obsidian) !important; }
.pop .btn svg { width:16px; height:16px; }
.pop .btn.ghost { margin-top:8px; color:var(--ivory) !important; }
.pop .pop-row { display:flex; gap:8px; }
.pop .pop-row .btn { margin-top:8px; }

.toast { position:fixed; z-index:1600; left:50%; bottom:calc(30px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:min(calc(100% - 28px), 480px);
         background:var(--ivory); color:var(--obsidian); padding:12px 18px; font-size:13.5px; font-weight:400; text-align:center; overflow-wrap:anywhere; box-shadow:0 14px 40px rgba(0,0,0,.5); }

/* ---------- detail ---------- */
.detail { position:absolute; z-index:700; inset-block:0; inset-inline-end:0; width:min(460px, 100%); background:var(--obsidian); border-inline-start:1px solid var(--line-2);
          display:flex; flex-direction:column; transform:translateX(-102%); transition:transform .7s var(--ease-io), visibility 0s linear .7s; visibility:hidden; box-shadow:0 0 80px rgba(0,0,0,.6); }
[dir="ltr"] .detail { transform:translateX(102%); }
.detail.open { transform:none; visibility:visible; transition:transform .7s var(--ease-io), visibility 0s; }
.detail-scroll { flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.detail-close { position:absolute; z-index:3; inset-block-start:14px; inset-inline-end:14px; width:42px; height:42px; display:grid; place-items:center; background:rgba(10,10,11,.7);
                border:1px solid var(--line-2); color:var(--ivory); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.detail-close:hover { border-color:var(--brass); color:var(--brass-hi); }
.detail-close svg { width:18px; height:18px; }
.media { position:relative; aspect-ratio:4/3; background:var(--onyx); overflow:hidden; }
.media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.aerial { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3, 1fr); width:150%; height:150%; left:-25%; top:-25%; transform:translate(var(--ox), var(--oy)); filter:saturate(.75) contrast(1.05) brightness(.9); }
.aerial img { position:static; width:100%; height:100%; object-fit:cover; display:block; }
.media .reticle { position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%, -50%); border:1px solid var(--brass-hi); }
.media .reticle::before, .media .reticle::after { content:""; position:absolute; background:var(--brass-hi); }
.media .reticle::before { left:50%; top:-14px; bottom:-14px; width:1px; }
.media .reticle::after { top:50%; left:-14px; right:-14px; height:1px; }
.media figcaption { position:absolute; inset-inline:0; inset-block-end:0; padding:30px 20px 12px; font-size:11px; color:rgba(242,236,225,.78);
                    background:linear-gradient(to top, rgba(10,10,11,.85), transparent); }
.media .plate-fallback { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:80px; font-weight:300; color:var(--brass); letter-spacing:.04em;
                         background:repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px); }
.gallery { display:flex; gap:2px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery::-webkit-scrollbar { display:none; }
.gallery figure { flex:0 0 100%; margin:0; scroll-snap-align:start; position:relative; aspect-ratio:4/3; }
.gallery img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery figcaption { position:absolute; inset-inline:0; bottom:0; padding:30px 20px 12px; font-size:12px; background:linear-gradient(to top, rgba(10,10,11,.85), transparent); }
.gallery-dots { position:absolute; inset-block-end:12px; inset-inline-end:16px; display:flex; gap:5px; }
.gallery-dots i { width:16px; height:1px; background:rgba(242,236,225,.4); }
.gallery-dots i.on { background:var(--ivory); }
.detail-body { padding:28px 30px 0; }
.detail h2 { margin:10px 0 0; font-size:34px; font-weight:200; line-height:1.2; }
[dir="ltr"] .detail h2 { font-family:var(--serif); font-weight:300; font-size:40px; line-height:1.05; }
.detail-status { margin:14px 0 0; font-size:16px; color:var(--ivory-2); line-height:1.75; }
.steps { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); }
.steps li { position:relative; padding-top:18px; padding-inline-end:8px; font-size:11px; color:var(--mute-2); line-height:1.45; overflow-wrap:anywhere; }
.steps li::before { content:""; position:absolute; inset-block-start:5px; inset-inline:0; height:1px; background:var(--smoke); }
.steps li::after { content:""; position:absolute; inset-block-start:1px; inset-inline-start:0; width:9px; height:9px; transform:rotate(45deg); background:var(--obsidian); border:1px solid var(--smoke); }
.steps li.past { color:var(--ivory-2); }
.steps li.past::before, .steps li.now::before { background:var(--brass); }
.steps li.past::after { background:var(--brass); border-color:var(--brass); }
.steps li.now { color:var(--ivory); font-weight:500; }
.steps li.now::after { background:var(--ivory); border-color:var(--ivory); box-shadow:0 0 0 4px rgba(242,236,225,.12); }
.facts { margin:30px 0 0; display:grid; grid-template-columns:auto 1fr; border-top:1px solid var(--line); }
.facts dt, .facts dd { margin:0; padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.facts dt { color:var(--mute); padding-inline-end:24px; }
.facts dd { text-align:end; }
.facts dd.ltr { direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; }
.block { margin-top:34px; }
.block h3 { margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.block h3:lang(ar) { letter-spacing:0; font-size:13px; }
.timeline { list-style:none; margin:0; padding:0; border-inline-start:1px solid var(--line-2); }
.timeline li { position:relative; padding:0 0 18px; padding-inline-start:22px; }
.timeline li::before { content:""; position:absolute; inset-inline-start:-4px; top:7px; width:7px; height:7px; transform:rotate(45deg); background:var(--brass); }
.timeline time { display:block; font-size:12px; color:var(--brass); direction:ltr; unicode-bidi:isolate; text-align:start; }
.timeline span { font-size:14px; }
.compare { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--onyx); user-select:none; touch-action:pan-y; }
.compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.compare .after { clip-path:inset(0 0 0 var(--cut, 50%)); }
.compare .handle { position:absolute; top:0; bottom:0; left:var(--cut, 50%); width:1px; background:var(--ivory); pointer-events:none; }
.compare .handle::after { content:""; position:absolute; top:50%; left:-17px; width:34px; height:34px; transform:translateY(-50%) rotate(45deg); border:1px solid var(--ivory); background:rgba(10,10,11,.6); }
.compare input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; direction:ltr; }
.compare .lbl { position:absolute; top:12px; font-size:11px; padding:4px 8px; background:rgba(10,10,11,.75); direction:ltr; }
.compare .lbl.b { left:12px; } .compare .lbl.a { right:12px; }
.detail-actions { display:grid; gap:10px; margin-top:34px; }
.detail-actions .pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---------- enquiry dialog ---------- */
.enquire { width:min(620px, calc(100% - 24px)); max-height:calc(100% - 24px); padding:0; border:1px solid var(--line-2); background:var(--obsidian); color:var(--ivory); overflow:auto; }
.enquire::backdrop { background:rgba(5,5,6,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.enquire[open] { animation:dlg-in .55s var(--ease) both; }
@keyframes dlg-in { from { opacity:0; transform:translateY(18px); } }
.enquire form { padding:40px clamp(22px, 5vw, 48px) 36px; }
.enquire h2 { margin:12px 0 0; font-size:32px; font-weight:200; line-height:1.2; }
[dir="ltr"] .enquire h2 { font-family:var(--serif); font-weight:300; font-size:40px; }
.enquire .lede { margin-top:12px; font-size:15px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; margin-top:32px; }
.fields .full { grid-column:1 / -1; }
.field { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--mute); }
.field input, .field select, .field textarea { width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-2); border-radius:0; padding:10px 0; font-size:16px; color:var(--ivory); }
.field select { -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(-45deg, transparent 50%, var(--mute) 50%);
                background-size:5px 5px; background-repeat:no-repeat; background-position:left 4px center, left 9px center; }
[dir="ltr"] .field select { background-position:right 9px center, right 4px center; }
.field select option { background:var(--onyx); }
.field textarea { resize:vertical; min-height:80px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-bottom-color:var(--brass); }
.field input[aria-invalid="true"] { border-bottom-color:#d07a5e; }
.field .err { color:#e09a80; font-size:12px; }
.enquire .note { margin:26px 0 0; font-size:12.5px; color:var(--mute); line-height:1.7; }
.enquire .note.warn { color:var(--brass); }
.enquire .sends { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.enquire .x { position:absolute; inset-block-start:14px; inset-inline-end:14px; width:40px; height:40px; display:grid; place-items:center; color:var(--mute); }
.enquire .x:hover { color:var(--ivory); }
.enquire .x svg { width:18px; height:18px; }

.offline { position:fixed; z-index:3500; inset-inline:0; inset-block-end:0; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--brass); color:var(--obsidian); font-size:13px; text-align:center; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .phases { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .phases li:nth-child(4) { border-inline-start:0; }
  .phases li:nth-child(n+4) { border-top:1px solid var(--line); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; grid-template-rows:1fr auto; align-content:stretch; padding-top:calc(var(--top-h) + 24px); padding-bottom:28px; }
  .hero-copy { align-self:center; }
  .plate { position:absolute; inset:0; min-height:0; opacity:.28; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 4%, #000 30%, #000 62%, transparent 92%); mask-image:linear-gradient(to bottom, transparent 4%, #000 30%, #000 62%, transparent 92%); }
  .plate .survey { max-height:none; }
  .hero-copy { margin-top:clamp(20px, 8vh, 80px); }
  .stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(3) { padding-inline-start:0; border-inline-start:0; }
  .stats div:nth-child(n+3) { border-top:1px solid var(--line); margin-top:16px; }
  .section-head, .contact { grid-template-columns:1fr; }
  .index { columns:1; }
}
@media (max-width: 820px) {
  :root { --top-h:62px; }
  .top-nav button:not(.lang):not([data-open-contact]) { display:none; }
  .top-logo img { height:26px; }
  .explorer { display:block; }
  .brand { position:fixed; z-index:1200; inset-block-start:0; inset-inline:0; height:calc(var(--bar-h) + env(safe-area-inset-top));
           padding:env(safe-area-inset-top) 12px 0; background:var(--obsidian); border-bottom:1px solid var(--line); border-inline-end:0;
           display:flex; align-items:center; }
  .brand-bar { flex:1; }
  .brand-bar img { height:22px; }
  .brand h2, .brand p { display:none; }
  .stage { position:fixed; inset-inline:0; top:calc(var(--bar-h) + env(safe-area-inset-top)); bottom:calc(var(--peek) + env(safe-area-inset-bottom)); }
  .panel { position:fixed; z-index:1100; inset-inline:0; bottom:0; height:min(78vh, 680px); height:min(78dvh, 680px); border-inline-end:0;
           padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line-2);
           transform:translateY(calc(100% - var(--peek) - env(safe-area-inset-bottom))); transition:transform .5s var(--ease); }
  .panel.open { transform:none; box-shadow:0 -24px 70px rgba(0,0,0,.75); }
  .sheet-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; height:54px; padding:0 18px; font-size:15px; font-weight:400; flex:none; position:relative; }
  .sheet-toggle::before { content:""; position:absolute; top:7px; left:50%; width:36px; height:3px; margin-left:-18px; background:var(--smoke); border-radius:2px; }
  .sheet-toggle span { display:flex; align-items:center; gap:10px; }
  .sheet-toggle em { font-style:normal; font-size:12.5px; color:var(--mute); }
  .sheet-toggle svg { width:20px; height:20px; transition:transform .4s var(--ease); color:var(--brass); }
  .panel.open .sheet-toggle svg { transform:rotate(180deg); }
  .search { margin:0 16px; }
  .search input { font-size:16px; }
  .chips { flex-wrap:nowrap; overflow-x:auto; padding:12px 16px 14px; flex:none; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { padding:9px 12px; }
  .mix { margin:0 16px 0; order:-1; height:2px; }
  .row { padding-inline:16px 4px; }
  .panel:not(.open) .list { visibility:hidden; }
  .route a { padding:15px 16px; }
  .layers { inset-block-start:10px; inset-inline-end:10px; }
  .leaflet-control-zoom { display:none; }
  .actions { inset-block-start:auto; inset-block-end:24px; inset-inline-start:10px; flex-direction:column; align-items:flex-start; }
  .toast { bottom:auto; top:calc(70px + env(safe-area-inset-top)); }
  .stage.popup-open .actions { opacity:0; pointer-events:none; }
  .actions { transition:opacity .3s; }
  .pop-phase, .pop .track { display:none; }
  .sc-pop .leaflet-popup-content { margin:16px 16px 14px; min-width:200px; }
  .pop h2 { font-size:19px; }
  .pop .btn { min-height:42px; }
  .detail { position:fixed; z-index:1300; inset:0; width:auto; border:0; transform:translateY(102%) !important; transition:transform .65s var(--ease-io), visibility 0s linear .65s; }
  .detail.open { transform:none !important; transition:transform .65s var(--ease-io), visibility 0s; }
  .detail-close { inset-block-start:calc(12px + env(safe-area-inset-top)); }
  .detail-body { padding:24px 20px 0; }
  .detail h2 { font-size:30px; }
  .fields { grid-template-columns:1fr; }
  .enquire { width:100%; max-width:none; height:100%; max-height:none; margin:0; border:0; }
  .enquire form { padding-top:calc(56px + env(safe-area-inset-top)); padding-bottom:calc(36px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .phases { grid-template-columns:1fr; }
  .phases li + li { border-inline-start:0; border-top:1px solid var(--line); }
  .phases button { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"num title count" "num desc count"; column-gap:18px; row-gap:4px; padding:22px 0; }
  .phases .num { grid-area:num; }
  .phases h3 { grid-area:title; font-size:17px; }
  .phases p { grid-area:desc; }
  .phases .count { grid-area:count; margin:0; flex-direction:column; align-items:flex-end; gap:0; }
  .phases .count b { font-size:30px; }
  .hero-cta .btn { flex:1 1 100%; }
  .stats dd { font-size:30px; }
  .foot nav { margin-inline-start:0; width:100%; }
}
@media (max-width: 900px) and (max-height: 760px) {
  .hero { padding-top:calc(var(--top-h) + 8px); }
  .hero-copy { margin-top:8px; }
  .hero h1 { font-size:clamp(32px, 9vw, 40px); margin-top:14px; }
  [dir="ltr"] .hero h1 { font-size:clamp(36px, 10vw, 44px); }
  .lede { margin-top:16px; font-size:15px; line-height:1.65; }
  .hero-cta { margin-top:24px; gap:10px; }
  .hero-cta .btn { min-height:48px; }
  .stats { margin-top:18px; }
  .stats div { padding-top:12px; }
  .stats div:nth-child(n+3) { margin-top:10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .intro-cover { display:none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .survey .grid line, .survey .grid text, .survey .site { animation:none; opacity:1; stroke-dashoffset:0; }
  .survey .site circle.halo { animation:none; display:none; }
  #map.intro .pin, .pin.sel .dot::after { animation:none; }
  .explorer, body[data-view="explore"] .explorer, .detail, .detail.open, .panel, .sheet-toggle svg, .mix span, .enquire[open], .actions, .top { transition:none !important; animation:none !important; }
}
@media print {
  .top, .explorer, .intro-cover, .hero-cta, .plate { display:none !important; }
  body { background:#fff; color:#000; }
}

/* ---------- Phase 3: covers, gallery, fullscreen viewer, preview ---------- */
.media.cover { margin:0; background:var(--onyx); max-height:min(70vh, 640px); }
.cover-btn { position:absolute; inset:0; display:block; width:100%; height:100%; cursor:zoom-in; }
.cover-btn img { width:100%; height:100%; object-fit:cover; }
.cover-btn .count { position:absolute; inset-block-end:14px; inset-inline-end:14px; padding:7px 12px; font-size:12px; background:rgba(10,10,11,.72); border:1px solid var(--line-2);
                    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.no-photos { margin:22px 0 0; padding:12px 14px; border-inline-start:2px solid var(--brass-lo); background:var(--onyx); font-size:13px; color:var(--ivory-2); line-height:1.7; }
.block h3 .n { color:var(--mute); font-weight:400; margin-inline-start:6px; }
.cats { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 12px; }
.cats::-webkit-scrollbar { display:none; }
.cats button { flex:none; padding:7px 12px; font-size:12.5px; border:1px solid var(--line); color:var(--ivory-2); }
.cats button[aria-pressed="true"] { background:var(--ivory); color:var(--obsidian); border-color:var(--ivory); }
.thumbs { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; }
.thumbs li[hidden] { display:none; }
.thumbs button { display:block; width:100%; aspect-ratio:1; overflow:hidden; background:var(--onyx); cursor:zoom-in; }
.thumbs img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.thumbs button:hover img { transform:scale(1.04); }
.pf-thumb { width:44px; height:44px; object-fit:cover; background:var(--onyx); }

.viewer { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#050506; color:var(--ivory); overflow:hidden; }
.viewer::backdrop { background:#050506; }
.viewer[open] { display:grid; grid-template-rows:auto 1fr; animation:fade-in .35s var(--ease); }
@keyframes fade-in { from { opacity:0; } }
.viewer-bar { display:flex; align-items:center; gap:16px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; z-index:2; }
.viewer-bar p { margin:0; flex:1; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-bar span { font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums; direction:ltr; }
.viewer-bar button { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-2); }
.viewer-bar button svg { width:18px; height:18px; }
.viewer-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; min-height:0; }
.viewer-track::-webkit-scrollbar { display:none; }
.viewer-track figure { flex:0 0 100%; margin:0; scroll-snap-align:center; display:grid; grid-template-rows:1fr auto; min-height:0; }
.viewer-track img { width:100%; height:100%; min-height:0; object-fit:contain; touch-action:pan-x pinch-zoom; }
.viewer-track figcaption { padding:12px 18px calc(14px + env(safe-area-inset-bottom)); font-size:13px; color:var(--ivory-2); text-align:center; min-height:44px; }
.viewer-nav { position:absolute; top:50%; width:52px; height:52px; display:grid; place-items:center; transform:translateY(-50%); background:rgba(10,10,11,.6); border:1px solid var(--line-2); z-index:2; }
.viewer-nav svg { width:22px; height:22px; }
.viewer-nav.prev { inset-inline-start:16px; } .viewer-nav.next { inset-inline-end:16px; }
[dir="rtl"] .viewer-nav svg { transform:scaleX(-1); }
.viewer-nav:hover { border-color:var(--brass); color:var(--brass-hi); }

.preview-bar { position:fixed; z-index:3600; inset-inline:0; inset-block-start:0; padding:calc(8px + env(safe-area-inset-top)) 16px 8px; background:var(--brass); color:var(--obsidian); font-size:13px; text-align:center; }
.preview-bar a { color:var(--obsidian); font-weight:500; margin-inline-start:10px; }
body:has(.preview-bar:not([hidden])) .top { top:36px; }

@media (max-width: 820px) {
  .viewer-nav { display:none; }
  .thumbs { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .viewer[open] { animation:none; } .thumbs img { transition:none; } }

/* ---------- Final QA: basemaps, private locations ---------- */
.leaflet-tile.tiles-dark, .tiles-dark .leaflet-tile { filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35); }
#map .maplibregl-canvas, #map .leaflet-gl-layer { outline:none; }
.pin.area .tag { bottom:auto; top:-15px; border-bottom-style:dashed; background:rgba(10,10,11,.78); }
.pin.area .tag::before { content:none; }
.pop-note { margin:10px 0 0; font-size:12.5px; color:var(--ivory-2, #b9b2a5); line-height:1.6; }
#list .go.off { visibility:hidden; }

/* ---------- Final QA: architectural portfolio gallery ---------- */
@media (min-width: 821px) { .detail { width:min(560px, 100%); } }
.media.cover { max-height:min(72vh, 680px); }
.cover-btn::after { content:""; position:absolute; inset:auto 0 0; height:46%; background:linear-gradient(to top, rgba(5,5,6,.78), rgba(5,5,6,0)); pointer-events:none; }
.cover-btn img { transition:transform 1.2s var(--ease); }
.cover-btn:hover img { transform:scale(1.025); }
.cover-meta { position:absolute; z-index:1; inset-block-end:14px; inset-inline-start:16px; display:flex; gap:6px; flex-wrap:wrap; }
.cover-btn .count { z-index:1; }
.badge { display:inline-block; padding:5px 9px 4px; font-size:11px; letter-spacing:.04em; line-height:1.2; color:var(--ivory); background:rgba(10,10,11,.66);
         border:1px solid rgba(242,236,225,.22); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); white-space:nowrap; }
.badge.render { color:#0a0a0b; background:#cfd8de; border-color:#cfd8de; }
.badge.real { color:var(--brass-hi); border-color:rgba(194,163,107,.45); }

.portfolio h3 { display:flex; align-items:baseline; }
.cats button span { color:var(--mute); margin-inline-start:4px; font-variant-numeric:tabular-nums; }
.cats button[aria-pressed="true"] span { color:rgba(10,10,11,.55); }
.thumbs.mosaic { grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:clamp(46px, 5.2vw, 70px); grid-auto-flow:row dense; gap:6px; }
.thumbs.mosaic li { position:relative; min-width:0; }
.thumbs.mosaic li.w-f { grid-column:span 6; grid-row:span 4; }
.thumbs.mosaic li.w-l { grid-column:span 3; grid-row:span 2; }
.thumbs.mosaic li.w-p { grid-column:span 2; grid-row:span 3; }
.thumbs.mosaic li.w-s { grid-column:span 2; grid-row:span 2; }
.thumbs.mosaic button { aspect-ratio:auto; height:100%; position:relative; }
.thumbs.mosaic img { position:absolute; inset:0; }
.thumbs.mosaic .badge { position:absolute; inset-block-start:8px; inset-inline-start:8px; font-size:10px; padding:3px 7px; }
.tile-cap { position:absolute; inset:auto 0 0; padding:18px 10px 8px; font-size:11px; color:var(--ivory); text-align:start; letter-spacing:.03em;
            background:linear-gradient(to top, rgba(5,5,6,.72), rgba(5,5,6,0)); opacity:0; transition:opacity .35s var(--ease); }
.thumbs.mosaic button:hover .tile-cap, .thumbs.mosaic button:focus-visible .tile-cap { opacity:1; }
.thumbs.mosaic button:focus-visible { outline:2px solid var(--brass-hi); outline-offset:2px; }

.pop-media { position:relative; }
.pop-media .badge { position:absolute; top:-10px; inset-inline-start:-8px; font-size:10px; }

.viewer[open] { grid-template-rows:auto 1fr auto; }
.viewer-track figcaption { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 12px; }
.viewer-track figcaption .badge { font-size:10.5px; }
.viewer-strip { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:0 16px calc(12px + env(safe-area-inset-bottom)); justify-content:safe center; }
.viewer-strip:empty { display:none; }
.viewer-strip::-webkit-scrollbar { display:none; }
.viewer-strip button { flex:none; width:58px; height:42px; padding:0; border:1px solid transparent; opacity:.5; transition:opacity .25s, border-color .25s; }
.viewer-strip button[aria-current="true"] { opacity:1; border-color:var(--brass); }
.viewer-strip img { width:100%; height:100%; object-fit:cover; display:block; }
.viewer:has(.viewer-strip:not(:empty)) .viewer-track figcaption { padding-bottom:10px; }

@media (max-width: 820px) {
  .thumbs.mosaic { grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:clamp(52px, 15vw, 84px); gap:5px; }
  .thumbs.mosaic li.w-f { grid-column:span 4; grid-row:span 3; }
  .thumbs.mosaic li.w-l { grid-column:span 2; grid-row:span 2; }
  .thumbs.mosaic li.w-p { grid-column:span 2; grid-row:span 3; }
  .thumbs.mosaic li.w-s { grid-column:span 2; grid-row:span 2; }
  .tile-cap { opacity:1; padding:14px 8px 6px; font-size:10.5px; }
  .cover-meta { inset-inline-start:12px; inset-block-end:12px; }
  .viewer-strip button { width:50px; height:36px; }
}
@media (prefers-reduced-motion: reduce) { .cover-btn img, .tile-cap { transition:none; } }

/* ======================================================================================================
   THE WOW EXPERIENCE — architectural portfolio. Imagery leads: published photography first, then real aerial
   imagery of public sites (labelled), then an honest typographic plate. Nothing is invented.
   ====================================================================================================== */
:root { --champ:#cbb27f; --hair:rgba(242,236,225,.08); }

/* shared: square aerial tile layer centred on the site, whatever the frame's proportions */
.cqs { container-type:size; }
.aer { position:absolute; width:150%; height:150%; left:-25%; top:-25%; display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr);
       transform:translate(var(--ox), var(--oy)); transition:transform 1.6s var(--ease), filter 1s var(--ease); }
@supports (width:1cqmax) { .aer { width:150cqmax; height:150cqmax; left:calc(50% - 75cqmax); top:calc(50% - 75cqmax); } }
.aer img { display:block; width:calc(100% + 1px); height:calc(100% + 1px); max-width:none; object-fit:cover; }   /* +1px: no hairline seams between tiles */

/* honest placeholder plate: the reference, the construction phase, and the fact that photography is coming */
.ph { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:16px; padding:24px; text-align:center;
      background:linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 32px 32px,
                 radial-gradient(ellipse at 50% 40%, #17171a, #0d0d0f 70%); }
.ph::before { content:""; position:absolute; inset:14px; border:1px solid var(--line); pointer-events:none; }
.ph::after { content:""; position:absolute; inset-block-start:14px; inset-inline-start:14px; width:28px; height:1px; background:var(--c, var(--brass)); }
.ph-code { font-family:var(--serif); font-weight:300; font-size:clamp(40px, 5vw, 64px); line-height:1; color:var(--ivory); letter-spacing:.02em; direction:rtl; }
.ph-steps { display:flex; gap:4px; }
.ph-steps i { width:18px; height:2px; background:var(--smoke); }
.ph-steps i.on { background:var(--c, var(--brass)); }
.ph-note { font-size:11.5px; color:var(--mute); letter-spacing:.06em; }
.badge.quiet { color:var(--ivory-2); background:rgba(10,10,11,.55); border-color:rgba(242,236,225,.16); font-size:10.5px; }

/* buttons: a quiet text link alongside the two main actions */
.link { padding:12px 4px; font-size:14px; color:var(--ivory-2); border-bottom:1px solid var(--line-2); }
.link:hover { color:var(--brass-hi); border-color:var(--brass); }

/* ---------- hero ---------- */
.hero { display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; grid-template-columns:none; min-height:100vh; min-height:100svh;
        padding:calc(var(--top-h) + 48px) var(--pad) 28px; isolation:isolate; }
.hero::before { display:none; }
.hero-media { position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--obsidian); }
.hm-slide { position:absolute; inset:0; opacity:0; transition:opacity 2.6s ease; container-type:size; }
.hm-slide.on { opacity:1; }
.hm-slide .hm-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-aerial .hm-slide .aer { filter:grayscale(1) sepia(.22) contrast(1.12) brightness(.5); }
.hm-slide.on .aer, .hm-slide.on .hm-img { animation:drift 22s ease-out both; }
@keyframes drift { from { scale:1.12; } to { scale:1; } }
.hero-media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--obsidian) 2%, rgba(10,10,11,.78) 34%, rgba(10,10,11,.3) 66%, rgba(10,10,11,.62) 100%); }
.hero-lines { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background:linear-gradient(90deg, transparent calc(var(--pad) - 1px), var(--hair) var(--pad), transparent calc(var(--pad) + 1px)),
             linear-gradient(-90deg, transparent calc(var(--pad) - 1px), var(--hair) var(--pad), transparent calc(var(--pad) + 1px)); }
.hero-copy { max-width:1100px; margin:0; }
.hero h1 { font-size:clamp(44px, 7.4vw, 118px); line-height:1.08; font-weight:200; margin-top:20px; }
[dir="ltr"] .hero h1 { font-size:clamp(50px, 8.2vw, 132px); line-height:.98; }
.hero .lede { max-width:600px; font-size:clamp(16px, 1.4vw, 19px); }
.hero-cta { align-items:center; gap:14px 18px; margin-top:38px; }
.hero-credit { position:relative; margin:22px 0 0; font-size:11px; color:var(--mute); letter-spacing:.02em; display:flex; align-items:center; gap:8px; }
.hero .stats { margin-top:clamp(28px, 5vh, 56px); }

/* ---------- selected work rail ---------- */
.featured { padding-inline:0; }
.featured .section-head { padding-inline:var(--pad); }
.rail { list-style:none; margin:0; padding:0 var(--pad) 8px; display:grid; grid-auto-flow:column; grid-auto-columns:clamp(270px, 31vw, 440px); gap:clamp(16px, 2vw, 28px);
        overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); scrollbar-width:none; overscroll-behavior-x:contain; }
.rail::-webkit-scrollbar { display:none; }
.rail li { scroll-snap-align:start; }
.rail .cv-media { aspect-ratio:3/4; }
.cv-n { position:absolute; z-index:2; inset-block-end:14px; inset-inline-end:16px; font-family:var(--serif); font-size:15px; color:var(--ivory-2); letter-spacing:.08em; }

/* ---------- portfolio covers ---------- */
.pf-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-bottom:clamp(28px, 4vw, 48px);
          padding-bottom:18px; border-bottom:1px solid var(--line); }
.pf-filters { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pf-filters button { white-space:nowrap; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; font-size:13.5px; color:var(--ivory-2); border:1px solid transparent; }
.pf-filters button i { width:7px; height:7px; transform:rotate(45deg); background:var(--c); }
.pf-filters button b { font-weight:400; color:var(--mute); font-variant-numeric:lining-nums; }
.pf-filters button:hover { color:var(--ivory); }
.pf-filters button[aria-pressed="true"] { color:var(--ivory); border-color:var(--line-2); }
.pf-search { position:relative; width:min(320px, 100%); }
.pf-search svg { position:absolute; inset-inline-start:0; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--mute); }
.pf-search input { width:100%; padding:10px 0; padding-inline-start:28px; background:none; border:0; border-bottom:1px solid var(--line-2); color:var(--ivory); font-size:15px; outline:none; border-radius:0; }
.pf-search input:focus { border-color:var(--brass); }
.pf-empty { margin:32px 0 0; color:var(--mute); }
.pf-empty button { color:var(--brass-hi); text-decoration:underline; }

.covers { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(36px, 4vw, 64px) clamp(16px, 2vw, 32px); }
.covers li[hidden] { display:none; }
.pcard { display:block; color:inherit; text-decoration:none; }
.cv-media { position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--onyx); container-type:size; }
.cv-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.cv-media::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(242,236,225,.06);
                   background:linear-gradient(to top, rgba(10,10,11,.45), transparent 40%); }
.k-aerial .aer { filter:grayscale(.9) sepia(.15) contrast(1.08) brightness(.66); }
.pcard:hover .k-aerial .aer, .pcard:focus-visible .k-aerial .aer { filter:grayscale(.15) contrast(1.05) brightness(.85); }
.pcard:hover .cv-media > img { transform:scale(1.035); }
.cv-media .badge { position:absolute; z-index:2; inset-block-start:12px; inset-inline-start:12px; }
.cv-meta { padding-top:18px; }
.cv-phase { margin:0; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--brass); }
.cv-phase i { width:6px; height:6px; transform:rotate(45deg); background:var(--c); }
.cv-phase span { color:var(--mute); font-variant-numeric:lining-nums; }
.pcard h3 { margin:8px 0 6px; font-size:clamp(20px, 1.8vw, 25px); font-weight:300; line-height:1.3; transition:color .3s; }
[dir="ltr"] .pcard h3 { font-family:var(--serif); font-weight:400; font-size:clamp(23px, 2vw, 29px); }
.pcard:hover h3 { color:var(--brass-hi); }
.cv-meta p:not(.cv-phase) { margin:0; font-size:13.5px; line-height:1.65; color:var(--mute); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard:focus-visible { outline:none; }
.pcard:focus-visible .cv-media { outline:2px solid var(--brass-hi); outline-offset:4px; }

/* ---------- story ---------- */
.manifesto { max-width:980px; margin-bottom:clamp(48px, 7vw, 96px); }
.manifesto h2 { margin:18px 0 0; font-weight:200; font-size:clamp(38px, 6vw, 92px); line-height:1.1; }
[dir="ltr"] .manifesto h2 { font-family:var(--serif); font-weight:300; line-height:1; font-size:clamp(44px, 6.6vw, 104px); }
.manifesto p:not(.eyebrow) { margin:26px 0 0; max-width:560px; color:var(--ivory-2); font-size:16px; line-height:1.85; }

/* ---------- map invitation ---------- */
.map-invite { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:48px clamp(32px, 6vw, 96px); align-items:center; }
.mi-copy h2 { margin:14px 0 0; font-weight:200; font-size:clamp(32px, 4.4vw, 60px); line-height:1.15; }
[dir="ltr"] .mi-copy h2 { font-family:var(--serif); font-weight:300; line-height:1.05; font-size:clamp(38px, 5vw, 70px); }
.mi-copy p:not(.eyebrow) { color:var(--ivory-2); line-height:1.8; max-width:460px; margin:20px 0 30px; }
.map-invite .plate { position:relative; inset:auto; opacity:1; min-height:min(60vh, 560px); pointer-events:auto; -webkit-mask-image:none; mask-image:none; }

/* ---------- project page ---------- */
.project { display:none; outline:none; }
body[data-view="project"] .project { display:block; }
body[data-view="project"] .home, body[data-view="project"] .top { display:none; }
.pj-bar { position:fixed; z-index:900; inset-block-start:0; inset-inline:0; height:calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--pad) 0;
          display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid transparent; transition:background .4s, border-color .4s; }
.pj-bar.solid { background:rgba(10,10,11,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.pj-back { justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; color:var(--ivory-2); }
.pj-back:hover { color:var(--ivory); }
.pj-back svg { width:18px; height:18px; }
.pj-logo img { display:block; height:24px; width:auto; }
.pj-bar .bar-lang { justify-self:end; }

.pj-hero { position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; padding:120px var(--pad) clamp(36px, 6vw, 84px); overflow:hidden; isolation:isolate; }
.pj-media { position:absolute; inset:0; z-index:-1; container-type:size; background:var(--onyx); }
.pj-media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--obsidian) 0%, rgba(10,10,11,.7) 32%, rgba(10,10,11,.12) 64%, rgba(10,10,11,.55) 100%); }
.pj-open { position:absolute; inset:0; width:100%; height:100%; cursor:zoom-in; }
.pj-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:drift 18s ease-out both; }
.pj-hero.k-aerial .aer { filter:grayscale(.55) sepia(.12) contrast(1.08) brightness(.62); animation:drift 22s ease-out both; }
.pj-hero .ph { inset:0; }
.pj-hero .ph-code { font-size:clamp(90px, 18vw, 240px); opacity:.16; }
.pj-hero .ph-steps, .pj-hero .ph-note { display:none; }
.pj-head { position:relative; max-width:1080px; }
.pj-head h1 { margin:16px 0 0; font-weight:200; font-size:clamp(46px, 8vw, 128px); line-height:1.05; }
[dir="ltr"] .pj-head h1 { font-family:var(--serif); font-weight:300; line-height:.98; font-size:clamp(52px, 9vw, 140px); }
.pj-status { margin:20px 0 0; max-width:640px; font-size:clamp(16px, 1.5vw, 20px); line-height:1.7; color:var(--ivory-2); }
.pj-note { margin:22px 0 0; font-size:11.5px; color:var(--mute); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pj-note:empty { display:none; }

.pj-wrap { max-width:1360px; margin:0 auto; padding:0 var(--pad) calc(48px + env(safe-area-inset-bottom)); }
.pj-sec { padding:clamp(56px, 8vw, 112px) 0; border-top:1px solid var(--line); }
.pj-sec:first-child { border-top:0; padding-top:clamp(24px, 4vw, 48px); }
.pj-sec > .eyebrow { margin-bottom:clamp(24px, 3vw, 40px); }
.pj-sec > .eyebrow .n { color:var(--mute); margin-inline-start:6px; }
.pj-facts { margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); border-top:1px solid var(--line-2); }
.pj-facts div { padding:18px 0 4px; padding-inline-end:20px; }
.pj-facts dt { font-size:12px; color:var(--mute); }
.pj-facts dd { margin:8px 0 0; font-size:clamp(17px, 1.5vw, 21px); font-weight:300; line-height:1.4; }
.pj-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); }
.pj-steps li { position:relative; padding:28px 0 0; padding-inline-end:20px; border-top:1px solid var(--smoke); color:var(--mute); }
.pj-steps li::before { content:""; position:absolute; inset-block-start:-5px; inset-inline-start:0; width:9px; height:9px; transform:rotate(45deg); background:var(--obsidian); border:1px solid var(--smoke); }
.pj-steps li.past { border-top-color:var(--brass-lo); color:var(--ivory-2); }
.pj-steps li.past::before { background:var(--brass); border-color:var(--brass); }
.pj-steps li.now { border-top:2px solid var(--brass); color:var(--ivory); }
.pj-steps li.now::before { inset-block-start:-6px; background:var(--ivory); border-color:var(--ivory); box-shadow:0 0 0 6px rgba(242,236,225,.1); }
.pj-steps .n { font-family:var(--serif); font-size:14px; color:var(--brass); letter-spacing:.08em; }
.pj-steps h3 { margin:10px 0 8px; font-size:19px; font-weight:400; color:inherit; }
.pj-steps p { margin:0; font-size:13px; line-height:1.7; color:var(--mute); }
.pj-steps em { display:inline-block; margin-top:14px; font-style:normal; font-size:11.5px; color:var(--mute); }
.pj-steps li.now em { color:var(--brass-hi); }
.pj-miles { margin-top:clamp(40px, 5vw, 64px); max-width:720px; }
.pj-miles h3 { margin:0 0 18px; font-size:13px; font-weight:500; color:var(--brass); }
.muted { color:var(--mute); }

.pj-gallery .thumbs.mosaic { --gap:10px; --col:calc((min(100vw - 2 * var(--pad), 1360px - 2 * var(--pad)) - 5 * var(--gap)) / 6);
                             gap:var(--gap); grid-auto-rows:var(--col); }
.pj-gallery .cats { margin-bottom:20px; }
.pj-gallery .compare { margin-top:clamp(32px, 4vw, 56px); max-width:960px; }
.pj-empty { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px 48px; align-items:center; }
.pj-empty .ph { position:relative; aspect-ratio:16/10; }
.pj-empty p { margin:0; max-width:460px; color:var(--ivory-2); line-height:1.85; }
.pj-loc { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px clamp(28px, 5vw, 72px); align-items:center; }
.pj-loc .media { aspect-ratio:4/3; }
.pj-loc .media .ph { inset:0; }
.pj-loc p { margin:0 0 26px; color:var(--ivory-2); line-height:1.8; max-width:460px; }
.pj-actions { display:flex; flex-wrap:wrap; gap:12px; }
.pj-cta { display:flex; justify-content:center; }
.covers.small { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.covers.small .cv-media { aspect-ratio:4/3; }

@media (max-width: 1100px) {
  .covers { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pj-steps { grid-template-columns:1fr; }
  .pj-steps li { display:grid; grid-template-columns:44px 1fr auto; column-gap:12px; padding:18px 0; padding-inline-start:24px; border-top:0; border-inline-start:1px solid var(--smoke); }
  .pj-steps li.past { border-inline-start-color:var(--brass-lo); }
  .pj-steps li.now { border-top:0; border-inline-start:2px solid var(--brass); }
  .pj-steps li::before { inset-block-start:24px; inset-inline-start:-5px; }
  .pj-steps li.now::before { inset-block-start:23px; inset-inline-start:-6px; }
  .pj-steps .n { grid-row:span 2; padding-top:3px; }
  .pj-steps h3 { margin:0 0 4px; font-size:17px; }
  .pj-steps em { grid-column:3; grid-row:1; margin:3px 0 0; }
  .pj-steps p { grid-column:2 / -1; }
}
@media (max-width: 900px) {
  .map-invite { grid-template-columns:1fr; }
  .map-invite .plate { min-height:420px; }
  .hero .plate { display:none; }
}
@media (max-width: 820px) {
  .pj-gallery .thumbs.mosaic { --gap:5px; --col:calc((100vw - 2 * var(--pad) - 3 * var(--gap)) / 4); }
  .pj-empty, .pj-loc { grid-template-columns:1fr; }
  .covers.small { grid-template-columns:1fr 1fr; }
  .covers.small li:nth-child(3) { display:none; }
}
@media (max-width: 640px) {
  .covers { grid-template-columns:1fr; gap:40px; }
  .cv-media { aspect-ratio:4/3; }
  .rail { grid-auto-columns:78vw; }
  .rail .cv-media { aspect-ratio:4/5; }
  .pf-bar { display:block; }
  .pf-filters { flex-wrap:nowrap; overflow-x:auto; width:calc(100% + 2 * var(--pad)); margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scrollbar-width:none; }
  .pf-search { margin-top:14px; }
  .pf-filters::-webkit-scrollbar { display:none; }
  .pf-filters button { flex:none; }
  .pf-search { width:100%; }
  .pf-search input { font-size:16px; }
  .hero { padding-bottom:22px; }
  .hero-cta { flex-wrap:wrap; }
  .hero-cta .btn { flex:1 1 100%; }
  .hero-cta .link { margin-inline:auto; }
  .pj-hero { min-height:84svh; padding-top:96px; }
  .pj-bar { padding-inline:14px; }
  .pj-logo img { height:20px; }
  .pj-facts { grid-template-columns:1fr 1fr; }
  .pj-actions .btn { flex:1 1 100%; }
  .covers.small { grid-template-columns:1fr; }
  .covers.small li:nth-child(n+2) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-slide.on .aer, .hm-slide.on .hm-img, .pj-img, .pj-hero.k-aerial .aer { animation:none; }
  .hm-slide { transition:none; }
}
@media (max-width: 640px) {
  .hero h1 { font-size:clamp(38px, 10.4vw, 52px); }
  [dir="ltr"] .hero h1 { font-size:clamp(42px, 11.6vw, 58px); }
  .hero .stats { margin-top:26px; }
}
@media (max-width: 900px) and (max-height: 760px) {
  .hero { padding-top:calc(var(--top-h) + 20px); }
  .hero h1, [dir="ltr"] .hero h1 { font-size:clamp(32px, 9.4vw, 40px); margin-top:12px; }
  .hero .lede { margin-top:14px; font-size:14.5px; line-height:1.6; }
  .hero-cta { margin-top:20px; gap:10px 14px; }
  .hero-credit { margin-top:14px; font-size:10.5px; }
}

.pj-map { container-type:size; }
.pj-map .aer { filter:saturate(.8) contrast(1.04) brightness(.9); }
@media (max-width: 640px) {
  .hero-cta .btn.ghost { flex:1 1 auto; }
  .hero-cta .link { margin-inline:12px 0; flex:none; }
}
.media .aer img { position:static; inset:auto; }
.hero .eyebrow, .pj-head .eyebrow { color:var(--brass-hi); }   /* legible over imagery (WCAG AA) */
/* legibility over bright aerial imagery (measured live: numbers 3.6:1, badge and SE intro below AA) */
.cv-n { color:var(--ivory); background:rgba(10,10,11,.72); padding:3px 8px 2px; }
.badge.quiet { color:var(--ivory); background:rgba(10,10,11,.78); border-color:rgba(242,236,225,.2); }
.hero .lede { color:rgba(242,236,225,.9); }