/* Page-specific styles for storypath.html (base.css loads first) */


/* Results slider */
.slider{margin-top:38px}
.slider-track{position:relative}
.slide{margin:0;opacity:0;transition:opacity .7s var(--ease);pointer-events:none;position:absolute;top:0;left:0;width:100%}
.slide.on{opacity:1;pointer-events:auto;position:relative}
.slide-media{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.slide-media img{width:100%;height:100%;object-fit:cover;display:block}
.slide-media.missing{border-style:dashed}
.slide figcaption{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.slider{position:relative}
.slider-overlay{position:absolute;top:0;left:0;right:0;aspect-ratio:16/9;pointer-events:none}
.sl-btn{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(14,13,12,.55);backdrop-filter:blur(8px);color:var(--txt);font-size:17px;cursor:pointer;font-family:inherit;opacity:0;transition:opacity .3s var(--ease),background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.sl-prev{left:18px}
.sl-next{right:18px}
.slider:hover .sl-btn{opacity:1}
.sl-btn:hover{background:var(--txt);color:#0e0d0c;border-color:var(--txt)}
.sl-btn:active{transform:translateY(-50%) scale(.94)}
.sl-dots{pointer-events:auto;position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:8px 12px;border-radius:100px;background:rgba(14,13,12,.5);backdrop-filter:blur(8px)}
.sl-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:background .25s,transform .25s,width .25s}
.sl-dot.on{background:var(--accent);width:20px;border-radius:100px}
@media(hover:none){.sl-btn{display:none}}
@media(max-width:760px){.sl-btn{display:none}}

/* Problem: text left, square image right */
.prob-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-top:8px}
.prob-text .cs-lead{max-width:none}
.prob-media{aspect-ratio:1/1;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.prob-media img{width:100%;height:100%;object-fit:cover;display:block}
.prob-media.missing{border-style:dashed}
@media(max-width:820px){.prob-grid{grid-template-columns:1fr;gap:28px}}

/* Languages strip */
.langs{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);width:fit-content}
.langs-label{font-size:13px;font-weight:600;color:var(--muted-2);white-space:nowrap}
.langs-flags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.langs-flags img{width:24px;height:18px;object-fit:cover;border-radius:3px;border:1px solid rgba(255,255,255,.15);display:block}

.slide-media.dash{aspect-ratio:16/10}
.slide-media.dash img{object-position:top}
.slider-overlay.dash{aspect-ratio:16/10}

/* Results: text+KPIs left, square slider right */
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:0}
.res-left h2{margin-bottom:6px}
.res-left .cs-lead{margin-top:18px}
.res-grid .slider{margin-top:0}
.res-left .cs-lead{max-width:none;margin-top:0}
.res-kpis{margin-top:34px}
.res-kpi{display:flex;align-items:baseline;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.res-kpi:last-child{border-bottom:1px solid var(--line)}
.res-kpi .v{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-1.2px;line-height:1;min-width:130px}
.res-kpi .l{font-size:14px;color:var(--muted)}
.slider.sq .slide-media{aspect-ratio:1/1}
.slider.sq .slider-overlay{aspect-ratio:1/1}
@media(max-width:820px){.res-grid{grid-template-columns:1fr;gap:36px}}

/* Map embed guard (prevents scroll hijack until activated) */
.map-embed{position:relative}
.map-guard{position:absolute;inset:0;z-index:2;border-radius:16px;background:rgba(14,13,12,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .35s var(--ease),visibility .35s}
.map-guard.off{opacity:0;visibility:hidden}
.map-see{font-family:var(--sans);font-size:15px;font-weight:600;padding:15px 30px;border-radius:100px;border:none;background:var(--txt);color:#0e0d0c;cursor:pointer;transition:transform .25s var(--ease),background .25s}
.map-see:hover{transform:translateY(-2px);background:#fff}

/* Interactive 3D model (Key design decisions) */
.glb-view{position:relative;aspect-ratio:4/4;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:radial-gradient(60% 60% at 50% 45%, rgba(230,162,60,.07), transparent 75%)}
#glbCanvas{width:100%;height:100%;display:block;cursor:grab}
#glbCanvas:active{cursor:grabbing}
.glb-cap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none;white-space:nowrap}