/* ============================================================
   REAL+ — landing.css  ·  "Proof, manufactured."
   The cinematic landing layer on top of the Fortress Garden system.
   Scroll-choreographed reveals (IntersectionObserver adds .in),
   a living hero with an animated ledger, count-up numerals, a
   drawn SVG proof-engine, the portal explorer, and a premium
   close. Everything respects prefers-reduced-motion.
   ============================================================ */

/* ---------- reveal choreography ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.rv.in { opacity: 1; transform: none; }
.rv-l { opacity: 0; transform: translateX(-26px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.rv-l.in { opacity: 1; transform: none; }
.rv-r { opacity: 0; transform: translateX(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.rv-r.in { opacity: 1; transform: none; }
.rv-s { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease), transform .9s var(--ease-spring); }
.rv-s.in { opacity: 1; transform: none; }
.rv-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger.in > *:nth-child(1) { transition-delay: .02s; } .rv-stagger.in > *:nth-child(2) { transition-delay: .09s; }
.rv-stagger.in > *:nth-child(3) { transition-delay: .16s; } .rv-stagger.in > *:nth-child(4) { transition-delay: .23s; }
.rv-stagger.in > *:nth-child(5) { transition-delay: .30s; } .rv-stagger.in > *:nth-child(6) { transition-delay: .37s; }
.rv-stagger.in > *:nth-child(7) { transition-delay: .44s; } .rv-stagger.in > *:nth-child(8) { transition-delay: .51s; }
.rv-stagger.in > *:nth-child(9) { transition-delay: .58s; } .rv-stagger.in > *:nth-child(n+10) { transition-delay: .65s; }
/* the landing's own grids: don't double-animate with kit.css rise */
.land-v2 .grid2 > *, .land-v2 .grid3 > *, .land-v2 .grid4 > * { animation: none; }

/* ---------- hero ---------- */
.lh { position: relative; overflow: hidden; min-height: calc(100vh - var(--topbar-h)); display: grid; align-items: center; background: var(--card); border-bottom: 1px solid var(--line); }
.lh-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lh-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: blob-drift 18s ease-in-out infinite alternate; }
.lh-blob.b1 { width: 640px; height: 640px; right: -140px; top: -220px; background: var(--ok-soft); }
.lh-blob.b2 { width: 520px; height: 520px; left: -160px; bottom: -220px; background: var(--clay-soft); animation-delay: -7s; animation-duration: 22s; }
.lh-blob.b3 { width: 380px; height: 380px; left: 40%; top: 55%; background: var(--sea-soft); opacity: .35; animation-delay: -12s; animation-duration: 26s; }
html[data-theme="dark"] .lh-blob { opacity: .22; }
@keyframes blob-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.08); } }
.lh-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; opacity: .35; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 72%); }
.lh-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 64px 22px 56px !important; }
@media (max-width: 1000px) { .lh-inner { grid-template-columns: 1fr; gap: 34px; } .lh { min-height: 0; } }
.lh-eyebrow { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 7px 14px 7px 8px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow-pill); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-deep); }
.lh-eyebrow .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: live-ping 2s infinite; }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lh h1 { font: 500 clamp(36px, 4.1vw, 56px)/1.06 Fraunces, "Source Serif Pro", serif; letter-spacing: -.018em; color: var(--ink); margin: 22px 0 16px; max-width: 17ch; }
.lh h1 .w { display: inline-block; opacity: 0; transform: translateY(18px) rotate(1deg); animation: word-in .75s var(--ease) forwards; }
.lh h1 em { font-style: italic; color: var(--ok-deep); position: relative; }
.lh h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; background: var(--ok-soft); z-index: -1; transform: scaleX(0); transform-origin: left; animation: underline-in .9s var(--ease) 1.1s forwards; border-radius: 4px; }
html[data-theme="dark"] .lh h1 em { color: var(--ok); }
@keyframes word-in { to { opacity: 1; transform: none; } }
@keyframes underline-in { to { transform: scaleX(1); } }
.lh .lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--mut); line-height: 1.55; max-width: 56ch; }
.lh-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.lh-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; font-size: 12px; color: var(--mut); }
.lh-trust span { display: inline-flex; align-items: center; gap: 6px; }
.lh-trust svg { color: var(--ok-deep); }

/* ---------- hero visual: living ledger ---------- */
.lh-vis { position: relative; min-height: 500px; }
.lv-card { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 14px 16px; animation: float-y 7s ease-in-out infinite; }
.lv-card.journal { left: 0; right: 14%; top: 12%; padding: 18px 20px; animation-duration: 9s; z-index: 2; }
.lv-card.rcpt { left: -3%; bottom: 2%; width: 246px; animation-delay: -2s; z-index: 3; }
.lv-card.pass { right: 0; bottom: 12%; width: 172px; animation-delay: -4.5s; z-index: 3; text-align: center; }
.lv-card.score { right: -2%; top: -4%; width: 168px; animation-delay: -1s; z-index: 4; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1000px) { .lh-vis { min-height: 420px; } .lv-card.score { display: none; } }
@media (max-width: 560px) { .lh-vis { min-height: 380px; } .lv-card.rcpt { width: 200px; } .lv-card.pass { width: 150px; } }
.lv-row { display: grid; grid-template-columns: 1fr 92px 92px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12px; opacity: 0; transform: translateX(-8px); white-space: nowrap; }
.lv-row.in { animation: row-in .5s var(--ease) forwards; }
@keyframes row-in { to { opacity: 1; transform: none; } }
.lv-row:last-child { border-bottom: 0; }
.lv-row .lv-acct { color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.lv-row .lv-dr, .lv-row .lv-cr { text-align: right; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; }
.lv-row .lv-cr { color: var(--ok-deep); }
.lv-proof { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 12.5px; }
.lv-proof b { font-family: "IBM Plex Mono", monospace; }
.lv-seal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok-deep); font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.lv-seal svg { animation: seal-pop .6s var(--ease-spring) 1.4s both; }
@keyframes seal-pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.lv-ring { width: 84px; height: 84px; margin: 0 auto 6px; position: relative; }
.lv-ring svg { transform: rotate(-90deg); }
.lv-ring circle.track { stroke: var(--line); }
.lv-ring circle.fill { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; animation: ring-fill 1.6s var(--ease) .8s forwards; }
@keyframes ring-fill { to { stroke-dashoffset: 52; } }
.lv-ring .lv-num { position: absolute; inset: 0; display: grid; place-items: center; font: 600 20px "IBM Plex Mono", monospace; color: var(--ink); }

/* ---------- marquee (kit) tweak ---------- */
.land-v2 .marquee { border-block: 1px solid var(--line); background: var(--bg); }
.land-v2 .mq-item { font-weight: 600; }

/* ---------- sections ---------- */
.land-v2 .land-sec { padding: 84px 0; }
@media (max-width: 720px) { .land-v2 .land-sec { padding: 56px 0; } }
.land-v2 .sec-title { max-width: 22ch; }
.sec-head-c { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sec-head-c .sec-title { margin-left: auto; margin-right: auto; }
.sec-head-c .sec-lede { margin: 0 auto; }

/* ---------- proof engine (drawn SVG flow) ---------- */
.pe-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card-lg); padding: 30px; box-shadow: var(--shadow); overflow: hidden; }
.pe-svg { width: 100%; height: auto; display: block; }
.pe-svg .wire { fill: none; stroke: var(--line2); stroke-width: 2; stroke-dasharray: 6 6; }
.pe-svg .wire-on { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.in .pe-svg .wire-on { animation: wire-draw 1.6s var(--ease) forwards; }
.in .pe-svg .wire-on.w2 { animation-delay: .5s; } .in .pe-svg .wire-on.w3 { animation-delay: 1s; } .in .pe-svg .wire-on.w4 { animation-delay: 1.5s; } .in .pe-svg .wire-on.w5 { animation-delay: 2s; }
@keyframes wire-draw { to { stroke-dashoffset: 0; } }
.pe-svg .node rect { fill: var(--card); stroke: var(--line2); stroke-width: 1.5; }
.pe-svg .node.hot rect { stroke: var(--ok); stroke-width: 2; }
.pe-svg .node text { font: 600 12px Inter, sans-serif; fill: var(--ink); }
.pe-svg .node .sub { font: 500 10px Inter, sans-serif; fill: var(--mut); }
.pe-svg .node { opacity: 0; transform: translateY(8px); transform-box: fill-box; transform-origin: center; }
.in .pe-svg .node { animation: node-in .6s var(--ease) forwards; }
.in .pe-svg .node.n2 { animation-delay: .45s; } .in .pe-svg .node.n3 { animation-delay: .95s; } .in .pe-svg .node.n4 { animation-delay: 1.45s; } .in .pe-svg .node.n5 { animation-delay: 1.95s; } .in .pe-svg .node.n6 { animation-delay: 2.45s; }
@keyframes node-in { to { opacity: 1; transform: none; } }
.pe-svg .dot { fill: var(--ok); opacity: 0; }
.in .pe-svg .dot { animation: dot-travel 2.8s linear 1.2s infinite; }
@keyframes dot-travel { 0% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- pillar cards ---------- */
.pillar { position: relative; overflow: hidden; padding: 26px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); cursor: pointer; }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pillar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px 140px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--ok-soft) 70%, transparent), transparent 70%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.pillar:hover::before { opacity: 1; }
.pillar .p-num { font: 500 40px/1 Fraunces, serif; color: var(--ok-deep); letter-spacing: -.02em; }
.pillar .p-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 14px; }
.pillar h3 { font: 600 18px/1.3 Inter, sans-serif; margin: 6px 0 8px; }
.pillar p { font-size: 14px; color: var(--mut); }
.pillar .p-arrow { position: absolute; right: 20px; top: 22px; color: var(--ok-deep); transform: translateX(-6px); opacity: 0; transition: all .3s var(--ease); }
.pillar:hover .p-arrow { transform: none; opacity: 1; }

.land-v2 { overflow-x: clip; }

/* ---------- stat band ---------- */
.stat-band { background: var(--ink); color: var(--bg); border-radius: var(--r-card-lg); padding: 40px 36px; position: relative; overflow: hidden; }
html[data-theme="dark"] .stat-band { background: var(--card2); color: var(--ink); border: 1px solid var(--line); }
.stat-band::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ok) 45%, transparent), transparent 70%); pointer-events: none; }
.stat-band .sb-v { font: 600 clamp(28px, 3.4vw, 44px)/1.05 "IBM Plex Mono", monospace; letter-spacing: -.03em; }
.stat-band .sb-l { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 8px; }
.stat-band .sb-sub { font-size: 13px; opacity: .8; margin-top: 4px; }

/* ---------- journeys strip ---------- */
.jcard { border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); padding: 20px; box-shadow: var(--shadow); cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; }
.jcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.jcard .j-step { font: 600 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ok-deep); }
.jcard h4 { font: 600 16px/1.3 Inter, sans-serif; margin: 8px 0 6px; }
.jcard p { font-size: 13.5px; color: var(--mut); }
.jcard .j-path { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.jcard .j-path span { font-size: 10.5px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--bg2); color: var(--mut); font-weight: 600; }

/* ---------- surfaces showcase ---------- */
.surf { border-radius: var(--r-card-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px; min-height: 300px; position: relative; overflow: hidden; }
.surf .mini-phone { width: 160px; height: 300px; border-radius: 26px; background: var(--ink); margin: 0 auto; padding: 8px; box-shadow: var(--shadow-lg); }
.surf .mini-phone .mp-scr { height: 100%; border-radius: 20px; background: var(--bg); overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.surf .mini-phone .mp-hero { height: 64px; border-radius: 12px; background: linear-gradient(135deg, #12233D, #1E3253 60%, #8A6D1A 145%); }
.surf .mini-phone .mp-bar { height: 8px; border-radius: 4px; background: var(--bg2); }
.surf .mini-phone .mp-bar.w { width: 62%; }
.surf .mini-phone .mp-card { height: 44px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.surf .mini-desk { border-radius: 14px; background: var(--bg); border: 1px solid var(--line); height: 240px; overflow: hidden; display: grid; grid-template-columns: 52px 1fr; }
.surf .mini-desk .md-side { background: var(--card); border-right: 1px solid var(--line); padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; }
.surf .mini-desk .md-side i { display: block; height: 9px; border-radius: 3px; background: var(--bg2); }
.surf .mini-desk .md-side i:first-child { background: var(--ink); }
.surf .mini-desk .md-main { padding: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-content: start; }
.surf .mini-desk .md-main b { display: block; height: 40px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.surf .mini-desk .md-main b.wide { grid-column: 1 / -1; height: 110px; }
.surf .ussd { font: 12px "IBM Plex Mono", monospace; background: #0E1A13; color: #C9E8CF; border-radius: 14px; padding: 14px; white-space: pre-wrap; line-height: 1.5; min-height: 120px; }
.surf .ussd .cur { display: inline-block; width: 8px; height: 14px; background: #C9E8CF; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- closing CTA ---------- */
.close-cta { position: relative; overflow: hidden; border-radius: var(--r-card-lg); padding: 56px 40px; text-align: center; background: linear-gradient(135deg, #0A1524 0%, #14263E 55%, #4A3A12 145%); color: #fff; }
.close-cta h2 { font: 500 clamp(30px, 4vw, 48px)/1.1 Fraunces, serif; letter-spacing: -.016em; max-width: 18ch; margin: 0 auto 14px; }
.close-cta p { color: rgba(255,255,255,.78); max-width: 54ch; margin: 0 auto; font-size: 16px; }
.close-cta .btn.lg.pri { background: linear-gradient(135deg, #EFD37E, #C9A227) !important; color: #12233D !important; border-color: #C9A227 !important; }
.close-cta .btn.lg.ghost { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.close-cta .orbits { position: absolute; inset: 0; pointer-events: none; }
.close-cta .orbits i { position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.close-cta .orbits i:nth-child(1) { width: 420px; height: 420px; animation: spin-slow 50s linear infinite; border-style: dashed; }
.close-cta .orbits i:nth-child(2) { width: 760px; height: 760px; animation: spin-slow 90s linear infinite reverse; }
.close-cta .orbits i:nth-child(3) { width: 1100px; height: 1100px; }

/* ============================================================
   HERITAGE v3 — cinematic photo hero + flyer showcase panels
   ============================================================ */
/* ---- photo hero ---- */
.lh.lh-photo { background: #0A1524; border-bottom: 0; }
.lh-media { position: absolute; inset: -160px 0 0 0; overflow: hidden; will-change: transform; }
.lh-media .lh-img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; animation: lh-kb 30s ease-in-out infinite alternate; }
@keyframes lh-kb { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.lh-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(8,17,30,.94) 0%, rgba(8,17,30,.82) 38%, rgba(8,17,30,.38) 68%, rgba(8,17,30,.30) 100%),
  linear-gradient(180deg, rgba(8,17,30,.35) 0%, transparent 26%, transparent 62%, rgba(8,17,30,.72) 100%); }
.lh-photo .lh-inner { padding-top: 74px !important; padding-bottom: 66px !important; }
.lh-photo .lh-eyebrow { background: rgba(10,21,36,.6); border-color: rgba(255,255,255,.22); color: #EFD37E; backdrop-filter: blur(8px); box-shadow: none; }
.lh-photo .lh-eyebrow .live { background: #EFD37E; box-shadow: 0 0 0 0 rgba(239,211,126,.5); }
.lh-photo h1 { color: #fff; }
.lh-photo h1 em { color: #EFD37E; }
.lh-photo h1 em::after { background: rgba(201,162,39,.38); }
.lh-photo .lede { color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(8,17,30,.5); }
.lh-photo .lh-trust { color: rgba(255,255,255,.82); }
.lh-photo .lh-trust svg { color: #EFD37E; }
.lh-am { margin-top: 22px; }
.lh-stamp-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: 20px; }
.lh-photo .btn.lg.ghost { background: rgba(10,21,36,.4) !important; color: #fff !important; border-color: rgba(255,255,255,.45) !important; backdrop-filter: blur(6px); }
.lh-photo .lv-card { box-shadow: 0 18px 50px rgba(4,10,20,.5); }
@media (max-width: 1000px) {
  .lh-media { inset: 0; }
  /* single-column: white copy spans the full width, so the wash must too */
  .lh-shade { background:
    linear-gradient(90deg, rgba(8,17,30,.88) 0%, rgba(8,17,30,.84) 50%, rgba(8,17,30,.84) 100%),
    linear-gradient(180deg, rgba(8,17,30,.35) 0%, transparent 26%, transparent 62%, rgba(8,17,30,.72) 100%); }
}

/* ---- flyer showcase panels ---- */
.show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.show-panel { position: relative; display: grid; grid-template-columns: 1fr; border-radius: var(--r-card-lg); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.show-panel:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.show-panel.wide { grid-column: 1 / -1; grid-template-columns: 1.02fr 1fr; min-height: 400px; }
.show-panel.wide .sp-media { order: 2; min-height: 100%; }
.show-panel.wide .sp-copy { order: 1; }
.sp-media { position: relative; overflow: hidden; min-height: 235px; }
.sp-media img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.sp-price { position: absolute; right: 14px; top: 14px; padding: 8px 14px; border-radius: 12px; background: rgba(10,21,36,.78); color: #fff; font: 600 14px "IBM Plex Mono", monospace; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); z-index: 2; }
.sp-copy { padding: 30px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.sp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ok-deep); }
.sp-copy h3 { font: 500 clamp(25px, 2.5vw, 37px)/1.1 Fraunces, serif; letter-spacing: -.014em; color: var(--ink); }
.sp-copy h3 em { font-style: italic; color: var(--ok-deep); }
.sp-copy p { font-size: 14.5px; color: var(--mut); }
.sp-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
.sp-foot .loc-pill { flex: 1 1 260px; }
.show-panel.dark { background: linear-gradient(150deg, #0C1B30, #16283E); border-color: #24384F; }
.show-panel.dark .sp-eyebrow { color: #EFD37E; }
.show-panel.dark .sp-copy h3 { color: #fff; }
.show-panel.dark .sp-copy h3 em { color: #EFD37E; }
.show-panel.dark .sp-copy p { color: rgba(255,255,255,.82); }
@media (max-width: 960px) {
  .show-grid { grid-template-columns: 1fr; }
  .show-panel.wide { grid-template-columns: 1fr; min-height: 0; }
  .show-panel.wide .sp-media { order: -1; min-height: 230px; }
  .sp-media { order: -1; }
  .sp-copy { padding: 22px; }
}

/* ---------- portal explorer ---------- */
.px-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: stretch; }
.px-rail { display: flex; flex-direction: column; gap: 15px; }
.px-group h5 { font: 700 10.5px Inter, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); margin: 0 0 7px 4px; }
.px-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.px-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; box-shadow: var(--shadow); transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.px-chip:hover { transform: translateY(-2px); border-color: var(--ok-deep); }
.px-chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.px-chip.on .badge { background: rgba(255,255,255,.14); color: #EFD37E; }
.px-chip .o-ico { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.px-pane { border-radius: var(--r-card-lg); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; grid-template-rows: 250px 1fr; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .45s var(--ease); min-height: 540px; }
.px-pane.in { opacity: 1; transform: none; }
.px-art { position: relative; overflow: hidden; }
.px-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94); animation: kenburns 20s ease-in-out infinite alternate; }
.px-art-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,35,61,.15), rgba(18,35,61,.5) 80%, rgba(18,35,61,.7)); }
.px-art-tag { position: absolute; left: 16px; bottom: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(10,21,36,.88); color: #F5DE96; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.px-body { padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.px-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ok-deep); }
.px-body h3 { font: 500 clamp(22px, 2.2vw, 30px)/1.12 Fraunces, serif; color: var(--ink); }
.px-body p { font-size: 14.5px; color: var(--mut); line-height: 1.6; max-width: 62ch; }
.px-feats { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.px-feat { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.px-feat .ico { color: var(--ok-deep); flex: 0 0 auto; }
.px-foot { margin-top: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.px-foot .xs { max-width: 300px; }
html.rmotion .px-art img { animation: none; }
@media (prefers-reduced-motion: reduce) { .px-art img { animation: none !important; } }
@media (max-width: 960px) { .px-wrap { grid-template-columns: 1fr; } .px-rail { order: -1; } .px-pane { min-height: 0; grid-template-rows: 200px 1fr; } .px-body { padding: 20px; } }

/* ---------- count-up ---------- */
.cu { font-variant-numeric: tabular-nums; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-l, .rv-r, .rv-s, .rv-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lh h1 .w, .lv-row, .orb, .pe-svg .node { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pe-svg .wire-on { stroke-dashoffset: 0 !important; animation: none !important; }
  .lv-ring circle.fill { stroke-dashoffset: 52 !important; animation: none !important; }
  .lh-media .lh-img { animation: none !important; }
}