/* Saenploeng Muay Thai, demo round 2
   Earth palette, minimal: charcoal ground, bone type, sand outlines, burnt clay as the one fill.
   Clay is never used as text on charcoal (2.8:1); it is a fill, a button, a mark. */

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --charcoal: #1F1C19;
  --clay: #9C4A32;
  --sand: #D9CBB4;
  --bone: #F2ECE2;
  --ash: #A89B88;          /* quiet text on charcoal, 6.2:1 */
  --umber: #6B5F52;        /* quiet text on bone, 5.3:1 */
  --soot: #161412;         /* PV Dev band */
  --clay-deep: #84402B;    /* hover fill, error text on bone 6.5:1 */
  --line-strong: #857865;  /* form borders on bone, 3.6:1 */
  --ember-dim: #4E463E;

  /* the nine silk roles */
  --background: var(--charcoal);
  --card: #28241F;
  --foreground: var(--bone);
  --primary-cta: var(--clay);
  --primary-cta-text: var(--bone);
  --secondary-cta: transparent;
  --secondary-cta-text: var(--bone);
  --accent: rgba(217, 203, 180, .2);   /* hairlines */
  --background-accent: var(--sand);
  --radius: 3px;
  --radius-sm: calc(var(--radius) - 1px);

  --focus: var(--sand);

  /* motion: one ease for everything that enters */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-wipe: cubic-bezier(.76, 0, .24, 1);
  --intro: .7s;

  /* type */
  --font-display: "Pridi", "IBM Plex Sans Thai", Georgia, serif;
  --font-body: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: clamp(.8125rem, .79rem + .1vw, .875rem);
  --text-sm: clamp(.875rem, .85rem + .15vw, .9375rem);
  --text-base: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --text-lg: clamp(1.125rem, 1.04rem + .45vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.15rem + 1.1vw, 2.125rem);
  --text-4xl: clamp(1.875rem, 1.4rem + 2.4vw, 3.5rem);
  --text-6xl: clamp(2.25rem, 1.5rem + 3.9vw, 5rem);
  --text-hero: clamp(2.625rem, 1.4rem + 5.8vw, 7rem);

  /* layout */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --wrap: 86rem;
  --hh: 4.25rem;
  --space-section: clamp(8rem, 5rem + 10vw, 16rem);
}

html.no-intro { --intro: .05s; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hh) + 1rem);
  scroll-padding-bottom: 4.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 203, 180, .35) transparent;
  background: var(--background);
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* kill the rubber-band only for mouse/trackpad; keep pull-to-refresh on phones */
@media (pointer: fine) { html, body { overscroll-behavior: none; } }
@media (min-width: 900px) { html { scroll-padding-bottom: 1rem; } }
main { display: block; overflow-x: clip; }
a, button, summary, label, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgba(217, 203, 180, .15); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
strong, b { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--clay); color: var(--bone); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html:not(.js) .menu-btn { display: none; }
html.menu-open { overflow: hidden; }

/* Subtle grain over everything (static, never animated) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Focus: always visible for keyboards */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
[tabindex="-1"]:focus { outline: none; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: .75rem 1rem;
  background: var(--bone);
  color: var(--charcoal);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip:focus { top: 1rem; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-6xl);
  line-height: 1.25;
  text-wrap: balance;
  letter-spacing: -.005em;
  color: var(--bone);
}
/* Phrase masks: generous room for Thai tone marks above and below-vowels under the line */
.m {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .3em .05em .42em;
  margin: -.3em -.05em -.42em;
}
.ph { display: inline-block; }

.lede {
  text-wrap: pretty;
  color: var(--sand);
  font-size: var(--text-lg);
  line-height: 1.75;
  max-width: 34rem;
}

.sec-head {
  display: grid;
  gap: 1.25rem 3rem;
  margin-bottom: clamp(2.75rem, 2rem + 4vw, 5.5rem);
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

.section { padding-block: calc(var(--space-section) * .5); scroll-margin-top: var(--hh); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .55rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: border-color .6s var(--ease), color .6s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .7s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn--sm { min-height: 2.75rem; padding: .4rem 1.1rem; font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn--primary { background: var(--primary-cta); color: var(--primary-cta-text); border-color: var(--primary-cta); }
.btn--primary::before { background: var(--clay-deep); }
.btn--ghost { background: var(--secondary-cta); color: var(--secondary-cta-text); border-color: rgba(217, 203, 180, .45); }
.btn--ghost::before { background: rgba(217, 203, 180, .1); }
.btn--ghost:hover { border-color: var(--sand); }
.btn--ink { background: var(--charcoal); color: var(--bone); border-color: var(--charcoal); }
.btn--ink::before { background: #39332D; }
.btn--outline { background: transparent; color: var(--charcoal); border-color: var(--line-strong); }
.btn--outline::before { background: rgba(31, 28, 25, .07); }
.btn--outline:hover { border-color: var(--charcoal); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Intro (CSS only, about 1 s, once per visit) ---------- */
.intro { display: none; }
html.js:not(.no-intro) .intro {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  pointer-events: none;
  animation: intro-out .55s var(--ease-wipe) .5s forwards;
}
.intro-word {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.5rem + 6vw, 5rem);
  line-height: 1;
  padding: .32em 0 .3em;
  color: transparent;
  -webkit-text-stroke: 1px var(--sand);
}
.intro-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: wipe-up .5s var(--ease) .02s both;
}
.intro-fill > span {
  display: block;
  padding: .32em 0 .3em;
  color: var(--clay);
  -webkit-text-stroke: 1px var(--sand);
  animation: wipe-up-inner .5s var(--ease) .02s both;
}
@keyframes intro-out { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes wipe-up { from { transform: translateY(101%); } to { transform: none; } }
@keyframes wipe-up-inner { from { transform: translateY(-101%); } to { transform: none; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--hh);
  border-bottom: 1px solid transparent;
  transition: background-color .6s var(--ease), border-color .6s var(--ease);
}
.site-header.is-scrolled { background: rgba(31, 28, 25, .95); border-bottom-color: var(--accent); }
html.menu-open .site-header { background: transparent; border-bottom-color: transparent; }
.header-inner { height: 100%; display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.75rem); }

.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; min-height: 44px; color: var(--bone); text-decoration: none; }
.brand-mark { width: 1.375rem; height: 1.375rem; color: var(--sand); }
.brand-text { display: grid; min-width: 0; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.brand-sub { display: none; font-size: .75rem; line-height: 1.4; color: var(--ash); }
@media (min-width: 520px) { .brand-sub { display: block; } }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: clamp(1rem, 1.8vw, 2rem); }
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--sand);
  text-decoration: none;
  transition: color .4s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .6s var(--ease);
}
.main-nav a:hover { color: var(--bone); }
.main-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }

.header-cta { display: none; }
.lang { display: flex; align-items: center; gap: .1rem; font-size: var(--text-xs); color: var(--ash); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ash); text-decoration: none; }
.lang a[aria-current] { color: var(--bone); }
.lang a:hover { color: var(--bone); }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: 0 .25rem 0 .5rem;
  background: none;
  border: 0;
  color: var(--bone);
  font-size: var(--text-sm);
  cursor: pointer;
}
.menu-btn-icon { position: relative; width: 1.25rem; height: .5rem; }
.menu-btn-icon::before,
.menu-btn-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease);
}
.menu-btn-icon::before { top: 0; }
.menu-btn-icon::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-btn-icon::before { transform: translateY(calc(.25rem - .5px)) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-icon::after { transform: translateY(calc(-.25rem + .5px)) rotate(-45deg); }

@media (min-width: 900px) { .header-cta { display: inline-flex; } }
@media (min-width: 1180px) {
  .main-nav { display: block; }
  .menu-btn { display: none; }
}

/* Curtain menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  padding: calc(var(--hh) + 2rem) 0 3rem;
  background: var(--charcoal);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .9s var(--ease-wipe);
}
.menu[hidden] { display: none; }
.menu.is-open { transform: none; }
.menu-inner { display: grid; gap: 2.5rem; }
.menu-list { display: grid; gap: .1rem; }
.menu-list a {
  display: block;
  overflow: hidden;
  padding: .12em 0 .22em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.3;
  color: var(--bone);
  text-decoration: none;
}
.menu-list a span { display: inline-block; transform: translateY(115%); transition: transform .9s var(--ease); }
.menu.is-open .menu-list a span { transform: none; }
.menu.is-open .menu-list li:nth-child(1) span { transition-delay: .3s; }
.menu.is-open .menu-list li:nth-child(2) span { transition-delay: .34s; }
.menu.is-open .menu-list li:nth-child(3) span { transition-delay: .38s; }
.menu.is-open .menu-list li:nth-child(4) span { transition-delay: .42s; }
.menu.is-open .menu-list li:nth-child(5) span { transition-delay: .46s; }
.menu.is-open .menu-list li:nth-child(6) span { transition-delay: .5s; }
.menu.is-open .menu-list li:nth-child(7) span { transition-delay: .54s; }
.menu.is-open .menu-list li:nth-child(8) span { transition-delay: .58s; }
.menu-list a:hover { color: var(--sand); }
.menu-foot { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: var(--text-sm); }
.menu-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sand); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--hh) + 6rem) 0 clamp(2.5rem, 7vh, 5rem);
  overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-kb { position: absolute; inset: 0; isolation: isolate; }
.hero-kb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero-kb .c { filter: saturate(.8) contrast(.95) sepia(.14); }
/* Black-and-white layer: a grey saturation blend whose opacity fades, so the photo warms into colour */
.tone { position: absolute; inset: 0; background: #7A7268; mix-blend-mode: saturation; opacity: 0; pointer-events: none; }
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(31, 28, 25, .78), rgba(31, 28, 25, 0) calc(var(--hh) + 5rem)),
    linear-gradient(to top, rgba(31, 28, 25, .96) 6%, rgba(31, 28, 25, .62) 46%, rgba(31, 28, 25, .3) 76%, rgba(31, 28, 25, .6) 100%),
    linear-gradient(to right, rgba(31, 28, 25, .55), rgba(31, 28, 25, 0) 70%);
}
.concept {
  position: absolute;
  top: calc(var(--hh) + .75rem);
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  padding: .2rem .7rem;
  border: 1px solid rgba(217, 203, 180, .4);
  border-radius: var(--radius);
  background: rgba(31, 28, 25, .75);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--sand);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-hero);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--bone);
  margin-bottom: clamp(1.75rem, 4vh, 3rem);
}
.hero-title .m { display: block; }
.hero-foot { display: grid; gap: 1.75rem; }
.hero-lede { max-width: 33rem; color: var(--sand); }
@media (min-width: 900px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3rem; }
}

/* load sequence (CSS, so it never depends on the CDN) */
html.js .hero-kb { animation: kb 2.8s var(--ease) calc(var(--intro) - .2s) both; }
html.js .hero-kb .tone { animation: fade-out 2.4s var(--ease) calc(var(--intro) + .3s) both; }
html.js .hero .ph { animation: rise 1.3s var(--ease) calc(var(--intro) + var(--i, 0) * .12s) both; }
html.js .hero-foot { animation: lift 1.2s var(--ease) calc(var(--intro) + .45s) both; }
html.js .concept { animation: lift 1.2s var(--ease) calc(var(--intro) + .6s) both; }
@keyframes kb { from { transform: scale(1.08); } to { transform: none; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise { from { transform: translateY(140%); opacity: 0; } 45% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes lift { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Signature: ember word ---------- */
.ember {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(4.5rem, 10vh, 8rem);
  overflow: clip;
}
.ember-inner { display: grid; gap: clamp(1.5rem, 5vh, 3.5rem); }
.ember-word {
  --stroke: max(1px, .0055em);
  display: flex;
  width: max-content;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19vw;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
@media (max-width: 599.98px) {
  /* stack the syllables so the word fills a phone screen */
  .ember-word { flex-direction: column; align-items: flex-start; }
}
.ew {
  position: relative;
  display: block;
  padding: .32em 0 .3em;
  color: transparent;
  -webkit-text-stroke: var(--stroke) var(--sand);
}
.ew-fill { position: absolute; inset: 0; overflow: hidden; }
.ew-fill > span {
  display: block;
  padding: .32em 0 .3em;
  color: var(--clay);
  -webkit-text-stroke: var(--stroke) var(--sand);
}
@supports not (-webkit-text-stroke: 1px black) {
  .ew { color: var(--ember-dim); }
}
.ember-text {
  max-width: 38rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.65;
  color: var(--bone);
}
@media (min-width: 900px) {
  .ember-text { justify-self: end; margin-right: 4%; }
}

/* ---------- Packages: fight card ---------- */
.prices { overflow-x: clip; }
.bouts { border-top: 1px solid var(--accent); }
.bout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "notes notes";
  gap: 1rem 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0 clamp(1.75rem, 3vw, 2.75rem) clamp(1.1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--accent);
}
/* corner marks: red corner, blue corner, in earth tones */
.bout::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(1.75rem, 3vw, 2.75rem);
  bottom: clamp(1.75rem, 3vw, 2.75rem);
  width: 2px;
  background: var(--clay);
}
.bout:nth-child(even)::before { background: var(--sand); }
.bout-name { grid-area: name; }
.bout-name h3 { text-wrap: balance; font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.35; color: var(--bone); }
.bout-name p { font-size: var(--text-sm); color: var(--ash); margin-top: .35rem; }
.bout-notes { grid-area: notes; font-size: var(--text-sm); color: var(--sand); }
.bout-notes li + li { margin-top: .3rem; }
.bout-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.bout-price .num { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: 1.15; color: var(--bone); }
.bout-price .unit, .bout-price .from { font-size: var(--text-xs); color: var(--ash); }
.bout--main {
  margin-block: .75rem;
  padding-inline: clamp(1.25rem, 3vw, 2.75rem);
  background: var(--clay);
  border-bottom-color: transparent;
}
.bout--main::before { display: none; }
.bout--main .bout-name h3,
.bout--main .bout-price .num,
.bout--main .bout-notes { color: var(--bone); }
.bout--main .bout-name p,
.bout--main .bout-price .unit,
.bout--main .flag { color: var(--bone); }
.flag { font-size: var(--text-xs); font-weight: 500; margin-bottom: .5rem; }
@media (min-width: 900px) {
  .bout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr);
    grid-template-areas: "name notes price";
    align-items: start;
    gap: 2.5rem;
  }
  .bout-notes { padding-top: .45rem; }
}
.price-notes { display: grid; gap: .6rem; margin-top: clamp(2rem, 4vw, 3rem); max-width: 46rem; font-size: var(--text-sm); color: var(--ash); }
.price-notes strong { color: var(--bone); }

/* ---------- Interstitial still ---------- */
.still {
  position: relative;
  isolation: isolate;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding-block: 8rem clamp(3rem, 9vh, 6.5rem);
  overflow: clip;
}
.duo--bleed { position: absolute; inset: 0; z-index: -1; }
.duo--bleed .duo-frame { position: absolute; inset: 0; }
.duo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 28, 25, .95) 4%, rgba(31, 28, 25, .66) 52%, rgba(31, 28, 25, .3));
}
.still-text .display { margin-bottom: .75rem; }
.still-text p { font-size: var(--text-lg); color: var(--sand); }

/* ---------- Photos: mask + black-and-white warming to colour ---------- */
.duo { margin: 0; }
.duo-frame { position: relative; overflow: hidden; isolation: isolate; background: #26221E; }
.duo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo .c { filter: saturate(.82) contrast(.96) sepia(.12); }
.duo figcaption { margin-top: .8rem; font-size: var(--text-xs); color: var(--ash); }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.g1 { grid-column: 1 / -1; }
.g1 .duo-frame { aspect-ratio: 16 / 10; }
.g2 .duo-frame, .g3 .duo-frame { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .g1 { grid-column: 1 / 7; }
  .g2 { grid-column: 7 / 10; margin-top: clamp(3rem, 8vw, 7rem); }
  .g3 { grid-column: 10 / 13; }
}

.stats {
  display: grid;
  gap: 2.25rem clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}
@media (min-width: 600px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats li { padding-top: 1.25rem; border-top: 1px solid var(--accent); }
.stats .num { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: 1.2; color: var(--sand); }
.stats h3 { font-size: var(--text-base); font-weight: 500; margin-top: .35rem; }
.stats p { font-size: var(--text-sm); color: var(--ash); margin-top: .3rem; max-width: 30rem; }

/* ---------- Schedule ---------- */
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-bottom: 2rem; font-size: var(--text-sm); color: var(--sand); }
.legend small { font-size: var(--text-xs); color: var(--ash); }
.k { white-space: nowrap; }
.k::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .55rem;
  vertical-align: .08em;
}
.k--all::before { border: 1px solid var(--sand); }
.k--basic::before { background: var(--clay); }
.k--women::before { background: var(--sand); border-radius: 50%; }
.k--kids::before { border: 1px solid var(--sand); border-radius: 50%; }
.k--spar::before { background: var(--clay); transform: rotate(45deg) scale(.85); }
.k--open::before { background: var(--ash); }
.k--off { color: var(--ash); }
.k--off::before { display: none; }

.timetable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.timetable caption { caption-side: bottom; text-align: left; padding-top: 1.25rem; font-size: var(--text-xs); color: var(--ash); }
.timetable th, .timetable td { text-align: left; vertical-align: top; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--accent); }
.timetable thead th { font-weight: 500; color: var(--sand); line-height: 1.5; }
.timetable thead th span { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--ash); }
.timetable tbody th { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg); line-height: 1.4; color: var(--bone); white-space: nowrap; }
.timetable td.none { color: var(--ash); }
.timetable .time { display: block; font-size: var(--text-xs); color: var(--ash); }
@media (max-width: 759.98px) {
  .timetable, .timetable tbody, .timetable tr, .timetable th, .timetable td, .timetable caption { display: block; }
  .timetable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .timetable tr { padding: 1.25rem 0; border-bottom: 1px solid var(--accent); }
  .timetable tbody tr:first-child { border-top: 1px solid var(--accent); }
  .timetable tbody th { padding: 0 0 .35rem; border: 0; }
  .timetable td { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .75rem; padding: .3rem 0; border: 0; }
  .timetable td::before { content: attr(data-label); font-size: var(--text-xs); color: var(--ash); padding-top: .1rem; }
  .timetable td.none { display: none; }
}

/* ---------- Trainers ---------- */
.kru-list { display: grid; gap: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 900px) { .kru-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kru { padding-top: 1.5rem; border-top: 1px solid var(--accent); }
.kru-role { font-size: var(--text-xs); color: var(--ash); }
.kru h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl); line-height: 1.3; margin-top: .2rem; }
.kru-full { font-size: var(--text-sm); color: var(--sand); }
.record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: 1.75rem; }
.record div { display: flex; flex-direction: column-reverse; }
.record dt { font-size: var(--text-xs); color: var(--ash); }
.record dd { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.3; color: var(--bone); }
.rbar { display: flex; gap: 2px; height: 3px; margin-top: 1rem; }
.rbar span { display: block; }
.rbar .w { background: var(--clay); }
.rbar .l { background: var(--ember-dim); }
.rbar .d { background: var(--sand); }
.rkey { font-size: var(--text-xs); color: var(--ash); margin-top: .5rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: 1.75rem; }
.facts dt { font-size: var(--text-xs); color: var(--ash); }
.facts dd { font-size: var(--text-sm); color: var(--bone); }

/* ---------- First time ---------- */
.first-grid { display: grid; gap: clamp(3.5rem, 6vw, 6rem); }
@media (min-width: 960px) { .first-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sub { font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl); line-height: 1.35; margin-bottom: 1.75rem; }
.bring li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--accent); }
.bring .tick { width: 1rem; height: 1rem; margin-top: .45rem; color: var(--sand); }
.bring .no .tick { color: var(--ash); }
.bring strong { display: block; font-weight: 500; }
.bring p { font-size: var(--text-sm); color: var(--ash); }
.round { display: flex; gap: 3px; height: 6px; margin-bottom: 1.5rem; }
.round span { display: block; background: rgba(217, 203, 180, .35); }
.round .hot { background: var(--clay); }
.flow li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--accent); }
.flow .mins { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--sand); padding-top: .15rem; white-space: nowrap; }
.flow h4 { font-size: var(--text-base); font-weight: 500; }
.flow p { font-size: var(--text-sm); color: var(--ash); }

/* ---------- Reviews ---------- */
.score { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; color: var(--ash); font-size: var(--text-sm); }
.score .num { font-family: var(--font-display); font-weight: 600; font-size: var(--text-6xl); line-height: 1.1; color: var(--bone); }
.stars { color: var(--sand); letter-spacing: .15em; font-size: var(--text-sm); }
.quote-big { max-width: 60rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.quote-big .stars { display: block; margin-bottom: 1.25rem; }
.quote-big blockquote p {
  text-wrap: pretty;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: 1.45;
  color: var(--bone);
}
.quote-big blockquote p::before { content: "“"; }
.quote-big blockquote p::after { content: "”"; }
.quote-big figcaption { margin-top: 1.5rem; font-size: var(--text-sm); color: var(--ash); }
.quote-big figcaption b { color: var(--bone); margin-right: .35rem; }
.quotes { display: grid; gap: 2.5rem clamp(2rem, 4vw, 4rem); }
@media (min-width: 700px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { padding-top: 1.25rem; border-top: 1px solid var(--accent); }
.quote blockquote p { font-size: var(--text-base); color: var(--bone); }
.quote figcaption { margin-top: 1rem; font-size: var(--text-xs); color: var(--ash); }
.quote figcaption b { color: var(--sand); margin-right: .35rem; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 0 4rem; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .faq-head { position: sticky; top: calc(var(--hh) + 2.5rem); grid-template-columns: 1fr; }
}
.faq { border-top: 1px solid var(--accent); }
.faq details { border-bottom: 1px solid var(--accent); }
.faq summary {
  position: relative;
  display: block;
  padding: 1.35rem 3rem 1.35rem 0;
  font-size: var(--text-lg);
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
  transition: color .4s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sand); }
.pm { position: absolute; right: .25rem; top: calc(1.35rem + .8em); width: 1rem; height: 1rem; margin-top: -.5rem; }
.pm::before, .pm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease);
}
.pm::after { transform: rotate(90deg); }
details[open] .pm::after { transform: rotate(0deg); }
.answer { padding: 0 0 1.6rem; color: var(--sand); max-width: 44rem; }
@media (min-width: 600px) { .answer { padding-right: 3rem; } }
details[open] .answer { animation: lift .8s var(--ease) both; }

/* ---------- Location ---------- */
.loc-grid { display: grid; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 960px) { .loc-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } }
.loc-grid .sec-head { margin-bottom: 2rem; grid-template-columns: 1fr; }
.address { font-size: var(--text-lg); line-height: 1.7; margin-bottom: 1.75rem; }
.loc-grid .actions { margin-bottom: 2.5rem; }
.hours { display: grid; margin-bottom: 2.5rem; }
.hours div { display: grid; grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr); gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--accent); }
.hours div:last-child { border-bottom: 1px solid var(--accent); }
.hours dt { color: var(--ash); font-size: var(--text-sm); }
.hours dd { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.getting { display: grid; gap: 1rem; font-size: var(--text-sm); color: var(--sand); }
.getting strong { display: block; color: var(--bone); }
.map svg { width: 100%; height: auto; border-radius: var(--radius); }
.map figcaption { margin-top: .8rem; font-size: var(--text-xs); color: var(--ash); }
#location { padding-bottom: var(--space-section); }

/* ---------- Booking (the one light surface) ---------- */
.book {
  color-scheme: light;
  --focus: var(--clay);
  --accent: rgba(31, 28, 25, .14);
  padding-block: var(--space-section) calc(var(--space-section) * .7);
  background: var(--bone);
  color: var(--charcoal);
}
.book .display { color: var(--charcoal); margin-bottom: 1.5rem; }
.book-grid { display: grid; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 960px) { .book-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.book-aside > p { max-width: 30rem; margin-bottom: 1rem; }
.book-aside .actions { margin-top: 1.75rem; }
.book-photo { margin-top: clamp(2.5rem, 5vw, 4rem); max-width: 30rem; }
.book-photo .duo-frame { aspect-ratio: 4 / 3; background: var(--sand); }
.book-photo figcaption { color: var(--umber); }

.form-card {
  padding: clamp(1.5rem, 3.5vw, 3rem);
  background: #F8F4EC;
  border: 1px solid rgba(31, 28, 25, .12);
  border-radius: var(--radius);
}
.field { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; padding: 0; margin-bottom: .45rem; font-size: var(--text-sm); font-weight: 500; line-height: 1.6; }
.hint { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--umber); }
.field input[type="text"],
.field input[type="date"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: .7rem .9rem;
  font-size: 1rem;
  line-height: 1.6;
  background: #FFFDF9;
  color: var(--charcoal);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B5F52' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: .75rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--charcoal); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--charcoal); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--clay-deep); box-shadow: 0 0 0 1px var(--clay-deep); }
.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radios label { position: relative; margin: 0; font-weight: 400; }
.radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .3rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.radios input:checked + span { background: var(--charcoal); border-color: var(--charcoal); color: var(--bone); }
.radios input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 2px; }
.form-error { margin-bottom: 1rem; font-size: var(--text-sm); font-weight: 500; color: var(--clay-deep); }
.form-small { margin-top: .9rem; font-size: var(--text-xs); color: var(--umber); }
.thanks h3 { font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl); line-height: 1.3; margin-bottom: 1rem; }
.thanks p { margin-bottom: .75rem; }
.thanks .actions { margin-top: 1.5rem; }
.thanks:not([hidden]) { animation: lift .9s var(--ease) both; }

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--accent); font-size: var(--text-sm); color: var(--sand); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); } }
.footer-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-6xl);
  line-height: 1;
  padding: .3em 0 .32em;
  margin-bottom: .5rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--sand);
}
.foot-h { font-size: var(--text-sm); font-weight: 500; color: var(--bone); margin-bottom: .5rem; }
.site-footer p { margin-bottom: .2rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sand); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--bone); }
.site-footer .small { font-size: var(--text-xs); color: var(--ash); margin-top: .75rem; }

/* ---------- PV Dev strip ---------- */
.pvdev { padding: .5rem var(--gutter); background: var(--soot); text-align: center; font-size: var(--text-xs); line-height: 1.7; }
.pvdev a { display: inline-block; padding: .75rem 0; color: var(--ash); text-decoration: underline; text-decoration-color: rgba(168, 155, 136, .45); text-underline-offset: 3px; }
.pvdev a:hover { color: var(--bone); }

/* ---------- Sticky contact bar (mobile) ---------- */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(31, 28, 25, .97);
  border-top: 1px solid var(--accent);
}
.sticky-bar--4 { grid-template-columns: repeat(3, 1fr) 1.5fr; }
.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3.5rem;
  padding: 0 .5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--bone);
  text-decoration: none;
}
.sticky-bar a + a { border-left: 1px solid var(--accent); }
.sticky-bar svg { width: 1.1rem; height: 1.1rem; flex: none; }
.sticky-bar .sb-book { background: var(--clay); border-left-color: var(--clay); }
.sticky-bar a:focus-visible { outline-offset: -3px; }
body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .sticky-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Cursor (desktop, enabled by script) ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 2.125rem;
  height: 2.125rem;
  margin: -1.0625rem 0 0 -1.0625rem;
  border: 1px solid var(--bone);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.cursor.is-on { opacity: .85; }

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
  .header-inner { gap: .25rem; }
  .menu-btn-label { font-size: var(--text-xs); }
}
@media (max-width: 899.98px) {
  .hero { padding-bottom: calc(3.5rem + clamp(2rem, 6vh, 3.5rem)); }
}

/* ---------- Reduced motion: everything rests in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html.js:not(.no-intro) .intro { display: none; }
  .cursor { display: none; }
}