.map-hero { padding:clamp(2rem,5vw,5rem) 0; background:radial-gradient(ellipse at 3% 20%,#eee9d5,transparent 45%),linear-gradient(135deg,#f5f9f3,#edf7f4); overflow:hidden; }
.map-hero-grid { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:clamp(2rem,4vw,4rem); }
.map-hero-copy h1 { font-size:clamp(2.6rem,4.2vw,4.5rem); line-height:1.1; letter-spacing:-.045em; font-weight:800; margin:1.2rem 0; color:#142f26; }
.map-hero-copy h1 span { color:#0b7859; }
.map-hero-copy>p { max-width:32ch; color:#52685d; font-size:1.15rem; line-height:1.65; margin-bottom:1.7rem; }
.map-hero-copy .h1-eyebrow { font-size:.78rem; letter-spacing:.09em; }
.map-hero-secondary { display:inline-flex; align-items:center; gap:.5rem; color:#195a44!important; font-weight:750; padding:.8rem .2rem; }
.map-hero-stats { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; font-size:.83rem; color:#62776c; margin-top:2rem; }
.map-hero-stats strong { color:#164d3a; font-size:1.1rem; }
.map-hero-stats>span:last-child { flex-basis:100%; font-size:.75rem; }
.map-lab { min-width:0; position:relative; border-radius:28px; border:1px solid #407a60; background:radial-gradient(ellipse at 65% 25%,#245a43,transparent 65%),#062f29; box-shadow:0 24px 60px #0b493624; color:#fff; padding:1.3rem; }
.map-lab-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; color:#bedccc; font-size:.7rem; letter-spacing:.09em; }
.map-lab-top .bi { color:#e5c475; margin-right:.4rem; }.map-lab-note { font-size:.65rem; letter-spacing:0; color:#9dc1af; }
.map-scene { position:relative; aspect-ratio:680/470; margin:.5rem -1rem 0; }
.map-scene svg { width:100%; height:100%; display:block; }
.map-island { animation:map-float 7s ease-in-out infinite; }
.map-route-layer,.map-ai-layer { opacity:0; transition:opacity .7s; }
[data-layer="routes"] .map-route-layer,[data-layer="ai"] .map-ai-layer { opacity:1; }
.map-river-flow,.map-route-line { animation:map-flow 6s linear infinite; }
.map-scan { animation:map-sweep 8s ease-in-out infinite; }
.map-hotspots[hidden],.map-layer-controls[hidden] { display:none; }
.map-pin { position:absolute; display:flex; gap:.35rem; align-items:center; border:1px solid #78b598; border-radius:18px; background:#063d32ed; color:#ddf1e4; padding:.5rem .7rem; min-height:44px; font:inherit; font-size:.7rem; box-shadow:0 5px 15px #001e2060; cursor:pointer; }
.map-pin::before { content:""; width:6px; height:6px; border-radius:50%; background:#f5cc72; box-shadow:0 0 0 4px #f5cc7220; }
.map-pin-terrain { top:35%; left:11%; }.map-pin-routes { top:70%; left:32%; }.map-pin-ai { top:37%; right:12%; }
.map-pin:hover,.map-pin[aria-pressed="true"] { background:#f5d582; color:#183e2e; border-color:#f5d582; }
.map-layer-controls { display:flex; gap:.35rem; padding:.35rem; background:#00251f99; border:1px solid #42715c; border-radius:14px; width:fit-content; margin:.2rem auto 1.2rem; }
.map-layer-controls button { border:0; border-radius:10px; padding:.55rem .85rem; min-height:44px; color:#c9e2d4; background:transparent; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }
.map-layer-controls button[aria-pressed="true"]:not(.map-motion) { background:#ddefdf; color:#124630; }
.map-layer-controls .map-motion { border-left:1px solid #42715c; border-radius:0 8px 8px 0; }
.map-lab button:focus-visible,.map-lab a:focus-visible { outline:3px solid #f5d582; outline-offset:3px; }
.map-lab-caption { display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:1px solid #476b58; padding:1.1rem .2rem .1rem; }
.map-lab-caption strong { color:#f2f3df; font-size:.95rem; }.map-lab-caption p { color:#b3cdbd; font-size:.78rem; margin:.3rem 0 0; }
.map-lab-caption a { color:#f4d17e!important; font-weight:750; font-size:.78rem; flex-shrink:0; }
.map-lab.is-paused * { animation-play-state:paused!important; }
@keyframes map-float { 50% { transform:translateY(-9px); } }
@keyframes map-flow { to { stroke-dashoffset:-126; } }
@keyframes map-sweep { 0%,100% { transform:translateX(-300px); opacity:0; } 45%,65% { opacity:.16; } 85% { transform:translateX(360px); opacity:0; } }
@media(max-width:991px) { .map-hero-grid { grid-template-columns:1fr; max-width:720px; }.map-hero-copy { text-align:center; }.map-hero-copy>p { margin-inline:auto; }.map-hero-copy .h1-action-row,.map-hero-stats { justify-content:center; }.map-hero-copy h1 { font-size:clamp(2.6rem,7vw,4rem); } }
@media(max-width:480px) { .map-lab { padding:1rem; border-radius:20px; }.map-lab-note { display:none; }.map-pin { font-size:.62rem; padding:.3rem .5rem; }.map-pin .bi { display:none; }.map-layer-controls button { padding:.45rem .65rem; }.map-lab-caption { align-items:flex-start; flex-direction:column; gap:.6rem; }.map-hero-copy .h1-action-row { display:flex; flex-wrap:wrap; }.map-hero-copy .h1-button { width:auto; }.map-hero-stats { margin-top:1.3rem; } }
@media(prefers-reduced-motion:reduce) { .map-lab * { animation:none!important; transition:none!important; } }

/* One immersive, full-width feature with copy inside the map canvas. */
.map-hero{padding:clamp(1rem,3vw,2.5rem) 0}
.map-hero-grid{display:block;max-width:var(--h1-container-width,1280px)}
.map-lab{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.5fr);column-gap:1rem;padding:clamp(1.25rem,3vw,2.5rem);background:radial-gradient(ellipse at 80% 30%,#286249 0,transparent 60%),linear-gradient(120deg,#062b26,#073d31);overflow:hidden}
.map-lab-top{grid-column:1/-1;margin-bottom:.7rem}
.map-hero-copy{grid-column:1;grid-row:2/4;align-self:center;position:relative;z-index:1;text-align:left;padding:1rem 0}
.map-hero-copy h1{color:#f4fbf5;font-size:clamp(1.9rem,3vw,2.8rem);margin:1rem 0;line-height:1.08}
.map-hero-copy h1 span{color:#eac978}
.map-hero-copy .h1-eyebrow{color:#a8d9bf;font-size:.7rem}
.map-hero-copy>p{color:#c0d8c9;max-width:30ch;font-size:.9rem;margin:0 0 1.5rem}
.map-hero-copy .h1-action-row{gap:.8rem;justify-content:flex-start}
.map-hero-copy .h1-button--primary{background:#edd28d;color:#123d2d;border-color:#edd28d;box-shadow:0 8px 24px #001a1a30;padding:.85rem 1.2rem}
.map-hero-copy .h1-button--primary:hover{background:#f6dfa8}
.map-hero-secondary{color:#e2f3e8!important;font-size:.9rem}
.map-hero-stats{color:#a9cdb8;justify-content:flex-start;margin-top:1.5rem;gap:1.3rem}
.map-hero-stats strong{color:#fff;font-size:1.1rem}
.map-hero-stats>span:last-child{flex-basis:auto;font-size:.83rem}
.map-scene{grid-column:2;grid-row:2;margin:0 -.5rem;align-self:center}
.map-layer-controls{grid-column:2;grid-row:3;margin:0 auto 1.25rem}
.map-lab-caption{grid-column:1/-1;margin-top:1rem;padding-top:1rem}
@media(max-width:767px){
 .map-lab{grid-template-columns:1fr;padding:1.3rem}
 .map-hero-copy{grid-column:1;grid-row:2;text-align:center;padding:1.5rem 0 .2rem}
 .map-hero-copy h1{font-size:clamp(1.85rem,6vw,2.5rem)}
 .map-hero-copy>p{margin-inline:auto}
 .map-hero-copy .h1-action-row,.map-hero-stats{justify-content:center}
 .map-scene{grid-column:1;grid-row:3;margin:.5rem -1rem 0}
 .map-layer-controls{grid-column:1;grid-row:4;margin:0 auto .5rem}
 .map-lab-caption{grid-row:5}
}
.map-lab .map-hero-copy .h1-button--primary{color:#123d2d!important}
@media(max-width:767px){.map-hero-copy .h1-action-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}.map-hero-copy .h1-button--primary{font-size:.85rem;padding:.7rem .95rem}.map-hero-secondary{font-size:.8rem}.map-hero-copy{padding-top:1rem}.map-hero-stats{margin-top:1rem}}

/* Centered map feature: compact header, uninterrupted scene, closing tagline. */
.map-lab{display:flex;flex-direction:column;align-items:center;padding:1rem clamp(1rem,3vw,2.5rem)}
.map-hero-copy{align-self:stretch;text-align:center;padding:0;margin:0}
.map-hero-copy h1{font-size:clamp(1.65rem,2.7vw,2.5rem);margin:.5rem 0 0;line-height:1.2}
.map-scene{width:min(100%,840px);margin:.25rem auto 0;align-self:center}
.map-layer-controls{margin:0 auto .65rem}
.map-hero-tagline{width:100%;text-align:center;border-top:1px solid #476b58;padding-top:.65rem;margin:0;color:#c0d8c9;font-size:.9rem}
@media(max-width:767px){.map-lab{padding:1.25rem .8rem}.map-scene{width:calc(100% + 1rem);margin:.5rem -.5rem}.map-hero-copy h1{font-size:1.65rem}.map-hero-tagline{font-size:.8rem}}

/* Keep SVG intrinsic sizing and late control enhancement from changing height. */
.map-lab .map-scene{width:100%;height:clamp(280px,35vw,424px);aspect-ratio:auto;flex:none;margin:0 auto;min-height:0}
.map-scene svg{position:absolute;inset:0;width:100%;height:100%}
.map-lab .map-layer-controls{display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;flex-shrink:0;margin:.4rem auto .65rem}
.map-lab .map-layer-controls[hidden]{display:flex;visibility:hidden}
.map-cover-layer,.map-water-layer{opacity:0;transition:opacity .7s}
[data-layer="water"] .map-water-layer,[data-layer="cover"] .map-cover-layer{opacity:1}
@media(max-width:575px){.map-lab .map-layer-controls{gap:.2rem}.map-layer-controls button{font-size:.7rem;padding:.35rem .55rem}.map-lab .map-scene{width:100%;height:auto;aspect-ratio:680/430}}

.map-pin-water{top:17%;left:35%}
.map-pin-cover{top:51%;left:15%}
@media(max-width:575px){.map-pin-water{top:8%;left:34%}.map-pin-cover{top:51%;left:4%}}

/* Passive remote sensing: sunlight reaches the surface before the sensor. */
.map-sun{color:#769e84;transition:color .4s}
.map-remote-layer{opacity:0;transition:opacity .3s;pointer-events:none}
[data-layer="remote"] .map-sun{color:#f8cf58}
[data-layer="remote"] .map-remote-layer{opacity:1}
.map-pin-remote{top:23%;right:1%}
[data-layer="remote"] .map-sun-beam{stroke-dasharray:100;animation:map-incident 3.6s linear infinite}
[data-layer="remote"] .map-reflected-beam{stroke-dasharray:100;animation:map-reflected 3.6s linear infinite}
[data-layer="remote"] .map-island{animation:none}
.map-lab.is-paused .map-remote-layer path{animation:none;stroke-dashoffset:0}
@keyframes map-incident{0%{stroke-dashoffset:100}40%,100%{stroke-dashoffset:0}}
@keyframes map-reflected{0%,40%{stroke-dashoffset:100}85%,100%{stroke-dashoffset:0}}
@media(max-width:575px){.map-pin-remote{top:18%;right:0;font-size:.56rem;min-height:30px;padding:.25rem .4rem}}
@media(prefers-reduced-motion:reduce){.map-lab .map-remote-layer path{animation:none!important;stroke-dashoffset:0}}