:root{--er-amber:#ffb561;--er-foam:#e6f4f3;--er-abyss:#06141b}
/* The hero container needs: position:relative; isolation:isolate; overflow:hidden (added via [data-er-hero]) */
[data-er-hero]{position:relative;isolation:isolate;overflow:hidden}

/* ---- photo layer ---- */
.er-visual{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#0b2a35}
.er-scene{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease}
.er-scene.on{opacity:1}
.er-scene:nth-child(1){background:linear-gradient(170deg,#12394a,#1d6f80 50%,#c98a52)}
.er-scene:nth-child(2){background:linear-gradient(170deg,#0a2a2a,#1f6b5a 55%,#9fd3c1)}
.er-veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,20,27,.88) 0%,rgba(6,20,27,.5) 45%,rgba(6,20,27,.2) 100%),
  linear-gradient(0deg,rgba(6,20,27,.95) 0%,rgba(6,20,27,0) 40%)}
.er-grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---- route map ---- */
.er-map{position:absolute;top:var(--er-map-top,70px);bottom:var(--er-map-bottom,260px);left:var(--er-map-left,36%);right:0;z-index:-2;pointer-events:none}
.er-map.er-inflow{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:100%;height:380px;z-index:auto;margin-top:6px}
.er-map svg{width:100%;height:100%;display:block;overflow:visible}
.er-coast{fill:none;stroke:rgba(111,211,224,.3);stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.er-cn{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:calc(16px*var(--k,1));fill:rgba(230,244,243,.38)}
#erRoute{fill:none;stroke:var(--er-amber);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#erGlow{fill:none;stroke:var(--er-amber);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.5;filter:url(#erBlur)}
.er-stop{opacity:0;transition:opacity .5s}
.er-stop.on{opacity:1}
.er-stop circle{fill:var(--er-abyss);stroke:var(--er-foam);stroke-width:2}
.er-stop text{font-family:inherit;font-size:calc(14px*var(--k,1));font-weight:600;fill:var(--er-foam);paint-order:stroke;stroke:rgba(6,20,27,.85);stroke-width:calc(4px*var(--k,1))}
#erCar{fill:#fff}
#erHalo{fill:var(--er-amber);opacity:.35;transform-box:fill-box;transform-origin:center;animation:er-pulse 1.8s ease-out infinite}
@keyframes er-pulse{from{transform:scale(.6);opacity:.55}to{transform:scale(2.4);opacity:0}}

/* Existing hero text/layout; original mobile map remains in the text flow. */
.hero[data-er-hero]{height:auto;min-height:650px;--er-map-bottom:100px;background:#06141b;font-family:Manrope,system-ui,sans-serif}
@media(max-width:900px){
  .hero[data-er-hero]{height:auto;min-height:0;padding:60px 5% 110px}
  [data-er-hero] .hero-copy{position:relative;top:auto;left:auto;right:auto}
}
@media(max-width:600px){.hero[data-er-hero]{padding-top:40px;padding-bottom:75px}}
@media(prefers-reduced-motion:reduce){[data-er-hero] .er-stop{transition:none}#erHalo{animation:none}}

/* The decorative hero keeps its palette in both page themes. */
[data-er-hero]{color:#fff;color-scheme:dark}
.header,.booking,#route-form label,#route-form input,#route-form select,.luggage-picker{transition:background-color .2s ease,color .2s ease,border-color .2s ease}
@media(prefers-reduced-motion:reduce){.header,.booking,#route-form label,#route-form input,#route-form select,.luggage-picker{transition:none}}