/* ═══════════════════════════════════════════════════════
   Mr. Monkey San Telmo — design system
   ═══════════════════════════════════════════════════════ */

:root{
  --teal-900:#04555e;
  --teal-800:#066b76;
  --teal-700:#008796;
  --teal-600:#0a9daa;
  --teal-500:#0FAFB8;
  --teal-400:#2fc6cc;
  --teal-300:#7fe0e4;
  --teal-100:#dff6f7;

  --ink:#052b30;
  --white:#fff;
  --lime:#3dff5b;

  --club1-a:#1f5fd0;
  --club1-b:#0f9ec0;
  --club2-a:#a415d6;
  --club2-b:#dd23a8;

  --radius-lg:32px;
  --radius:20px;

  --shadow-lg:0 30px 70px -25px rgba(2,45,50,.55);
  --shadow:0 18px 45px -22px rgba(2,45,50,.5);

  --wrap:1180px;
  --display:"Suez One", Georgia, serif;
  --body:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.22,.75,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--white);
  background:var(--teal-500);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
[hidden]{display:none!important}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--ink);color:var(--teal-300)}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--teal-500)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff,#9ee7e8);border:2px solid var(--teal-500);border-radius:999px}
html{scrollbar-width:thin;scrollbar-color:#fff var(--teal-500)}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,820px)}
.muted{opacity:.72}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:200;
  background:#fff;color:var(--teal-800);padding:.7rem 1.1rem;
  border-radius:0 0 12px 12px;font-weight:600;transition:top .2s
}
.skip-link:focus{top:0}

.scrollbar{
  position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,#fff,var(--lime));
  box-shadow:0 0 12px rgba(255,255,255,.7)
}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.78rem 1.5rem;border-radius:999px;
  font-weight:600;font-size:.98rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s;
  cursor:pointer;white-space:nowrap
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* sheen: a slanted band of light crossing the primary buttons, as on the original
   site. Only the solid ones — there the white button stays flat too. */
.btn--solid{position:relative;overflow:hidden}
.btn--solid::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:36%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg) translateX(-280%);
  animation:sheen 5.5s ease-in-out infinite;
  pointer-events:none
}
/* long pause, quick pass — so it reads as a highlight, not a blinking banner */
@keyframes sheen{
  0%,8%{transform:skewX(-18deg) translateX(-280%)}
  46%,100%{transform:skewX(-18deg) translateX(560%)}
}
/* out of phase, so two buttons on screen never flash together */
.pass__cta::after{animation-delay:1.7s}
.find__card .btn--solid::after{animation-delay:3.3s}
/* brand teal instead of near-black: lighter, still ≥4.8:1 against white text
   at every stop of the gradient (hover included) */
.btn--solid{
  background:linear-gradient(160deg,#0a7d89,#066b76);color:#fff;
  box-shadow:0 14px 30px -14px rgba(3,60,66,.7)
}
.btn--solid:hover{
  background:linear-gradient(160deg,#0a7d89,#05646f);
  box-shadow:0 18px 34px -14px rgba(3,60,66,.8)
}
.btn--white{background:#fff;color:var(--teal-700);box-shadow:0 12px 26px -14px rgba(0,0,0,.45)}
.btn--white:hover{background:var(--teal-100)}
.btn--ghost{border:2px solid rgba(255,255,255,.65);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--lg{padding:1rem 2rem;font-size:1.05rem}
.btn--full{display:flex;justify-content:center;width:100%;margin-top:1.2rem}

.iconbtn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;
  transition:background .25s,transform .25s var(--ease)
}
.iconbtn:hover{background:rgba(255,255,255,.32);transform:translateY(-2px)}

/* ═══════════ AGE GATE ═══════════ */
.agegate{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(120% 90% at 50% 0%,var(--teal-400),var(--teal-700) 70%);
  animation:fade .35s var(--ease)
}
.agegate__card{
  max-width:520px;text-align:center;
  background:rgba(255,255,255,.1);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-lg);
  padding:2.6rem 2rem 2.2rem;box-shadow:var(--shadow-lg)
}
.agegate__logo{margin:0 auto 1rem;opacity:.95}
.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  font-weight:600;opacity:.85;margin-bottom:.4rem
}
.eyebrow--dark{color:var(--teal-600);opacity:1}
.agegate__title{font-size:clamp(1.9rem,5vw,2.6rem);margin-bottom:.8rem}
.agegate__text{font-size:.98rem;opacity:.9;margin-bottom:1.6rem}
.agegate__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.agegate__deny{margin:1.2rem 0 0;font-weight:600;color:#ffe8a3}

/* ═══════════ HEADER ═══════════ */
.header{
  position:fixed;inset:0 0 auto;z-index:110;
  padding:.9rem 0;transition:background .3s,box-shadow .3s,padding .3s
}
.header.is-stuck{
  background:rgba(10,140,152,.82);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.8);padding:.5rem 0
}
.header__inner{display:flex;align-items:center;gap:1rem}
.brand{flex:0 0 auto;order:2;margin-inline:auto}
.brand__mark{width:212px;height:auto;transition:width .3s var(--ease),transform .3s var(--ease)}
.brand:hover .brand__mark{transform:scale(1.04)}
.header.is-stuck .brand__mark{width:168px}

.nav{order:1;display:flex;gap:1.15rem;flex:1;font-size:.92rem;font-weight:500}
.nav a{position:relative;padding:.35rem 0;opacity:.92;white-space:nowrap}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:#fff;transition:width .3s var(--ease)
}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav a.is-active{opacity:1}

.header__tools{order:3;display:flex;align-items:center;gap:.5rem;flex:1;justify-content:flex-end}

.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:.85rem;font-weight:600;transition:background .25s
}
.lang__btn:hover{background:rgba(255,255,255,.3)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:150px;
  background:#fff;color:var(--ink);border-radius:14px;padding:.4rem;
  box-shadow:var(--shadow);overflow:hidden;z-index:5
}
.lang__menu button{width:100%;text-align:left;padding:.55rem .8rem;border-radius:9px;font-size:.92rem}
.lang__menu button:hover,.lang__menu button[aria-selected="true"]{background:var(--teal-100)}

.burger{display:none;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);padding:11px}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;padding:10rem 0 0;
  background:radial-gradient(90% 70% at 30% 18%,var(--teal-400) 0%,var(--teal-500) 45%,var(--teal-600) 100%);
  overflow:hidden
}
.hero__glow{
  position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px;
  right:-14vw;top:-16vw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4),transparent 65%);
  filter:blur(30px);pointer-events:none
}
.hero__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;
  gap:2.8rem;align-items:center;padding-bottom:7.5rem
}
.hero__seal{width:92px;opacity:.9;margin-bottom:1rem}
/* Il titolo è passato da "The only 2 Clubs" a "The only 2 Cannabis Social Clubs".
   Col vecchio clamp (fino a 4.5rem) la riga lunga andava a capo due volte e la
   colonna di sinistra diventava molto più alta della destra. */
.hero__title{
  font-size:clamp(2rem,4vw,3.15rem);letter-spacing:-.02em;line-height:1.06;
  text-shadow:0 8px 28px rgba(0,60,66,.28)
}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;margin:.9rem 0 1.15rem;
  padding:.36rem .85rem;border-radius:999px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem}
.hero__lead{font-size:1rem;max-width:42ch;opacity:.97;line-height:1.55}
.hero__lead strong{font-weight:700}

.notice{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.45rem .9rem;border-radius:10px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24)
}
.notice--dark{background:rgba(15,175,184,.08);color:var(--teal-800);border-color:rgba(15,175,184,.26)}

/* La cornice è la <figure> stessa e racchiude video + didascalia. Il raggio interno
   è quello esterno meno il padding (28−10=18): se i due non stanno a differenza
   esatta, gli angoli non sono concentrici e la cosa si nota. */
.hero__media{
  margin:0;padding:10px;border-radius:28px;
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(6px) saturate(1.1)
}
.hero__vid{
  position:relative;aspect-ratio:5/4;border-radius:18px;
  overflow:hidden;background:#04555e
}
.hero__vid video{width:100%;height:100%;object-fit:cover;display:block}
/* glass, not a white disc: it sits on the footage and must not block it */
.videobtn{
  /* ancorato a .hero__vid, che è già il solo riquadro del video: qui 14 è il
     margine reale dal bordo dell'immagine, senza padding da compensare */
  position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(8px) saturate(1.2);
  transition:transform .25s var(--ease),background .25s
}
/* the shadow keeps the glyph readable over a bright frame */
.videobtn svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.videobtn:hover{transform:scale(1.08);background:rgba(255,255,255,.3)}
/* Dentro la cornice, sotto il video. Stesso carattere del titolo (--display, Suez One)
   invece del font di testo: richiesto esplicitamente. */
.hero__cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  padding:.72rem .55rem .2rem;font-size:.82rem;opacity:.95
}
.hero__cap a:hover{text-decoration:underline}
/* ultima riga della colonna: il margine di 1em che p riceve dal reset qui è spazio
   morto, e sfaserebbe l'allineamento con la cornice video */
.hero__copy .notice{margin-bottom:0}

/* Il fondo della cornice video cade alla stessa altezza del fondo del box
   "Access permitted only to registered members 18+". Ora che la didascalia sta
   dentro la cornice, basta portare a filo i fondi delle due colonne: il fondo della
   colonna destra è il bordo del box, didascalia inclusa.
   Solo nel layout a due colonne: sotto i 1200px la griglia è a colonna singola. */
@media (min-width:1201px){
  .hero__grid{align-items:end}
}

/* ═══════════ ANIMATED SEA ═══════════ */
.waves{
  position:absolute;left:0;bottom:-1px;width:100%;
  height:clamp(120px,14vw,210px);pointer-events:none;overflow:hidden;z-index:1
}
.waves--up{top:-1px;bottom:auto;transform:scaleY(-1)}

/* one layer = vertical swell (div) + horizontal drift (svg), so the two
   transforms compose without fighting over the same property */
/* 20px of slack above and below (clipped by .waves): without it the vertical
   swell lifts the fill off the container edge and leaves a hairline across the
   page — 1px at rest, up to 10px mid-animation */
.waves__l{
  position:absolute;left:0;right:0;top:-20px;bottom:-20px;
  color:var(--teal-700);
  animation:swell ease-in-out infinite alternate
}
/* max-width:none is required: the global `img,video,svg{max-width:100%}` reset
   would clamp this to one tile and leave the right half of the strip unpainted */
.waves__l svg{
  width:200%;max-width:none;height:100%;
  animation:drift linear infinite
}
.waves__l use{fill:currentColor}

.waves__l--1{opacity:1;animation-duration:7s}
.waves__l--1 svg{animation-duration:19s}
.waves__l--2{opacity:.5;animation-duration:9.5s;animation-delay:-3s}
.waves__l--2 svg{animation-duration:28s;animation-direction:reverse}
.waves__l--3{opacity:.26;animation-duration:12s;animation-delay:-6s}
.waves__l--3 svg{animation-duration:42s}

.waves--up .waves__l{color:var(--teal-500)}

/* the svg is 200% wide and holds two identical tiles: shifting it by half its
   own width lands exactly on the next tile, so the loop has no jump */
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes swell{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* slow-moving light on the water */
.caustics{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(40% 28% at 18% 26%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(32% 22% at 72% 52%,rgba(255,255,255,.42),transparent 70%),
    radial-gradient(28% 18% at 44% 82%,rgba(255,255,255,.35),transparent 70%);
  animation:caustic 26s ease-in-out infinite alternate
}
@keyframes caustic{
  from{transform:translate3d(-2%,0,0) scale(1)}
  to{transform:translate3d(2.5%,1.5%,0) scale(1.07)}
}

.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bubbles span{
  position:absolute;bottom:-60px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  animation:rise linear infinite
}
.bubbles span:nth-child(1){left:6%;width:14px;height:14px;animation-duration:26s;animation-delay:-2s}
.bubbles span:nth-child(2){left:17%;width:8px;height:8px;animation-duration:34s;animation-delay:-9s}
.bubbles span:nth-child(3){left:31%;width:20px;height:20px;animation-duration:42s;animation-delay:-16s}
.bubbles span:nth-child(4){left:44%;width:10px;height:10px;animation-duration:30s;animation-delay:-5s}
.bubbles span:nth-child(5){left:58%;width:16px;height:16px;animation-duration:38s;animation-delay:-22s}
.bubbles span:nth-child(6){left:70%;width:7px;height:7px;animation-duration:28s;animation-delay:-13s}
.bubbles span:nth-child(7){left:82%;width:22px;height:22px;animation-duration:46s;animation-delay:-30s}
.bubbles span:nth-child(8){left:93%;width:11px;height:11px;animation-duration:32s;animation-delay:-19s}
@keyframes rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.55}
  88%{opacity:.3}
  100%{transform:translate3d(26px,-105%,0);opacity:0}
}

/* ═══════════ SECTIONS ═══════════ */
.section{position:relative;padding:4.75rem 0}
.section--clubs{background:var(--teal-700);padding:2.5rem 0 4rem;overflow:hidden}
.section--pass{background:var(--teal-700);padding:1rem 0 4rem}
.section--gallery{background:linear-gradient(180deg,var(--teal-700),var(--teal-600));padding-top:3.5rem}
.section--join{background:var(--teal-600)}
.section--faq{background:linear-gradient(180deg,var(--teal-600),var(--teal-500))}
.section--find{background:var(--teal-500);padding-bottom:5rem}

.shead{text-align:center;margin-bottom:2.6rem;position:relative;z-index:2}
.shead h2{font-size:clamp(2.1rem,4.6vw,3.1rem)}
.shead p{margin:.5rem 0 0;opacity:.85;font-size:1rem}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ═══════════ CLUB CARDS ═══════════ */
.clubs{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;gap:1.6rem;align-items:stretch
}
.club{
  position:relative;display:flex;flex-direction:column;
  padding:1.7rem 1.7rem 1.4rem;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}
.club:hover{transform:translateY(-6px);box-shadow:0 40px 80px -30px rgba(0,20,25,.65)}
.club--one{background:linear-gradient(150deg,var(--club1-a),var(--club1-b) 85%)}
.club--two{background:linear-gradient(150deg,var(--club2-a),var(--club2-b) 90%)}
.club::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 100% 0%,rgba(255,255,255,.22),transparent 60%)
}
.club>*{position:relative;z-index:1}

.club__top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.9rem}
.tag{
  background:#fff;color:var(--ink);border-radius:999px;padding:.22rem .8rem;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase
}
.tag--soft{background:rgba(255,255,255,.22);color:#fff}
.status{
  margin-left:auto;display:inline-flex;align-items:center;gap:.42rem;
  padding:.24rem .7rem;border-radius:999px;background:rgba(0,0,0,.22);
  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase
}
.status i{width:9px;height:9px;border-radius:50%;background:#9aa;display:block;flex:0 0 auto}
.status.is-open i{background:var(--lime);animation:pulse 2.2s infinite}
.status.is-closed i{background:#ff9d7a}

.club__name{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.club__name span{opacity:.9}
.club__addr{
  display:flex;align-items:center;gap:.4rem;margin:.5rem 0 1.2rem;
  font-size:.9rem;font-weight:500;opacity:.95
}
.club__body{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;align-items:start;flex:1}
.club__img{
  border-radius:14px;border:3px solid rgba(255,255,255,.85);
  aspect-ratio:16/11;object-fit:cover;cursor:zoom-in;
  transition:transform .4s var(--ease)
}
.club__img:hover{transform:scale(1.02)}
.club__info h4{font-family:var(--body);font-weight:700;font-size:.95rem;margin-bottom:.15rem}
.club__info h4+p,.club__info h4+ul{margin-bottom:1rem}
.club__hours{font-size:.95rem;opacity:.95}
.feats li{font-size:.92rem;opacity:.95;display:flex;gap:.4rem;align-items:baseline}
.feats li::before{content:"›";opacity:.7}
.club__link{
  margin-top:1.1rem;align-self:flex-start;font-size:.86rem;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:opacity .25s
}
.club__link:hover{opacity:.75}

/* Il file è 1536×1024: a questa larghezza siamo ancora molto sotto la risoluzione
   nativa, quindi si può crescere ancora senza sgranare. Il limite è lo spazio: la
   griglia è 1fr auto 1fr e questa colonna toglie larghezza alle due schede club. */
.clubs__mid{display:grid;place-items:center;width:300px}
.clubs__mid img{width:100%}

/* ═══════════ MEMBERSHIP / ONE PASS ═══════════ */
/* no overflow:hidden — the mascot has to hang past the bottom edge, the way it
   leans on the card in the original site */
/* one content column stacked in three bands (intro → perks → notice+CTA) plus an
   empty rail on the right that the mascot occupies. Reading order top-to-bottom,
   full width used at every band, no dead corner left over. */
.pass{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 232px;
  column-gap:2rem;row-gap:1.9rem;align-items:start;
  background:radial-gradient(120% 130% at 100% 0%,rgba(15,175,184,.11),transparent 58%),#fff;
  color:var(--teal-800);
  border:1px solid rgba(15,175,184,.16);
  border-radius:var(--radius-lg);padding:2.7rem 2.7rem 2.9rem;box-shadow:var(--shadow-lg)
}
.pass__intro,.perks,.pass__foot{grid-column:1}
.pass__intro{max-width:66ch}
.pass__title{
  color:var(--teal-800);font-size:clamp(1.9rem,3.6vw,2.55rem);
  line-height:1.04;margin-bottom:.75rem
}
.pass__lead{font-size:1rem;line-height:1.62;margin:0;max-width:58ch}
.pass__lead strong{display:block;margin-bottom:.3rem;font-size:1.07rem}
/* small rule after the eyebrow — the detail that makes the block read as a set */
.eyebrow--dark{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow--dark::after{content:"";width:36px;height:1px;background:currentColor;opacity:.45}

.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}
.perks li{
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  background:linear-gradient(180deg,rgba(15,175,184,.09),rgba(15,175,184,.04));
  border:1px solid rgba(15,175,184,.18);
  border-radius:16px;padding:1.05rem 1rem 1.1rem;
  font-size:.85rem;font-weight:600;line-height:1.3;
  transition:transform .3s var(--ease),background .3s,box-shadow .3s
}
.perks li:hover{
  transform:translateY(-3px);background:rgba(15,175,184,.14);
  box-shadow:0 16px 26px -18px rgba(6,107,118,.9)
}
.perks__ico{
  display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;
  border-radius:13px;background:#fff;color:var(--teal-600);
  box-shadow:0 8px 16px -10px rgba(6,107,118,.65)
}

.pass__foot{
  display:flex;align-items:center;gap:1.1rem 1.6rem;flex-wrap:wrap;
  padding-top:1.6rem;border-top:1px solid rgba(15,175,184,.16)
}
.pass__foot .notice{margin:0}
.pass__cta{margin-left:auto}

/* The artwork (756x586) ends in a flat cut at row 537; below that only the right
   hand remains. The cut has to land exactly on the card's outer edge: any higher
   and a hairline of the white card shows under it, any lower and the cut itself
   shows against the teal.
   offset = (586-537)/756 * width  +  1px, because `bottom` is measured from the
   padding box and the card has a 1px border. At 260px: 16.85 + 1 = 17.85. */
.pass__mascot{
  position:absolute;right:26px;bottom:-17.85px;width:260px;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.22))
}
.pass__mascot img{width:100%}

/* ═══════════ GALLERY ═══════════ */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:278px;gap:1.1rem}
.g{margin:0;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.g img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .6s var(--ease)}
.g img:hover{transform:scale(1.06)}
/* ── teaser tiles: something is coming, we're just not showing it yet ── */
.g--soon{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7rem;
  text-align:center;padding:1.6rem;
  background:#0a5b66;border:1px solid rgba(255,255,255,.26)
}
/* a real photo behind frosted glass: unreadable, but clearly something is there */
.g--soon::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(4,74,84,.62),rgba(2,42,50,.9)),
    url(../assets/club1-interior.jpg) center/cover;
  filter:blur(16px) saturate(.8);
  transform:scale(1.16)
}
.g--soon2::after{
  background-image:
    linear-gradient(180deg,rgba(4,74,84,.62),rgba(2,42,50,.9)),
    url(../assets/club2-interior.jpg)
}
.g--soon::before{
  content:"";position:absolute;inset:13px;z-index:2;border-radius:14px;pointer-events:none;
  border:1px dashed rgba(255,255,255,.26)
}
.g--soon>*{position:relative;z-index:2}
/* light sweeping across the tile, as if something behind it were being lit up */
.g__sweep{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.15) 50%,transparent 64%);
  animation:sweep 6s ease-in-out infinite
}
@keyframes sweep{0%{transform:translateX(-105%)}55%,100%{transform:translateX(105%)}}
.g__ico{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.32);
  color:#fff;animation:halo 3.6s ease-in-out infinite
}
@keyframes halo{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.2)}
  50%{box-shadow:0 0 24px 5px rgba(255,255,255,.15)}
}
.g--soon figcaption{display:flex;flex-direction:column;gap:.3rem}
.g--soon b{
  font-family:var(--display);font-weight:400;font-size:1.32rem;letter-spacing:.005em;
  text-shadow:0 4px 18px rgba(0,25,30,.5)
}
.g__sub{font-size:.79rem;font-weight:500;letter-spacing:.04em;opacity:.75}
.g__dots{display:flex;gap:5px}
.g__dots i{
  width:5px;height:5px;border-radius:50%;background:#fff;
  animation:blink 1.5s ease-in-out infinite
}
.g__dots i:nth-child(2){animation-delay:.18s}
.g__dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{
  0%,100%{opacity:.22;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-3px)}
}
/* the two tiles breathe out of sync, so the pair never looks like a copy-paste */
.g--soon2 .g__sweep{animation-delay:2.4s}
.g--soon2 .g__ico{animation-delay:1.2s}
.g--soon2 .g__dots i{animation-delay:.5s}
.g--soon2 .g__dots i:nth-child(2){animation-delay:.68s}
.g--soon2 .g__dots i:nth-child(3){animation-delay:.86s}

/* ═══════════ STEPS ═══════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.steps li{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius);padding:1.8rem 1.6rem;backdrop-filter:blur(6px);
  transition:background .3s,transform .3s var(--ease)
}
.steps li:hover{background:rgba(255,255,255,.2);transform:translateY(-4px)}
.steps__n{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--teal-700);font-family:var(--display);font-size:1.3rem;margin-bottom:1rem
}
.steps h3{font-size:1.3rem;margin-bottom:.5rem}
.steps p{font-size:.95rem;opacity:.92;margin:0}
.join__cta{text-align:center;margin-top:2.5rem}

/* ═══════════ FAQ ═══════════ */
.acc details{
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  border-radius:16px;margin-bottom:.7rem;overflow:hidden;transition:background .25s
}
.acc details[open]{background:rgba(255,255,255,.2)}
.acc summary{
  list-style:none;cursor:pointer;padding:1.05rem 3rem 1.05rem 1.3rem;
  font-weight:600;font-size:1.02rem;position:relative
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"+";position:absolute;right:1.3rem;top:50%;translate:0 -50%;
  font-size:1.5rem;font-weight:300;transition:transform .3s var(--ease)
}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{margin:0;padding:0 1.3rem 1.2rem;font-size:.96rem;opacity:.92}

/* ═══════════ FIND US ═══════════ */
.find{display:grid;grid-template-columns:1.55fr .9fr;gap:1.5rem;align-items:stretch}
.find__map{
  position:relative;min-height:430px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:var(--teal-800)
}
.find__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.find__card{
  background:#fff;color:var(--teal-800);border-radius:var(--radius-lg);
  padding:1.9rem 1.8rem;box-shadow:var(--shadow-lg)
}
.find__card h3{
  font-family:var(--body);font-weight:700;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--teal-600);margin-bottom:.35rem
}
.find__card p{font-size:.97rem;margin-bottom:1.3rem}
/* :not(.btn) — otherwise this beats .btn--solid on specificity and paints the
   "Open in Google Maps" button's label teal on a teal button */
.find__card a:not(.btn){color:var(--teal-700);font-weight:600}
.find__card a:not(.btn):hover{text-decoration:underline}
.reviews{text-align:center;margin-top:2.2rem;font-size:1rem}
.reviews a{font-weight:700;border-bottom:2px solid rgba(255,255,255,.6);padding-bottom:2px}

/* ═══════════ FOOTER ═══════════ */
.footer{position:relative;background:var(--teal-600);padding:9rem 0 2rem;overflow:hidden}
.footer__grid{
  position:relative;z-index:2;
  /* equal side columns, so the round logo lands on the exact centre of the page */
  display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center
}
.footer__title{font-size:clamp(2rem,4.2vw,2.9rem)}
.footer__cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.footer__mid img{width:100px;opacity:.9}
.footer__right{text-align:right}
.footer__right h3{font-family:var(--body);font-weight:700;font-size:1.05rem;margin-bottom:.8rem}
.footer__social{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:1.2rem}
.footer__nav{display:flex;flex-direction:column;gap:.28rem;font-size:.9rem;opacity:.9}
.footer__nav a:hover{text-decoration:underline}
.footer__legal{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  margin-top:3rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.22);
  font-size:.82rem;color:rgba(255,255,255,.9)
}
.footer__legal p{margin:0}
.footer__legal p:nth-child(2){text-align:center}
.footer__legal a:hover{text-decoration:underline}
/* FOG's credit, reproduced to the measurements taken off the original site at
   1440px: label 81px wide with an 8px cap height, 8px gap, 13x13 globe, 2px gap,
   "FOG" 37x13. Absolute px, not rem — it is someone else's logo and must not
   scale with our type. */
.credit{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  font-family:Nunito,var(--body);font-weight:700;
  font-size:11px;letter-spacing:0;line-height:1
}
/* the mark itself is FOG's own artwork, lifted from the original site at 2x and
   un-matted to white-on-transparent — not a redraw. 104x27 shown at 52px wide. */
.credit__fog{width:52px;height:auto;flex:0 0 auto}
.credit__fog svg{flex:0 0 auto}

/* ═══════════ MOBILE BAR / TO TOP ═══════════ */
.mobar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:rgba(4,85,94,.94);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.18);
  padding:.6rem calc(.6rem + env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom))
}
.mobar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.75rem;border-radius:999px;font-weight:600;font-size:.92rem;
  background:rgba(255,255,255,.14)
}
.mobar a:first-child{background:#fff;color:var(--teal-800)}

.totop{
  position:fixed;right:18px;bottom:22px;z-index:99;width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--teal-700);font-size:1.2rem;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),opacity .25s
}
.totop:hover{transform:translateY(-3px)}

/* ═══════════ LIGHTBOX ═══════════ */
.lbox{
  position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:4vmin;
  background:rgba(2,30,34,.92);backdrop-filter:blur(6px);animation:fade .25s var(--ease)
}
.lbox img{max-width:100%;max-height:88vh;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.lbox__close{
  position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.18);font-size:1.1rem
}
.lbox__close:hover{background:rgba(255,255,255,.35)}

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,255,91,.55)}
  70%{box-shadow:0 0 0 9px rgba(61,255,91,0)}
  100%{box-shadow:0 0 0 0 rgba(61,255,91,0)}
}
@keyframes floaty{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-11px) rotate(-1.2deg)}
  100%{transform:translateY(0) rotate(0)}
}
[data-float]{animation:floaty 7s ease-in-out infinite}
.clubs__mid [data-float]{animation-duration:9s}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1200px){
  .nav{display:none;order:4}
  .nav.is-open{
    display:flex;flex-direction:column;gap:.2rem;
    position:absolute;left:1.25rem;right:1.25rem;top:calc(100% + .6rem);
    background:rgba(6,107,118,.97);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);
    padding:.8rem;box-shadow:var(--shadow-lg)
  }
  .nav.is-open a{padding:.75rem .9rem;border-radius:12px;font-size:1rem}
  .nav.is-open a:hover{background:rgba(255,255,255,.14)}
  .nav.is-open a::after{display:none}
  .burger{display:block}
  .brand{order:1;margin-inline:0}
  .header__inner{justify-content:space-between}
  .header__tools{flex:0}

  .hero__grid{grid-template-columns:1fr;gap:2.4rem;padding-bottom:8rem}
  .hero{padding-top:7.5rem}
  .clubs{grid-template-columns:1fr;gap:1.2rem}
  .clubs__mid{width:auto;order:3;padding:.5rem 0}
  .clubs__mid img{width:330px;max-width:100%;margin-inline:auto}

  .pass{grid-template-columns:minmax(0,1fr) 196px;column-gap:1.6rem}
  .pass__intro{max-width:none}
  /* 236px → (49/756)*236 + 1 = 16.3 */
  .pass__mascot{width:236px;right:22px;bottom:-16.3px}

  .find{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;text-align:center}
  .footer__cta{justify-content:center}
  .footer__right{text-align:center}
  .footer__social{justify-content:center}
  .footer__nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.9rem}
  .footer__legal{grid-template-columns:1fr;text-align:center}
  .footer__legal p:nth-child(2){text-align:center}
  .credit{justify-content:center}
}

/* four perks side by side stop fitting well before the tablet layout breaks */
@media (max-width:980px){
  .perks{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  body{font-size:16px}
  .section{padding:4rem 0}
  .section--find{padding-bottom:6rem}
  .brand__mark{width:150px}
  .header.is-stuck .brand__mark{width:132px}

  /* ── mobile hero: the video becomes the full-bleed background ──
     .hero__grid goes static so .hero__media anchors to .hero itself and can
     escape the .wrap gutters                                             */
  .hero{padding-top:0}
  .hero__grid{
    position:static;grid-template-columns:1fr;gap:0;
    min-height:100vh;min-height:min(100svh,920px);
    align-content:center;padding:7.5rem 0 9rem
  }
  /* qui il video è lo sfondo a tutto schermo: la cornice del desktop va annullata
     per intero — padding, bordo, raggi, ombra e sfondo vetro */
  .hero__media{
    position:absolute;inset:0;z-index:0;margin:0;
    padding:0;border:0;border-radius:0;box-shadow:none;
    background:none;backdrop-filter:none
  }
  .hero__vid{
    height:100%;aspect-ratio:auto;border-radius:0;
    background:#04555e url(../assets/hero-poster.jpg) center/cover no-repeat
  }
  /* scrim: dark at the top so the header and title read, brand teal at the
     bottom so the photo melts into the wave */
  .hero__vid::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(3,52,60,.84) 0%,
      rgba(3,52,60,.52) 20%,
      rgba(3,52,60,.50) 52%,
      rgba(0,121,135,.64) 76%,
      rgba(0,135,150,.94) 100%)
  }
  .hero__copy{position:relative;z-index:2}
  /* here the buttons lie directly on the video, so they turn to glass instead of
     stamping two solid blocks over the footage */
  .hero__cta .btn--solid{
    background:rgba(255,255,255,.19);border:1px solid rgba(255,255,255,.42);
    backdrop-filter:blur(10px) saturate(1.2);box-shadow:none
  }
  .hero__cta .btn--solid:hover{background:rgba(255,255,255,.28)}
  .hero__cta .btn--white{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.55);
    color:#fff;backdrop-filter:blur(10px) saturate(1.2);box-shadow:none
  }
  .hero__cta .btn--white:hover{background:rgba(255,255,255,.22)}
  .hero__cta .btn{text-shadow:0 1px 4px rgba(0,30,35,.45)}
  .hero__cap{display:none}
  .hero__glow,.caustics{display:none}
  .hero__lead{max-width:none}
  .videobtn{width:46px;height:46px;right:16px;bottom:calc(9vw + 86px)}
  .club__body{grid-template-columns:1fr;flex:none}
  .club__img{aspect-ratio:16/10}

  .pass{grid-template-columns:1fr;row-gap:1.5rem;padding:1.8rem 1.4rem 0}
  .pass__foot{padding-bottom:.4rem}
  .pass__cta{margin-left:0}
  /* mascot back in the flow, centred under the card content. The negative margin
     is the same 49/756 trick: it drops the flat cut onto the card edge (14px at
     the 212px width used here) so only the hand shows below. */
  .pass__mascot{
    position:relative;right:auto;bottom:auto;
    width:100%;max-width:212px;margin:0 auto -14.7px;justify-self:center
  }

  .gallery{grid-template-columns:1fr;grid-auto-rows:220px}
  .steps{grid-template-columns:1fr}
  .mobar{display:flex;gap:.5rem}
  .totop{bottom:88px}
  .footer{padding-bottom:6.5rem}
  .hero__cap{font-size:.78rem}
}

@media (max-width:430px){
  .brand__mark{width:126px}
  .hero__seal{width:92px}
  /* the perk tiles stay two-up even here: stacked single file they read as a
     sparse list and push the card to twice the height */
  .perks{gap:.65rem}
  .perks li{padding:.9rem .8rem .95rem;font-size:.82rem}
}

/* ═══════════ MOTION / PRINT ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .bubbles,.caustics{display:none}
}

@media print{
  .header,.mobar,.totop,.agegate,.videobtn,.scrollbar,.waves,.bubbles,.caustics{display:none!important}
  body{background:#fff;color:#000}
  .club,.pass,.find__card{box-shadow:none;border:1px solid #ccc}
}