/* ==========================================================================
   BASIXX — destination pages (country / city / index)
   Shares the tokens and type system of the marketing pages.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#141413;--surf:#1C1C1A;--surf2:#232321;--surf3:#2A2A28;--line:#363634;--line2:#454543;
  --neon:#EEFF00;--neon-dim:#C9D900;--white:#FFFFFF;--mut:#ABABA6;--dim:#76766F;
  --ok:#7CE38B;--warn:#FFB454;
  --fd:'Barlow Condensed',sans-serif;--fb:'Barlow',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--radius:14px;
  --shell:1440px;
}

html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--fb);background:var(--bg);color:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--neon);color:#141413}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}

/* ── announcement + nav (matches the marketing pages) ───────────────────── */
.ann{background:var(--neon);color:#141413;padding:9px 24px;display:flex;align-items:center;justify-content:space-between;font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.ann-icons{display:flex;gap:12px}
.ann-icons a{display:flex;align-items:center}

nav{background:rgba(20,20,19,.82);border-bottom:1px solid var(--line);padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav-logo{display:flex;align-items:center;gap:11px}
.logo-wm{font-family:var(--fd);font-size:23px;font-weight:900;letter-spacing:4px;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a:not(.nav-cta){font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--mut);transition:color .25s var(--ease);position:relative;padding:4px 0}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--neon);transition:width .3s var(--ease)}
.nav-links a:not(.nav-cta):hover,.nav-links a.is-active{color:var(--white)}
.nav-links a.is-active::after{width:100%}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{background:var(--neon);color:#141413;padding:11px 22px;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.nav-cta:hover{box-shadow:0 0 22px rgba(238,255,0,.32);transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs-bar{border-bottom:1px solid var(--line);background:var(--surf);padding:0 40px}
.crumbs{max-width:var(--shell);margin:0 auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 0;font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.crumbs a{transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--neon)}
.crumbs [aria-current]{color:var(--white)}
.crumb-sep{color:var(--line2)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.dest-hero{position:relative;padding:96px 40px 84px;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.dest-hero-bg{position:absolute;inset:0;z-index:-2}
.dest-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(65%) brightness(.34) contrast(1.08)}
.dest-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:
  radial-gradient(760px 520px at 78% 18%,rgba(238,255,0,.10) 0%,transparent 64%),
  linear-gradient(102deg,rgba(20,20,19,.96) 34%,rgba(20,20,19,.62) 100%)}
.dest-hero-inner{position:relative;max-width:var(--shell);margin:0 auto}
.dest-hero-flag{font-size:52px;line-height:1;margin-bottom:18px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));animation:flag-in .8s var(--ease) both}
@keyframes flag-in{from{opacity:0;transform:translateY(14px) scale(.86)}to{opacity:1;transform:none}}

.hero-eyebrow{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--neon);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:'';width:34px;height:2px;background:var(--neon);flex-shrink:0}
.hero-back{color:var(--neon);border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.hero-back:hover{border-color:var(--neon)}

.dest-hero h1{font-family:var(--fd);font-size:clamp(48px,7vw,104px);font-weight:900;line-height:.84;text-transform:uppercase;letter-spacing:-1px;margin-bottom:22px}
.dest-hero h1 .acc{color:var(--neon)}
.dest-hero-lead{font-size:clamp(16px,1.7vw,19px);font-weight:300;color:var(--mut);line-height:1.65;max-width:560px}

.hero-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:42px;border-top:1px solid var(--line2);max-width:720px}
.hero-stat{display:flex;flex-direction:column;gap:4px;padding:22px 34px 0 0}
.hero-stat+.hero-stat{padding-left:34px;border-left:1px solid var(--line2);margin-top:22px;padding-top:0}
.hero-stat:first-child{padding-top:22px}
.hero-stat-v{font-family:var(--fd);font-size:40px;font-weight:900;color:var(--neon);line-height:1;letter-spacing:-.5px}
.hero-stat-l{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--mut)}

/* ── toolbar: search + filters ──────────────────────────────────────────── */
.toolbar{position:sticky;top:72px;z-index:40;background:rgba(20,20,19,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:20px 40px 14px}
.toolbar-inner{max-width:var(--shell);margin:0 auto;display:flex;flex-direction:column;gap:14px}

.searchbox{display:flex;align-items:center;gap:14px;background:var(--surf2);border:1px solid var(--line2);border-radius:var(--radius);padding:0 18px;height:62px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.searchbox:focus-within{border-color:rgba(238,255,0,.55);box-shadow:0 0 0 4px rgba(238,255,0,.09);background:var(--surf3)}
.searchbox svg{color:var(--dim);flex-shrink:0;transition:color .3s var(--ease)}
.searchbox:focus-within svg{color:var(--neon)}
.searchbox input{flex:1;min-width:0;background:none;border:none;outline:none;font-size:17px;font-weight:300;color:var(--white)}
.searchbox input::placeholder{color:var(--dim)}
.searchbox input::-webkit-search-cancel-button{display:none}
.search-clear{font-size:24px;line-height:1;color:var(--dim);padding:0 4px;transition:color .2s var(--ease)}
.search-clear:hover{color:var(--white)}

.filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chip{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--mut);background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.chip:hover{color:var(--white);border-color:var(--line2);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:#141413}
.chip--reset{color:var(--dim);border-style:dashed}

.select{position:relative;display:inline-flex;align-items:center;background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:0 14px 0 16px;height:40px;transition:border-color .25s var(--ease)}
.select:hover{border-color:var(--line2)}
.select:focus-within{border-color:rgba(238,255,0,.5)}
.select-label{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-right:8px;pointer-events:none}
.select select{appearance:none;-webkit-appearance:none;background:none;border:none;outline:none;font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--white);padding-right:18px;cursor:pointer}
.select select option{background:var(--surf2);color:var(--white);font-family:var(--fb);letter-spacing:0;text-transform:none}
.select::after{content:'';position:absolute;right:16px;width:6px;height:6px;border-right:1.6px solid var(--mut);border-bottom:1.6px solid var(--mut);transform:translateY(-2px) rotate(45deg);pointer-events:none}
.select.is-active{border-color:var(--neon)}
.select.is-active .select select{color:var(--neon)}

.result-count{max-width:var(--shell);margin:12px auto 0;font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--dim)}

/* ── results layout ─────────────────────────────────────────────────────── */
.results{max-width:var(--shell);margin:0 auto;padding:40px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:32px;align-items:start}
.results-list{min-width:0}
.gym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}

/* ── gym card ───────────────────────────────────────────────────────────── */
.gym-card{position:relative;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .45s var(--ease),border-color .35s var(--ease),box-shadow .45s var(--ease);contain:layout paint}
.gym-card:hover{transform:translateY(-6px);border-color:rgba(238,255,0,.42);box-shadow:0 24px 54px rgba(0,0,0,.46)}
.gym-card.is-focused{border-color:var(--neon);box-shadow:0 0 0 1px var(--neon),0 24px 54px rgba(0,0,0,.5)}
/* Softer than is-focused: applied while a map pin is merely hovered, so you can
   see which listing a pin belongs to without committing to it. */
.gym-card.is-linked{border-color:rgba(238,255,0,.6);box-shadow:0 0 0 1px rgba(238,255,0,.35),0 18px 40px rgba(0,0,0,.42)}
.gym-card[hidden]{display:none}

.gc-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surf2)}
.gc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .5s var(--ease);filter:brightness(.88) saturate(.94)}
.gym-card:hover .gc-media img{transform:scale(1.07);filter:brightness(1) saturate(1)}
.gc-media-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,19,.86) 0%,rgba(20,20,19,.14) 46%,transparent 100%)}
.gc-price{position:absolute;left:14px;bottom:13px;font-family:var(--fd);font-size:26px;font-weight:900;color:var(--neon);letter-spacing:-.4px;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.gc-price-from{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:3px}
.gc-price-unit{font-size:13px;font-weight:700;color:var(--mut)}
.gc-status{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(20,20,19,.82);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:999px;padding:6px 11px;font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut)}
.gc-status .dot{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.gc-status--open{color:var(--ok)}
.gc-status--open .dot{background:var(--ok);box-shadow:0 0 8px rgba(124,227,139,.8)}
.gc-status--closed{color:var(--warn)}
.gc-status--closed .dot{background:var(--warn)}

.gc-body{display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px;flex:1}
.gc-head{display:flex;align-items:flex-start;gap:12px}
.gc-logo{width:46px;height:46px;border-radius:11px;object-fit:cover;flex-shrink:0;background:var(--surf3);border:1px solid var(--line2)}
.gc-logo--mono{display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:17px;font-weight:900;letter-spacing:1px;color:var(--neon);background:linear-gradient(145deg,var(--surf3),var(--surf2))}
.gc-titles{flex:1;min-width:0}
.gc-name{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:-.2px;line-height:1.08;text-transform:uppercase;margin-bottom:5px}
.gc-place{font-size:13px;font-weight:300;color:var(--mut);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gc-flag{font-size:13px}
.gc-country{color:var(--dim)}
.gc-rating{display:inline-flex;align-items:center;gap:5px;font-family:var(--fd);font-size:14px;font-weight:800;color:var(--neon);flex-shrink:0;padding-top:3px}
.gc-rating--new{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}

.gc-passes{display:flex;flex-wrap:wrap;gap:7px}
.pass-chip{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);background:var(--surf2);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
.pass-chip em{font-style:normal;color:var(--white)}
.pass-chip--muted{color:var(--dim);border-style:dashed}

.gc-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:4px}
.gc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--neon);color:#141413;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:13px 16px;border-radius:9px;transition:box-shadow .3s var(--ease),transform .25s var(--ease)}
.gc-btn span{transition:transform .3s var(--ease)}
.gc-btn:hover{box-shadow:0 8px 26px rgba(238,255,0,.3)}
.gc-btn:hover span{transform:translateX(4px)}
.gc-map{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:9px;padding:13px 14px;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.gc-map:hover{color:var(--neon);border-color:rgba(238,255,0,.5);background:rgba(238,255,0,.06)}

/* ── map panel ──────────────────────────────────────────────────────────── */
.map-panel{position:sticky;top:196px}
.map-shell{position:relative;height:calc(100vh - 236px);min-height:520px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surf)}
.map-canvas{position:absolute;inset:0}
.map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--surf);font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--dim);transition:opacity .5s var(--ease);pointer-events:none}
.map-placeholder[hidden]{display:none}
.map-spinner{width:26px;height:26px;border:2px solid var(--line2);border-top-color:var(--neon);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Leaflet surface, restyled to the BASIXX palette */
.leaflet-container{background:#0f0f0e;font-family:var(--fb)}
.leaflet-tile{filter:grayscale(96%) invert(1) contrast(.82) brightness(.9) sepia(12%) hue-rotate(190deg)}
.leaflet-control-zoom a{background:var(--surf2)!important;color:var(--white)!important;border-color:var(--line)!important}
.leaflet-control-zoom a:hover{background:var(--surf3)!important;color:var(--neon)!important}
.leaflet-control-attribution{background:rgba(20,20,19,.78)!important;color:var(--dim)!important;font-size:9px!important}
.leaflet-control-attribution a{color:var(--mut)!important}

/* Location pins, drawn to match the BASIXX mobile app: a narrow black teardrop
   with a solid yellow disc, pointing at the exact address. The gym name slides
   out on hover, focus or selection rather than being baked into the pin. */
.bx-pin{cursor:pointer;background:none;border:0;overflow:visible}
.bx-pin:hover,.bx-pin.is-active,.bx-pin:focus-visible{z-index:1200!important}
.bx-pin-head{position:relative;display:block;width:26px;height:36px;transform-origin:50% 100%;transition:transform .3s var(--ease),filter .3s var(--ease)}
.bx-pin-head svg{position:absolute;inset:0;width:26px;height:36px;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.bx-pin-body{fill:#141413;transition:fill .3s var(--ease)}
.bx-pin-disc{fill:var(--neon);transition:fill .3s var(--ease),r .3s var(--ease)}
.bx-pin:hover .bx-pin-head,.bx-pin:focus-visible .bx-pin-head,.bx-pin.is-active .bx-pin-head{transform:scale(1.2) translateY(-3px);filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.bx-pin:hover .bx-pin-disc,.bx-pin:focus-visible .bx-pin-disc,.bx-pin.is-active .bx-pin-disc{r:8}
.bx-pin.is-active .bx-pin-body{fill:var(--neon)}
.bx-pin.is-active .bx-pin-disc{fill:#141413}
.bx-pin:focus-visible{outline:none}
.bx-pin:focus-visible .bx-pin-head svg{filter:drop-shadow(0 0 3px var(--neon)) drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.bx-pin-name{position:absolute;left:50%;bottom:42px;transform:translate(-50%,6px);white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;padding:5px 9px;border-radius:7px;background:var(--neon);color:#141413;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 8px 20px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.bx-pin:hover .bx-pin-name,.bx-pin:focus-visible .bx-pin-name,.bx-pin.is-active .bx-pin-name{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.bx-pin-head,.bx-pin-name{transition:none}}
/* Fingers need more than a 26px teardrop — grow the hit area, not the artwork. */
@media (pointer:coarse){.bx-pin::after{content:"";position:absolute;left:-10px;top:-6px;width:46px;height:48px}}
.leaflet-popup-content-wrapper{background:var(--surf2);color:var(--white);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.leaflet-popup-tip{background:var(--surf2);border:1px solid var(--line2)}
.leaflet-popup-content{margin:12px 14px;font-size:13px;line-height:1.5}
.leaflet-popup-content strong{font-family:var(--fd);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:3px}
.leaflet-popup-content .pop-meta{color:var(--mut);font-weight:300}
.leaflet-popup-content .pop-price{color:var(--neon);font-family:var(--fd);font-weight:800;letter-spacing:1px}
.leaflet-container a.leaflet-popup-close-button{color:var(--dim)}

/* ── load more / empty ──────────────────────────────────────────────────── */
.load-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:28px;padding:18px;border:1px solid var(--line2);border-radius:var(--radius);font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--mut);transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.load-more:hover{color:var(--neon);border-color:rgba(238,255,0,.45);background:rgba(238,255,0,.05)}
.load-more[hidden]{display:none}

.empty{display:none;padding:64px 32px;text-align:center;border:1px dashed var(--line2);border-radius:var(--radius);background:var(--surf)}
.empty.is-visible{display:block}
.empty h3{font-family:var(--fd);font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:-.4px;margin-bottom:10px}
.empty p{color:var(--mut);font-weight:300;font-size:15px}

/* ── map FAB (mobile) ───────────────────────────────────────────────────── */
.map-fab{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:55;align-items:center;gap:9px;background:var(--neon);color:#141413;border-radius:999px;padding:14px 26px;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;box-shadow:0 14px 36px rgba(0,0,0,.5)}

/* ── generic sections ───────────────────────────────────────────────────── */
.sec{padding:104px 40px;border-top:1px solid var(--line)}
.sec-inner{max-width:var(--shell);margin:0 auto}
.eyebrow{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--neon);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--neon);flex-shrink:0}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}
.sec h2{font-family:var(--fd);font-size:clamp(38px,5vw,72px);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-1px;margin-bottom:22px}
.sec h2 .acc{color:var(--neon)}
.sec-lead{font-size:17px;font-weight:300;color:var(--mut);line-height:1.7;max-width:520px}
.text-link{display:inline-flex;align-items:center;gap:9px;margin-top:28px;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--neon);transition:gap .25s var(--ease)}
.text-link:hover{gap:15px}

/* city links */
.city-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;margin-top:52px;background:var(--line);border:1px solid var(--line)}
.city-link{display:flex;align-items:center;gap:12px;padding:24px 26px;background:var(--bg);transition:background .3s var(--ease),padding-left .3s var(--ease)}
.city-link:hover{background:var(--surf2);padding-left:32px}
.city-link-name{font-family:var(--fd);font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-.2px}
.city-link-meta{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim)}
.city-link-arrow{margin-left:auto;color:var(--neon);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.city-link:hover .city-link-arrow{opacity:1;transform:none}

/* country pills */
.country-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}
.country-pill{display:inline-flex;align-items:center;gap:11px;background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:12px 20px;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.country-pill:hover{border-color:rgba(238,255,0,.45);transform:translateY(-3px);background:var(--surf2)}
.country-pill-flag{font-size:19px;line-height:1}
.country-pill-name{font-family:var(--fd);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.country-pill-count{font-family:var(--fd);font-size:11px;font-weight:700;color:var(--neon);background:rgba(238,255,0,.11);border-radius:999px;padding:3px 9px;letter-spacing:1px}

/* CTA */
.sec--cta{background:var(--surf);text-align:center}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta-inner .sec-lead{max-width:520px;margin-bottom:36px}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-n{background:var(--neon);color:#141413;padding:17px 36px;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;border-radius:9px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-n:hover{box-shadow:0 8px 30px rgba(238,255,0,.34);transform:translateY(-2px)}
.btn-n span{transition:transform .3s var(--ease)}
.btn-n:hover span{transform:translateX(4px)}
.btn-o{background:transparent;color:var(--white);padding:17px 36px;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;border:1px solid var(--line2);border-radius:9px;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.btn-o:hover{border-color:var(--white);background:rgba(255,255,255,.04);transform:translateY(-2px)}

/* ── destinations index grid ────────────────────────────────────────────── */
.sec--dest-grid{border-top:none;padding-top:76px}
/* min() keeps the track from overflowing its container on narrow screens. */
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px}
.dest-card{position:relative;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.dest-card:hover{transform:translateY(-8px);border-color:rgba(238,255,0,.45);box-shadow:0 28px 62px rgba(0,0,0,.48)}
.dest-card:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.dest-card.is-highlighted{border-color:var(--neon);box-shadow:0 0 0 2px rgba(238,255,0,.35),0 28px 62px rgba(0,0,0,.48)}
.dest-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--surf2)}
.dest-card-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(55%) brightness(.6);transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.dest-card:hover .dest-card-media img{transform:scale(1.07);filter:grayscale(0%) brightness(.78)}
.dest-card-body{position:relative;padding:26px 26px 24px;flex:1;display:flex;flex-direction:column;container-type:inline-size}
.dest-card-flag{position:absolute;top:-28px;left:26px;font-size:40px;line-height:1;filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))}
/* Long names — Netherlands, Czech Republic — were running out of the column.
   The size now tracks the card's own width, and anything still too long wraps
   onto a second line instead of being clipped. Never abbreviated. */
.dest-card-name{font-family:var(--fd);font-size:30px;font-size:clamp(25px,9cqw,34px);font-weight:900;text-transform:uppercase;letter-spacing:-.6px;line-height:1.05;margin:16px 0 8px;max-width:100%;overflow-wrap:break-word;hyphens:none;text-wrap:balance}
.dest-card-count{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.dest-card-regions{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.dest-card-regions li{font-size:12px;font-weight:400;color:var(--mut);background:var(--surf2);border:1px solid var(--line);border-radius:6px;padding:5px 10px}
.dest-card-foot{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dest-card-price{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--neon)}
.dest-card-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--white);transition:gap .25s var(--ease),color .25s var(--ease)}
.dest-card:hover .dest-card-cta{gap:14px;color:var(--neon)}

/* ── one gym's own page ─────────────────────────────────────────────────── */
/* The header is a contained block, not a banner.
   Gym photography arrives at whatever size the gym happens to have — a phone
   portrait 679px across, a 414px square from a social profile — and a full-bleed
   hero had to blow that up across the viewport, which is what made these
   headers soft, washed out and hard to read behind their own gradient. Copy and
   photography now sit beside each other: each photo keeps its own proportions
   inside a frame no wider than the file can genuinely fill, nothing is printed
   on top of it, and no filter is applied. */
.gym-head{padding:56px 40px 64px;border-bottom:1px solid var(--line)}
.gym-head-inner{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.gym-head-copy{min-width:0}
.gym-head-title{display:flex;align-items:center;gap:22px;margin-top:6px}
.gym-head-naming{min-width:0}
.gym-head-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
.gym-head-actions .btn-n,.gym-head-actions .btn-o{padding:15px 28px;font-size:12px}

/* The photo block: one contained frame, or a main tile with up to two smaller
   ones beside it. Every image is taken out of flow so a tile's height comes
   from its frame alone — which is what stops a tall upload from deciding how
   tall the header is. */
.gym-head-media{display:flex;gap:12px;align-items:stretch;width:100%;max-width:560px;margin-left:auto}
.gym-head-shot{position:relative;margin:0;min-width:0;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--surf2)}
.gym-head-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* --shot-ar is the uploaded photo's own width/height, clamped server-side to a
   range the layout can hold, so `cover` trims an edge rather than the subject.
   --shot-cap then bounds the height of a single portrait frame by limiting how
   wide it may be. */
.gym-head-shot--main{flex:1 1 62%;aspect-ratio:var(--shot-ar,1.4)}
.gym-head-media--one .gym-head-shot--main{flex:0 1 auto;width:100%;max-width:calc(var(--shot-cap,460px) * var(--shot-ar,1.4));margin-left:auto}
.gym-head-side{flex:1 1 38%;min-width:0;display:flex;flex-direction:column;gap:12px}
.gym-head-side .gym-head-shot{flex:1 1 0;min-height:0}
/* Only rendered when the gallery holds more than the header shows. */
.gym-head-more{position:absolute;right:8px;bottom:8px;padding:7px 11px;border-radius:99px;background:rgba(20,20,19,.82);border:1px solid var(--line2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--fd);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--white);transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.gym-head-more:hover,.gym-head-more:focus-visible{background:var(--neon);border-color:var(--neon);color:#141413}

.gym-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--mut);transition:color .25s var(--ease),gap .25s var(--ease)}
.gym-back:hover,.gym-back:focus-visible{color:var(--neon);gap:14px}
/* The gym's own mark, beside its name. Logos arrive on every kind of
   background — most are on white — so the tile is light and padded rather than
   transparent, which would leave dark marks invisible on the dark page. */
.gym-logo{flex:0 0 auto;width:92px;height:92px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:20px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.5);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.gym-logo img{width:100%;height:100%;object-fit:contain}
.gym-title{font-family:var(--fd);font-size:clamp(34px,4vw,60px);font-weight:900;line-height:.92;text-transform:uppercase;letter-spacing:-1px;overflow-wrap:break-word}
.gym-place{margin-top:12px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:400;color:var(--mut)}
.gym-flag{font-size:20px;line-height:1}
.gym-chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.gym-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line2);border-radius:99px;background:var(--surf);font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--white)}
.gym-chip-sub{color:var(--dim);letter-spacing:1.2px}
.gym-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.gym-chip--open .dot{background:var(--ok)}
.gym-chip--closed .dot{background:var(--warn)}
.gym-chip--price{border-color:rgba(238,255,0,.5);color:var(--neon)}

.gym-intro{max-width:820px}
.gym-description{font-size:clamp(16px,1.7vw,19px);font-weight:300;color:var(--mut);line-height:1.75}
.gym-description+.gym-description{margin-top:18px}

/* Uploaded photography arrives in whatever shape the gym shot it — a phone
   held upright as often as not. A fixed 3:2 frame cropped the tops and bottoms
   off every portrait photo, so the gallery is a column layout instead: each
   figure is as tall as its own image, and nothing is reshaped or cut. */
.gym-gallery{columns:3 260px;column-gap:16px;margin-top:34px}
.gym-shot{break-inside:avoid;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surf)}
.gym-shot img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.gym-shot:hover img{transform:scale(1.04)}

.gym-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.gym-panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;height:100%}
.gym-panel-title{font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;color:var(--neon);margin-bottom:20px}
/* Shown when the database holds no confirmed detail for a gym. Saying where
   the information lives beats inventing facilities the gym may not have. */
.gym-panel-note{font-size:14px;font-weight:300;color:var(--dim);line-height:1.7}
.gym-amenities{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.gym-amenities li{font-size:13px;font-weight:400;color:var(--mut);background:var(--surf2);border:1px solid var(--line);border-radius:7px;padding:8px 12px}
.gym-hours{width:100%;border-collapse:collapse;font-size:14px}
.gym-hours th{text-align:left;font-weight:400;color:var(--mut);padding:8px 0}
.gym-hours td{text-align:right;font-weight:500;color:var(--white);padding:8px 0;font-variant-numeric:tabular-nums}
.gym-hours td.is-closed{color:var(--dim);font-weight:300}
.gym-hours tr+tr th,.gym-hours tr+tr td{border-top:1px solid var(--line)}
.gym-open-247{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--ok)}
.gym-open-247 .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.gym-passes{list-style:none;display:flex;flex-direction:column;gap:2px}
.gym-passes li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
.gym-passes li+li{border-top:1px solid var(--line)}
.gym-pass-name{font-size:14px;font-weight:400;color:var(--mut)}
.gym-pass-price{font-family:var(--fd);font-size:19px;font-weight:900;letter-spacing:.6px;color:var(--neon)}
.gym-pass-btn{margin-top:auto;padding-top:17px;align-self:flex-start}
.gym-panel .gym-pass-btn{margin-top:24px}

.gym-where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:start}
.gym-address{font-style:normal;font-size:16px;font-weight:300;color:var(--mut);line-height:1.85;margin-top:8px}
.gym-directions{margin-top:26px;padding:14px 26px;font-size:12px}
.gym-where-map{position:relative;min-height:380px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surf)}
.gym-where-map .gym-panel-note{padding:28px}
/* Only one pin on this map, so its label is always on rather than on hover. */
.bx-pin.is-labelled .bx-pin-name{opacity:1;transform:translate(-50%,0)}

.gym-access{max-width:860px}
.gym-steps{list-style:none;counter-reset:step;margin-top:32px;display:flex;flex-direction:column;gap:18px}
.gym-steps li{counter-increment:step;position:relative;padding-left:52px;font-size:15px;font-weight:300;color:var(--mut);line-height:1.7}
.gym-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--neon);color:#141413;font-family:var(--fd);font-size:15px;font-weight:900}
.gym-steps strong{color:var(--white);font-weight:600}
.gym-access-note{margin-top:26px;font-size:14px;font-weight:300;color:var(--dim);line-height:1.7;max-width:62ch}
.gym-access .cta-btns{margin-top:34px}

/* The nearby strip reuses the gym card, but there is no listing map beside it
   for its "Map" button to talk to. */
.gym-grid--static{margin-top:34px}
.gym-grid--static .gc-map{display:none}
.gym-grid--static .gc-btn{flex:1 1 auto}
.sec--gym-foot{padding-top:56px;padding-bottom:72px}
.gym-foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.gym-foot-links .text-link{margin-top:0}

/* Below this the copy column would be too narrow to read beside the photos, so
   the header becomes one column: naming, then the photo block at full width.
   900px is also the breakpoint the header's `sizes` attributes are written
   against, so the browser keeps picking the right file from the srcset. */
@media(max-width:900px){
  .gym-head{padding:40px 20px 48px}
  .gym-head-inner{grid-template-columns:minmax(0,1fr);gap:34px}
  .gym-head-media{max-width:none;margin-left:0}
  .gym-head-media--one .gym-head-shot--main{--shot-cap:340px;margin-left:0}
  .gym-head-actions{margin-top:28px}
}
@media(max-width:980px){
  .gym-logo{width:76px;height:76px;border-radius:16px}
  .gym-where{grid-template-columns:1fr;gap:30px}
  .gym-where-map{min-height:300px}
}
@media(max-width:560px){
  /* Below ~340px the 300px column would overflow rather than wrap. */
  .gym-panels{grid-template-columns:minmax(0,1fr)}
  .gym-gallery{columns:1}
  .gym-panel{padding:22px}
  .gym-chips{gap:8px}
  .gym-chip{padding:8px 12px;font-size:11px}
  .gym-steps li{padding-left:44px}
  .gym-steps li::before{width:30px;height:30px;font-size:14px}
  .gym-head-title{gap:16px}
  /* Two thumbnails in a third of a phone screen would be too small to read, so
     the photo block turns from a row into a stack: the main photo at full
     width, the other two side by side beneath it. */
  .gym-head-media{flex-direction:column}
  .gym-head-shot--main{flex:0 0 auto;width:100%}
  .gym-head-side{flex:0 0 auto;flex-direction:row}
  .gym-head-side .gym-head-shot{flex:1 1 0;aspect-ratio:1.25}
  .gym-head-actions .btn-n,.gym-head-actions .btn-o{flex:1 1 100%;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .gym-shot img,.gym-back,.gym-head-more{transition:none}
  .gym-shot:hover img{transform:none}
}

/* ── request your gym ───────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec--request{border-top:1px solid var(--line);background:var(--surf)}
.request-inner{text-align:center;max-width:720px}
.request-inner h2{margin-bottom:14px}
.request-inner .sec-lead{margin:0 auto 28px}
/* Slim variant, directly under a country's gym listing. */
.request-slim{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:26px 28px;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius)}
.request-slim-copy{flex:1 1 320px;min-width:0}
.request-slim-title{font-family:var(--fd);font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.2px;line-height:1.1;margin-bottom:6px;overflow-wrap:break-word}
.request-slim-text{font-size:14px;font-weight:300;color:var(--dim);line-height:1.65;max-width:52ch}
/* BASIXX yellow, not the dark outline it used to be: the banner sits on a dark
   panel, so a transparent button disappeared into it. */
.request-slim-btn{flex:0 0 auto;box-shadow:0 6px 20px rgba(238,255,0,.18)}
.request-slim-btn:hover,.request-slim-btn:focus-visible{background:#F6FF4D;box-shadow:0 10px 34px rgba(238,255,0,.42);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.request-slim-btn{transition:none}.request-slim-btn:hover,.request-slim-btn:focus-visible{transform:none}}

/* ── request form page ──────────────────────────────────────────────────── */
.form-wrap{max-width:640px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--white)}
.field .req{color:var(--neon)}
.field .hint{font-size:12px;font-weight:300;color:var(--dim)}
.field input,.field textarea{width:100%;background:var(--surf2);border:1px solid var(--line2);border-radius:9px;padding:13px 14px;color:var(--white);font-family:var(--fb);font-size:15px;font-weight:300;transition:border-color .25s var(--ease),background .25s var(--ease)}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:hover,.field textarea:hover{border-color:var(--mut)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--neon);background:var(--surf3)}
.field .err{font-size:12px;font-weight:400;color:#FF8A7A;min-height:0}
.field.is-invalid input,.field.is-invalid textarea{border-color:#FF8A7A}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}
.form-note{font-size:12px;font-weight:300;color:var(--dim);max-width:46ch}
.form-submit[data-loading="1"]{pointer-events:none;opacity:.7}
/* .btn-n nudges every span right on hover — only the arrow should move here. */
.form-submit:hover .spin,.form-submit:hover .form-submit-label{transform:none}
.form-submit .spin{display:none;width:14px;height:14px;border:2px solid rgba(20,20,19,.35);border-top-color:#141413;border-radius:50%;animation:formspin .7s linear infinite}
.form-submit[data-loading="1"] .spin{display:inline-block}
@keyframes formspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.form-submit .spin{animation-duration:2.4s}}
.form-status{margin-top:22px;padding:16px 18px;border-radius:10px;font-size:14px;line-height:1.6;border:1px solid var(--line2);background:var(--surf2)}
.form-status--ok{border-color:rgba(238,255,0,.5);background:rgba(238,255,0,.08)}
.form-status--ok strong{color:var(--neon)}
.form-status--err{border-color:rgba(255,138,122,.5);background:rgba(255,138,122,.08)}
.form-status--err strong{color:#FF8A7A}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .request-slim{padding:22px 20px}
  .request-slim-btn{width:100%;text-align:center}
}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--surf);border-top:1px solid var(--line);padding:76px 40px 0}
.footer-inner{max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:56px;padding-bottom:56px}
.flogo{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.fwm{font-family:var(--fd);font-size:18px;font-weight:900;letter-spacing:3.5px;text-transform:uppercase}
.fcol-tag{font-size:14px;font-weight:300;color:var(--dim);line-height:1.7;max-width:320px}
.flinks{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fcol h4{font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--white);margin-bottom:18px}
.fcol a{display:block;font-size:14px;font-weight:300;color:var(--dim);margin-bottom:11px;transition:color .25s var(--ease)}
.fcol a:hover{color:var(--neon)}
.fbottom{max-width:var(--shell);margin:0 auto;border-top:1px solid var(--line);padding:24px 0 30px;font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dim);text-align:center}

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.reveal{opacity:1}
html.js-anim .reveal{opacity:0;transform:translateY(28px)}
html.js-anim .reveal.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js-anim .gym-card{opacity:0;transform:translateY(22px)}
html.js-anim .gym-card.in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--stagger,0ms),transform .6s var(--ease) var(--stagger,0ms)}
html.js-anim .dest-card{transition-delay:var(--stagger,0ms)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .results{grid-template-columns:minmax(0,1fr) 380px}
}
@media(max-width:980px){
  nav{padding:0 20px;position:relative}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(20,20,19,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:0 20px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .35s var(--ease),opacity .25s var(--ease),padding .35s var(--ease);z-index:70}
  .nav-links.open{max-height:400px;opacity:1;pointer-events:auto;padding:8px 20px 18px}
  .nav-links a{padding:14px 0!important;border-bottom:1px solid var(--line)}
  .nav-cta{text-align:center;margin-top:12px;border-bottom:none!important}

  .dest-hero{padding:56px 20px 48px}
  .crumbs-bar{padding:0 20px}
  .toolbar{top:72px;padding:16px 20px 12px}
  .filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
  .filters::-webkit-scrollbar{display:none}
  .chip,.select{flex-shrink:0}

  .results{grid-template-columns:minmax(0,1fr);padding:28px 20px 96px;gap:0}
  .map-panel{position:fixed;inset:0;z-index:80;background:var(--bg);padding:60px 16px 92px;display:none}
  .map-panel.is-open{display:block}
  .map-shell{height:100%;min-height:0}
  .map-fab{display:inline-flex}

  .sec{padding:72px 20px}
  .footer-inner{grid-template-columns:1fr;gap:40px;padding-bottom:40px}
  .flinks{grid-template-columns:1fr 1fr}
  footer{padding:56px 20px 0}
  .hero-stat{padding-right:26px}
  .hero-stat+.hero-stat{padding-left:26px}
}
@media(max-width:560px){
  .gym-grid{grid-template-columns:1fr}
  .dest-hero-flag{font-size:42px}
  .hero-stat-v{font-size:32px}
  .dest-grid{grid-template-columns:1fr}
  .ann span{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js-anim .reveal,html.js-anim .gym-card{opacity:1;transform:none}
}