/* =========================================================
       1. DESIGN TOKENS  (edit colours here, everything follows)
       ========================================================= */
    :root {
      --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
      --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

      --radius-s: 10px;
      --radius-m: 18px;
      --radius-l: 28px;
      --radius-pill: 999px;

      --space-section: clamp(64px, 9vw, 120px);
      --gutter: clamp(18px, 4vw, 48px);
      --max: 1200px;

      --ease: cubic-bezier(.2, .7, .2, 1);
      --header-h: 72px;
    }

    /* Light theme: neutral stone + lime */
    :root,
    :root[data-theme="light"] {
      --bg: #f4eee3;
      --surface: #fbf8f1;
      --surface-2: #e8dfd0;
      --text: #2a1f1a;
      --text-soft: #6b5e54;
      --line: rgba(42, 31, 26, .14);
      --accent: #4f5b3a;
      --on-accent: #f8f4ea;
      --inverse: #2a1f1a;
      --on-inverse: #f7f1e6;
      --ph-a: #d8cbb8;
      --ph-b: #bfae96;
      --shadow: 0 18px 40px -24px rgba(40, 34, 20, .35);
      /* hero: warm cream */
      --hero-bg: linear-gradient(172deg, #f8f3ea 0%, #efe5d5 100%);
      --hero-text: #2a1f1a;
      --hero-sub: #6b5e54;
      --hero-glass: rgba(42, 31, 26, .05);
      --hero-line: rgba(42, 31, 26, .28);
      --hero-bar: #8c8576;
      --hero-ring: rgba(42, 31, 26, .1);
      --hero-overlay: none;
      --em: #4f5b3a;
      --eyebrow: #9a5b2e;
      color-scheme: light;
    }

    /* Dark theme: deep ink + crimson */
    :root[data-theme="dark"] {
      --bg: #0c0b16;
      --surface: #151426;
      --surface-2: #1d1b33;
      --text: #f2f0f7;
      --text-soft: #a09db5;
      --line: rgba(242, 240, 247, .12);
      --accent: #e4113f;
      --on-accent: #ffffff;
      --inverse: #f2f0f7;
      --on-inverse: #0c0b16;
      --ph-a: #26233f;
      --ph-b: #15132a;
      --shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
      --hero-bg:
        radial-gradient(60% 50% at 80% 20%, rgba(228, 17, 63, .38), transparent 70%),
        linear-gradient(160deg, #1b1930, #0a0914);
      --hero-text: #ffffff;
      --hero-sub: rgba(255, 255, 255, .82);
      --hero-glass: rgba(255, 255, 255, .1);
      --hero-line: rgba(255, 255, 255, .4);
      --hero-bar: #e4113f;
      --hero-ring: rgba(255, 255, 255, .09);
      --hero-overlay: none;
      --em: #ff6b86;
      --eyebrow: #e0a07a;
      color-scheme: dark;
    }

    /* =========================================================
       2. BASE
       ========================================================= */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      transition: background-color .4s var(--ease), color .4s var(--ease);
      overflow-x: hidden;
    }
    img, svg { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; cursor: pointer; }
    ul { list-style: none; margin: 0; padding: 0; }
    h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.02; margin: 0; letter-spacing: -.01em; font-weight: 600; }
    h1 { font-size: clamp(3rem, 8.6vw, 6.4rem); font-weight: 500; }
    h2 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 500; }
    h3 { font-weight: 600; }
    h1 em, h2 em, .slide-title em { font-style: italic; color: var(--em); font-weight: 500; }
    .cta h2 em { color: inherit; opacity: .72; }
    h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
    p { margin: 0; }
    .container { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
    .section { padding-block: var(--space-section); }
    .lede { color: var(--text-soft); max-width: 52ch; font-size: 1.05rem; }
    .section-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 52px); }
    @media (min-width: 860px) {
      .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
    }
    .tag {
      display: inline-block; width: fit-content; padding: 0; border: 0; background: none;
      font-size: .76rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--eyebrow);
    }
    ::selection { background: var(--accent); color: var(--on-accent); }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    h2, h3 { text-wrap: balance; }
    .lede { text-wrap: pretty; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .skip { position: absolute; left: 12px; top: -60px; background: var(--inverse); color: var(--on-inverse); padding: 10px 16px; border-radius: var(--radius-s); z-index: 100; }
    .skip:focus { top: 12px; }

    /* Buttons */
    .btn {
      --pad: 14px 22px;
      display: inline-flex; align-items: center; gap: 12px;
      padding: var(--pad); border-radius: var(--radius-pill);
      border: 1px solid transparent; font-weight: 700; font-size: .95rem;
      transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 80%, #000); }
    .btn-primary:hover { box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--accent) 85%, #000); }
    .btn-primary .btn-dot {
      width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
      background: var(--on-accent); color: var(--accent); transition: transform .3s var(--ease);
    }
    .btn-primary:hover .btn-dot { transform: rotate(45deg); }
    .btn-ghost { border-color: var(--line); background: var(--surface); }
    .btn-ghost:hover { border-color: var(--text); }
    .btn-dark { background: var(--inverse); color: var(--on-inverse); }
    .btn-small { --pad: 10px 18px; font-size: .88rem; }
    .btn-block { width: 100%; justify-content: center; }

    /* Image placeholders: swap for <img> later */
    .ph {
      position: relative; overflow: hidden; border-radius: var(--radius-m);
      background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(127,127,127,.08) 14px 15px),
        linear-gradient(145deg, var(--ph-a), var(--ph-b));
      display: grid; place-items: end start; color: var(--text);
    }
    .ph span {
      margin: 14px; padding: 5px 12px; border-radius: var(--radius-pill);
      background: var(--surface); font-size: .82rem; font-weight: 500; color: var(--text);
    }
    .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    /* =========================================================
       3. HEADER
       ========================================================= */
    .site-header {
      position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
      display: flex; align-items: center;
      background: color-mix(in srgb, var(--bg) 90%, transparent);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 var(--line);
      transition: background-color .3s, box-shadow .3s;
    }
    .site-header.scrolled { box-shadow: 0 10px 28px -20px rgba(42, 31, 26, .45); }
    .nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .logo { font-family: var(--font-display); font-weight: 700; font-size: 2.05rem; font-style: italic; letter-spacing: .01em; color: var(--text); display: flex; align-items: center; gap: 8px; transition: color .3s; }
    .logo i { width: 12px; height: 12px; background: var(--accent); border-radius: 3px; transform: rotate(45deg); display: inline-block; }
    .site-header.scrolled .logo { color: var(--text); }
    .nav-links { display: none; gap: 2px; font-size: .95rem; font-weight: 500; color: var(--text); }
    .site-header.scrolled .nav-links { color: var(--text); }
    .nav-links a { position: relative; padding: 9px 15px; border-radius: var(--radius-pill); transition: background-color .25s; }
    .nav-links a:hover, .nav-links a.active { background: color-mix(in srgb, currentColor 11%, transparent); }
    .nav-actions { display: flex; align-items: center; gap: 10px; }

    /* Theme toggle */
    .theme-toggle {
      width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
      background: var(--surface); display: grid; place-items: center; color: var(--text);
      position: relative; overflow: hidden; transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease);
    }
    .site-header.scrolled .theme-toggle { border-color: var(--line); background: var(--surface); color: var(--text); }
    .theme-toggle:hover { transform: rotate(18deg); }
    .theme-toggle svg { position: absolute; width: 20px; height: 20px; transition: transform .5s var(--ease), opacity .3s; }
    .theme-toggle .i-sun { transform: translateY(0) rotate(0); opacity: 1; }
    .theme-toggle .i-moon { transform: translateY(30px) rotate(-60deg); opacity: 0; }
    [data-theme="dark"] .theme-toggle .i-sun { transform: translateY(-30px) rotate(60deg); opacity: 0; }
    [data-theme="dark"] .theme-toggle .i-moon { transform: translateY(0) rotate(0); opacity: 1; }

    /* Burger */
    .burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--text); }
    .site-header.scrolled .burger { border-color: var(--line); background: var(--surface); color: var(--text); }
    .burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), background-color .2s; }
    .burger span { position: relative; }
    .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
    .burger span::before { top: -6px; }
    .burger span::after { top: 6px; }
    .menu-open .burger span { background: transparent; }
    .menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
    .menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
    .header-cta { display: none; }

    /* Mobile menu: compact dropdown card under the burger */
    .mobile-menu {
      position: fixed; z-index: 45;
      top: calc(var(--header-h) - 6px); right: var(--gutter);
      width: min(280px, calc(100vw - var(--gutter) * 2));
      background: var(--surface); color: var(--text);
      border: 1px solid var(--line); border-radius: var(--radius-m);
      padding: 8px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5);
      display: flex; flex-direction: column; gap: 2px;
      transform-origin: top right;
      opacity: 0; transform: translateY(-8px) scale(.94); visibility: hidden;
      transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
    }
    .mobile-menu.open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .35s var(--ease), visibility 0s; }
    .mobile-menu a.m-link {
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1;
      padding: 11px 12px; border-radius: var(--radius-s);
      transition: background-color .2s, padding-left .3s var(--ease);
    }
    .mobile-menu a.m-link::after { content: "\2192"; font-family: var(--font-body); font-size: 1rem; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--ease); }
    .mobile-menu a.m-link:hover, .mobile-menu a.m-link:focus-visible { background: var(--surface-2); padding-left: 18px; }
    .mobile-menu a.m-link:hover::after, .mobile-menu a.m-link:focus-visible::after { opacity: 1; transform: none; }
    .mobile-menu.open a.m-link { animation: m-in .4s var(--ease) both; animation-delay: calc(var(--i) * .045s + .06s); }
    @keyframes m-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
    .mobile-menu .btn { margin: 6px 4px 4px; justify-content: center; }
    .menu-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
    .menu-scrim.open { opacity: 1; visibility: visible; transition: opacity .3s; }

    @media (min-width: 900px) {
      .nav-links { display: flex; }
      .burger { display: none; }
      .header-cta { display: inline-flex; }
      .mobile-menu, .menu-scrim { display: none; }
    }

    /* =========================================================
       4. HERO
       ========================================================= */
    .hero {
      position: relative; min-height: 100svh; display: grid; align-content: end;
      padding: calc(var(--header-h) + 48px) 0 clamp(40px, 6vw, 72px);
      color: var(--hero-text); isolation: isolate; overflow: hidden;
      background: var(--hero-bg);
    }
    /* hero media: see v6 block at the end */
    .slide-title { font-size: clamp(3.1rem, 8.6vw, 6.8rem); font-weight: 500; line-height: 1; max-width: 15ch; text-wrap: balance; }
    .slide-title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.07em; }
    .slide-title .line > span { display: block; transform: translateY(110%); }
    .slide.active .slide-title .line > span { animation: line-up 1s var(--ease) forwards; animation-delay: calc(var(--i) * .12s + .15s); }
    @keyframes line-up { to { transform: translateY(0); } }
    .hero-sub { margin-top: 22px; max-width: 40ch; color: var(--hero-sub); font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 500; line-height: 1.5; opacity: 0; }
    .slide-copy .tag { margin-bottom: 20px; opacity: 0; }
    .slide.active .slide-copy .tag { animation: fade-in .8s .05s var(--ease) forwards; }
    .slide.leaving .slide-copy .tag { opacity: 1; animation: none; }
    .slide.active .hero-sub { animation: fade-in .9s .7s var(--ease) forwards; }
    .hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; }
    .slide.active .hero-actions { animation: fade-in .9s .9s var(--ease) forwards; }
    .hero .btn-ghost, .page-hero .btn-ghost { background: transparent; border: 1.5px solid var(--hero-text); color: var(--hero-text); }
    .hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: var(--hero-text); color: var(--bg); }
    @keyframes fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    .hero-stats { position: relative; margin-top: 30px; }

    /* stats: no card, no background */
    .stats-card { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 22px 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; color: inherit; }
    .stat { background: none; padding: 4px 32px 4px 0; }
    .stat + .stat { padding-left: 32px; border-left: 1px solid var(--line); }
    .stat strong { font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 3.5rem); font-weight: 500; line-height: 1; display: block; }
    .stat span { color: var(--text-soft); font-size: .9rem; }
    .hero .stat + .stat { border-color: var(--hero-line); }
    .hero .stat span { color: var(--hero-sub); }
    @media (max-width: 759px) { .stat:nth-child(odd) { border-left: 0; padding-left: 0; } }
    @media (min-width: 760px) { .stats-card { grid-template-columns: repeat(4, auto); } }

    /* =========================================================
       5. STUDIO / CAROUSEL
       ========================================================= */
    .carousel { position: relative; }
    .track {
      display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
      padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .track::-webkit-scrollbar { display: none; }
    .track > * { scroll-snap-align: start; flex: 0 0 auto; }
    .studio-card { width: min(78vw, 300px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px; box-shadow: var(--shadow); }
    .studio-card .ph { aspect-ratio: 4 / 5; transition: transform .6s var(--ease); }
    .studio-card:hover .ph { transform: scale(.98); }
    .studio-card h3 { font-family: var(--font-body); font-size: .98rem; font-weight: 500; padding: 12px 6px 6px; letter-spacing: 0; line-height: 1.3; }
    .studio-card.big { width: min(86vw, 380px); }
    .studio-card.big .ph { aspect-ratio: 4 / 5.2; }
    .car-controls { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
    .car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; transition: background-color .2s, border-color .2s, opacity .2s; }
    .car-btn:hover:not(:disabled) { background: var(--inverse); color: var(--on-inverse); }
    .car-btn:disabled { opacity: .35; cursor: default; }

    /* =========================================================
       6. WHY FORGE / STORY (image mosaic, after the cafe reference)
       ========================================================= */
    .why { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
    @media (min-width: 900px) { .why { grid-template-columns: 1.05fr 1fr; } }
    .mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-m); }
    .tile .ph { position: absolute; inset: 0; border-radius: 0; transition: transform 1s var(--ease); }
    .tile:hover .ph { transform: scale(1.06); }
    .tile .ph span { background: rgba(20, 20, 18, .62); color: #fff;  margin: 12px; }
    .tile-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: var(--radius-l) var(--radius-l) var(--radius-m) var(--radius-m); }
    .tile-a { aspect-ratio: 1 / 1; border-radius: 120px var(--radius-m) var(--radius-m) var(--radius-m); }
    .tile-b { aspect-ratio: 1 / 1; border-radius: var(--radius-m) var(--radius-m) 120px var(--radius-m); }
    .why-copy { display: grid; gap: 18px; justify-items: start; }
    .why-points { display: grid; gap: 2px; width: 100%; margin: 6px 0 8px; }
    .why-point { display: flex; gap: 16px; align-items: flex-start; padding: 14px 14px; border-radius: var(--radius-m); transition: background-color .3s, transform .45s var(--ease); }
    .why-point:hover { background: var(--surface); transform: translateX(6px); }
    .wp-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--surface); transition: background-color .3s, color .3s, transform .5s var(--ease); }
    .why-point:hover .wp-ico { background: var(--accent); color: var(--on-accent); transform: rotate(-10deg); }
    .why-point h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
    .why-point p { color: var(--text-soft); font-size: .93rem; margin-top: 2px; }
    .fact-list { display: grid; gap: 10px; font-size: .95rem; }
    .fact-list li { display: flex; gap: 10px; align-items: flex-start; }
    .fact-list svg { flex: none; margin-top: 4px; }
    .why-copy p.body { color: var(--text-soft); max-width: 54ch; }

    /* =========================================================
       7. AMENITIES, TRAINERS, VISIT, ENQUIRY
       ========================================================= */
    .amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .amenity { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); font-weight: 500; font-size: .94rem; line-height: 1.25; }
    .a-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; transition: background-color .3s, color .3s, transform .4s var(--ease); }
    .amenity:hover .a-ico { background: var(--accent); color: var(--on-accent); transform: rotate(-8deg); }
    @media (min-width: 900px) { .amenities { grid-template-columns: repeat(4, 1fr); gap: 14px; } .amenity { padding: 18px; } }

    .trainer { width: min(78vw, 280px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px; box-shadow: var(--shadow); }
    .trainer .ph { aspect-ratio: 3 / 4; }
    .trainer-body { padding: 14px 6px 8px; display: grid; gap: 4px; }
    .trainer-body h3 { font-size: 1.5rem; }
    .trainer-body b { font-size: .9rem; font-weight: 700; }
    .trainer-body p { color: var(--text-soft); font-size: .92rem; }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .78rem; color: var(--text-soft); }

    .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; }
    .card h3 { margin-bottom: 14px; }
    .card-note { margin-top: 12px; font-size: .86rem; color: var(--text-soft); }
    .visit-grid { display: grid; gap: 16px; }
    .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
    @media (min-width: 960px) { .visit-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

    .hours li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: .95rem; }
    .hours li span:last-child { color: var(--text-soft); }
    .hours li.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
    .hours li.today span:last-child { color: inherit; }

    .daypicker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
    .daypicker button { min-width: 42px; height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-size: .82rem; font-weight: 500; transition: background-color .2s, color .2s; }
    .daypicker button[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }
    .chart { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; height: 150px; align-items: end; }
    .bar { height: 100%; padding: 0; border: 0; background: transparent; display: flex; align-items: flex-end; border-radius: 6px; }
    .bar i { display: block; width: 100%; height: calc(var(--v, 0) * 1%); border-radius: 6px 6px 2px 2px; background: var(--inverse); opacity: calc(.16 + var(--v, 0) * .0045); transition: height .6s var(--ease), opacity .4s, background-color .3s; }
    .bar:hover i, .bar:focus-visible i { opacity: .9; }
    .bar.closed i { opacity: .12; }
    .bar.now i { background: var(--accent); opacity: 1; outline: 2px solid var(--text); outline-offset: 1px; }
    .chart-labels { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; margin-top: 8px; font-size: .72rem; color: var(--text-soft); }
    .chart-labels span { white-space: nowrap; }

    .contact-list { display: grid; gap: 14px; margin-bottom: 20px; }
    .contact-list li { display: flex; gap: 14px; align-items: flex-start; font-size: .95rem; }
    .contact-list svg { flex: none; margin-top: 2px; }
    .contact-list b { display: block; }
    .contact-list span, .contact-list a { color: var(--text-soft); }
    .contact-list a { text-decoration: underline; text-underline-offset: 3px; }
    .contact-list a:hover { color: var(--text); }

    .rules { display: grid; gap: 16px; margin-top: 16px; }
    @media (min-width: 760px) { .rules { grid-template-columns: 1fr 1fr; } }
    .tick-list { display: grid; gap: 10px; font-size: .95rem; }
    .tick-list li { display: flex; gap: 10px; align-items: flex-start; }
    .tick-list svg { flex: none; margin-top: 4px; color: var(--text); }
    .plan-note { margin-top: 20px; text-align: center; color: var(--text-soft); font-size: .92rem; }

    .enquiry { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(20px, 3vw, 32px); }
    .field-row { display: grid; gap: 16px; }
    @media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
    .field { display: grid; gap: 6px; align-content: start; }
    .field label { font-size: .9rem; font-weight: 500; }
    .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; transition: border-color .2s; }
    .field textarea { resize: vertical; min-height: 88px; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--text); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
    .field [aria-invalid="true"] { border-color: #d9444a; }
    .err { font-size: .82rem; color: #d9444a; min-height: 1.1em; }

    /* =========================================================
       8. PRICING
       ========================================================= */
    .billing { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); margin-bottom: 28px; }
    .billing button { border: 0; background: transparent; padding: 8px 20px; border-radius: var(--radius-pill); font-weight: 500; transition: background-color .25s, color .25s; }
    .billing button[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); }
    .billing small { color: var(--accent); font-weight: 700; margin-left: 4px; }
    :root[data-theme="light"] .billing small { color: var(--accent); }
    .plans { display: grid; gap: 16px; }
    .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px 24px; display: grid; gap: 18px; align-content: start; position: relative; transition: border-color .3s; }
    .plan:not(.featured):hover { border-color: var(--text-soft); }
    .plan.featured { border: 2px solid var(--accent); box-shadow: var(--shadow); }
    .plan .badge { position: absolute; top: 18px; right: 18px; background: var(--accent); color: var(--on-accent); padding: 3px 12px; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700; }
    .price { font-family: var(--font-display); font-size: 4rem; font-weight: 600; line-height: 1; display: flex; align-items: baseline; gap: 6px; }
    .price small { font-family: var(--font-body); font-size: .9rem; font-weight: 400; color: var(--text-soft); }
    .price .amt { display: inline-block; transition: transform .35s var(--ease), opacity .35s; }
    .price .amt.flip { transform: translateY(-10px); opacity: 0; }
    .plan ul { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; font-size: .95rem; }
    .plan li { display: flex; gap: 10px; align-items: flex-start; }
    .plan li svg { flex: none; margin-top: 4px; color: var(--accent); }
    :root[data-theme="light"] .plan li svg { color: var(--accent); }
    @media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .plan.featured { transform: translateY(-12px); } }

    /* =========================================================
       9. TESTIMONIALS
       ========================================================= */
    .quote { width: min(84vw, 380px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; display: grid; gap: 18px; align-content: space-between; }
    .stars { color: var(--accent); letter-spacing: 3px; font-size: 1.05rem; }
    :root[data-theme="light"] .stars { color: #b9772f; }
    .quote footer { display: flex; align-items: center; gap: 12px; }
    .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, var(--ph-a), var(--ph-b)); display: grid; place-items: center; font-weight: 700; flex: none; }
    .quote small { color: var(--text-soft); display: block; line-height: 1.3; }

    /* =========================================================
       10. FAQ + CONTACT
       ========================================================= */
    .two-col { display: grid; gap: 36px; }
    @media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1.5fr; gap: 64px; } }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; background: transparent; border: 0; text-align: left; font-weight: 700; font-size: 1.02rem; }
    .faq-q .plus { width: 28px; height: 28px; flex: none; position: relative; border-radius: 50%; border: 1px solid var(--line); transition: background-color .25s, transform .4s var(--ease); }
    .faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
    .faq-q .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
    .faq-q[aria-expanded="true"] .plus { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
    .faq-q[aria-expanded="true"] .plus::after { transform: translate(-50%, -50%) rotate(0); }
    .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
    .faq-a > div { overflow: hidden; color: var(--text-soft); }
    .faq-a p { padding-bottom: 20px; max-width: 60ch; }
    .faq-item.open .faq-a { grid-template-rows: 1fr; }

    .info-row { display: grid; gap: 14px; margin-bottom: 20px; }
    .info { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
    .info svg { flex: none; margin-top: 3px; }
    .info b { display: block; }
    .info span { color: var(--text-soft); }
    @media (min-width: 700px) { .info-row { grid-template-columns: repeat(3, 1fr); } }
    .map { aspect-ratio: 16 / 9; min-height: 240px; border-radius: var(--radius-l); background:
      linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 44px 44px,
      var(--surface-2); position: relative; overflow: hidden; display: grid; place-items: center; }
    .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* drop a Google Maps embed here */
    .pin { width: 22px; height: 22px; background: var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); position: relative; }
    .pin::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--accent); animation: pulse 2.2s ease-out infinite; }
    @keyframes pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

    /* =========================================================
       11. CTA + FOOTER
       ========================================================= */
    .cta { position: relative; border-radius: var(--radius-l); overflow: hidden; padding: clamp(48px, 9vw, 110px) var(--gutter); text-align: center; background: var(--inverse); color: var(--on-inverse); isolation: isolate; }
    .cta p { margin: 16px auto 28px; max-width: 46ch; opacity: .8; }

    .site-footer { padding: 64px 0 28px; }
    .footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
    .footer-grid .news { grid-column: 1 / -1; }
    .footer-grid h4 { font-family: var(--font-body); font-size: .9rem; font-weight: 700; margin-bottom: 12px; letter-spacing: 0; }
    .footer-grid li { color: var(--text-soft); font-size: .9rem; margin-bottom: 8px; }
    .footer-grid li a:hover { color: var(--text); text-decoration: underline; }
    .news form { display: flex; gap: 8px; max-width: 380px; margin-top: 12px; }
    .news input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
    .news input[aria-invalid="true"] { border-color: var(--accent); }
    .form-note { font-size: .85rem; color: var(--text-soft); min-height: 1.4em; margin-top: 8px; }
    .footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-soft); }
    .socials { display: flex; gap: 10px; }
    .socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background-color .2s, color .2s; }
    .socials a:hover { background: var(--inverse); color: var(--on-inverse); }
    @media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } .footer-grid .news { grid-column: auto; } }

    /* =========================================================
       11b. SMALL INTERACTIVE TOUCHES
       ========================================================= */
    .progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; z-index: 60; pointer-events: none; }


    .hero-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; margin-bottom: 22px; border-radius: var(--radius-pill); border: 1px solid var(--hero-line); background: var(--hero-glass);  font-size: .86rem; font-weight: 500; opacity: 0; animation: fade-in .8s .05s var(--ease) forwards; }
    .hero-status .live-dot { background: #8a8a8a; color: #8a8a8a; }
    .hero-status[data-open="true"] .live-dot { background: #2fa45a; color: #2fa45a; }

    .float-cta { position: fixed; right: var(--gutter); bottom: 18px; z-index: 40; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; transition: opacity .35s, transform .45s var(--ease); }
    .float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
    .float-cta.show:hover { transform: translateY(-2px); }
    .float-cta { display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--inverse); color: var(--on-inverse); }
    .float-cta .qa { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 700; transition: background-color .2s; }
    .float-cta .qa:hover { background: color-mix(in srgb, var(--on-inverse) 16%, transparent); }

    /* cursor spotlight on cards (mouse only) */
    @media (hover: hover) and (pointer: fine) {
      .spot:hover { background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
      .btn-primary:hover, .btn-dark:hover { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 2px)); }
    }

    /* =========================================================
       11c. HERO SLIDES, PAGE HERO, OUTLINE BUTTON, CAROUSEL MOTION
       ========================================================= */
    .btn-outline { border: 1.5px solid var(--text); background: transparent; font-weight: 500; }
    .btn-outline:hover { background: var(--inverse); color: var(--on-inverse); }

    .slides { display: grid; }
    .slide { grid-area: 1 / 1; display: grid; gap: 32px; align-items: end; visibility: hidden; pointer-events: none; }
    .slide.active { visibility: visible; pointer-events: auto; }
    .slide.leaving { visibility: visible; }
    @keyframes visual-in { to { clip-path: inset(0 0 0 0); } }
    @keyframes visual-zoom { from { transform: scale(1.22); } to { transform: scale(1); } }
    @keyframes slide-out { to { opacity: 0; transform: translateY(-16px); } }
    .slide.leaving .slide-copy { animation: slide-out .45s var(--ease) forwards; }
    .slide.leaving .slide-title .line > span { transform: none; animation: none; }
    .slide.leaving .hero-sub, .slide.leaving .hero-actions { opacity: 1; animation: none; }

    .hero-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
    .hero-controls .hero-status { margin: 0 0 0 8px; }
    .hc-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hero-line); background: var(--hero-glass); color: var(--hero-text); display: grid; place-items: center; transition: background-color .25s, transform .3s var(--ease); }
    .hc-btn:hover { background: var(--hero-text); color: var(--bg); transform: scale(1.06); }
    .dots { display: flex; gap: 6px; }
    .dot { position: relative; width: 38px; height: 16px; padding: 0; border: 0; background: transparent; }
    .dot::before, .dot::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 4px; }
    .dot::before { background: var(--hero-line); }
    .dot::after { background: var(--hero-text); transform: scaleX(0); transform-origin: left; }
    .dot.active::after { animation: dot-fill var(--dur, 6.5s) linear forwards; }
    .hero.paused .dot.active::after { animation-play-state: paused; }
    .hero.no-auto .dot.active::after { animation: none; transform: scaleX(1); }
    @keyframes dot-fill { to { transform: scaleX(1); } }

    .page-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--hero-text); background: var(--hero-bg); padding: calc(var(--header-h) + clamp(44px, 8vw, 90px)) 0 clamp(56px, 8vw, 96px); }
    .page-hero .container > * { animation: fade-in .9s var(--ease) both; }
    .page-hero .container > :nth-child(2) { animation-delay: .12s; }
    .page-hero .container > :nth-child(3) { animation-delay: .24s; }
    .page-hero h1 { font-size: clamp(3rem, 8vw, 5.8rem); font-weight: 500; max-width: 15ch; text-wrap: balance; }
    .page-hero p.sub { color: var(--hero-sub); max-width: 52ch; margin-top: 18px; font-size: 1.1rem; }
    .page-hero .btn-row { margin-top: 28px; }

    .clip-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); }
    .clip-reveal.in { clip-path: inset(0 0 0 0); }

    .js-ready .track > * { transition: opacity .5s var(--ease), transform .6s var(--ease); }
    .js-ready .track > *:not(.in-view) { opacity: .5; transform: scale(.95); }
    .car-progress { position: relative; flex: 1; max-width: 160px; height: 4px; align-self: center; border-radius: 4px; background: var(--line); overflow: hidden; }
    .car-progress i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 4px; background: var(--text); transition: left .15s linear, width .2s; }

    /* =========================================================
       12. SCROLL REVEAL (kept subtle) + REDUCED MOTION
       ========================================================= */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
    .reveal.in { opacity: 1; transform: none; }
    .no-js .reveal { opacity: 1; transform: none; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
      .slide-title .line > span, .hero-sub, .hero-actions { transform: none; opacity: 1; }
      .hero-bars b { transform: scaleY(var(--h, .5)); }
      .reveal { opacity: 1; transform: none; }
    }
  

/* =====================================================================
   v6  SHARP, SMOOTH, RICHER  (crisp type, glass, layered depth, GPU-only motion)
   ===================================================================== */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --radius-s: 12px; --radius-m: 20px; --radius-l: 30px; --header-h: 60px; }
:root, :root[data-theme="light"] {
  --bg: #f4f0e9; --surface: #fffdfa; --surface-2: #ece6da;
  --text: #1d1612; --text-soft: #6a5e55; --line: rgba(29, 22, 18, .1);
  --shadow: 0 1px 1px rgba(40, 24, 10, .04), 0 3px 8px rgba(40, 24, 10, .04), 0 22px 44px -22px rgba(40, 24, 10, .28);
  --shadow-lg: 0 2px 4px rgba(40, 24, 10, .05), 0 30px 70px -30px rgba(40, 24, 10, .45);
  --hero-bg:
    radial-gradient(60% 60% at 8% 0%, rgba(154, 91, 46, .17), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, rgba(79, 91, 58, .2), transparent 70%),
    linear-gradient(180deg, #f9f5ee, #f1eadd);
  --hero-text: #1d1612;
  --em-a: #a35f2f; --em-b: #4f5b3a;
}
:root[data-theme="dark"] {
  --bg: #0a0a10; --surface: #14141c; --surface-2: #1d1d27;
  --text: #f5f4fa; --text-soft: #a3a1b6; --line: rgba(255, 255, 255, .09);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 50px -24px rgba(0, 0, 0, .9);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 80px -30px rgba(0, 0, 0, .95);
  --hero-bg:
    radial-gradient(60% 60% at 0% 0%, rgba(228, 17, 63, .24), transparent 65%),
    radial-gradient(50% 60% at 100% 100%, rgba(120, 80, 255, .2), transparent 70%),
    linear-gradient(180deg, #0f0e18, #08080d);
  --hero-text: #ffffff;
  --em-a: #ff8aa2; --em-b: #ff3d68;
}

/* ---- type: tight, high contrast, SF-style ---- */
body { font-feature-settings: "cv11", "ss01"; letter-spacing: -.011em; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 600; letter-spacing: -.025em; }
h1 em, h2 em, .slide-title em {
  font-style: normal; font-weight: inherit;
  background: linear-gradient(100deg, var(--em-a), var(--em-b)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta h2 em { background-image: linear-gradient(100deg, #f4cfa4, #dfe8bd); opacity: 1; }
:root[data-theme="dark"] .cta h2 em { background-image: linear-gradient(100deg, #e4113f, #ff4d7a); }
.tag { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--eyebrow); }
.lede { font-size: 1.12rem; line-height: 1.55; }
.section-head { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 14px; }
.section-head .lede { margin-inline: auto; }
.logo { font-style: normal; font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; }
.slide-title { font-size: clamp(2.9rem, 6.2vw, 5.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; max-width: 13ch; }
.slide-title .line { padding-bottom: .12em; margin-bottom: -.05em; }
.hero-sub { font-family: var(--font-body); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 400; line-height: 1.5; max-width: 42ch; letter-spacing: -.012em; }
.stat strong { font-weight: 600; letter-spacing: -.04em; font-size: clamp(2rem, 4vw, 3rem); }
.price { font-size: 3.4rem; font-weight: 700; letter-spacing: -.045em; }
.trainer-body h3 { font-size: 1.35rem; }
.mobile-menu a.m-link { font-size: 1.45rem; font-weight: 600; letter-spacing: -.025em; }
.page-hero h1 { font-size: clamp(2.9rem, 7vw, 5.2rem); font-weight: 700; letter-spacing: -.045em; }

/* ---- header: frosted glass ---- */
.site-header { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 .5px 0 var(--line); }
.site-header.scrolled { box-shadow: 0 .5px 0 var(--line), 0 12px 30px -24px rgba(30, 20, 10, .5); }
.nav-links a { font-size: .9rem; padding: 7px 14px; }
.mobile-menu { border-radius: 24px; box-shadow: var(--shadow-lg); }

/* ---- buttons: sheen + crisp ---- */
.btn { font-weight: 600; letter-spacing: -.012em; padding: 13px 22px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(0, 0, 0, .12), 0 12px 24px -12px color-mix(in srgb, var(--accent) 80%, #000);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .12), 0 18px 30px -12px color-mix(in srgb, var(--accent) 85%, #000); }
.btn-ghost { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--line); }
.btn-dark { background: var(--inverse); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }

/* ---- cards: hairline + layered depth ---- */
.card, .plan, .quote, .studio-card, .trainer, .enquiry, .amenity, .stats-card.boxed {
  border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 26px; background: var(--surface);
}
.studio-card .ph, .trainer .ph { border-radius: 18px; }
.plan.featured { border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow-lg); }
.tile-main, .tile-a, .tile-b { border-radius: 28px; }
.tile { box-shadow: var(--shadow); }
.cta { border-radius: 36px; background: radial-gradient(80% 120% at 50% 135%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 62%), var(--inverse); }
.float-cta { background: color-mix(in srgb, var(--inverse) 90%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .plan, .amenity, .trainer, .studio-card, .quote { transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
  .plan:hover, .amenity:hover, .trainer:hover, .studio-card:hover, .quote:hover { box-shadow: var(--shadow-lg); }
  .plan:hover, .amenity:hover { transform: translateY(-4px); }
}

/* ---- live dot: transform + opacity only (no paint) ---- */
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); color: var(--accent); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: .5; animation: dot-ping 2.2s ease-out infinite; }
@keyframes dot-ping { to { transform: scale(2.8); opacity: 0; } }
.hero-status { background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--line); color: var(--text); }

/* ---- hero: image card (stacked on phones, side card on desktop) ---- */
.hero { padding-top: calc(var(--header-h) + 24px); }
.hero .stats-card { display: grid; grid-template-columns: repeat(2, auto); gap: 22px 52px; justify-content: start; }
.stats-card { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.stat, .stat + .stat { padding: 0; border: 0; }
.hero-stats { margin-top: 26px; }

/* ---- motion: GPU properties only, softer travel ---- */
.reveal { transform: translateY(28px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.clip-reveal { clip-path: none; opacity: 0; transform: translateY(28px) scale(.97); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.clip-reveal.in { clip-path: none; opacity: 1; transform: none; }
.slide.active .slide-title .line > span { animation-duration: 1.1s; animation-timing-function: var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.track { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  .clip-reveal, .reveal { opacity: 1; transform: none; }
  .live-dot::after { animation: none; opacity: 0; }
  .js-ready .track > *:not(.in-view) { opacity: 1; transform: none; }
}


/* =====================================================================
   v7  DARK-FIRST, BOLD, LIME + CURSOR FOLLOWER
   ===================================================================== */
:root[data-theme="dark"] {
  --bg: #08080a; --surface: #111114; --surface-2: #1a1a1f;
  --text: #f5f5f7; --text-soft: #9b9ba6; --line: rgba(255, 255, 255, .09);
  --accent: #c6f432; --on-accent: #0b0b0d; --inverse: #f5f5f7; --on-inverse: #0b0b0d;
  --ph-a: #2b2b32; --ph-b: #16161a;
  --hero-bg:
    radial-gradient(55% 55% at 0% 0%, rgba(198, 244, 50, .14), transparent 65%),
    radial-gradient(45% 55% at 100% 100%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(180deg, #0b0b0e, #060608);
  --hero-text: #ffffff; --hero-sub: rgba(255, 255, 255, .72); --hero-glass: rgba(255, 255, 255, .07); --hero-line: rgba(255, 255, 255, .22);
  --em-a: #e6ff80; --em-b: #9be31a; --eyebrow: #c6f432;
  --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 50px -24px rgba(0, 0, 0, .95);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -30px rgba(0, 0, 0, 1);
}
:root[data-theme="dark"] h1, :root[data-theme="dark"] .slide-title, :root[data-theme="dark"] .page-hero h1 { font-weight: 800; letter-spacing: -.05em; }
:root[data-theme="dark"] h2 { font-weight: 800; letter-spacing: -.045em; }
:root[data-theme="dark"] .cta { background: radial-gradient(70% 120% at 50% 135%, rgba(198, 244, 50, .26), transparent 62%), #111114; color: var(--text); border: 1px solid var(--line); }
:root[data-theme="dark"] .cta h2 em { background-image: linear-gradient(100deg, #e6ff80, #9be31a); }
:root[data-theme="dark"] .btn-primary { background: linear-gradient(180deg, #d9ff5c, #c6f432); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(198, 244, 50, .35), 0 14px 34px -12px rgba(198, 244, 50, .55); }
:root[data-theme="dark"] .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(198, 244, 50, .5), 0 18px 44px -10px rgba(198, 244, 50, .7); }
:root[data-theme="dark"] .stars { color: var(--accent); }
:root[data-theme="dark"] .plan.featured { box-shadow: 0 0 0 4px rgba(198, 244, 50, .12), var(--shadow-lg); }

/* ---- cursor follower: lime circle, springy zoom, inverts what is under it ---- */
.cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; will-change: transform; }
.cursor.on { opacity: 1; }
.cursor-dot { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: #c6f432; transform: scale(1); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background-color .3s, opacity .3s; }
.cursor.hot .cursor-dot { transform: scale(3.4); background: #d8ff3a; }
.cursor.down .cursor-dot { transform: scale(.8); }
.cursor.hot.down .cursor-dot { transform: scale(2.8); }
.cursor.text .cursor-dot { transform: scale(.22); }
:root[data-theme="light"] .cursor { mix-blend-mode: normal; }
:root[data-theme="light"] .cursor-dot { opacity: .9; background: #b7e600; }
:root[data-theme="light"] .cursor.hot .cursor-dot { opacity: .3; }
@media (hover: hover) and (pointer: fine) {
  .btn.is-cursor { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 2px)) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } }


/* =====================================================================
   v8  ISLAND HEADER: full-width bar that squeezes into a floating pill on scroll
   ===================================================================== */
:root { --spring: cubic-bezier(.34, 1.36, .64, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }
.site-header {
  height: auto; padding: 0; display: flex; justify-content: center; align-items: flex-start;
  background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; pointer-events: none;
}
.site-header .nav-wrap {
  pointer-events: auto; width: 100%; max-width: 100%; margin: 0 auto; height: var(--header-h);
  padding-inline: var(--gutter); border-radius: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 .5px 0 var(--line);
  transition: width .9s var(--ease-out), margin-top .8s var(--ease-out), height .8s var(--ease-out), padding-inline .8s var(--ease-out),
              border-radius .8s var(--ease-out), background-color .4s, box-shadow .6s;
  will-change: width;
}
.site-header.scrolled .nav-wrap {
  margin-top: 10px; height: 54px; padding-inline: 12px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .site-header.scrolled .nav-wrap {
  background: rgba(10, 10, 12, .88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 44px -14px rgba(0, 0, 0, .95);
}
.site-header .logo { transition: font-size .6s var(--ease), padding .6s var(--ease); }
.site-header.scrolled .logo { font-size: 1.2rem; padding-left: 8px; }
.site-header.scrolled .nav-links a { padding: 6px 12px; }
.site-header.scrolled .header-cta { padding: 9px 16px; }
/* blur is switched off only while the bar is moving (cheaper frames) */
.nav-wrap.moving { -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-links a { transition: background-color .25s, padding .8s var(--ease-out); }

/* menu hangs under the pill, centred */
.mobile-menu { left: 0; right: 0; margin-inline: auto; width: min(300px, calc(100vw - var(--gutter) * 2)); top: calc(var(--header-h) + 6px); transform-origin: top center; transition: top .8s var(--ease-out), opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
html.is-scrolled .mobile-menu { top: 76px; }


/* =====================================================================
   v9  TEXT ON THE HERO PHOTO + ENDLESS FADING REELS
   ===================================================================== */

.marquee {
  position: relative; width: 100vw; margin-inline: calc(50% - 50vw); padding: 44px 0 64px; overflow: hidden;
  perspective: 1100px; perspective-origin: 50% 45%; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.marquee.no-fade { -webkit-mask-image: none; mask-image: none; }
.marquee:active { cursor: grabbing; }
.marquee-track { position: relative; display: flex; gap: 22px; width: max-content; padding-left: 8vw; transform-style: preserve-3d; will-change: transform; }
.marquee-track > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: 50% 50%; }
.marquee .quote { height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track > [data-clone] { display: none; }
}


/* =====================================================================
   v10  HERO SLIDES RESTORED (text left, shaped photo right, rings + bars) + DARK PALETTE POLISH
   ===================================================================== */
:root, :root[data-theme="light"] { --rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%232a1f1a' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='34' stroke-opacity='0.22'/%3E%3Ccircle cx='200' cy='200' r='68' stroke-opacity='0.17'/%3E%3Ccircle cx='200' cy='200' r='102' stroke-opacity='0.13'/%3E%3Ccircle cx='200' cy='200' r='136' stroke-opacity='0.09'/%3E%3Ccircle cx='200' cy='200' r='170' stroke-opacity='0.06'/%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='0.035'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] { --rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='34' stroke-opacity='0.22'/%3E%3Ccircle cx='200' cy='200' r='68' stroke-opacity='0.17'/%3E%3Ccircle cx='200' cy='200' r='102' stroke-opacity='0.13'/%3E%3Ccircle cx='200' cy='200' r='136' stroke-opacity='0.09'/%3E%3Ccircle cx='200' cy='200' r='170' stroke-opacity='0.06'/%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='0.035'/%3E%3C/svg%3E"); }

.hero { padding: calc(var(--header-h) + 36px) 0 clamp(36px, 6vw, 64px); }
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(86vmin, 820px); aspect-ratio: 1; right: -12%; top: 46%; transform: translateY(-50%);
  background: var(--rings) center / contain no-repeat; animation: ring-in 1.4s var(--ease) both;
}
@keyframes ring-in { from { opacity: 0; transform: translateY(-50%) scale(.85); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.hero-bars { position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 18px); padding-inline: var(--gutter); opacity: .2; pointer-events: none; }
.hero-bars b { flex: 1; background: linear-gradient(180deg, var(--accent), transparent); border-radius: 6px 6px 0 0; transform-origin: bottom; transform: scaleY(0); animation: bar-rise 1.4s var(--ease) forwards; }
@keyframes bar-rise { to { transform: scaleY(var(--h, .5)); } }

.slide-visual { display: none; }
@media (min-width: 900px) {
  .slide { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .slide-visual { display: block; position: relative; justify-self: end; width: min(100%, 400px); aspect-ratio: 4 / 5; max-height: 52vh; border-radius: var(--shape, 28px); overflow: hidden; box-shadow: var(--shadow-lg); clip-path: inset(0 0 100% 0); }
}
.slide-visual .ph { position: absolute; inset: 0; border-radius: 0; }
.slide-visual::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .74) 100%); }
.sv-caption { position: absolute; left: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: 26px; max-width: 28ch; color: #fff; }
.sv-caption b { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.sv-caption span { font-size: .95rem; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.sv-caption > * { opacity: 0; transform: translateY(12px); }
.slide.active .sv-caption > * { opacity: 1; transform: none; transition: opacity .7s var(--ease) .9s, transform .8s var(--ease) .9s; }
.slide.active .sv-caption > :nth-child(2) { transition-delay: 1.02s; }
.slide.leaving .sv-caption > * { opacity: 1; transform: none; }
.slide.active .slide-visual { animation: visual-in 1.1s .2s var(--ease) forwards; }
.slide.active .slide-visual .ph { animation: visual-zoom 1.8s .2s var(--ease) both; }
.slide.leaving .slide-visual { clip-path: inset(0 0 0 0); animation: slide-out .45s var(--ease) forwards; }

/* ---- dark palette: deeper base, lifted surfaces, lime used sparingly ---- */
:root[data-theme="dark"] {
  --bg: #090a0c; --surface: #111317; --surface-2: #191c22;
  --text: #eef0f4; --text-soft: #99a0ab; --line: rgba(255, 255, 255, .08);
  --shadow: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 20px 44px -24px rgba(0, 0, 0, .85);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 36px 80px -30px rgba(0, 0, 0, .95);
  --hero-bg:
    radial-gradient(55% 55% at 0% 0%, rgba(198, 244, 50, .12), transparent 65%),
    radial-gradient(45% 55% at 100% 100%, rgba(120, 140, 190, .1), transparent 70%),
    linear-gradient(180deg, #0c0d10, #07080a);
  --hero-sub: rgba(238, 240, 244, .7);
  --em-a: #eaff94; --em-b: #a9e620;
}
:root[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .btn-ghost:hover { border-color: rgba(255, 255, 255, .4); }
:root[data-theme="dark"] .site-header .nav-wrap { background: rgba(9, 10, 12, .86); }
:root[data-theme="dark"] .site-header.scrolled .nav-wrap { background: rgba(14, 15, 18, .9); }
:root[data-theme="dark"] .tag { color: var(--accent); }
:root[data-theme="dark"] .amenity, :root[data-theme="dark"] .quote, :root[data-theme="dark"] .trainer, :root[data-theme="dark"] .studio-card, :root[data-theme="dark"] .card, :root[data-theme="dark"] .plan, :root[data-theme="dark"] .enquiry { background: linear-gradient(180deg, #14161b, #101216); }
:root[data-theme="dark"] .plan.featured { background: linear-gradient(180deg, #181b14, #111317); }

/* soft colour washes behind a few sections (static gradients, no blur) */
#pricing, #visit, #faq { position: relative; }
#pricing::before, #visit::before, #faq::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#pricing::before { background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); }
#visit::before { background: radial-gradient(55% 50% at 100% 20%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%); }
#faq::before { background: radial-gradient(55% 50% at 0% 80%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%); }

/* reels: static edge fades instead of a mask (cheaper while cards animate) */
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 3; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee.no-fade::before, .marquee.no-fade::after { display: none; }

html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .slide-visual { clip-path: none !important; }
  .hero::after { animation: none; }
  .sv-caption > * { opacity: 1; transform: none; }
  .hero-bars b { transform: scaleY(var(--h, .5)); }
}


/* =========================================================
   HERO DYNAMIC BACKGROUNDS (Cross-device with text sync)
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-backdrops {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-backdrop {
  position: absolute;
  inset: -15px;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.hero-backdrop.active {
  opacity: 0.65;
  transform: scale(1);
}
.hero-backdrop-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    linear-gradient(180deg, 
      rgba(9, 10, 12, 0.62) 0%, 
      rgba(9, 10, 12, 0.74) 45%, 
      rgba(9, 10, 12, 0.94) 85%,
      rgba(9, 10, 12, 1) 100%),
    radial-gradient(ellipse at 30% 40%, 
      rgba(9, 10, 12, 0.3) 0%, 
      rgba(9, 10, 12, 0.85) 100%);
}
:root[data-theme="light"] .hero-backdrop.active {
  opacity: 0.22;
}
:root[data-theme="light"] .hero-backdrop-scrim {
  background: 
    linear-gradient(180deg, 
      rgba(248, 243, 234, 0.82) 0%, 
      rgba(248, 243, 234, 0.88) 50%, 
      rgba(239, 229, 213, 0.98) 100%);
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero-bars {
  z-index: 1;
}