/* =========================================================
   Maths with Khalid: shared components
   ========================================================= */
/* ---------- your button system (+ edge fix) ---------- */
.btn-wrap { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5em; font-size: 2em; }
@media screen and (max-width: 479px) { .btn-wrap { font-size: 1.75em; } }
.btn { --btn-height: 2em; position: relative; display: flex; height: 2em; min-height: 50px; padding-right: 1.25em; padding-left: 1.25em; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; border-radius: calc(var(--btn-height) * 0.5); }
.btn:hover { text-decoration: none; }
.btn__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 1.5em; background-color: var(--amber-400); }
.btn__circle-wrap { position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; border-radius: 1.5em; }
.btn__circle { position: absolute; left: 50%; top: 50%; display: block; width: 100%; border-radius: 50%; background-color: var(--amber-400); pointer-events: none; }
.before__100 { display: block; padding-top: 100%; }
.btn__text { position: relative; display: flex; justify-content: flex-start; align-items: center; color: var(--indigo-950); }
.btn-text-p { margin-bottom: 0; padding-bottom: 0.05em; font-size: 18px; line-height: 1.2; font-weight: 500; color: currentcolor; white-space: nowrap; }
.btn .btn__text { transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1); }
.btn .btn__circle { transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1); transform: translate(-50%, -50%) scale(0) rotate(0.001deg); }
.btn:hover .btn__circle { transform: translate(-50%, -50%) scale(1) rotate(0.001deg); }
.btn[data-theme="dark"] .btn__bg { background-color: var(--indigo-800); }
.btn[data-theme="dark"] .btn__text { color: var(--white); }
.btn[data-theme="dark"] .btn__circle { background-color: var(--amber-400); }
.btn[data-theme="dark"]:hover .btn__text { color: var(--indigo-950); }
.btn[data-theme="light"] .btn__bg { background-color: var(--white); }
.btn[data-theme="light"] .btn__circle { background-color: var(--indigo-100); }
.btn[data-theme="primary"] .btn__bg { background-color: var(--amber-400); }
.btn[data-theme="primary"] .btn__circle { background-color: var(--amber-500); }
.btn[data-theme="outline"] .btn__bg { background-color: transparent; border: 2px solid var(--indigo-800); }
.btn[data-theme="outline"] .btn__circle { background-color: var(--indigo-800); }
.btn[data-theme="outline"]:hover .btn__text { color: var(--white); }
.btn { overflow: hidden; isolation: isolate; }
/* Edge fix 2: once the circle has fully covered the button, the fill underneath switches to the circle's colour,
   so nothing different can bleed through at the curved edge. It switches straight back when the cursor leaves. */
.btn .btn__bg { transition: background-color 0s; }
.btn:hover .btn__bg { transition: background-color 0s 0.45s; }
.btn[data-theme="dark"]:hover .btn__bg { background-color: var(--amber-400); }
.btn[data-theme="primary"]:hover .btn__bg { background-color: var(--amber-500); }
.btn[data-theme="light"]:hover .btn__bg { background-color: var(--indigo-100); }
.btn:not([data-theme="outline"]) .btn__bg, .btn:not([data-theme="outline"]) .btn__circle-wrap { border-radius: 0; }
.btn:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 3px; }

.btn-wrap.is--small { font-size: 1.5em; } /* new: compact buttons inside cards */


button.btn { border: 0; background: none; font: inherit; color: inherit; }

/* ---------- page transition (your CSS) ---------- */
.transition {
  position: fixed;
  inset: 0px;
  z-index: 1000;            /* was 25: above the header */
  overflow: clip;
  pointer-events: none;
}
.transition__shape {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  color: var(--indigo-400);  /* was rgb(206, 174, 255) */
}
.transition__svg {
  position: absolute;
  left: -15%;
  top: -15%;
  width: 130%;
  height: 130%;
}

/* ---------- header (logo, always visible) ---------- */
/* MWK: logo lives at the top of each page (as in your Webflow build), scrolls away with the header and leaves with the page on transition */
main[data-barba="container"] { position: relative; }
.page-logo { position: absolute; top: 2rem; left: 2rem; z-index: 20; display: flex; align-items: center; width: 201px; height: 3.5em; color: var(--white); }
.page-logo svg { display: block; height: 3em; width: auto; --la: currentColor; --lb: var(--indigo-400); }
main[data-page-theme="light"] .page-logo { color: var(--indigo-800); } /* light-header pages get the dark logo */
@media screen and (max-width: 479px) { .page-logo { left: 1.5rem; } }

/* =========================================================
   Drawer nav: inspired by your Fixed Nav, rebuilt for the brand
   ========================================================= */
:root {
  --nav-ease: cubic-bezier(.7, 0, .2, 1);   /* your drawer easing */
  --nav-dur: .8s;
  --animation-primary: all .5s cubic-bezier(.7, 0, .3, 1);
  --animation-fast: all .3s cubic-bezier(.7, 0, .3, 1);
  --animation-smooth: all .7s cubic-bezier(.7, 0, .3, 1);
  --animation-slow: all .9s cubic-bezier(.7, 0, .3, 1);
  --nav-btn: clamp(4em, 6vw, 95px);          /* 64px on phones, ~86px at 1440, never more than 95px */
  --nav-gap: clamp(1.25rem, 2.5vw, 2.25rem);   /* our take on your gap-padding: the dot's distance from the word */
  --nav-edge: 2rem;                          /* same corner spacing as the logo (rem, so the button's larger font doesn't stretch it) */
}

/* ---------- 1. the button: always present, our directional hover ---------- */
.nav-btn {
  position: fixed; top: var(--nav-edge); right: var(--nav-edge); z-index: 1300;
  font-size: clamp(16px, 1.2vw, 19px); /* your template's root size, applied to the button only, so it grows on big screens */
  width: var(--nav-btn); height: var(--nav-btn); padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  overflow: hidden; isolation: isolate;
  background: transparent;
}
.nav-btn .btn__bg { position: absolute; inset: 0; background: var(--indigo-800); transition: background-color var(--dur-primary) var(--ease-out); }
.nav-btn .btn__circle-wrap { position: absolute; inset: 0; overflow: hidden; }
.nav-btn .btn__circle { position: absolute; left: 50%; top: 50%; width: 100%; border-radius: 50%; background: var(--indigo-400); pointer-events: none; transform: translate(-50%, -50%) scale(0); } /* hidden by default (phones never run the hover); GSAP animates it on hover devices */
.nav-btn .before__100 { display: block; padding-top: 100%; }
/* your bars: 28% wide, 8% tall, 1px lines, your fast animation */
.nav-btn__bars { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 28%; height: 8%; opacity: 1; color: var(--white); transition: color .7s cubic-bezier(.625, .05, 0, 1); }
.nav-btn__bars::before, .nav-btn__bars::after { content: ""; display: block; position: absolute; left: 50%; height: 1px; width: 100%; transform: translate(-50%, -50%) rotate(0.001deg); background: currentColor; /* white, dark on hover */ transition: var(--animation-fast); }
.nav-btn__bars::before { top: 0; transform: translate(-50%, -50%); }
.nav-btn__bars::after { top: 100%; transform: translate(-50%, -50%); }
.nav-btn:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 4px; }
/* the ring: on only while the button sits over an indigo-800 section */
.nav-btn::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); opacity: 0; transition: opacity var(--dur-primary) var(--ease-out); } /* drawn above the fill layers so it can be seen */
.nav-btn.is--over-dark::after { opacity: 1; }
/* open: indigo-400 with a cross; the hover fill still works */
.is--nav-open .nav-btn .btn__bg { background: var(--indigo-400); }
.is--nav-open .nav-btn::after { opacity: 0; }
.is--nav-open .nav-btn__bars::before { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.is--nav-open .nav-btn__bars::after { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }

/* ---------- 2. backdrop: an indigo-950 tint, heaviest by the drawer ---------- */
.nav-back { position: fixed; inset: 0; z-index: 950; /* below the page transition (1000) */ pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, 1) 80%); /* neutral dark, not blue */
  transition: opacity var(--nav-dur) var(--nav-ease); }
.is--nav-open .nav-back { opacity: .45; pointer-events: all; }

/* ---------- 3. the drawer: your slide + curved edge ---------- */
.nav-drawer { position: fixed; top: 0; right: 0; z-index: 960; /* below the page transition, so the scribble covers it as it closes */ height: 100vh; height: 100dvh; width: clamp(28em, 42vw, 38em); /* a share of the screen until the phone breakpoint */
  background: var(--indigo-800); color: var(--white);
  transform: translate(calc(100% + 9vw), 0) rotate(.001deg);  /* +9vw: the curve overhangs its 6vw strip, so this keeps it hidden */
  transition: transform var(--nav-dur) var(--nav-ease), width var(--nav-dur) var(--nav-ease); will-change: transform; visibility: hidden; } /* width animates as it snaps to full screen on phones */
.is--nav-open .nav-drawer { transform: translate(0, 0) rotate(.001deg); visibility: visible; }
.nav-drawer.is--animating { visibility: visible; }
.nav-curve { position: absolute; top: 0; left: 1px; height: 100%; transform: translateX(-100%); pointer-events: none; }
.nav-curve__wrap { position: relative; width: 6vw; height: 100%; transition: width .85s var(--nav-ease); will-change: width; }
.is--nav-open .nav-curve__wrap { width: 0; }
.nav-curve__shape { position: absolute; top: 50%; width: 775%; height: 150%; border-radius: 50%; background: var(--indigo-800); transform: translate(-6.5%, -50%); }

.nav-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 3em; height: 100%;
  padding: max(15vh, calc(var(--nav-edge) + var(--nav-btn) + 1.5em)) 7.5vw 10vh 7.5vw; overflow-y: auto;
  transition: .6s cubic-bezier(.7, 0, .2, 1); } /* your inner transition: padding eases instead of jumping when the screen is resized */ /* your 15vh / 7.5vw / 10vh, never tucked under the button */
.nav-label { color: var(--white); }
.nav-group__head { padding-bottom: 1.5em; border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* main links: Bricolage, staggered in behind the drawer (your timing) */
.menu-list { list-style: none; margin: 2.5em 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.menu-link { transform: translate(12vw, 0) rotate(.001deg); transition: transform var(--nav-dur) var(--nav-ease); will-change: transform; }
.is--nav-open .menu-link { transform: translate(0, 0) rotate(.001deg); }
.menu-link:nth-child(2) { transition-delay: .03s; }
.menu-link:nth-child(3) { transition-delay: .06s; }
.menu-link:nth-child(4) { transition-delay: .09s; }
.menu-link__a { position: relative; display: inline-block; padding: .05em 0; color: var(--white); text-decoration: none;
  font-family: Bricolage Grotesque, sans-serif; font-weight: 600; font-size: calc(.875 * clamp(3.25rem, 5vw, 4rem)); line-height: 1.2; letter-spacing: -.04em; } /* your base size and line height */
.menu-link__a:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 4px; border-radius: 4px; }
/* the dot: amber, beside the current page, follows the hover (your links-wrap logic) */
.menu-link__a::before { content: ""; position: absolute; top: 50%; left: calc(var(--nav-gap) * -1); width: calc(clamp(16px, 1.2vw, 19px) / 1.65); height: calc(clamp(16px, 1.2vw, 19px) / 1.65); border-radius: 50%; /* your size; the gap scales so it never leaves the drawer */
  background: var(--amber-500); transform: translate(-50%, -50%) scale(0) rotate(.001deg); transition: transform var(--dur-fast) var(--ease-out); }
.menu-link__a[aria-current]::before { transform: translate(-50%, -50%) scale(1) rotate(.001deg); }
.menu-list:hover .menu-link .menu-link__a::before { transform: translate(-50%, -50%) scale(0) rotate(.001deg); }
.menu-list:hover .menu-link .menu-link__a:hover::before { transform: translate(-50%, -50%) scale(1) rotate(.001deg); }

/* questions: our buttons do the work */
.nav-questions .btn-wrap { margin-top: 1.75em; font-size: 1.75em; flex-wrap: nowrap; } /* the two buttons always sit side by side */
.nav-questions { transform: translate(6vw, 0); opacity: 0; transition: transform var(--nav-dur) var(--nav-ease), opacity var(--dur-primary) var(--ease-out); transition-delay: 0s; }
.is--nav-open .nav-questions { transform: none; opacity: 1; transition-delay: .15s; }

@media screen and (max-height: 680px) { .menu-link__a { font-size: min(3rem, calc(.875 * clamp(3.25rem, 5vw, 4rem))); line-height: 1.25; } } /* your height step: 3em, but never bigger than the base */
@media screen and (max-width: 540px) {
  .nav-drawer { width: 100%; transform: translate(calc(100% + 30vw), 0) rotate(.001deg); }
  .nav-curve__wrap { width: 20vw; }
  .nav-back { background: rgba(0, 0, 0, 1); }
  .nav-inner { padding: calc(var(--nav-edge) + var(--nav-btn) + 2em) 1.5em 2.5em; }
  .menu-list { width: 100%; } .menu-link { width: 100%; } .menu-link__a { display: block; width: 100%; }
  .menu-link__a::before { left: auto; right: .4em; width: calc(clamp(16px, 1.2vw, 19px) / 1.5); height: calc(clamp(16px, 1.2vw, 19px) / 1.5); } /* as your original: full-width rows, dot at the right edge */
}
@media screen and (max-width: 479px) { :root { --nav-edge: 1.5rem; } .nav-questions .btn-wrap { font-size: 1.6em; } }
@media (prefers-reduced-motion: reduce) { .nav-drawer, .menu-link, .nav-curve__wrap, .nav-back, .nav-questions { transition-duration: .01s !important; transition-delay: 0s !important; } }

/* modals cover the menu button too, like any overlay */
.nav-btn { transition: opacity var(--dur-primary) var(--ease-out); }
/* MWK: the menu button stays put when a pop-up opens (it simply sits under the dark overlay) */

/* ---------- logo lines up with the button ---------- */
.page-logo { top: var(--nav-edge); height: var(--nav-btn); } /* same top and height as the button, so the logo sits on its centre line */
@media screen and (max-width: 479px) { .page-logo { left: var(--nav-edge); } }

/* ---------- closing block: marquee + footer ---------- */
.closing { background: var(--indigo-800); color: var(--white); overflow: hidden; }
/* ---------- your marquee CSS ---------- */
.marquee {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  background-color: transparent;
  color: var(--indigo-400);
}

.marquee-advanced {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

.marquee-advanced__scroll {
  position: relative;
  display: flex;
  width: 100%;
  will-change: transform;
}

.marquee-advanced__collection {
  position: relative;
  display: flex;
  will-change: transform;
}

.marquee-advanced__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-size: max(8em, 8vw);
}

@media screen and (max-width: 767px) {
  .marquee-advanced__item {
    font-size: max(6em, 8vw);
  }
}

@media screen and (max-width: 479px) {
  .marquee-advanced__item {
    font-size: max(4em, 8vw);
  }
}

.marquee__advanced__p {
  margin-right: 0.25em;
  margin-bottom: 0px;
  font-size: 1em;
  white-space: nowrap;
}

.marquee__advanced__arrow-svg {
  position: relative;
  width: 1em;
  margin-right: 0.25em;
  color: var(--amber-500); /* was amber-400: matches the hero's amber text on indigo-800 */
}

/* Rotating arrow left/right based on Scroll Direction */
.marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="inverted"] .marquee__advanced__arrow-svg {
  transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  transform: rotate(-180deg);
}

[data-marquee-status="inverted"] .marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="normal"] .marquee__advanced__arrow-svg {
  transform: rotate(-359.999deg);
}


.closing .marquee { padding-top: 6em; }
.footer { display: flex; flex-direction: column; gap: 2.5em; padding-top: 5em; padding-bottom: 2.5em; margin-left: auto; margin-right: auto; } /* centred like every other container (it sits outside .section, so missed that rule) */
.footer__cta { display: flex; width: 100%; justify-content: space-between; align-items: flex-end; gap: 2em; flex-wrap: wrap; }
.footer__cta h2 { text-wrap: balance; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em 1.75em; width: 100%; }
.footer__links a, .footer__legal a { color: var(--white); text-decoration: none; opacity: .6; transition: opacity var(--dur-fast) var(--ease-out); }
.footer__links a:hover, .footer__legal a:hover { opacity: 1; }
.footer__line { width: 100%; height: 1px; background: rgba(255, 255, 255, .3); }
.footer__base { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: .75em 2em; flex-wrap: wrap; }
.footer__base p { font-size: 1em; opacity: .8; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .75em; }
.footer__legal .is--copy { color: var(--amber-500); }
.footer__time { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
@media screen and (max-width: 767px) {
  .closing .marquee { padding-top: 4em; }
  .footer { padding-top: 3.5em; gap: 2em; }
  .footer__links { justify-content: flex-start; }
}

/* ---------- page stubs (temporary, until each page is built) ---------- */
.page-stub { min-height: 80vh; }
.page-stub .container { min-height: 80vh; justify-content: flex-end; gap: 1.5em; padding-top: 11em; }
.page-stub h1 { text-wrap: balance; }
.page-stub h1 span { color: var(--amber-500); }
.page-stub p:not(.eyebrow-mono) { max-width: 34ch; opacity: .8; }

/* =========================================================
   Components used on Home (and later pages)
   ========================================================= */

/* ---------- hero (your hero, dots grid and rotating text CSS) ---------- */
/* ---------- your hero CSS ---------- */
.hero {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  justify-content: center;
  align-items: stretch;
  background-color: var(--indigo-800);
}





.hero-content {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 90ch;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 1 0%;
  gap: 28px;
  color: var(--white);
}

@media screen and (max-width: 991px) {
  .hero-content {
    max-width: none;
  }
}

.hero-bottom {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--white);
}

.scroll-down {
  opacity: 0.6;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease;
  font-family: "JetBrains Mono";
  color: var(--white);
  text-decoration: none;
}

.scroll-down.-wfp-hover,
.scroll-down:hover {
  opacity: 0.8;
}

.coordinates__inner {
  z-index: 1;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.coordinates__p {
  margin-bottom: 0px;
  opacity: 0.6;
  font-family: "JetBrains Mono";
  font-size: 1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.eyebrow-mono {
  opacity: 0.6;
  font-family: "JetBrains Mono";
}

.rotating-text__heading {
  line-height: 1;
  text-align: left;
}

.rotating-text__highlight {
  color: var(--amber-500); /* was amber-400: more saturated, pops more on indigo-800 */
}

.hero-inro {
  width: 100%;
  max-width: 40ch;
  opacity: 0.8;
  font-size: 1.5em;
}

@media screen and (max-width: 767px) {
  .hero-inro {
    font-size: 1.25em;
  }
}

@media screen and (max-width: 479px) {
  .hero-inro {
    font-size: 1.125em;
  }
}

/* ---------- your dots grid CSS ---------- */
.section-dots {
  position: absolute;
  inset: 0%;
  display: flex;
  overflow: hidden;
  min-height: 100vh;
  padding: 0em;
  justify-content: center;
  align-items: stretch;
  color: rgb(239, 238, 236);
}

.section-dots__wrap {
  position: relative;
  width: 100%;
  min-height: 30em;
}

.dots-container {
  position: absolute;
  inset: 0px;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  grid-auto-columns: 1fr;
  gap: 48px; /* was 3em: em now follows the 5px font-size */
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  pointer-events: none;
  font-size: 5px; /* the dot size the script reads */
}

@media screen and (max-width: 767px) {
  .dots-container {
    inset: 1em;
  }
}

.dot {
  position: relative;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: rgb(42, 49, 108);
  will-change: transform, background-color;
  transform: translate(0px, 0px);
  transform-origin: center center;
}

/* ---------- your rotating text CSS ---------- */
[data-rotating-title] {
  width: 100%;
}

[data-rotating-words] {
  display: inline-block;
  position: relative;
}

.rotating-text__inner {
  display: inline-block;
}

.rotating-text__word {
  display: block;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
}

.rotating-line{
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  white-space: nowrap;
}

.rotating-line-mask{
  overflow-x: visible !important;
  overflow-y: clip !important;
}


[data-coordinates-x], [data-coordinates-y] { display: inline-block; min-width: 4ch; }
.hero .container.hero-container { padding-top: 9.5em; gap: 3em; }

/* ---------- highlight text on scroll (your CSS) ---------- */
/* ---------- your highlight text CSS ---------- */
.intro-container {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 3em;
}

.eyebrow-mono {
  opacity: 0.6;
  font-family: "JetBrains Mono";
}

.highlight-text-h {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 3em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.05em;
}

@media screen and (max-width: 991px) {
  .highlight-text-h {
    font-size: 2.5em;
  }
}

@media screen and (max-width: 767px) {
  .highlight-text-h {
    font-size: 2em;
  }
}


/* ---------- stacking sticky cards, bounce (your CSS) ---------- */
/* ---------- your stacking cards CSS ---------- */
.cards-stack {
  padding-top: 15dvh;
  padding-bottom: 15dvh;
}

.card-stack-container {
  margin-right: auto;
  margin-left: auto;
  max-width: var(--size-container);
}

.cards-stack__list {
  display: flex;
  width: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 5em;
}

.cards-stack__item {
  position: sticky;
  top: 10em;
  width: 100%;
  max-width: 25em;
  flex: 0 0 auto;
}

.cards-stack__item.is--wide {
  max-width: 80em;
}

@media screen and (max-width: 767px) {
  .cards-stack__item.is--wide {
    max-width: 25em;
  }
}

.cards-stack-card {
  display: flex;
  width: 100%;
  padding: 2.5em;
  flex-flow: column;
  justify-content: space-between;
  aspect-ratio: 2 / 3;
  border-radius: 2em;
  background-color: var(--white);
}

.cards-stack-card.is--wide {
  gap: 2em;
  aspect-ratio: 5 / 3;
}

@media screen and (max-width: 991px) {
  .cards-stack-card.is--wide {
    aspect-ratio: 5 / 4;
  }
}

@media screen and (max-width: 767px) {
  .cards-stack-card {
    font-size: 0.8em;
  }
}

@media screen and (max-width: 767px) {
  .cards-stack-card.is--wide {
    aspect-ratio: 2 / 3;
  }
}

.cards-stack-card__number {
  font-family: "Bricolage Grotesque";
  font-size: 6em;
  line-height: 0.95;
  font-weight: 800;
}

.cards-stack-card__end {
  display: flex;
  flex-flow: column;
  gap: 2em;
}

.cards-stack-card__h {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 3.375em;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.cards-stack-card__h.is--wide {
  font-family: "DM Sans";
  font-size: 5em;
}

@media screen and (max-width: 767px) {
  .cards-stack-card__h.is--wide {
    font-size: 3.375em;
  }
}

.cards-stack-card__services {
  display: flex;
  min-height: 11em;
  flex-flow: column;
  justify-content: flex-end;
}

@media screen and (max-width: 767px) {
  .cards-stack-card__services {
    font-size: 16px;
  }
}

.cards-stack-card__services-p {
  margin-bottom: 0px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.cards-stack-card.is--indigo--200 {
  background-color: var(--indigo-200);
}

.cards-stack-card.is--indigo--800 {
  background-color: var(--indigo-800);
  color: white;
}


/* ---------- momentum based hover cards (your CSS) ---------- */
/* ---------- your CSS (as built in Webflow) ---------- */
.tuition-card-container {
  display: flex;
  width: 100%;
  padding-top: 3em;
  justify-content: center;
  align-items: center;
}

.tuition-card__collection {
  max-width: 80em;
  justify-content: center;
  flex: 1 1 0%;
}

.tuition-card__list {
  display: flex;
  height: 100%;
  flex-flow: wrap;
  gap: 2em;
}

.tuition-card__item {
  position: relative;
  width: calc(0.333333 * (100% - 4em - 1px));
}

@media screen and (max-width: 991px) {
  .tuition-card__item {
    width: calc(0.5 * (100% - 2em - 1px));
  }
}

@media screen and (max-width: 767px) {
  .tuition-card__item {
    width: 100%;
  }
}

.tuition-card__wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.tuition-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 25em;
  border-radius: 1.5em;
  background-color: var(--white);
}

@media screen and (max-width: 767px) {
  .tuition-card {
    min-height: auto;
  }
}

.tuition-card__content {
  position: relative;
  left: 0px;
  top: 0px;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 2em;
  flex-flow: column;
  justify-content: space-between;
  gap: 3em;
}

.tuition-card_top {
  display: flex;
  flex-flow: column;
  gap: 1em;
}

.tuition-price {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: 0.5em;
}

.tuition-card__name {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.25em;
}

.tuition-card__check-svg {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.price-per {
  opacity: 0.7;
  line-height: 1.2em;
}

/* ---------- badge ---------- */
.demo-badge__wrap {
  position: absolute;
  top: 10%;
  right: 0%;
  z-index: 5;
  width: 16em;
  border-radius: 50%;
  transform: translate(50%, -50%);
}

@media screen and (max-width: 991px) {
  .demo-badge__wrap {
    inset: auto 15% 10% auto;
    transform: translate(50%, 50%);
  }
}

.demo-badge {
  position: relative;
  overflow: hidden;
  width: 50%;
  margin: 25%;
  border-radius: 50%;
}

.demo-badge__img {
  width: 100%;
}


.price-big { font-family: Bricolage Grotesque, sans-serif; font-weight: 700; font-size: 2.5em; line-height: 1; letter-spacing: -.05em; }

/* ---------- CSS tooltip (your CSS + brand tweaks) ---------- */
/* ---------- your CSS tooltip (base) ---------- */
.css-tooltip__icon { display: inline-block; width: 1em; height: 1em; margin-left: 0.125em; vertical-align: sub; cursor: pointer; }
.css-tooltip__box { position: absolute; left: 50%; bottom: 100%; display: flex; padding-top: 0.5em; padding-bottom: 0.5em; flex-flow: column; align-items: center; transform: translateX(-50%); }
.css-tooltip__box-inner { position: relative; display: flex; flex-flow: column; align-items: center; }
.css-tooltip__card { display: flex; width: 21em; margin-right: 0.5em; margin-left: 0.5em; padding: 1.5em; flex-flow: column; gap: 0.5em; border-radius: 0.75em; background-color: rgb(32, 29, 29); color: rgb(244, 244, 244); max-width: calc(-1em + 100vw); }
.css-tooltip__card-h { margin-top: 0px; margin-bottom: 0px; font-size: 1.25em; font-weight: 500; line-height: inherit; }
.css-tooltip__card-text { opacity: 0.75; }
.css-tooltip__card-p { margin-top: 0px; margin-bottom: 0px; }
.css-tootlip__tip { position: relative; display: flex; width: 2.5em; margin: -0.0625em 1.25em; }

/* ---------- your CSS tooltip (behaviour) ---------- */
[data-css-tooltip-icon] > svg path:not(:first-child) { display: none; }
[data-css-tooltip-icon="question"] > svg path:nth-child(2),
[data-css-tooltip-icon="question"] > svg path:nth-child(3) { display: block; }
[data-css-tooltip-icon="alert"] > svg path:nth-child(4),
[data-css-tooltip-icon="alert"] > svg path:nth-child(5) { display: block; }
[data-css-tooltip-icon="info"] > svg path:nth-child(6),
[data-css-tooltip-icon="info"] > svg path:nth-child(7),
[data-css-tooltip-icon="info"] > svg path:nth-child(8),
[data-css-tooltip-icon="info"] > svg path:nth-child(9) { display: block; }
[data-css-tooltip-hover] { position: relative; cursor: pointer; }
[data-css-tooltip-y] { transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1); opacity: 0; visibility: hidden; }
[data-css-tooltip-hover]:hover [data-css-tooltip-y] { opacity: 1; visibility: visible; }
.css-tooltip__box-inner { transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1); transform: translateY(1em) scale(0.9) rotate(0.001deg); }
[data-css-tooltip-hover]:hover [data-css-tooltip-y] .css-tooltip__box-inner { transform: translateY(0em) scale(1) rotate(0.001deg); }
[data-css-tooltip-y="bottom"] { top: 100%; bottom: unset; }
[data-css-tooltip-y="bottom"] .css-tooltip__card { order: 2; }
[data-css-tooltip-y="bottom"] .css-tootlip__tip { transform: scaleY(-1); }
[data-css-tooltip-y="bottom"] .css-tooltip__box-inner { transform: translateY(-1em) scale(0.9) rotate(0.001deg); }
[data-css-tooltip-x="left"] { align-items: flex-start; left: -2em; transform: translateX(0%); }
[data-css-tooltip-x="left"] .css-tooltip__box-inner { align-items: flex-start; }
[data-css-tooltip-x="right"] { align-items: flex-end; left: unset; right: -2em; transform: translateX(0%); }
[data-css-tooltip-x="right"] .css-tooltip__box-inner { align-items: flex-end; }

/* ---------- tooltip brand tweaks (new) ---------- */
.css-tooltip__card { background-color: var(--indigo-950); color: var(--white); width: 18em; }
.css-tootlip__tip { color: var(--indigo-950); }                     /* pointer matches the card */
.css-tooltip__card-h { font-weight: 600; }
[data-css-tooltip-hover]:focus-visible [data-css-tooltip-y] { opacity: 1; visibility: visible; } /* keyboard users too */
[data-css-tooltip-hover]:focus-visible [data-css-tooltip-y] .css-tooltip__box-inner { transform: translateY(0em) scale(1) rotate(0.001deg); }
[data-css-tooltip-hover]:focus-visible { outline: 2px solid var(--indigo-400); outline-offset: 2px; }
/* the tag is small mono text: reset the tooltip back to normal body type */
.tag .css-tooltip__box { font-family: DM Sans, sans-serif; font-size: 1rem; white-space: normal; line-height: 1.5; text-align: left; z-index: 10; }
.tag .css-tooltip__icon { margin-left: .35em; }
.css-tooltip__icon { width: 18px; height: 18px; } /* your size */


/* ---------- class cards, course cards (from the Timetable page) ---------- */
/* class cards */
.class-list { display: flex; flex-direction: column; gap: 1em; }
.class-card { display: grid; grid-template-columns: 1.2fr 1.5fr 1fr auto; gap: 2em; align-items: center; padding: 1.75em 2em; border-radius: 1.5em; background: var(--white); }
.class-card.is--hidden { display: none; }
.class-card__tags { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: .75em; }
.tag { display: inline-flex; align-items: center; padding: .3em .75em; border-radius: 999px; background: var(--indigo-100); color: var(--indigo-800); font-family: "JetBrains Mono"; font-size: .8125em; line-height: 1.4; white-space: nowrap; }
.tag.is--amber { background: var(--amber-400); color: var(--indigo-950); }
.tag.is--light { background: var(--cream); transition: background-color var(--dur-primary) var(--ease-out); }
.course-card:hover .tag.is--light { background: var(--indigo-100); } /* calm hover: the season tag warms up */
.class-card__name { font-family: Bricolage Grotesque, sans-serif; font-size: 2em; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.class-card__sub { margin-top: .35em; opacity: .6; font-size: 1em; }
.class-card__slots { display: flex; gap: .75em; }
.class-slot { flex: 1; display: flex; flex-direction: column; gap: .2em; padding: .9em 1.1em; border-radius: 1em; background: var(--cream); transition: background-color var(--dur-primary) var(--ease-out); }
.class-card:hover .class-slot { background: var(--indigo-100); } /* calm hover: the times warm up */
.class-slot__day { font-family: Bricolage Grotesque, sans-serif; font-weight: 700; font-size: 1.375em; letter-spacing: -.03em; line-height: 1; }
.class-slot__time { font-family: "JetBrains Mono"; font-size: .9375em; opacity: .7; }
.seats { display: flex; gap: 5px; margin-bottom: .6em; }
.seats i { width: 12px; height: 12px; border-radius: 50%; background: var(--indigo-100); transform: scale(.4); opacity: 0; transition: transform var(--dur-smooth) var(--ease-inout), opacity var(--dur-smooth) var(--ease-inout), background-color var(--dur-fast) var(--ease-inout); }
.seats i.is--taken { background: var(--indigo-800); }
.is--revealed .seats i { transform: scale(1); opacity: 1; }
.seats__label { font-family: "JetBrains Mono"; font-size: .875em; opacity: .7; }
.class-card.is--full .seats i.is--taken { background: var(--indigo-400); }
.class-card__action { justify-self: end; }
.empty-note { display: none; padding: 2em; border-radius: 1.5em; background: var(--white); }

/* course cards */
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.course-card { display: flex; flex-direction: column; gap: 1.25em; padding: 2.25em; border-radius: 1.5em; background: var(--white); min-height: 26em; }
.course-card__top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.course-card__status { font-family: "JetBrains Mono"; font-size: .8125em; opacity: .6; }
.course-card__title { font-size: 2.25em; max-width: 11em; margin-top: .5em; }
.course-card__blurb { opacity: .8; max-width: 30em; }
.course-card__meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 2em; margin-top: auto; padding-top: 1.25em; border-top: 1px solid rgba(23,26,54,.1); }
.course-card__meta dt { font-family: "JetBrains Mono"; font-size: .8125em; opacity: .6; }
.course-card__meta dd { font-weight: 600; font-size: 1.0625em; }
.course-note { margin-top: 2em; opacity: .7; font-size: 1em; }


@media screen and (max-width: 991px) {
  .class-card { grid-template-columns: 1fr auto; gap: 1.5em; }
  .class-card__slots { grid-column: 1 / -1; grid-row: 2; }
  .class-card__seats { grid-column: 1; grid-row: 3; }
  .class-card__action { grid-column: 2; grid-row: 3; align-self: end; }
  .course-card__meta { grid-template-columns: repeat(2, auto); gap: 1em 2em; }
}
@media screen and (max-width: 767px) {
  .course-grid { grid-template-columns: 1fr; }
  .course-card { min-height: auto; }
  .class-card { padding: 1.5em; }
}
@media screen and (max-width: 479px) {
  .class-card { grid-template-columns: 1fr; }
  .class-card__seats, .class-card__action { grid-column: 1; }
  .class-card__action { grid-row: 4; justify-self: start; }
  .course-card { padding: 1.75em; }
  .course-card__title { font-size: 2em; }
}

/* ---------- course details modal (from the Timetable page) ---------- */
/* ---------- course details modal (new) ---------- */
.course-card .btn-wrap { gap: .4em; }
button.btn { border: 0; background: none; font: inherit; color: inherit; }
.course-modal { position: fixed; inset: 0; z-index: 1300; /* was 600: above the header and menu */ display: flex; align-items: center; justify-content: center; padding: 2em; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--dur-primary); } /* stays visible until the closing animation has finished */
.course-modal.is--open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.course-modal__backdrop { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .8s cubic-bezier(.7, 0, .2, 1); } /* MWK: the site-wide overlay: neutral dark, no blur */
.course-modal.is--open .course-modal__backdrop { opacity: .45; }
.course-modal__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 46em; max-height: calc(100vh - 4em); max-height: calc(100dvh - 4em); border-radius: 1.5em; background: var(--white); overflow: hidden; outline: none;
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity var(--dur-primary) var(--ease-inout), transform var(--dur-primary) var(--ease-inout); } /* closing */
.course-modal.is--open .course-modal__panel { opacity: 1; transform: none; transition: opacity var(--dur-primary) var(--ease-out), transform var(--dur-smooth) var(--ease-out); } /* opening */
.course-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; padding: 2em 2em 1.5em 2.25em; border-bottom: 1px solid rgba(23,26,54,.08); }
.course-modal__head-text { display: flex; flex-direction: column; gap: 1em; }
.course-modal__tags { display: flex; gap: .75em; align-items: center; }
.course-modal__title { font-size: 2.25em; text-wrap: balance; }
.course-modal__close { font-size: 1rem; /* buttons don't inherit font-size by default */ flex: 0 0 auto; position: relative; width: 3em; height: 3em; border-radius: 50%; border: 0; background: var(--cream); cursor: pointer; transition: background-color var(--dur-primary) var(--ease-out), transform var(--dur-smooth) var(--ease-inout); }
.course-modal__close i { position: absolute; left: 50%; top: 50%; width: 38%; height: 2px; border-radius: 2px; background: var(--indigo-950); transform: translate(-50%,-50%) rotate(45deg); }
.course-modal__close i:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.course-modal__close:hover { background: var(--indigo-100); transform: rotate(90deg); }
.course-modal__close:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 2px; }
.course-modal__body { overflow-y: auto; overscroll-behavior: contain; padding: 1.75em 2.25em 2.25em; display: flex; flex-direction: column; gap: 2em; }
.course-modal__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; padding: 1.25em 1.5em; border-radius: 1em; background: var(--cream); }
.course-modal__facts dt { font-family: "JetBrains Mono"; font-size: .8125em; opacity: .6; }
.course-modal__facts dd { font-weight: 600; font-size: 1.0625em; line-height: 1.3; margin-top: .2em; }
.course-modal__block { display: flex; flex-direction: column; gap: .75em; }
.course-modal__block .eyebrow-mono { font-size: .875em; }
.course-modal__text { opacity: .85; text-wrap: pretty; max-width: 38em; }
.course-modal__dates { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; }
.course-modal__dates li { padding: .55em 1em; border-radius: 999px; background: var(--indigo-100); color: var(--indigo-800); font-weight: 600; font-size: 1em; }
.course-modal__outcomes, .course-modal__bring { list-style: none; display: flex; flex-direction: column; gap: .6em; margin-top: .25em; }
.course-modal__outcomes li, .course-modal__bring li { position: relative; padding-left: 2em; font-size: 1.0625em; line-height: 1.4; }
.course-modal__outcomes li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--amber-500) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 stroke=%27%23171A36%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 70% no-repeat; }
.course-modal__bring li::before { content: ""; position: absolute; left: .45em; top: .55em; width: .4em; height: .4em; border-radius: 50%; background: var(--indigo-400); }
.course-modal__link { align-self: flex-start; color: var(--indigo-800); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--dur-primary) var(--ease-out); padding-bottom: 2px; }
.course-modal__link:hover { background-size: 100% 1.5px; }
.course-modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; padding: 1.25em 2em 1.25em 2.25em; border-top: 1px solid rgba(23,26,54,.08); background: var(--white); }
.course-modal__price span { font-family: Bricolage Grotesque, sans-serif; font-weight: 800; font-size: 2.25em; letter-spacing: -.05em; line-height: 1; }
.course-modal__price p { font-size: .9375em; opacity: .6; margin-top: .2em; }
@media screen and (max-width: 767px) {
  /* the whole sheet can be dragged down (phones) */
  .course-modal__panel.is--dragging { transition: none !important; }
  /* bigger close button on phones */
  .course-modal__close { width: 3.25em; height: 3.25em; }
  .course-modal__close i { width: 36%; height: 2.5px; }
}
html.is--modal-open { overflow: hidden; }
@media screen and (max-width: 767px) {
  .course-modal { align-items: flex-end; padding: 0; }
  .course-modal__panel { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 1.5em 1.5em 0 0; transform: translateY(100%); opacity: 1; transition: transform var(--dur-primary) var(--ease-inout); } /* closing: slides back down */
  .course-modal.is--open .course-modal__panel { transition: transform var(--dur-smooth) var(--ease-out); } /* opening */
  .course-modal__head { padding: 1.5em 1.25em 1.25em 1.5em; }
  .course-modal__title { font-size: 1.75em; }
  .course-modal__body { padding: 1.5em; gap: 1.75em; }
  .course-modal__facts { grid-template-columns: 1fr 1fr; padding: 1.25em; }
  .course-modal__foot { padding: 1em 1.5em calc(1em + env(safe-area-inset-bottom)); }
  .course-modal__price span { font-size: 1.75em; }
  .course-modal__price p { display: none; } /* already shown in the facts above */
}


/* desktop: the background leads on open and follows on close; the panel arrives softly and leaves quickly */
@media screen and (min-width: 768px) { /* MWK: same motion as the WhatsApp QR modal: one curve, 0.6s, panel rises and fades */
  .course-modal { transition: visibility 0s linear .6s; }
  .course-modal.is--open { transition: visibility 0s linear 0s; }
  .course-modal__backdrop, .course-modal.is--open .course-modal__backdrop { transition: opacity .6s cubic-bezier(.625, .05, 0, 1); }
  .course-modal__panel { max-height: calc(100dvh - 12em); } /* MWK: shorter, so the rise reads clearly */
  .course-modal__panel { opacity: 0; transform: translateY(3em) rotate(.001deg); transition: opacity .6s cubic-bezier(.625, .05, 0, 1), transform .6s cubic-bezier(.625, .05, 0, 1); }
  .course-modal.is--open .course-modal__panel { opacity: 1; transform: translateY(0) rotate(.001deg); transition: opacity .6s cubic-bezier(.625, .05, 0, 1), transform .6s cubic-bezier(.625, .05, 0, 1); }
}
@media screen and (min-width: 768px) and (max-height: 760px) { .course-modal__panel { max-height: calc(100dvh - 6em); } } /* MWK: short laptops keep room to read */

/* ---------- FAQ list (from the FAQ page) ---------- */
/* accordion */
.faq-list { display: flex; flex-direction: column; gap: .75em; }
.faq-item { border-radius: 1.5em; background: var(--white); }
.faq-item.is--hidden { display: none; }
.faq-item__q { width: 100%; display: grid; grid-template-columns: 2.5em 1fr auto; gap: 1em; align-items: center; padding: 1.5em 1.75em; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 1.5em; }
.faq-item__q:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: -3px; }
.faq-item__num { font-family: "JetBrains Mono"; font-size: .875em; opacity: .5; transition: opacity var(--dur-primary) var(--ease-out); }
.faq-item__h { text-wrap: balance; }
.faq-item__icon { position: relative; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--indigo-100); transition: background-color var(--dur-primary) var(--ease-out), transform var(--dur-smooth) var(--ease-inout); }
.faq-item__icon i { position: absolute; left: 50%; top: 50%; width: 38%; height: 2px; border-radius: 2px; background: var(--indigo-950); transform: translate(-50%, -50%); transition: transform var(--dur-smooth) var(--ease-inout); }
.faq-item__icon i:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }
/* calm hover: the icon warms, the number brightens */
.faq-item__q:hover .faq-item__icon { background: var(--indigo-200); }
.faq-item__q:hover .faq-item__num { opacity: 1; }
/* open */
.faq-item.is--open .faq-item__icon { background: var(--amber-500); transform: rotate(180deg); }
.faq-item.is--open .faq-item__icon i:nth-child(2) { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item.is--open .faq-item__num { opacity: 1; }

.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-smooth) var(--ease-inout); }
.faq-item.is--open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-inner { overflow: hidden; }
.faq-item__a p { padding: 0 5.5rem 1.75rem 5.25rem; /* rem so it lines up with the question text */ max-width: calc(46rem + 10.75rem); opacity: 0; transform: translateY(-6px); text-wrap: pretty; transition: opacity var(--dur-primary) var(--ease-out), transform var(--dur-primary) var(--ease-out); }
.faq-item.is--open .faq-item__a p { opacity: .8; transform: none; transition-delay: .15s; }


@media screen and (max-width: 767px) {
  .faq-item__q { grid-template-columns: 1fr auto; padding: 1.25em 1.25em 1.25em 1.5em; }
  .faq-item__num { display: none; }
  .faq-item__h { text-wrap: pretty; }
  .faq-item__a p { padding: 0 1.5rem 1.5rem; }
}

/* ---------- reveal on scroll (from the Timetable page) ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .rv.is--revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* ---------- shared section head ---------- */
.section-head { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 2em; flex-wrap: wrap; }
.section-head__text { display: flex; flex-direction: column; gap: 1.5em; max-width: 44em; }
.section-head__text h2 { text-wrap: balance; }
.section-head__lead { opacity: .8; max-width: 36em; text-wrap: pretty; }
.section-body { width: 100%; margin-top: 3em; }

/* =========================================================
   WhatsApp modal: your component, in the brand
   Desktop: WhatsApp buttons show a QR code. Touch: they open WhatsApp.
   ========================================================= */
/* ---------- trigger: our button, with your two overlays ---------- */
.whatsapp-trigger { cursor: pointer; }
.whatsapp-modal__overlay-link, .whatsapp-modal__overlay-toggle { position: absolute; inset: 0; z-index: 3; border: 0; background: none; padding: 0; cursor: pointer; border-radius: inherit; }
.whatsapp-modal__overlay-link:focus-visible, .whatsapp-modal__overlay-toggle:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 3px; }
/* Hide link on non-touch devices (your rule) */
[data-whatsapp-modal-trigger] [data-whatsapp-modal-link] { display: none; }

/* ---------- modal: your structure ---------- */
.whatsapp-modal { position: fixed; inset: 0; z-index: 1400; /* MWK: above the course modal (1300), so it can open from inside one */ display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 1.5em; pointer-events: none; }
.whatsapp-modal__dark { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .45); /* MWK: neutral dark, no blur (same as the site's other overlays) */ pointer-events: auto; }
.whatsapp-modal__card { position: relative; display: flex; width: 22em; max-width: 100%; padding: 4.5em 2em 3.25em; flex-flow: column; align-items: center; gap: 1.5em; border-radius: 1.5em; background-color: var(--white); text-align: center; pointer-events: auto; outline: none; }
.whatsapp-modal__qr-canvas { width: 140px; height: 140px; }
.whatsapp-modal__qr-canvas svg { display: block; width: 100%; height: 100%; }
.whatsapp-modal__text { display: flex; padding-top: 1em; flex-flow: column; align-items: center; gap: .75em; }
.whatsapp-modal__h { text-align: center; font-size: 2em; font-weight: 500; line-height: 1; } /* an h2, so it takes the site's h2 face and spacing */
.whatsapp-modal__p { text-align: center; }
.whatsapp-modal__card .btn-wrap { justify-content: center; }
/* close: your thin cross */
.whatsapp-modal__close { font-size: 1rem; position: absolute; top: 1.5em; right: 1.5em; display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; transition: transform var(--dur-smooth) var(--ease-inout); }
.whatsapp-modal__close-bar { position: absolute; width: 1.5em; height: .09375em; background-color: var(--indigo-950); transform: rotate(-45deg); }
.whatsapp-modal__close-bar.is--duplicate { transform: rotate(45deg); }
.whatsapp-modal__close:hover { transform: rotate(90deg); }
.whatsapp-modal__close:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- your QR + animation CSS ---------- */
[data-whatsapp-modal-qr-canvas]:has(svg) { background-color: transparent; }
[data-whatsapp-modal-qr-canvas] svg rect { fill: transparent; }
.whatsapp-modal__card { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); transform: translateY(25%) rotate(0.001deg); opacity: 0; visibility: hidden; }
[data-whatsapp-modal-status="active"] .whatsapp-modal__card { transform: translateY(0%) rotate(0.001deg); opacity: 1; visibility: visible; }
.whatsapp-modal__dark { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); opacity: 0; visibility: hidden; }
[data-whatsapp-modal-status="active"] .whatsapp-modal__dark { opacity: 1; visibility: visible; }

/* Hide modal on touch devices, and open link directly (your rules) */
@media (hover: none) and (pointer: coarse) {
  [data-whatsapp-modal] { display: none; }
  [data-whatsapp-modal-trigger] [data-whatsapp-modal-toggle] { display: none; }
  [data-whatsapp-modal-trigger] [data-whatsapp-modal-link] { display: block; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-modal__card, .whatsapp-modal__dark { transition-duration: .01s; } }

/* ---------- page loader (first page of a visit): indigo screen, your logo, then the page-draw transition reveals the site ---------- */
.page-loader { position: fixed; inset: 0; z-index: 1390; display: none; align-items: center; justify-content: center; background: var(--indigo-800); color: var(--white); }
html.is--loading .page-loader { display: flex; }
html.is--loading .transition { z-index: 1395; } /* the wipe draws over the loader */
.page-loader__logo { display: block; height: 3em; width: auto; --la: currentColor; --lb: var(--indigo-400); opacity: 0; animation: mwkLoaderIn .5s cubic-bezier(.25, .8, .25, 1) .1s forwards; } /* same size and colours as the site logo */
@keyframes mwkLoaderIn { to { opacity: 1; } }
/* MWK: every button a little taller (was 50px), and always fully round at any height */
.btn { min-height: 55px; border-radius: 999px; }
html.js main > section:nth-of-type(2) .rv { opacity: 1; transform: none; } /* MWK: the first section under the header never waits for a fade */
.btn[data-theme="outline"] .btn__bg, .btn[data-theme="outline"] .btn__circle-wrap { border-radius: 999px; }