/* ============================================================
   PILATES STUDIO · DESIGN SYSTEM
   Warm-neutral palette inspired by boutique pilates aesthetic
   Replace [STUDIO_NAME] tokens in HTML when ready.
   ============================================================ */
:root {
  /* Brand palette · warm terracotta, amber & burnt sienna */
  --c-cream:        #D3C5B1;   /* surface · warm taupe, red not yellow */
  --c-cream-soft:   #DFD5C6;   /* lighter surface */
  --c-ivory:        #E8E1D5;   /* page background */
  --c-bone:         #C0B09B;   /* muted / dividers */
  /* Brons/goud, overgenomen uit de luxe-variant. Twee tinten met een reden:
     kleine tekst (eyebrows, links) heeft de donkere nodig om op het taupe
     vlak aan 4,5:1 te komen; grote koppen mogen de echte luxe-tint. */
  --c-clay:         #66502D;   /* brons · kleine tekst · 4.5:1 op --c-cream, 5.8:1 op --c-ivory */
  --c-clay-warm:    #7E6136;   /* goud · grote display-accenten (>= 3:1 overal) */
  --c-clay-deep:    #4F3D22;   /* pressed */
  --c-amber:        #B8975E;   /* goud op donkere vlakken · 5.0:1 op --c-dark */
  --c-gold-light:   #D9C29A;
  --c-pill:         #5A4433;   /* vulling van alle balkjes · gouden letters halen 5.2:1 */   /* champagne · koppen in de footer */
  --c-earth:        #4E463D;   /* secondary text · AA on surface */
  --c-coffee:       #332E27;   /* primary text · softened espresso */
  --c-ink:          #221E18;   /* heading TEXT only */
  --c-dark:         #3B2A1D;   /* dark surfaces: bars, buttons, cards, footer */
  --c-line:         rgba(57, 51, 44, 0.14);
  --c-card:         #EDE6DA;   /* card face · lighter than page so cards lift off the band */
  --c-hairline:     #C9BCA9;   /* 1px card border · makes cards read as material */
  --c-line-soft:    rgba(57, 51, 44, 0.06);

  /* Typography · Cormorant Garamond serif (vintage elegance) + Inter sans */
  --f-display: "Cormorant Garamond", "Fraunces", Georgia, serif;
  --f-logo:    "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;   /* Vogue-style wordmark */
  --f-hero:    "Tenor Sans", "Optima", "Helvetica Neue", sans-serif;  /* banner */
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --fs-hero:    clamp(3rem, 8vw, 7rem);
  --fs-display: clamp(2.25rem, 5vw, 4.25rem);
  --fs-h2:      clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.65rem);
  --fs-lead:    clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.85rem;
  --fs-eyebrow: 0.74rem;

  /* Layout */
  --max-w:    1320px;
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --radius:    2px;
  --radius-lg: 12px;

  /* Motion */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:  180ms;
  --t-med:   360ms;
  --t-slow:  720ms;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-coffee);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-clay); }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.06;
  margin: 0;
  color: var(--c-ink);
}
h1 { font-size: var(--fs-hero); font-weight: 400; }
h2 { font-size: var(--fs-display); font-weight: 400; }
h3 { font-size: var(--fs-h2); font-weight: 500; }
h4 { font-size: var(--fs-h3); font-weight: 500; }

p { margin: 0 0 1em; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-earth);
  max-width: 56ch;
}

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-clay);
  display: inline-block;
}
@media (max-width: 540px) {
  .eyebrow { letter-spacing: 0.14em; font-size: 0.7rem; }
}

.quiet { color: var(--c-earth); }

/* Hand-tuned italics for the serif */
em, .italic { font-style: italic; font-weight: 400; }

/* ---------- LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  padding-inline: var(--gutter);
  margin-inline: auto;
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.divider {
  height: 1px;
  background: var(--c-line);
  width: 100%;
  margin: 0;
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(232, 225, 213, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--c-line-soft);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.1rem;
}
.nav__logo {
  font-family: var(--f-logo);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.nav__logo em {
  font-style: normal;
  /* Bodoni Moda's numeral 1 is a bare vertical stroke at nav size and
     misreads as a capital I, turning the name into "STUDIO I PILATES".
     Cormorant's 1 has a clear flag and base serif and sits comfortably
     inside the Bodoni capitals. */
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.24em;
  line-height: 0;
  color: var(--c-ink);
}
@media (max-width: 540px) {
  .nav__logo { font-size: 1rem; letter-spacing: 0.1em; }
}
.nav__menu {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  align-items: center;
}
.nav__menu a {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--c-coffee);
  position: relative;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--c-clay);
  transition: right var(--t-med) var(--ease);
}
.nav__menu a:hover::after,
.nav__menu a.is-active::after { right: 0; }

.nav__cta { margin-left: 0.5rem; }

/* Force button colors inside the nav (overrides .nav__menu a inherited color) */
.nav__menu a.btn--primary,
.nav__menu a.btn--accent { color: var(--c-ivory); }
.nav__menu a.btn--ghost  { color: var(--c-ink); }
.nav__menu a.btn--light  { color: var(--c-ink); }
.nav__menu a.btn--accent:hover,
.nav__menu a.btn--primary:hover { color: var(--c-ivory); }
.nav__menu a.btn::after { display: none; }

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  margin-left: 0.4rem;
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__lang:hover {
  background: var(--c-dark);
  color: var(--c-ivory);
  border-color: var(--c-dark);
}
.nav__lang::after { display: none; }
.nav__lang svg {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.nav__burger {
  display: none;
  width: 38px; height: 38px;
  position: relative;
}
.nav__burger span {
  position: absolute; left: 8px; right: 8px;
  height: 1px; background: var(--c-dark);
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast);
}
.nav__burger span:nth-child(1) { top: 14px; }
.nav__burger span:nth-child(2) { top: 19px; }
.nav__burger span:nth-child(3) { top: 24px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__menu {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--c-ivory);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem var(--gutter) 3rem;
    gap: 1.4rem;
    border-bottom: 1px solid var(--c-line-soft);
    transform: translateY(-110%);
    transition: transform var(--t-med) var(--ease);
  }
  .nav.is-open .nav__menu { transform: translateY(0); }
  .nav__menu a { font-size: 1.4rem; font-family: var(--f-display); font-weight: 350; }
  .nav__burger { display: block; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-dark);
  color: var(--c-ivory);
}
.btn--primary:hover { background: var(--c-clay); color: var(--c-ivory); }

.btn--accent {
  background: var(--c-dark);
  color: var(--c-ivory);
}
.btn--accent:hover { background: var(--c-coffee); color: var(--c-ivory); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-dark);
}
.btn--ghost:hover { background: var(--c-dark); color: var(--c-ivory); }

.btn--light {
  background: var(--c-ivory);
  color: var(--c-ink);
}
.btn--light:hover { background: var(--c-clay); color: var(--c-ivory); }
/* Gevuld in het brons dat eerst alleen bij aanraken verscheen. */
.btn--gold { background: var(--c-clay); color: var(--c-ivory); border-color: var(--c-clay); }
.btn--gold:hover { background: var(--c-clay-warm); border-color: var(--c-clay-warm); color: var(--c-ivory); }
/* Op donkerbruine kaarten: champagne met donkere letters, anders valt brons weg tegen bruin. */
.btn--gold-light { background: var(--c-gold-light); color: var(--c-dark); border-color: var(--c-gold-light); }
.btn--gold-light:hover { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-dark); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: grid;
  align-items: start;              /* headline sits high, studio fills below */
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  background: var(--c-ivory);
  overflow: hidden;
}
/* De foto loopt onderaan zacht over in het beige van de pagina: geen harde
   rand. De overgang zit onder de kop en de knop; de gouden belettering op
   de reformer blijft door de zachte curve leesbaar. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(232, 225, 213, 0)    0%,
    rgba(232, 225, 213, 0.18) 35%,
    rgba(232, 225, 213, 0.55) 70%,
    rgba(232, 225, 213, 0.88) 90%,
    #E8E1D5                   100%);
}
@media (max-width: 540px) {
  /* the ceiling cove light occupies the top of the phone crop, so the
     text block sits lower, on the wall, like the reference */
  .hero { min-height: 76vh; padding-block: 2.4rem 2.4rem; align-items: center; }
}
.hero__bg {
  position: absolute;
  inset: 0;                        /* full-bleed */
  z-index: 0;
  overflow: hidden;
}
.hero__bg picture { display: contents; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchored to the bottom so the front reformer's gold STUDIO 1 PILATES
     lettering stays fully in frame */
  object-position: 50% 100%;
  transform-origin: 50% 100%;      /* zoom grows upward, never clips the lettering */
  /* photograph is used exactly as delivered: no grade, no tint */
  filter: none;
  animation: kenBurns 30s ease-out infinite alternate;
}
@media (max-width: 720px) {
  /* mobile is served a purpose-cropped file matching the phone hero ratio,
     so it needs no framing offset at all. */
  .hero__bg img { object-position: 50% 50%; }
}
@keyframes kenBurns {
  from { transform: scale(1.00); }
  to   { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  /* keep the crop the owner asked for; only stop the movement */
  .hero__bg img { animation: none; transform: scale(1.02); }
}
.hero__content {
  position: relative;
  z-index: 2;
  color: var(--c-ivory);
  /* Extra inspringing bovenop de gewone marge: de kop stond te dicht
     tegen de linkerrand van het beeld. */
  padding-inline-start: calc(var(--gutter) + clamp(1.8rem, 6vw, 3.8rem));
  /* en iets lager: van de bovenlijn van het beeld af */
  margin-top: clamp(1.8rem, 7vw, 4.5rem);
}
.hero__content h1 {
  color: var(--c-ivory);
  max-width: 14ch;
  font-weight: 300;
}
.hero__content h1 em {
  color: var(--c-cream);
  font-style: italic;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
@media (max-width: 540px) {
  /* De knop hoort om zijn label heen te vallen, niet de volle schermbreedte
     te pakken; de regel eronder lijnt links mee uit. */
  .hero__ctas { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .hero__ctas .btn { width: auto; justify-content: center; }
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.5; }
  50% { transform: scaleY(0.6) translateY(6px); opacity: 1; }
}

/* ---------- SECTION HEADER ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.section-head h2 { max-width: 18ch; }
.section-head .lead { margin-block: 0; }
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
}

/* ---------- SPLIT (alternating image/text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split__body { max-width: 52ch; }
.split__body h3 { margin-bottom: 1.25rem; }
.split__body p { color: var(--c-earth); margin-bottom: 1rem; font-size: var(--fs-lead); }
.split__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--c-ink);
  border-left: 1px solid var(--c-clay);
  padding-left: 1.5rem;
  margin: 2rem 0;
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
}

/* ---------- MARQUEE / TICKER ---------- */
.marquee {
  background: var(--c-dark);
  color: var(--c-ivory);
  padding-block: 1.4rem;
  overflow: hidden;
  border-block: 1px solid var(--c-line);
}
.marquee__track {
  display: flex;
  gap: 3rem;
  animation: ticker 38s linear infinite;
  width: max-content;
}
.marquee__item {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee__item em {
  color: var(--c-clay);
  font-style: italic;
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
}

/* ---------- FEATURE STATS ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-block: clamp(1rem, 3vw, 2rem);
}
.stats > div {
  text-align: center;
  padding: clamp(1.2rem, 2.6vw, 2.2rem) clamp(0.8rem, 2vw, 1.6rem);
  border-left: 1px solid var(--c-line);
}
.stats > div:first-child { border-left: 0; }
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--c-line); padding-top: 2rem; }
}
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-ink);
}
/* Pictogrammen in plaats van cijfers: dunne lijntekeningen in brons. */
.stat__icon {
  width: clamp(3.6rem, 7vw, 4.6rem);
  height: clamp(3.6rem, 7vw, 4.6rem);
  margin-inline: auto;
  color: var(--c-clay);
}
.stat__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.stat__label {
  font-size: 0.8rem;
  font-weight: 600;                /* vet kopje, zoals in het voorbeeld */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: 1.1rem;
}
@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- PRICING CARDS ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.price-card {
  background: var(--c-cream-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.price-card:hover { transform: translateY(-4px); border-color: var(--c-clay); }
.price-card--featured,
.price-card--dark {
  background: var(--c-dark);
  color: var(--c-ivory);
  position: relative;
}
.price-card--featured h4,
.price-card--featured .price__amount,
.price-card--dark h4,
.price-card--dark .price__amount { color: var(--c-ivory); }
.price-card--featured .price__feature,
.price-card--dark .price__feature,
.price-card--dark p { color: rgba(232, 225, 213,0.78); }
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- FORM ---------- */
.form {
  display: grid;
  gap: 1rem;
  max-width: 520px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) { .form__row { grid-template-columns: 1fr; } }
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-earth);
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: 0.65rem 0;
  color: var(--c-ink);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-bottom-color: var(--c-clay); }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--c-dark);
  color: var(--c-ivory);
  padding-block: clamp(3rem, 6vw, 5rem) 1.5rem;
  margin-top: var(--section-y);
}
.footer h4 {
  color: var(--c-gold-light);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--f-body);
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(232, 225, 213,0.15);
}
@media (max-width: 880px) { .footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__cols { grid-template-columns: 1fr; } }

.footer__brand {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--c-ivory);
}
.footer__brand em { color: var(--c-ivory); font-style: normal; }
.footer__sub { color: rgba(232, 225, 213,0.7); margin-top: 1rem; max-width: 36ch; }

.footer__list a {
  display: inline-block;
  padding: 0.3rem 0;
  color: rgba(232, 225, 213,0.85);
  font-size: 0.95rem;
}
.footer__list a:hover { color: var(--c-clay); }

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(232, 225, 213,0.55);
}

.footer__social {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(232, 225, 213,0.22);
  border-radius: 50%;
  color: var(--c-ivory);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  position: relative;
}
.footer__social a:hover {
  background: var(--c-clay);
  border-color: var(--c-clay);
  color: var(--c-ivory);
}
.footer__social svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ---------- INTRO ANIMATIONS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
/* Sequential delays for groups of reveals */
.reveal.delay-1 { transition-delay: 90ms; }
.reveal.delay-2 { transition-delay: 180ms; }
.reveal.delay-3 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- UTILS ---------- */
.center  { text-align: center; }
.mt-0    { margin-top: 0; }
.mt-2    { margin-top: 1rem; }
.mt-4    { margin-top: 2rem; }
.mb-0    { margin-bottom: 0; }
.mb-4    { margin-bottom: 2rem; }
.muted   { color: var(--c-earth); }
.flex    { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Sub-page hero (lighter than home) */
.sub-hero {
  background: var(--c-cream);
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.sub-hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  max-width: 16ch;
  line-height: 1.02;
}
.sub-hero h1 em { color: var(--c-clay-warm); font-style: italic; }   /* grote kop: het luxe-goud, 3.4:1 op taupe */
.sub-hero .lead { margin-top: 1.4rem; }

/* Two-up text columns */
.cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.cols2 p { color: var(--c-earth); font-size: var(--fs-lead); }
@media (max-width: 720px) { .cols2 { grid-template-columns: 1fr; } }

/* ==========================================================
   EDITORIAL LUXURY · Awwwards-tier sections
   Variance: Editorial Luxury (warm cream + variable serif)
   Used by: gallery--bento, price-card--editorial, editorial-hero
   ========================================================== */

:root {
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-diffuse: 0 30px 60px -28px rgba(57, 51, 44, 0.18);
  --shadow-diffuse-deep: 0 40px 80px -32px rgba(0, 0, 0, 0.45);
  --hairline: 1px solid rgba(57, 51, 44, 0.08);
  --inset-highlight: inset 0 1px 0 rgba(248, 245, 239, 0.6);
}

/* Pill eyebrow (replaces caps-text eyebrow in editorial sections) */
.eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--c-pill);       /* overal dezelfde tint, ook op de donkere kaarten */
  border: 1px solid var(--c-pill);
  color: var(--c-gold-light);      /* goud op bruin */
  font-family: var(--f-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow--pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-amber);
  display: inline-block;
}

/* Magnetic button with button-in-button trailing arrow */
.btn--magnetic {
  position: relative;
  padding-right: 0.4rem;
  transition: transform 480ms var(--ease-spring), background 240ms var(--ease-spring);
}
.btn--magnetic:active { transform: scale(0.98) translateY(0); }
.btn--magnetic .arrow-pill {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 246, 236, 0.18);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 480ms var(--ease-spring), background 240ms var(--ease-spring);
}
.btn--magnetic:hover .arrow-pill {
  background: rgba(255, 246, 236, 0.32);
  transform: translate(2px, -1px) scale(1.06);
}
/* Light variant of magnetic */
.btn--magnetic.btn--ghost .arrow-pill,
.btn--magnetic.btn--light .arrow-pill {
  background: rgba(57, 51, 44, 0.08);
}
.btn--magnetic.btn--ghost:hover .arrow-pill,
.btn--magnetic.btn--light:hover .arrow-pill {
  background: var(--c-clay);
  color: var(--c-ivory);
}

@media (max-width: 720px) {
}

/* ===== EDITORIAL PRICING CARDS (double-bezel) ===== */
.price-grid--editorial {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 880px) {
  .price-grid--editorial { grid-template-columns: 1fr; }
}

a.price-card--editorial {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
a.price-card--editorial:hover { color: inherit; }
.intro-band__link {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.intro-band__link:hover { color: inherit; }

/* Outer shell */
.price-card--editorial {
  padding: 0.45rem;
  background: rgba(57, 51, 44, 0.035);
  border: var(--hairline);
  border-radius: clamp(1.5rem, 2.2vw, 2rem);
  transition: transform 600ms var(--ease-spring), box-shadow 480ms var(--ease-spring);
  box-shadow: var(--shadow-diffuse);
}
.price-card--editorial:hover {
  transform: translateY(-4px);
  box-shadow: 0 50px 90px -32px rgba(57, 51, 44, 0.28);
}
/* Inner core */
.price-card--editorial > .pc-inner {
  background: var(--c-cream-soft);
  border-radius: clamp(1.1rem, 1.7vw, 1.55rem);
  padding: clamp(2rem, 3vw, 2.6rem) clamp(1.6rem, 2.6vw, 2.2rem) clamp(1.6rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 100%;
  box-shadow: var(--inset-highlight);
}
/* Dark featured */
.price-card--editorial.is-featured {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: var(--shadow-diffuse-deep);
}
.price-card--editorial.is-featured:hover {
  box-shadow: 0 50px 100px -32px rgba(0, 0, 0, 0.55);
}
.price-card--editorial.is-featured > .pc-inner {
  background: var(--c-dark);
  color: var(--c-ivory);
  box-shadow: inset 0 1px 0 rgba(255, 246, 236, 0.08);
}
.price-card--editorial.is-featured h4,
.price-card--editorial.is-featured .pc-amount { color: var(--c-ivory); }
.price-card--editorial.is-featured .pc-amount small,
.price-card--editorial.is-featured p { color: rgba(255, 246, 236, 0.72); }

.pc-amount {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 700;                /* prijzen dik gedrukt */
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-top: 0.4rem;
}
.pc-amount small {
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--c-earth);
  margin-left: 0.3rem;
  letter-spacing: 0;
  font-weight: 400;
}

.pc-cta {
  margin-top: auto;
  padding-top: 0.6rem;
}

/* ===== EDITORIAL SPLIT HERO (about page) ===== */
.editorial-hero {
  background: var(--c-cream);
  padding-block: clamp(5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
}
.editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 22% 30%, rgba(168, 84, 60, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.editorial-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
}
@media (max-width: 880px) {
  .editorial-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.editorial-hero h1 {
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-top: 1.2rem;
}
.editorial-hero h1 em {
  font-style: italic;
  color: var(--c-clay-warm);   /* zelfde goud als de andere grote koppen */
}
.editorial-hero .lead {
  margin-top: 1.6rem;
  max-width: 48ch;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}
@media (max-width: 880px) {
}
@media (max-width: 880px) { }

/* ==========================================================
   PRICING · membership / credits / 1-on-1 layouts
   ========================================================== */
.price-grid--two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 880px) { .price-grid--two { grid-template-columns: 1fr; } }

/* feature list inside editorial cards */
.pc-features {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.1rem 0 0;
}
.pc-features li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-earth);
}
.pc-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-clay);
}
.price-card--editorial.is-featured .pc-features li { color: rgba(255, 246, 236, 0.78); }
.price-card--editorial.is-featured .pc-features li::before { background: var(--c-amber); }

/* wide intro-offer band (double bezel) */
.intro-band {
  padding: 0.45rem;
  background: rgba(57, 51, 44, 0.035);
  border: var(--hairline);
  border-radius: clamp(1.5rem, 2.2vw, 2rem);
  box-shadow: var(--shadow-diffuse);
  transition: transform 600ms var(--ease-spring), box-shadow 480ms var(--ease-spring);
}
.intro-band:hover { transform: translateY(-3px); box-shadow: 0 50px 90px -32px rgba(57, 51, 44, 0.26); }
.intro-band__inner {
  background: var(--c-cream-soft);
  border-radius: clamp(1.1rem, 1.7vw, 1.55rem);
  box-shadow: var(--inset-highlight);
  padding: clamp(1.8rem, 3.4vw, 2.8rem) clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.intro-band__copy { max-width: 46ch; }
.intro-band__price { text-align: right; flex: 0 0 auto; }
@media (max-width: 640px) { .intro-band__price { text-align: left; } }

/* small note under a price group */
.pc-note {
  text-align: center;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--c-earth);
}
.pc-note a {
  color: var(--c-clay);
  border-bottom: 1px solid rgba(168, 84, 60, 0.35);
  padding-bottom: 1px;
}
.pc-note a:hover { border-bottom-color: var(--c-clay); }

/* tighter head for stacked price groups */
.price-group-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  margin-bottom: clamp(2rem, 3.6vw, 3rem);
}
.price-group-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.price-group-head p { margin: 0; max-width: 54ch; color: var(--c-earth); }

/* ==========================================================
   LINING NUMERALS
   Cormorant Garamond (and Bodoni Moda) default to old-style
   figures, which render "1" like a small-caps I and drop 4/7/9
   below the baseline. Prices, ratios and the wordmark need
   lining figures.
   ========================================================== */
h1, h2, h3, h4,
.nav__logo, .footer__brand,
.pc-amount, .pc-amount-soon,
.price__amount, .stat__num,
.tile__title, .split__quote,
.marquee__item, .editorial-hero h1 {
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-feature-settings: "lnum" 1, "onum" 0;
  font-feature-settings: "lnum" 1, "onum" 0;
}

/* pricing groups: consistent, calmer vertical rhythm */
.section--group { padding-block: clamp(2.6rem, 5vw, 4.4rem); }

/* ---------- WORDMARK + BANNER TYPOGRAPHY ---------- */
.footer__brand {
  font-family: var(--f-logo);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.hero__content h1 {
  /* The photograph is used untouched, so legibility is carried by the
     letters themselves: a soft dark halo hugging each glyph rather than
     a wash over the image. */
  text-shadow:
    1px 0 1px rgba(14, 9, 4, 0.75), -1px 0 1px rgba(14, 9, 4, 0.75),
    0 1px 1px rgba(14, 9, 4, 0.75), 0 -1px 1px rgba(14, 9, 4, 0.75),
    0 2px 14px rgba(14, 9, 4, 0.72),
    0 0 42px rgba(14, 9, 4, 0.50);
  /* Website-lettertype, niet dat van het logo: dezelfde Inter als de
     lopende tekst en de knoppen, in kapitalen met ruime letterafstand. */
  font-family: var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 500;
  font-size: clamp(1.85rem, 4.4vw, 3.5rem);
  line-height: 1.24;
  max-width: 13ch;
}
@media (max-width: 540px) {
  .hero__content h1 { letter-spacing: 0.1em; font-size: clamp(1.5rem, 7.4vw, 2.15rem); }
}

.footer__brand em { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 1.24em; line-height: 0; }

/* Large display accents keep the original, warmer terracotta.
   Small text stays on the darkened --c-clay for WCAG AA. */
.sub-hero h1 em,
.editorial-hero h1 em,
.hero__content h1 em,
.marquee__item em,
.price-group-head h2 em,
.section-head--center h2 em,
.section-head h2 em,
.cols2 h3 em { color: var(--c-clay-warm); }

/* Cards: lighter face + hairline so they sit ON the tinted band as objects */
.price-card--editorial > .pc-inner,
.intro-band__inner {
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
}
.price-card--editorial.is-featured > .pc-inner {
  background: var(--c-dark);
  border-color: rgba(232, 225, 213, 0.10);
}

/* ==========================================================
   CARD DETAILS, TOUCH TARGETS & HERO CTA BLOCK
   ========================================================== */

/* Pills are flex items in a column card and would otherwise
   stretch to the full card width. */
.pc-inner > .eyebrow--pill { align-self: flex-start; }

/* Touch targets: 44px minimum on interactive controls (mobile first) */
.nav__burger { width: 44px; height: 44px; }
.nav__burger span { left: 11px; right: 11px; }
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 22px; }
.nav__burger span:nth-child(3) { top: 27px; }
.footer__social a { width: 44px; height: 44px; }
.footer__list a { padding: 0.55rem 0; }
@media (max-width: 880px) {
  .nav__menu a { padding-block: 0.35rem; }
}

/* Contact map keeps a usable height on a phone */
.map-frame { aspect-ratio: 21 / 9; }
@media (max-width: 720px) { .map-frame { aspect-ratio: 4 / 3; } }

/* Hero: stacked CTA block with a quiet meta line */
.hero__ctas { align-items: center; }
.hero__tagline {
  display: block;
  margin: 0.9rem 0 0;
  padding: 0;
  /* Promo line, not a control: no pill. Small text over a photograph
     cannot rely on a measured contrast ratio, so the glyphs carry their
     own dark ring: four 1px offsets seal every edge, two soft blurs lift
     it off the brightest part of the wall. */
  text-shadow:
    1px 0 1px rgba(14, 9, 4, 0.92), -1px 0 1px rgba(14, 9, 4, 0.92),
    0 1px 1px rgba(14, 9, 4, 0.92), 0 -1px 1px rgba(14, 9, 4, 0.92),
    0 1px 6px rgba(14, 9, 4, 0.85), 0 2px 16px rgba(14, 9, 4, 0.75);
  font-family: var(--f-body);
  font-size: clamp(0.7rem, 2.6vw, 0.92rem);
  font-weight: 400;                /* dunner, op verzoek */
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #F4EFE6;                  /* wit, op verzoek */
  /* Mag afbreken wanneer de kolom te smal is: nowrap kapte op smalle
     telefoons het laatste woord af tegen de rand van het beeld. Geen
     ch-maat hier, die schaalt mee met de letter en breekt onvoorspelbaar. */
  max-width: 100%;
}
@media (max-width: 540px) {
  /* stond op stretch, waardoor de knop de volle schermbreedte pakte */
  .hero__ctas { align-items: flex-start; }
  .hero__tagline { text-align: left; letter-spacing: 0.15em; }
}

/* About hero without a portrait: one column.
   NB: a ch-based max-width on the wrapper is sized by the wrapper's own
   font-size, not the headline's, which crushes the h1. Constrain the
   elements themselves instead. */
.editorial-hero__grid--single { grid-template-columns: 1fr; }
.editorial-hero__grid--single .editorial-hero__copy { max-width: none; }
.editorial-hero__grid--single h1 { max-width: 15ch; }
.editorial-hero__grid--single .lead { max-width: 62ch; }

/* ==========================================================
   CLASS HOURS · weekly availability strip
   ========================================================== */
.hours {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hours--schedule {
  margin-top: 2.5rem;
  margin-bottom: 2.25rem;
}

.sub-hero--schedule {
  overflow: visible;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.sub-hero--schedule .cal {
  margin-top: 2.25rem;
}
.cal {
  isolation: isolate;
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: clamp(1.1rem, 1.7vw, 1.55rem);
  box-shadow: var(--shadow-diffuse);
  overflow: hidden;
}
.cal__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  background: var(--c-dark);
  color: var(--c-ivory);
}
.cal__label {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-style: italic;
  color: var(--c-ivory);
  text-align: center;
  line-height: 1.2;
}
.cal__label [data-cal-range] {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-light);
}
.cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 225, 213, 0.38);
  background: transparent;
  color: var(--c-ivory);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cal__nav:hover {
  background: var(--c-ivory);
  border-color: var(--c-ivory);
  color: var(--c-dark);
}
.cal__nav:first-child { justify-self: start; }
.cal__nav:last-child { justify-self: end; }
.cal__viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--c-card);
  height: 320px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-bone) transparent;
}
.cal__spacer {
  flex: 0 0 1.5rem;
  background: var(--c-card);
}
.cal__clip {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
.cal__clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--c-card);
  mix-blend-mode: darken;
  pointer-events: none;
}
.cal__viewport.is-sized {
  transition: height 0.28s var(--ease);
}
.cal__clip iframe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  width: 100%;
  min-width: 860px;
  height: calc(100% + 48px);
  margin-top: -48px;
  border: none;
  background: var(--c-card);
  visibility: hidden;
  pointer-events: none;
}
.cal__clip iframe.is-on {
  visibility: visible;
  pointer-events: auto;
}
.cal__viewport { display: none; }
.cal__list {
  display: block;
  padding: 0.35rem 1.5rem 1.6rem;
}
.cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 1.15rem 1.25rem 0.55rem;
}
.cal__dow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  padding: 0.2rem 0 0.25rem;
  min-width: 0;
  color: var(--c-earth);
}
.cal__dow-name {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  line-height: 1;
}
.cal__dow-num {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cal__dow.is-on { color: var(--c-ink); }
.cal__dow.is-on .cal__dow-name { font-weight: 600; }
.cal__dow.is-on .cal__dow-num {
  background: var(--c-dark);
  color: var(--c-ivory);
}
.cal__dow-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 4px;
}
.cal__dow-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
}
.cal__dow-dots.has-class i { background: var(--c-bone); }
.cal__dow.is-on .cal__dow-dots.has-class i { background: var(--c-amber); }
.cal__day + .cal__day {
  margin-top: 1.15rem;
}
.cal__day-title {
  margin: 0 0 0.55rem;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 500;
  color: var(--c-clay-warm);
  line-height: 1.2;
  text-transform: capitalize;
}
.cal__class {
  display: grid;
  grid-template-columns: 6.4rem 1fr auto;
  align-items: center;
  gap: 0.7rem 0.85rem;
  min-height: 3.4rem;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.45rem;
  background: var(--c-ivory);
  border: 1px solid var(--c-hairline);
  border-radius: 0.85rem;
  color: var(--c-coffee);
}
.cal__day .cal__class:last-child,
.cal__list > .cal__class:last-child { margin-bottom: 0; }
.cal__class:hover { color: var(--c-coffee); }
.cal__class:active { background: var(--c-card); }
.cal__time {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-dark);
  font-variant-numeric: tabular-nums;
}
.cal__class-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.cal__name {
  font-family: var(--f-display);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--c-ink);
  line-height: 1.15;
}
.cal__who {
  font-size: 0.78rem;
  color: var(--c-earth);
}
.cal__go {
  font-size: 1.1rem;
  color: var(--c-clay-warm);
}
.cal__empty {
  margin: 0;
  padding: 1.4rem 0.2rem 0.4rem;
  text-align: center;
  color: var(--c-earth);
  font-size: 0.95rem;
}
html.is-cal-modal,
body.is-cal-modal { overflow: hidden; }
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  overflow: hidden;
  background: rgba(34, 30, 24, 0.58);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}
.cal-modal.is-on {
  opacity: 1;
  visibility: visible;
}
.cal-modal__card {
  display: flex;
  flex-direction: column;
  width: min(48rem, 100%);
  max-width: 100%;
  height: min(32rem, calc(100dvh - 2rem));
  background: #fff;
  border-radius: 1.05rem;
  box-shadow: 0 28px 70px rgba(34, 30, 24, 0.28);
  overflow: hidden;
}
.cal-modal__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem 0.7rem 1.15rem;
  background: var(--c-dark);
  color: var(--c-ivory);
}
.cal-modal__title {
  flex: 1;
  margin: 0;
  min-width: 0;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-modal__close {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--c-ivory);
  font-size: 1.7rem;
  line-height: 1;
}
.cal-modal__close:hover { background: rgba(232, 225, 213, 0.16); }
.cal-modal__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.cal-modal__loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}
.cal-modal__loader.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cal-modal__spin {
  width: 2.75rem;
  height: 2.75rem;
}
.cal-modal__spin-outer,
.cal-modal__spin-inner {
  fill: none;
  stroke-linecap: round;
  transform-origin: 40px 40px;
}
.cal-modal__spin-outer {
  stroke: var(--c-bone);
  stroke-width: 6;
  stroke-dasharray: 88 176;
  animation: cal-spin 1.1s linear infinite;
}
.cal-modal__spin-inner {
  stroke: var(--c-dark);
  stroke-width: 6;
  stroke-dasharray: 44 88;
  animation: cal-spin 0.8s linear infinite reverse;
}
@keyframes cal-spin {
  to { transform: rotate(360deg); }
}
.cal-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
}
.cal-modal__frame.is-ready { opacity: 1; }
@media (max-width: 880px) {
  .cal__list {
    padding: 0.2rem 0.95rem 1.25rem;
  }
  .cal__days {
    padding: 0.85rem 0.4rem 0.45rem;
  }
  .cal__dow-name { font-size: 0.68rem; letter-spacing: 0.02em; }
  .cal__dow-num {
    width: 2.05rem;
    height: 2.05rem;
    font-size: 0.92rem;
  }
  .cal__bar {
    padding: 0.75rem 0.8rem;
    gap: 0.4rem;
    grid-template-columns: 2.75rem 1fr 2.75rem;
  }
  .cal__nav {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    gap: 0;
  }
  .cal__nav-text { display: none; }
  .cal__label { font-size: 1.2rem; }
  .cal__class {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time go"
      "copy go";
    align-items: center;
  }
  .cal__time {
    grid-area: time;
  }
  .cal__class-copy { grid-area: copy; }
  .cal__go { grid-area: go; align-self: center; }
}
.hours__days {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.hours__days span {
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-coffee);
  background: var(--c-card);
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
}
.hours__time {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--c-ink);
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}
.hours__note {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3.8vw, 1.7rem);
  color: var(--c-clay);
  max-width: 46ch;
  text-align: center;
}
@media (max-width: 540px) {
  /* keep all seven days on one row on a phone */
  .hours__days { gap: 0.3rem; flex-wrap: nowrap; }
  .hours__days span { padding: 0.5rem 0.5rem; letter-spacing: 0.08em; font-size: 0.68rem; }
}

.footer__brand em { color: var(--c-ivory); }

/* ==========================================================
   MERKCIJFER IN LOPENDE DISPLAYTEKST
   Cormorant zet de "1" op x-hoogte, waardoor "Studio 1 Pilates"
   in een citaat of kop leest als "Studio l Pilates". Zelfde
   correctie als in het woordmerk.
   ========================================================== */
.num {
  font-size: 1.15em;
  line-height: 0;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum" 1, "onum" 0;
          font-feature-settings: "lnum" 1, "onum" 0;
}

/* ==========================================================
   SOCIALE ICONEN IN MERKKLEUR
   De cirkel blijft rustig; het glyph draagt de kleur. Bij hover
   vult de cirkel zich met dezelfde kleur.
   ========================================================== */
.footer__social a[aria-label="WhatsApp"] { color: #25D366; }
.footer__social a[aria-label="WhatsApp"]:hover {
  background: #25D366; border-color: #25D366; color: #0B2E17;
}
/* TikTok is wit met een cyaan en een magenta verschuiving */
.footer__social a[aria-label="TikTok"] { color: #FFFFFF; }
.footer__social a[aria-label="TikTok"] svg {
  filter: drop-shadow(-1.4px -1.2px 0 #25F4EE) drop-shadow(1.4px 1.2px 0 #FE2C55);
}
.footer__social a[aria-label="TikTok"]:hover {
  background: #FFFFFF; border-color: #FFFFFF;
}
.footer__social a[aria-label="TikTok"]:hover svg {
  color: #010101;
  filter: drop-shadow(-1.4px -1.2px 0 #25F4EE) drop-shadow(1.4px 1.2px 0 #FE2C55);
}
/* Instagram: het verloop zit in de SVG zelf, de rand volgt in roze */
.footer__social a[aria-label="Instagram"] { border-color: rgba(214, 41, 118, 0.55); }
.footer__social a[aria-label="Instagram"]:hover {
  background: rgba(214, 41, 118, 0.16); border-color: #D62976;
}
.footer__social a[aria-label="WhatsApp"],
.footer__social a[aria-label="TikTok"] { border-color: rgba(232, 225, 213, 0.22); }

/* Grotere variant van de eyebrow, voor aankondigingen die op moeten vallen. */
.eyebrow--lg {
  font-size: clamp(1.02rem, 3vw, 1.35rem);
  letter-spacing: 0.28em;
  font-weight: 600;
}

/* Kop zonder terracotta accent, volledig in het donkerbruin. */
.h1--dark { color: var(--c-clay-warm); }
.h1--dark em { color: var(--c-clay-warm); font-style: normal; }

/* Prijslijst: titels en het 1:1-kopje dik gedrukt, één bedrag in goud. */
.price-card--editorial h4, .price-card--editorial h4 em { font-weight: 700; }
.price-group-head h2 { font-weight: 700; }
.pc-amount--gold { color: var(--c-amber); }
.pc-amount small { font-weight: 400; }

/* ==========================================================
   ACCOUNTPAGINA · één korte boodschap, midden in beeld
   Twee dingen duwden SOON uit het midden: de sub-hero heeft
   meer ruimte boven dan onder, en .sub-hero h1 heeft een
   max-width zonder auto-marge, waardoor het tekstblok links
   staat en alleen de tekst dáárbinnen gecentreerd is.
   ========================================================== */
.sub-hero--center {
  min-height: 80vh;
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  text-align: center;
}
.sub-hero--center h1,
.sub-hero--center .lead { margin-inline: auto; }
.sub-hero__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }