/* ============================================================
   REFINE, style.css
   Light, Apple-like system: white page, black buttons, blue
   reserved for booking actions and links. The scroll films stay
   dark and full-bleed inside the light page.
   ============================================================ */

:root {
  --bg: #fbfbfd;
  --bg-2: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #000000;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --radius: 18px;
  --font-display: "Inter", "SF Pro Display", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Inter", "SF Pro Text", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-brand: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --nav-h: 58px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* this is the colour the browser paints its own chrome from, so it is
     changed on scroll to match the section at the bottom of the viewport;
     see initEdgeColour in main.js. No transition: it now follows the film
     frame by frame, and easing it only makes it lag behind what is on screen */
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* deliberately opaque and unchanging: the root colour behind it is what
     moves on scroll, and the body must keep covering it so that colour never
     shows through a transparent section */
  /* deliberately no overflow-x here. Setting it on the body propagates to the
     viewport and changes how Safari treats the page; the sibling sites that
     render correctly on iOS set none, so neither does this one. Horizontal
     overflow is kept out by the layout instead, and checked at 320px up. */
}

img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

::selection { background: var(--blue); color: #fff; }

.skip-link {
  /* parked above the page rather than off to the side: a negative left
     offset is horizontal overflow, and the page can no longer rely on
     hidden overflow to swallow it */
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-150%);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.h2 .dim { color: var(--muted); }

.lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  max-width: 640px;
  margin: 0 0 32px;
}

/* blue is reserved for booking actions and inline links */
.textlink {
  color: var(--blue);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
}
.textlink::after { content: " ›"; }
.textlink:hover { text-decoration: underline; }

/* ---------- layout ---------- */

.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.container--narrow { width: min(840px, calc(100% - 48px)); }

@supports (padding: env(safe-area-inset-left)) {
  .container,
  .container--narrow,
  .nav__inner {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.section { padding: clamp(84px, 12vh, 140px) 0; position: relative; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), background 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.35s var(--ease-out);
}

/* standard button: black */
.btn--dark,
.btn--ghost {
  background: var(--ink);
  color: #fff;
}
.btn--dark:hover,
.btn--ghost:hover { background: #000; transform: translateY(-1px); }

/* booking button: the one place blue is spent */
.btn--primary {
  background: var(--blue);
  color: #fff;
}
.btn--primary:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* quiet secondary: grey pill */
.btn--soft {
  background: #e8e8ed;
  color: var(--ink);
}
.btn--soft:hover { background: #dededf; transform: translateY(-1px); }

.btn--whatsapp {
  background: #22c55e;
  color: #052e12;
}
.btn--whatsapp:hover { transform: translateY(-1px); }

.btn--big { padding: 16px 32px; font-size: 16px; }

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(251, 251, 253, 0.8);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease;
}

.nav.is-solid { border-bottom-color: var(--line); }

.nav__inner {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.nav__mark { display: inline-flex; width: 28px; color: var(--ink); }
.nav__mark svg { width: 100%; height: auto; }

.nav__word,
.footer__word {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.34em;
  font-style: italic;
}

.nav__links { display: flex; gap: 26px; }

.nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--ink); }

.nav__cta { padding: 9px 20px; font-size: 14px; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {
  /* a phone has less room to give away above the fold */
  :root { --nav-h: 46px; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(251, 251, 253, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s var(--ease-out), opacity 0.3s, visibility 0s linear 0.3s;
  }
  .nav__links.is-open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.3s var(--ease-out), opacity 0.3s, visibility 0s;
  }
  .nav__links a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__cta { display: none; }
  .nav__mark { width: 21px; }
  .nav__word { font-size: 14px; letter-spacing: 0.28em; }
  .nav__brand { gap: 9px; }
  /* the bar is 46px, the tap target stays a full 40 */
  .nav__burger {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    margin-right: -8px;
  }
  .nav__burger span { height: 1.5px; }
  .nav {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   SCROLL FILMS
   These sections stay dark and full-bleed: footage on black,
   white type, inside the light page. Colors here are fixed on
   purpose; they belong to the film, not the page theme.
   ============================================================ */

.scrub { position: relative; height: 340vh; background: #000; }
.scrub--interior { height: 260vh; }

.scrub__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 10%, #16181c 0%, #050607 70%);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.scrub__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 32%),
    radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.scrub__stage {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 clamp(24px, 7vw, 96px);
  z-index: 3;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  color: #fff;
}

.scrub__stage .eyebrow { color: rgba(255, 255, 255, 0.65); }

.scrub__stage.is-live { pointer-events: auto; }

/* keep invisible stage CTAs out of the keyboard tab order */
.scrub__stage:not(.is-live) .scrub__ctas { visibility: hidden; }

.scrub__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 7.4vw, 86px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}

.scrub__title--xl { font-size: clamp(56px, 11vw, 150px); font-weight: 800; letter-spacing: -0.035em; }

.scrub__sub {
  font-size: clamp(16px, 2.2vw, 20px);
  color: rgba(255, 255, 255, 0.85);
  margin: 18px 0 26px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.scrub__ctas { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* the white text link that pairs with the blue pill on footage */
.scrub__ctas .textlink { color: #fff; }
.scrub__ctas .textlink:hover { text-decoration: underline; }

.scrub__hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  transition: opacity 0.4s ease;
}

.scrub__hint-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  /* the words do the nudging now, in place of the line that used to drop
     below them: a soft bob downward, not a bounce that draws the eye */
  animation: hintBob 2.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes hintBob {
  0%, 100% { transform: translateY(0); opacity: 0.62; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scrub__hint-label { animation: none; opacity: 0.8; }
}

.scrub__meter {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.scrub__meter-track {
  width: clamp(80px, 12vw, 150px);
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  overflow: hidden;
}

.scrub__meter-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 860px) {
  /* The film stops short of the bottom edge, so nothing sticky sits where the
     browser looks for a colour to tint its bar with. The section's own
     background, which is ordinary page content and is not sampled, carries on
     below it, and the vignette fades the film into it so the join does not
     read. This is the arrangement of build 89c07c1b, restored: nothing that
     came after it made the bar better and several things made it worse. */
  .scrub__sticky { height: calc(100svh - 112px); }

  .scrub__vignette {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%),
      linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.75) 9%, rgba(0, 0, 0, 0) 36%),
      radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
  }

  /* the white film has no vignette element, so its bottom edge is faded into
     the background continuing below it by a pseudo-element */
  .scrub--light .scrub__sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(0deg, var(--bg) 0%, rgba(251, 251, 253, 0) 100%);
  }
}

@media (max-width: 640px) {
  .scrub { height: 300vh; }
  .scrub--interior { height: 240vh; }
  .scrub__meter { display: none; }
}

/* the white film: same scrub engine, light styling, dark type */
.scrub--light { background: var(--bg); height: 260vh; }
.scrub--light .scrub__canvas { background: var(--bg); }
.scrub--light .scrub__title { color: var(--ink); text-shadow: none; }
.scrub--light .scrub__sub { color: var(--muted); text-shadow: none; }
.scrub--light .scrub__stage { color: var(--ink); }
.scrub--light .scrub__stage .eyebrow { color: var(--muted); }

@media (max-width: 640px) {
  .scrub--light { height: 230vh; }
}

/* scroll parallax on media (driven from main.js) */
[data-parallax] img { transition: none; will-change: transform; }

/* ---------- intro ---------- */

.intro { background: var(--bg); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chips li {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
}

/* ---------- packages ---------- */

.packages { background: var(--bg-2); }

.packages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1080px) { .packages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .packages__grid { grid-template-columns: 1fr; } }

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.pack:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }

/* the featured package is the black card */
.pack--featured {
  background: var(--ink);
  color: #fff;
}
.pack--featured .pack__blurb,
.pack--featured .pack__duration,
.pack--featured .pack__price .from { color: rgba(255, 255, 255, 0.6); }
.pack--featured .pack__features li { color: rgba(255, 255, 255, 0.88); }
.pack--featured .pack__duration::before { border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 3px -1px 0 -1px rgba(255, 255, 255, 0.6); }
.pack--featured .pack__features li::before { border-color: #fff; }
.pack--featured .pack__addon { color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.3); }

.pack__badge {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pack--featured .pack__badge { background: var(--blue); }

.pack__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}

.pack__blurb { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; min-height: 42px; }

.pack__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }

.pack__price .from { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }

.pack__price .amount {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.pack__duration {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pack__duration::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  box-shadow: inset 3px -1px 0 -1px var(--muted);
}

.pack__features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  gap: 9px;
  flex: 1;
}

.pack__features li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--text);
}

.pack__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.pack__addon {
  font-size: 12.5px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 18px;
}

.pack .btn { width: 100%; }

.pack__more {
  margin-top: auto;
  color: var(--blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.pack__more::after { content: " ›"; }
.pack__more:hover { text-decoration: underline; }

.pack--compact { padding-bottom: 22px; }
.pack--compact .pack__blurb { min-height: 0; }
.pack--compact .pack__duration { margin-bottom: 12px; }
.pack--compact.pack--featured .pack__more { color: #fff; }

.voc {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 640px;
}

/* ---------- membership ---------- */

.membership { background: var(--bg-2); }

.membership__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 860px) { .membership__grid { grid-template-columns: 1fr; } }

.club {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 0;
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.club:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); }

.club__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.club__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.club__save {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: #e8e8ed;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.club__price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; }

.club__price .amount { font-family: var(--font-display); font-size: 46px; font-weight: 700; letter-spacing: -0.03em; }

.club__price .per { color: var(--muted); font-size: 14px; }

.club__visits { color: var(--text); font-weight: 600; margin: 0 0 6px; }

.club__worth { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }

.club__worth s { opacity: 0.85; }

.club__perks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }

.club__perks li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text); }

.club__perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.club .btn { align-self: flex-start; }

/* ---------- before/after ---------- */

.results { background: var(--bg); }

.results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.ba { margin: 0; }
.ba--wide { max-width: 920px; }

.ba__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0d10;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  --split: 50%;
}

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__img--after { clip-path: inset(0 0 0 var(--split)); }

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  transform: translateX(-1px);
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.ba__handle::before,
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #1d1d1f;
  border-left: 2px solid #1d1d1f;
}

.ba__handle::before { left: 9px; transform: translateY(-50%) rotate(-45deg); }
.ba__handle::after { right: 9px; transform: translateY(-50%) rotate(135deg); }

.ba__tag {
  position: absolute;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; }

.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  touch-action: pan-y;
}

.ba__frame:has(.ba__range:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.ba figcaption { padding: 12px 6px 0; color: var(--muted); font-size: 13.5px; }

/* ---------- process ---------- */

.process { background: var(--bg-2); }

.process__list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.process__step {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.process__step:nth-child(even) { grid-template-columns: 1.1fr 1fr; }
.process__step:nth-child(even) .process__media { order: 2; }

.process__media { height: 100%; min-height: 240px; position: relative; }

.process__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.process__step:hover .process__media img { transform: scale(1.045); }

.process__body { padding: clamp(22px, 3vw, 40px); }

.process__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.process__body h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 10px 0 10px;
}

.process__body p { color: var(--muted); margin: 0; max-width: 440px; }

@media (max-width: 760px) {
  .process__step,
  .process__step:nth-child(even) { grid-template-columns: 1fr; }
  .process__step:nth-child(even) .process__media { order: 0; }
  .process__media { min-height: 200px; }
}

/* ---------- FAQ ---------- */

.faq { background: var(--bg-2); }

.faq__list { display: grid; gap: 12px; margin-top: 34px; }

.faq__item {
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
  padding: 0 22px;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  position: relative;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}

.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

.faq__item p { margin: 0 0 20px; color: var(--muted); }

/* ---------- booking ---------- */

.book { background: var(--bg); }

.book__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}

@media (max-width: 920px) { .book__grid { grid-template-columns: 1fr; } }

.book__direct { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.book__phone {
  color: var(--blue);
  text-decoration: none;
  font-size: 15px;
}
.book__phone:hover { text-decoration: underline; }

.book__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
  padding: clamp(22px, 3vw, 34px);
}

@media (max-width: 560px) { .book__form { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.field .opt { color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
  outline: none;
}

.field input.is-invalid { border-color: #d92d20; }

.book__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.book__small { color: var(--muted); font-size: 13px; margin: 0; }

.book__error { color: #d92d20; font-size: 13.5px; margin: 0; }
.book__error:empty { display: none; }

/* ---------- footer ---------- */

.footer { background: var(--bg-2); border-top: 1px solid var(--line); }

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 34px;
  padding: 48px 0 26px;
  justify-content: space-between;
}

.footer__brand { display: flex; gap: 14px; align-items: center; color: var(--ink); }

.footer__mark { display: inline-flex; width: 32px; color: var(--ink); }
.footer__mark svg { width: 100%; height: auto; }

.footer__area { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }

.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

.footer__links a { color: var(--muted); text-decoration: none; font-size: 14px; }
.footer__links a:hover { color: var(--ink); }

.footer__contact { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.footer__contact a { color: var(--muted); text-decoration: none; }
.footer__contact a:hover { color: var(--ink); }

.footer__social { display: inline-flex; align-items: center; gap: 9px; }

.footer__glyph {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ink);
  transition: color 0.2s ease;
}
.footer__glyph svg { width: 100%; height: 100%; display: block; }
.footer__social:hover .footer__glyph { color: var(--blue); }

.footer__legal { padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer__legal p { color: #86868b; font-size: 12.5px; margin: 0; }

/* ---------- multipage components ---------- */

.page-hero {
  padding: calc(var(--nav-h) + clamp(64px, 12vh, 120px)) 0 clamp(36px, 6vh, 64px);
  background: var(--bg);
  text-align: center;
}

.page-hero .lead { margin-left: auto; margin-right: auto; }
.page-hero--tight { padding-bottom: clamp(20px, 4vh, 40px); }

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.section__actions { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

.clubchips { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }

.clubchip {
  display: grid;
  gap: 2px;
  min-width: 230px;
  padding: 18px 22px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.clubchip:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); }
.clubchip__name { font-family: var(--font-display); font-weight: 700; }
.clubchip__price { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.clubchip__price i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--muted); }
.clubchip__visits { color: var(--muted); font-size: 13px; }

/* ---------- coverage area ---------- */

.areas { background: var(--bg); }

.areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}

.areas__list li {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.areas__note { color: var(--muted); font-size: 14.5px; margin: 0; }

.areas__list--sm { gap: 8px; margin-bottom: 14px; }
.areas__list--sm li { padding: 7px 14px; font-size: 13px; }

.book__areas { margin-top: 40px; }
.book__areas-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

/* the closing band goes black, like the films */
.ctaband {
  text-align: center;
  border: 0;
  border-radius: calc(var(--radius) + 10px);
  padding: clamp(48px, 8vw, 84px) clamp(22px, 5vw, 60px);
  background: var(--ink);
  color: #fff;
}
.ctaband .h2 { color: #fff; }
.ctaband .lead { color: rgba(255, 255, 255, 0.65); margin-left: auto; margin-right: auto; }
.ctaband__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ctaband .textlink { color: #fff; }

.perks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 860px) { .perks__grid { grid-template-columns: 1fr; } }

.perk {
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 26px 24px;
}
.perk__num { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.3em; color: var(--muted); }
.perk h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 10px 0 8px; }
.perk p { color: var(--muted); margin: 0; font-size: 14.5px; }

.book--page { padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 90px)); }

/* ---------- reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.reveal.in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .scrub { height: auto !important; }
  .scrub__sticky { position: relative; height: 100svh; }
  .scrub__stage { position: relative; opacity: 1 !important; transform: none !important; padding-block: 20px; }
  .scrub__hint, .scrub__meter { display: none; }
}

/* ---------- what we need on site ---------- */

.access {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  max-width: 640px;
}

.access__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.access__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }

.access__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--text);
}

.access__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.access__note { color: var(--muted); font-size: 13.5px; margin: 0; }

/* checkbox in the booking form */

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #d2d2d7;
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.check input:checked { background: var(--blue); border-color: var(--blue); }

.check input:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }