/* ==========================================================================
   Sportschool Breedveld — stylesheet
   Kleuren zijn afgeleid van het bestaande huisstijlbeeld: diep bruinrood,
   zwarte balk, gebroken wit en baksteenrood als accent.
   ========================================================================== */

/* 1. Variabelen ---------------------------------------------------------- */
:root {
  --ink:        #140d0c;
  --bg:         #241a19;
  --bg-2:       #2e2120;
  --bg-3:       #3a2a28;
  --line:       rgba(255, 244, 232, .14);
  --line-soft:  rgba(255, 244, 232, .07);

  --brick:      #b23a2b;
  --brick-lite: #d9503b;
  --brick-dark: #7e2519;
  --gold:       #c9a227;

  --cream:      #fdfaf5;
  --sand:       #e3d6c6;
  --muted:      #b3a094;

  --ff-display: "Anton", "Arial Black", Impact, sans-serif;
  --ff-head:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap:       1200px;
  --wrap-tight: 900px;
  --radius:     4px;
  --shadow:     0 18px 40px rgba(0, 0, 0, .45);
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* 2. Reset / basis ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--sand);
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--brick-lite); text-decoration: none; }
a:hover { color: var(--cream); }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--cream);
  line-height: 1.08;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); text-transform: uppercase; }
h4 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.2em; }
li { margin-bottom: .4em; }

::selection { background: var(--brick); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brick);
  color: var(--cream);
  padding: .8rem 1.2rem;
  z-index: 200;
  font-family: var(--ff-head);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* 3. Layout -------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--tight { width: min(100% - 2.5rem, var(--wrap-tight)); margin-inline: auto; }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section--alt { background: var(--bg-2); }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.eyebrow {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brick-lite);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--brick);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.lead {
  font-size: clamp(1.08rem, 1.8vw, 1.25rem);
  color: var(--cream);
  line-height: 1.6;
}

.muted { color: var(--muted); }
.small { font-size: .92rem; }

/* Alleen voor schermlezers: houdt de koppenstructuur heel zonder dat je het ziet. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 4. Knoppen ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.8rem;
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brick); color: var(--cream); }
.btn--primary:hover { background: var(--brick-lite); color: var(--cream); }
.btn--ghost { border-color: rgba(253, 250, 245, .45); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(253, 250, 245, .1); color: var(--cream); }
.btn--sm { padding: .65rem 1.2rem; font-size: .95rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

.arrow-link {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.arrow-link::after { content: "\2192"; transition: transform .25s var(--ease); }
.arrow-link:hover { color: var(--brick-lite); }
.arrow-link:hover::after { transform: translateX(5px); }

/* 5. Header / navigatie -------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(10, 7, 6, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s, padding .3s;
}
.site-header.is-stuck { background: rgba(10, 7, 6, .97); }
/* Met het mobiele menu open vormen balk en menu samen een dekkend vlak. */
body.nav-open .site-header { background: #0b0706; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 74px;
  transition: min-height .3s;
}
.site-header.is-stuck .nav { min-height: 62px; }

.brand { display: flex; align-items: center; gap: .8rem; margin-right: auto; }
.brand img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--brick-dark);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--ff-head);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cream);
}
.brand-sub {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  display: block;
  padding: .6rem .85rem;
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--sand);
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .35rem;
  height: 2px;
  background: var(--brick);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { margin-left: .5rem; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--cream);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  margin-inline: auto;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* 6. Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid;
  align-items: center;
  padding: 9rem 0 4.5rem;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(135deg, #3a2320, #180f0e 70%);
  background-size: cover;
  background-position: center 30%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(20, 13, 12, .94) 0%, rgba(20, 13, 12, .78) 42%, rgba(20, 13, 12, .35) 100%),
    linear-gradient(to top, rgba(20, 13, 12, .95), transparent 45%);
}

/* de "woordwolk" uit de oude huisstijl, nu als rustige achtergrondlaag */
.hero__words {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4.5rem 0;
  pointer-events: none;
  user-select: none;
}
.word-row {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  font-family: var(--ff-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 80, 59, .34);
  animation: drift 46s linear infinite;
}
.word-row span { padding-right: 2.5rem; }
.word-row--b { animation-duration: 62s; animation-direction: reverse; -webkit-text-stroke-color: rgba(217, 80, 59, .22); }
.word-row--c { animation-duration: 54s; -webkit-text-stroke-color: rgba(201, 162, 39, .18); }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero__inner { position: relative; z-index: 1; max-width: 46rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(201, 162, 39, .5);
  border-radius: 999px;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--gold);
  margin-bottom: 1.6rem;
}
.hero__badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.hero__title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 1.3rem;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.hero__title em {
  font-style: normal;
  color: var(--brick-lite);
  display: block;
}

.hero__claims {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
  font-family: var(--ff-head);
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cream);
}
.hero__claims li {
  margin: 0 0 .25rem;
  padding-left: 1.6rem;
  position: relative;
}
.hero__claims li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 12px;
  height: 2px;
  background: var(--brick);
}

/* Alleen op een breed en hoog scherm; anders botst hij met de knoppen. */
.hero__scroll { display: none; }

@media (min-width: 1200px) and (min-height: 780px) {
  .hero { padding-bottom: 7rem; }
  .hero__scroll { display: flex; }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  color: var(--muted);
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--brick), transparent);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* 7. Paginakop (subpagina's) --------------------------------------------- */
.page-head {
  position: relative;
  padding: 11rem 0 clamp(3rem, 7vw, 5rem);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 13, 12, .95) 20%, rgba(20, 13, 12, .55));
}
.page-head h1 { margin-bottom: .35rem; }
.page-head .lead { max-width: 60ch; }

.crumbs {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brick-lite); }
.crumbs span { margin: 0 .5rem; opacity: .5; }

/* 8. USP-balk ------------------------------------------------------------ */
.usp {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.usp__item {
  padding: 2.1rem 1.6rem;
  border-left: 1px solid var(--line-soft);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.usp__item:first-child { border-left: 0; }
.usp__item svg { flex: none; width: 26px; height: 26px; stroke: var(--brick-lite); }
.usp__item strong {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cream);
  margin-bottom: .15rem;
}
.usp__item span { font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* 9. Split-secties ------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split__media::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--brick);
  border-radius: var(--radius);
  z-index: -1;
}
.split__stat {
  position: absolute;
  right: -12px;
  bottom: -26px;
  background: var(--brick);
  color: var(--cream);
  padding: 1rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.split__stat b {
  display: block;
  font-family: var(--ff-display);
  font-size: 2.2rem;
  line-height: 1;
}
.split__stat span {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
}

/* 10. Disciplinekaarten -------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 1.5rem;
}
.card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-3);
  min-height: 330px;
  isolation: isolate;
  color: var(--cream);
}
.card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 13, 12, .96) 12%, rgba(20, 13, 12, .55) 48%, rgba(20, 13, 12, .18));
  transition: background .4s;
}
.card:hover .card__img, .card:focus-visible .card__img { transform: scale(1.07); }
.card:hover::before { background: linear-gradient(to top, rgba(126, 37, 25, .92) 8%, rgba(20, 13, 12, .6) 55%, rgba(20, 13, 12, .2)); }

.card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem;
}
.card__tag {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  color: var(--gold);
  display: block;
  margin-bottom: .35rem;
}
.card h3 { margin: 0 0 .4rem; color: var(--cream); }
.card p { font-size: .93rem; color: var(--sand); margin: 0; }
.card__rule {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--brick);
  margin-top: .9rem;
  transition: width .4s var(--ease);
}
.card:hover .card__rule { width: 74px; background: var(--cream); }

/* 11. Lesblokken (detailpagina's) ---------------------------------------- */
.lesson {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--line-soft);
}
.lesson:first-of-type { border-top: 0; padding-top: 0; }
.lesson:nth-child(even) .lesson__media { order: 2; }
.lesson__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.lesson h2 { margin-bottom: .2rem; }
.lesson__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.lesson__meta li {
  margin: 0;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  padding: .3rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sand);
}
.lesson__meta li.is-time { border-color: rgba(178, 58, 43, .6); color: var(--brick-lite); }

/* 12. Rooster ------------------------------------------------------------ */
/* Zes dagen naast elkaar. Niet auto-fit: dan valt zaterdag als enige
   op een tweede rij zodra er net geen zesde kolom meer past. */
.days {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 1180px) { .days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .days { grid-template-columns: 1fr; } }
.day {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--brick-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.day.is-today { border-top-color: var(--gold); box-shadow: 0 0 0 1px rgba(201, 162, 39, .35); }
.day__name {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cream);
  padding: .9rem 1.1rem;
  background: rgba(0, 0, 0, .28);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.day__today {
  font-size: .62rem;
  letter-spacing: .14em;
  background: var(--gold);
  color: var(--ink);
  padding: .15rem .45rem;
  border-radius: 2px;
}
.day ul { list-style: none; margin: 0; padding: .6rem; }
.day li {
  margin: 0;
  padding: .65rem .55rem;
  border-radius: var(--radius);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .2s;
}
.day li:last-child { border-bottom: 0; }
.day li:hover { background: rgba(255, 255, 255, .04); }
.day li.is-dim { opacity: .34; }
.day .time {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brick-lite);
}
.day b {
  display: block;
  font-weight: 600;
  color: var(--cream);
  font-size: .95rem;
  line-height: 1.3;
}
.day em { font-style: normal; font-size: .82rem; color: var(--muted); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.filter {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .85rem;
  font-weight: 600;
  padding: .5rem 1.05rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sand);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filter:hover { border-color: var(--brick); color: var(--cream); }
.filter[aria-pressed="true"] { background: var(--brick); border-color: var(--brick); color: var(--cream); }

/* 12b. Eerstvolgende les -------------------------------------------------
   Bewust dezelfde vorm als de badge boven de herotitel: een smalle pil met
   een randje. Het is een hulpmiddel, geen banner, dus hij mag niet schreeuwen.
   ------------------------------------------------------------------------ */
.now-strip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  margin: 0 0 1.5rem;
  padding: .5rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 13, 12, .45);
  font-size: .92rem;
  color: var(--sand);
  line-height: 1.5;
}
.hero .now-strip { margin: 1.8rem 0 0; }

.now-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.now-strip.is-live .now-strip__dot {
  background: var(--brick-lite);
  animation: now-pulse 2.6s ease-out infinite;
}
@keyframes now-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 80, 59, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(217, 80, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 80, 59, 0); }
}

.now-strip__label {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
}
.now-strip.is-live .now-strip__label { color: var(--brick-lite); }
.now-strip b { font-weight: 600; color: var(--cream); }

.now-strip a {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  color: var(--sand);
  border-bottom: 1px solid rgba(255, 244, 232, .25);
}
.now-strip a:hover { color: var(--cream); border-bottom-color: var(--cream); }

@media (max-width: 620px) {
  .now-strip { border-radius: var(--radius); width: 100%; }
}

/* 13. Prijzen ------------------------------------------------------------ */
.price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.prices {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: .98rem;
}
table.prices caption {
  text-align: left;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  color: var(--muted);
  padding-bottom: .9rem;
}
table.prices th, table.prices td {
  padding: .95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
table.prices thead th {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .86rem;
  color: var(--cream);
  background: rgba(0, 0, 0, .3);
  border-bottom: 2px solid var(--brick-dark);
  white-space: nowrap;
}
table.prices tbody th {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  color: var(--cream);
  font-weight: 600;
  white-space: nowrap;
}
table.prices td { font-variant-numeric: tabular-nums; }
table.prices .is-deal { color: var(--gold); font-weight: 600; }
table.prices tbody tr:hover { background: rgba(255, 255, 255, .035); }

.price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
}
.price-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.8rem;
  position: relative;
}
.price-card--hl { border-color: var(--brick); background: linear-gradient(180deg, rgba(178, 58, 43, .16), transparent 60%), var(--bg-2); }
.price-card h3 { margin-bottom: .1rem; }
.price-card .amount {
  font-family: var(--ff-display);
  font-size: 2.8rem;
  color: var(--cream);
  line-height: 1.1;
  display: block;
}
.price-card .amount sup { font-size: 1.1rem; vertical-align: super; margin-right: .1em; }
.price-card .per {
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: var(--muted);
  display: block;
  margin-bottom: 1rem;
}
.price-card ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.price-card li { padding-left: 1.4rem; position: relative; }
.price-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-left: 2px solid var(--brick-lite);
  border-bottom: 2px solid var(--brick-lite);
  transform: rotate(-45deg);
}

/* 14. Feitenlijst / info-blokken ----------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
.fact {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brick);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.fact h3 { font-size: 1.15rem; margin-bottom: .45rem; }
.fact p { font-size: .95rem; margin: 0; }

.note {
  background: rgba(201, 162, 39, .08);
  border: 1px solid rgba(201, 162, 39, .3);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-size: .95rem;
}
.note strong { color: var(--gold); }

/* 15. CTA-band ----------------------------------------------------------- */
.cta {
  background:
    linear-gradient(115deg, rgba(126, 37, 25, .96), rgba(36, 26, 25, .9)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 12px);
  text-align: center;
}
.cta h2 { margin-bottom: .6rem; }
.cta p { max-width: 52ch; margin-inline: auto; color: var(--cream); }
.cta .btn-row { justify-content: center; margin-top: 1.8rem; }

/* 16. Contact ------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.contact-list svg { flex: none; width: 22px; height: 22px; stroke: var(--brick-lite); margin-top: .25rem; }
.contact-list strong {
  display: block;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
}
.contact-list a, .contact-list span { color: var(--cream); font-size: 1.05rem; }
.contact-list a:hover { color: var(--brick-lite); }

.map-frame {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: var(--radius);
  filter: grayscale(1) contrast(1.05) brightness(.82);
}

form .field { margin-bottom: 1.1rem; }
form label {
  display: block;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .35rem;
}
form input, form select, form textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
}
form input:focus, form select:focus, form textarea:focus { border-color: var(--brick); outline: none; }
form textarea { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* 17. Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.site-footer h3 { color: var(--cream); margin-bottom: 1rem; letter-spacing: .12em; font-size: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--sand); }
.site-footer a:hover { color: var(--brick-lite); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--muted);
  font-size: .85rem;
}

/* 17b. WhatsApp-widget --------------------------------------------------- */
.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  font-family: var(--ff-body);
  /* Het lege deel van de widget mag geen klikken van de pagina opvangen. */
  pointer-events: none;
}
.wa__button, .wa__panel { pointer-events: auto; }

.wa__button {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease), background-color .25s;
}
.wa__button:hover { transform: scale(1.06); background: #1fb855; }
.wa__button svg { width: 32px; height: 32px; fill: currentColor; }
.wa__button .wa__close { display: none; }
.wa__button[aria-expanded="true"] .wa__open { display: none; }
.wa__button[aria-expanded="true"] .wa__close { display: block; }

.wa__button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: wa-ring 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-ring {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.wa__button[aria-expanded="true"]::after { display: none; }

.wa__panel {
  width: min(320px, calc(100vw - 2.5rem));
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: translateY(12px) scale(.97);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, transform .22s var(--ease), visibility .22s;
}
.wa__panel.is-open { opacity: 1; visibility: visible; transform: none; }

.wa__head {
  background: #075e54;
  color: #fff;
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.wa__head img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, .15);
  flex: none;
}
.wa__head b {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.05rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.wa__head span { font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.wa__head span::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
}

.wa__body {
  padding: 1.5rem 1rem 1rem;
  background:
    linear-gradient(rgba(20, 13, 12, .88), rgba(20, 13, 12, .88)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 10px);
}
.wa__bubble {
  background: var(--bg-3);
  border-radius: 0 10px 10px 10px;
  padding: .8rem .95rem;
  font-size: .93rem;
  color: var(--sand);
  line-height: 1.5;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.wa__bubble::before {
  content: "";
  position: absolute;
  left: -7px; top: 0;
  border: 7px solid transparent;
  border-top-color: var(--bg-3);
  border-left: 0;
}
.wa__bubble time { display: block; font-size: .7rem; color: var(--muted); margin-top: .4rem; }

.wa__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  background: #25d366;
  color: #04231a;
  border-radius: 999px;
  font-family: var(--ff-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .92rem;
}
.wa__cta:hover { background: #1fb855; color: #04231a; }
.wa__cta svg { width: 20px; height: 20px; fill: currentColor; }

.wa__alt {
  display: block;
  text-align: center;
  padding: .7rem 1rem;
  font-size: .82rem;
  color: var(--muted);
  background: var(--bg-2);
}
.wa__alt a { color: var(--sand); }

@media (max-width: 620px) {
  /* Kleiner op de telefoon, zodat de knop niet over formuliervelden valt. */
  .wa { right: .85rem; bottom: .85rem; }
  .wa__button { width: 46px; height: 46px; }
  .wa__button svg { width: 24px; height: 24px; }
}

/* 18. Animaties ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Als een foto ontbreekt, valt het blok terug op een warme kleurverloop. */
.img-missing { visibility: hidden; }
.has-missing-img { background: linear-gradient(135deg, var(--brick-dark), var(--bg-3) 70%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* 18b. Ontwerplaag -------------------------------------------------------
   Deze laag staat bewust na de losse onderdelen en voor de responsive regels.
   Hij doet drie dingen: alle foto's dezelfde kleurbehandeling geven, de
   koppen meer gewicht geven, en diepte toevoegen aan de donkere vlakken.
   ------------------------------------------------------------------------ */

/* --- Foto's gelijktrekken ---------------------------------------------
   De beelden komen uit verschillende bronnen en hebben elk een eigen
   kleurzweem. Dezelfde warme, iets ontkleurde gradatie maakt er een geheel
   van. Bij aanwijzen komt de kleur terug, dat geeft de kaarten leven.
   Het logo en de WhatsApp-avatar vallen hier bewust buiten.             */
.hero__media img,
.page-head__media img,
.split__media img,
.lesson__media img,
.card__img {
  filter: saturate(.5) contrast(1.1) brightness(.9) sepia(.22);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
.card:hover .card__img,
.card:focus-visible .card__img,
.split__media:hover img,
.lesson__media:hover img {
  filter: saturate(1) contrast(1.04) brightness(1) sepia(0);
}

/* --- Filmkorrel over het geheel ---------------------------------------
   Heel subtiel. Geeft textuur aan de grote donkere vlakken en verbergt de
   banding die in verlopen op goedkope schermen ontstaat.                */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Warme gloed achter de hero --------------------------------------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 55% at 16% 46%, rgba(178, 58, 43, .26), transparent 70%);
}

/* --- Koppen met meer gewicht ------------------------------------------
   h2 krijgt hetzelfde lettertype als de hero. Dat bindt de pagina's aan
   elkaar en past bij een vechtsportschool. h3 blijft smal, zodat er
   verschil in toon blijft tussen een sectiekop en een lesnaam.          */
h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: .98;
  font-size: clamp(1.8rem, 3.8vw, 2.75rem);
}
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }

/* --- Ritme tussen de secties ------------------------------------------ */
.section--alt { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* --- Disciplinekaarten: twee grote, vier kleine ------------------------ */
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards > :nth-child(1),
  .cards > :nth-child(2) { grid-column: span 2; min-height: 390px; }
  .cards > :nth-child(1) h3,
  .cards > :nth-child(2) h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
}

/* --- Kaarten die reageren --------------------------------------------- */
.fact, .day, .price-card {
  transition: transform .3s var(--ease), border-color .3s, background-color .3s;
}
.fact:hover, .price-card:hover { transform: translateY(-3px); border-color: var(--line); }
.day:hover { transform: translateY(-3px); }

/* --- Links in lopende tekst herkenbaar zonder alleen kleur ------------- */
main p a:not(.btn):not(.arrow-link),
main li a:not(.btn):not(.arrow-link) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(217, 80, 59, .55);
  text-underline-offset: .18em;
  transition: text-decoration-color .2s;
}
main p a:not(.btn):not(.arrow-link):hover,
main li a:not(.btn):not(.arrow-link):hover { text-decoration-color: var(--cream); }

/* --- Leesbaarheid op de disciplinekaarten ------------------------------
   De foto's hebben lichte vlakken (witte pakken) precies waar de tekst
   staat. Het verloop loopt daarom verder door dan voorheen.            */
.card::before {
  background: linear-gradient(to top,
    rgba(20, 13, 12, .97) 30%,
    rgba(20, 13, 12, .72) 58%,
    rgba(20, 13, 12, .22));
}
.card:hover::before {
  background: linear-gradient(to top,
    rgba(126, 37, 25, .95) 26%,
    rgba(20, 13, 12, .7) 60%,
    rgba(20, 13, 12, .25));
}

/* --- Leesbaarheid van de hero op smalle schermen -----------------------
   Breed staat de tekst links, waar het waas het donkerst is. Smal loopt hij
   over de hele foto, dus daar moet het waas over de volle breedte dekken. */
@media (max-width: 1080px) {
  .hero__scrim {
    background:
      linear-gradient(rgba(20, 13, 12, .84), rgba(20, 13, 12, .9)),
      linear-gradient(to top, rgba(20, 13, 12, .95), transparent 45%);
  }
  .page-head::after {
    background: linear-gradient(rgba(20, 13, 12, .88), rgba(20, 13, 12, .78));
  }
}

/* --- Tabel: de rij waar je op staat krijgt een accent ------------------ */
table.prices tbody tr { transition: background-color .2s, box-shadow .2s; }
table.prices tbody tr:hover { box-shadow: inset 3px 0 0 var(--brick); }

/* 19. Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .usp__grid { grid-template-columns: repeat(2, 1fr); }
  .usp__item:nth-child(3) { border-left: 0; }
  .usp__item:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Dekkend, niet doorschijnend: anders leest de hero door het menu heen. */
    background: #0b0706;
    border-bottom: 1px solid var(--line-soft);
    padding: .5rem 1.25rem 1.5rem;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: .95rem .25rem; font-size: 1.15rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links a::after { display: none; }
  .nav-cta { display: none; }

  .split, .lesson, .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media, .lesson:nth-child(even) .lesson__media { order: 0; }
  .split__media::after { display: none; }
  .split__stat { right: 1rem; bottom: -20px; }
  .hero { min-height: auto; padding: 8rem 0 5rem; }
  .hero__scroll { display: none; }
  .page-head { padding: 9rem 0 3rem; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .usp__grid { grid-template-columns: 1fr; }
  .usp__item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .usp__item:first-child { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; }
}

/* 20. Print -------------------------------------------------------------- */
@media print {
  .site-header, .hero__words, .cta, .nav-toggle, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .day b, .day time { color: #000; }
  .day, .fact, .price-card { border: 1px solid #999; }
}