/* ==========================================================================
   Diana Vig Nail Academy — public stylesheet

   Every colour, font and measurement comes from a custom property defined in
   includes/theme.php and emitted as an inline :root block before this file
   loads. Nothing below hard-codes a brand value, so the Design screen in the
   admin panel can re-skin the whole site without touching CSS.

   Order: reset · tokens · typography · buttons · header · hero · about ·
          gallery · courses · contact · course page · footer · motion ·
          responsive
   ========================================================================== */

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding under it. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--color-primary); text-decoration: none; }
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--color-secondary); color: #fff;
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.block { display: block; }

/* ------------------------------------------------------------ typography */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: 1.12;
  letter-spacing: var(--heading-spacing);
  color: var(--color-heading);
  /* Keeps a heading from breaking with one lonely word on the last line. */
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.accent {
  color: var(--color-primary);
  font-style: italic;
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-primary);
}

.prose { color: var(--color-text); }
.prose p { margin-bottom: 1.15em; }
.prose strong { color: var(--color-heading); font-weight: 600; }

/* ---------------------------------------------------------------- layout */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

.section {
  position: relative;
  padding-block: var(--section-padding);
}
.section--alt { background: var(--color-bg-alt); }

/* -- the section header --------------------------------------------------
   An eyebrow with a leading rule, the title beneath it, the standfirst beside
   the title, and a hairline closing the block. Left aligned and asymmetric,
   stacked rather than a multi-column grid — letterspaced capitals need a real
   measure or they break after every word. */

.shead {
  margin-bottom: clamp(44px, 5.5vw, 76px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-border);
}

.shead__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-primary);
}
.shead__rule {
  width: 46px; height: 1px; flex: none;
  background: currentColor;
  opacity: .55;
}

.shead__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(18px, 3.5vw, 58px);
  align-items: end;
}
.shead__row--single { grid-template-columns: minmax(0, 1fr); }

.shead__title {
  margin: 0;
  font-family: var(--font-nav);
  font-size: clamp(22px, 3vw, var(--h2-size));
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: var(--title-spacing);
  text-transform: uppercase;
  color: var(--color-heading);
  text-wrap: balance;
}
/* The braced word keeps the Didone — that pairing is what makes it read. */
.shead__title .accent {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 1.06em;
}

.shead__lede {
  margin: 0 0 5px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* The dark band inverts the header colours. */
.awards .shead { border-bottom-color: rgba(255, 255, 255, .13); }
.awards .shead__eyebrow { color: var(--color-accent); }
.awards .shead__title   { color: #fff; }
.awards .shead__lede    { color: rgba(255, 255, 255, .58); }

@media (max-width: 900px) {
  .shead__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .shead__lede { margin-top: 6px; }
}

/* A heading used inside a column rather than as a section header. Same
   typographic voice, without the index numeral and rule. */
.blocktitle {
  font-family: var(--font-nav);
  font-size: clamp(20px, 2.4vw, calc(var(--h2-size) - 3px));
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: var(--title-spacing);
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 18px;
  text-wrap: balance;
}
.blocktitle .accent {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 1.08em;
}
.blocklede {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.contact .blocktitle { color: #fff; }
.contact .blocklede  { color: rgba(255, 255, 255, .58); }

/* --------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--color-btn);
  --btn-fg: var(--color-btn-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .28s ease, color .28s ease,
              border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary:hover {
  --btn-bg: var(--color-btn-hover);
  box-shadow: 0 12px 26px -14px rgba(var(--color-primary-rgb), .8);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-heading);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  --btn-bg: var(--color-heading);
  --btn-fg: var(--color-bg);
  border-color: var(--color-heading);
}

/* A quiet third option: a rule under the label, no box. */
.btn--text {
  --btn-bg: transparent;
  --btn-fg: var(--color-heading);
  padding-inline: 4px;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}
.btn--text:hover {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  border-bottom-color: var(--color-primary);
  box-shadow: none;
}

.btn--sm  { padding: 9px 16px;  font-size: 11px;   letter-spacing: .12em; }
.btn--lg  { padding: 17px 34px; font-size: 13.5px; }
.btn--block { display: flex; width: 100%; }

.btn__icon {
  width: 16px; height: 16px; flex: none;
  transition: transform .28s ease;
}
.btn:hover .btn__icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: 20px;
  transition: background-color .34s ease, box-shadow .34s ease, padding .34s ease;
}
.site-header.is-sticky { position: fixed; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* Over the hero the header is transparent with light type; once the page
   scrolls it becomes a solid bar. .is-solid is added by main.js. */
.site-header.is-over-hero:not(.is-solid) {
  --header-fg: var(--color-header-top);
}
.site-header.is-solid,
.site-header:not(.is-over-hero) {
  --header-fg: var(--color-header-text);
  background: color-mix(in srgb, var(--color-header) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(var(--color-secondary-rgb), .08);
  padding-block: 13px;
}

/* Fallback for browsers without color-mix: a flat, fully opaque bar. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header.is-solid,
  .site-header:not(.is-over-hero) { background: var(--color-header); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--header-fg);
  transition: color .34s ease, opacity .25s ease;
}
.brand:hover { opacity: .78; }

.brand__mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .9;
}
.brand__mark svg { width: 19px; height: 19px; }

.brand__logo { max-height: 46px; width: auto; }

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 20px;
  letter-spacing: -.005em;
}
.brand__accent {
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: 3px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0; padding: 0; list-style: none;
}

.nav__link {
  position: relative;
  font-family: var(--font-nav);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--header-fg);
  padding-block: 6px;
  transition: color .3s ease, opacity .3s ease;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
}
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }

.header__actions { display: flex; align-items: center; gap: 14px; }

/* -------------------------------------------------- the language switch */

/* Two letters rather than two flags. The palette is cream, clay and ink, and
   a pair of saturated flag emoji would instantly be the loudest thing on the
   page — the brief asked for subtle. Sized and tracked like the eyebrows and
   the nav so it reads as furniture that was always there, and it inherits
   --header-fg so it stays legible over the hero and over the solid header
   alike. Both options are real links, so it works before any JS has run. */

.langsel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--header-fg);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.langsel__opt {
  color: inherit;
  opacity: .45;
  padding-block: 5px;
  transition: opacity .25s ease;
}
.langsel__opt:hover        { opacity: .8; text-decoration: none; }
.langsel__opt.is-active    { opacity: 1; }
.langsel__opt:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 3px; }
.langsel__sep {
  width: 1px;
  height: 11px;
  background: currentColor;
  opacity: .3;
}

/* In the mobile panel it stands on its own above the button, so it gets room
   and the panel's own ink rather than the header's. */
.langsel--wide {
  margin-top: 30px;
  gap: 14px;
  color: var(--color-heading);
  font-size: 12px;
}
.langsel--wide .langsel__sep { height: 13px; }

/* Over the hero the CTA is an outline in the header's own text colour; on
   hover it fills with the heading colour and takes the page background as its
   label, so the pair always contrasts whichever way the header is themed. */
.site-header.is-over-hero:not(.is-solid) .header__cta {
  --btn-bg: transparent;
  --btn-fg: var(--color-header-top);
  border-color: color-mix(in srgb, var(--color-header-top) 42%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header.is-over-hero:not(.is-solid) .header__cta { border-color: var(--color-border); }
}
.site-header.is-over-hero:not(.is-solid) .header__cta:hover {
  --btn-bg: var(--color-heading);
  --btn-fg: var(--color-bg);
  border-color: var(--color-heading);
}

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--header-fg);
}
.burger span {
  display: block; width: 21px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ----------------------------------------------------------- mobile menu */

.mobile-nav {
  position: fixed; inset: 0; z-index: 55;
  background: var(--color-bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px clamp(24px, 7vw, 56px) 48px;
  opacity: 0;
  transition: opacity .32s ease;
}
.mobile-nav.is-open { opacity: 1; }

.mobile-nav__list { margin: 0; padding: 0; list-style: none; }

.mobile-nav__list li {
  opacity: 0;
  transform: translateY(14px);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav.is-open .mobile-nav__list li {
  opacity: 1; transform: none;
  transition: opacity .4s ease calc(var(--i) * 55ms + 80ms),
              transform .4s ease calc(var(--i) * 55ms + 80ms);
}

.mobile-nav__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 2px;
  font-family: var(--font-heading);
  font-size: 27px;
  color: var(--color-heading);
}
.mobile-nav__arrow { width: 20px; height: 20px; color: var(--color-primary); }

.mobile-nav__cta { margin-top: 34px; }

.mobile-nav__social {
  display: flex; gap: 16px; justify-content: center; margin-top: 36px;
}
.mobile-nav__social a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: 50%;
  color: var(--color-heading);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.mobile-nav__social a:hover {
  background: var(--color-heading); color: var(--color-bg); border-color: var(--color-heading);
}
.mobile-nav__social svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding-top: clamp(112px, 14vh, 156px);
  overflow: hidden;
  background: var(--color-bg);
}

/* The alcohol-ink wash, built from gradients rather than an image so it costs
   nothing to load and re-tints with the palette. */
.hero__wash {
  position: absolute; inset: -25% -12% auto;
  height: 125%;
  pointer-events: none;
  background:
    radial-gradient(56% 46% at 74% 16%, rgba(var(--color-blush-rgb), .74) 0%, transparent 62%),
    radial-gradient(44% 42% at 10% 58%, rgba(var(--color-primary-rgb), .18) 0%, transparent 66%),
    radial-gradient(34% 34% at 94% 74%, rgba(var(--color-accent-rgb), .15) 0%, transparent 68%);
  filter: blur(3px);
}

/* Asymmetric: the type sits in the page gutter, the image runs off the right
   edge of the viewport. */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--container-width);
  margin-inline: auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.hero__eyebrow-rule {
  width: 46px; height: 1px; flex: none;
  background: currentColor;
  opacity: .55;
}

.hero__title {
  font-size: clamp(44px, 7.4vw, var(--h1-size));
  line-height: .98;
  margin-bottom: 26px;
}
.hero__title .accent { display: block; }

.hero__lede {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--color-text);
  max-width: 42ch;
  margin-bottom: 36px;
  text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

.hero__figure {
  position: relative;
  /* Bleeds out to the viewport edge.
     The grid is centred and has no right padding, so the only distance to
     cover is the margin the centring creates — half the difference between the
     viewport and the container. Including the gutter here as well overshot by
     a full 64px once the viewport matched the container width. */
  margin-right: calc((100vw - min(100vw, var(--container-width))) / -2);
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: 78vh;
  object-fit: cover;
  border-radius: var(--radius-base);
}

.hero__badge {
  position: absolute;
  left: -18px; bottom: 30px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  background: var(--color-bg);
  border-radius: var(--radius-button);
  box-shadow: 0 18px 40px -22px rgba(var(--color-secondary-rgb), .55);
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.hero__badge-icon { width: 17px; height: 17px; color: var(--color-accent); }

/* -- the masthead strip along the foot of the hero ---------------------- */

.hero__strip {
  position: relative;
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hero__strip { background: var(--color-bg); }
}

.hero__strip-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.hero__stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px clamp(14px, 2.4vw, 34px) 26px 0;
  border-right: 1px solid var(--color-border);
}
.hero__stat:first-child { padding-left: 0; }

.hero__stat-value {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1;
  color: var(--color-heading);
}
.hero__stat-label {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1.45;
}

/* ----------------------------------------------------------------- about */

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.about__figure { position: sticky; top: 112px; }
.about__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-base);
}

.about__role {
  margin: 18px 0 0;
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1.7;
}

.about__text { max-width: 64ch; font-size: 16.5px; }

.about__foot {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.about__signature {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-style: italic;
  color: var(--color-heading);
}

/* -- the numbered credential register ----------------------------------- */

.register {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0;
  margin: clamp(52px, 6vw, 78px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.register__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px clamp(16px, 2vw, 30px) 26px 0;
  border-right: 1px solid var(--color-border);
}
.register__item:last-child { border-right: 0; }

.register__icon {
  font-size: 18px;
  line-height: 1.45;
  flex: none;
}
.register__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-heading);
}

/* ---------------------------------------------------------------- awards */

/* A dark band between two cream sections: it breaks the page up, and
   competition pieces are shot against dark grounds anyway. */
.awards {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, .72);
  overflow: hidden;
}
.awards::before {
  content: "";
  position: absolute; inset: auto -10% -40% 40%;
  height: 80%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(var(--color-accent-rgb), .16) 0%, transparent 70%);
  pointer-events: none;
}

.awards__eyebrow { color: var(--color-accent); }
.awards__title   { color: #fff; }
.awards__lede    { color: rgba(255, 255, 255, .62); }

.awards__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--grid-gap);
}

.acard {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-base);
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
  transition: border-color .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}
.acard:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-accent-rgb), .45);
}

.acard__media { overflow: hidden; background: rgba(0, 0, 0, .25); }
.acard__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}
.acard:hover .acard__media img { transform: scale(1.05); }

.acard__body { padding: 22px 22px 24px; flex: 1; }

.acard__mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--color-accent-rgb), .45);
  border-radius: 50%;
  color: var(--color-accent);
}
.acard__mark-icon { width: 17px; height: 17px; }

.acard__title {
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.acard__meta {
  margin: 0 0 10px;
  font-family: var(--font-nav);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.acard__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .58);
}

.awards__note {
  margin: 34px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------- gallery */

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: var(--grid-gap);
  /* The selection is random, so which tile spans two columns changes on every
     load. Dense packing backfills the holes that would otherwise leave. */
  grid-auto-flow: row dense;
}

.gallery__tile {
  position: relative;
  margin: 0;
  grid-column: span 1;
  grid-row: span 1;
  overflow: hidden;
  border-radius: var(--radius-base);
  background: var(--color-bg-alt);
}
.gallery__tile--wide  { grid-column: span 2; }
.gallery__tile--tall  { grid-row: span 2; }
.gallery__tile--large { grid-column: span 2; grid-row: span 2; }

.gallery__open {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.gallery__open img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.gallery__open:hover img { transform: scale(1.055); }

.gallery__veil {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(to top,
              rgba(var(--color-overlay-rgb), .55) 0%,
              rgba(var(--color-overlay-rgb), .05) 55%,
              transparent 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.gallery__open:hover .gallery__veil,
.gallery__open:focus-visible .gallery__veil { opacity: 1; }

.gallery__zoom {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: #fff;
  transform: scale(.82);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.gallery__open:hover .gallery__zoom { transform: scale(1); }
.gallery__zoom svg { width: 20px; height: 20px; }

.gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  color: #fff;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.gallery__tile:hover .gallery__caption,
.gallery__tile:focus-within .gallery__caption { opacity: 1; transform: none; }

.gallery__caption strong {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
}
.gallery__caption span { font-size: 13px; opacity: .85; }

/* -------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(var(--color-overlay-rgb), .94);
  opacity: 0;
  transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-base);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  transform: scale(.97);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__caption {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  letter-spacing: .02em;
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); }

.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__close svg, .lightbox__nav svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------- courses */

.cfilter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: -22px 0 clamp(34px, 4vw, 48px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}

.cfilter__row { display: flex; flex-wrap: wrap; gap: 7px; }

.cfilter__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: transparent;
  font-family: var(--font-nav);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cfilter__chip:hover { border-color: var(--color-primary); color: var(--color-heading); }
.cfilter__chip.is-active {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: var(--color-bg);
}
.cfilter__n { font-size: 10.5px; opacity: .6; font-variant-numeric: tabular-nums; }

.cfilter__row--modes { gap: 2px; }
.cfilter__mode {
  padding: 5px 14px;
  border: 0; background: none;
  font-family: var(--font-nav);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.cfilter__mode:hover { color: var(--color-heading); }
.cfilter__mode.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* -- the prospectus row -------------------------------------------------- */

.clist {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.crow {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr) 212px;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-border);
  transition: background-color .35s ease;
}
.crow:hover { background: rgba(var(--color-blush-rgb), .2); }
.crow.is-hidden { display: none; }

/* A featured row is marked with a rule in the accent, not a different card. */
.crow--featured { box-shadow: inset 3px 0 0 var(--color-accent); padding-left: 20px; }

.crow__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-base);
  background: var(--color-bg-alt);
}
.crow__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}
.crow:hover .crow__media img { transform: scale(1.05); }

.crow__placeholder {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg,
              rgba(var(--color-blush-rgb), .6), rgba(var(--color-primary-rgb), .18));
}
.crow__placeholder-icon { width: 32px; height: 32px; color: var(--color-primary); opacity: .55; }

.crow__flag {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-button);
  background: var(--color-bg);
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.crow__flag-icon { width: 13px; height: 13px; color: var(--color-accent); }
.crow__flag--free { background: var(--color-heading); color: var(--color-bg); }
.crow__flag--sale { background: var(--color-primary); color: #fff; }

.crow__main { min-width: 0; }

.crow__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; }
.crow__tag {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.crow__tag--mode {
  color: var(--color-muted);
  padding-left: 9px;
  border-left: 1px solid var(--color-border);
}

.crow__title {
  font-size: clamp(20px, 2.1vw, var(--h3-size));
  line-height: 1.2;
  letter-spacing: -.012em;
  margin-bottom: 9px;
}
.crow__title a { color: inherit; transition: color .25s ease; }
.crow__title a:hover { color: var(--color-primary); }

.crow__text {
  margin: 0 0 14px;
  font-size: 14.8px;
  line-height: 1.62;
  color: var(--color-muted);
  max-width: 62ch;
}

.crow__meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 0; padding: 0; list-style: none;
}
.crow__meta li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  color: var(--color-muted);
}
.crow__icon { width: 15px; height: 15px; color: var(--color-primary); flex: none; }

.crow__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
}

.crow__pricing { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin: 0; }

.crow__price {
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-heading);
}
.crow__was { font-size: 12.5px; color: var(--color-muted); text-decoration: line-through; }

.crow__avail {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.crow__avail::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.crow__avail--ok      { color: #6E8C63; }
.crow__avail--warn    { color: #B4822F; }
.crow__avail--off     { color: #A8837B; }
.crow__avail--neutral { color: var(--color-muted); }

.crow__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.crow__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color .25s ease;
}
.crow__more:hover { color: var(--color-primary); }
.crow__more-icon { width: 14px; height: 14px; transition: transform .28s ease; }
.crow__more:hover .crow__more-icon { transform: translateX(3px); }

.clist__empty { margin: 40px 0 0; text-align: center; color: var(--color-muted); }

/* ------------------------------------------------------- the course grid */

/* Three across on a desktop, two on a tablet, one on a phone. Cards carry the
   same furniture as the rows above - same tags, same availability dot, same
   accent rule on a featured item - arranged for browsing rather than reading.
   Every card is the same height so a row of them does not comb. */

.cgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}

.ccard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .35s ease, transform .35s ease;
}
.ccard:hover {
  border-color: rgba(var(--color-primary-rgb), .4);
  box-shadow: 0 26px 52px -40px rgba(var(--color-secondary-rgb), calc(.9 * var(--shadow-strength)));
  transform: translateY(-2px);
}
.ccard.is-hidden { display: none; }

/* A featured card is marked with a rule in the accent, exactly as a featured
   row is - the same idea turned ninety degrees. */
.ccard--featured { box-shadow: inset 0 3px 0 var(--color-accent); }
.ccard--featured:hover {
  box-shadow: inset 0 3px 0 var(--color-accent),
              0 26px 52px -40px rgba(var(--color-secondary-rgb), calc(.9 * var(--shadow-strength)));
}

/* -- the media box: photograph, teaser, play button ---------------------- */

.ccard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
  flex: none;
  cursor: pointer;
}
.ccard__shot { position: absolute; inset: 0; display: block; z-index: 0; }
.ccard__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
}
.ccard:hover .ccard__shot img { transform: scale(1.04); }

.ccard__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg,
              rgba(var(--color-blush-rgb), .6), rgba(var(--color-primary-rgb), .18));
}
.ccard__placeholder-icon { width: 30px; height: 30px; color: var(--color-primary); opacity: .55; }

/* The teaser lies over the photograph and is only revealed once it is really
   playing, so a clip that autoplay refuses leaves the card exactly as it was. */
.ccard__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.ccard.is-playing .ccard__video { opacity: 1; }
.ccard.is-playing .ccard__shot img { opacity: 0; }

/* Not every clip was filmed the same way up. A portrait one is fitted into the
   frame rather than cropped to fill it — cropping shows about a third of its
   height, which is what makes one card look magnified next to the others.

   Fitting it would normally leave bars down each side, so the card's own
   photograph stays where it is instead, blurred back far enough that the eye
   settles on the clip. Same frame, same size, nothing cut off. */
.ccard__media--tall .ccard__video { object-fit: contain; }

.ccard.is-playing .ccard__media--tall .ccard__shot img {
  opacity: 1;
  transform: scale(1.12);
  filter: blur(16px) brightness(.72) saturate(.9);
  transition: transform .65s cubic-bezier(.22, .61, .36, 1),
              filter .45s ease, opacity .4s ease;
}

.ccard__play-ring {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(var(--color-overlay-rgb), .42);
  color: #fff;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transform: scale(.9);
  opacity: .85;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, background-color .3s ease;
}
.ccard__play-ring svg { width: 22px; height: 22px; margin-left: 2px; }

.ccard__flag {
  position: absolute;
  top: 10px; left: 10px;
  /* Decoration sitting on top of the card's link — it must not eat the click. */
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-button);
  background: var(--color-bg);
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.ccard__flag-icon { width: 13px; height: 13px; color: var(--color-accent); }
.ccard__flag--free { background: var(--color-heading); color: var(--color-bg); }
.ccard__flag--sale { background: var(--color-primary); color: #fff; }

/* -- the card body ------------------------------------------------------- */

.ccard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 20px 4px;
}

.ccard__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 9px; }
.ccard__tag {
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
}
.ccard__tag--mode {
  color: var(--color-muted);
  padding-left: 9px;
  border-left: 1px solid var(--color-border);
}

.ccard__title {
  font-size: 19px;
  line-height: 1.24;
  letter-spacing: -.012em;
  margin-bottom: 8px;
}
.ccard__title a { color: inherit; transition: color .25s ease; }
.ccard__title a:hover { color: var(--color-primary); }

.ccard__text {
  margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.58;
  color: var(--color-muted);
  /* Three lines, so one long summary cannot make its card taller than the
     rest of the row. The whole thing is on the course page. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ccard__meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: auto 0 0; padding: 0 0 14px; list-style: none;
}
.ccard__meta li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.2px;
  color: var(--color-muted);
}
.ccard__icon { width: 14px; height: 14px; color: var(--color-primary); flex: none; }

.ccard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--color-border);
  background: rgba(var(--color-blush-rgb), .14);
}
.ccard__status { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; }

.ccard__price {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-heading);
}
.ccard__was { font-size: 12px; color: var(--color-muted); text-decoration: line-through; }

.ccard__avail {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-nav);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ccard__avail::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.ccard__avail--ok      { color: #6E8C63; }
.ccard__avail--warn    { color: #B4822F; }
.ccard__avail--off     { color: #A8837B; }
.ccard__avail--neutral { color: var(--color-muted); }

.ccard__more {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-heading);
  transition: color .25s ease;
}
.ccard__more:hover { color: var(--color-primary); }
.ccard__more-icon { width: 14px; height: 14px; transition: transform .28s ease; }
.ccard__more:hover .ccard__more-icon { transform: translateX(3px); }

/* -- the same play button, over a course page's own photograph ----------- */

.chero__play {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: transparent;
  cursor: pointer;
}
.chero__play .ccard__play-ring { width: 68px; height: 68px; opacity: .92; transform: none; }
.chero__play:hover .ccard__play-ring { background: var(--color-primary); }
.chero__play .ccard__play-ring svg { width: 27px; height: 27px; }

/* --------------------------------------------------------- the free player */

/* A lesson beside its curriculum. The videos are portrait, so the stage is
   capped by height rather than width — filling the column would put a
   phone-shaped video across two thirds of a desktop screen. */

.watch__section { padding-top: clamp(28px, 4vw, 48px); }

.watch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 3.5vw, 46px);
  align-items: start;
  margin-top: 22px;
}

.player {
  position: relative;
  display: grid;
  place-items: center;
  background: #000;
  border-radius: var(--radius-base);
  overflow: hidden;
}
/* These lessons were filmed on a phone, so they are portrait. Left to fill the
   column the stage would be mostly black bars either side of the picture, so
   it shrinks to whatever the video actually is and centres itself. */
.player--file {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.player__video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 620px);
  background: #000;
}
.player__frame { width: 100%; aspect-ratio: 16 / 9; }
.player__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* No file yet: say so quietly instead of showing a black slab the size of a
   video that is not there. */
.player--empty {
  min-height: 180px;
  padding: 30px;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  color: var(--color-muted);
  font-size: 14px;
  text-align: center;
}

/* The watermark. Not a lock — a signature, so a recording can be traced back.
   pointer-events:none keeps it off the controls; the drift stops it being
   cropped out of a fixed rectangle. */
.player__mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px 16px;
  mix-blend-mode: overlay;
}
.player__mark span {
  font-family: var(--font-nav);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  animation: mark-drift 47s linear infinite alternate;
}
@keyframes mark-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-10vw, 22vh); }
  50%  { transform: translate(-4vw, 48vh); }
  75%  { transform: translate(-14vw, 26vh); }
  100% { transform: translate(0, 4vh); }
}
@media (prefers-reduced-motion: reduce) {
  .player__mark span { animation: none; }
}

.watch__eyebrow {
  margin: 26px 0 6px;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-primary);
}
.watch__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-heading);
  margin-bottom: 14px;
}
.watch__notes { max-width: 62ch; }
.watch__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Said plainly rather than enforced: a browser cannot stop a screen
   recorder, so the honest measures are the watermark and asking. */
.watch__notice {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 26px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: rgba(var(--color-blush-rgb), .2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 62ch;
}
.watch__notice-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--color-primary); }

/* -- the curriculum ------------------------------------------------------ */

.lessonlist {
  position: sticky;
  top: 106px;
  padding: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}
.lessonlist__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lessonlist__head span {
  padding: 3px 9px;
  border-radius: var(--radius-button);
  background: var(--color-heading);
  color: var(--color-bg);
  font-size: 9.5px;
}
.lessonlist__items { margin: 0; padding: 0; list-style: none; counter-reset: none; }

.lessonlist__item {
  display: flex;
  gap: 12px;
  padding: 11px 10px;
  border-radius: var(--radius-base);
  color: var(--color-text);
  transition: background-color .25s ease, color .25s ease;
}
.lessonlist__item:hover { background: rgba(var(--color-blush-rgb), .34); text-decoration: none; }
.lessonlist__item.is-current { background: var(--color-heading); color: var(--color-bg); }
.lessonlist__item.is-current .lessonlist__time { color: rgba(255, 255, 255, .6); }
.lessonlist__item.is-current .lessonlist__n { border-color: rgba(255, 255, 255, .4); color: var(--color-bg); }

.lessonlist__n {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-family: var(--font-nav);
  font-size: 11px;
  color: var(--color-muted);
}
.lessonlist__text { display: grid; gap: 2px; min-width: 0; }
.lessonlist__title { font-size: 14px; line-height: 1.35; }
.lessonlist__time { font-size: 11.5px; color: var(--color-muted); }

.lessonlist__back {
  display: inline-block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  width: 100%;
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lessonlist__back:hover { color: var(--color-primary); }

@media (max-width: 900px) {
  .watch__grid { grid-template-columns: minmax(0, 1fr); }
  .lessonlist { position: static; }
}

/* ---- the player's course panel and lesson ticks

   Additions to the existing .lessonlist, not a replacement for it. */

.watch__course {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.watch__course-shot {
  flex: none;
  width: 72px; height: 54px;
  overflow: hidden;
  border-radius: var(--radius-base);
  background: var(--color-bg-alt);
}
.watch__course-shot img { width: 100%; height: 100%; object-fit: cover; }
.watch__course-body { min-width: 0; }
.watch__course-title { font-size: 15.5px; line-height: 1.3; margin: 0 0 4px; }
.watch__course-text {
  margin: 0 0 6px;
  font-size: 12.8px; line-height: 1.5;
  color: var(--color-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch__course-meta {
  margin: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-muted);
}

.watch__progress { margin: 0 0 18px; padding-top: 0; border-top: 0; }

.watch__done { margin-top: 24px; }

/* A finished lesson keeps its place in the list and gains a tick where its
   number was, so the column does not shift as lessons are completed. */
.lessonlist__item.is-done .lessonlist__n {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.lessonlist__tick { width: 13px; height: 13px; }
.lessonlist__item.is-done .lessonlist__title { color: var(--color-muted); }

/* ------------------------------------------------- first-visit language ask */

/* Rendered by PHP already open, because it is not a reaction to anything the
   visitor did — it is the first thing the site says. No .is-open class to wait
   for and no flash of the page underneath while JavaScript boots. */

.langask {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
}
.langask__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--color-overlay-rgb), .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.langask__panel {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(30px, 4vw, 42px);
  text-align: center;
  background: var(--color-bg);
  border-radius: var(--radius-base);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6);
  animation: langask-in .42s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes langask-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.langask__eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--color-primary);
}
.langask__title {
  margin: 0 0 26px;
  font-family: var(--font-heading);
  font-size: clamp(23px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-heading);
}
/* The second language sits under the first, quieter — it is the same question,
   not a second one. */
.langask__title-alt {
  display: block;
  margin-top: 4px;
  font-size: .72em;
  color: var(--color-muted);
}

.langask__options { display: grid; gap: 10px; }
.langask__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  color: var(--color-heading);
  text-align: left;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.langask__opt:hover,
.langask__opt:focus-visible {
  border-color: var(--color-primary);
  background: rgba(var(--color-blush-rgb), .3);
  text-decoration: none;
  transform: translateY(-1px);
}
.langask__flag { flex: none; width: 30px; height: 20px; display: block; }
.langask__flag svg { width: 100%; height: 100%; display: block;
  box-shadow: 0 0 0 1px rgba(var(--color-secondary-rgb), .16); border-radius: 3px; }
.langask__name {
  flex: 1;
  font-family: var(--font-nav);
  font-size: 15px;
  font-weight: 500;
}
.langask__code {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--color-muted);
}

.langask__skip {
  display: inline-block;
  margin-top: 22px;
  font-size: 13px;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.langask__skip:hover { color: var(--color-heading); }

@media (prefers-reduced-motion: reduce) {
  .langask__panel { animation: none; }
  .langask__opt:hover { transform: none; }
}

/* ----------------------------------------------------------- video popup */

.vmodal {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  transition: opacity .26s ease;
}
.vmodal.is-open { opacity: 1; }

.vmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--color-overlay-rgb), .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vmodal__panel {
  position: relative;
  width: min(980px, 100%);
  transform: translateY(14px) scale(.985);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.vmodal.is-open .vmodal__panel { transform: none; }

.vmodal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}
.vmodal__title {
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  margin: 0;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vmodal__close {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.vmodal__close:hover { background: #fff; color: var(--color-heading); border-color: #fff; }
.vmodal__close svg { width: 18px; height: 18px; }

.vmodal__stage {
  border-radius: var(--radius-base);
  overflow: hidden;
  background: #000;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8);
}
/* Whichever way a clip was shot it fits the space rather than filling it -
   two of the eight are portrait, and cropping those cuts the hand out. */
.vmodal__video {
  display: block;
  width: 100%;
  max-height: min(78vh, 660px);
  background: #000;
  object-fit: contain;
}

/* -- the home-page teaser's "see everything" footer --------------------- */
.courses__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(38px, 4vw, 54px);
  text-align: center;
}
.courses__count {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-muted);
  max-width: 46ch;
}

/* -- the catalogue page -------------------------------------------------- */

.phero {
  position: relative;
  padding-top: clamp(122px, 15vh, 176px);
  padding-bottom: clamp(44px, 6vw, 72px);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.phero__wash {
  position: absolute; inset: -40% -10% auto;
  height: 150%;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 82% 18%, rgba(var(--color-blush-rgb), .62) 0%, transparent 64%),
    radial-gradient(38% 38% at 8% 72%, rgba(var(--color-primary-rgb), .14) 0%, transparent 68%);
}
.phero__inner { position: relative; max-width: 820px; }
.phero__title {
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.02;
  margin-bottom: 18px;
}
.phero__lede {
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  color: var(--color-text);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

.catalogue__body { padding-top: clamp(44px, 5vw, 66px); }

.catalogue__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
.catalogue__cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.eform__success--inline {
  border: 1px solid rgba(var(--color-primary-rgb), .3);
  border-radius: var(--radius-base);
  background: rgba(var(--color-blush-rgb), .22);
  margin-bottom: 34px;
  padding: 30px 24px;
}
.eform__success--inline h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 8px;
}

@media (max-width: 860px) {
  .catalogue__cta-inner { grid-template-columns: minmax(0, 1fr); }
  .catalogue__cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 1080px) {
  .crow { grid-template-columns: 220px minmax(0, 1fr) 180px; }
}

@media (max-width: 860px) {
  .crow {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    padding: 24px 0;
  }
  .crow__side {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    margin-top: 16px;
  }
  .crow__pricing { flex-direction: row; align-items: baseline; gap: 10px; }
  .crow__actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .crow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .crow--featured { padding-left: 14px; }
  .crow__side { grid-column: 1; }
  .crow__media img { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------- contact */

.contact {
  overflow: hidden;
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, .68);
}
.contact .shead { border-bottom-color: rgba(255, 255, 255, .13); }
.contact .shead__title { color: #fff; }
.contact .shead__lede  { color: rgba(255, 255, 255, .58); }
.contact .eyebrow      { color: var(--color-primary); }

.contact__wash {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.contact__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 82px);
  align-items: start;
}

.contact__aside .section__title {
  font-size: clamp(28px, 3.8vw, calc(var(--h2-size) - 2px));
}
.contact__aside .section__lede { margin-inline: 0; }

.contact__details {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}
.contact__details li { display: flex; gap: 15px; align-items: flex-start; }

.contact__ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: var(--color-primary);
}
.contact__ico svg { width: 18px; height: 18px; }

.contact__pair { display: flex; flex-direction: column; gap: 3px; }
.contact__key {
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.contact__val { color: #fff; font-size: 15.5px; }
a.contact__val:hover { color: var(--color-primary); }

.contact__promos { display: grid; gap: 12px; margin-top: 34px; }

.promo {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-base);
  background: rgba(255, 255, 255, .03);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.promo:hover {
  border-color: rgba(var(--color-primary-rgb), .45);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -26px rgba(var(--color-secondary-rgb), .6);
}
.promo__label {
  font-family: var(--font-nav);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.promo__value {
  font-family: var(--font-heading);
  font-size: 19px;
  color: #fff;
}
.promo__code {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-primary-dark);
}
.promo__code strong {
  font-family: var(--font-nav);
  letter-spacing: .1em;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(var(--color-primary-rgb), .28);
  color: #fff;
}
.promo__note { font-size: 12.8px; color: rgba(255, 255, 255, .48); margin-top: 4px; }

/* ------------------------------------------------------------- the forms */

.eform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.field--full { grid-column: 1 / -1; }

.contact__formwrap {
  background: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-base);
  padding: clamp(26px, 3.5vw, 42px);
  box-shadow: 0 34px 70px -50px rgba(var(--color-secondary-rgb), calc(.6 * var(--shadow-strength)));
}

.field { display: flex; flex-direction: column; }

.field__label {
  margin-bottom: 7px;
  font-family: var(--font-nav);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.req { color: var(--color-primary); }
.opt { color: var(--color-muted); font-weight: 400; text-transform: none; letter-spacing: .02em; }

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background: var(--color-bg);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .14);
  background: var(--color-card);
}
.input--area { resize: vertical; min-height: 110px; line-height: 1.6; }

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397887F' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  padding-right: 38px;
}

.has-error .input { border-color: #C0705C; }
.field__error { margin: 6px 0 0; font-size: 13px; color: #A8503A; }

.consent {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; color: var(--color-muted); line-height: 1.55;
  cursor: pointer;
}
.consent input { margin-top: 4px; accent-color: var(--color-primary); flex: none; }

/* The honeypot. Kept out of the layout and out of the tab order, but not
   display:none — some bots skip fields that are explicitly hidden. */
.eform__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.eform button[type="submit"] { margin-top: 24px; }

.eform__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
}

.eform__alert {
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 1px solid rgba(192, 112, 92, .35);
  border-radius: var(--radius-base);
  background: rgba(192, 112, 92, .07);
  color: #A8503A;
  font-size: 14.5px;
}

.eform__success { text-align: center; padding: 22px 0; }
.eform__tick {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), .12);
  color: var(--color-primary);
}
.eform__tick svg { width: 26px; height: 26px; }
.eform__success h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  margin-bottom: 10px;
}
.eform__success p { color: var(--color-muted); max-width: 42ch; margin-inline: auto; }
.eform__success .btn { margin-top: 22px; }

/* ------------------------------------------------------ mailing list form */

/* The signup is the enquiry form's replacement, not a smaller version of it:
   two fields, one promise, one button. It reuses .field/.input so a change to
   the form furniture reaches both. */

.signup__title {
  font-family: var(--font-nav);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: var(--title-spacing);
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: 12px;
  text-wrap: balance;
}
.signup__title .accent {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 1.06em;
}
.signup__text {
  font-size: 15px;
  line-height: 1.62;
  color: var(--color-muted);
  margin-bottom: 26px;
  max-width: 48ch;
}
.signup__fields { display: grid; gap: 16px; }
.signup__consent { margin-top: 18px; }
.signup button[type="submit"] { margin-top: 24px; }

/* On the contact section the card holds nothing else, so it can breathe. */
.contact__formwrap--signup { padding: clamp(28px, 4vw, 48px); }

/* The catalogue's closing block: pitch on the left, form on the right. */
.catalogue__cta-form {
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 30px 62px -48px rgba(var(--color-secondary-rgb), calc(.6 * var(--shadow-strength)));
}
.catalogue__cta-alt { margin-top: 18px; font-size: 14.5px; color: var(--color-muted); }
.catalogue__cta-alt a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* A course page in signup mode: how to reach a person, then the list. */
.cbook__contact { display: grid; gap: 10px; }
.cbook--signup { margin-top: 20px; }
.cbook--signup .signup__title { font-size: 19px; }
.cbook--signup .signup__text { font-size: 14.5px; margin-bottom: 20px; }

/* --------------------------------------------------------- enquiry modal */

.emodal {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity .3s ease;
}
.emodal.is-open { opacity: 1; }

.emodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--color-overlay-rgb), .62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.emodal__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  background: var(--color-bg);
  border-radius: var(--radius-base);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .6);
  transform: translateY(16px) scale(.985);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.emodal.is-open .emodal__panel { transform: none; }

.emodal__close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.emodal__close:hover { background: var(--color-heading); color: var(--color-bg); }
.emodal__close svg { width: 17px; height: 17px; }

.emodal__title { font-size: 28px; margin-bottom: 6px; }
.emodal__sub { color: var(--color-primary); font-size: 15px; margin-bottom: 26px; }
.emodal__sub:empty { display: none; }

/* ----------------------------------------------------------- course page */

.coursepage { padding-top: 0; }

.chero {
  position: relative;
  padding-top: clamp(124px, 15vh, 168px);
  padding-bottom: clamp(56px, 7vw, 86px);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.chero::before {
  content: "";
  position: absolute; inset: -30% -10% auto;
  height: 120%;
  background:
    radial-gradient(50% 44% at 82% 16%, rgba(var(--color-blush-rgb), .6) 0%, transparent 64%),
    radial-gradient(40% 40% at 10% 70%, rgba(var(--color-primary-rgb), .14) 0%, transparent 68%);
  pointer-events: none;
}

.chero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .88fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.crumbs {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: var(--color-muted);
}
.crumbs a { color: var(--color-muted); }
.crumbs a:hover { color: var(--color-primary); }

.chero__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.chero__title { font-size: clamp(33px, 5vw, 52px); margin-bottom: 18px; }
.chero__lede {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--color-text);
  max-width: 52ch;
  margin-bottom: 30px;
}

.chero__facts {
  display: flex; flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 44px);
  margin: 0 0 32px;
  padding: 22px 0;
  border-block: 1px solid var(--color-border);
}
.chero__facts dt {
  font-family: var(--font-nav);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 5px;
}
.chero__facts dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--color-heading);
}

.chero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 13px;
}

.chero__frame {
  position: relative;
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: 0 40px 80px -46px rgba(var(--color-secondary-rgb), calc(.55 * var(--shadow-strength)));
}
.chero__frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.cbody__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.cbody__heading {
  font-size: 25px;
  margin: 0 0 18px;
}
.cbody__main > .prose + .cbody__heading,
.cbody__main > .checklist + .cbody__heading { margin-top: 44px; }

.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.checklist li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15.5px; color: var(--color-heading);
}
.checklist__tick { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--color-primary); }

.cbody__aside { position: sticky; top: 106px; }

.cbook {
  padding: clamp(24px, 3vw, 34px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 30px 62px -48px rgba(var(--color-secondary-rgb), calc(.6 * var(--shadow-strength)));
}
.cbook__title { font-size: 23px; margin-bottom: 8px; }
.cbook__sub { font-size: 14.5px; color: var(--color-muted); margin-bottom: 24px; }
.cbook .field + .field { margin-top: 16px; }

.notfound__inner { text-align: center; max-width: 560px; margin-inline: auto; }
.notfound .section__title { margin-bottom: 16px; }
.notfound .btn { margin-top: 28px; }

/* -------------------------------------------------------- student portal */

/* The light-section twin of .contact__formwrap, which is built for the dark
   contact band and whose white hairline border would be invisible here.
   Same idea, same tokens, same radius and shadow — only the border colour
   and the ground change. Nothing new is introduced. */

.portal__body { padding-top: clamp(44px, 5vw, 66px); }

.pcard {
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(26px, 3.5vw, 42px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: 0 34px 70px -50px rgba(var(--color-secondary-rgb), calc(.6 * var(--shadow-strength)));
}

.pcard .eform button[type="submit"] { margin-top: 24px; }
.pcard .field + .field { margin-top: 18px; }

.pcard__note {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

.pcard__back {
  margin: 26px 0 0;
  text-align: center;
  font-size: 13.5px;
}
.pcard__back a { color: var(--color-muted); }
.pcard__back a:hover { color: var(--color-primary); }

/* A wider card for the dashboard, which holds course grids rather than a
   form. Phase 4 fills it. */
.pcard--wide { max-width: none; }

/* The portal's own pieces. Everything else it uses - .phero, .cgrid, .ccard,
   .shead, .btn, .field, .input - is the public site's, unchanged. */

.pcard--flash {
  max-width: none;
  margin-bottom: 22px;
  padding: 15px 20px;
  border-left: 3px solid var(--color-primary);
  font-size: 14.5px;
  color: var(--color-heading);
}
.pcard--bad { border-left-color: #C0705C; color: #A8503A; }

/* Two stacked cards on the profile page. */
.portal .pcard + .pcard { margin-top: 26px; }
.pcard .blocktitle { margin-bottom: 22px; }

/* Label/value pairs under the profile form. */
.pmeta {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 22px;
  font-size: 14px;
}
.pmeta dt { color: var(--color-muted); }
.pmeta dd { margin: 0; color: var(--color-heading); }
.pmeta__note { display: block; font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }

/* The empty state, in the same voice as .clist__empty. */
.pempty {
  max-width: 520px;
  margin: 8px auto;
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
}
.pempty__title { font-size: clamp(20px, 2.4vw, 25px); margin-bottom: 10px; }
.pempty__text  { color: var(--color-muted); margin-bottom: 24px; }

/* A second section heading on the dashboard needs air above it; the first
   one is already spaced by the section's own padding. */
.portal__second { margin-top: clamp(56px, 7vw, 84px); }

/* Progress, inside the card the catalogue already draws. Reuses the card's
   own rhythm and colours rather than introducing a widget. */
.ccard__progress {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
}
.ccard__progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ccard__progress-n { color: var(--color-primary); font-variant-numeric: tabular-nums; }

.ccard__bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--color-bg-alt);
  overflow: hidden;
}
.ccard__bar > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}

/* The sign-out control sits where the header CTA does, so the header keeps
   its shape whether a student is signed in or not. */
.header__signout { margin: 0; display: inline-flex; }


/* The bar that says "nobody else can see this page".

   Deliberately loud: it exists so an unpublished course is never mistaken for
   a live one, by the owner previewing it or by anyone she sends the link to. */
.previewbar {
  margin: 0 0 20px;
  padding: 11px 16px;
  background: var(--color-secondary);
  color: var(--color-bg);
  border-radius: var(--radius-base);
  font-family: var(--font-nav);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.previewbar strong { color: var(--color-accent); }
.previewbar a { color: var(--color-bg); text-decoration: underline; margin-left: 8px; }
.previewbar a:hover { color: var(--color-blush); }

.pcard__forgot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13.5px;
}
.pcard__lede {
  margin: 0 0 22px;
  color: var(--color-muted);
  font-size: 14.5px;
}

/* "Already bought this course?" under the booking buttons. */
.chero__signin {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--color-muted);
}
.chero__signin a { font-weight: 600; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-text);
  padding-block: clamp(56px, 7vw, 86px) 34px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(36px, 5vw, 54px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer__logo {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 25px;
  color: #fff;
  margin-bottom: 16px;
}
.footer__logoimg {
  max-height: 52px;
  width: auto;
  /* The logo is dark ink on transparency — knock it out to light for the
     dark footer rather than shipping a second file. */
  filter: brightness(0) invert(1);
  opacity: .92;
}

.footer__text {
  font-size: 14.5px;
  max-width: 34ch;
  line-height: 1.7;
  margin-bottom: 22px;
}

.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.footer__social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.footer__social svg { width: 17px; height: 17px; }

.footer__heading {
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}

.footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.footer__col a { color: var(--color-footer-text); font-size: 14.5px; transition: color .25s ease; }
.footer__col a:hover { color: #fff; }

.footer__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.footer__icon { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--color-primary); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  font-size: 13px;
}
.footer__bottom p { margin: 0; }
.footer__note a { color: var(--color-footer-text); }
.footer__note a:hover { color: #fff; }

/* --------------------------------------------------------------- to top */

.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 50;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-heading);
  color: var(--color-bg);
  box-shadow: 0 14px 30px -14px rgba(var(--color-secondary-rgb), .7);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, background-color .25s ease;
}
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--color-primary); }
.to-top svg { width: 19px; height: 19px; }

/* ---------------------------------------------------------------- motion */

/* Hidden only when .anim-ready is present — the inline script in head.php
   adds it before first paint, and only when motion is allowed. With JS off or
   reduced motion requested, nothing here applies and content is simply there. */
.anim-ready [data-anim] {
  opacity: 0;
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1) var(--anim-delay, 0ms),
              transform .72s cubic-bezier(.22, .61, .36, 1) var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.anim-ready [data-anim="fade-up"]    { transform: translateY(26px); }
.anim-ready [data-anim="fade-down"]  { transform: translateY(-26px); }
.anim-ready [data-anim="fade-left"]  { transform: translateX(26px); }
.anim-ready [data-anim="fade-right"] { transform: translateX(-26px); }
.anim-ready [data-anim="zoom"]       { transform: scale(.965); }
.anim-ready [data-anim="reveal"]     { transform: translateY(22px) scale(.985); }

.anim-ready [data-anim].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ccard__video { display: none; }
  .ccard, .ccard:hover { transition: none; transform: none; }

  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .cgrid { grid-template-columns: minmax(0, 1fr); }
  .ccard__media { aspect-ratio: 3 / 2; }
}

@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__cta { display: none; }
  .header__actions > .langsel { display: none; }

  .hero__grid,
  .about__inner,
  .contact__inner,
  .chero__inner,
  .cbody__inner { grid-template-columns: minmax(0, 1fr); }

  .hero { padding-top: clamp(104px, 13vh, 140px); }
  .hero__grid { gap: 40px; padding-right: clamp(20px, 5vw, 64px); }
  .hero__figure { order: -1; margin-right: 0; }
  .hero__figure img { aspect-ratio: 4 / 3; max-height: 52vh; }
  .hero__badge { left: auto; right: 12px; bottom: 14px; }

  .about__figure { position: static; max-width: 400px; }
  .cbody__aside { position: static; }
}

@media (max-width: 760px) {
  .section { padding-block: var(--section-padding-mobile); }

  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 168px;
  }
  /* A 2×2 tile on a phone would fill the viewport on its own. */
  .gallery__tile--large { grid-column: span 2; grid-row: span 1; }

  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .about__foot { flex-direction: column; align-items: flex-start; }
  .hero__strip-inner { flex-wrap: wrap; }
  .hero__stat { flex: 1 1 40%; padding-block: 18px; }
  .hero__stat:nth-child(2n) { border-right: 0; }
  .register__item { border-right: 0; border-bottom: 1px solid var(--color-border); }
}

@media (max-width: 560px) {
  .eform__grid { grid-template-columns: minmax(0, 1fr); }
  .gallery__grid { grid-auto-rows: 150px; }
  .gallery__tile--wide,
  .gallery__tile--large { grid-column: span 2; }
  .hero__actions .btn { flex: 1 1 auto; }
  .lightbox__nav { display: none; }
  .to-top { right: 14px; bottom: 14px; }
}

/* -------------------------------------------------------------- printing */

@media print {
  .site-header, .mobile-nav, .to-top, .hero__strip, .langsel,
  .cfilter, .emodal, .lightbox, .contact__formwrap, .cbook,
  .catalogue__cta-form, .vmodal, .ccard__video,
  .langask, .player { display: none !important; }
  body { background: #fff; color: #000; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}