/* Reference layering: white header contour overlays the actual hero media.
   The notice is above the navigation on home, never between contour and video. */
body[data-route=start] header:not(.is-scrolled){background:transparent}
body[data-route=start] header .head{background:#fff}
body[data-route=start] header .header-contour{background:transparent;pointer-events:none}
body[data-route=start] header.is-scrolled>.warningbar{display:none}
body[data-route=start] .hero-video-toggle{top:80px}
body[data-route=start] .hero-copy{border-radius:0}
@media(max-width:767px){
 body[data-route=start] .hero-video-toggle{top:65px}
 body[data-route=start] .hero{padding-top:270px}
 body[data-route=start] .hero .scene{height:300px}
}
body.contrast[data-route=start] header .head{background:#fff;color:#000}

/* Lightweight server-rendered route overview: no tile service or map JS on home. */
.route-overview{position:relative;background:var(--nnl-blue);margin:110px 0 130px;padding:56px 0 48px;color:#111}
.route-overview::before,.route-overview::after{content:"";position:absolute;left:0;width:100%;height:80px;background:var(--nnl-blue);pointer-events:none;mask:url('assets/shape_01A.svg') center/100% 100% no-repeat;-webkit-mask:url('assets/shape_01A.svg') center/100% 100% no-repeat}
.route-overview::before{bottom:calc(100% - 1px);transform:rotate(180deg)}
.route-overview::after{top:calc(100% - 1px)}
.route-overview-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:64px;margin:auto}
.overview-map-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.overview-area{display:flex;flex-direction:column;background:#f8fbfa;border:2px solid transparent;border-radius:28px 28px 36px 12px;padding:12px 12px 20px;color:#111;text-decoration:none;min-width:0}
.overview-area:hover{border-color:#111;background:#fff}
.overview-area:focus-visible{outline:3px solid #111;outline-offset:5px}
.overview-map{display:block;width:100%;height:auto;overflow:visible}
.overview-grid{fill:none;stroke:#dde6e3;stroke-width:1}
.overview-track{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.overview-walk{stroke:#23613f;stroke-width:4}
.overview-cycle{stroke:#864361;stroke-dasharray:7 4}
.overview-north{fill:#394a43;stroke:none;font-size:12px;font-weight:700}
.overview-north path{fill:none;stroke:#394a43;stroke-width:1.5}
.overview-area-title{font-size:1rem;font-weight:700;line-height:1.4;padding:0 6px}
.overview-area-action{font-size:.75rem;line-height:1.5;margin-top:6px;padding:0 6px;text-decoration:underline;text-underline-offset:3px}
.overview-legend{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:.8125rem;margin:20px 0 8px}
.overview-legend span{display:flex;align-items:center;gap:8px}.overview-legend i{display:inline-block;width:26px;border-top:4px solid #23613f}.overview-legend .legend-cycle{border-color:#864361;border-top-style:dashed}
.overview-caption,.overview-attribution{font-size:.75rem;line-height:1.6;margin:6px 0;max-width:580px}.overview-attribution a{color:inherit;text-decoration:underline}
.route-overview-copy h2{font-size:clamp(1.75rem,3vw,2.75rem);text-wrap:balance;margin:12px 0 20px}
.route-overview-copy .eyebrow{font-size:.75rem;margin:0}
.route-overview-copy>.btn{display:inline-flex;margin-top:12px;max-width:100%}
.overview-visit-note{font-size:.8125rem;margin-top:24px;max-width:440px}
@media(max-width:1000px){.route-overview-inner{gap:32px;grid-template-columns:1.1fr 1fr}.overview-map-pair{gap:10px}.overview-area{padding:6px 6px 16px}}
@media(max-width:767px){.route-overview{margin:80px 0 90px;padding:32px 0}.route-overview::before,.route-overview::after{height:45px;mask-image:url('assets/shape_01-mobile-A.svg');-webkit-mask-image:url('assets/shape_01-mobile-A.svg')}.route-overview-inner{grid-template-columns:1fr;gap:32px}.route-overview-copy{grid-row:1}.overview-area-title{font-size:.875rem}.overview-area-action{font-size:.75rem}.overview-visit-note{margin-bottom:0}}
@media(max-width:350px){.overview-map-pair{grid-template-columns:1fr}.overview-map{max-height:230px}.overview-area-title{font-size:1rem}}
body.contrast .route-overview{background:#fff;color:#000}body.contrast .route-overview::before,body.contrast .route-overview::after{background:#fff}body.contrast .overview-area{border-color:#000;background:#fff;color:#000}body.contrast .overview-track{stroke:#000}
@media(forced-colors:active){.overview-track,.overview-north path{stroke:CanvasText}.overview-north{fill:CanvasText}.overview-area{border-color:LinkText}.overview-legend i{border-color:CanvasText}}
