/* Service-area map options (A radar · B tilted map · C constellation). Every class starts with .areas- */

/* ------------------------------------------------------------ shared head */
.areas-a,.areas-b,.areas-c{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.areas-a__head,.areas-b__head,.areas-c__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:2rem;align-items:end;margin-bottom:clamp(2rem,5vh,3.4rem)}
.areas-a__head .lbl,.areas-b__head .lbl,.areas-c__head .lbl{color:var(--on-dark-70);margin-bottom:1.1rem}

/* shared card text rhythm (each option places its own card) */
.areas-a__card-k,.areas-b__card-k,.areas-c__card-k{color:#ff8a8f}
.areas-a__card-n,.areas-b__card-n,.areas-c__card-n{font-family:var(--f-disp);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:.55rem 0 .5rem}
.areas-a__card-n small,.areas-b__card-n small,.areas-c__card-n small{font-family:var(--f-sans);font-size:.7rem;letter-spacing:.16em;margin-left:.6em;vertical-align:.5em;color:var(--on-dark-50)}
.areas-a__card-t,.areas-b__card-t,.areas-c__card-t{font-family:var(--f-it);font-style:italic;line-height:1.3;color:#fff!important;margin:0 0 .5rem}
.areas-a__card-m,.areas-b__card-m,.areas-c__card-m{font-size:.84rem;color:var(--on-dark-50)!important;margin:0 0 1rem}
.areas-a__card-a,.areas-b__card-a,.areas-c__card-a{display:inline-flex;align-items:center;gap:.55em;font-size:.9rem;font-weight:500;color:#fff;border-bottom:1px solid rgba(255,90,96,.7);padding-bottom:.2em}
.areas-a__card-a .ic,.areas-b__card-a .ic,.areas-c__card-a .ic{transition:transform var(--t-hov) var(--e-out)}
.areas-a__card-a:hover .ic,.areas-b__card-a:hover .ic,.areas-c__card-a:hover .ic{transform:translateX(4px)}
/* the readout swaps with a quick rise */
.is-swap .areas-a__card-n,.is-swap .areas-a__card-t,.is-swap .areas-a__card-k,
.is-swap .areas-b__card-n,.is-swap .areas-b__card-t,.is-swap .areas-b__card-k,
.is-swap .areas-c__card-n,.is-swap .areas-c__card-t,.is-swap .areas-c__card-k{animation:areas-rise .55s var(--e-out) both}
.is-swap .areas-a__card-t,.is-swap .areas-b__card-t,.is-swap .areas-c__card-t{animation-delay:.06s}
@keyframes areas-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ============================================================ A · THE SHOP RADAR */
.areas-a{padding:clamp(5rem,12vh,8rem) 0 clamp(4rem,10vh,7rem)}
.areas-a__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:clamp(2rem,4vw,4.5rem);align-items:center}
.areas-a__disc{position:relative;width:min(100%,86vh);aspect-ratio:1;margin:0 auto}
.areas-a__disc::before{content:"";position:absolute;inset:10.714%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#1f1e70 0,#141357 55%,#0b0a3a 100%);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 120px rgba(0,0,0,.45)}
.areas-a__sweep{position:absolute;inset:10.714%;border-radius:50%;overflow:hidden;pointer-events:none}
.areas-a__sweep i{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(255,60,70,0) 0deg,rgba(255,60,70,0) 250deg,rgba(255,60,70,.05) 300deg,rgba(255,60,70,.2) 352deg,rgba(255,120,126,.5) 359.4deg,rgba(255,255,255,0) 360deg);transform:rotate(var(--a,0deg));will-change:transform;opacity:0;transition:opacity 1.2s}
.areas-a.is-live .areas-a__sweep i{opacity:1}
.areas-a__svg{position:relative;width:100%;height:100%;overflow:visible;--u:1.6}
.areas-a__svg text{font-family:var(--f-sans);fill:#fff}
.areas-a__ticks line{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.areas-a__ticks line.b{stroke:rgba(255,255,255,.5)}
.areas-a__cp{font-family:var(--f-disp)!important;font-size:calc(var(--u) * 15px);text-anchor:middle;fill:rgba(255,255,255,.8)!important}
.areas-a__rim{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5}
.areas-a__axis{stroke:rgba(255,255,255,.07);stroke-width:1}
.areas-a__riv{fill:none;stroke:#8fb2ff;stroke-width:calc(var(--u) * .9px);stroke-linejoin:round;stroke-linecap:round;opacity:.3}
.areas-a__riv--columbia,.areas-a__riv--willamette{opacity:.6;stroke-width:calc(var(--u) * 1.3px)}
.areas-a__rl{font-family:var(--f-it)!important;font-style:italic;font-size:calc(var(--u) * 11.5px);fill:rgba(170,195,255,.75)!important;letter-spacing:.02em}
.areas-a__ring circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:2 6}
.areas-a__ring text{font-size:calc(var(--u) * 9.5px);letter-spacing:.14em;fill:rgba(255,255,255,.42)!important;text-transform:uppercase}
.areas-a__ring{transform-box:view-box;transform-origin:500px 500px;transform:scale(.55);opacity:0;transition:transform 1.4s var(--e-out),opacity 1s;transition-delay:calc(var(--i) * .12s)}
.areas-a__peak path{fill:rgba(255,255,255,.55)}
.areas-a__peak text{font-family:var(--f-it)!important;font-style:italic;font-size:calc(var(--u) * 11.5px);fill:rgba(255,255,255,.6)!important}
.areas-a__shop circle{fill:#fff;stroke:var(--red);stroke-width:6}
.areas-a__shop .areas-a__ping{fill:none;stroke:#ff5a60;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:areas-ping 2.6s infinite}
.areas-a__shop text{font-size:calc(var(--u) * 9.5px);letter-spacing:.18em;text-transform:uppercase;fill:#fff!important;font-weight:600}
@keyframes areas-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.areas-a__s{cursor:pointer;--g:0}
.areas-a__s>g>*{transition:opacity .3s}
.areas-a__halo{fill:rgba(255,70,80,.22);stroke:rgba(255,120,126,.6);stroke-width:1.2;opacity:var(--g);transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + var(--g) * .6))}
.areas-a__st{transform-box:fill-box;transform-origin:center;transform:translate3d(0,-60px,0) scale(.3);opacity:0;transition:transform .9s cubic-bezier(.3,1.5,.5,1),opacity .4s;transition-delay:calc(.5s + var(--i) * .08s)}
.areas-a__st path{fill:#ff4d55;stroke:#fff;stroke-width:calc(var(--g) * 3px);paint-order:stroke}
.areas-a__nm{font-size:calc(var(--u) * 11px);letter-spacing:.14em;text-transform:uppercase;font-weight:500;fill:rgba(255,255,255,calc(.62 + var(--g) * .38))!important;opacity:0;transition:opacity .8s;transition-delay:calc(.9s + var(--i) * .08s)}
.areas-a.is-live .areas-a__ring{transform:none;opacity:1}
.areas-a.is-live .areas-a__st{transform:scale(calc(1 + var(--g) * .3));opacity:1}
.areas-a.is-live .areas-a__s.is-sel .areas-a__st{transform:scale(1.55)}
.areas-a.is-live .areas-a__nm{opacity:1}
.areas-a__s.is-sel .areas-a__halo{opacity:1;transform:scale(1)}
.areas-a__s.is-sel .areas-a__nm{fill:#fff!important}
.areas-a__s:focus,.areas-a__s:focus-visible{outline:none}
.areas-a__s:focus-visible .areas-a__halo{opacity:1;stroke:#fff}
.areas-a.is-live .areas-a__st{transition-duration:.9s,.4s}
.areas-a.is-settled .areas-a__st{transition:transform .25s var(--e-out),opacity .4s;transition-delay:0s}

.areas-a__side{align-self:center}
.areas-a__now{color:var(--on-dark-50)}
.areas-a__card{padding:1.3rem 0 1.6rem;border-bottom:1px solid var(--line-dark);min-height:13.5rem}
.areas-a__card-n{font-size:clamp(2.4rem,3.6vw,3.6rem)}
.areas-a__card-t{font-size:1.2rem}
.areas-a__list{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem;margin:1rem 0 0;padding:0;list-style:none;counter-reset:a}
.areas-a__list a{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.2rem .6rem;padding:.62rem 0;border-bottom:1px solid var(--line-dark);transition:color .3s,padding .4s var(--e-out)}
.areas-a__list a span{font-family:var(--f-disp);text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em}
.areas-a__list a small{font-size:.66rem;letter-spacing:.1em;color:var(--on-dark-50);grid-column:1}
.areas-a__list a .ic{grid-row:1/3;grid-column:2;align-self:center;width:.95em;opacity:.35;transition:opacity .3s,transform .4s var(--e-out)}
.areas-a__list a:hover,.areas-a__list a.is-sel{padding-left:.5rem}
.areas-a__list a:hover span,.areas-a__list a.is-sel span{color:#ff5a60}
.areas-a__list a:hover .ic,.areas-a__list a.is-sel .ic{opacity:1;transform:translateX(3px)}
.areas-a__note{font-size:.74rem;color:var(--on-dark-50)!important;margin:1.2rem 0 0;max-width:40ch}

/* ============================================================ B · THE TILTED MAP */
.areas-b{padding:clamp(5rem,12vh,8rem) 0 0}
.areas-b__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;border-top:1px solid var(--line-dark)}
.areas-b__stage{position:relative;height:min(84vh,820px);min-height:560px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#05042a 0,#0b0a3c 45%,#100f4b 100%);contain:strict;touch-action:pan-y}
.areas-b__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05042a 0,rgba(5,4,42,.65) 12%,rgba(5,4,42,0) 34%),linear-gradient(0deg,rgba(16,15,75,.9) 0,rgba(16,15,75,0) 16%)}
.areas-b__plane{position:absolute;left:50%;top:50%;transform-origin:50% 50%;opacity:0;transition:opacity 1.4s var(--e-out);will-change:transform;backface-visibility:hidden}
.areas-b__plane img{display:block;width:100%;height:100%;max-width:none}
.areas-b.is-live .areas-b__plane{opacity:1}
.areas-b__fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.areas-b__ring{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.1;stroke-dasharray:3 7;opacity:0;transition:opacity 1.2s .4s}
.areas-b__ringt{font-family:var(--f-sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;fill:rgba(255,255,255,.55);opacity:0;transition:opacity 1.2s .6s}
.areas-b.is-live .areas-b__ring,.areas-b.is-live .areas-b__ringt{opacity:1}
.areas-b__arc{fill:none;stroke:#ff4d55;stroke-width:1.6;stroke-linecap:round;opacity:.85;transition:opacity .4s,stroke-width .4s}
.areas-b__arcglow{fill:none;stroke:rgba(255,77,85,.22);stroke-width:6;stroke-linecap:round;transition:opacity .4s}
.areas-b__col{stroke:rgba(255,255,255,.7);stroke-width:1.2;transition:opacity .4s}
.areas-b__foot{fill:rgba(255,77,85,.35);stroke:#ff4d55;stroke-width:1}
.areas-b__fx.has-sel .areas-b__arc,.areas-b__fx.has-sel .areas-b__arcglow,.areas-b__fx.has-sel .areas-b__col{opacity:.18}
.areas-b__fx .is-sel{opacity:1!important}
.areas-b__fx .areas-b__arc.is-sel{stroke-width:2.6}
.areas-b__pins{position:absolute;inset:0;z-index:2;pointer-events:none}
.areas-b__pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.5rem;pointer-events:auto;white-space:nowrap;opacity:0;transition:opacity .5s;will-change:transform}
.areas-b__pin.is-up{opacity:1}
.areas-b__pin i{width:22px;height:22px;flex:0 0 auto;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:background .3s,transform .4s var(--e-out)}
.areas-b__pin span{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(5,4,42,.9),0 0 2px rgba(5,4,42,.9)}
.areas-b__pin small{display:block;font-size:.62rem;letter-spacing:.1em;font-weight:500;color:rgba(255,255,255,.62)}
.areas-b__pin--off{text-align:center;background:rgba(10,9,52,.8);border:1px solid var(--line-dark);border-radius:999px;padding:.45rem 1.1rem}
.areas-b__pin--off i{display:none}
.areas-b__pin--off small{display:inline!important;margin-left:.6em}
.areas-b__pin.is-left{flex-direction:row-reverse;text-align:right}
.areas-b__pin:hover i,.areas-b__pin.is-sel i{background:#ff4d55;transform:scale(1.35)}
.areas-b__pins.has-sel .areas-b__pin:not(.is-sel){opacity:.35}
.areas-b__home{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.areas-b__home i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px var(--red),0 0 30px 8px rgba(255,60,70,.55)}
.areas-b__home span{position:absolute;left:50%;top:16px;transform:translateX(-50%);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:#fff;text-shadow:0 1px 10px rgba(5,4,42,.9)}
.areas-b__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-dark-50);font-family:var(--f-it);font-style:italic;transition:opacity .6s}
.areas-b.is-live .areas-b__ph{opacity:0}
.areas-b__att{position:absolute;right:.7rem;bottom:.5rem;z-index:3;font-size:10px;color:var(--on-dark-50)}
.areas-b__att a{color:var(--on-dark-70);text-decoration:underline}
.areas-b__card{position:absolute;right:clamp(1rem,2.4vw,2rem);top:clamp(1rem,2.4vw,2rem);z-index:3;width:min(330px,calc(100% - 2rem));padding:1.2rem 1.3rem 1.3rem;background:rgba(10,9,52,.86);border:1px solid var(--line-dark);border-radius:16px}
.areas-b__card-n{font-size:2rem}
.areas-b__card-t{font-size:1.05rem}
.areas-b__side{border-left:1px solid var(--line-dark);display:flex;flex-direction:column;max-height:min(84vh,820px);min-height:560px}
.areas-b__side>.lbl{padding:1.3rem 1.4rem 1rem;color:var(--on-dark-50);border-bottom:1px solid var(--line-dark)}
.areas-b__list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;overscroll-behavior:contain}
.areas-b__list a{display:grid;grid-template-columns:3.2rem 1fr auto;align-items:center;gap:.9rem;padding:.8rem 1.4rem;border-bottom:1px solid var(--line-dark);transition:background .35s,padding .45s var(--e-out)}
.areas-b__list b{font-family:var(--f-disp);font-weight:400;font-size:1.5rem;line-height:1;color:#ff5a60}
.areas-b__list b small{font-family:var(--f-sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;margin-left:.2em;color:var(--on-dark-50)}
.areas-b__list span{font-family:var(--f-disp);text-transform:uppercase;font-size:1.12rem;line-height:1.1}
.areas-b__list em{display:block;font-family:var(--f-it);font-style:italic;text-transform:none;font-size:.86rem;color:var(--on-dark-50);margin-top:.15rem}
.areas-b__list .ic{opacity:.3;transition:opacity .3s,transform .4s var(--e-out)}
.areas-b__list a:hover,.areas-b__list a.is-sel{background:var(--navy-3);padding-left:1.8rem}
.areas-b__list a:hover .ic,.areas-b__list a.is-sel .ic{opacity:1;transform:translateX(3px)}


/* ------------------------------------------------------------ B · light (the picked palette): pale paper map,
   navy roads and rivers, red arcs, red stars on navy columns, navy type */
.areas-b--light{background:#fff;color:var(--navy)}
.areas-b--light .areas-b__head .lbl{color:var(--ink-50)}
.areas-b--light .areas-b__grid{border-top:1px solid var(--line)}
.areas-b--light .areas-b__stage{background:linear-gradient(180deg,#fbfcfe 0,#eef2f9 100%)}
.areas-b--light .areas-b__stage::after{background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.85) 11%,rgba(255,255,255,0) 32%),linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 13%)}
.areas-b--light .areas-b__ring{stroke:rgba(16,15,75,.42)}
.areas-b--light .areas-b__ringt{fill:var(--navy);opacity:0}
.areas-b--light.is-live .areas-b__ringt{opacity:.7}
.areas-b--light .areas-b__arc{stroke:var(--red);stroke-width:1.9;opacity:.92}
.areas-b--light .areas-b__arcglow{stroke:rgba(194,13,21,.13);stroke-width:7}
.areas-b--light .areas-b__col{stroke:var(--navy);stroke-width:1.4;opacity:.75}
.areas-b--light .areas-b__foot{fill:rgba(194,13,21,.2);stroke:var(--red)}
.areas-b--light .areas-b__pin i{background:var(--red);filter:none}
.areas-b--light .areas-b__pin span{color:var(--navy);text-shadow:0 0 3px #fff,0 0 8px #fff,0 0 14px rgba(255,255,255,.9)}
.areas-b--light .areas-b__pin small{color:var(--ink-70)}
.areas-b--light .areas-b__pin:hover i,.areas-b--light .areas-b__pin.is-sel i{background:var(--navy)}
.areas-b--light .areas-b__pin--off{background:#fff;border-color:var(--line);box-shadow:0 6px 24px rgba(16,15,75,.12)}
.areas-b--light .areas-b__pin--off span{text-shadow:none}
.areas-b--light .areas-b__home i{background:var(--red);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--navy),0 0 26px 8px rgba(194,13,21,.28)}
.areas-b--light .areas-b__home span{color:var(--navy);text-shadow:0 0 3px #fff,0 0 10px #fff}
.areas-b--light .areas-b__ph{color:var(--ink-50)}
.areas-b--light .areas-b__att{color:var(--ink-50)}
.areas-b--light .areas-b__att a{color:var(--ink-70)}
.areas-b--light .areas-b__card{background:rgba(255,255,255,.95);border-color:var(--line);box-shadow:0 18px 50px rgba(16,15,75,.14)}
.areas-b--light .areas-b__card-k{color:var(--red)}
.areas-b--light .areas-b__card-n{color:var(--navy)}
.areas-b--light .areas-b__card-n small{color:var(--ink-50)}
.areas-b--light .areas-b__card-t{color:var(--navy)!important}
.areas-b--light .areas-b__card-m{color:var(--ink-50)!important}
.areas-b--light .areas-b__card-a{color:var(--navy);border-bottom-color:var(--red)}
.areas-b--light .areas-b__side{border-left-color:var(--line)}
.areas-b--light .areas-b__side>.lbl{color:var(--ink-50);border-bottom-color:var(--line)}
.areas-b--light .areas-b__list a{border-bottom-color:var(--line);color:var(--navy)}
.areas-b--light .areas-b__list b{color:var(--red)}
.areas-b--light .areas-b__list b small,.areas-b--light .areas-b__list em{color:var(--ink-50)}
.areas-b--light .areas-b__list a:hover,.areas-b--light .areas-b__list a.is-sel{background:var(--paper)}
.areas-b--light .areas-b__list a:hover span,.areas-b--light .areas-b__list a.is-sel span{color:var(--red)}

/* ============================================================ C · THE CONSTELLATION */
.areas-c{padding:clamp(5rem,12vh,8rem) 0 clamp(3rem,8vh,5rem);background:#08072e;overflow:visible}
.areas-c__pin{position:relative;height:300vh}
.areas-c__sky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(90% 70% at 55% 45%,#14135a 0,#0b0a3c 55%,#06052a 100%)}
.areas-c__svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.areas-c__riv{fill:none;stroke:#a9c1ff;stroke-width:1.3;opacity:.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.areas-c__rd{fill:none;stroke:#fff;stroke-width:.8;opacity:.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.areas-c__cl{stroke:#ff6b72;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.75;transform:scaleX(0);transition:transform 1.6s var(--e-out);transition-delay:calc(.3s + var(--i) * .1s)}
.areas-c.is-on .areas-c__cl{transform:none}
.areas-c__lines.has-sel .areas-c__cl{opacity:.2}
.areas-c__lines .areas-c__cl.is-sel{opacity:1;stroke:#fff}
.areas-c__marks{position:absolute;inset:0}
.areas-c__s,.areas-c__shop,.areas-c__note{position:absolute;left:0;top:0;will-change:transform}
.areas-c__s{display:block;width:0;height:0}
.areas-c__s i{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 9%,rgba(255,255,255,.55) 16%,rgba(160,185,255,.18) 38%,rgba(160,185,255,0) 70%);transform:scale(0);transition:transform 1s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(.5s + var(--i) * .1s)}
.areas-c__s i::after{content:"";position:absolute;inset:-12px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.55) 50%,transparent 100%) center/100% 1px no-repeat,linear-gradient(0deg,transparent 0,rgba(255,255,255,.55) 50%,transparent 100%) center/1px 100% no-repeat;animation:areas-tw 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes areas-tw{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1) rotate(8deg)}}
.areas-c.is-on .areas-c__s i{transform:scale(1)}
.areas-c__s span{position:absolute;left:16px;top:-.72em;font-family:var(--f-it);font-style:italic;font-size:clamp(1rem,1.35vw,1.3rem);white-space:nowrap;color:#fff;opacity:0;transition:opacity .6s,color .3s;text-shadow:0 0 14px #06052a}
.areas-c__s.is-l span{left:auto;right:16px}
.areas-c__s.is-lbl span{opacity:.92}
.areas-c__s:hover span,.areas-c__s.is-sel span{opacity:1;color:#ff8a8f}
.areas-c__s:hover i,.areas-c__s.is-sel i{transform:scale(1.5)}
.areas-c__shop i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 40px 10px rgba(255,60,70,.55)}
.areas-c__shop i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #ff6b72;animation:areas-ping 2.8s infinite}
.areas-c__shop span{position:absolute;right:14px;bottom:8px;opacity:0;transition:opacity .6s;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#ff8a8f}
.areas-c__shop.is-lbl span{opacity:1}
.areas-c__note{white-space:nowrap;transition:opacity .6s;pointer-events:none}
.areas-c__note--riv{font-family:var(--f-it);font-style:italic;font-size:.82rem;color:rgba(169,193,255,.75)}
.areas-c__note--rd{font-size:.58rem;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:.1em .4em}
.areas-c__note.is-off{opacity:0}
.areas-c__cap{position:absolute;left:var(--gut);bottom:clamp(1.2rem,4vh,2.4rem);pointer-events:none}
.areas-c__cap p{position:absolute;left:0;bottom:0;margin:0;white-space:nowrap;font-size:.9rem;color:var(--on-dark-70);opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s,transform .8s var(--e-out)}
.areas-c__cap p.is-on{opacity:1;transform:none}
.areas-c__cap .lbl{display:block;color:var(--on-dark-50);margin-bottom:.35rem}
.areas-c__cap em{font-family:var(--f-it);font-size:clamp(1.4rem,2.2vw,2rem);color:#fff;margin-right:.3em}
.areas-c__scale{position:absolute;left:var(--gut);top:calc(var(--hdr) + 1.4rem);display:grid;grid-template-columns:auto auto;align-items:end;gap:.35rem 1rem;color:var(--on-dark-50);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.areas-c__bar{position:relative;width:100px;height:7px}
.areas-c__bar i{position:absolute;left:0;top:0;width:100px;height:7px;border:1px solid rgba(255,255,255,.55);border-top:0;transform-origin:0 0;transform:scaleX(var(--sx,1))}
.areas-c__scale small{font-size:inherit;grid-row:1;grid-column:1}
.areas-c__scale .areas-c__bar{grid-row:2;grid-column:1}
.areas-c__scale b{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--f-disp);font-weight:400;font-size:1.05rem;letter-spacing:0;color:#fff;padding-left:.8rem;border-left:1px solid var(--line-dark);margin-left:var(--bw,100px)}
.areas-c__card{position:absolute;right:var(--gut);top:calc(var(--hdr) + 2.8rem);width:min(340px,calc(100% - 2 * var(--gut)));padding:1.2rem 1.3rem 1.3rem;background:rgba(8,7,46,.82);border:1px solid var(--line-dark);border-radius:16px;opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s,transform .6s var(--e-out);pointer-events:none}
.areas-c__card.is-on{opacity:1;transform:none;pointer-events:auto}
.areas-c__card-n{font-size:2rem}
.areas-c__card-t{font-size:1.05rem}
.areas-c__att{position:absolute;right:.7rem;top:calc(var(--hdr) + 1.2rem);font-size:10px;color:var(--on-dark-50)}
.areas-c__list{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:clamp(2rem,5vh,3rem)}
.areas-c__list a{display:inline-flex;align-items:baseline;gap:.5rem;border:1px solid var(--line-dark);border-radius:999px;padding:.55em 1.1em;font-family:var(--f-it);font-style:italic;font-size:1.02rem;transition:background .3s,color .3s,border-color .3s}
.areas-c__list a small{font-family:var(--f-sans);font-style:normal;font-size:.66rem;letter-spacing:.1em;color:var(--on-dark-50)}
.areas-c__list a:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ------------------------------------------------------------ tablet / phone */
@media (max-width:1100px){
  .areas-b__grid{grid-template-columns:1fr}
  .areas-b__side{border-left:0;max-height:none;min-height:0}
  .areas-b__list{overflow:visible;display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .areas-a__head,.areas-b__head,.areas-c__head{grid-template-columns:1fr;gap:1.2rem}
  .areas-a__grid{grid-template-columns:1fr;gap:1.2rem}
  .areas-a__disc{width:calc(100% + 2 * var(--gut) - 8px);margin:0 calc(4px - var(--gut))}
  .areas-a__card{min-height:0;padding-top:.9rem}
  .areas-b__stage{height:calc(62svh + 150px);min-height:600px}
  .areas-b__stage::after{background:linear-gradient(180deg,#05042a 0,#05042a 27%,rgba(5,4,42,.6) 36%,rgba(5,4,42,0) 50%),linear-gradient(0deg,rgba(16,15,75,.9) 0,rgba(16,15,75,0) 14%)}
  .areas-b--light .areas-b__stage::after{background:linear-gradient(180deg,#fff 0,#fff 27%,rgba(255,255,255,.7) 36%,rgba(255,255,255,0) 50%),linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 12%)}
  .areas-b--light .areas-b__card{background:#fff}
  .areas-b__list{grid-template-columns:1fr}
  .areas-b__card{left:.8rem;right:.8rem;top:.8rem;width:auto;padding:.8rem 1rem .9rem;background:rgba(10,9,52,.92)}
  .areas-b__card-t{font-size:.95rem;margin-bottom:.6rem}
  .areas-b__card-n{font-size:1.6rem}
  .areas-b__card-m{display:none}
  .areas-b__pin i{width:18px;height:18px}
  .areas-b__pin span{font-size:.6rem;letter-spacing:.1em}
  .areas-b__pin small{display:none}
  .areas-c__pin{height:240vh}
  .areas-c__cap{bottom:auto;top:calc(var(--hdr) + 3.6rem)}
  .areas-c__cap p{bottom:auto;top:0}
  .areas-c__cap em{font-size:1.3rem}
  .areas-c__card{left:.8rem;right:.8rem;top:auto;bottom:.8rem;width:auto;padding:.9rem 1rem 1rem}
  .areas-c__card-n{font-size:1.6rem}
  .areas-c__card-m{display:none}
  .areas-c__s span{font-size:.95rem}
  .areas-c__att{top:auto;bottom:.3rem;right:.6rem}
}
@media (max-width:520px){
  .areas-a__list{grid-template-columns:1fr}
  .areas-a__nm{font-size:calc(var(--u) * 9px);letter-spacing:.1em}
  .areas-a__s--dense .areas-a__nm{opacity:clamp(0,calc((var(--g) - .5) * 3),1)!important;transition:none}
  .areas-a__s--dense.is-sel .areas-a__nm{opacity:1!important}
  .areas-a__rl,.areas-a__peak text{font-size:calc(var(--u) * 9.5px)}
}
@media (prefers-reduced-motion:reduce){
  .areas-a__ring,.areas-a__st,.areas-a__nm,.areas-c__cl,.areas-c__s i{transition:none!important}
  .areas-c__pin{height:auto}
  .areas-c__sky{position:relative;height:88vh}
}

/* round 4: phones show everything desktop shows */
@media (max-width:899px){ .areas-b__card-m{display:block!important} }