/* ---------- Header logo (dark nav so the white tagline shows) ---------- */
.nav{background:rgba(6,15,42,.96);border-color:rgba(255,255,255,.06)}
.nav .menu a:not(.btn){color:#dbe7ff}.nav .menu a:not(.btn):hover{color:var(--sky)}
.nav .menu-toggle{color:#fff}
@media(max-width:900px){.nav .menu{background:var(--deep)}}
.logo-img{height:46px;width:auto;transition:height .3s}
.nav.scrolled .logo-img{height:38px}
footer .logo-img{height:64px;width:auto}

/* ---------- Service card spacing ---------- */
.svc{min-height:380px;padding:26px 24px 28px}
.svc h3{font-size:.92rem;line-height:1.35}
.svc .go{bottom:auto;top:20px;right:20px}
.svc-more{margin-top:48px}
.stats{margin-top:64px}

/* ---------- Pricing card spacing ---------- */
.price-grid{gap:28px;align-items:stretch;padding-top:14px}
.price-card{padding:36px 30px 30px}
.price-card h3{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
.price{margin:12px 0 6px}
.price-card ul{margin:18px 0 28px}
.price-card li{padding:10px 0;line-height:1.45}
.price-card .btn{width:100%;justify-content:center;margin-top:auto}
.price-card.black .btn-ghost{border-color:rgba(255,255,255,.5)}

/* ---------- Membership modal ---------- */
.modal{position:fixed;inset:0;z-index:120;background:rgba(6,15,42,.78);backdrop-filter:blur(6px);display:none;place-items:center;padding:16px}
.modal.open{display:grid;animation:fade .25s}
.modal-box{position:relative;background:#fff;border-radius:20px;padding:34px;width:min(480px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .35s cubic-bezier(.2,.9,.3,1.2)}
.modal-box h3{font-family:var(--display);text-transform:uppercase;font-size:1.3rem;color:var(--navy)}
.modal-box .plan{color:var(--blue)}
.modal-sub{color:var(--muted);font-size:.93rem;margin:8px 0 18px}
.modal-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--ice);font-size:1.4rem;cursor:pointer;color:var(--navy)}
.mform{display:grid;gap:12px}
.mform input,.mform select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
.mform input:focus,.mform select:focus{outline:2px solid var(--sky);border-color:transparent}
.mform .btn{justify-content:center;margin-top:4px}
.mform small{color:var(--muted);font-size:.78rem;text-align:center}
.mdone{text-align:center;padding:20px 0}
.mdone .tick{width:64px;height:64px;border-radius:50%;background:var(--sky);color:#fff;font-size:2rem;display:grid;place-items:center;margin:0 auto 14px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.96)}}

/* ---------- GHL booking cards ---------- */
.book-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.book-card:hover{transform:translateY(-6px);box-shadow:var(--glow)}
.book-card.hot{border-color:var(--sky)}
.book-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.book-body{padding:24px;display:flex;flex-direction:column;flex:1}
.book-body h3{color:#fff;font-size:1.1rem;margin-bottom:6px}
.book-body p{font-size:.9rem;flex:1}
.book-body .price{color:#fff;font-size:1.6rem;margin:16px 0}
.book-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.book-btns.one{grid-template-columns:1fr}
.book-btns .btn{justify-content:center;padding:12px 10px}

/* ---------- Outlets pin map ---------- */
.outlets{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
@media(max-width:900px){.outlets{grid-template-columns:1fr}}
.sa-map{position:relative;background:linear-gradient(160deg,var(--deep),var(--navy-2));border-radius:24px;padding:24px;box-shadow:var(--shadow)}
.sa-map svg{width:100%;height:auto;display:block;overflow:visible}
.land{fill:rgba(58,168,240,.1);stroke:rgba(124,200,255,.55);stroke-width:2;stroke-linejoin:round}
.lesotho{fill:rgba(6,15,42,.6);stroke:rgba(124,200,255,.3);stroke-width:1.5}
.pin{cursor:pointer;outline:none}
.pin path{fill:var(--sky);stroke:#fff;stroke-width:2;transition:transform .25s;transform-origin:0 0;transform-box:view-box}
.pin .dot{fill:#fff}
.pin text{fill:var(--navy);font:800 10px var(--font);text-anchor:middle}
.pin .pulse{fill:var(--sky);opacity:.35;animation:pinpulse 2.2s infinite;transform-box:fill-box;transform-origin:center}
.pin.soon path,.pin.soon .pulse{fill:#8a96b0}
.pin:hover path,.pin:focus path,.pin.active path{transform:scale(1.25)}
@keyframes pinpulse{0%{transform:scale(.4);opacity:.6}100%{transform:scale(2.2);opacity:0}}
.pin-tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px;min-width:190px;box-shadow:0 14px 34px rgba(0,0,0,.35);pointer-events:none;font-size:.85rem;z-index:2}
.pin-tip strong{display:block;font-family:var(--display);text-transform:uppercase;color:var(--navy);font-size:.85rem}
.pin-tip small{display:block;color:var(--muted);margin-bottom:6px}
.pin-tip span{display:block;padding:2px 0}
.pin-tip em{color:var(--blue);font-style:normal;font-size:.75rem}
.map-note{color:#9fb4dc!important;font-size:.8rem;margin-top:8px;text-align:center}
.outlet-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.outlet-list{grid-template-columns:1fr}}
.ol-group{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;transition:.25s}
.ol-group:first-child{grid-column:1/-1}
.ol-group.active{border-color:var(--sky);box-shadow:var(--glow)}
.ol-group h4{font-family:var(--display);text-transform:uppercase;font-size:.8rem;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ol-group h4 small{font-family:var(--font);text-transform:none;color:var(--muted);font-weight:600;margin-left:auto}
.ol-pin{color:var(--sky)}
.ol-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px dashed var(--line);font-size:.88rem;font-weight:600}
.ol-item em{font-style:normal;color:var(--muted);font-weight:400;font-size:.78rem;text-align:right}
.ol-item:hover span{color:var(--blue)}
.ol-item.soon{opacity:.6}

/* ---------- Page transition: logo "phasing" veil ---------- */
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  background:url(../img/logo.webp) center/min(320px,70vw) no-repeat,radial-gradient(circle at center,#122a66 0%,#060f2a 70%);
  animation:veilOut .8s cubic-bezier(.7,0,.2,1) .35s forwards}
@keyframes veilOut{0%{clip-path:circle(150% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%);visibility:hidden}}
.page-veil{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at center,#122a66 0%,#060f2a 70%);clip-path:circle(0% at var(--x,50%) var(--y,50%));transition:clip-path .65s cubic-bezier(.7,0,.2,1)}
.page-veil img{width:min(320px,70vw);opacity:0;transform:scale(.85);filter:drop-shadow(0 0 30px rgba(58,168,240,.5));transition:opacity .4s .25s,transform .6s .2s cubic-bezier(.2,.9,.3,1.2)}
.page-veil::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-100%)}
html.leaving .page-veil{clip-path:circle(150% at var(--x,50%) var(--y,50%));pointer-events:all}
html.leaving .page-veil img{opacity:1;transform:scale(1)}
html.leaving .page-veil::after{animation:veilShine .9s .3s}
@keyframes veilShine{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){body::after{display:none}.page-veil{display:none}}
.pin-tip.below{transform:translate(-50%,10px)}

/* ---------- Map stretches to the list height + row actions ---------- */
.outlets{align-items:stretch}
.sa-map{display:flex;flex-direction:column;justify-content:center}
.sa-map svg{flex:1 1 0;min-height:340px;height:100%}
@media(max-width:900px){.sa-map svg{flex:none;height:auto;min-height:0}}
.ol-group{padding:14px 16px}
.ol-group h4{margin-bottom:4px}
.ol-group:first-child .ol-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
@media(max-width:520px){.ol-group:first-child .ol-rows{grid-template-columns:1fr}}
.ol-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.ol-name{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ol-name span{font-size:.88rem}
.ol-name em{font-style:normal;color:var(--muted);font-weight:400;font-size:.72rem;text-align:left}
.ol-act{display:flex;gap:6px;align-items:center;flex-shrink:0}
.ol-go{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);transition:.2s}
.ol-go:hover{background:var(--ice);border-color:var(--sky)}
.ol-info{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:700 .78rem Georgia,serif;font-style:italic;color:var(--navy);transition:.2s}
.ol-info:hover{border-color:var(--sky);color:var(--blue);background:var(--ice)}