/* ==========================================================================
   MINZIN MUAY THAI — STYLESHEET
   Black & gold, fight-club premium. CSS custom properties drive the theme.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                       */
/* ---------------------------------------------------------------------- */
:root {
  --black: #0A0A0A;
  --charcoal: #141414;
  --charcoal-2: #1B1B1B;
  --gold: #D4AF37;
  --gold-light: #F0D77B;
  --gold-dim: rgba(212, 175, 55, 0.12);
  --gold-dim-2: rgba(212, 175, 55, 0.28);
  --white: #F5F2EA;
  --grey: #8A8A85;
  --grey-dark: #55534E;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;

  --section-pad-desktop: clamp(100px, 9vw, 140px);
  --section-pad-mobile: clamp(64px, 14vw, 80px);

  --ease-punch: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  --container-max: 1320px;
  --radius-sharp: 2px;
}

/* ---------------------------------------------------------------------- */
/* 2. RESET                                                               */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; font-weight: 400; }

::selection { background: var(--gold); color: var(--black); }

/* Custom thin gold scrollbar (desktop / webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--gold-dim-2); border-radius: 10px; border: 2px solid var(--black); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
html { scrollbar-width: thin; scrollbar-color: var(--gold-dim-2) var(--black); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------- */
/* 3. TYPE SCALE                                                          */
/* ---------------------------------------------------------------------- */
h1, .h1 { font-size: clamp(2.6rem, 8vw, 6.2rem); letter-spacing: 0.01em; }
h2, .h2 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
h3, .h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h4, .h4 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
p { max-width: 65ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }

.gold { color: var(--gold); }
.gold-gradient-text {
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 45%, #a9812a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-grey { color: var(--grey); }

/* ---------------------------------------------------------------------- */
/* 4. LAYOUT HELPERS                                                      */
/* ---------------------------------------------------------------------- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
section { position: relative; padding-block: var(--section-pad-mobile); }
@media (min-width: 900px) { section { padding-block: var(--section-pad-desktop); } }
.bg-charcoal { background: var(--charcoal); }
.bg-black { background: var(--black); }

.section-head { max-width: 640px; margin-bottom: clamp(36px, 6vw, 64px); position: relative; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .rule {
  display: block; width: 64px; height: 2px; background: var(--gold);
  margin-top: 20px; transform: scaleX(0); transform-origin: left;
}
.section-head.center .rule { margin-inline: auto; }
.section-head .rule.in-view { transform: scaleX(1); transition: transform 0.7s var(--ease-punch); }

/* Thai script watermark */
.thai-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-size: clamp(6rem, 24vw, 16rem);
  color: var(--gold); opacity: 0.035; pointer-events: none; z-index: 0;
  white-space: nowrap; user-select: none;
}

/* Grain overlay */
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Corner-bracket framing */
.bracket-frame { position: relative; }
.bracket-frame::before, .bracket-frame::after {
  content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold);
}
.bracket-frame::before { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.bracket-frame::after { bottom: -8px; right: -8px; border-left: none; border-top: none; }

/* Diagonal cut divider */
.diagonal-cut-top { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0% 100%); }
.diagonal-cut-bottom { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw)); }

/* Ghost numerals */
.ghost-num {
  font-family: var(--font-display); font-size: clamp(4.5rem, 14vw, 9rem);
  color: transparent; -webkit-text-stroke: 1.5px var(--gold-dim-2);
  line-height: 1; position: absolute; top: -0.3em; left: -0.02em; z-index: 0; user-select: none;
}

/* ---------------------------------------------------------------------- */
/* 5. BUTTONS                                                             */
/* ---------------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 34px; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sharp);
  overflow: hidden; isolation: isolate; min-height: 44px; cursor: pointer; white-space: nowrap;
  transition: color 0.3s var(--ease-out-soft), border-color 0.3s var(--ease-out-soft), transform 0.25s var(--ease-out-soft);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: translateX(-101%); transition: transform 0.35s var(--ease-punch);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:active { transform: scale(0.97); }

.btn-solid {
  background: var(--gold); color: var(--black); border: 1px solid var(--gold);
  animation: pulseGlow 2.6s ease-in-out infinite;
}
.btn-solid::before { background: var(--gold-light); }
.btn-solid:hover { color: var(--black); }

.btn-ghost {
  background: transparent; color: var(--white); border: 1px solid var(--gold-dim-2);
}
.btn-ghost::before { background: var(--gold-dim); }
.btn-ghost:hover { border-color: var(--gold); }

.btn-small { padding: 12px 22px; font-size: 0.8rem; }
.btn-block { width: 100%; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 24px 2px rgba(212, 175, 55, 0.22); }
}
@media (prefers-reduced-motion: reduce) { .btn-solid { animation: none; } }

.link-underline {
  position: relative; display: inline-block; font-weight: 600;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-out-soft);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------------------------------------------------------------------- */
/* 6. HEADER / NAV                                                        */
/* ---------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 20px 0; background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease-out-soft), border-color 0.35s var(--ease-out-soft), padding 0.35s var(--ease-out-soft);
}
.site-header.scrolled { background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(10px); border-bottom-color: var(--gold-dim-2); padding: 12px 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.04em; display: flex; align-items: baseline; gap: 6px; }
.logo .mark { color: var(--gold); }

.main-nav { display: none; }
@media (min-width: 940px) {
  .main-nav { display: flex; align-items: center; gap: 40px; }
  .main-nav a:not(.btn) {
    position: relative; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    padding-bottom: 4px;
  }
  .main-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out-soft);
  }
  .main-nav a:not(.btn):hover::after, .main-nav a.active::after { transform: scaleX(1); }
  .main-nav a.active { color: var(--gold); }
}
.nav-right { display: flex; align-items: center; gap: 20px; }

.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px;
  z-index: 260; position: relative;
}
@media (min-width: 940px) { .burger { display: none; } }
.burger span { width: 26px; height: 2px; background: var(--white); transition: transform 0.35s var(--ease-punch), opacity 0.2s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; background: var(--black); z-index: 190;
  display: flex; flex-direction: column; justify-content: center; padding: 32px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 96px); padding-bottom: env(safe-area-inset-bottom, 32px);
  visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease-out-soft), visibility 0.35s;
}
.mobile-menu.open { visibility: visible; opacity: 1; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-menu a:not(.btn) {
  font-family: var(--font-display); font-size: clamp(2.2rem, 11vw, 3.4rem); text-transform: uppercase;
  padding: 8px 0; border-bottom: 1px solid var(--charcoal-2); opacity: 0; transform: translateY(24px);
}
.mobile-menu.open a:not(.btn) { animation: menuLinkIn 0.6s var(--ease-punch) forwards; }
.mobile-menu.open a:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu.open a:nth-child(2) { animation-delay: 0.11s; }
.mobile-menu.open a:nth-child(3) { animation-delay: 0.17s; }
.mobile-menu.open a:nth-child(4) { animation-delay: 0.23s; }
.mobile-menu.open a:nth-child(5) { animation-delay: 0.29s; }
@keyframes menuLinkIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu .btn { margin-top: 28px; align-self: flex-start; }
.mobile-menu .mm-social { display: flex; gap: 18px; margin-top: 40px; }
.mobile-menu .mm-social a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold-dim-2); }

/* ---------------------------------------------------------------------- */
/* 8. HERO                                                                */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  /* vh first as the fallback for iOS below 15.4, which ignores svh entirely. */
  min-height: 100vh; min-height: 100svh;
  padding-top: 140px; padding-bottom: clamp(56px, 8vw, 96px); overflow: hidden;
  background: var(--black);
}
/* The hero backdrop is the brand logo rather than a photo (client request,
   12 Aug 2026), run full-bleed exactly as the photo was. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; will-change: transform;
  background: var(--black);
}
/* Contained, not cropped: this is a wordmark, so cover would slice letters off
   the ends. It sits in a band across the upper half, leaving the lower half
   clear for the headline. The file is a transparent PNG cut from the client's
   minzin-hero-one.jpg — as a JPEG its black box showed as a faint rectangle
   against the section behind it. */
/* Full width, but inset on every side. `contain` rather than `cover` because
   cover would slice letters off both ends. The top inset is the important one:
   it holds the wordmark clear of the header, so it never runs behind the site
   logo, the nav links or the Book a Session button. */
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 112px clamp(22px, 4vw, 52px) clamp(28px, 4vw, 52px);
  box-sizing: border-box;
  object-fit: contain; object-position: center 14%;
}
/* Desktop uses the background copy above; the in-flow copy is phone-only. */
.hero-logo { display: none; }

@media (max-width: 767px) {
  /* On phones the logo comes out of the background entirely and becomes a
     normal stacked element: logo on top, then headline, description, buttons.
     A positioned background can't be trusted here — iOS Safari's address bar
     changes the visible height, which slid the bottom-anchored text up into
     the logo. In the flow, the two can never touch. */
  .hero-bg img { display: none; }
  .hero-logo {
    display: block; width: 100%; height: auto;
    margin: 0 0 clamp(22px, 5vw, 34px);
  }
}
/* The black scrim. Now that the logo runs the full height of the hero, the
   headline sits directly on top of it — including "MOVE LIKE ONE", which is
   gold on gold. The scrim stays light over the upper third where the logo is
   the only thing there, then deepens through the text so the lettering behind
   drops back to a dark bronze and the headline stays the brightest thing on
   the screen. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.34) 0%, rgba(10,10,10,0.36) 28%, rgba(10,10,10,0.72) 46%, rgba(10,10,10,0.88) 66%, rgba(10,10,10,0.94) 100%);
}
/* On a phone the headline clears the logo entirely, so the scrim can stay light
   over it for longer and let the gold read properly before it deepens. */
@media (max-width: 767px) {
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.26) 0%, rgba(10,10,10,0.28) 40%, rgba(10,10,10,0.74) 55%, rgba(10,10,10,0.9) 72%, rgba(10,10,10,0.94) 100%);
  }
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero h1 { overflow: hidden; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line span { display: block; transform: translateY(105%); }
.hero-sub { max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--white); margin-top: 24px; opacity: 0.92; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero-ctas .btn { opacity: 0; }

.scroll-indicator {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--grey);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.scroll-indicator .stick { width: 1px; height: 30px; background: linear-gradient(var(--gold), transparent); animation: scrollStick 1.8s ease-in-out infinite; }
/* Phone screens don't leave enough room under the buttons for this, and it ends
   up printed across the TikTok button. It's decoration, not a control. */
@media (max-width: 767px) { .scroll-indicator { display: none; } }
@keyframes scrollStick { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------------------------------------------------------------- */
/* 9. TRUST STRIP / MARQUEE                                               */
/* ---------------------------------------------------------------------- */
.trust-strip { background: var(--charcoal); border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); padding-block: 18px; overflow: hidden; }
.trust-strip .track { display: flex; align-items: center; gap: 14px; white-space: nowrap; width: max-content; }
.trust-strip .item { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--white); }
.trust-strip .dot { color: var(--gold); font-size: 1rem; }
@media (max-width: 767px) {
  .trust-strip .track { animation: marquee 22s linear infinite; }
  .trust-strip:hover .track { animation-play-state: paused; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) { .trust-strip .container { display: flex; justify-content: center; } .trust-strip .track.dup { display: none; } .trust-strip .track { flex-wrap: wrap; justify-content: center; } }

/* ---------------------------------------------------------------------- */
/* 10. CARDS — WHY / PROGRAMS                                             */
/* ---------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.why-card {
  background: var(--charcoal); border: 1px solid var(--gold-dim); padding: 32px 26px;
  transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft), border-color 0.35s var(--ease-out-soft);
  position: relative;
}
.why-card:hover { transform: translateY(-6px); border-color: var(--gold-dim-2); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--gold-dim), 0 0 32px -8px rgba(212,175,55,0.25); }
.why-card .icon { width: 42px; height: 42px; color: var(--gold); margin-bottom: 20px; }
.why-card h3 { font-size: 1.15rem; text-transform: none; letter-spacing: 0.01em; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.why-card p { color: var(--grey); font-size: 0.95rem; }
.why-card:nth-child(2) { margin-top: 0; }
@media (min-width: 900px) {
  .why-card:nth-child(2) { transform: translateY(28px); }
  .why-card:nth-child(4) { transform: translateY(28px); }
  .why-card:nth-child(2):hover, .why-card:nth-child(4):hover { transform: translateY(22px); }
}

.program-card {
  background: var(--charcoal); border: 1px solid var(--gold-dim); overflow: hidden;
  display: flex; flex-direction: column; transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft);
}
.program-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6), 0 0 32px -8px rgba(212,175,55,0.2); }
.program-card .p-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.program-card .p-body { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.program-card h3 { font-size: 1.3rem; text-transform: none; font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
.program-card .tagline { color: var(--gold); font-size: 0.85rem; font-weight: 600; }
.program-card .desc { color: var(--grey); font-size: 0.92rem; flex: 1; }
.program-card .price { font-family: var(--font-display); font-size: 1.6rem; color: var(--white); }
.program-card .price small { font-family: var(--font-body); font-size: 0.7rem; color: var(--grey); text-transform: none; letter-spacing: 0; }
.program-card .p-cta { margin-top: 6px; }

/* Full program cards (training.html) */
.program-full { border: 1px solid var(--gold-dim); background: var(--charcoal); display: grid; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 860px) { .program-full { grid-template-columns: 0.9fr 1.1fr; } .program-full.reverse { direction: rtl; } .program-full.reverse > * { direction: ltr; } }
.program-full .pf-img { position: relative; min-height: 260px; }
.program-full .pf-body { padding: clamp(28px, 4vw, 48px); }
.program-full ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.program-full ul li { display: flex; gap: 10px; font-size: 0.94rem; color: var(--white); align-items: flex-start; }
.program-full ul li::before { content: "—"; color: var(--gold); flex-shrink: 0; }
.program-full .pf-meta { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.program-full .pf-meta div { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); }
.program-full .pf-meta strong { display: block; color: var(--white); font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------------- */
/* 11. IMAGE TREATMENT / PLACEHOLDERS                                     */
/* ---------------------------------------------------------------------- */
.img-treat { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--charcoal); }
.img-treat img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78) contrast(1.12) brightness(0.92) sepia(0.06); }
.img-treat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.75) 100%); }

.img-placeholder {
  position: relative; width: 100%; height: 100%; min-height: 220px;
  background:
    linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  border: 1px solid var(--gold-dim); overflow: hidden;
}
.img-placeholder::before, .img-placeholder::after {
  content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--gold-dim-2);
}
.img-placeholder::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.img-placeholder::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.img-placeholder .ph-icon { width: 46px; height: 46px; color: var(--gold-dim-2); }
.img-placeholder .ph-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-dark); text-align: center; padding: 0 16px; }

/* ---------------------------------------------------------------------- */
/* 12. TIKTOK SECTION                                                     */
/* ---------------------------------------------------------------------- */
.tiktok-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 700px) { .tiktok-grid { grid-template-columns: repeat(4, 1fr); } }
.tiktok-slot {
  position: relative; aspect-ratio: 9/16; background: var(--charcoal); border: 1px solid var(--gold-dim);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.tiktok-slot .skeleton { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(160deg, var(--charcoal), var(--charcoal-2)); }
.tiktok-slot .skeleton .tk-icon { width: 34px; height: 34px; color: var(--gold-dim-2); }
.tiktok-slot .skeleton .bar { width: 60%; height: 8px; background: var(--gold-dim); border-radius: 4px; overflow: hidden; position: relative; }
.tiktok-slot .skeleton .bar::after { content: ""; position: absolute; inset: 0; background: var(--gold-dim-2); animation: skelLoad 1.6s ease-in-out infinite; transform: translateX(-100%); }
@keyframes skelLoad { to { transform: translateX(100%); } }
.tiktok-slot blockquote.tiktok-embed { margin: 0 !important; min-width: 0 !important; width: 100% !important; }
.tiktok-slot.loaded { aspect-ratio: auto; min-height: 460px; }
.tiktok-fallback-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: linear-gradient(160deg, var(--charcoal), var(--charcoal-2));
  color: var(--gold); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  text-align: center; padding: 16px; transition: color 0.3s, background 0.3s;
}
.tiktok-fallback-card:hover { color: var(--gold-light); background: linear-gradient(160deg, var(--charcoal-2), var(--charcoal)); }
.tiktok-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 40px; }
.tiktok-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--grey); font-size: 0.95rem; }

/* ---------------------------------------------------------------------- */
/* 13. TESTIMONIALS                                                       */
/* ---------------------------------------------------------------------- */
.testimonial-card {
  background: var(--charcoal); border: 1px solid var(--gold-dim); padding: clamp(28px, 4vw, 40px);
  height: 100%; display: flex; flex-direction: column; gap: 18px; position: relative;
}
.testimonial-card .quote-mark { font-family: var(--font-display); font-size: 4.5rem; line-height: 0.5; color: var(--gold); opacity: 0.85; }
.testimonial-card p { font-size: 1.02rem; color: var(--white); flex: 1; }
.testimonial-card .who { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--gold-dim); }
.testimonial-card .who strong { font-weight: 700; }
.testimonial-card .who span { font-size: 0.78rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; }
.testimonial-card .todo-tag { position: absolute; top: 14px; right: 14px; font-size: 0.6rem; color: var(--grey-dark); letter-spacing: 0.08em; text-transform: uppercase; }

.swiper { padding-bottom: 54px !important; overflow: visible; }
.swiper-slide { height: auto; }
.swiper-pagination-bullet { background: var(--gold-dim-2) !important; opacity: 1 !important; width: 8px !important; height: 8px !important; }
.swiper-pagination-bullet-active { background: var(--gold) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--gold) !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.1rem !important; }

/* Testimonials masonry (testimonials.html) */
.masonry { columns: 1; column-gap: 20px; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry .testimonial-card { break-inside: avoid; margin-bottom: 20px; }
.masonry .testimonial-card.tall p { min-height: 8em; }

/* ---------------------------------------------------------------------- */
/* 14. HOW IT WORKS / STEPS                                               */
/* ---------------------------------------------------------------------- */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 860px) { .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step { position: relative; padding-top: 20px; }
.step .ghost-num { position: static; margin-bottom: -0.35em; }
.step h3 { font-size: 1.3rem; text-transform: none; font-family: var(--font-body); font-weight: 800; margin-bottom: 10px; }
.step p { color: var(--grey); font-size: 0.94rem; }

/* ---------------------------------------------------------------------- */
/* 15. STATS BAND                                                         */
/* ---------------------------------------------------------------------- */
.stats-band { background: var(--charcoal); border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; text-align: center; }
@media (min-width: 700px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat .num { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); color: var(--gold); letter-spacing: 0.02em; }
.stat .label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin-top: 6px; }

/* ---------------------------------------------------------------------- */
/* 16. CTA BANDS                                                          */
/* ---------------------------------------------------------------------- */
.cta-band { position: relative; text-align: center; overflow: hidden; }
.cta-band .glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(212,175,55,0.14) 0%, transparent 70%); filter: blur(10px); pointer-events: none; }
.cta-band .cta-inner { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.cta-band .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.cta-band.with-img { background-size: cover; background-position: center; }
.cta-band.with-img .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.85), rgba(10,10,10,0.92)); }

/* ---------------------------------------------------------------------- */
/* 17. FOOTER                                                             */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--black); border-top: 1px solid var(--gold-dim); padding-block: 72px 32px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.footer-grid h4 { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-family: var(--font-body); font-weight: 700; margin-bottom: 18px; }
.footer-grid ul { display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: var(--grey); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--gold); }
.footer-brand p { color: var(--grey); font-size: 0.92rem; margin-top: 14px; max-width: 32ch; }
.footer-social { display: flex; gap: 14px; margin-top: 20px; }
.footer-social a { width: 40px; height: 40px; border: 1px solid var(--gold-dim-2); display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, transform 0.3s; }
.footer-social a:hover { border-color: var(--gold); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; color: var(--gold); }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--charcoal-2); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.78rem; color: var(--grey-dark); }
.footer-bottom a { color: var(--grey-dark); }
.footer-bottom a:hover { color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* 18. SCROLL TO TOP + FLOATING CONTACT BUTTONS                          */
/* ---------------------------------------------------------------------- */
.scroll-top-btn {
  position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 150; width: 46px; height: 46px; border-radius: 50%;
  background: var(--black); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn svg { width: 18px; height: 18px; color: var(--gold); }
.scroll-top-btn:hover { background: var(--gold-dim); }

.float-btn {
  position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 150;
  width: 50px; height: 50px; min-width: 50px; min-height: 50px; max-width: 50px; max-height: 50px;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--black); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.65), 0 0 22px -6px rgba(212, 175, 55, 0.28);
  transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s, border-color 0.3s;
}
.float-btn:hover {
  transform: translateY(-4px); border-color: var(--gold-light);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.7), 0 0 28px -4px rgba(212, 175, 55, 0.4);
}
.float-btn svg {
  width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important;
  flex-shrink: 0; color: var(--gold); fill: currentColor;
}
.float-whatsapp { right: calc(20px + env(safe-area-inset-right, 0px)); }
.float-call { left: calc(20px + env(safe-area-inset-left, 0px)); }

/* ---------------------------------------------------------------------- */
/* 19. FORMS                                                              */
/* ---------------------------------------------------------------------- */
.field { position: relative; margin-bottom: 22px; }
.field label {
  position: absolute; left: 16px; top: 16px; font-size: 1rem; color: var(--grey); pointer-events: none;
  transition: transform 0.2s var(--ease-out-soft), font-size 0.2s var(--ease-out-soft), color 0.2s var(--ease-out-soft);
  transform-origin: left top; background: var(--charcoal); padding: 0 4px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--charcoal); border: 1px solid var(--gold-dim-2); color: var(--white);
  padding: 16px; font-size: 16px; border-radius: var(--radius-sharp); min-height: 44px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim);
}
.field input:focus + label, .field select:focus + label, .field textarea:focus + label,
.field.filled label { transform: translateY(-25px) scale(0.82); color: var(--gold); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23D4AF37' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field input[type="date"] { color-scheme: dark; }
.field.select-field label { transform: translateY(-25px) scale(0.82); }
.field-hint { margin: 7px 2px 0; font-size: 0.8rem; line-height: 1.5; color: var(--grey-dark); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } .field-row.cols-2 .field { margin-bottom: 22px; } }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { display: none; padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--gold-dim); font-size: 0.92rem; margin-top: 18px; opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--ease-out-soft), transform 0.35s var(--ease-out-soft); }
.form-msg.show { display: block; opacity: 1; transform: translateY(0); }
.form-msg.error { border-color: #c0524a; background: rgba(192, 82, 74, 0.12); }

.slot-hint { color: var(--grey-dark); font-size: 0.88rem; }
.slot-hint.error { color: #e08a82; }
.slot-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--black); border: 1px solid var(--gold-dim-2); color: var(--white);
  padding: 11px 6px; font-size: 0.82rem; text-align: center;
  border-radius: 9px; cursor: pointer; font-variant-numeric: tabular-nums;
  white-space: nowrap; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.slot-btn:hover { border-color: var(--gold); }
.slot-btn.selected { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 700; }
/* Tick only appears on the chosen time, as in the client's mockup. */
.slot-check { width: 16px; height: 16px; flex: 0 0 auto; display: none; }
.slot-btn.selected .slot-check { display: block; }

.bring-list { list-style: none; padding: 0; margin: 0; }
.bring-list li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.bring-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* ---- Booking wizard: step indicator ---------------------------------------- */
.booking-steps { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.b-step {
  display: flex; align-items: center; gap: 8px; font-size: 0.82rem; letter-spacing: 0.03em;
  color: var(--grey-dark); padding: 8px 14px; border: 1px solid var(--gold-dim-2); cursor: default;
}
.b-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1px solid var(--gold-dim-2); border-radius: 50%; font-size: 0.72rem;
}
.b-step.active { color: var(--white); border-color: var(--gold); }
.b-step.active .b-step-num { background: var(--gold); border-color: var(--gold); color: var(--black); }
.b-step.done { color: var(--gold); cursor: pointer; }
.b-step.done .b-step-num { border-color: var(--gold); color: var(--gold); }

/* ---- Booking wizard: layout (form + sticky summary side by side) --------- */
.booking-layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .booking-layout { grid-template-columns: 1fr 260px; } }

/* ---- Step 1: service cards -------------------------------------------------- */
.service-list { display: flex; flex-direction: column; gap: 16px; }
.service-card { border: 1px solid var(--gold-dim-2); padding: 20px; transition: border-color 0.2s; }
.service-card.selected { border-color: var(--gold); background: var(--gold-dim); }
.service-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.service-card-head h4 { font-family: var(--font-display); letter-spacing: 0.02em; font-size: 1.15rem; }
.service-price { color: var(--gold); font-size: 0.85rem; white-space: nowrap; }
.service-tagline { color: var(--grey); font-size: 0.88rem; margin: 8px 0 12px; }
.link-toggle { background: none; border: none; color: var(--gold); font-size: 0.82rem; text-decoration: underline; cursor: pointer; padding: 0; margin-bottom: 14px; }
.service-details { border-top: 1px solid var(--gold-dim-2); padding-top: 14px; margin-bottom: 16px; font-size: 0.86rem; color: var(--grey); }
.service-details ul { margin: 6px 0 14px; padding-left: 18px; }
.service-details li { margin-bottom: 4px; }
.service-details .closing-line { color: var(--gold); font-style: italic; }

/* ---- Step 2: calendar ------------------------------------------------------ */
.cal-widget { border: 1px solid var(--gold-dim-2); padding: 20px; margin-bottom: 20px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month { font-family: var(--font-display); letter-spacing: 0.02em; font-size: 1.1rem; }
.cal-nav {
  background: none; border: 1px solid var(--gold-dim-2); color: var(--white); width: 32px; height: 32px;
  font-size: 1.1rem; cursor: pointer; transition: border-color 0.2s;
}
.cal-nav:hover:not(:disabled) { border-color: var(--gold); }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.72rem; color: var(--grey-dark); margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  aspect-ratio: 1; background: none; border: 1px solid transparent; color: var(--white);
  font-size: 0.86rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cal-cell:not(.empty):not(.disabled):hover { border-color: var(--gold-dim-2); }
.cal-cell.today { color: var(--gold); font-weight: 600; }
.cal-cell.selected { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 600; }
.cal-cell.disabled { color: var(--grey-dark); opacity: 0.35; cursor: default; text-decoration: line-through; }
.cal-cell.empty { cursor: default; }

/* ---- Step 2: "Choose Your Time" ------------------------------------------
   Start times step every 5 minutes, so a weekday offers 60 and a weekend 132.
   Each hour is a collapsible row with only one open at a time, which keeps the
   panel short no matter how many slots the day has. */
.time-head h3 { font-size: 1.5rem; margin-bottom: 4px; }
.time-head p { color: var(--grey); font-size: 0.9rem; margin-bottom: 18px; }

/* Five-day quick picker */
.day-strip {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--gold-dim-2); background: var(--charcoal-2);
  border-radius: 12px; padding: 12px; margin-bottom: 14px;
}
.day-nav {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1px solid var(--gold-dim-2); color: var(--gold);
  cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s, opacity 0.2s;
}
.day-nav svg { width: 16px; height: 16px; }
.day-nav:hover:not(:disabled) { border-color: var(--gold); }
.day-nav:disabled { opacity: 0.3; cursor: default; }

.day-cells { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.day-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 10px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--white);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.day-cell .dow,
.day-cell .dmon { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.day-cell .dnum { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.day-cell:hover:not(.disabled):not(.selected) { border-color: var(--gold-dim-2); }
.day-cell.is-today .dnum { color: var(--gold); }
.day-cell.selected { background: var(--gold); color: var(--black); border-color: var(--gold); }
.day-cell.selected .dow,
.day-cell.selected .dmon,
.day-cell.selected .dnum { color: var(--black); }
.day-cell.disabled { opacity: 0.28; cursor: default; }

.cal-toggle {
  background: none; border: none; color: var(--gold); font-size: 0.84rem;
  text-decoration: underline; cursor: pointer; padding: 0; margin-bottom: 16px;
}

/* Hour accordions */
.slot-groups { margin-bottom: 20px; }
.slot-note { color: var(--grey-dark); font-size: 0.8rem; margin: 0 0 14px; }

.hour-block {
  border: 1px solid var(--gold-dim-2); background: var(--charcoal-2);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.hour-block.open { background: var(--charcoal); }
.hour-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: var(--white); cursor: pointer;
  padding: 16px 18px; font-size: 1rem; font-weight: 600; text-align: left;
}
.hour-icon { width: 20px; height: 20px; color: var(--gold); flex: 0 0 auto; }
.hour-label { flex: 1 1 auto; }
.hour-chevron { width: 18px; height: 18px; color: var(--grey); transition: transform 0.25s var(--ease-out-soft); }
.hour-block.open .hour-chevron { transform: rotate(180deg); color: var(--gold); }

/* auto-fill rather than a fixed column count: the booking column is narrower
   than full width because of the summary sidebar, and a chip has to fit
   "7:15 PM" plus its tick without clipping. Widest that fits, always. */
.hour-body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
  padding: 0 18px 18px;
}
/* `display: grid` above outranks the UA rule that makes [hidden] display:none,
   so collapsed hours would otherwise stay visible. */
.hour-body[hidden] { display: none; }

@media (max-width: 440px) {
  .day-cells { gap: 3px; }
  .day-cell { padding: 8px 2px; }
  .day-cell .dnum { font-size: 1.15rem; }
  .hour-body { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 0 12px 14px; }
  .hour-head { padding: 14px 12px; }
}

/* ---- Step 3: checkout ------------------------------------------------------- */
.hold-timer {
  border: 1px solid var(--gold-dim-2); background: var(--gold-dim); color: var(--gold);
  padding: 10px 14px; font-size: 0.82rem; margin-bottom: 22px; text-align: center;
}
.hold-timer.expired { border-color: #c0524a; background: rgba(192, 82, 74, 0.12); color: #e08a82; }
.note-toggle { background: none; border: none; color: var(--gold); font-size: 0.86rem; text-decoration: underline; cursor: pointer; padding: 0; margin-bottom: 22px; display: block; }
.service-aside { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gold-dim-2); font-size: 0.86rem; line-height: 1.6; color: var(--grey); }

/* ---- Sparring Class (invite-only) ----------------------------------------- */
.sparring-card { border: 1px solid var(--gold-dim-2); border-top: 3px solid var(--gold); background: var(--charcoal); padding: clamp(24px, 5vw, 44px); }
.sparring-card-flag { margin: 10px 0 4px; }
.invite-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--gold); color: var(--black); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; margin-bottom: 16px; }
.sparring-card h2 { text-transform: none; font-family: var(--font-body); font-weight: 800; font-size: clamp(1.5rem, 4vw, 1.9rem); }
.sparring-tagline { color: var(--gold); font-size: 0.9rem; letter-spacing: 0.04em; margin-top: 8px; }
.sparring-notice { border-left: 3px solid var(--gold); background: var(--gold-dim); padding: 14px 18px; margin: 22px 0; font-size: 0.92rem; line-height: 1.65; color: var(--white); }
.sparring-who { color: var(--grey); margin-bottom: 24px; }
.sparring-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--gold-dim-2); border: 1px solid var(--gold-dim-2); margin-bottom: 28px; }
.sparring-meta div { background: var(--charcoal); padding: 14px 16px; }
.sparring-meta span { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-dark); margin-bottom: 5px; }
.sparring-meta strong { color: var(--white); font-size: 1rem; font-weight: 700; }
.sparring-meta div:first-child strong { color: var(--gold); }
.sparring-gear-note { margin-top: 12px; font-size: 0.82rem; line-height: 1.55; color: var(--gold); }
.sparring-cols { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 26px; }
@media (min-width: 700px) { .sparring-cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
.sparring-cols h4 { font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.sparring-list { list-style: none; padding: 0; margin: 0; }
.sparring-list li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--grey); font-size: 0.9rem; line-height: 1.6; }
.sparring-list li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.sparring-req li::before { content: "!"; font-weight: 800; }
.sparring-why { border-top: 1px solid var(--gold-dim-2); padding-top: 18px; color: var(--grey); font-size: 0.9rem; font-style: italic; margin-bottom: 30px; }
.sparring-form-wrap { border-top: 1px solid var(--gold-dim-2); padding-top: 28px; }
.sparring-form-wrap h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; text-transform: none; margin-bottom: 8px; }
.sparring-form-lead { color: var(--grey); font-size: 0.88rem; margin-bottom: 22px; }

/* ---- Step 3: payment method ------------------------------------------------
   Two side-by-side cards rather than a stacked radio list: the choice reads as
   two distinct options at a glance, and it's a much bigger tap target on a
   phone. Stacks below 520px where two columns would be too cramped. */
.pay-choice { border: none; padding: 0; margin: 0 0 22px; }
.pay-choice legend {
  font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px; padding: 0; float: left; width: 100%;
}
.pay-grid { display: grid; grid-template-columns: 1fr; gap: 12px; clear: both; }
@media (min-width: 520px) { .pay-grid { grid-template-columns: 1fr 1fr; } }

.pay-option {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--gold-dim-2); background: rgba(255, 255, 255, 0.012);
  padding: 18px 16px; cursor: pointer;
  transition: border-color 0.2s var(--ease-out-soft), background 0.2s var(--ease-out-soft);
}
.pay-option:hover { border-color: rgba(212, 175, 55, 0.55); }
.pay-option.selected { border-color: var(--gold); background: var(--gold-dim); }
/* Visually hidden, but still focusable and still the thing that submits. */
.pay-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pay-option:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

.pay-icon { color: var(--grey-dark); transition: color 0.2s; }
.pay-icon svg { width: 26px; height: 26px; display: block; }
.pay-option.selected .pay-icon { color: var(--gold); }

.pay-check {
  position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: var(--black); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6); transition: opacity 0.2s var(--ease-out-soft), transform 0.2s var(--ease-out-soft);
}
.pay-check svg { width: 11px; height: 11px; }
.pay-option.selected .pay-check { opacity: 1; transform: scale(1); }

.pay-option-text { display: flex; flex-direction: column; gap: 4px; }
.pay-option-text strong { color: var(--white); font-size: 0.95rem; font-weight: 700; }
.pay-option-text span { color: var(--grey); font-size: 0.82rem; line-height: 1.5; }
.pay-note { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--grey-dark); }
.cancellation-policy { border-top: 1px solid var(--gold-dim-2); padding-top: 16px; margin: 6px 0 22px; font-size: 0.84rem; color: var(--grey); }
.cancellation-policy h5 { font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }

/* ---- Appointment summary sidebar -------------------------------------------- */
.appt-summary { border: 1px solid var(--gold-dim); background: var(--charcoal); padding: 22px; align-self: start; }
@media (min-width: 760px) { .appt-summary { position: sticky; top: 100px; } }
.appt-summary h4 { font-family: var(--font-display); letter-spacing: 0.03em; font-size: 1rem; margin-bottom: 14px; }
.appt-empty { color: var(--grey-dark); font-size: 0.86rem; }
.appt-line { font-size: 0.86rem; color: var(--grey); margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.appt-line strong { color: var(--white); font-size: 0.95rem; }
.appt-summary hr { border: none; border-top: 1px solid var(--gold-dim-2); margin: 14px 0; }
.appt-total { color: var(--white); font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* 20. CONTACT PAGE SPECIFIC                                              */
/* ---------------------------------------------------------------------- */
.quick-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .quick-facts { grid-template-columns: repeat(5, 1fr); } }
.qf-card { background: var(--charcoal); border: 1px solid var(--gold-dim); padding: 20px 16px; text-align: left; }
.qf-card .qf-label { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.qf-card .qf-value { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.01em; }
.qf-card .qf-note { font-size: 0.72rem; color: var(--grey-dark); margin-top: 6px; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.form-card {
  background: var(--charcoal); border: 1px solid var(--gold-dim); border-top: 3px solid var(--gold);
  padding: clamp(28px, 4vw, 48px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--gold-dim);
}
.form-card .form-lead { color: var(--grey); margin-bottom: 32px; }
.info-block { background: var(--charcoal); border: 1px solid var(--gold-dim); padding: 26px; }
.info-block h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-family: var(--font-body); font-weight: 700; }
.info-block .big-link { font-size: 1.15rem; font-weight: 700; }
.suburb-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suburb-list span { border: 1px solid var(--gold-dim-2); padding: 6px 12px; font-size: 0.8rem; letter-spacing: 0.03em; }

/* ---------------------------------------------------------------------- */
/* 21. ABOUT PAGE                                                         */
/* ---------------------------------------------------------------------- */
/* Coach story — text-only "Meet The Coach" block (no portrait) */
.coach-story { max-width: 74ch; margin-inline: auto; }
.coach-story p { max-width: none; color: var(--grey); font-size: 1.02rem; line-height: 1.8; }
.coach-story > p + p { margin-top: 20px; }
.coach-story p strong { color: var(--white); font-weight: 700; }
.coach-story .coach-lead {
  padding-left: 24px; border-left: 2px solid var(--gold);
  font-size: clamp(1.08rem, 2.2vw, 1.25rem); line-height: 1.65; color: var(--white);
}
.coach-closer {
  margin-top: clamp(28px, 4vw, 40px); padding: clamp(22px, 3vw, 30px);
  background: var(--charcoal); border-left: 2px solid var(--gold);
}
.coach-closer p { color: var(--white); }
.coach-sign {
  display: block; margin-top: 14px; font-family: var(--font-display);
  font-size: 1.25rem; letter-spacing: 0.06em; color: var(--gold);
}

.pull-quote { font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing: 0.01em; color: var(--gold); text-transform: none; line-height: 1.25; max-width: 24ch; border-left: 3px solid var(--gold); padding-left: 24px; }

.approach-list { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; }
@media (min-width: 700px) { .approach-list { grid-template-columns: 1fr 1fr; } }
.approach-item { padding: 22px; background: var(--charcoal); border-left: 2px solid var(--gold); }
.approach-item h4 { font-size: 1rem; text-transform: none; font-family: var(--font-body); font-weight: 800; margin-bottom: 6px; }
.approach-item p { font-size: 0.9rem; color: var(--grey); }

.about-tiktok { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 860px) { .about-tiktok { grid-template-columns: 1fr 1fr; } }
.about-tiktok .tt-video { aspect-ratio: 9/16; max-width: 320px; margin-inline: auto; }

/* ---------------------------------------------------------------------- */
/* 22. FAQ ACCORDION                                                      */
/* ---------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--gold-dim); }
.faq-item { border-bottom: 1px solid var(--gold-dim); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left; font-weight: 700; font-size: 1rem; min-height: 44px;
}
.faq-q .chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); transition: transform 0.4s var(--ease-punch); }
.faq-item.open .faq-q .chev { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-punch); }
.faq-a p { padding: 0 4px 22px; color: var(--grey); font-size: 0.95rem; }

/* ---------------------------------------------------------------------- */
/* 23. WHAT TO BRING STRIP                                                */
/* ---------------------------------------------------------------------- */
.expect-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .expect-grid { grid-template-columns: repeat(3, 1fr); } }
.expect-item { padding: 24px; border: 1px solid var(--gold-dim); position: relative; }
.expect-item .exp-num { font-family: var(--font-display); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.1em; }
.expect-item h4 { font-size: 1.05rem; text-transform: none; font-family: var(--font-body); font-weight: 800; margin: 8px 0; }
.expect-item p { font-size: 0.9rem; color: var(--grey); }

/* ---------------------------------------------------------------------- */
/* 24. UTILITIES                                                          */
/* ---------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(40px); }
.reveal.in { opacity: 1; transform: translateY(0); }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.mt-lg { margin-top: clamp(32px, 5vw, 56px); }
.center-text { text-align: center; }
.narrow { max-width: 760px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Page hero (non-home pages) */
.page-hero { padding-top: clamp(140px, 20vw, 190px); padding-bottom: clamp(56px, 8vw, 88px); position: relative; overflow: hidden; }
.page-hero .crumb { color: var(--grey); font-size: 0.82rem; margin-top: 14px; }
.page-hero .crumb a { color: var(--gold); }

@media (max-width: 599px) {
  .ghost-num { font-size: clamp(3.2rem, 20vw, 5.5rem); }
}

/* ---------------------------------------------------------------------- */
/* Legal pages (privacy.html, terms.html) — long-form prose               */
/* ---------------------------------------------------------------------- */
.legal { max-width: 820px; }
.legal .updated {
  display: inline-block; margin-bottom: clamp(32px, 5vw, 48px);
  padding: 8px 16px; border: 1px solid var(--gold-dim-2);
  color: var(--gold); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-top: clamp(40px, 6vw, 60px); margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--gold-dim);
}
.legal h2:first-of-type { margin-top: 0; }
/* Sub-headings stay in the body font — Bebas uppercase reads as shouting
   over paragraphs of legal copy. */
.legal h3 {
  font-family: var(--font-body); font-weight: 600; text-transform: none;
  letter-spacing: 0; line-height: 1.4;
  font-size: 1.02rem; color: var(--white);
  margin-top: 26px; margin-bottom: 8px;
}
.legal p, .legal li { color: var(--grey); font-size: 0.97rem; line-height: 1.85; }
.legal p { margin-bottom: 16px; }
.legal ul, .legal ol { margin: 0 0 18px 20px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 9px; padding-left: 4px; }
.legal li::marker { color: var(--gold); }
.legal strong { color: var(--white); font-weight: 600; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--gold-light); }
.legal .callout {
  border-left: 2px solid var(--gold); background: var(--charcoal);
  padding: 20px 24px; margin: 26px 0;
}
.legal .callout p:last-child { margin-bottom: 0; }

/* ============================================================================
   BOOKING RESULT PAGES
   Two single-purpose pages that share one look: the confirmation page students
   land on after booking (php/booking-confirmed.php, reached as /booked.php?t=…)
   and the cancel page linked from every confirmation SMS/email
   (php/cancel-booking.php, reached as /cancel.php?t=…). Both are usually opened
   on a phone, so each is one centred card and nothing else.
   ========================================================================== */
.cancel-main,
.confirm-main { padding: clamp(120px, 20vw, 170px) 0 90px; min-height: 70vh; }
.cancel-card,
.confirm-card {
  max-width: 560px; margin: 0 auto; background: var(--charcoal);
  border: 1px solid var(--gold-dim); padding: clamp(26px, 6vw, 40px);
}
.cancel-card h1,
.confirm-card h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin: 6px 0 16px; }
.cancel-card p,
.confirm-card p { color: var(--grey); margin-bottom: 22px; line-height: 1.7; }
.cancel-card .btn,
.confirm-card .btn { margin-bottom: 10px; }
.confirm-card p strong { color: var(--white); font-weight: 600; }

.cancel-details,
.confirm-details { border: 1px solid var(--gold-dim-2); padding: 18px; margin: 22px 0; }
.cancel-row,
.confirm-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 0.9rem; }
.cancel-row + .cancel-row,
.confirm-row + .confirm-row { border-top: 1px solid rgba(212, 175, 55, 0.12); }
.cancel-row span,
.confirm-row span { color: var(--grey-dark); flex-shrink: 0; }
.cancel-row strong,
.confirm-row strong { color: var(--white); text-align: right; font-weight: 600; }

/* ---- Confirmation page only ---------------------------------------------- */
/* The tick is the whole point of the page: it has to read as "done" before
   anything is actually read, so it sits above the heading at full width. */
.confirm-badge {
  width: 54px; height: 54px; margin-bottom: 20px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(212, 175, 55, 0.12);
  color: var(--gold);
}
.confirm-badge svg { width: 26px; height: 26px; }

.confirm-note {
  border-left: 2px solid var(--gold); background: var(--black);
  padding: 14px 18px; font-size: 0.92rem;
}

/* Bebas is condensed, so these section labels need a touch more size and
   tracking than the body copy to hold their own. Matches .appt-summary h4. */
.confirm-h {
  font-size: 1.15rem; letter-spacing: 0.06em;
  color: var(--gold); margin: 28px 0 12px;
}

.confirm-list { list-style: none; margin: 0 0 22px; padding: 0; }
.confirm-list li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  color: var(--grey); font-size: 0.92rem; line-height: 1.6;
}
.confirm-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 1px; background: var(--gold);
}

.cancel-warning {
  border: 1px solid #c0524a; background: rgba(192, 82, 74, 0.12);
  color: #e8b0aa !important; padding: 14px 16px; font-size: 0.88rem;
}
.cancel-warning a { color: var(--gold); }

/* ---------------------------------------------------------------------- */
/* 31. RECURRING BOOKINGS + PAY NOW / PAY LATER                           */
/* ---------------------------------------------------------------------- */
/* Both live inside step 3 of the booking wizard and deliberately reuse the
   .pay-option card the payment methods already use — a student meets the same
   control three times on one screen, so it should look and behave identically
   every time rather than introducing two more widgets to learn. */

.repeat-choice { border: none; padding: 0; margin: 0 0 22px; }
/* Matches .pay-choice legend exactly, float and all — the float is what stops
   a fieldset legend from sitting inside the border box in older browsers, and
   the two blocks sit one above the other so they must align. */
.repeat-choice legend {
  font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px; padding: 0; float: left; width: 100%;
}

/* Same visual as .pay-option, but a checkbox rather than a radio, and full
   width — it is a yes/no, not one of a pair. */
.repeat-toggle {
  position: relative; display: flex; align-items: flex-start; gap: 12px; clear: both;
  background: rgba(255, 255, 255, 0.012); border: 1px solid var(--gold-dim-2);
  padding: 18px 44px 18px 16px; cursor: pointer;
  transition: border-color 0.2s var(--ease-out-soft), background 0.2s var(--ease-out-soft);
}
.repeat-toggle:hover { border-color: rgba(212, 175, 55, 0.55); }
.repeat-toggle.selected { border-color: var(--gold); background: var(--gold-dim); }
.repeat-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.repeat-toggle:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.repeat-toggle.selected .pay-icon { color: var(--gold); }
.repeat-toggle.selected .pay-check { opacity: 1; transform: scale(1); }

.repeat-options { margin-top: 12px; padding: 18px 16px 4px; border: 1px solid var(--gold-dim); }
.repeat-options[hidden] { display: none; }
.repeat-options .field-row.cols-2 { gap: 0 16px; }

/* The plain-English "what you are actually booking" line. Gold because it is
   the one bit of this block a student must read before committing. */
.repeat-preview {
  margin: 2px 0 12px; padding: 12px 14px; font-size: 0.85rem; line-height: 1.6;
  color: var(--white); background: var(--gold-dim); border-left: 3px solid var(--gold);
}
.repeat-preview:empty { display: none; }

/* Pay Now / Pay Later, revealed under the card option. */
.card-timing { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gold-dim); }
.card-timing[hidden] { display: none; }
.card-timing-legend {
  display: block; font-size: 0.82rem; color: var(--white); font-weight: 600; margin-bottom: 10px;
}
#payLaterNote[hidden] { display: none; }

/* ---------------------------------------------------------------------- */
/* 32. RESCHEDULE PAGE                                                    */
/* ---------------------------------------------------------------------- */
/* Reached straight from an email, usually on a phone, and styled from the
   same shell as the cancel page so the two read as one system. Slightly wider
   because it has to hold a grid of times. */

.reschedule-card { max-width: 620px; }
.resched-picker { margin: 22px 0; }
.resched-label {
  display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.resched-date {
  width: 100%; background: var(--charcoal); border: 1px solid var(--gold-dim-2); color: var(--white);
  padding: 14px 16px; font-size: 16px; border-radius: var(--radius-sharp); min-height: 44px;
  color-scheme: dark;
}
.resched-date:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }

.resched-slots { margin-top: 18px; }
.resched-slot-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px;
}
@media (max-width: 420px) {
  .resched-slot-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
}

/* The submit stays disabled until a time is actually chosen — made obvious
   rather than left as a button that silently does nothing. */
#reschedSubmit:disabled { opacity: 0.45; cursor: not-allowed; }
#reschedSubmit:disabled:hover { background: var(--gold); }

/* ---------------------------------------------------------------------- */
/* 33. SPARRING: PICK A CLASS NIGHT                                       */
/* ---------------------------------------------------------------------- */
/* Used on the invite booking page and on the reschedule page when the
   booking is a sparring class. Deliberately the same .pay-option card as
   everywhere else — one row per night, full width, because there are only
   ever two times and the DATE is the thing being chosen. */

.spar-slot-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 4px 0 8px; }
@media (min-width: 560px) { .spar-slot-list { grid-template-columns: 1fr 1fr; } }

.spar-slot { padding-right: 44px; }
.spar-slot .pay-option-text strong { font-size: 1rem; }
.spar-slot .pay-option-text span { color: var(--grey); }