/* Sorriso BJJ Botany — every inner page (Kids Program, Adults, About, Location, Gallery, Store, Toddlers)
   Loaded after home.css: same tokens, header, footer, buttons and popup.
   PART 1 is the shared kit, prefixed kp-. It was written for the Kids Program page and holds the
   pieces every page reuses (hero, headings, sections, FAQ, call to action) plus that page's own parts.
   PART 2, further down, holds each other page's own styles. */

:root {
  /* youth belt colours: the one place this page uses colour, because the colour is the information */
  --belt-white: #f6f6f4;
  --belt-grey: #9a9c9e;
  --belt-yellow: #f6c40a;
  --belt-orange: #ee7a1c;
  --belt-green: #1f8a4c;
  --belt-blue: #1d50a8;
  --kp-soft: 0 0% 46%;          /* the quieter second sentence in headings */
  --kp-on-dark: 0 0% 80%;       /* body text on black */
}

.kp-main { overflow-x: clip; }
.header { background-color: hsl(var(--background)); }   /* solid on this page: it sits over a black hero */
.kp-section { padding-block: clamp(4rem, 9vw, 8rem); }
.kp-section--tint { background: hsl(var(--card)); border-block: 1px solid hsl(var(--border)); }
.kp-dark { background: #000; color: #fff; }
.nb { white-space: nowrap; }

.kp-eyebrow {
  font-family: var(--font-heading); font-size: .6875rem; line-height: 1.1rem;
  letter-spacing: .25em; text-transform: uppercase;
}
/* Headings are written as two sentences: the first states it, the second lands quieter */
.kp-h2 { font-size: clamp(1.375rem, 3.7vw, 3rem); line-height: 1.14; letter-spacing: -.005em; }
.kp-h2 span { display: block; color: hsl(var(--kp-soft)); text-wrap: balance; }
.kp-dark .kp-h2 span { color: hsl(0 0% 60%); }
.kp-h2 span.nb, .kp-dark .kp-h2 span.nb { display: inline; color: inherit; white-space: nowrap; }   /* keeps a hyphenated word such as Jiu-Jitsu on one line */
.kp-rule { width: 60px; height: 2px; background: hsl(var(--foreground)); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.kp-intro { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.kp-head { display: grid; gap: 1.5rem 4rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kp-head .kp-eyebrow { margin-bottom: 1.125rem; }
@media (min-width: 960px) {
  .kp-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
}

.kp-btn { font-size: .875rem; height: 3.5rem; padding-inline: 1.75rem; }
.kp-btn--light { background: #fff; color: #000; border: 2px solid #fff; }
.kp-btn--light:hover { background: transparent; color: #fff; }
.kp-btn--ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.kp-btn--ghost:hover { background: #fff; color: #000; }
@media (max-width: 479px) { .kp-btn { width: 100%; padding-inline: 1rem; font-size: clamp(.6875rem, 3.5vw, .8125rem); } }

/* ==========================================================================
   Hero: black, type first, the photo breaking out of the bottom edge
   ========================================================================== */
.kp-hero { padding-top: calc(5rem + clamp(2.25rem, 6vw, 5rem)); }
.kp-hero__title {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--title-size); line-height: 1.1; letter-spacing: -.015em;   /* --title-size is set in home.css */
}
@media (min-width: 768px) { .kp-hero__title { line-height: 1.06; } }
.kp-line { display: block; text-wrap: balance; }
.kp-mark { display: inline-block; margin-top: .1em; padding: .03em .22em 0; background: #fff; color: #000; }
/* on a small phone a highlighted line may need two rows: let the highlight wrap word by word */
@media (max-width: 479px) { .kp-mark { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .kp-line:has(.kp-mark) { padding-top: .1em; } }
.kp-hero__row { display: grid; gap: 2rem 4rem; margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.kp-hero__lead { max-width: 40rem; font-size: var(--lead-size); line-height: 1.6; color: hsl(var(--kp-on-dark)); text-wrap: pretty; }
.kp-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-content: start; }
.kp-hero__micro { flex: 1 1 100%; margin-top: .25rem; font-size: .9375rem; color: hsl(var(--kp-on-dark)); }
@media (min-width: 1024px) {
  .kp-hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .kp-hero__actions { max-width: 34rem; justify-content: flex-start; }
}
.kp-hero__band { margin-top: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(to bottom, #000 0 58%, hsl(var(--background)) 58%); }
.kp-hero__photo { position: relative; overflow: hidden; border-radius: var(--radius); background: #1a1a1a; }
.kp-hero__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 58%; }
.kp-hero__photo figcaption {
  position: absolute; left: 0; bottom: 0; padding: .375rem .75rem;
  background: hsl(var(--background) / .94); color: hsl(var(--foreground)); font-size: .8125rem; line-height: 1.2rem;
}
@media (min-width: 768px) { .kp-hero__photo img { aspect-ratio: 2 / 1; } }

@media (prefers-reduced-motion: no-preference) {
  .kp-line { animation: kp-rise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
  .kp-hero__row, .kp-hero__band { animation: kp-fade .9s ease both; animation-delay: 380ms; }
  @keyframes kp-rise { from { opacity: 0; transform: translateY(.4em); } }
  @keyframes kp-fade { from { opacity: 0; } }
}

/* trust strip */
.kp-trust { padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid hsl(var(--border)); }
.kp-trust ul { display: grid; gap: .75rem 2rem; }
.kp-trust li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.kp-trust li::before { content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; margin-top: .4rem; background: hsl(var(--foreground)); }
@media (min-width: 640px) { .kp-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kp-trust ul { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* ==========================================================================
   Why jiu-jitsu
   ========================================================================== */
.kp-benefits { display: grid; gap: 2rem; }
@media (min-width: 640px) { .kp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
@media (min-width: 1024px) { .kp-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; } }
.kp-benefit { padding-top: 1.25rem; border-top: 2px solid hsl(var(--foreground)); }
.kp-benefit h3 { font-size: .9375rem; line-height: 1.4; }
.kp-benefit p { margin-top: .75rem; line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; }

/* comparison: the Sorriso column is a black slab running down the table */
.kp-compare { margin-top: clamp(3.5rem, 7vw, 6rem); }
.kp-compare__title { margin-bottom: 1.5rem; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.35; }
.kp-compare table { width: 100%; text-align: left; font-size: .9375rem; line-height: 1.45; }
.kp-compare th, .kp-compare td { padding: 1rem 1.25rem; vertical-align: top; border-bottom: 1px solid hsl(var(--border)); }
.kp-compare thead th { font-family: var(--font-heading); font-weight: 400; font-size: .6875rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; vertical-align: bottom; border-bottom-color: hsl(var(--foreground)); }
.kp-compare tbody th { width: 34%; font-weight: 600; }
.kp-compare td { color: hsl(var(--muted-foreground)); }
.kp-compare .kp-us { background: #000; color: #fff; font-weight: 600; border-bottom-color: hsl(0 0% 100% / .18); }
.kp-compare thead .kp-us { font-weight: 700; border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: hsl(0 0% 100% / .18); }
.kp-compare tbody tr:last-child .kp-us { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 0; }
.kp-compare tbody tr:last-child th, .kp-compare tbody tr:last-child td:not(.kp-us) { border-bottom: 0; }
@media (max-width: 767px) {
  .kp-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .kp-compare tbody tr { display: grid; gap: .375rem; padding-block: 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
  .kp-compare tbody tr:last-child { border-bottom: 0; }
  .kp-compare tbody th, .kp-compare td { width: auto; padding: 0; border: 0; }
  .kp-compare tbody th { margin-bottom: .375rem; font-size: 1rem; }
  .kp-compare td { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; }
  .kp-compare td::before { content: attr(data-label); }
  .kp-compare td.kp-us, .kp-compare tbody tr:last-child .kp-us { margin-top: .375rem; padding: .625rem .75rem; border-radius: var(--radius); grid-template-columns: 8.75rem 1fr; }
}

/* ==========================================================================
   Age groups: an age ruler from 5 to 15, each group sized by the years it covers
   ========================================================================== */
.kp-ruler, .kp-tabs { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.kp-ruler { margin-bottom: .625rem; }
.kp-ruler span {
  position: relative; padding-bottom: .75rem; text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: .75rem; letter-spacing: .06em; color: hsl(var(--foreground));
}
.kp-ruler span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: .4rem; background: hsl(var(--foreground)); }
.kp-tabs { gap: .375rem; }
.kp-tab {
  grid-column: span var(--years); min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .25rem;
  min-height: 4.5rem; padding: .75rem 1rem; text-align: left;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.kp-tab:hover { border-color: hsl(var(--foreground)); }
.kp-tab strong { font-family: var(--font-heading); font-size: clamp(.6875rem, 1vw, .875rem); line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; }
.kp-tab span { font-size: .8125rem; line-height: 1.2; color: hsl(var(--muted-foreground)); }
.kp-tab[aria-selected="true"] { background: #000; color: #fff; border-color: #000; }
.kp-tab[aria-selected="true"] span { color: hsl(var(--kp-on-dark)); }
@media (max-width: 819px) {
  .kp-ruler { display: none; }
  .kp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-tab { grid-column: auto; }
}

.kp-age {
  display: grid; gap: 2rem 3.5rem; margin-top: .375rem; padding: clamp(1.5rem, 4vw, 3.5rem);
  background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  scroll-margin-top: 6rem;
}
.kp-age[hidden] { display: none; }
.kp-age + .kp-age { margin-top: 1rem; }
.kp-age__years {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.75rem, 11vw, 8.5rem); line-height: .85; letter-spacing: -.03em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground));
}
.kp-age__name { margin-top: clamp(1rem, 2vw, 1.5rem); font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.2; }
.kp-age__name small { display: block; margin-top: .375rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); }
.kp-age__times { display: grid; gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid hsl(var(--border)); }
.kp-age__times dt { font-family: var(--font-heading); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.kp-age__times dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.kp-age__tag { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.kp-age__text { margin-top: 1rem; line-height: 1.7; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.kp-age__learn { margin-top: 1.5rem; }
.kp-age__learn p { font-family: var(--font-heading); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.kp-age__learn ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.kp-age__learn li { padding: .4rem .75rem; font-size: .875rem; line-height: 1.3; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); }
.kp-age .btn { margin-top: 1.75rem; height: 3.25rem; padding-inline: 1.5rem; font-size: .8125rem; }
@media (min-width: 900px) { .kp-age { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
@media (max-width: 479px) { .kp-age .btn { width: 100%; padding-inline: .75rem; font-size: .75rem; } }
@media (prefers-reduced-motion: no-preference) {
  .kp-age.is-entering { animation: kp-panel .45s var(--ease) both; }
  @keyframes kp-panel { from { opacity: 0; transform: translateY(10px); } }
}

/* ==========================================================================
   Inside a class
   ========================================================================== */
/* the photo and the six steps sit side by side under the heading */
.kp-class { display: grid; gap: 2.5rem clamp(2.5rem, 5vw, 5rem); }
.kp-class__photo { margin: 0; overflow: hidden; border-radius: var(--radius); background: hsl(var(--secondary)); }
.kp-class__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(.65); transition: filter .6s var(--ease); }
.kp-class__photo:hover img { filter: none; }      /* same effect as the safety photo: 35% colour, then full colour under the pointer */
.kp-flow { counter-reset: flow; padding: 0; list-style: none; }
.kp-flow li { counter-increment: flow; position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding-bottom: 2rem; }
.kp-flow li:last-child { padding-bottom: 0; }
.kp-flow li::before {
  content: counter(flow); display: grid; place-items: center; width: 3rem; height: 3rem; position: relative; z-index: 1;
  background: #000; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .875rem;
}
.kp-flow li::after { content: ""; position: absolute; left: calc(1.5rem - .5px); top: 3rem; bottom: 0; width: 1px; background: hsl(var(--border)); }
.kp-flow li:last-child::after { display: none; }
.kp-flow strong { display: block; padding-top: .5rem; font-family: var(--font-heading); font-size: .9375rem; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.kp-flow span { display: block; margin-top: .375rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
@media (min-width: 960px) {
  .kp-class { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .kp-class .kp-flow li { padding-bottom: 1.375rem; }
  .kp-class__photo { position: sticky; top: 7rem; }      /* the photo stays beside the steps while they scroll past */
}

/* the statement */
.kp-quote { padding-block: clamp(4.5rem, 11vw, 10rem); }
.kp-quote blockquote { margin: 0; }
.kp-quote p {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 5.4vw, 4.75rem); line-height: 1.12; letter-spacing: -.01em;
}
.kp-quote p span { display: block; margin-top: .2em; color: hsl(0 0% 56%); }

/* ==========================================================================
   Coaches and safety
   ========================================================================== */
.kp-coaches { display: grid; gap: 1rem; }
@media (min-width: 900px) { .kp-coaches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.kp-coach { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.kp-coach__top { display: flex; align-items: center; gap: 1rem; }
.kp-avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 9999px; overflow: hidden;
  background: #000; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; letter-spacing: .06em;
}
.kp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kp-coach h3 { font-size: 1rem; line-height: 1.35; }
.kp-coach__belt { display: inline-block; margin-top: .375rem; padding: .2rem .5rem; background: #000; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; }
.kp-coach__cred { margin-top: 1.5rem; font-weight: 600; line-height: 1.5; }
.kp-coach__text { margin-top: .625rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }

/* How we keep kids safe: a photo tile, four points and a "since 2006" strip */
.kp-safe { display: grid; gap: 1rem; }
.kp-safe__photo { position: relative; aspect-ratio: 6 / 5; margin: 0; overflow: hidden; border-radius: var(--radius); background: #0b0b0b; }
.kp-safe__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; filter: grayscale(.65); transition: filter .6s var(--ease); }
.kp-safe__photo:hover img { filter: none; }
.kp-safe .ad-tile h3 { margin-top: clamp(1.25rem, 2vw, 2rem); }
.kp-safe__since { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.25rem); background: #000; color: #fff; border-radius: var(--radius); }
.kp-safe__since strong { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .9; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px #fff; }
.kp-safe__since span { flex: 1 1 16rem; max-width: 34rem; line-height: 1.6; color: hsl(var(--kp-on-dark)); }
.kp-safe__since b { display: block; margin-bottom: .25rem; font-family: var(--font-heading); font-size: clamp(.875rem, 1.3vw, 1.0625rem); line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
@media (min-width: 640px) {
  .kp-safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-safe__photo, .kp-safe__since { grid-column: 1 / -1; }
  .kp-safe__photo { aspect-ratio: 16 / 9; }      /* wide band: tall enough to keep heads and feet in frame */
}
@media (min-width: 900px) { .kp-safe__photo { aspect-ratio: 2 / 1; } }
@media (min-width: 1200px) {      /* below this the photo tile would be too narrow to hold both the group and the wall logo */
  .kp-safe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  .kp-safe__photo { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 0; }
}

/* ==========================================================================
   Belts: a staircase of real belt colours, each with its black bar and stripes
   ========================================================================== */
.kp-belts { display: grid; gap: 3rem 5rem; }
.kp-belts__text .kp-h2 { margin-top: 1.125rem; }
.kp-belts__text > .kp-h2:first-child { margin-top: 0; }      /* no label above the heading */
.kp-belts__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.7; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.kp-belts__body + .kp-belts__body { margin-top: 1rem; }
.kp-belts__text > .kp-belts__body:first-child { margin-top: 0; }
@media (min-width: 1024px) { .kp-belts { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); align-items: center; } }
@media (min-width: 1024px) { .kp-belts:has(.kp-yb-wrap) { align-items: start; } }      /* the youth ladder is tall, so the text starts level with its first row */

.kp-ladder { display: grid; gap: .625rem; padding: 0; list-style: none; }
.kp-belt {
  position: relative; display: flex; align-items: center; height: clamp(2.75rem, 5vw, 3.75rem);
  width: calc(100% - var(--step, 0) * 0%); margin-left: 0;
  background-color: var(--belt);
  /* stitching */
  background-image: repeating-linear-gradient(to bottom, transparent 0 22%, rgb(0 0 0 / .1) 22% 24%, transparent 24% 49%, rgb(0 0 0 / .1) 49% 51%, transparent 51% 76%, rgb(0 0 0 / .1) 76% 78%, transparent 78% 100%);
  border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 14px -8px rgb(0 0 0 / .35);
  color: #000;
}
.kp-belt--white { box-shadow: inset 0 0 0 1px hsl(0 0% 80%), 0 6px 14px -8px rgb(0 0 0 / .35); }
.kp-belt--dark { color: #fff; }
.kp-belt__name { padding-left: 1rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(.625rem, 1.1vw, .8125rem); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.kp-belt__name small { font-weight: 400; letter-spacing: .08em; }
/* the black rank bar, with tape stripes */
.kp-belt__bar { position: absolute; top: 0; bottom: 0; right: 1.75rem; display: flex; align-items: stretch; justify-content: flex-end; gap: 6px; width: clamp(4.5rem, 9vw, 6.5rem); padding: 0 9px; background: #0a0a0a; }
.kp-belt__bar i { width: 5px; background: #fff; }
@media (min-width: 640px) {
  .kp-belt { width: 70%; margin-left: calc(var(--step) * 6%); }
}
/* Youth belts: five colour groups, three belts in each (white stripe, solid, black stripe) */
.kp-yb { gap: 0; }
.kp-yb__group { display: grid; gap: .75rem 1.5rem; padding-block: 1.125rem; border-top: 1px solid hsl(var(--border)); }
.kp-yb__group:first-child { padding-top: 0; border-top: 0; }
.kp-yb__head { display: flex; align-items: baseline; gap: .75rem; }
.kp-yb__head strong { font-family: var(--font-heading); font-weight: 700; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.kp-yb__head span { font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.kp-yb__belts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 0; list-style: none; }
.kp-yb__belts li { display: grid; gap: .125rem; }
.kp-yb__belt {
  position: relative; display: block; height: 1.875rem; margin-bottom: .375rem; overflow: hidden; border-radius: 2px;
  background: linear-gradient(to bottom, var(--belt) 0 34%, var(--stripe, var(--belt)) 34% 66%, var(--belt) 66%);
  box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 12px -8px rgb(0 0 0 / .4);
}
.kp-yb__belt--white { box-shadow: inset 0 0 0 1px hsl(0 0% 78%), 0 6px 12px -8px rgb(0 0 0 / .4); }
.kp-yb__bar { position: absolute; top: 0; bottom: 0; left: 12%; display: flex; align-items: stretch; gap: 3px; padding: 0 4px; background: #0a0a0a; }
.kp-yb__bar i { width: 3px; background: #fff; }
.kp-yb__name { font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.kp-yb__age { font-size: .75rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.kp-yb__note { margin-top: 1.25rem; padding: 1.25rem 1.5rem; background: hsl(var(--background)); border: 1px solid hsl(var(--foreground)); border-radius: var(--radius); }
.kp-belts__text .kp-yb__note { margin-top: 1.5rem; }
.kp-yb__note strong { display: block; margin-bottom: .5rem; font-family: var(--font-heading); font-size: .6875rem; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.kp-yb__note p { font-size: .9375rem; line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
@media (min-width: 560px) {
  .kp-yb__group { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .kp-yb__head { display: grid; gap: .25rem; padding-top: .375rem; }
  .kp-yb__belts { gap: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .kp-ladder.is-waiting .kp-yb__group { opacity: 0; transform: translateX(-1.5rem); }
  .kp-ladder.is-waiting .kp-yb__bar i { transform: scaleY(0); }
  .kp-yb__group { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--step) * 90ms); }
  .kp-yb__bar i { transform-origin: 50% 100%; transition: transform .35s var(--ease); transition-delay: calc(var(--step) * 90ms + 400ms + var(--n) * 70ms); }
}
@media (prefers-reduced-motion: no-preference) {
  .kp-ladder.is-waiting .kp-belt { opacity: 0; transform: translateX(-1.5rem); }
  .kp-ladder.is-waiting .kp-belt__bar i { transform: scaleY(0); }
  .kp-belt { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--step) * 110ms); }
  .kp-belt__bar i { transform-origin: 50% 100%; transition: transform .35s var(--ease); transition-delay: calc(var(--step) * 110ms + 450ms + var(--n) * 90ms); }
}

/* ==========================================================================
   Parent questions
   ========================================================================== */
.kp-faq { --faq-card: hsl(var(--secondary)); display: grid; gap: 2.5rem 5rem; }
.kp-section--tint .kp-faq { --faq-card: hsl(var(--background)); }      /* white cards on the grey band, grey cards on a white one */
.kp-faq__aside .kp-h2 { text-wrap: balance; }
.kp-faq__label { margin-top: 1rem; font-family: var(--font-heading); font-weight: 700; font-size: .6875rem; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--kp-soft)); }
/* the "call us" card under the heading */
.kp-faq__call { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 1.375rem 1.5rem 1.5rem; background: var(--faq-card); border-radius: var(--radius); }
.kp-faq__call p { line-height: 1.55; }
.kp-faq__call p a { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.kp-faq__tel { display: inline-block; margin-top: .625rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.2; letter-spacing: .01em; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.kp-faq__tel:hover { background-size: 100% 2px; }
.kp-faq__note { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
/* one card per question, with a round plus that turns to a minus when the card is open */
.kp-faq__list { display: grid; gap: .625rem; }
.kp-faq details { background: var(--faq-card); border-radius: var(--radius); }
.kp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; padding: 1.125rem 1.25rem 1.125rem 1.5rem; font-size: .9375rem; font-weight: 700; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; list-style: none; border-radius: var(--radius); }
.kp-faq summary::-webkit-details-marker { display: none; }
.kp-faq summary::after {
  content: ""; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid hsl(0 0% 0% / .14); color: hsl(var(--foreground));
  background: linear-gradient(currentColor, currentColor) 50% 50% / .75rem 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2px .75rem no-repeat, hsl(var(--background));
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.kp-faq summary:hover::after { border-color: hsl(var(--foreground)); }
.kp-faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) 50% 50% / .75rem 2px no-repeat, hsl(var(--foreground)); border-color: hsl(var(--foreground)); color: hsl(var(--background)); transform: rotate(180deg); }
.kp-faq summary:focus-visible { outline: 2px solid hsl(var(--foreground)); outline-offset: 2px; }
.kp-faq details p { max-width: 60rem; padding: 0 4.5rem 1.5rem 1.5rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.kp-faq details p a { color: hsl(var(--foreground)); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 479px) {
  .kp-faq summary { gap: 1rem; min-height: 4.25rem; padding: 1rem 1rem 1rem 1.125rem; font-size: .875rem; }
  .kp-faq summary::after { width: 2.375rem; height: 2.375rem; }
  .kp-faq details p { padding: 0 1.125rem 1.25rem; }
}
@media (min-width: 960px) {
  .kp-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .kp-faq__aside { position: sticky; top: 7rem; }
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */
.kp-cta { padding-block: clamp(4.5rem, 10vw, 9rem); }
.kp-cta .kp-h2 { font-size: clamp(1.5rem, 4.4vw, 3.75rem); }
.kp-cta__lead { max-width: 44rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.65; color: hsl(var(--kp-on-dark)); text-wrap: pretty; }
.kp-steps { counter-reset: s; display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem); padding: 0; list-style: none; background: hsl(0 0% 100% / .22); border: 1px solid hsl(0 0% 100% / .22); border-radius: var(--radius); overflow: hidden; }
.kp-steps li { counter-increment: s; display: flex; gap: 1rem; align-items: baseline; padding: 1.5rem; background: #000; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.kp-steps li::before { content: counter(s); font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1; }
@media (min-width: 800px) { .kp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kp-offer { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid hsl(0 0% 100% / .22); border-radius: var(--radius); line-height: 1.6; color: hsl(var(--kp-on-dark)); }
.kp-offer strong { color: #fff; font-weight: 600; }
.kp-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.kp-cta__call { font-size: 1.0625rem; color: hsl(var(--kp-on-dark)); }
.kp-cta__call a { display: inline-block; padding-block: .75rem; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.kp-cta__local { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid hsl(0 0% 100% / .22); font-size: .875rem; line-height: 1.6; color: hsl(0 0% 62%); }
/* centred version: heading, one line, one button */
.kp-cta--center { padding-block: clamp(4rem, 8vw, 7rem); text-align: center; }
.kp-cta--center .kp-h2 { font-size: clamp(1.375rem, 3.4vw, 2.75rem); letter-spacing: .04em; text-wrap: balance; }
.kp-cta--center .kp-cta__lead { max-width: 40rem; margin-inline: auto; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: 1.0625rem; }
.kp-cta--center .kp-cta__actions { justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.kp-cta--center .kp-cta__local { max-width: 44rem; margin-inline: auto; padding-top: 0; border-top: 0; }
/* a closing section with a photo behind the text: the photo layer (.kp-cta__bg) sits under a black veil */
.kp-cta--photo { position: relative; isolation: isolate; overflow: hidden; }
.kp-cta__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; filter: var(--photo-filter); }
.kp-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / .9); }
.kp-cta--photo .kp-cta__lead { color: hsl(0 0% 90%); }
.kp-cta--photo .kp-cta__local { color: hsl(0 0% 78%); }

/* ==========================================================================
   INNER PAGES: About, Adults, Location, Gallery, Store, Toddlers, Privacy, 404
   Everything above this line is the shared kit (kp-), first written for the
   Kids Program page. Each page below adds its own prefix:
   ab- About · ad- Adults · lo- Location · ga- Gallery · st- Store · to- Toddlers · pg- shared extras
   ========================================================================== */
:root {
  --belt-purple: #5a2d8c;
  --belt-brown: #6a4326;
  --belt-black: #111111;
  --belt-red: #c8102e;           /* the bar on a black belt */
  --medal-gold: #e2b93b;
  --medal-silver: #cfd3d8;
}
.kp-hero--flat { padding-bottom: clamp(3rem, 7vw, 6rem); }
.kp-belt--black .kp-belt__bar { background: var(--belt-red); }
.pg-photo { filter: var(--photo-filter); }
.kp-dark .kp-intro { color: hsl(var(--kp-on-dark)); }
.kp-dark .kp-rule { background: #fff; }
.kp-avatar img { filter: var(--photo-filter); }

/* coach cards on a black section */
.kp-dark .kp-coach { border-color: hsl(0 0% 100% / .24); }
.kp-dark .kp-avatar { box-shadow: 0 0 0 2px #fff; }
.kp-dark .kp-coach__belt { background: #fff; color: #000; }
.kp-dark .kp-coach__text { color: hsl(var(--kp-on-dark)); }
.kp-dark .ad-week__more a { color: #fff; }

/* text links inside the kit */
.pg-link, .ad-week__more a, .ab-reviews a, .ab-strip__note a, .ga-credit a, .lo-card__note a, .st-enquire__main a, .st-enquire__points a, .lo-way a, .pg-prose a {
  font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
}
.pg-link:hover, .ad-week__more a:hover, .ab-reviews a:hover, .ab-strip__note a:hover, .ga-credit a:hover, .lo-card__note a:hover, .st-enquire__main a:hover, .st-enquire__points a:hover, .lo-way a:hover, .pg-prose a:hover { text-decoration-thickness: 2px; }

/* ---- forms (store enquiry, toddlers waitlist) ---- */
.pg-form { display: grid; gap: 1.125rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.pg-form__row { display: grid; gap: 1.125rem; }
@media (min-width: 560px) { .pg-form__row { grid-template-columns: 1fr 1fr; } }
.pg-form label { display: block; margin-bottom: .5rem; font-family: var(--font-heading); font-size: .6875rem; line-height: 1rem; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.pg-form label span { color: hsl(var(--foreground)); }
.pg-form input, .pg-form select, .pg-form textarea {
  display: block; width: 100%; height: 3rem; padding: .625rem .875rem;
  font: inherit; font-size: 1rem; color: hsl(var(--foreground)); background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pg-form select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; background-image: url("../img/icon-chevron-down.svg?v=4cc921e5"); background-repeat: no-repeat; background-position: right .875rem center; }
.pg-form textarea { height: auto; min-height: 7rem; resize: vertical; }
.pg-form textarea::placeholder { color: hsl(0 0% 45%); opacity: 1; }
.pg-form input:focus, .pg-form select:focus, .pg-form textarea:focus { outline: none; border-color: hsl(var(--foreground)); box-shadow: 0 0 0 1px hsl(var(--foreground)); }
.pg-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-form .btn { width: 100%; padding-inline: .75rem; font-size: clamp(.8125rem, 3.7vw, 1rem); }
.pg-form .btn[disabled] { opacity: .5; pointer-events: none; }
.pg-form__status { font-size: .9375rem; line-height: 1.5; font-weight: 600; }
.pg-form__status:empty { display: none; }
.pg-form__status a, .pg-form__small a { text-decoration: underline; text-underline-offset: .2em; }
.pg-form__small { font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.pg-done { padding: clamp(1.5rem, 3.5vw, 2.5rem); border: 2px solid hsl(var(--foreground)); border-radius: var(--radius); align-self: start; }
.pg-done h3 { font-size: 1.125rem; line-height: 1.4; }
.pg-done p { margin-top: .75rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.pg-done a { color: hsl(var(--foreground)); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.pg-form--dark { background: #0d0d0d; border-color: hsl(0 0% 100% / .22); }
.pg-form--dark label, .pg-form--dark .pg-form__small { color: hsl(var(--kp-on-dark)); }
.pg-form--dark label span { color: #fff; }
.pg-form--dark .pg-form__status { color: #fff; }
.kp-dark .pg-done { border-color: #fff; }
.kp-dark .pg-done p { color: hsl(var(--kp-on-dark)); }
.kp-dark .pg-done a { color: #fff; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* hero: the three coaches, Paulo first and widest */
.ab-trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.ab-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: #101010; color: #fff; }
.ab-card--lead { grid-column: 1 / -1; aspect-ratio: 5 / 2; }
.ab-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(.65); transition: transform .7s var(--ease), filter .5s var(--ease); }      /* the three coaches: 35% colour at rest */
.ab-card:hover img, .ab-card:focus-visible img { transform: scale(1.03); filter: none; }      /* full colour under the pointer */
.ab-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .86)); pointer-events: none; }
.ab-card__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: .375rem; padding: clamp(.875rem, 2vw, 1.5rem); }
.ab-card__text small { font-family: var(--font-heading); font-size: .5625rem; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: hsl(0 0% 84%); }
.ab-card__text strong { font-family: var(--font-heading); font-weight: 700; font-size: clamp(.8125rem, 1.7vw, 1.375rem); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; }
.ab-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ab-mono {
  position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 12%;
  background: #0b0b0b repeating-linear-gradient(135deg, transparent 0 22px, rgb(255 255 255 / .045) 22px 23px);
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.5rem, 13vw, 9rem); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .7);
}
@media (min-width: 800px) {
  .ab-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .ab-card, .ab-card--lead { grid-column: auto; aspect-ratio: auto; height: clamp(20rem, 36vw, 33rem); }
}

/* a coach */
.ab-coach { scroll-margin-top: 4rem; }
.ab-coach__grid { display: grid; gap: 2.5rem 5rem; align-items: center; }
@media (min-width: 960px) {
  .ab-coach__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ab-coach__grid--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ab-portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: hsl(var(--secondary)); }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: var(--photo-filter) contrast(1.04); }
@media (max-width: 959px) { .ab-portrait { aspect-ratio: 1 / 1; max-width: 32rem; } }
.ab-name { margin-top: 1rem; font-size: clamp(2.25rem, 11vw, 4.25rem); line-height: .98; letter-spacing: -.02em; }
.ab-name:first-child { margin-top: 0; }      /* no label above the name */
.ab-name span { display: block; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground)); }
.kp-dark .ab-name span { -webkit-text-stroke-color: #fff; }
@media (min-width: 960px) { .ab-name { font-size: clamp(2.75rem, 5.1vw, 5.5rem); } }
.ab-belt { width: 11rem; height: 1rem; margin-top: 1.5rem; border-radius: 2px; background: linear-gradient(90deg, #0a0a0a 0 60%, var(--belt-red) 60% 88%, #0a0a0a 88%); box-shadow: 0 6px 14px -8px rgb(0 0 0 / .5); }
.kp-dark .ab-belt { box-shadow: 0 0 0 1px rgb(255 255 255 / .4); }
.ab-lede { margin-top: 1.75rem; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.ab-coach__body > p:not([class]) { margin-top: 1rem; line-height: 1.7; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.kp-dark .ab-coach__body > p:not([class]) { color: hsl(var(--kp-on-dark)); }
.ab-coach__cta { margin-top: 2rem; height: 3.25rem; padding-inline: 1.5rem; font-size: .8125rem; }

/* Paulo: the nickname as a dictionary entry, on a black panel */
.ab-entry { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 34rem; padding: clamp(1.5rem, 3.5vw, 3rem); background: #000; color: #fff; border-radius: var(--radius); }
/* Paulo's photo fills the card: his face shows in the gap between the year and the word, and a veil keeps both readable */
.ab-entry__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 47% 0; filter: var(--photo-filter); transition: filter .6s var(--ease), transform .8s var(--ease); }
.ab-entry:hover .ab-entry__photo { filter: none; transform: scale(1.02); }
.ab-entry::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(0 0 0 / .82) 0, rgb(0 0 0 / .5) 20%, rgb(0 0 0 / .08) 34%, rgb(0 0 0 / .3) 48%, rgb(0 0 0 / .88) 62%, rgb(0 0 0 / .95) 100%); pointer-events: none; }
.ab-entry__year { font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: .8; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .75); }
.ab-entry__term { font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.ab-entry__say { margin-top: .875rem; font-size: 1rem; line-height: 1.4; color: hsl(var(--kp-on-dark)); }
.ab-entry__say span { margin-left: .625rem; padding-left: .75rem; border-left: 1px solid hsl(0 0% 100% / .4); font-style: italic; }
.ab-entry__defs { counter-reset: def; display: grid; gap: .5rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid hsl(0 0% 100% / .3); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.45; }
.ab-entry__defs li { counter-increment: def; display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; }
.ab-entry__defs li::before { content: counter(def); font-weight: 700; color: hsl(var(--kp-on-dark)); }
/* tablets: a narrower, taller card, shifted so the event logo in the corner of the photo stays out of frame */
@media (min-width: 640px) and (max-width: 959px) { .ab-entry { width: 100%; max-width: 32rem; min-height: 38rem; } .ab-entry__photo { object-position: 60% 0; } }
@media (min-width: 960px) { .ab-entry { align-self: stretch; min-height: 34rem; } }


.ab-facts { display: grid; margin: 2rem 0 0; border-top: 1px solid hsl(var(--foreground)); }
.ab-facts > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid hsl(var(--border)); }
.ab-facts dt { padding-top: .2rem; font-family: var(--font-heading); font-size: .625rem; line-height: 1.2rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.ab-facts dd { margin: 0; font-weight: 600; line-height: 1.5; }
@media (max-width: 479px) { .ab-facts > div { grid-template-columns: 1fr; gap: .125rem; } }

/* Lineage: the portrait wall. Seven tall portraits, teacher to student, left to right.
   Wide screens: the portrait that is hovered, tapped or focused opens (Paulo's until another is chosen).
   Phones and small tablets: each portrait is a row with its text showing. */
.ab-wall { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid hsl(0 0% 100% / .22); }
.ab-wp { position: relative; display: grid; grid-template-columns: clamp(5rem, 24vw, 7.5rem) minmax(0, 1fr); gap: clamp(1rem, 4vw, 1.75rem); align-items: center; padding: 1rem 0; border-bottom: 1px solid hsl(0 0% 100% / .22); }
.ab-wp img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; }
.ab-wp img { object-fit: cover; object-position: 50% 15%; filter: var(--photo-filter); }
/* no photo yet: the initials, outlined, on a woven black tile */
.ab-wp__no { position: absolute; top: 1.375rem; left: .375rem; z-index: 2; padding: .28rem .45rem; background: #fff; color: #000; font-family: var(--font-heading); font-weight: 700; font-size: .625rem; line-height: 1; letter-spacing: .1em; }
.ab-wp__side, .ab-wp__rule { display: none; }
.ab-wp h3 { font-size: clamp(.9375rem, 3.6vw, 1.125rem); line-height: 1.25; letter-spacing: .03em; text-wrap: balance; }
.ab-wp h3 span { color: hsl(0 0% 62%); white-space: nowrap; }
.ab-wp__meta { margin-top: .5rem; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.ab-wp__text { margin-top: .5rem; font-size: .9375rem; line-height: 1.55; color: hsl(0 0% 82%); text-wrap: pretty; }
.ab-wp__more { display: inline-block; margin-top: .75rem; font-family: var(--font-heading); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: underline; text-underline-offset: .35em; }
.ab-wp__more:hover { text-decoration-thickness: 2px; }
.ab-wp:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ab-wall__foot { display: none; }
.ab-lin + .kp-dark { border-top: 1px solid hsl(0 0% 100% / .22); }

@media (min-width: 900px) {
  .ab-wall { display: flex; gap: 3px; height: clamp(27rem, 42vw, 35rem); border-top: 0; }
  .ab-wp { display: block; flex: 1 1 0; min-width: 0; padding: 0; overflow: hidden; border-bottom: 0; background: #0b0b0b; cursor: pointer; transition: flex-grow .6s var(--ease); }
  .ab-wp img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .ab-wp img { filter: grayscale(1) brightness(.72) contrast(1.08); transition: filter .6s var(--ease); }
  .ab-wp::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .92)); pointer-events: none; }
  .ab-wp__no { top: 1rem; left: 1rem; }
  .ab-wp__side { display: block; position: absolute; left: 1rem; bottom: 1.25rem; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-heading); font-weight: 700; font-size: clamp(.625rem, .95vw, .8125rem); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: opacity .3s var(--ease); }
  .ab-wp__info { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; width: 16.5rem; opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .35s; }
  .ab-wp__rule { display: block; width: 3rem; height: 3px; margin-bottom: 1rem; background: #fff; }
  .ab-wp h3 { font-size: clamp(1rem, 1.6vw, 1.375rem); line-height: 1.2; }
  .ab-wp:focus-visible { outline-offset: -3px; }
  .ab-wall__foot { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.25rem; font-family: var(--font-heading); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(0 0% 70%); }

  /* open: under the pointer, tapped, focused with the keyboard, or Paulo while nothing else is chosen */
  .ab-wp:hover, .ab-wp:focus-within, .ab-wp.is-open,
  .ab-wall:not(:hover):not(:focus-within):not(.has-open) .ab-wp--now { flex-grow: 3.6; }
  .ab-wp:hover img, .ab-wp:focus-within img, .ab-wp.is-open img,
  .ab-wall:not(:hover):not(:focus-within):not(.has-open) .ab-wp--now img { filter: none; }
  .ab-wp:hover .ab-wp__side, .ab-wp:focus-within .ab-wp__side, .ab-wp.is-open .ab-wp__side,
  .ab-wall:not(:hover):not(:focus-within):not(.has-open) .ab-wp--now .ab-wp__side { opacity: 0; }
  .ab-wp:hover .ab-wp__info, .ab-wp:focus-within .ab-wp__info, .ab-wp.is-open .ab-wp__info,
  .ab-wall:not(:hover):not(:focus-within):not(.has-open) .ab-wp--now .ab-wp__info { opacity: 1; visibility: visible; transform: none; transition-delay: .2s, .2s, 0s; }
}
@media (min-width: 1280px) { .ab-wp__info { width: 23rem; } }
/* shown once, when the wall scrolls into view: the portraits rise in order, oldest first */
@media (prefers-reduced-motion: no-preference) {
  .ab-wp { transition: flex-grow .6s var(--ease), opacity .6s var(--ease) calc(var(--i) * 90ms), transform .6s var(--ease) calc(var(--i) * 90ms); }
  .is-waiting .ab-wp { opacity: 0; transform: translateY(1.5rem); }
}

/* Spiro: photo, record, strip */
.ab-shot { overflow: hidden; border-radius: var(--radius); }
.ab-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); filter: var(--photo-filter); }
.ab-shot figcaption, .ab-strip__note, .ga-credit { margin-top: .75rem; font-size: .8125rem; line-height: 1.5; color: hsl(0 0% 66%); }
.ab-record { margin-top: clamp(3rem, 6vw, 5rem); }
.ab-record__title { margin-bottom: 1rem; font-size: .75rem; line-height: 1.4; letter-spacing: .2em; font-weight: 400; }
.ab-record table { width: 100%; text-align: left; font-size: 1rem; line-height: 1.45; }
.ab-record thead th { padding: .75rem 1rem .75rem 0; font-family: var(--font-heading); font-weight: 400; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(0 0% 66%); border-bottom: 1px solid #fff; }
.ab-record tbody th, .ab-record td { padding: 1.125rem 1rem 1.125rem 0; vertical-align: middle; border-bottom: 1px solid hsl(0 0% 100% / .2); }
.ab-record tbody th { font-weight: 600; }
.ab-record td:first-child { width: 6rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; letter-spacing: .02em; }
.ab-record td:nth-child(3) { color: hsl(var(--kp-on-dark)); }
.ab-record td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.ab-medal { display: inline-block; padding: .3rem .7rem; font-family: var(--font-heading); font-weight: 700; font-size: .625rem; line-height: 1rem; letter-spacing: .14em; text-transform: uppercase; color: #000; border-radius: 2px; }
.ab-medal--gold { background: var(--medal-gold); }
.ab-medal--silver { background: var(--medal-silver); }
@media (max-width: 767px) {
  .ab-record thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ab-record tbody tr { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; padding-block: 1.125rem; border-bottom: 1px solid hsl(0 0% 100% / .2); }
  .ab-record tbody th, .ab-record td { padding: 0; border: 0; width: auto; }
  .ab-record td:first-child { width: auto; }
  .ab-record td:last-child { text-align: right; }
  .ab-record tbody th { grid-column: 1 / -1; order: 2; }
  .ab-record td:nth-child(3) { grid-column: 1 / -1; order: 3; font-size: .9375rem; }
}
.ab-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.ab-strip figure { overflow: hidden; border-radius: var(--radius); background: #111; }
.ab-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: var(--photo-filter); transition: filter .5s var(--ease), transform .7s var(--ease); }
.ab-strip figure:hover img { filter: grayscale(0); transform: scale(1.03); }
.ab-strip__note a, .ga-credit a { color: #fff; }
@media (max-width: 559px) { .ab-strip { grid-template-columns: 1fr 1fr; } .ab-strip figure:first-child { grid-column: 1 / -1; } }

/* values (sits under the kp-quote statement) */
/* the three values: the Adults tiles, in black. Under the pointer a tile turns white. */
.ab-values { margin-top: clamp(3rem, 6vw, 5rem); }
.kp-quote .ab-values p { margin-top: .75rem; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.65; letter-spacing: 0; text-transform: none; color: hsl(var(--kp-on-dark)); text-wrap: pretty; }
.ad-tile.ad-tile--dark { background: #000; color: #fff; border-color: hsl(0 0% 100% / .24); }
.ad-tile.ad-tile--dark .ad-tile__icon { background: #fff; color: #000; }
.ad-tile.ad-tile--dark:hover { background: #fff; color: #000; border-color: #fff; }
.kp-quote .ad-tile.ad-tile--dark:hover p { color: hsl(0 0% 30%); }
.ad-tile.ad-tile--dark:hover .ad-tile__icon { background: #000; color: #fff; }

/* story timeline */
.ab-time { display: grid; gap: 2.5rem 2rem; padding: 0; list-style: none; }
.ab-time li { position: relative; padding-top: 1.75rem; border-top: 2px solid hsl(var(--foreground)); }
.ab-time li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; background: hsl(var(--foreground)); }
.ab-time__year { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground)); }
.ab-time h3 { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.4; }
.ab-time li > p:last-child { margin-top: .625rem; line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
@media (min-width: 640px) { .ab-time { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-time { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .ab-time li { padding-right: 2rem; } }

/* academies */
.ab-places { display: grid; gap: 1rem; }
@media (min-width: 800px) { .ab-places { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.ab-place { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: border-color .2s var(--ease); }
.ab-place:hover { border-color: hsl(var(--foreground)); }
.ab-place--here { background: #000; color: #fff; border-color: #000; }
.ab-place__tag { font-family: var(--font-heading); font-size: .625rem; line-height: 1rem; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.ab-place h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.2; }
.ab-place p { line-height: 1.55; color: hsl(var(--muted-foreground)); }
.ab-place--here .ab-place__tag, .ab-place--here p { color: hsl(var(--kp-on-dark)); }
.ab-place__more { margin-top: auto; padding-top: 1rem; font-family: var(--font-heading); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .35em; }
.ab-reviews { margin-top: 2rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.ab-reviews a { color: hsl(var(--foreground)); }

/* ==========================================================================
   ADULTS
   ========================================================================== */
/* the hero fills the screen: 100vh, or 100svh where supported so phone toolbars do not cut it off */
.ad-hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.ad-hero__inner { position: relative; z-index: 1; order: 1; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.ad-hero__inner .kp-hero__lead { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ad-hero__inner .kp-hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ad-hero__photo { position: relative; order: 2; flex: 1 1 auto; display: grid; margin: 0; }   /* grows to fill a tall screen */
.ad-hero__photo picture { display: grid; }
.ad-hero__photo img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; filter: none; }      /* the one photo shown in full colour */
@media (min-width: 640px) { .ad-hero__photo img { aspect-ratio: 16 / 11; } }
/* Kids Program hero: a wide group photo, so it keeps its shape on phones and stays centred on desktop */
.ad-hero--kids .ad-hero__photo img { aspect-ratio: 3 / 2; object-position: 50% 55%; }
.ad-hero__photo figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: .375rem .75rem; background: rgb(0 0 0 / .72); color: hsl(0 0% 86%); font-size: .75rem; line-height: 1.2rem; text-align: right; }
@media (min-width: 1024px) {
  .ad-hero__inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }   /* text sits in the vertical middle */
  .ad-hero__inner > * { max-width: 47%; }
  .ad-hero__inner .kp-hero__title { max-width: none; }
  .ad-hero .kp-mark { white-space: nowrap; }
  .ad-hero__inner .kp-hero__lead { max-width: min(36rem, 45%); }
  /* the photo is the hero's background: it starts a little in from the left so the coach stands clear of the
     heading, runs off the right edge, and fades into the black behind the text */
  .ad-hero__photo { position: absolute; top: 5rem; right: 0; bottom: 0; left: 24%; order: 0; display: block; overflow: hidden; }
  .ad-hero__photo picture { display: block; height: 100%; }
  .ad-hero__photo img { width: 92vw; max-width: none; height: 100%; aspect-ratio: auto; object-position: 0 18%; -webkit-mask-image: linear-gradient(to right, transparent 3%, rgb(0 0 0 / .3) 24%, #000 40%); mask-image: linear-gradient(to right, transparent 3%, rgb(0 0 0 / .3) 24%, #000 40%); }
  .ad-hero--kids .ad-hero__photo { left: auto; width: 56%; }
  .ad-hero--kids .ad-hero__photo img { width: 100%; object-position: 100% 30%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36%); mask-image: linear-gradient(to right, transparent 0, #000 36%); }
  .ad-hero__photo figcaption { bottom: 4.5rem; }
}

/* why train: six tiles */
.ad-tiles { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ad-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ad-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.ad-tile {
  position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.75rem, 2.8vw, 2.75rem); overflow: hidden;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ad-tile__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background: #000; color: #fff; border-radius: calc(var(--radius) - 2px); transition: background-color .3s var(--ease), color .3s var(--ease); }
.ad-tile h3 { margin-top: clamp(1.75rem, 3vw, 2.75rem); font-size: clamp(.9375rem, 1.15vw, 1.0625rem); line-height: 1.35; text-wrap: balance; }
.ad-tile p { margin-top: .75rem; line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; transition: color .3s var(--ease); }
/* every tile is light by default and turns black under the pointer */
.ad-tile:hover { background: #000; color: #fff; border-color: #000; cursor: pointer; }
.ad-tile:hover p { color: hsl(var(--kp-on-dark)); }
.ad-tile:hover .ad-tile__icon { background: #fff; color: #000; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ad-tile:hover { transform: translateY(-4px); } }

/* the Botany timetable, copied from the homepage by the build */
.ad-timetable .timetable { max-width: none; margin-top: 0; }
.ad-timetable .timetable__heading { margin-bottom: 1.5rem; }
.ad-timetable__note { max-width: 46rem; margin: 0 auto 2rem; text-align: center; font-size: 1.0625rem; line-height: 1.6; color: hsl(var(--muted-foreground)); text-wrap: balance; }

/* starting out: two columns, two rows. The photo is shown whole (never cropped), and on wide screens
   the list beside it uses smaller type and equal rows so it fits the photo's height */
/* Coach cards: under the pointer the border lights up and the photo turns to full colour */
.ad-coach { cursor: pointer; transition: border-color .3s var(--ease); }
.ad-coach .kp-avatar img { transition: filter .5s var(--ease); }
.ad-coach:hover .kp-avatar img { filter: none; }
.kp-dark .ad-coach:hover { border-color: #fff; }
/* Kids Program: the same band, followed by the statement */
.kp-coaches-band + .kp-dark { border-top: 1px solid hsl(0 0% 100% / .22); }      /* a thin line where two black sections meet */
.ad-coaches__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
/* FAQ heading: a touch smaller beside the questions so "BJJ Beginners" stays on one line */
@media (min-width: 960px) { .ad-faq .kp-h2 { font-size: clamp(1.625rem, 2.75vw, 3rem); } }
.ad-start { display: grid; gap: 1.5rem; }
.ad-start .kp-intro { max-width: 44rem; }
.ad-start__photo { margin: .5rem 0 0; overflow: hidden; border-radius: var(--radius); background: hsl(var(--secondary)); }
.ad-start__photo img { width: 100%; height: auto; aspect-ratio: 1310 / 873; object-fit: cover; filter: grayscale(.65); transition: filter .5s var(--ease); }      /* 35% colour at rest */
.ad-start__photo:hover img { filter: none; }      /* full colour under the pointer */
.ad-start .pg-ticks { border-top: 0; }
.ad-start .pg-ticks li:last-child { border-bottom: 0; }
@media (min-width: 960px) {
  .ad-start { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem) 4rem; }
  .ad-start .kp-h2, .ad-start .kp-intro { align-self: end; }
  .ad-start__photo { margin-top: 0; align-self: center; }   /* centred beside the list when the list is taller */
  .ad-start .pg-ticks li { grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: center; padding: .5rem 0; }
  .ad-start .pg-ticks svg { width: 1.125rem; height: 1.125rem; padding: .5625rem; }
  .ad-start .pg-ticks strong { font-size: clamp(.9375rem, 1.05vw, 1.125rem); line-height: 1.3; }
  .ad-start .pg-ticks span { margin-top: .1875rem; font-size: clamp(.8125rem, .9vw, 1rem); line-height: 1.5; }
}
/* from 1300px the list fits the photo exactly: equal rows, same height */
@media (min-width: 1300px) { .ad-start .pg-ticks { grid-auto-rows: 1fr; align-content: stretch; } }

/* the comparison sits directly above the black closing section: a hairline keeps the two apart */
.ad-versus + .kp-cta { border-top: 1px solid hsl(0 0% 100% / .22); }
.ad-comp .kp-h2 { text-wrap: balance; }

/* comparison table on the black band: the Sorriso column becomes a white slab */
.kp-compare--dark { margin-top: 0; }
.kp-compare--dark table { font-size: 1rem; }
.kp-compare--dark th, .kp-compare--dark td { padding: 1.25rem 1.5rem; border-bottom-color: hsl(0 0% 100% / .18); }
.kp-compare--dark thead th { color: hsl(var(--kp-on-dark)); border-bottom-color: hsl(0 0% 100% / .5); }
.kp-compare--dark tbody th { color: #fff; }
.kp-compare--dark td { color: hsl(0 0% 64%); }
.kp-compare--dark .kp-us, .kp-compare--dark thead .kp-us { background: #fff; color: #000; font-weight: 700; border-bottom-color: hsl(0 0% 0% / .12); }
.kp-compare--dark tbody .kp-us { font-size: 1.0625rem; }
@media (min-width: 768px) {
  .kp-compare--dark thead .kp-us { padding-top: 1.5rem; }
  .kp-compare--dark tbody tr:last-child .kp-us { padding-bottom: 1.75rem; }
  .kp-compare--dark tbody tr { transition: background-color .2s var(--ease); }
  .kp-compare--dark tbody tr:hover { background: hsl(0 0% 100% / .06); }
}
@media (max-width: 767px) {
  .kp-compare--dark th, .kp-compare--dark td { padding: 0; }
  .kp-compare--dark tbody tr { border-bottom-color: hsl(0 0% 100% / .18); }
  .kp-compare--dark tbody th { font-size: 1.0625rem; }
  .kp-compare--dark td.kp-us, .kp-compare--dark tbody tr:last-child .kp-us { padding: .75rem .875rem; font-size: 1rem; }
}

/* class types under the timetable: five tiles, three on the first row and two on the second */
.ad-tiles--five { margin-top: clamp(2.5rem, 5vw, 4rem); }
.kp-section--tint .ad-tile:not(:hover) { background: hsl(var(--background)); }
@media (min-width: 640px) and (max-width: 1023px) { .ad-tiles--five .ad-tile:last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .ad-tiles--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ad-tiles--five .ad-tile { grid-column: span 2; }
  .ad-tiles--five .ad-tile:nth-child(n+4) { grid-column: span 3; }
}
.ad-week__more { margin-top: 2rem; }
.ad-week__intro { display: grid; gap: 1rem; }

/* competition band */
.ad-comp__grid { display: grid; gap: 2.5rem 5rem; align-items: center; }
@media (min-width: 960px) {
  .ad-comp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 4.5vw, 4.5rem); }
  .ad-comp__main { order: -1; }      /* photo on the left, words on the right; on phones the heading still comes first */
}
.ad-comp__text .kp-intro { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ad-comp__main { margin: 0; overflow: hidden; border-radius: var(--radius); }
.ad-comp__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; filter: grayscale(.65); transition: filter .5s var(--ease); }      /* 35% colour at rest */
.ad-comp__main:hover img { filter: none; }      /* full colour under the pointer */

/* ==========================================================================
   LOCATION
   ========================================================================== */
.lo-hero { display: grid; padding-top: 5rem; }
.lo-hero__text { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(2.25rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem) clamp(2.5rem, 6vw, 5rem) 1rem; }
/* our sign on Town Centre Drive sits behind the address, under a black veil that is lighter towards the sign */
.lo-hero__text::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/sorriso-bjj-botany-town-centre-entrance.webp?v=fc020795") 64% 50% / cover no-repeat; filter: grayscale(.65); transition: filter .5s var(--ease); }      /* 35% colour at rest */
.lo-hero__text::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .9), rgb(0 0 0 / .78) 50%, rgb(0 0 0 / .6)); }
.lo-hero__text:hover::before { filter: none; }      /* full colour under the pointer */
.lo-hero__text > * { max-width: 100%; }
.lo-hero__address { align-self: stretch; }
@media (min-width: 1400px) { .lo-hero__text { padding-left: calc(5vw + 1rem); } }
.lo-hero__title { font-size: var(--title-size); line-height: 1.08; letter-spacing: -.015em; }
.lo-hero__kicker { display: block; margin-bottom: clamp(1rem, 2vw, 1.75rem); font-size: clamp(1.125rem, 2.1vw, 1.75rem); line-height: 1.25; letter-spacing: .02em; color: #fff; text-wrap: balance; }      /* "How to find us in Botany Town Centre": large and white, above the address */
.lo-hero__text .kp-hero__lead { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.lo-hero__text .kp-hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.lo-hero__address { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid hsl(0 0% 100% / .22); font-style: normal; font-size: .9375rem; line-height: 1.6; color: hsl(var(--kp-on-dark)); }
.lo-hero__map { min-height: 22rem; background: #1a1a1a; }
.lo-hero__map iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; filter: grayscale(1) contrast(1.05); }
@media (min-width: 1100px) {
  .lo-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: min(48rem, 100svh); }
}

/* car park to mat */
.lo-route { counter-reset: route; display: grid; gap: 1rem; padding: 0; list-style: none; }
/* each step is a tile from the Adults page kit (.ad-tile), with its step number outlined in the top corner */
.lo-route li { counter-increment: route; }
.lo-route li::before { content: counter(route); position: absolute; top: clamp(1.5rem, 2.4vw, 2.25rem); right: clamp(1.5rem, 2.4vw, 2.25rem); font-family: var(--font-heading); font-weight: 700; font-size: 3.25rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px hsl(0 0% 0% / .3); transition: -webkit-text-stroke-color .3s var(--ease); }
.lo-route li:hover::before { -webkit-text-stroke-color: hsl(0 0% 100% / .6); }
@media (min-width: 640px) { .lo-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lo-route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

/* contact + class times */
.lo-details { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .lo-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lo-card { padding: clamp(1.5rem, 3.5vw, 3rem); background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.lo-card__title { margin-top: 1rem; font-size: clamp(1.125rem, 2.2vw, 1.75rem); line-height: 1.25; }
.lo-list { display: grid; margin: 1.75rem 0 0; border-top: 1px solid hsl(var(--foreground)); }
.lo-list > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid hsl(var(--border)); }
.lo-list dt { padding-top: .2rem; font-family: var(--font-heading); font-size: .625rem; line-height: 1.2rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.lo-list dd { margin: 0; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.lo-list a:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 479px) { .lo-list > div { grid-template-columns: 1fr; gap: .125rem; } }
.lo-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.lo-card__actions .btn { height: 3rem; padding-inline: 1.25rem; font-size: .75rem; }
@media (max-width: 479px) { .lo-card__actions .btn { width: 100%; } }
.lo-hours { width: 100%; margin-top: 1.75rem; text-align: left; border-top: 1px solid hsl(var(--foreground)); }
.lo-hours th, .lo-hours td { padding: .8125rem .75rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; line-height: 1.5; }
.lo-hours th { width: 8rem; padding-left: 0; font-weight: 600; }
.lo-hours td { padding-right: 0; font-variant-numeric: tabular-nums; }
.lo-hours .is-off td { color: hsl(var(--muted-foreground)); }
.lo-hours .is-today th, .lo-hours .is-today td { background: #000; color: #fff; }
.lo-hours .is-today th { padding-left: .75rem; }
.lo-hours .is-today th::after { content: "Today"; display: block; margin-top: .125rem; font-family: var(--font-heading); font-size: .5625rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--kp-on-dark)); }
.lo-card__note { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.lo-card__note a { color: hsl(var(--foreground)); }
@media (max-width: 479px) { .lo-hours th { width: 6.5rem; } .lo-hours td { font-size: .9375rem; } }
.lo-card__title:first-child { margin-top: 0; }      /* no label above the card heading */
/* the contact and class-times band is black: dark cards, light rules and text, and today's row picked out in white */
.lo-details-band .lo-card { background: #0d0d0d; border-color: hsl(0 0% 100% / .22); color: #fff; }
.lo-details-band .lo-list, .lo-details-band .lo-hours { border-top-color: hsl(0 0% 100% / .6); }
.lo-details-band .lo-list > div, .lo-details-band .lo-hours th, .lo-details-band .lo-hours td { border-bottom-color: hsl(0 0% 100% / .18); }
.lo-details-band .lo-list dt, .lo-details-band .lo-hours .is-off td, .lo-details-band .lo-card__note { color: hsl(0 0% 72%); }
.lo-details-band .lo-card__note a { color: #fff; }
.lo-details-band .lo-hours .is-today th, .lo-details-band .lo-hours .is-today td { background: #fff; color: #000; }
.lo-details-band .lo-hours .is-today th::after { color: hsl(0 0% 30%); }
.lo-details-band .btn--primary { background-color: #fff; color: #000; border-color: #fff; }
.lo-details-band .btn--primary:hover { background-color: transparent; color: #fff; }
.lo-details-band .btn--outline { background-color: transparent; color: #fff; border-color: #fff; }
.lo-details-band .btn--outline:hover { background-color: #fff; color: #000; }

/* getting here */
.lo-ways { display: grid; gap: 1rem; }
@media (min-width: 900px) { .lo-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.lo-way { padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.lo-way h3 { font-size: 1rem; line-height: 1.35; transition: color .3s var(--ease); }
.lo-way p { margin-top: .875rem; line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; transition: color .3s var(--ease); }
.lo-way a { color: inherit; }
/* all three cards are light and turn black under the pointer, like the tiles on the Adults page */
.lo-way:hover { background: #000; color: #fff; border-color: #000; cursor: pointer; }
.lo-way:hover p { color: hsl(var(--kp-on-dark)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .lo-way:hover { transform: translateY(-4px); } }
.lo-photo { margin-top: clamp(2.5rem, 5vw, 4rem); }
.lo-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 768px) { .lo-photo img { aspect-ratio: 21 / 9; object-position: 50% 54%; } }      /* keeps the wall logo and the whole group in the wide crop */

/* suburbs */
.lo-near { display: grid; gap: 2rem 5rem; }
@media (min-width: 960px) { .lo-near { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.lo-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.lo-chips li { padding: .5rem .875rem; font-size: .9375rem; font-weight: 500; line-height: 1.3; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); }
/* the suburbs band is black: light intro text and outlined chips */
.lo-near-band .kp-intro { color: hsl(var(--kp-on-dark)); }
.lo-near-band .lo-chips li { background: transparent; color: #fff; border-color: hsl(0 0% 100% / .28); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.ga-hero { padding-bottom: clamp(3rem, 7vw, 6rem); }
.ga-jump { display: grid; gap: .5rem; align-content: end; min-width: min(100%, 22rem); }
.ga-jump a { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.5rem; padding: .75rem 1.25rem; border: 1px solid hsl(0 0% 100% / .35); border-radius: calc(var(--radius) - 2px); font-family: var(--font-heading); font-size: .6875rem; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease); }
.ga-jump a span { font-weight: 700; font-size: 1rem; }
.ga-jump a:hover { background: #fff; color: #000; }
.ga-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ga-head .kp-eyebrow { margin-bottom: 1.125rem; }
.ga-count { flex: 0 0 auto; font-family: var(--font-heading); font-weight: 700; font-size: clamp(3rem, 9vw, 7.5rem); line-height: .8; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground)); }
.kp-dark .ga-count { -webkit-text-stroke-color: #fff; }
.ga-lead { max-width: 44rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: hsl(var(--kp-on-dark)); }
.ga-grid { display: grid; gap: .5rem; }
.ga-item { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius); background: #141414; cursor: zoom-in; }
.ga-item img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: filter .5s var(--ease), transform .7s var(--ease); }
.ga-item:hover img, .ga-item:focus-visible img { filter: grayscale(0); transform: scale(1.03); }
.ga-item:focus-visible { outline: 2px solid hsl(var(--foreground)); outline-offset: 2px; }
.kp-dark .ga-item:focus-visible { outline-color: #fff; }
.ga-item__label { position: absolute; left: .625rem; bottom: .625rem; padding: .3rem .625rem; background: #fff; color: #000; font-family: var(--font-heading); font-weight: 700; font-size: .5625rem; line-height: 1rem; letter-spacing: .14em; text-transform: uppercase; }
@media (hover: hover) {
  .ga-item__label { opacity: 0; transform: translateY(.375rem); transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .ga-item:hover .ga-item__label, .ga-item:focus-visible .ga-item__label { opacity: 1; transform: none; }
}
.ga-grid--pair .ga-item { aspect-ratio: 3 / 2; }
@media (min-width: 800px) { .ga-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.ga-grid--story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ga-grid--story .ga-item--big { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .ga-grid--story { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: .75rem; }
  .ga-grid--story .ga-item { grid-column: span 4; aspect-ratio: 3 / 2; }
  .ga-grid--story .ga-item--big { grid-column: span 8; grid-row: span 2; aspect-ratio: auto; }
  .ga-grid--story .ga-item--q { grid-column: span 3; }
  .ga-grid--story .ga-item--left { grid-column: 1 / span 4; }
  .ga-grid--story .ga-item--end { grid-column: 5 / span 8; }
}
.ga-more { display: grid; gap: 2rem 5rem; }
@media (min-width: 960px) { .ga-more { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; } }
.ga-more__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ga-more__links .btn { height: 3rem; padding-inline: 1.25rem; font-size: .75rem; }
@media (max-width: 479px) { .ga-more__links .btn { width: 100%; } }

/* full-screen viewer */
.ga-view { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .96); color: #fff; }
.ga-view::backdrop { background: #000; }
.ga-view[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.ga-view__figure { grid-column: 2; display: grid; justify-items: center; gap: 1rem; margin: 0; padding: 4rem 0 1.5rem; }
.ga-view__figure img { max-width: 100%; max-height: calc(100dvh - 11rem); width: auto; height: auto; object-fit: contain; border-radius: 2px; }
.ga-view figcaption { display: grid; gap: .25rem; max-width: 44rem; padding-inline: 1rem; text-align: center; font-size: 1rem; line-height: 1.5; }
.ga-view figcaption small { font-family: var(--font-heading); font-size: .5625rem; line-height: 1.2rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(0 0% 70%); }
.ga-view button { display: grid; place-items: center; width: 3rem; height: 3rem; color: #fff; border: 1px solid hsl(0 0% 100% / .4); border-radius: 9999px; background: rgb(0 0 0 / .5); transition: background-color .2s var(--ease), color .2s var(--ease); }
.ga-view button:hover { background: #fff; color: #000; }
.ga-view button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ga-view__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.ga-view__nav { margin-inline: 1rem; }
.ga-view__nav--prev { grid-column: 1; grid-row: 1; }
.ga-view__nav--next { grid-column: 3; grid-row: 1; }
@media (max-width: 699px) {
  .ga-view[open] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .ga-view__figure { grid-column: 1 / -1; grid-row: 1; padding: 4.5rem 0 1rem; align-self: center; }
  .ga-view__figure img { max-height: calc(100dvh - 15rem); }
  .ga-view__nav { grid-row: 2; margin: 0 1rem 1.25rem; }
  .ga-view__nav--prev { grid-column: 1; justify-self: end; }
  .ga-view__nav--next { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   STORE
   ========================================================================== */
.st-need { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-bottom: 1px solid hsl(var(--border)); }
.st-need ol { counter-reset: need; display: grid; gap: 1.5rem 2.5rem; padding: 0; list-style: none; }
.st-need li { counter-increment: need; display: grid; grid-template-columns: 2.75rem 1fr; gap: .125rem 1rem; }
.st-need li::before { content: counter(need); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: #000; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .875rem; }
.st-need strong { font-family: var(--font-heading); font-size: .8125rem; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; }
.st-need span { font-size: .9375rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
@media (min-width: 900px) { .st-need ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.st-cats { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .st-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-cat { display: flex; flex-direction: column; overflow: hidden; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: border-color .2s var(--ease); }
.st-cat:hover { border-color: hsl(var(--foreground)); }
.st-cat__cover { display: flex; align-items: flex-end; overflow: hidden; aspect-ratio: 5 / 2; background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); }
@media (min-width: 960px) { .st-cat__cover { aspect-ratio: 16 / 9; } }
.st-cat__cover span { padding-left: 1.25rem; transform: translateY(16%); font-family: var(--font-heading); font-weight: 700; font-size: clamp(4rem, 6.2vw, 5.5rem); line-height: .8; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground)); transition: color .3s var(--ease); }
.st-cat:hover .st-cat__cover span { color: hsl(var(--foreground)); }
.st-cat__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem, 2.5vw, 2rem); }
.st-cat h3 { font-size: clamp(1.125rem, 1.7vw, 1.375rem); line-height: 1.25; }
.st-cat__body > p:not(.kp-eyebrow) { line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.st-cat__list { display: grid; gap: .5rem; width: 100%; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
.st-cat__list li, .st-enquire__points li { position: relative; padding-left: 1.25rem; font-weight: 500; line-height: 1.45; }
.st-cat__list li::before, .st-enquire__points li::before { content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; background: currentColor; }
.st-cat__link { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin-top: auto; padding-inline: 1.25rem; font-family: var(--font-heading); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: calc(var(--radius) - 2px); transition: background-color .2s var(--ease), color .2s var(--ease); }
.st-cat__link:hover { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }
.st-cat__link svg { transition: transform .2s var(--ease); }
.st-cat__link:hover svg { transform: translateX(.25rem); }
.st-cat--dark { background: #000; color: #fff; border-color: #000; }
.st-cat--dark .st-cat__cover { background: #0d0d0d; border-bottom-color: hsl(0 0% 100% / .2); }
.st-cat--dark .st-cat__cover span { -webkit-text-stroke-color: #fff; }
.st-cat--dark:hover .st-cat__cover span { color: #fff; }
.st-cat--dark .st-cat__body > p:not(.kp-eyebrow) { color: hsl(var(--kp-on-dark)); }
.st-cat--dark .st-cat__list { border-top-color: hsl(0 0% 100% / .2); }
.st-cat--dark .st-cat__link:hover { background: #fff; color: #000; border-color: #fff; }
@media (min-width: 640px) { .st-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-guide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.st-enquire { display: grid; gap: 2.5rem 5rem; scroll-margin-top: 5rem; }
@media (min-width: 960px) { .st-enquire { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.st-enquire__text .kp-intro { margin-top: 1.5rem; }
.st-enquire__points { display: grid; gap: .75rem; margin-top: 1.75rem; }
.st-enquire__main { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); line-height: 1.6; color: hsl(var(--muted-foreground)); }
.st-enquire__main a { color: hsl(var(--foreground)); }
.kp-section[id] { scroll-margin-top: 4rem; }

/* ==========================================================================
   TODDLERS
   ========================================================================== */
.to-soon { background: transparent; color: #fff; outline: 2px dashed #fff; outline-offset: -2px; }
.to-path { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0; list-style: none; }
.to-step--soon, .to-step a { display: flex; flex-direction: column; gap: .375rem; height: 100%; min-height: 9.5rem; padding: 1.25rem 1rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.to-step--soon { background: transparent; border: 2px dashed hsl(var(--foreground)); }
.to-step__age { margin-bottom: auto; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1; letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--foreground)); }
.to-step strong { margin-top: 1.25rem; font-family: var(--font-heading); font-size: clamp(.6875rem, 1vw, .8125rem); line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; }
.to-step small { font-size: .8125rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }
.to-step--soon small { display: inline-block; align-self: flex-start; padding: .2rem .5rem; background: #000; color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase; }
.to-step a:hover { background: #000; color: #fff; border-color: #000; }
.to-step a:hover .to-step__age { -webkit-text-stroke-color: #fff; }
.to-step a:hover small { color: hsl(var(--kp-on-dark)); }
@media (min-width: 640px) { .to-path { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .to-path { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.to-ready { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 960px) { .to-ready { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
/* a ticked list: used on Toddlers ("is my child ready") and Adults ("start where you are") */
.pg-ticks { display: grid; align-content: start; padding: 0; list-style: none; border-top: 1px solid hsl(var(--foreground)); }
.pg-ticks li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem 0; border-bottom: 1px solid hsl(var(--border)); }
.pg-ticks svg { box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .75rem; background: #000; color: #fff; }
.pg-ticks strong { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.pg-ticks span { display: block; margin-top: .25rem; line-height: 1.6; color: hsl(var(--muted-foreground)); }
/* on a black section the tick squares turn white */
.kp-dark .pg-ticks { border-top-color: #fff; }
.kp-dark .pg-ticks li { border-bottom-color: hsl(0 0% 100% / .2); }
.kp-dark .pg-ticks svg { background: #fff; color: #000; }
.kp-dark .pg-ticks span { color: hsl(var(--kp-on-dark)); }
.kp-dark .ad-start__photo { background: #111; }
.to-wait .st-enquire__points a { color: #fff; }

/* ==========================================================================
   PRIVACY (plain text page) and 404
   ========================================================================== */
.pg-plain { padding-top: calc(5rem + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.pg-plain__inner { max-width: 46rem; }
.pg-plain h1 { margin-top: 1.25rem; font-size: var(--title-size); line-height: 1.12; letter-spacing: -.01em; }
.pg-prose { margin-top: clamp(2rem, 4vw, 3rem); font-size: 1.0625rem; line-height: 1.75; }
.pg-prose > * + * { margin-top: 1.125em; }
.pg-prose h2 { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid hsl(var(--border)); font-size: 1rem; line-height: 1.4; }
.pg-prose ul { display: grid; gap: .5rem; padding-left: 1.25rem; list-style: square; }
.pg-prose p, .pg-prose li { color: hsl(0 0% 18%); }
.pg-prose__meta { font-size: .875rem; color: hsl(var(--muted-foreground)); }

/* ---- Thank-you page ---- */
.ty { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(5rem + clamp(2.25rem, 6vw, 5rem)) 0 clamp(3rem, 7vw, 5rem); }
.ty__title { font-size: var(--title-size); line-height: 1.08; letter-spacing: -.015em; }
.ty__lead { max-width: 40rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--lead-size); line-height: 1.6; color: hsl(var(--kp-on-dark)); text-wrap: pretty; }
/* what happens next: three numbered tiles (the dark tiles from the About page) */
.ty__steps { display: grid; gap: 1rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.ty__steps[hidden] { display: none; }
@media (min-width: 768px) { .ty__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.ty__no { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.75rem, 5vw, 3.75rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .8); transition: -webkit-text-stroke-color .3s var(--ease); }
.ty__steps .ad-tile p { margin-top: clamp(1.25rem, 2.2vw, 2rem); font-size: 1.0625rem; line-height: 1.6; color: hsl(0 0% 88%); }
.ty__steps .ad-tile:hover p { color: hsl(0 0% 20%); }
.ty__steps .ad-tile:hover .ty__no { -webkit-text-stroke-color: #000; }
.ty__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }

.pg-404 { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding: 8rem 0 4rem; }
.pg-404 .pg-404__code { max-width: none; margin-top: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(6rem, 30vw, 22rem); line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px #fff; }
.pg-404 h1 { margin-top: clamp(1.5rem, 4vw, 3rem); font-size: clamp(1.5rem, 4.4vw, 3.5rem); line-height: 1.12; }
.pg-404 h1 span { display: block; color: hsl(0 0% 60%); }
.pg-404 p { max-width: 36rem; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: hsl(var(--kp-on-dark)); }
.pg-404__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* About hero: a competition photo behind the heading. It fills the black area above the coach cards (from the
   header down to a little way behind the cards), sits to the right on wide screens, fades in from the left and
   out at the foot, and stays under a veil that is darkest behind the words. */
.ab-hero { position: relative; isolation: isolate; overflow: hidden; }
.ab-hero__top::before, .ab-hero__top::after { content: ""; position: absolute; z-index: -1; top: 5rem; right: 0; left: 0; height: var(--ab-hero-photo, 34rem); pointer-events: none; }
.ab-hero__top::before { z-index: -2; background: url("../img/rebecca-competition-win.webp?v=4e51696c") 46% 30% / cover no-repeat; filter: grayscale(1); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.ab-hero__top::after { background: rgb(0 0 0 / .7); }
.ab-hero .kp-hero__band { background: linear-gradient(to bottom, transparent 0 58%, hsl(var(--background)) 58%); }
.ab-hero .kp-hero__lead { color: hsl(0 0% 92%); }
@media (min-width: 768px) { .ab-hero { --ab-hero-photo: 40rem; } }
@media (min-width: 1024px) {
  .ab-hero { --ab-hero-photo: 44rem; }
  .ab-hero__top::before, .ab-hero__top::after { left: 30%; }
  .ab-hero__top::before { background-position: 40% 50%; -webkit-mask-image: linear-gradient(to right, transparent, #000 34%), linear-gradient(to bottom, #000 72%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 34%), linear-gradient(to bottom, #000 72%, transparent); mask-composite: intersect; }
  .ab-hero__top::after { background: linear-gradient(90deg, rgb(0 0 0 / .85), rgb(0 0 0 / .5) 45%, rgb(0 0 0 / .32)); }
}