/* KLIQ MMA — site styles
   Concept: the page is the gym room. White padded wall at the top, black-tape mark
   from the wall as the one graphic element, grey mat at the bottom.
   Violet (KLIQ's brand colour) only on things you click to book or buy.
   Change the brand by editing :root only. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --wall: #E9EBEE;      /* white vinyl wall padding */
  --panel: #FFFFFF;
  --seam: #D3D6DB;      /* seams between pads, hairlines */
  --tape: #000000;      /* black tape mark, headline ink */
  --ink: #1F2124;       /* body text */
  --quiet: #62666D;     /* secondary text */
  --mat: #2E3034;       /* the mats */
  --mat-line: #464A50;
  --on-mat: #B9BDC4;
  --violet: #5A52E0;    /* KLIQ violet — book / buy */
  --violet-hover: #463FC2;
  --violet-soft: #E6E4FB;
  --hero-wall: #D5D6EC;  /* home hero: the wall with 14% KLIQ violet mixed in */
  --chalk: #FFFFFF;     /* text and the thread over the mat, text on violet */
  --on-tape: #FFFFFF;   /* text on things filled with tape (black buttons, pressed chips) */
  --tape-hover: var(--mat);
  --tape-grey: #A9ADB3; /* back edges of the mark */
  --strike-grey: #A0A4AA; /* "drills" once the tape has crossed it */
  --mat-faint: #8C9098; /* footer copyright */
  --announce: var(--tape);
  --announce-ink: #E8E9EB;
  --announce-line: transparent;
  --header-bg: rgb(255 255 255 / .96);
  --header-glass: rgb(255 255 255 / .62);
  --header-glass-edge: rgb(255 255 255 / .75);
  --header-glass-line: rgb(31 33 36 / .1);
  --focus: var(--violet);
  --save-ink: var(--violet-hover);
  --stars: #E9A825;
  --shadow-ink: rgb(31 33 36 / .12);
  --shadow-menu: 0 14px 34px var(--shadow-ink);
  --mat-tile: transparent; /* tile seams on mat sections (black pads only) */
  --mat-edge: transparent;
  /* home hero window light */
  --sun: var(--panel);  /* the patch of sun on the hero wall */
  --pad-shade: rgb(46 48 52 / .13); /* hero pad seams: shadow side */
  --pad-light: rgb(255 255 255 / .6); /* hero pad seams: lit edge */
  --photo-shadow: rgb(31 33 36 / .28);
  --hero-tint: var(--hero-wall); /* multiplied over the hero photo's white pads */

  /* class levels (text label always shown with the colour) */
  --lvl-fondations: #2D7A4D;
  --lvl-tous: #3657C4;
  --lvl-avance: #B3382E;
  --lvl-comp: #87309C;
  --lvl-jeunes: #9A5D0C;
  --lvl-ouvert: #1B7584;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wide: 125%;

  /* type scale (~1.25, display steps larger) */
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-h3: 1.3125rem;
  --t-h2: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
  --t-h1: clamp(2.8rem, 1.6rem + 5vw, 6.4rem);
  --t-hero: clamp(3rem, 1.3rem + 5.6vw, 6.6rem);

  --wrap: 76rem;
  --gutter: max(clamp(1rem, .5rem + 2.5vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --space: clamp(4rem, 3rem + 5vw, 8rem);
  --r: 3px;
  --pill: 999px;
  --control-h: 3rem;
  --seams: repeating-linear-gradient(90deg, transparent 0 calc(9rem - 1px), var(--seam) calc(9rem - 1px) 9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7rem; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 var(--t-md)/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--violet); color: var(--chalk); padding: .6rem 1rem; z-index: 100; }
.skip:focus-visible { top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 38rem; }
.measure > * + * { margin-top: 1em; }
.stack > * + * { margin-top: 1.25rem; }
.stack > h2 + * { margin-top: 1.75rem; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-stretch: var(--wide); color: var(--tape); }
h1 { font-size: var(--t-h1); font-weight: 860; line-height: .95; letter-spacing: -.025em; }
h2 { font-size: var(--t-h2); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: var(--t-lg); line-height: 1.5; max-width: 36rem; }
.muted { color: var(--quiet); }

/* ---------- the mark (black tape on the wall) ---------- */
/* Lines use butt caps and are pre-extended at both ends, so joints close without
   cap artefacts while drawing. Back edges are grey tape, front edges black, as on the wall. */
.mark { display: block; overflow: visible; fill: none; stroke-linecap: butt; }
.mark .tf { stroke: var(--tape); stroke-width: 15; }
.mark .tb { stroke: var(--tape-grey); stroke-width: 9; }

/* ---------- themes: the wall, and black pads ----------
   Black pads is the same room with the black vinyl wall pads many fight gyms use:
   white athletic tape instead of black, the mat a step darker than the wall.
   It follows the visitor's system setting; the header switch sets data-theme on
   <html> to override it (a script in the layout's <head> applies a saved choice
   before the page paints). Each token below is light-dark(wall, black pads); its
   first value must match the :root list above (the build checks). Browsers without
   light-dark() keep the wall. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --wall: light-dark(#E9EBEE, #1B1E22);
    --panel: light-dark(#FFFFFF, #24272C);
    --seam: light-dark(#D3D6DB, #363A40);
    --tape: light-dark(#000000, #F2F3F5);
    --ink: light-dark(#1F2124, #D5D8DD);
    --quiet: light-dark(#62666D, #9CA1A9);
    --mat: light-dark(#2E3034, #131518);
    --mat-line: light-dark(#464A50, #2C2F34);
    --on-mat: light-dark(#B9BDC4, #AEB3BA);
    --violet-soft: light-dark(#E6E4FB, #2D2A5C);
    --hero-wall: light-dark(#D5D6EC, #24253D);
    --lvl-fondations: light-dark(#2D7A4D, #5DBE84);
    --lvl-tous: light-dark(#3657C4, #8EA6F5);
    --lvl-avance: light-dark(#B3382E, #F08A80);
    --lvl-comp: light-dark(#87309C, #D38CE6);
    --lvl-jeunes: light-dark(#9A5D0C, #E0A653);
    --lvl-ouvert: light-dark(#1B7584, #5CC3D2);
    --on-tape: light-dark(#FFFFFF, #1B1E22);
    --tape-hover: light-dark(var(--mat), #C9CCD2);
    --tape-grey: light-dark(#A9ADB3, #5E636A);
    --strike-grey: light-dark(#A0A4AA, #5E636A);
    --mat-faint: light-dark(#8C9098, #868B93);
    --announce: light-dark(var(--tape), var(--mat));
    --announce-ink: light-dark(#E8E9EB, #AEB3BA);
    --announce-line: light-dark(transparent, #2C2F34);
    --header-bg: light-dark(rgb(255 255 255 / .96), rgb(27 30 34 / .94));
    --header-glass: light-dark(rgb(255 255 255 / .62), rgb(27 30 34 / .66));
    --header-glass-edge: light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .09));
    --header-glass-line: light-dark(rgb(31 33 36 / .1), rgb(255 255 255 / .08));
    --focus: light-dark(var(--violet), #8E88F2);
    --save-ink: light-dark(var(--violet-hover), #B9B4FF);
    --shadow-ink: light-dark(rgb(31 33 36 / .12), rgb(0 0 0 / .45));
    --mat-tile: light-dark(transparent, rgb(255 255 255 / .035));
    --mat-edge: light-dark(transparent, #2C2F34);
    --sun: light-dark(var(--panel), #3E3F66);
    --pad-shade: light-dark(rgb(46 48 52 / .13), rgb(0 0 0 / .32));
    --pad-light: light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .05));
    --photo-shadow: light-dark(rgb(31 33 36 / .28), rgb(0 0 0 / .55));
    --hero-tint: light-dark(var(--hero-wall), #A9AAD0);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  /* the logo file is white: black on the wall, as is on black pads */
  :root[data-theme="dark"] .brand img { filter: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand img { filter: none; } }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75rem 1.4rem; border: 2px solid transparent; border-radius: var(--r);
  font: 700 var(--t-sm)/1.1 var(--font); font-stretch: 112%; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-sm { min-height: 2.5rem; padding: .5rem 1rem; font-size: var(--t-xs); }
.btn-violet { background: var(--violet); color: var(--chalk); }
.btn-violet:hover { background: var(--violet-hover); }
.btn-ink { background: var(--tape); color: var(--on-tape); }
.btn-ink:hover { background: var(--tape-hover); }
.btn-line { border-color: var(--tape); color: var(--tape); }
.btn-line:hover { background: var(--tape); color: var(--on-tape); }
.on-mat .btn-line { border-color: var(--chalk); color: var(--chalk); }
.on-mat .btn-line:hover { background: var(--chalk); color: var(--mat); }
.text-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- announcement + header ---------- */
.announce { background: var(--announce); color: var(--announce-ink); box-shadow: inset 0 -1px var(--announce-line); font-size: var(--t-sm); line-height: 1.4; text-align: center; padding: .85rem var(--gutter); }
.announce a { color: var(--chalk); font-weight: 700; margin-left: .5em; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--seam); }
/* Glass: the page shows through blurred and a touch more saturated, with a lit top
   edge. It sits on ::before because backdrop-filter on the header itself would trap
   the collapsed menu (position: fixed) inside the header. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: none; border-bottom-color: var(--header-glass-line); }
  .site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 var(--header-glass-edge);
  }
  /* with the collapsed menu open, the header joins the menu sheet */
  body.menu-open .site-header::before { background: var(--wall); }
}
.header-in { display: flex; align-items: center; gap: 1.5rem; min-height: 5.5rem; }
/* color hides the alt text Firefox draws while the logo is still loading */
.brand img { width: 104px; height: auto; filter: brightness(0); color: transparent; }
@media (max-width: 699px) { .header-in { min-height: 4.75rem; } .brand img { width: 84px; } }
.site-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav-list { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-list a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav-list a:hover, .nav-list a[aria-current] { border-bottom-color: var(--tape); }
.has-sub { position: relative; }
.sub {
  position: absolute; top: calc(100% + .7rem); left: -1rem; min-width: 15.5rem;
  list-style: none; margin: 0; padding: .5rem 0; background: var(--panel);
  border: 1px solid var(--seam); box-shadow: var(--shadow-menu);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.sub::before { content: ""; position: absolute; inset: -1rem 0 auto; height: 1rem; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: .5rem 1rem; border: 0; font-weight: 500; }
.sub a:hover, .sub a[aria-current] { background: var(--wall); }
.lang { font-size: var(--t-xs); font-weight: 700; text-decoration: none; padding: .35rem .65rem; border: 1px solid var(--seam); border-radius: var(--r); }
.lang:hover { border-color: var(--tape); }
/* Language and theme share a row below the CTA in the collapsed menu. */
.nav-tools { display: contents; }
.theme-btn { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: inline-grid; grid-template-columns: 1fr 1fr; place-items: center; width: 3.75rem; height: var(--control-h); padding: 0; background: none; border: 0; border-radius: var(--pill); color: var(--tape); cursor: pointer; }
/* The head sets data-theme before paint; deferred JS must not change this layout. */
:root:not([data-theme]) .theme-btn { display: none; }
.theme-btn::before { content: ""; position: absolute; inset: .5625rem 0; border: 1px solid var(--seam); border-radius: var(--pill); background: var(--wall); }
.theme-btn:hover::before { border-color: var(--tape); }
.theme-btn::after { content: ""; position: absolute; left: .1875rem; top: calc(50% - .75rem); width: 1.5rem; height: 1.5rem; border-radius: var(--pill); background: var(--tape); transition: transform .2s; }
.theme-btn svg { position: relative; z-index: 1; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.theme-btn .i-sun, :root[data-theme="dark"] .theme-btn .i-moon { color: var(--on-tape); }
:root[data-theme="dark"] .theme-btn .i-sun { color: var(--tape); }
:root[data-theme="dark"] .theme-btn::after { transform: translateX(1.875rem); }
.menu-btn { display: none; }
/* Top-level links, the language switch and the CTA each reserve the width of their
   longer label (the other language's sits invisibly in ::after, from data-alt), so
   switching between French and English doesn't move anything in the header. */
@media (min-width: 1161px) {
  /* Preserve the action group width and navigation alignment when the theme
     switch moves to the page edge: keep its former 36px slot plus a gap between
     the actions, and protect narrow gutters from overlap. */
  :root[data-theme] .header-in .lang { margin-left: calc(2.25rem + 1.4rem); }
  :root[data-theme] .header-in .site-nav { margin-right: max(0px, calc(6rem - max(0px, (100vw - var(--wrap)) / 2))); }
  .nav-list > li > a, .lang, .nav-cta { display: inline-grid; justify-items: center; align-items: center; }
  .nav-list > li > a > span, .nav-list > li > a::after, .lang > span, .lang::after, .nav-cta > span, .nav-cta::after { grid-area: 1 / 1; }
  .nav-list > li > a::after, .lang::after, .nav-cta::after { content: attr(data-alt); visibility: hidden; pointer-events: none; }
  .nav-list > li > a { padding-bottom: 0; border-bottom: 0; }
  .nav-list > li > a > span, .nav-list > li > a::after { padding-bottom: .4rem; border-bottom: 2px solid transparent; }
  .nav-list > li > a:hover > span, .nav-list > li > a[aria-current] > span { border-bottom-color: var(--tape); }
}

@media (max-width: 1160px) {
  .menu-btn { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; background: none; border: 0; padding: .6rem 0; font: 700 var(--t-sm) var(--font); color: var(--tape); cursor: pointer; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
  .menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { position: fixed; inset: var(--header-h, 5.5rem) 0 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--wall); padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; margin: 0; }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--seam); }
  .nav-list > li > a { display: block; padding: .9rem 0; font-size: 1.6rem; font-weight: 800; font-stretch: var(--wide); letter-spacing: -.02em; border: 0; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 1rem; min-width: 0; }
  .sub::before { display: none; }
  .sub a { padding: .35rem 0; color: var(--quiet); }
  .sub a:hover { background: none; color: var(--tape); }
  .nav-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-shrink: 0; }
  .theme-btn { position: relative; right: auto; top: auto; transform: none; flex-shrink: 0; }
  .nav-cta { margin-top: 1.25rem; }
  body.menu-open { overflow: hidden; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--space); }
.section-tight { padding-block: calc(var(--space) * .6); }
.on-panel { background: var(--panel); border-block: 1px solid var(--seam); }
.on-mat {
  color: var(--chalk); box-shadow: inset 0 1px var(--mat-edge), inset 0 -1px var(--mat-edge);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(6rem - 1px), var(--mat-tile) calc(6rem - 1px) 6rem),
    repeating-linear-gradient(0deg, transparent 0 calc(6rem - 1px), var(--mat-tile) calc(6rem - 1px) 6rem),
    var(--mat);
}
.on-mat h2, .on-mat h3 { color: var(--chalk); }
.on-mat .muted { color: var(--on-mat); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); max-width: 46rem; }
.section-head p { color: var(--quiet); font-size: var(--t-lg); line-height: 1.5; }
.on-mat .section-head p { color: var(--on-mat); }
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); grid-template-columns: 1fr; align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 860px) { .split { grid-template-columns: 5fr 6fr; } .split-flip > :first-child { order: 2; } .split-center { align-items: center; } }
.mt-l { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ---------- home hero: the wall ---------- */
.hero { position: relative; overflow: hidden; background: var(--hero-wall); border-bottom: 1px solid var(--seam); }
.hero-grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem); align-items: center; }
.hero h1 { font-size: var(--t-hero); line-height: .92; }
.hero h1 span { display: block; }
.hero-sub { margin-top: 1.5rem; max-width: 33rem; font-size: var(--t-lg); line-height: 1.5; }
.hero-photo { aspect-ratio: 4/5; width: 100%; object-fit: cover; }
/* "drills" gets struck through. Without the script it's a plain CSS strike;
   with it, the tape line does the striking and carries on down the page. */
.strike { text-decoration: line-through; text-decoration-thickness: .12em; text-decoration-color: var(--tape); }
/* --p (0 → 1.2) is set by site.js as the tape crosses the word: it turns grey exactly
   where the tape has passed, left to right. */
.has-thread .strike {
  text-decoration: none; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--strike-grey) calc(var(--p, 0) * 100% - 14%), var(--tape) calc(var(--p, 0) * 100%));
}
.hero-rail { align-self: stretch; }

/* the photo sits on a slab of mat: wall above, mat below, like the room */
.hero-art { position: relative; isolation: isolate; }
.hero-mat {
  position: absolute; z-index: -1; left: 28%; top: 42%; width: 100vw; height: 100vh;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(6rem - 1px), rgb(255 255 255 / .06) calc(6rem - 1px) 6rem),
    repeating-linear-gradient(0deg, transparent 0 calc(6rem - 1px), rgb(255 255 255 / .06) calc(6rem - 1px) 6rem),
    var(--mat);
}
.hero-photo { position: relative; box-shadow: 1.25rem 1.5rem 2.5rem -1.25rem var(--photo-shadow); }
@media (max-width: 899px) { .hero-mat { left: 18%; top: 50%; } }
/* the photo's white pads take on the wall's colour, strongest on the side facing the headline */
.hero-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, var(--hero-tint) 0 40%, transparent 90%);
  mix-blend-mode: multiply; opacity: .7;
}

/* window light: padded wall seams, a soft patch of sun through three panes and a
   transom, and the shadow of a heavy bag hanging between the window and the wall.
   The bag only shows where the sun lands. site.js swings it; without the script
   (or with reduced motion) it simply hangs still. */
.hero > .wrap { position: relative; z-index: 1; }
.hero-light { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-pads {
  position: absolute; inset: -2rem;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(9rem - 2px),
    var(--pad-shade) calc(9rem - 2px) calc(9rem - 1px),
    var(--pad-light) calc(9rem - 1px) 9rem);
}
.hero-sun {
  position: absolute; top: -20%; height: 150%; left: -9%; width: 40%;
  background: var(--sun); opacity: .8;
  transform: skewX(-22deg);
  -webkit-mask:
    repeating-linear-gradient(90deg, transparent 0, #000 4%, #000 29.3%, transparent 33.34%),
    linear-gradient(0deg, #000 0 43.5%, transparent 49%, #000 54.5%),
    linear-gradient(0deg, transparent 2%, #000 25%, #000 83%, transparent 99%);
  -webkit-mask-composite: source-in, source-in;
          mask:
    repeating-linear-gradient(90deg, transparent 0, #000 4%, #000 29.3%, transparent 33.34%),
    linear-gradient(0deg, #000 0 43.5%, transparent 49%, #000 54.5%),
    linear-gradient(0deg, transparent 2%, #000 25%, #000 83%, transparent 99%);
          mask-composite: intersect;
}
.hero-bag { position: absolute; left: 40.5%; top: 6%; width: 19%; transform-origin: 50% 0; }
.hero-bag svg { display: block; width: 100%; overflow: visible; color: var(--hero-wall); filter: blur(11px); }
@media (max-width: 699px) {
  .hero-sun { left: -32%; width: 100%; }
  .hero-bag { left: 42%; width: 16%; }
  .hero-bag svg { filter: blur(8px); }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) clamp(4rem, 7vw, 7rem) minmax(0, 4.4fr); gap: clamp(1rem, 2vw, 2rem); }
}
@media (max-width: 899px) {
  .hero-rail { display: none; }
  .hero-photo { aspect-ratio: 4/3; }
}

/* ---------- the thread ----------
   One tape line, drawn by site.js as you scroll: it strikes "drills" in the hero,
   runs down the left gutter, ticks into every section heading, and ends in the
   booking button. Nothing here applies without .has-thread, which the <head> script
   sets before first paint (on pages the build flags with data-thread), so the gutter
   below never shifts the page once it's showing. */
.has-thread body { position: relative; }
.thread { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; overflow: visible; }
.thread path, .thread line { fill: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-width: var(--thread-w, 8px); }
.thread .th-ink path, .thread .th-ink line { stroke: var(--tape); }
.thread .th-chalk path, .thread .th-chalk line { stroke: var(--chalk); }
.thread .th-ink polygon { fill: var(--tape); }
.thread .th-chalk polygon { fill: var(--chalk); }
.thread polygon { transform-box: fill-box; }
/* going on: diamond pops and the tab draws out of it at the same time.
   going off (scrolling back up): tab pulls in at once, then the diamond goes. */
.thread polygon { transform-origin: center; transform: scale(0); transition: transform .12s ease-in; }
.thread polygon.on { transform: none; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.thread line { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); transition: none; }
.thread line.on { stroke-dashoffset: 0; transition: stroke-dashoffset .22s cubic-bezier(.4, 0, .2, 1); }
.has-thread main .wrap, .has-thread .tape-in { padding-left: max(var(--gutter), 1.9rem); }
.has-thread .tape-in { padding-bottom: 2.75rem; }
@media (max-width: 699px) { .thread { --thread-w: 4px; } }

/* photos wipe in left to right, like tape pulled off the roll, as the line reaches them */
.has-thread [data-reveal] { clip-path: inset(0 100% 0 0); transform: scale(1.05); transition: clip-path .9s cubic-bezier(.75, 0, .2, 1), transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.has-thread [data-reveal].is-in { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- inner page heroes ---------- */
.page-hero { background: var(--seams), var(--wall); border-bottom: 1px solid var(--seam); }
.page-hero-grid { display: grid; gap: 2rem; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(2rem, 1.25rem + 2.5vw, 3.5rem); align-items: end; }
.page-hero h1 { max-width: 14ch; }
.page-hero .lede { margin-top: 1.4rem; }
.page-hero-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (min-width: 900px) { .page-hero-grid.has-media { grid-template-columns: 7fr 5fr; } }
/* the first section under an inner-page hero starts closer to it than sections start to each other */
.page-hero + .section { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.crumb { font-size: var(--t-sm); color: var(--quiet); margin-bottom: 1rem; }
.crumb a { color: inherit; }

/* ---------- editor-made pages (news posts, simple pages) ---------- */
.page-hero-entry h1 { max-width: 20ch; }
/* the text sits on a white sheet taped to the wall; news posts add a side column */
.entry-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .entry-grid.has-aside { grid-template-columns: minmax(0, 48rem) 15rem; column-gap: clamp(2.5rem, 4vw, 4.5rem); } }
.sheet { max-width: 48rem; background: var(--panel); border: 1px solid var(--seam); border-top: 4px solid var(--tape); padding: clamp(1.5rem, .75rem + 3.2vw, 3.75rem); }
.entry-aside { display: grid; gap: 1.5rem; font-size: var(--t-sm); }
@media (min-width: 1000px) { .entry-aside { position: sticky; top: calc(var(--header-h, 5.5rem) + 2rem); } }
.aside-date { color: var(--quiet); padding-bottom: 1.25rem; border-bottom: 1px solid var(--seam); }
.aside-date time { display: block; margin-top: .2rem; color: var(--tape); font-weight: 700; font-size: var(--t-md); }
.aside-h { font-weight: 700; color: var(--tape); margin-bottom: .5rem; }
.aside-posts { list-style: none; margin: 0; padding: 0; }
.aside-posts li { padding-block: .7rem; border-top: 1px solid var(--seam); }
.aside-posts a { display: block; font-weight: 600; line-height: 1.35; text-decoration: none; }
.aside-posts a:hover { text-decoration: underline; }
.aside-posts time { display: block; margin-top: .2rem; color: var(--quiet); font-size: var(--t-xs); }
.entry-aside .text-link { justify-self: start; }
/* text typed in the editor: the same type as the hand-built pages, in one readable column */
.prose { max-width: 40rem; }
.prose > :first-child { margin-top: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.prose > * + h2 { margin-top: 2.6rem; }
.prose > * + h3 { margin-top: 2rem; }
.prose h2 + *, .prose h3 + * { margin-top: .75rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 0; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--quiet); }
.prose a { font-weight: 600; text-decoration-thickness: 2px; }
.prose img { width: 100%; height: auto; }
.prose > img, .prose > p > img:only-child { margin-block: 2rem; }
.prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 4px solid var(--tape); font-size: var(--t-lg); line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid var(--seam); margin-block: 2.5rem; }
.prose pre { overflow-x: auto; padding: 1rem 1.25rem; background: var(--wall); border: 1px solid var(--seam); font-size: var(--t-sm); line-height: 1.5; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--seam); vertical-align: top; }

/* news list: a white board on the wall, one ruled row per post, the date as a block on the left */
.posts { list-style: none; margin: 0; padding: 0; max-width: 60rem; background: var(--panel); border: 1px solid var(--seam); border-top: 4px solid var(--tape); }
.post-row { position: relative; display: grid; grid-template-columns: 4.75rem 1fr; }
.post-row + .post-row { border-top: 1px solid var(--seam); }
.post-row:hover { background: color-mix(in srgb, var(--wall) 40%, var(--panel)); }
.post-date { grid-row: span 2; display: flex; flex-direction: column; align-items: center; padding: 1.4rem .5rem; border-right: 1px solid var(--seam); text-align: center; }
.date-day { font-size: 2.1rem; font-weight: 800; font-stretch: var(--wide); line-height: 1; letter-spacing: -.02em; color: var(--tape); }
.date-month { margin-top: .4rem; font-size: var(--t-xs); line-height: 1.3; color: var(--quiet); }
.post-thumb { padding: 1.25rem 1.25rem 0; }
.post-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.post-text { display: grid; align-content: start; gap: .6rem; padding: 1.4rem 1.25rem 1.6rem; }
.post-thumb + .post-text { padding-top: 1rem; }
@media (min-width: 700px) {
  .post-row { grid-template-columns: 7rem 1fr; }
  .post-row.has-thumb { grid-template-columns: 7rem 11rem 1fr; }
  .post-date { grid-row: auto; padding: 1.75rem .75rem; }
  .date-day { font-size: 2.75rem; }
  .post-thumb { padding: 1.75rem 0 1.75rem 1.75rem; }
  .post-text, .post-thumb + .post-text { padding: 1.75rem 2rem; }
}
.post-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); font-weight: 800; font-stretch: var(--wide); letter-spacing: -.02em; line-height: 1.05; color: var(--tape); }
.post-title a { text-decoration: none; }
.post-title a::after { content: ""; position: absolute; inset: 0; }
.post-row:hover .post-title a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.post-sum { color: var(--quiet); max-width: 38rem; }

/* ---------- booking band ---------- */
.tape-wrap { background: var(--violet); color: var(--chalk); }
.tape-in { max-width: var(--wrap); margin-inline: auto; padding: 1.6rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.tape-text { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); font-weight: 800; font-stretch: var(--wide); letter-spacing: -.02em; line-height: 1.1; max-width: 30ch; }
.tape-wrap .btn-ink:hover { background: var(--tape-hover); }

/* ---------- programs ---------- */
.programs { display: grid; gap: 2rem 1.25rem; }
@media (min-width: 700px) { .programs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .programs { grid-template-columns: repeat(4, 1fr); } }
.program { display: grid; align-content: start; gap: .6rem; text-decoration: none; }
.program img { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: .5rem; }
.program-name { font-size: 1.75rem; font-weight: 820; font-stretch: var(--wide); letter-spacing: -.02em; line-height: 1; color: var(--tape); }
.program:hover .program-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.program p { color: var(--quiet); font-size: var(--t-sm); }
.program .program-for { color: var(--ink); font-weight: 700; font-size: var(--t-xs); }

/* ---------- classic class vs KLIQ class ---------- */
.versus { display: grid; border-top: 1px solid var(--mat-line); }
.versus-row { display: grid; grid-template-columns: 1fr; gap: .4rem 2.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--mat-line); }
.versus-row.head { padding-block: 0 1rem; }
.versus-row.head span { font-weight: 800; font-stretch: var(--wide); font-size: var(--t-lg); }
.versus-row .old { color: var(--on-mat); }
.versus-row .new { color: var(--chalk); font-weight: 600; }
.versus-row.head .old { color: var(--on-mat); }
@media (min-width: 760px) { .versus-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 759px) { .versus-row.head { display: none; } .versus-row .old::before { content: attr(data-label) " : "; font-weight: 700; } .versus-row .new::before { content: attr(data-label) " : "; } }

/* ---------- schedule ---------- */
.sched-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.chip { font: 600 var(--t-sm) var(--font); padding: .45rem .95rem; min-height: 2.5rem; border: 1px solid var(--seam); background: var(--panel); color: var(--ink); border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--tape); }
.chip[aria-pressed="true"] { background: var(--tape); border-color: var(--tape); color: var(--on-tape); }
.sched-week { display: grid; gap: 1px; background: var(--seam); border: 1px solid var(--seam); grid-template-columns: 1fr; }
@media (min-width: 700px) { .sched-week { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sched-week { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .sched-week { grid-template-columns: repeat(7, 1fr); } }
.day { background: var(--panel); padding: 1rem 1rem 1.25rem; min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; align-items: start; }
.day.is-today { box-shadow: inset 0 5px 0 var(--tape); }
.day-name { font-size: 1.15rem; font-weight: 820; font-stretch: var(--wide); letter-spacing: -.01em; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .5rem; margin-bottom: .6rem; }
.today-tag { display: none; font-size: var(--t-xs); font-weight: 700; font-stretch: 100%; color: var(--quiet); }
.day.is-today .today-tag, .board-tag { display: inline; }
.day-list, .today-list { list-style: none; margin: 0; padding: 0; }
.cls { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--seam); }
.cls[hidden] { display: none; }
.cls-time { font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--quiet); }
.cls-name { font-weight: 700; line-height: 1.25; }
.cls-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; font-size: var(--t-xs); color: var(--quiet); }
.cls-empty { padding: .7rem 0; color: var(--quiet); font-size: var(--t-sm); border-top: 1px solid var(--seam); }
.lvl { font-weight: 700; padding-left: .8rem; position: relative; }
.lvl::before { content: ""; position: absolute; left: 0; top: .42em; width: .45rem; height: .45rem; background: currentColor; }
.lvl-fondations { color: var(--lvl-fondations); }
.lvl-tous { color: var(--lvl-tous); }
.lvl-avance { color: var(--lvl-avance); }
.lvl-comp { color: var(--lvl-comp); }
.lvl-enfants, .lvl-ados { color: var(--lvl-jeunes); }
.lvl-ouvert { color: var(--lvl-ouvert); }
.sched-note { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--quiet); }

/* today's classes on the home page */
.board { background: var(--panel); border: 1px solid var(--seam); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.board-day[hidden] { display: none; }
.board-label { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.board-dayname { font-size: 1.6rem; font-weight: 820; font-stretch: var(--wide); letter-spacing: -.02em; }
.board .cls { grid-template-columns: 9.5rem 1fr; column-gap: 1rem; align-items: baseline; padding: .85rem 0; }
.board .cls-time { grid-row: span 2; font-size: 1.15rem; font-weight: 800; font-stretch: 112%; color: var(--tape); }
@media (max-width: 480px) { .board .cls { grid-template-columns: 1fr; } .board .cls-time { grid-row: auto; } }

/* ---------- prices ---------- */
.price-group + .price-group { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.price-group > h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: 1.5rem; }
.plans { display: grid; gap: 1rem; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--panel); border: 1px solid var(--seam); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.plan-featured { border: 2px solid var(--tape); }
.plan-flag { align-self: flex-start; font-size: var(--t-xs); font-weight: 700; color: var(--quiet); }
.plan-name { font-size: 1.3rem; }
.plan-what { color: var(--quiet); font-size: var(--t-sm); }
.plan-price { margin: .75rem 0 1.25rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.plan-price .amt { font-size: 2.9rem; font-weight: 860; font-stretch: var(--wide); letter-spacing: -.03em; line-height: 1; color: var(--tape); font-variant-numeric: tabular-nums; }
.plan-price .per { color: var(--quiet); font-size: var(--t-sm); }
.plan .btn { margin-top: auto; }
.price-note { margin-top: 1.5rem; font-size: var(--t-sm); color: var(--quiet); }

/* ---------- promo ---------- */
.promo-block + .promo-block { margin-top: 3.5rem; }
.promo-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; font-stretch: var(--wide); letter-spacing: -.02em; margin-bottom: 1rem; color: var(--tape); }
.promo-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tape); }
.promo-row { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: .5rem 1.5rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--seam); }
.promo-name { font-weight: 700; }
.promo-was { color: var(--quiet); font-variant-numeric: tabular-nums; }
.promo-now { font-size: 1.8rem; font-weight: 860; font-stretch: var(--wide); line-height: 1; letter-spacing: -.02em; color: var(--tape); }
.promo-save { font-size: var(--t-xs); font-weight: 700; color: var(--save-ink); background: var(--violet-soft); padding: .2rem .5rem; border-radius: var(--r); white-space: nowrap; }
@media (max-width: 760px) {
  .promo-row { grid-template-columns: auto auto 1fr; }
  .promo-name { grid-column: 1 / -1; }
  .promo-save { justify-self: start; }
  .promo-row .btn { grid-column: 1 / -1; }
}

/* ---------- reviews ---------- */
.stars { color: var(--stars); letter-spacing: .1em; }
.rating-big { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.rating-big .num { font-size: clamp(4rem, 3rem + 4vw, 6.5rem); font-weight: 900; font-stretch: var(--wide); letter-spacing: -.04em; line-height: .9; color: var(--tape); }
.rating-big .stars { font-size: 1.35rem; }
.featured-review blockquote { margin: 0; }
.featured-review p { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; max-width: 40rem; color: var(--tape); }
:lang(fr) .featured-review p::before { content: "«\00a0"; } :lang(fr) .featured-review p::after { content: "\00a0»"; }
:lang(en) .featured-review p::before { content: "\201C"; } :lang(en) .featured-review p::after { content: "\201D"; }
.featured-review figcaption { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--quiet); }
.review-list { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
@media (min-width: 760px) { .review-list { grid-template-columns: repeat(2, 1fr); } }
.review { background: var(--panel); padding: 1.5rem; display: grid; gap: .75rem; align-content: space-between; }

/* ---------- coaches ---------- */
.coaches { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.coach { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .coach { grid-template-columns: 18rem 1fr; gap: 3rem; align-items: start; } }
.coach > img, .coach-initials { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.coach-name { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.coach-role { margin-top: .5rem; color: var(--quiet); font-weight: 700; }
.coach-body > * + * { margin-top: 1rem; }
.coach-initials { background: var(--seams), var(--panel); border: 1px solid var(--seam); display: grid; place-items: center; font-size: 4rem; font-weight: 900; font-stretch: var(--wide); color: var(--tape); }
.tale { display: grid; margin: 1.5rem 0 0; border-top: 2px solid var(--tape); max-width: 34rem; }
.tale > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--seam); align-items: baseline; }
.tale dt { font-size: var(--t-xs); color: var(--quiet); font-weight: 600; }
.tale dd { margin: 0; font-weight: 700; }
.coach-mini { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.coach-mini a { text-decoration: none; display: grid; gap: .6rem; }
.coach-mini img { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: .3rem; }
.coach-mini strong { font-size: 1.35rem; font-weight: 820; font-stretch: var(--wide); letter-spacing: -.02em; color: var(--tape); }
.coach-mini a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }
.coach-mini span { color: var(--quiet); font-size: var(--t-sm); }

/* ---------- photos, gallery ---------- */
.photo img { width: 100%; object-fit: cover; }
.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery > img { aspect-ratio: 4/3; }
.gallery .wide { grid-column: span 2; }
/* the wide photo keeps its own shape, reserved from its width/height before it loads
   (an "aspect-ratio: auto" or "height: 100%" here collapsed it to 0 until then) */
.gallery .wide img { height: auto; }

/* ---------- facts, steps, rules ---------- */
.spec { display: grid; gap: 2rem; }
@media (min-width: 760px) { .spec { grid-template-columns: repeat(3, 1fr); } }
.spec h3 { padding-bottom: .75rem; border-bottom: 2px solid var(--tape); margin-bottom: 1rem; }
.spec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.spec .big { font-size: 3.2rem; font-weight: 900; font-stretch: var(--wide); letter-spacing: -.03em; line-height: .95; display: block; color: var(--tape); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; border-top: 2px solid var(--tape); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--seam); }
.steps li::before { content: counter(s); grid-row: span 2; font-size: 2rem; font-weight: 900; font-stretch: var(--wide); line-height: 1; color: var(--tape); }
.steps p { color: var(--quiet); font-size: var(--t-sm); margin-top: .25rem; }
@media (min-width: 860px) { .steps.steps-row { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; border-top: 0; } .steps-row li { border-top: 2px solid var(--tape); border-bottom: 0; } }

.rules { display: grid; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
@media (min-width: 860px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rules > div { background: var(--panel); padding: 1.6rem; }
.rules h3 { margin-bottom: .75rem; }
.rules ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.facts { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.facts li { padding-left: 1.3rem; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 2px; background: var(--tape); }

/* ---------- camps ---------- */
.rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rates th, .rates td { text-align: left; padding: .9rem 0; border-bottom: 1px solid var(--seam); }
.rates thead th { font-size: var(--t-xs); color: var(--quiet); font-weight: 600; border-bottom: 2px solid var(--tape); }
.rates td { font-size: 1.7rem; font-weight: 860; font-stretch: var(--wide); letter-spacing: -.02em; text-align: right; color: var(--tape); }
.rates thead th:last-child { text-align: right; }
.facts-grid { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); margin: 2rem 0 0; background: var(--seam); border: 1px solid var(--seam); }
@media (min-width: 860px) { .facts-grid { grid-template-columns: repeat(4, 1fr); } }
.facts-grid > div { background: var(--panel); padding: 1rem 1.2rem; }
.facts-grid dt { font-size: var(--t-xs); color: var(--quiet); }
.facts-grid dd { margin: .2rem 0 0; font-weight: 700; font-size: var(--t-lg); line-height: 1.25; }
.camp-cards { display: grid; gap: 2rem 1.25rem; }
@media (min-width: 760px) { .camp-cards { grid-template-columns: 1fr 1fr; } }
.camp-card { text-decoration: none; display: grid; gap: .6rem; }
.camp-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: .4rem; }
.camp-card strong { font-size: 2rem; font-weight: 860; font-stretch: var(--wide); letter-spacing: -.02em; line-height: 1; color: var(--tape); }
.camp-card:hover strong { text-decoration: underline; text-decoration-thickness: 3px; }
.camp-card span { color: var(--quiet); }

.faq { border-top: 2px solid var(--tape); }
.faq-item { border-bottom: 1px solid var(--seam); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 700; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: .35rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid var(--tape); border-bottom: 2px solid var(--tape); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-a { padding: 0 0 1.4rem; max-width: 42rem; color: var(--ink); }
.faq-a > * + * { margin-top: .75rem; }
.faq-a a { font-weight: 700; }

/* ---------- contact, trial ---------- */
.contact-lines { display: grid; gap: 1.6rem; margin: 0; }
.contact-lines dt { font-size: var(--t-xs); color: var(--quiet); margin-bottom: .2rem; }
.contact-lines dd { margin: 0; font-size: var(--t-lg); font-weight: 700; line-height: 1.35; }
.map { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--seam); background: var(--panel); }
.callout { background: var(--panel); border: 1px solid var(--seam); padding: 1.5rem 1.6rem; }
.callout > * + * { margin-top: .6rem; }
.gd-widget { background: var(--panel); border: 1px solid var(--seam); padding: clamp(.5rem, .25rem + 1vw, 1.25rem); min-height: 30rem; }
.gd-widget iframe { width: 100%; border: 0; }
.trial-panel { background: var(--panel); border: 2px solid var(--tape); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); position: relative; overflow: hidden; }
.trial-panel > * + * { margin-top: 1rem; }
.trial-panel h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); max-width: 14ch; }

/* ---------- footer: the mat ---------- */
.site-footer { background: var(--mat); color: var(--on-mat); font-size: var(--t-sm); padding-top: 4.5rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; padding-bottom: 3rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1.4fr 1fr 1fr; } }
.footer-brand img { width: 84px; margin-bottom: 1.25rem; }
.footer-brand p { max-width: 24rem; }
.footer-h { font-size: var(--t-sm); font-weight: 700; color: var(--chalk); margin-bottom: .9rem; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; }
.site-footer address { font-style: normal; line-height: 1.9; }
.site-footer a { color: var(--on-mat); text-decoration: none; }
.site-footer a:hover { color: var(--chalk); text-decoration: underline; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid var(--mat-line); padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); font-size: var(--t-xs); color: var(--mat-faint); }
/* keep the copyright line clear of the back-to-top button, which sits over its right end until the page is wider than the wrap by 4rem a side */
.footer-base { padding-right: calc(var(--gutter) + max(0px, 4rem - max(0px, (100vw - var(--wrap)) / 2))); }

@media (max-width: 699px) {
  .program img { aspect-ratio: 16/10; }
  .coach-mini { grid-template-columns: 1fr 1fr; gap: 1.5rem .75rem; }
  .coach-mini strong { font-size: 1.1rem; }
  .tale > div { grid-template-columns: 7rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .has-thread [data-reveal] { clip-path: none; transform: none; }
}

/* ---------- back to top ---------- */
/* Appears once the reader is 10% of the way down (site.js); JS only. */
.to-top {
  position: fixed; right: var(--gutter); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 3rem; height: 3rem; border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--tape); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.to-top::before { content: ""; position: absolute; left: 50%; top: 55%; width: .7rem; height: .7rem; border-left: 2px solid var(--on-tape); border-top: 2px solid var(--on-tape); transform: translate(-50%, -50%) rotate(45deg); }
.to-top.is-on { opacity: 1; visibility: visible; }
body.menu-open .to-top { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }