/* Sofia Balance Method
   Off-white and ink blue. EB Garamond for headings and quotes, Cardo for text.
   Both cover Croatian and the IAST diacritics (ā ī ū ñ ś ṣ ṭ ḍ ṇ ṛ ḥ ṃ ṅ). */

@font-face {
  font-family: "Cardo";
  src: url("/assets/fonts/cardo-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cardo";
  src: url("/assets/fonts/cardo-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cardo";
  src: url("/assets/fonts/cardo-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #f6f3ed;
  --bg-alt: #ece6db;
  --ink: #17223a;
  --ink-2: #4a556b;
  --blue: #1f3a5f;
  --blue-deep: #132741;
  --blue-soft: #8ea6c4;
  --line: rgba(23, 34, 58, 0.16);
  --on-dark: #f6f3ed;
  --on-dark-2: rgba(246, 243, 237, 0.8);
  --line-dark: rgba(246, 243, 237, 0.24);

  --serif: "Cardo", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display: "EB Garamond", "Cardo", "Palatino Linotype", Palatino, Georgia, serif;

  --text: clamp(1.125rem, 1.07rem + 0.24vw, 1.25rem);
  --text-sm: 0.95rem;
  --text-xs: 0.78rem;
  --h1: clamp(2.5rem, 1.45rem + 4.3vw, 5.25rem);
  --h2: clamp(2.05rem, 1.5rem + 2.3vw, 3.4rem);
  --h3: clamp(1.45rem, 1.3rem + 0.6vw, 1.8rem);

  --container: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --header-h: 4.75rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
img,
svg,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2 {
  font-size: var(--h2);
}
h3 {
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.15;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}
a {
  color: inherit;
}
strong {
  font-weight: 700;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
::selection {
  background: var(--blue);
  color: var(--on-dark);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--blue);
  color: var(--on-dark);
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
}

/* Type helpers */
.display {
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: -0.01em;
}
.eyebrow {
  margin: 0 0 1.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--light {
  color: var(--on-dark-2);
}
/* Labels that open a page or a section start with a small lotus (lotus-bud.svg, scripts/lotus.mjs) in
   their own colour; labels on cards (before an h3), steps and dates don't. */
:is(p, h2).eyebrow:not(:has(+ h3), .step__kicker)::before {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1.1em;
  margin-right: 0.75em;
  vertical-align: -0.18em;
  background: currentColor;
  -webkit-mask: url("/assets/img/lotus-bud.svg") no-repeat center / contain;
  mask: url("/assets/img/lotus-bud.svg") no-repeat center / contain;
}
.prose p {
  max-width: 62ch;
  color: var(--ink-2);
}
.prose p:first-child {
  color: var(--ink);
  font-size: 1.12em;
  line-height: 1.55;
}

/* Buttons and links */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.actions--center {
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.9rem 1.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn--solid {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-dark);
}
.btn--solid:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}
.btn--light {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--blue-deep);
}
.btn--light:hover {
  background: transparent;
  color: var(--on-dark);
}
.btn--outline-light {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--line-dark);
}
.btn--outline-light:hover {
  border-color: var(--on-dark);
  background: rgba(246, 243, 237, 0.08);
}
.btn:focus-visible {
  outline-color: currentColor;
}

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  padding-block: 0.35rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.45s var(--ease);
}
.link-arrow::after {
  content: "→";
  font-size: 1.15em;
  letter-spacing: 0;
  transition: transform 0.45s var(--ease);
}
.link-arrow:hover {
  background-size: 0 1px;
  background-position: 100% 100%;
}
.link-arrow:hover::after {
  transform: translateX(0.3em);
}
.link-arrow--light {
  color: var(--on-dark);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--ink);
  background: rgba(246, 243, 237, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease),
    transform 0.45s var(--ease);
}
/* Scrolling down hides the header, scrolling up brings it back (main.js). */
.site-header.is-hidden {
  transform: translateY(-100%);
}
/* With a mega panel open, header and panel read as one surface. */
.site-header.mega-open {
  background: var(--bg);
}
.has-hero .site-header {
  position: fixed;
  inset: 0 0 auto;
}
.has-hero .site-header:not(.is-scrolled):not(.is-open):not(.mega-open) {
  color: var(--on-dark);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-open {
  /* a backdrop-filter would trap the fixed mobile menu inside the header box */
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* wider than the content column so the full menu fits on a 1440px screen */
  max-width: calc(96rem + 2 * var(--gutter));
  min-height: var(--header-h);
}
/* The lotus mark is nearly as tall as it is wide; at this width her figure is the size it had in the
   old arc mark at 5.2rem. */
.brand {
  --mark-w: 4.8rem;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand .logo-mark {
  width: var(--mark-w);
  height: auto;
}
.brand__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  /* level with the centre of the logo's lotus, which sits at 56% of its height rather than 50% */
  transform: translateY(calc(var(--mark-w) * 0.053));
}
/* Logo intro on the home page (main.js): the header logo waits while the hero video plays up to the
   pose the logo was drawn from, then a flash lifts her silhouette off the video and it flies into the
   header, where the lotus draws itself around it. If the script never runs, the logo appears anyway. */
.logo-wait .brand .logo-mark {
  animation: logo-fade 0.8s 45s both;
}
.logo-show .brand .logo-mark {
  animation: logo-fade 0.8s both;
}
@keyframes logo-fade {
  from {
    opacity: 0;
  }
}
/* Lotus petals (scripts/lotus.mjs) draw themselves one after another, each after its own delay --d:
   in the header on every page load (logo-arc, base.njk) or once the home intro has flown her in
   (logo-draw), and elsewhere when they scroll into view ([data-lotus-draw], main.js). */
.lotus-petal {
  stroke-dasharray: 1 1;
}
.logo-draw .brand .lotus-petal {
  animation: lotus-draw 0.9s cubic-bezier(0.45, 0, 0.2, 1) var(--d) both;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-arc .brand .lotus-petal,
  .logo-show .brand .lotus-petal {
    animation: lotus-draw 0.9s cubic-bezier(0.45, 0, 0.2, 1) calc(0.2s + var(--d)) both;
  }
  .js [data-lotus-draw] .lotus-petal {
    stroke-dashoffset: 1;
  }
  .js [data-lotus-draw].is-visible .lotus-petal {
    animation: lotus-draw 0.9s cubic-bezier(0.45, 0, 0.2, 1) var(--d) both;
  }
}
@keyframes lotus-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* Loading: the lotus draws its petals one after another, then wipes them away, like the save emblem
   in the game it comes from. */
.lotus-spinner {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}
button > .lotus-spinner {
  width: 1.45em;
  height: 1.45em;
  margin-right: 0.55em;
  vertical-align: -0.4em;
}
.lotus-spinner path {
  stroke-dasharray: 1 1;
}
@media (prefers-reduced-motion: no-preference) {
  .lotus-spinner path {
    animation: lotus-spin 2.4s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--i) * 0.13s) infinite both;
  }
}
@keyframes lotus-spin {
  0% {
    stroke-dashoffset: 1;
  }
  45%,
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1;
  }
}
.logo-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.logo-flyer {
  position: fixed;
  z-index: 60;
  pointer-events: none;
}
.logo-flyer > div,
.logo-flyer svg {
  display: block;
  width: 100%;
  height: 100%;
}
.logo-flyer > div {
  transform-origin: 0 0;
}

/* Main menu (partials/header.njk). From 76rem the links sit in a row and "Train" and "Learn" open mega
   panels across the full width under the header. Below that, the whole menu is a full-screen panel in
   which those groups fold open. Keep the breakpoint in sync with `desktop` in main.js. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 2rem);
}
.nav-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.nav-link:hover,
.nav-link[aria-current="page"],
.nav-link[data-current],
.nav-mega-toggle[aria-expanded="true"] {
  background-size: 100% 1px;
}
.nav-mega-toggle__chevron {
  width: 0.6rem;
  transition: transform 0.3s var(--ease);
}
.nav-mega-toggle[aria-expanded="true"] .nav-mega-toggle__chevron {
  transform: rotate(180deg);
}

/* Mega panels: links with a line of text, groups of short links, a featured card. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  color: var(--ink);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 60px -50px rgba(19, 39, 65, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  /* Only the open panel takes the pointer. A closing one stays visible for 0.3 s with its bridge
     moving, and it would catch a mouse resting on the next link and reopen itself. */
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.mega::before {
  /* hover bridge from the menu link down to the panel; the links and the button stay above it */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.75rem;
}
.nav-mega-toggle[aria-expanded="true"] + .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.mega__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4.5rem);
  max-width: calc(96rem + 2 * var(--gutter));
  padding-block: 2.25rem 2.75rem;
}
.mega__links {
  flex: 1 1 0;
  display: grid;
  column-gap: 2.5rem;
}
.mega__links--wide {
  flex-grow: 2.2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mega__link {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.mega__title {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.25;
  transition: color 0.3s var(--ease);
}
.mega__text {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.45;
}
.mega__link:hover .mega__title,
.mega__link[aria-current] .mega__title {
  color: var(--blue);
}
.mega__group {
  flex: 0.75 1 0;
}
.mega__group-title {
  margin: 0.9rem 0 0.5rem;
  color: var(--ink-2);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mega__sublink {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--ink);
  font-size: 1.05rem;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.mega__sublink:hover,
.mega__sublink[aria-current] {
  background-size: 100% 1px;
}
.mega-card {
  flex: 0 0 clamp(14rem, 19vw, 18rem);
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.mega-card picture,
.mega-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
/* The coaching photo is a tall headstand: 4:3 would cut off her student's head or her own. */
.mega-card__img--square {
  aspect-ratio: 1;
}
.mega-card__eyebrow {
  display: block;
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mega-card__title {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}
.mega-card__link {
  display: inline-block;
  margin-top: 0.7rem;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mega-card:hover .mega-card__title {
  color: var(--blue);
}

/* Calls to action and the rest: on wide screens only the community button and the language switch;
   the application button, contact and social links appear in the full-screen menu. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 1.75rem);
}
.nav-cta {
  position: relative;
  z-index: 1;
  min-height: 2.6rem;
  padding: 0.55rem 1.3rem;
  white-space: nowrap;
}
.has-hero .site-header:not(.is-scrolled):not(.is-open):not(.mega-open) .nav-cta {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--blue-deep);
}
.nav-apply,
.nav-more {
  display: none;
}

/* Language flags: small round badges with a gloss and a soft shadow (svg/flags.svg). */
.flag-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.flag {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(19, 39, 65, 0.16), 0 3px 6px -2px rgba(19, 39, 65, 0.4);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.flag svg {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: circle(50%);
}
/* The shading follows the circle (a gloss near the top, a darker rim all round), so striped flags read
   as round badges rather than as their straight stripes. */
.flag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(55% 34% at 50% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.26) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
a:hover > .flag,
summary:hover > .flag {
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(19, 39, 65, 0.16), 0 5px 9px -3px rgba(19, 39, 65, 0.45);
}

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.25rem;
  margin-left: -0.55rem;
}
/* Room around the small flag, so each one is a comfortable tap target. */
.lang-switch a {
  display: flex;
  padding: 0.55rem;
}
.lang-switch .flag {
  width: 1.4rem;
  height: 1.4rem;
}
/* The current language: a blue ring around its badge. */
.lang-switch a[aria-current] .flag {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--blue), 0 3px 6px -2px rgba(19, 39, 65, 0.4);
}
/* Wide screens: the current language with a small dropdown of all of them (partials/header.njk). */
.lang-menu {
  position: relative;
  display: none;
}
.lang-menu summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.2rem;
  list-style: none;
  cursor: pointer;
}
.lang-menu summary .flag {
  width: 1.25rem;
  height: 1.25rem;
}
.lang-menu summary::-webkit-details-marker {
  display: none;
}
.lang-menu summary::after {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.lang-menu[open] summary::after {
  transform: translateY(0.1rem) rotate(-135deg);
}
/* The dropdown is frosted glass: light over the page, darker over a hero video. */
.lang-menu ul {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: -0.5rem;
  min-width: 10rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  color: var(--ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.66), rgba(246, 243, 237, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 1rem;
  box-shadow: 0 22px 45px -20px rgba(19, 39, 65, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
/* A header with its own backdrop-filter would keep the page behind the dropdown out of its blur. */
.site-header:has(.lang-menu[open]) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.65rem;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.lang-menu a:hover {
  background: rgba(255, 255, 255, 0.55);
}
.lang-menu a[aria-current] {
  color: var(--blue);
}
.has-hero .site-header:not(.is-scrolled):not(.is-open):not(.mega-open) .lang-menu ul {
  color: var(--on-dark);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(19, 39, 65, 0.3));
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 22px 45px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.has-hero .site-header:not(.is-scrolled):not(.is-open):not(.mega-open) .lang-menu a:hover {
  background: rgba(255, 255, 255, 0.16);
}
.has-hero .site-header:not(.is-scrolled):not(.is-open):not(.mega-open) .lang-menu a[aria-current] {
  color: inherit;
  background: rgba(255, 255, 255, 0.1);
}
@media (prefers-reduced-motion: no-preference) {
  .lang-menu[open] ul {
    animation: lang-menu-in 0.3s var(--ease);
  }
}
@keyframes lang-menu-in {
  from {
    opacity: 0;
    transform: translateY(-0.4rem) scale(0.97);
  }
}
@media (min-width: 76rem) {
  .lang-switch {
    display: none;
  }
  .lang-menu {
    display: block;
  }
}

.menu-toggle {
  display: none;
  position: relative;
  z-index: 2;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle__icon {
  position: relative;
  width: 1.5rem;
  height: 0.6rem;
}
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), top 0.4s var(--ease), bottom 0.4s var(--ease);
}
.menu-toggle__icon::before {
  top: 0;
}
.menu-toggle__icon::after {
  bottom: 0;
}
.is-open .menu-toggle__icon::before {
  top: calc(50% - 0.5px);
  transform: rotate(45deg);
}
.is-open .menu-toggle__icon::after {
  bottom: calc(50% - 0.5px);
  transform: rotate(-45deg);
}

@media (max-width: 75.99rem) {
  .menu-toggle {
    display: inline-flex;
  }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 2.5rem;
    padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem;
    background: var(--bg);
    color: var(--ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
  }
  .is-open .site-nav {
    opacity: 1;
    visibility: visible;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-item {
    border-bottom: 1px solid var(--line);
  }
  .nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
    letter-spacing: 0;
    text-transform: none;
    background: none;
  }
  .nav-link[aria-current="page"],
  .nav-link[data-current] {
    color: var(--blue);
  }
  .nav-mega-toggle__chevron {
    width: 0.9rem;
  }
  .mega {
    position: static;
    max-height: 0;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: none;
    transform: none;
    transition: max-height 0.45s var(--ease), opacity 0.3s, visibility 0.3s;
  }
  .mega::before {
    display: none;
  }
  .nav-mega-toggle[aria-expanded="true"] + .mega {
    max-height: 40rem;
  }
  .mega__inner {
    display: block;
    max-width: none;
    padding: 0 0 1.25rem;
  }
  .mega__links,
  .mega__links--wide {
    display: block;
  }
  .mega__link {
    padding: 0.55rem 0;
    border: 0;
  }
  .mega__title {
    font-family: inherit;
    font-size: 1.15rem;
  }
  .mega__text,
  .mega-card {
    display: none;
  }
  .mega__group {
    margin-top: 0.5rem;
  }
  .mega__group-title {
    margin: 0.5rem 0 0.25rem;
  }
  .mega__group ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.4rem;
  }
  .nav-actions {
    display: grid;
    gap: 0.9rem;
  }
  .nav-cta,
  .nav-apply {
    display: inline-flex;
    width: 100%;
  }
  .nav-cta {
    min-height: 3.25rem;
  }
  .nav-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin-top: 0.75rem;
  }
  .nav-more a {
    color: var(--ink-2);
    text-decoration: none;
  }
  .nav-more a:hover,
  .nav-more a[aria-current] {
    color: var(--blue);
  }
  /* Without JavaScript the menu cannot open, so show it inline instead. */
  .no-js .menu-toggle {
    display: none;
  }
  .no-js .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    padding: 0 0 1.5rem;
    background: none;
    color: inherit;
  }
  .no-js .header-bar {
    flex-wrap: wrap;
  }
  .no-js .mega {
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (max-width: 75.99rem) and (prefers-reduced-motion: no-preference) {
  /* the menu items rise in one after another */
  .is-open .nav-item,
  .is-open .nav-actions {
    animation: nav-in 0.5s var(--ease) both;
    animation-delay: calc(var(--i, 4) * 0.05s + 0.1s);
  }
}
@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}
/* Without JavaScript the panels open on hover and keyboard focus. */
@media (min-width: 76rem) {
  .no-js .has-mega:hover .mega,
  .no-js .has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}
@media (max-width: 30rem) {
  .brand__name {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
  }
  .brand {
    --mark-w: 4.05rem;
  }
  .menu-toggle__label {
    display: none;
  }
}
.menu-open {
  overflow: hidden;
}

/* Sections */
.section {
  padding-block: var(--section);
}
.section--flush-top {
  padding-top: 0;
}
/* Tinted sections lie on two layers of soft gradients that drift past each other at different speeds.
   The layers are moved by transform, so the page doesn't repaint while they move. */
.section--alt,
.section--blue {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.section--alt::before,
.section--alt::after,
.section--blue::before,
.section--blue::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30%;
  pointer-events: none;
}
/* Sand: white lights over the sand, set behind the text and drifting gently around it. The positions are
   on the layer, which reaches 30% past each edge: a point x% across the section is (x + 30) / 1.6 on
   the layer. The top and bottom edges stay the plain sand colour, so two sand sections in a row still
   meet without a seam. */
.section--alt {
  --light-1: 38% 45%;
  --light-2: 56% 55%;
  --light-3: 47% 50%;
  --light-4: 64% 47%;
  background: var(--bg-alt);
}
.section--alt::before {
  background:
    radial-gradient(ellipse 30% 26% at var(--light-1), rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 26% 22% at var(--light-2), rgba(255, 255, 255, 0.35), transparent 70%);
}
.section--alt::after {
  background:
    radial-gradient(ellipse 24% 20% at var(--light-3), rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 20% 18% at var(--light-4), rgba(255, 255, 255, 0.3), transparent 70%);
}
.cta-center.section--alt {
  --light-1: 45% 50%;
  --light-2: 55% 52%;
  --light-3: 50% 48%;
  --light-4: 59% 50%;
}
/* Stacked half-screen sections: the text sits below the photo. */
.split-bleed.section--alt {
  --light-1: 44% 58%;
  --light-2: 57% 64%;
  --light-3: 50% 61%;
  --light-4: 62% 58%;
}
@media (min-width: 60rem) {
  /* Side by side: the text half, right, or left when flipped. */
  .split-bleed.section--alt {
    --light-1: 60% 46%;
    --light-2: 70% 55%;
    --light-3: 65% 50%;
    --light-4: 56% 52%;
  }
  .split-bleed--flip.section--alt {
    --light-1: 40% 46%;
    --light-2: 30% 55%;
    --light-3: 35% 50%;
    --light-4: 44% 52%;
  }
  .lead-magnet {
    --light-1: 54% 46%;
    --light-2: 66% 55%;
    --light-3: 60% 50%;
    --light-4: 71% 48%;
  }
}
/* Blue: from a lighter blue into a deeper one, with a soft light and a shadow wandering across it. */
.section--blue {
  background: var(--blue-deep);
  color: var(--on-dark);
}
.section--blue::before {
  background:
    radial-gradient(ellipse 45% 40% at 30% 30%, rgba(142, 166, 196, 0.3), transparent 70%),
    linear-gradient(150deg, #2a4a75 15%, var(--blue) 35%, var(--blue-deep) 60%, #08121f 88%);
}
.section--blue::after {
  background:
    radial-gradient(ellipse 30% 26% at 70% 62%, rgba(142, 166, 196, 0.24), transparent 70%),
    radial-gradient(ellipse 32% 28% at 34% 72%, rgba(6, 13, 24, 0.5), transparent 70%);
}
/* Behind the content: a large lotus in thin soft-blue lines (lotus-rosette.svg, scripts/lotus.mjs),
   cut off by the right edge. When the section scrolls into view it draws itself while spinning in,
   slowing down; then it never stops: it keeps turning slowly, and its petals keep running off and
   drawing themselves again, more slowly than the first time, for as long as the page is open. */
.lotus-watermark {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(-15rem, -22vw);
  width: min(46rem, 85vw);
  height: auto;
  color: var(--blue-soft);
  opacity: 0.3;
  transform: translateY(-50%);
  pointer-events: none;
}
/* 1.2 px wide at any size: --px is a screen pixel in the drawing's units (main.js). */
.lotus-watermark .lotus-petal {
  stroke-width: calc(1.2px * var(--px, 0.4));
}
@media (prefers-reduced-motion: no-preference) {
  /* As soon as a petal is drawn, its line starts running off and draws itself again half a line
     behind, at an even pace and with no pause, so the flower never empties. The hexagon stays. */
  .js .lotus-watermark.is-visible .lotus-petal {
    animation:
      lotus-draw 1.8s cubic-bezier(0.45, 0, 0.2, 1) var(--d) both,
      lotus-flow 9s linear calc(var(--d) + 1.8s) infinite;
  }
  .js .lotus-watermark.is-visible polygon.lotus-petal {
    animation: lotus-draw 1.8s cubic-bezier(0.45, 0, 0.2, 1) var(--d) both;
  }
  .lotus-watermark__spin,
  .lotus-watermark__turn {
    transform-origin: 0 0;
  }
  .js .lotus-watermark.is-visible .lotus-watermark__spin {
    animation: lotus-spin-in 5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .lotus-watermark__turn {
    animation: lotus-turn 120s linear infinite;
  }
}
@keyframes lotus-spin-in {
  from {
    transform: rotate(-70deg);
  }
}
/* The line is 1 long. With a dash of 1 and a gap of 0.5 it is whole at 0 and at -1.5; in between, its
   start runs off ahead and it draws itself again behind, never less than half. */
@keyframes lotus-flow {
  from {
    stroke-dasharray: 1 0.5;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 1 0.5;
    stroke-dashoffset: -1.5;
  }
}
@keyframes lotus-turn {
  to {
    transform: rotate(1turn);
  }
}
/* On sand: centred behind a call to action, as tall as the section allows, in fainter lines; on the
   404 page at the right, as in the blue sections. */
.cta-center .lotus-watermark,
.notfound .lotus-watermark {
  right: auto;
  left: 50%;
  width: auto;
  height: 94%;
  max-width: 94vw;
  opacity: 0.4;
  transform: translate(-50%, -50%);
}
.notfound .lotus-watermark {
  left: auto;
  right: max(-12rem, -20vw);
  transform: translateY(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .section--alt::before {
    animation: sand-drift 14s ease-in-out infinite alternate;
  }
  .section--alt::after {
    animation: sand-drift-2 19s ease-in-out infinite alternate;
  }
  .section--blue::before {
    animation: blue-drift 14s ease-in-out infinite alternate;
  }
  .section--blue::after {
    animation: blue-drift-2 19s ease-in-out infinite alternate;
  }
}
@keyframes sand-drift {
  from {
    transform: translate3d(7%, -4%, 0) scale(0.95);
  }
  to {
    transform: translate3d(-7%, 4%, 0) scale(1.1);
  }
}
@keyframes sand-drift-2 {
  from {
    transform: translate3d(-8%, 3%, 0);
  }
  to {
    transform: translate3d(8%, -3%, 0);
  }
}
@keyframes blue-drift {
  from {
    transform: translate3d(-12%, -9%, 0);
  }
  to {
    transform: translate3d(12%, 9%, 0) scale(1.12);
  }
}
@keyframes blue-drift-2 {
  from {
    transform: translate3d(14%, -8%, 0);
  }
  to {
    transform: translate3d(-14%, 8%, 0);
  }
}
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--on-dark);
  background: var(--blue-deep);
  overflow: hidden;
}
.hero__media,
.cta-band__media {
  position: absolute;
  inset: 0;
}
.hero__media picture,
.hero__media img,
.cta-band__media picture,
.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Background loops (partials/loop-media.njk): the video and the still over it fill their box, cropped
   around --focus; the still fades out once the video plays. */
.loop-still,
.loop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.loop-video ~ .loop-still,
.loop-video ~ picture .loop-still {
  transition: opacity 1.2s var(--ease);
}
.loop-video.is-playing ~ .loop-still,
.loop-video.is-playing ~ picture .loop-still {
  opacity: 0;
}
/* YouTube hero (page-hero.njk): the player is cropped to fill the hero like object-fit: cover and
   takes no clicks, so YouTube's own overlays stay out of reach; the photo over it fades out once the
   video has been playing for a few seconds (is-playing, main.js). */
.yt-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
/* YouTube shows the video's title and channel along the top for a few seconds whenever it starts
   playing, and that can't be switched off. The player (16:9, covering the hero) is made a little taller
   so its top tenth, where that strip sits, stays above the hero. */
.yt-bg iframe {
  --yt-h: max(111.2cqh, 56.25cqw);
  position: absolute;
  top: calc(var(--yt-h) * -0.1);
  left: 50%;
  width: calc(var(--yt-h) * 16 / 9);
  height: var(--yt-h);
  border: 0;
  transform: translateX(-50%);
}
.yt-bg ~ .loop-still,
.yt-bg ~ picture .loop-still {
  transition: opacity 1.2s var(--ease);
}
.yt-bg.is-playing ~ .loop-still,
.yt-bg.is-playing ~ picture .loop-still {
  opacity: 0;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(19, 39, 65, 0.42) 0%, rgba(19, 39, 65, 0) 22%),
    linear-gradient(0deg, rgba(14, 27, 46, 0.86) 0%, rgba(14, 27, 46, 0.55) 30%, rgba(14, 27, 46, 0) 62%);
}
.hero__content {
  position: relative;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 2rem + 6vh, 6.5rem);
}
.hero h1 {
  max-width: 15ch;
  margin-bottom: 1.5rem;
}
.hero__sub {
  max-width: 38rem;
  margin-bottom: 2.25rem;
  color: var(--on-dark-2);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.5;
}
/* On wide screens the text sits over the sky and sea on the left, clear of the figure.
   Only when the window is at least 4:3: in taller windows (half of a 4K screen, a portrait monitor)
   the frame would be cropped to its left half and lose her, so the stacked layout below takes over. */
@media (min-width: 60rem) and (min-aspect-ratio: 4/3) {
  .hero {
    align-items: center;
  }
  .hero__content {
    display: flex;
    justify-content: flex-start;
    max-width: none;
    padding-bottom: 3rem;
  }
  .hero__text {
    width: min(36rem, 42%);
  }
  /* On squarer screens the frame is cropped at the sides: keep the edge on the text side, so the
     text stays clear of her. A loop's heroPosition (videos.js) overrides this. */
  .hero .loop-still,
  .hero .loop-video {
    object-position: var(--hero-pos, 0% 50%);
  }
  .hero--right .loop-still,
  .hero--right .loop-video {
    object-position: var(--hero-pos, 100% 50%);
  }
  .hero--right .hero__content {
    justify-content: flex-end;
  }
  .hero--right .hero__media::after {
    background:
      linear-gradient(180deg, rgba(19, 39, 65, 0.45) 0%, rgba(19, 39, 65, 0) 20%),
      linear-gradient(270deg, rgba(14, 27, 46, 0.78) 0%, rgba(14, 27, 46, 0.5) 32%, rgba(14, 27, 46, 0) 52%),
      linear-gradient(0deg, rgba(14, 27, 46, 0.35) 0%, rgba(14, 27, 46, 0) 30%);
  }
  .hero--page h1 {
    max-width: 18ch;
    font-size: clamp(2.4rem, 1.2rem + 2.5vw, 3.7rem);
  }
  .hero .btn {
    padding-inline: 1.45rem;
    letter-spacing: 0.15em;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 1.2rem + 3.1vw, 4.4rem);
  }
  .hero__sub {
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
  }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(19, 39, 65, 0.45) 0%, rgba(19, 39, 65, 0) 20%),
      linear-gradient(90deg, rgba(14, 27, 46, 0.78) 0%, rgba(14, 27, 46, 0.5) 32%, rgba(14, 27, 46, 0) 52%),
      linear-gradient(0deg, rgba(14, 27, 46, 0.35) 0%, rgba(14, 27, 46, 0) 30%);
  }
}

/* Intro */
.intro__grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 60rem) {
  .intro__grid {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
}

/* Horizontal slider (home "Choose your path"): edge to edge, the first card lines up with the page
   content and the row runs on to the window edge. Swipe, scroll, drag or use the arrows (main.js). */
.slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.slider-nav {
  display: flex;
  flex-shrink: 0;
  gap: 0.6rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.slider-nav[hidden] {
  display: none;
}
.slider-nav__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.slider-nav__btn:hover:not(:disabled) {
  border-color: var(--ink);
}
.slider-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.slider-nav__btn svg {
  width: 1rem;
}
.slider {
  --slider-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--slider-pad);
  scrollbar-width: none;
}
.slider::-webkit-scrollbar {
  display: none;
}
.slider:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.slider.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.slider__track {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  width: max-content;
  margin: 0;
  padding: 0 var(--slider-pad);
  list-style: none;
}
.slider__item {
  flex: 0 0 auto;
  width: min(88vw, 30rem);
  scroll-snap-align: start;
}
/* The last card snaps by its end, so the row can always reach its last position. */
.slider__item:last-child {
  scroll-snap-align: end;
}
/* The bar under the row (main.js): "01 / 03" for the card in view, then a hairline with a blue thumb as
   wide as the part of the row in view. The thumb thickens on hover and while dragged. */
.slider-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.slider-bar[hidden] {
  display: none;
}
.slider-bar__count {
  flex-shrink: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.slider-bar__count b {
  font-weight: 400;
  color: var(--blue);
}
.slider-bar__track {
  position: relative;
  flex: 1;
  height: 1.5rem; /* the line is a hairline; this is the area that takes clicks and drags */
  cursor: pointer;
  touch-action: none;
}
.slider-bar__track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--line);
}
.slider-bar__thumb {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  border-radius: 3px;
  background: var(--blue);
  transform-origin: left;
  translate: 0 -50%;
  cursor: grab;
  transition: height 0.25s var(--ease);
}
.slider-bar__track:hover .slider-bar__thumb,
.slider-bar.is-dragging .slider-bar__thumb {
  height: 5px;
}
.slider-bar.is-dragging .slider-bar__thumb {
  cursor: grabbing;
}

/* Wide screens: big square cards, sized so the heading, the row and the bar fit in the window together
   (20rem: the heading and the bar, the header, and some air), and no smaller than 28rem on short screens. */
@media (min-width: 60rem) {
  .slider__item {
    width: min(68vw, 64rem, max(28rem, calc(100svh - 20rem)));
  }
}

/* Cards (home "Choose your path"): the text sits on the photo, over a deep blue fade that rises only
   behind the text, so the top of the photo stays clear. */
.card {
  position: relative;
  overflow: hidden;
  background: var(--blue-deep);
  color: var(--on-dark);
}
/* Taller on phones, where the text takes more of the card's width and so more of its height. */
.card__media {
  aspect-ratio: 9 / 14;
  overflow: hidden;
}
@media (min-width: 60rem) {
  .card__media {
    aspect-ratio: 1 / 1;
  }
  .card__title {
    font-size: clamp(1.9rem, 1.3rem + 1vw, 2.6rem);
  }
}
.card__media picture,
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover .card__media img {
  transform: scale(1.035);
}
.slider__item:nth-child(1) .card__media img {
  object-position: 24% 50%;
}
/* Private coaching: Sofia helping a student up into headstand; the crop keeps the student's feet and
   Sofia's head in the clear upper part of the card. */
.slider__item:nth-child(2) .card__media img {
  object-position: 50% 60%;
}
.slider__item:nth-child(3) .card__media img {
  object-position: 55% 50%;
}
.card__body {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(3rem, 1.5rem + 5vw, 7rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  background: linear-gradient(to top, rgba(19, 39, 65, 0.94), rgba(19, 39, 65, 0.86) 50%, rgba(19, 39, 65, 0));
}
/* Masterclasses: Sofia stands in the lower half of that photo, so its text sits at the top, over a
   fade that falls from the top edge instead. */
.slider__item:nth-child(3) .card__body {
  inset: 0 0 auto;
  padding-top: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  padding-bottom: clamp(3rem, 1.5rem + 5vw, 7rem);
  background: linear-gradient(to bottom, rgba(19, 39, 65, 0.94), rgba(19, 39, 65, 0.86) 50%, rgba(19, 39, 65, 0));
}
.card__body > * {
  max-width: 34rem;
}
.card__index {
  margin-bottom: 0.6rem;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--blue-soft);
}
.card__title {
  margin-bottom: 0.75rem;
}
.card__body > p:not(.card__index) {
  font-size: 0.95em;
  line-height: 1.55;
  color: var(--on-dark-2);
}
.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.6rem;
  margin-top: 1rem;
}
.card .link-arrow {
  color: var(--on-dark);
}
@media (max-width: 59.99rem) {
  .card .link-arrow {
    letter-spacing: 0.14em;
  }
}

/* Split layouts (image + text) */
.split {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .split {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 7.5rem);
  }
}
.split__body h2 {
  margin-bottom: 1.75rem;
}
.split__body > p:not(.eyebrow) {
  max-width: 34rem;
  color: var(--ink-2);
}

.numbered {
  counter-reset: none;
  border-top: 1px solid var(--line);
}
.numbered li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.5rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.numbered__n {
  padding-top: 0.3rem;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--blue);
}
.numbered p {
  color: var(--ink-2);
}
.numbered strong {
  font-weight: 400;
  color: var(--ink);
  font-size: 1.12em;
}

/* Results strip */
.quotes {
  display: grid;
  gap: 2.5rem;
  margin-block: 0.75rem 3.5rem;
}
@media (min-width: 60rem) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .quote {
    padding-inline: clamp(1.5rem, 3vw, 3rem);
  }
  .quote:first-child {
    padding-left: 0;
  }
  .quote:last-child {
    padding-right: 0;
  }
  .quote + .quote {
    border-left: 1px solid var(--line-dark);
  }
}
.quote {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1.75rem;
  flex: 1;
}
.quote blockquote p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
}
.quote blockquote p::before {
  content: "“";
}
.quote blockquote p::after {
  content: "”";
}
:lang(hr) .quote blockquote p::before {
  content: "„";
}
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
}
.quote__name {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.quote__role {
  color: var(--on-dark-2);
  font-size: var(--text-sm);
}
.results__more {
  text-align: center;
}

/* E-mail sign-up band (lead magnet, workshop waitlist) */
.signup-grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 60rem) {
  .signup-grid {
    grid-template-columns: 6fr 5fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
}
.signup-grid h2 {
  margin-bottom: 1.5rem;
}
.signup-grid__text {
  max-width: 36rem;
  color: var(--ink-2);
}
.signup__label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
}
.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.signup__input {
  flex: 1 1 15rem;
  min-height: 3.25rem;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.signup__input::placeholder {
  color: var(--ink-2);
  opacity: 0.7;
}
.signup__input:focus {
  outline: none;
  border-bottom-color: var(--blue);
  box-shadow: 0 1px 0 0 var(--blue);
}

/* Lead magnet: PDF cover beside the sign-up form */
.lead-magnet__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 60rem) {
  .lead-magnet__grid {
    grid-template-columns: 4fr 7fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
}
.lead-magnet__cover img {
  width: min(18rem, 70%);
  margin-inline: auto;
  box-shadow: 0 30px 60px -28px rgba(19, 39, 65, 0.45);
  transform: rotate(-3deg);
}
.lead-magnet h2 {
  margin-bottom: 1.25rem;
}
.lead-magnet__form {
  margin-top: 2rem;
}
.signup__consent {
  margin-top: 0.9rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.signup__consent a {
  color: inherit;
}

/* Closing call to action */
/* The figure stays in the upper half; the text sits below it over the dark shore. */
.cta-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(40rem, 100vh, 60rem);
  color: var(--on-dark);
  background: var(--blue-deep);
  text-align: center;
  overflow: hidden;
}
.cta-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark only behind the text at the bottom: the video above it keeps its own colours. */
  background: linear-gradient(180deg, rgba(14, 27, 46, 0) 35%, rgba(14, 27, 46, 0.55) 58%, rgba(14, 27, 46, 0.92) 100%);
}
.cta-band__content {
  position: relative;
  padding-top: 40vh;
  padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5rem);
}
.cta-band h2 {
  max-width: 32ch;
  margin: 0 auto 1.25rem;
  font-size: clamp(2.3rem, 1.6rem + 2.5vw, 4rem);
}
.cta-band p {
  max-width: 34rem;
  margin: 0 auto 2.25rem;
  color: var(--on-dark-2);
}

/* Phones, tablets and tall windows: photo on top, text below on deep blue, so nothing covers the figure. */
@media (max-width: 59.99rem), (max-aspect-ratio: 4/3) {
  .hero,
  .cta-band {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero__media,
  .cta-band__media {
    position: relative;
  }
  /* Low enough that the whole pose, from the raised foot to her head, fits the narrow frame. */
  .hero__media {
    height: 56svh;
    min-height: 22rem;
  }
  .cta-band__media {
    aspect-ratio: 4 / 3;
  }
  .hero__media::after,
  .cta-band__media::after {
    background:
      linear-gradient(180deg, rgba(19, 39, 65, 0.5) 0%, rgba(19, 39, 65, 0) 22%),
      linear-gradient(0deg, var(--blue-deep) 0%, rgba(19, 39, 65, 0) 18%);
  }
  .cta-band__media::after {
    background: linear-gradient(0deg, var(--blue-deep) 0%, rgba(19, 39, 65, 0) 22%);
  }
  .hero__content {
    padding-top: 1.25rem;
    padding-bottom: 3.5rem;
  }
  .cta-band__content {
    padding-top: 1.5rem;
    padding-bottom: 4rem;
  }
}
@media (max-width: 36rem) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    padding-inline: 1.25rem;
    letter-spacing: 0.14em;
  }
}

/* Inner page header */
.page-head {
  padding-top: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}
.page-head__title {
  max-width: 18ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.page-head__intro {
  max-width: 40rem;
  color: var(--ink-2);
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  line-height: 1.5;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Application form */
.apply-head {
  padding-bottom: 0;
}
.apply__grid {
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 60rem) {
  .apply__grid {
    grid-template-columns: 8fr 4fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
  .apply__aside-inner {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
.apply {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.apply__intro {
  max-width: 40rem;
  margin-bottom: 3rem;
  color: var(--ink-2);
}
.apply__intro p:first-child {
  color: var(--ink);
  font-size: 1.12em;
}
.apply-form__section {
  margin: 0 0 3rem;
  padding: 0;
  border: 0;
}
.apply-form__legend {
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: var(--h3);
  line-height: 1.15;
}
.field {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field__label {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 700;
  font-size: 1rem;
}
.field__req {
  color: var(--blue);
}
.field__help {
  margin: -0.2rem 0 0.4rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.field__input:focus {
  outline: none;
  border-bottom-color: var(--blue);
  box-shadow: 0 1px 0 0 var(--blue);
}
.field__input--area {
  min-height: 7rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  resize: vertical;
}
.field__input--area:focus {
  border-color: var(--blue);
}
.choices {
  display: grid;
  gap: 0.35rem 1.5rem;
  margin-top: 0.4rem;
}
@media (min-width: 40rem) {
  .choices {
    grid-template-columns: repeat(2, 1fr);
  }
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.35rem 0;
  line-height: 1.45;
  cursor: pointer;
}
.choice input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.field__other {
  display: block;
  margin-top: 0.75rem;
}
.field__sublabel {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.field__error,
.apply-form__status {
  margin: 0.5rem 0 0;
  color: #9b2c2c;
  font-size: var(--text-sm);
}
.apply-form__note {
  margin-top: -0.5rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.choice--consent {
  max-width: 40rem;
  margin-bottom: 2rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.choice--consent a {
  color: inherit;
}
.apply-form__success {
  padding: 2.5rem;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1.35;
}
.apply-form__success:focus {
  outline: none;
}

.pull-quote {
  margin: 2rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--blue);
}
.pull-quote blockquote {
  margin: 0 0 0.6rem;
}
.pull-quote blockquote p {
  max-width: none;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
  line-height: 1.35;
  color: var(--ink);
}
.pull-quote blockquote p::before {
  content: "“";
}
.pull-quote blockquote p::after {
  content: "”";
}
:lang(hr) .pull-quote blockquote p::before {
  content: "„";
}
.pull-quote figcaption {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}

.how-steps {
  display: grid;
  gap: 2rem 2.5rem;
}
@media (min-width: 40rem) {
  .how-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 60rem) {
  .how-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
.how-step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.how-step__num {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--blue);
}
.how-step__title {
  margin-bottom: 0.6rem;
  font-size: 1.45rem;
}
.how-step p {
  color: var(--ink-2);
}

.audience {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 60rem) {
  .audience {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}
.audience__item {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.audience__item h3 {
  margin-bottom: 0.9rem;
}
.audience__item p {
  color: var(--ink-2);
}

.note-band__inner {
  max-width: 52rem;
  text-align: center;
}
.note-band .eyebrow {
  margin-bottom: 1.75rem;
  font-family: var(--serif);
  font-weight: 400;
}
.note-band__text {
  margin: 0 auto;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2.05rem);
  line-height: 1.4;
}
.note-band__sign {
  margin-top: 1.75rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--on-dark-2);
}
.note-band__sign::before {
  content: "— ";
}

.faq__grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 60rem) {
  .faq__grid {
    grid-template-columns: 4fr 7fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
}
.faq {
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  position: relative;
  display: block;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.9rem;
  height: 1px;
  background: var(--blue);
  transition: transform 0.35s var(--ease);
}
.faq__q::after {
  transform: rotate(90deg);
}
.faq__item[open] .faq__q::after {
  transform: rotate(0deg);
}
.faq__a {
  padding: 0 2.5rem 1.5rem 0;
  color: var(--ink-2);
}
/* Questions and client stories (story__more) slide open and closed where the browser can animate the
   inside of a <details> (::details-content, interpolate-size); elsewhere they simply open. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item,
  .story__more {
    interpolate-size: allow-keywords;
  }
  .faq__item::details-content,
  .story__more::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    transition:
      block-size 0.5s var(--ease),
      opacity 0.4s var(--ease),
      content-visibility 0.5s allow-discrete;
  }
  .faq__item[open]::details-content,
  .story__more[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

.cta-center__inner {
  text-align: center;
}
/* Keep the text measure narrow but let two long buttons sit side by side */
.cta-center__inner > h2,
.cta-center__inner > p {
  max-width: 48rem;
  margin-inline: auto;
}
.cta-center h2 {
  margin-bottom: 1.25rem;
}
.cta-center p {
  margin-bottom: 2rem;
  color: var(--ink-2);
}

/* Course pages (masterclasses) */
.learn-grid {
  display: grid;
  gap: 2rem 2.5rem;
}
@media (min-width: 40rem) {
  .learn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 60rem) {
  .learn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.learn-grid__item {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.learn-grid__item h3 {
  margin-bottom: 0.6rem;
  font-size: 1.5rem;
}
.learn-grid__item p {
  color: var(--ink-2);
}

.curriculum__intro {
  margin-top: 1.25rem;
  color: var(--ink-2);
}
.curriculum {
  display: grid;
  gap: 3rem;
}
@media (min-width: 60rem) {
  .curriculum {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.curriculum__part .eyebrow {
  margin-bottom: 0.5rem;
}
.curriculum__part h3 {
  margin-bottom: 1.25rem;
}
.curriculum__list {
  counter-reset: lesson;
  border-top: 1px solid var(--line);
}
.curriculum__list li {
  counter-increment: lesson;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.curriculum__list li::before {
  content: counter(lesson, decimal-leading-zero);
  padding-top: 0.2rem;
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  color: var(--blue);
}
.curriculum__notes {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 60rem) {
  .curriculum__notes {
    grid-template-columns: repeat(2, 1fr);
  }
}
.curriculum__note {
  padding: 1.75rem;
  background: var(--bg-alt);
}
.curriculum__note h3 {
  margin-bottom: 0.75rem;
  font-size: 1.45rem;
}
.curriculum__note p {
  color: var(--ink-2);
}

@media (min-width: 60rem) {
  .split--text {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.split--text h2 {
  margin-bottom: 1.5rem;
}
.check-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.check-list li:first-child {
  border-top: 1px solid var(--line);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.25rem;
  width: 0.8rem;
  height: 0.45rem;
  border-left: 1.5px solid var(--blue);
  border-bottom: 1.5px solid var(--blue);
  transform: rotate(-45deg);
}
.before__text {
  color: var(--ink-2);
}
.before__text + .before__text {
  margin-top: 1rem;
}

/* Data tables (Sanskrit names, class library): columns on desktop, stacked cards on phones */
.data-table-wrap {
  max-width: 64rem;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.data-table thead th {
  padding: 0 1.25rem 0.9rem 0;
  font-family: var(--serif);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 1px solid var(--ink);
}
.data-table tbody th,
.data-table td {
  padding: 1.05rem 1.25rem 1.05rem 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--line);
}
.data-table tbody th {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
.data-table td {
  color: var(--ink-2);
}
.data-table--names tbody th {
  white-space: nowrap;
}
.data-table--names td:last-child {
  font-style: italic;
}
/* Fixed layout so every course table lines up with the others */
.data-table--classes {
  table-layout: fixed;
}
.data-table--classes thead th:nth-child(1) {
  width: 26%;
}
.data-table--classes thead th:nth-child(2) {
  width: 9rem;
}
.data-table--classes thead th:nth-child(4) {
  width: 19%;
}
.data-table--classes td:nth-of-type(3) {
  font-size: var(--text-sm);
}
.data-table__tag {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--serif);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
@media (max-width: 47.99rem) {
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table tbody th,
  .data-table td {
    display: block;
    width: auto;
  }
  .data-table tr {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
  }
  .data-table tr:first-child {
    border-top: 1px solid var(--ink);
  }
  .data-table tbody th,
  .data-table td {
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .data-table tbody th {
    margin-bottom: 0.35rem;
  }
  .data-table td + td {
    margin-top: 0.35rem;
  }
  .data-table td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-style: normal;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
  }
  /* The class length is short: keep label and value on one line */
  .data-table--classes td:nth-of-type(1)::before {
    display: inline;
    margin-right: 0.6em;
  }
}

/* Offer pages: lead intro, course tracks, extra courses */
.offer-intro {
  max-width: 50rem;
}
.offer-intro p {
  color: var(--ink-2);
}
.offer-intro p:first-child {
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-size: var(--h3);
  line-height: 1.35;
  color: var(--ink);
}
.offer-intro p + p:not(:first-child) {
  margin-top: 1rem;
}
.track + .track {
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.track__head {
  max-width: 46rem;
  margin-bottom: 2rem;
}
.track__head h3 {
  margin: 0.5rem 0 1rem;
}
.track__head p:not(.eyebrow) {
  color: var(--ink-2);
}
.more-grid {
  display: grid;
  gap: 2rem 3rem;
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
@media (min-width: 48rem) {
  .more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.more-grid__item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}
.more-grid__item h3 {
  margin-bottom: 0.9rem;
}
.more-grid__item p {
  margin-bottom: 1.25rem;
  color: var(--ink-2);
}
.more-grid__note {
  margin-top: 2.5rem;
  font-style: italic;
  color: var(--ink-2);
}

/* Pose progressions: Sofia's cut-out figures sit directly on the page background */
.prog-head__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}
@media (min-width: 60rem) {
  .prog-head__grid {
    grid-template-columns: 7fr 5fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.prog-head__figure img {
  width: auto;
  max-height: min(30rem, 70vh);
  margin-inline: auto;
}
.page-head__intro p {
  max-width: 40rem;
}

.prog-steps {
  padding-bottom: 0;
}
.steps {
  border-bottom: 1px solid var(--line);
}
.step {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .step {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
  .step:nth-child(even) .step__media {
    order: 2;
  }
}
.step__media {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem 2.5rem;
}
.step__media picture {
  flex: 0 1 auto;
}
.step__media img {
  width: auto;
  max-height: 22rem;
}
.step__media--pair img {
  max-height: 15rem;
}
.step__num {
  margin-bottom: 0.75rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);
  line-height: 1;
  color: var(--blue);
}
.step__kicker {
  margin-bottom: 0.5rem;
}
.step__title {
  font-size: clamp(1.9rem, 1.6rem + 1.1vw, 2.6rem);
}
.step__sanskrit {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  color: var(--blue);
}
.step__text,
.prog-cta__text {
  max-width: 36rem;
  margin-top: 1.25rem;
  color: var(--ink-2);
}
.step__text ul,
.step__text ol,
.prog-cta__text ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}
.step__text ul {
  list-style: disc;
}
.step__text ol {
  list-style: decimal;
}
.step__text li + li {
  margin-top: 0.35em;
}
.step__text li::marker {
  color: var(--blue);
}
.step__text ul:last-child,
.step__text ol:last-child {
  margin-bottom: 0;
}
.step__text strong,
.prog-cta__text strong {
  color: var(--ink);
}

.step__note {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ink-2);
}
.prog-cta__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 60rem) {
  .prog-cta__grid {
    grid-template-columns: 4fr 7fr;
    gap: clamp(3rem, 7vw, 7rem);
  }
}
.prog-cta__figure img {
  width: auto;
  max-height: 20rem;
  margin-inline: auto;
}
.prog-cta .actions {
  margin-top: 2rem;
}
.btn--outline {
  color: var(--blue);
  border-color: var(--line);
}
.btn--outline:hover {
  border-color: var(--blue);
}

.prog-more__title {
  margin-bottom: 2rem;
  font-size: var(--h3);
}
.prog-list {
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .prog-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.prog-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.4s var(--ease);
}
.prog-card:hover {
  border-color: var(--blue);
}
.prog-card__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 11rem;
}
.prog-card__media picture {
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.prog-card__media img {
  width: auto;
  max-height: 100%;
}
.prog-card__title {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.2;
}

/* Past workshops */
.workshop {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.workshop:last-child {
  padding-bottom: 0;
}
.workshop__head {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}
.workshop__head .eyebrow {
  margin-bottom: 0.75rem;
}
.workshop__text {
  max-width: 40rem;
  color: var(--ink-2);
}
@media (min-width: 60rem) {
  .workshop__head {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

/* Gallery: first photo large, the rest square */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.gallery__item {
  display: block;
  padding: 0;
  border: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-alt);
  cursor: zoom-in;
}
.gallery__item picture,
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.gallery__item:hover img {
  transform: scale(1.035);
}
.gallery__item:first-child {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}
@media (min-width: 48rem) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
  .gallery__item:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .gallery--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery--3 .gallery__item:first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1;
  }
}

/* A coming workshop: the teaser on the workshops page and the workshop's own page. */
.next-workshop {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 60rem) {
  .next-workshop {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}
.next-workshop__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 20% 50%; /* the whole figure, where the photo stands in for the poster */
}
.next-workshop__when {
  margin-block: 0.75rem 1rem;
  color: var(--blue);
}
.event-lead {
  max-width: 44rem;
  margin-bottom: 2.25rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.3;
}
.event-sessions {
  display: grid;
  gap: 3rem;
}
@media (min-width: 60rem) {
  .event-sessions {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .event-session {
    padding-inline: clamp(2rem, 4vw, 4rem);
  }
  .event-session:first-child {
    padding-left: 0;
  }
  .event-session:last-child {
    padding-right: 0;
  }
  .event-session + .event-session {
    border-left: 1px solid var(--line);
  }
}
.event-session__time {
  margin-bottom: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--blue);
}
.event-session__title {
  margin-bottom: 0.4rem;
  font-size: var(--h2);
}
.event-session__subtitle {
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--h3);
  line-height: 1.25;
  color: var(--ink-2);
}
.event-session__list {
  margin: 0 0 1.75rem;
  padding-left: 1.2em;
  list-style: disc;
}
.event-session__list li + li {
  margin-top: 0.35em;
}
.event-session__list li::marker {
  color: var(--blue);
}
.event-session__bonus {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.event-session__bonus strong {
  color: var(--ink);
}
.event-results > * {
  max-width: 46rem;
}
.event-results .quote {
  padding-inline: 0;
}
.event-results .quote blockquote p {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem);
}
.event-results__text {
  margin: 2rem 0 0;
  color: var(--on-dark-2);
}
.event-facts {
  display: grid;
  gap: 1.25rem;
}
.event-facts + .event-facts {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .event-facts {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.event-facts__text {
  color: var(--ink-2);
}
.event-prices {
  margin: 0 0 1.5rem;
}
.event-prices > div {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.event-prices > div:first-child {
  padding-top: 0;
}
.event-prices dt {
  color: var(--ink-2);
}
.event-prices dd {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: var(--h3);
  line-height: 1.25;
}
.host .eyebrow {
  margin-bottom: 1rem;
}
.event-booking {
  margin: 1rem 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}
.event-booking a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* The booking form at the end of the workshop page. */
.event-form__inner {
  max-width: 40rem;
}
.event-form h2 {
  margin-bottom: 0.75rem;
}
.event-form__intro {
  margin: 0 0 2rem;
  color: var(--ink-2);
}
.event-form .event-booking {
  margin-top: 2rem;
}

/* Host a workshop */
.host__inner {
  max-width: 46rem;
  text-align: center;
}
.host h2 {
  margin-bottom: 1.25rem;
}
.host p {
  margin: 0 auto 2.25rem;
  color: var(--on-dark-2);
}

/* The method (About, and the intro on home): the heading's key words in blue italics over a small lotus
   on a line (lotus-rule.svg, scripts/lotus.mjs), the opening sentence as a lead in the display face,
   and the three things the method focuses on marked with a soft highlight that sweeps in, one after
   another, when the text scrolls into view. */
.method__title em {
  color: var(--blue);
}
.method__title::after {
  content: "";
  display: block;
  width: 7.5rem;
  height: 1.875rem;
  margin-top: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  background: var(--blue-soft);
  -webkit-mask: url("/assets/img/lotus-rule.svg") no-repeat 0 0 / 100% 100%;
  mask: url("/assets/img/lotus-rule.svg") no-repeat 0 0 / 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .method__title::after {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.6s var(--ease) 0.5s;
  }
  .js .method__title.is-visible::after {
    clip-path: inset(0);
  }
}
.method__text p:first-child {
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
}
.method__text mark {
  padding: 0 0.1em;
  color: var(--ink);
  background: linear-gradient(transparent 58%, rgba(142, 166, 196, 0.42) 58%) no-repeat 0 0 / 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .method__text mark {
    background-size: 0% 100%;
    transition: background-size 1.1s var(--ease) 0.6s;
  }
  .js .method__text.is-visible mark {
    background-size: 100% 100%;
  }
  .js .method__text mark:nth-of-type(2) {
    transition-delay: 1s;
  }
  .js .method__text mark:nth-of-type(3) {
    transition-delay: 1.4s;
  }
}

/* About: education and certificates. Milestones in big numbers, then the certificates as sheets of
   paper, each slightly turned; hovering straightens one, and clicking opens it in the lightbox. */
.credentials__intro {
  margin-top: 1.25rem;
  color: var(--on-dark-2);
}
.credentials__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 1.5rem;
  margin: 0 0 clamp(4rem, 3rem + 4vw, 6.5rem);
  padding: 0;
  list-style: none;
}
@media (min-width: 60rem) {
  .credentials__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}
.credentials__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-2);
  line-height: 1.45;
}
.credentials__big {
  font-family: var(--display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  color: var(--on-dark);
}
.credentials__big small {
  font-size: 0.4em;
  letter-spacing: 0.04em;
  color: var(--on-dark-2);
}
.certs {
  --sheet-h: clamp(12rem, 9rem + 8vw, 15rem);
  display: grid;
  gap: 3.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .certs {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cert__open {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: var(--sheet-h);
  margin-bottom: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.cert__sheet {
  position: relative;
  display: block;
  max-width: 100%;
  transform: rotate(var(--tilt, -1.6deg));
  transition: transform 0.6s var(--ease);
}
.cert:nth-child(2) .cert__sheet {
  --tilt: 1.3deg;
}
.cert:nth-child(3) .cert__sheet {
  --tilt: -0.9deg;
}
.cert__open:hover .cert__sheet,
.cert__open:focus-visible .cert__sheet {
  transform: translateY(-0.5rem) rotate(0deg);
}
.cert__sheet picture {
  display: block;
}
.cert__sheet img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--sheet-h);
  box-shadow: 0 1.25rem 2.5rem rgba(5, 12, 24, 0.45), 0 0.2rem 0.6rem rgba(5, 12, 24, 0.3);
}
.cert__zoom {
  position: absolute;
  right: -0.6rem;
  bottom: -0.6rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--on-dark);
  color: var(--blue-deep);
  box-shadow: 0 0.3rem 0.8rem rgba(5, 12, 24, 0.35);
  transition: transform 0.4s var(--ease);
}
.cert__open:hover .cert__zoom {
  transform: scale(1.12);
}
.cert__zoom svg {
  width: 0.9rem;
}
.cert .eyebrow,
.cert h3 {
  margin-bottom: 0.75rem;
}
.cert p:not(.eyebrow) {
  max-width: 40ch;
  color: var(--on-dark-2);
}
/* Her degree and her current studies, one line each, the labels in a column on wider screens. */
.credentials__study {
  margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  line-height: 1.35;
}
.credentials__study li {
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
}
.credentials__study li + li {
  margin-top: 1.75rem;
}
.credentials__study .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-family: var(--serif);
}
@media (min-width: 48rem) {
  .credentials__study li {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
  }
  .credentials__study .eyebrow {
    margin: 0;
  }
}
.credentials__study .eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--blue-soft);
}

/* Lightbox */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark);
}
.lightbox::backdrop {
  background: rgba(12, 22, 38, 0.98);
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 4.5rem 1rem 1.5rem;
}
@media (min-width: 48rem) {
  .lightbox__figure {
    padding-inline: 5.5rem;
  }
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100svh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  max-width: 40rem;
  color: var(--on-dark-2);
  font-size: var(--text-sm);
  text-align: center;
}
.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: rgba(12, 22, 38, 0.4);
  color: var(--on-dark);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.lightbox__btn:hover {
  border-color: var(--on-dark);
  background: rgba(246, 243, 237, 0.08);
}
.lightbox__btn svg {
  width: 1rem;
}
.lightbox__close {
  top: 1rem;
  right: 1rem;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox__prev {
  left: 1rem;
}
.lightbox__next {
  right: 1rem;
}
@media (max-width: 47.99rem) {
  .lightbox__figure {
    padding-bottom: 5rem;
  }
  .lightbox__img {
    max-height: calc(100svh - 13rem);
  }
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
}
html:has(.lightbox[open]) {
  overflow: hidden;
}
/* Popups open and close with motion in main.js (openDialog, closeDialog). Each new photo slides in from
   the side it comes from once it has loaded (is-loading). */
@media (prefers-reduced-motion: no-preference) {
  .lightbox__img {
    transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  }
  .lightbox__img.is-loading {
    opacity: 0;
    transform: translateX(var(--slide-from, 0)) scale(0.98);
    transition: none;
  }
}

/* Footer */
.site-footer {
  padding-top: clamp(4rem, 3rem + 4vw, 6rem);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  gap: 3rem;
  padding-bottom: 4rem;
}
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.footer-brand__logo {
  display: inline-block;
  color: var(--ink);
}
.footer-brand__logo .logo-full {
  width: 9.5rem;
}
.footer-brand__tagline {
  max-width: 22rem;
  margin-top: 1.5rem;
  color: var(--ink-2);
}
.footer-col__title {
  margin-bottom: 1.1rem;
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
}
.footer-col li + li {
  margin-top: 0.35rem;
}
.footer-col a,
.footer-bottom a,
.footer-consent {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.footer-col a:hover,
.footer-bottom a:hover,
.footer-consent:hover {
  background-size: 100% 1px;
}
/* "Cookie settings" opens the cookie notice again, so it is a button dressed as the links beside it.
   It needs JavaScript, like the notice. */
.footer-consent {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.no-js .footer-bottom__consent {
  display: none;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.75rem 2.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}
/* Language links: the underline runs under the name only, not the flag. */
.footer-bottom .footer-lang {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
}
.footer-lang span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.footer-lang:hover span {
  background-size: 100% 1px;
}
.footer-lang .flag {
  width: 1.05rem;
  height: 1.05rem;
}

/* Language offer (partials/lang-suggest.njk): frosted glass floating at the bottom of the window, in
   one row on wide screens, with the button on a row of its own on phones. It waits until the cookie
   notice is answered (main.js). */
.lang-suggest {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem 1rem;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  color: var(--ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(246, 243, 237, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(19, 39, 65, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  opacity: 0;
  transform: translate(-50%, 1rem);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.lang-suggest.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.lang-suggest[hidden],
.consent[hidden] {
  display: none;
}
.lang-suggest p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--text-sm);
}
.lang-suggest__cta.btn {
  min-height: 2.4rem;
  padding: 0.5rem 1.2rem;
  white-space: nowrap;
}
.lang-suggest__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.lang-suggest__close:hover {
  background: rgba(19, 39, 65, 0.08);
}
.lang-suggest__close svg {
  width: 0.75rem;
  height: 0.75rem;
}
@media (max-width: 40rem) {
  .lang-suggest {
    left: var(--gutter);
    right: var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto;
    width: auto;
    max-width: none;
    padding: 0.75rem 0.5rem 0.75rem 0.9rem;
    border-radius: 1.25rem;
    transform: translateY(1rem);
  }
  .lang-suggest.is-visible {
    transform: none;
  }
  .lang-suggest__cta.btn {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-right: 0.4rem;
  }
}

/* Cookie notice (partials/consent.njk): a blue section in miniature (section--blue gives the colour and
   the drifting light), as a card in the bottom left corner, across the width on phones. Behind the text
   the watermark lotus draws itself as the card comes up, then keeps turning and flowing. */
.consent {
  position: fixed;
  left: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  z-index: 41;
  width: min(25.5rem, calc(100% - 2 * var(--gutter)));
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1px solid rgba(246, 243, 237, 0.14);
  border-radius: 1.5rem;
  box-shadow: 0 30px 60px -24px rgba(8, 18, 31, 0.65), 0 2px 6px rgba(8, 18, 31, 0.2);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.consent.is-visible {
  opacity: 1;
  transform: none;
}
.consent .lotus-watermark {
  right: -5rem;
  width: 19rem;
  opacity: 0.5;
}
.consent .eyebrow {
  margin-bottom: 0.85rem;
}
.consent__title {
  margin: 0 0 0.55rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
  line-height: 1.15;
}
.consent__text {
  margin: 0 0 1.35rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-dark-2);
}
.consent__text a {
  color: var(--on-dark);
  text-underline-offset: 0.2em;
}
.consent__actions {
  display: flex;
  gap: 0.6rem;
}
.consent .btn {
  flex: 1;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
}
@media (max-width: 40rem) {
  .consent {
    right: var(--gutter);
    width: auto;
    padding: 1.3rem 1.3rem 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lang-suggest,
  .consent {
    transition: none;
  }
}

/* Scroll reveal (only when JavaScript runs, and never with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
  }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* The hero animates on load with CSS alone, so the headline never waits for JavaScript. */
  .js .hero .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: rise 1.3s var(--ease) both;
  }
  .hero .reveal:nth-child(2) {
    animation-delay: 0.08s;
  }
  .hero .reveal:nth-child(3) {
    animation-delay: 0.16s;
  }
  .hero .reveal:nth-child(4) {
    animation-delay: 0.24s;
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(1.25rem);
    }
  }
}

/* Video page: clip grid and player dialog (reuses the lightbox frame) */
.loop-toggle {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(246, 243, 237, 0.6);
  border-radius: 50%;
  background: rgba(19, 39, 65, 0.45);
  color: var(--on-dark);
  cursor: pointer;
}
.loop-toggle svg {
  width: 1rem;
}
.loop-toggle[hidden],
.loop-toggle .loop-toggle__play,
.loop-toggle[aria-pressed="true"] .loop-toggle__pause {
  display: none;
}
.loop-toggle[aria-pressed="true"] .loop-toggle__play {
  display: block;
}
/* Sound and pause buttons of a YouTube hero, side by side in the corner. */
.media-controls {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}
.media-controls > * {
  pointer-events: auto;
}
.media-controls .loop-toggle {
  position: static;
}
.media-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(246, 243, 237, 0.6);
  border-radius: 999px;
  background: rgba(19, 39, 65, 0.45);
  color: var(--on-dark);
  font-family: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.media-btn svg {
  flex: none;
  width: 1rem;
}
.media-btn[hidden],
.media-btn .media-btn__on,
.media-btn.is-on .media-btn__off {
  display: none;
}
.media-btn.is-on .media-btn__on {
  display: inline;
}
/* Until the video shows, the sound button says it is loading (main.js): the lotus drawing itself and a
   light sweeping along its bottom while YouTube starts, then (is-starting) a bar that fills over the
   wait before the photo fades, when it turns into the sound button. */
.media-btn__spin {
  display: none;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}
.media-btn__spin .lotus-spinner {
  display: block;
  width: 100%;
  height: 100%;
}
.media-btn.is-loading {
  position: relative;
  overflow: hidden;
  border-color: rgba(246, 243, 237, 0.35);
  cursor: default;
}
.media-btn.is-loading .media-btn__spin {
  display: block;
}
.media-btn.is-loading > svg {
  display: none;
}
.media-btn.is-loading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35%;
  height: 2px;
  background: linear-gradient(90deg, rgba(246, 243, 237, 0), var(--on-dark), rgba(246, 243, 237, 0));
  animation: media-sweep 1.4s var(--ease) infinite;
}
.media-btn.is-starting::after {
  width: 100%;
  background: var(--on-dark);
  transform-origin: left;
  animation: media-fill var(--reveal, 3.5s) linear forwards;
}
@keyframes media-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}
@keyframes media-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.video-grid {
  display: grid;
  gap: 2.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 60rem) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.video-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.video-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-alt);
}
.video-card__media picture,
.video-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.video-card:hover .video-card__media img,
.video-card:focus-visible .video-card__media img {
  transform: scale(1.03);
}
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(246, 243, 237, 0.75);
  border-radius: 50%;
  background: rgba(19, 39, 65, 0.4);
  color: var(--on-dark);
  transform: translate(-50%, -50%);
  transition: background 0.3s;
}
.video-card__play svg {
  width: 1.1rem;
  margin-left: 0.15rem;
}
.video-card:hover .video-card__play,
.video-card:focus-visible .video-card__play {
  background: rgba(19, 39, 65, 0.75);
}
.video-card__time {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.1rem 0.5rem;
  background: rgba(19, 39, 65, 0.7);
  color: var(--on-dark);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.video-card__title {
  display: block;
  margin-top: 1rem;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
}
.video-card__iast {
  display: block;
  margin-top: 0.2rem;
  font-style: italic;
  color: var(--ink-2);
}
.video-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.video-dialog__video {
  width: min(100%, calc((100svh - 9rem) * 16 / 9));
  max-height: calc(100svh - 9rem);
  background: #000;
}

/* Inner page hero (partials/page-hero.njk): a short note under the button */
.hero__note {
  max-width: 34rem;
  margin-top: 1.25rem;
  color: var(--on-dark-2);
  font-size: var(--text-sm);
}

/* Edge-to-edge bands: a loop (or photo) the full width of the window, no frame around it */
.loop-band {
  position: relative;
  height: min(85vh, 56.25vw);
  min-height: 18rem;
  overflow: hidden;
  background: var(--blue-deep);
}
.loop-band--head {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
/* Video bands between sections fill the screen, like the heroes. */
@media (min-width: 48rem) {
  .loop-band:not(.loop-band--head) {
    height: 100vh;
    height: 100svh;
  }
}
@media (max-width: 47.99rem) {
  .loop-band {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Half-screen media: the loop runs to the window edge and the full height of the section, with the
   text in the other half, aligned to the page container. Stacked on phones and tablets. */
.split-bleed {
  display: grid;
}
.split-bleed__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blue-deep);
}
.split-bleed__body {
  padding: var(--section) var(--gutter);
}
.split-bleed__body h2 {
  margin-bottom: 1.75rem;
}
.split-bleed__body p:not(.eyebrow) {
  max-width: 34rem;
  color: var(--ink-2);
}
.split-bleed__body p + p {
  margin-top: 1rem;
}
@media (min-width: 60rem) {
  .split-bleed {
    grid-template-columns: 1fr 1fr;
    min-height: min(92vh, 60rem);
  }
  .split-bleed__media {
    aspect-ratio: auto;
  }
  .split-bleed--flip .split-bleed__media {
    order: 2;
  }
  .split-bleed__body {
    align-self: center;
    /* Text lines up with the page container on the outer side. */
    padding-left: clamp(3rem, 6vw, 7rem);
    padding-right: max(var(--gutter), calc((100% * 2 - var(--container)) / 2));
  }
  .split-bleed--flip .split-bleed__body {
    padding-left: max(var(--gutter), calc((100% * 2 - var(--container)) / 2));
    padding-right: clamp(3rem, 6vw, 7rem);
  }
  .split-bleed__body > div {
    max-width: 36rem;
  }
}

/* Client stories: quote, name and role, the full story opens below (details/summary). */
.story-list {
  display: grid;
  gap: clamp(3rem, 2.5rem + 2vw, 4.5rem) clamp(2rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 60rem) {
  .story-list {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.story {
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink);
}
.story__quote {
  margin: 0;
}
.story__quote blockquote {
  margin: 0 0 1.1rem;
}
.story__quote blockquote p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.45rem, 1.25rem + 0.7vw, 1.9rem);
  line-height: 1.3;
  color: var(--ink);
}
.story__name {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.story__role {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.story__more {
  margin-top: 1.25rem;
}
.story__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  list-style: none;
}
.story__more summary::-webkit-details-marker {
  display: none;
}
.story__more summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.story__more[open] summary::after {
  transform: translateY(0.1rem) rotate(-135deg);
}
.story__text {
  padding-top: 1.25rem;
}
.story__text p {
  max-width: 62ch;
  color: var(--ink-2);
}
.story__text p + p {
  margin-top: 1rem;
}

.story__lead {
  max-width: 62ch;
  margin-top: 1.25rem;
  color: var(--ink-2);
}
.story[hidden] {
  display: none;
}

/* Client stories page: results strip, the featured story, the filter */
.results {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}
.results__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.results__item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink);
}
.results__big {
  font-family: var(--display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  color: var(--ink);
}
.results__text {
  color: var(--ink-2);
  line-height: 1.45;
}
.results__who {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.feature-story__quote {
  margin: 1.5rem 0 0;
}
.feature-story__quote blockquote {
  margin: 0;
}
.feature-story__quote blockquote p {
  max-width: 28ch;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2rem, 1.4rem + 2.3vw, 3.4rem);
  line-height: 1.18;
  color: var(--ink);
}
.feature-story__quote figcaption {
  margin-top: 1.5rem;
}
.feature-story__text {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.feature-story__text p {
  color: var(--ink-2);
}
.feature-story__text p + p {
  margin-top: 1rem;
}
@media (min-width: 60rem) {
  .feature-story__text {
    column-count: 2;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
  .feature-story__text p {
    break-inside: avoid;
  }
}
.story-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}
.story-filter[hidden] {
  display: none;
}
.story-filter__label {
  margin-right: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.story-filter button {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.story-filter button:hover {
  border-color: var(--blue);
}
.story-filter button[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-dark);
}
.story-filter__count {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* Contact: details beside the form */
.page-head__actions {
  margin-top: 2rem;
}
.contact__grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 60rem) {
  .contact__grid {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 7vw, 7.5rem);
    align-items: start;
  }
}
.contact__list {
  margin: 0;
}
.contact__list > div {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.contact__list > div:first-child {
  border-top: 1px solid var(--line);
}
.contact__list dt {
  margin-bottom: 0.35rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.contact__list dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
}
.contact__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact__form h2 {
  margin-bottom: 1.75rem;
}

/* Privacy policy and cookies */
.legal {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.legal__updated {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.legal__body {
  max-width: calc(46rem + 2 * var(--gutter));
  margin-inline: 0;
}
@media (min-width: 60rem) {
  .legal__body {
    margin-left: max(0px, calc((100% - var(--container)) / 2 - var(--gutter)));
  }
}
.legal__body h2 {
  margin: 2.75rem 0 1rem;
  font-size: var(--h3);
}
.legal__body h2:first-child {
  margin-top: 0;
}
.legal__body p,
.legal__body li {
  color: var(--ink-2);
}
.legal__body p + p {
  margin-top: 1rem;
}
.legal__body ul {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0;
  padding-left: 1.2rem;
}
.legal__body strong {
  color: var(--ink);
  font-weight: 700;
}
.legal__body a,
.story__text a {
  color: var(--blue);
}

/* 404 */
.notfound {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-bottom: var(--section);
}
.notfound__grid {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 60rem) {
  .notfound__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 7vw, 7.5rem);
  }
}
.notfound__title {
  margin-bottom: 1.5rem;
}
.notfound__links {
  display: grid;
  gap: 0.8rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
/* Home in the other site languages, in a row under both columns. */
.notfound__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  list-style: none;
}

/* Blog: article page */
.post__head .eyebrow a {
  color: inherit;
}
.post__title {
  max-width: 22ch;
}
.post__section {
  padding-top: clamp(3rem, 2.5rem + 3vw, 5rem);
}
.post__body {
  max-width: calc(46rem + 2 * var(--gutter));
  margin-inline: 0;
}
@media (min-width: 60rem) {
  .post__body {
    margin-left: max(0px, calc((100% - var(--container)) / 2 - var(--gutter)));
  }
}
.post__body > p,
.post__body li {
  color: var(--ink-2);
}
.post__body > p:first-child {
  color: var(--ink);
  font-size: 1.15em;
  line-height: 1.55;
}
.post__body > * + * {
  margin-top: 1.1rem;
}
.post__body ul,
.post__body ol {
  padding-left: 1.2em;
}
/* Bullets are small lotus petals (lotus-petal.svg). */
.post__body ul {
  list-style: none;
  padding-left: 1.5em;
}
.post__body ul > li {
  position: relative;
}
.post__body ul > li::before {
  content: "";
  position: absolute;
  left: -1.35em;
  top: 0.5em;
  width: 0.62em;
  height: 0.62em;
  background: var(--blue-soft);
  -webkit-mask: url("/assets/img/lotus-petal.svg") no-repeat center / contain;
  mask: url("/assets/img/lotus-petal.svg") no-repeat center / contain;
}
.post__body ol {
  list-style: decimal;
}
.post__body li + li {
  margin-top: 0.45em;
}
.post__body h2 {
  margin-top: 3rem;
  margin-bottom: 0.25rem;
  font-size: var(--h3);
}
.post__body strong {
  color: var(--ink);
}
.post__body a:not(.btn) {
  color: var(--blue);
}
.post__body table {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: collapse;
}
.post__body th,
.post__body td {
  padding: 0.8rem 1rem 0.8rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--line);
}
.post__body thead th {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom-color: var(--ink);
}
.post__body td:first-child {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ink);
  white-space: nowrap;
}
.post__body td {
  color: var(--ink-2);
}
.post__author {
  margin-top: 3rem !important;
  font-size: var(--text-sm);
}
/* The end of the article: a lotus between two lines (lotus-divider.svg). */
.post__author::before {
  content: "";
  display: block;
  width: min(100%, 15rem);
  height: 2.25rem;
  margin: 0 auto 1.75rem;
  background: var(--blue-soft);
  -webkit-mask: url("/assets/img/lotus-divider.svg") no-repeat center / contain;
  mask: url("/assets/img/lotus-divider.svg") no-repeat center / contain;
}

/* Video in an article: thumbnail first, YouTube player after a click */
.yt {
  margin: 1.5rem 0 2rem;
}
.yt__play,
.yt__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.yt__play {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--blue-deep);
  cursor: pointer;
}
.yt__play picture,
.yt__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.yt__play:hover img {
  transform: scale(1.03);
}
.yt__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(246, 243, 237, 0.8);
  border-radius: 50%;
  background: rgba(19, 39, 65, 0.55);
  transform: translate(-50%, -50%);
}
.yt__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--on-dark);
  transform: translate(-50%, -50%);
}
.yt__play:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.yt figcaption {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

/* Blog: other articles, and the index */
.post-links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.post-links__item {
  display: grid;
  gap: 0.3rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.post-links__date {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.post-links__title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.25;
}
.post-links__item:hover .post-links__title {
  color: var(--blue);
}
.blog-list {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.blog-list__link {
  color: inherit;
  text-decoration: none;
}
.blog-list__link:hover {
  color: var(--blue);
}
.blog-list .split-bleed__body h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
}

/* Class pages (layouts/class.njk): level, length and props under the title. */
.class-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  margin-top: 2rem;
}
.class-facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.class-facts dd {
  margin: 0.35rem 0 0;
}

/* Footer credit */
.footer-bottom__credit a {
  color: inherit;
}