/* ==========================================================================
   Swiss NewEra — homepage stylesheet
   Ported from the Claude Design canvas "Home EN.dc.html".
   Single source of truth for the palette is the :root token block below.
   ========================================================================== */

:root {
  /* Brand palette */
  --ink:        #1F2430;
  --ink-soft:   #4A463E;
  --muted:      #5F5A50;
  --muted-2:    #6B6558;
  --muted-3:    #9A958A;   /* de-emphasised labels, e.g. a step not reached yet */
  --blue:       #3F6FD8;
  --yellow:     #FFC81F;
  --coral:      #FF7A63;
  --red:        #E4342B;
  --red-dark:   #B21C16;
  --amber:      #A85A0B;
  --gold:       #8A6A16;
  --error:      #C0392B;

  /* Surfaces */
  --white:      #FFFFFF;
  --cream:      #FFF8E7;
  --cream-2:    #FFEFC6;
  --cream-3:    #FFF4D0;
  --line:       #EFE0BE;
  --line-2:     #E3D3AE;
  --hairline:   rgba(31, 36, 48, .07);
  --rule:       rgba(0, 0, 0, .10);

  /* Header chrome — flip these to restyle the site header on its own */
  --chrome-bg:      var(--cream);
  --chrome-fg:      var(--ink);
  --chrome-muted:   #3A4761;
  --chrome-border:  #D5DEF5;
  --chrome-accent:  var(--blue);
  --chrome-cta-bg:  var(--blue);
  --chrome-cta-fg:  #FFFFFF;

  /* Shape and rhythm */
  --r:      16px;
  --pad-y:  120px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(31, 36, 48, .04), 0 10px 28px rgba(31, 36, 48, .05);
  --shadow-md: 0 2px 4px rgba(31, 36, 48, .04), 0 20px 44px rgba(31, 36, 48, .09);
  --shadow-lg: 0 4px 8px rgba(31, 36, 48, .05), 0 26px 54px rgba(31, 36, 48, .13);

  /* Type */
  --display: "Cabin", system-ui, sans-serif;
  --body:    "Nunito Sans", system-ui, sans-serif;

  /* Warm tints that earn their own name — each is a specific UI job. */
  --disabled-bg:  #F6EAD2;   /* a button that cannot be pressed */
  --hatch:        #FBF3E2;   /* the stripe on a photo slot that is still empty */
  --rule-warm:    #F3EBDA;   /* hairline inside the brochure mock-up */
  --bar-warm:     #E8DCC2;   /* placeholder bars inside the brochure mock-up */
  --yellow-hover: #FFD866;   /* yellow button, hover */
  --chip-warm:    #FFEDE9;   /* chip background on the red pathway */

  /* Motion. Every transition and animation on the site pulls from these, so
     timing stays consistent the way colour now does. */
  --ease:      cubic-bezier(.2, .8, .25, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .18s;
  --dur-base:  .32s;
  --dur-slow:  .6s;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

/* `hidden` must win over the display values set below. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Nothing on this site is meant to scroll sideways. This must be `clip` and
     not `hidden`: `hidden` makes body a scroll container, which silently kills
     `position: sticky` on the masthead inside it. */
  overflow-x: clip;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  /* the space the fixed conversion bar needs is reserved on the footer,
     so it carries the footer's colour rather than showing as a white strip */
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--yellow); }

img { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -.012em;
  font-weight: 600;
  margin: 0;
}

button { font: inherit; color: inherit; }

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

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

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.section { padding: var(--pad-y) 0; }
.section--cream   { background: var(--cream); }
.section--cream-2 { background: var(--cream-2); }
.section--cream-3 { background: var(--cream-3); }

.wrap       { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.wrap--wide { max-width: 1240px; }
.wrap--tight{ max-width: 1080px; }

.centred { text-align: center; }

.grid { display: grid; gap: 24px; }
/* Like .grid--3, but an incomplete last row centres instead of leaving a hole,
   which matters for the seven-theme rows on the academy page. */
.cardflow { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.cardflow > * { flex: 1 1 248px; max-width: 344px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1.1fr 1fr; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
}

.lede {
  font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0;
}

.section-title { font-size: 50px; line-height: 1.1; }
.section-intro { max-width: 58ch; margin: 0 auto 40px; }

.rule-thick { height: 6px; background: var(--blue); }

/* Hand-drawn eyebrow bubble (ported from EyebrowBubble.dc.html) */
/* The label sizes the bubble; the drawn ring stretches to fit it. */
.bubble { position: relative; display: inline-block; min-width: 200px; flex: none; }
.bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bubble span {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 72px; padding: 0 30px 6px; text-align: center;
  color: var(--ink); font-size: 13px; letter-spacing: .08em;
  font-weight: 700; text-transform: uppercase; line-height: 1.1;
}
.bubble-row { display: flex; justify-content: center; }

.squiggle { display: flex; justify-content: center; margin: 0 0 18px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.2;
  padding: 16px 30px; text-align: center; flex: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--amber); color: var(--white); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink); padding: 14px 28px;
}
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--ghost-blue {
  background: transparent; color: var(--blue);
  border: 2px solid var(--blue); padding: 12px 24px; font-size: 15px;
}
.btn--ghost-blue:hover { background: var(--cream); color: var(--blue); }
.btn--sm { font-size: 15px; padding: 14px 26px; }
.btn--block { display: block; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--disabled-bg); color: var(--muted-2); cursor: not-allowed;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--disabled-bg); color: var(--muted-2); }

.link-quiet { font-size: 15px; font-weight: 700; color: var(--ink); }
.link-quiet:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   Image slots — a real <img> where a photograph exists, a labelled
   placeholder tile where one is still missing.
   -------------------------------------------------------------------------- */

.slot { position: absolute; inset: 0; overflow: hidden; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot--empty {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
  background: repeating-linear-gradient(45deg, var(--hatch) 0 12px, var(--disabled-bg) 12px 24px);
  color: var(--muted-2); font-size: 13px; line-height: 1.45;
  border: 1px dashed var(--line-2);
}
.slot--circle {
  position: relative; width: 150px; height: 150px;
  border-radius: 50%; flex: none;
}
.slot--circle.slot--empty { border-radius: 50%; }

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

.topbar {
  background: var(--chrome-bg); color: var(--chrome-fg);
  font-size: 13px; padding: 11px 0;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
}
.topbar__facts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar__facts a { color: inherit; }
.topbar__facts a:hover { color: var(--blue); }
.topbar__announce {
  display: flex; align-items: center; gap: 10px;
  color: var(--chrome-muted); font-weight: 700;
}
.topbar__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--blue); flex: none; }

/* The masthead sticks. It sits inside an unstyled <header> wrapper, and a
   sticky element can only travel inside its parent's box — so with the wrapper
   only as tall as its two children, the masthead scrolled away after ~146px.
   `display: contents` removes the wrapper's box so the masthead's containing
   block becomes the page, without changing the markup or the landmark. */
header:has(.masthead) { display: contents; }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--chrome-bg); color: var(--chrome-fg);
  border-bottom: 1px solid var(--chrome-border);
  box-shadow: 0 2px 14px rgba(31, 36, 48, .07);
}
.masthead__inner { display: flex; align-items: center; gap: 28px; padding: 16px 40px; }

.brand { display: flex; align-items: center; gap: 14px; flex: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img {
  width: 44px; height: 44px; border-radius: 999px;
  object-fit: cover; flex: none; display: block;
}
.brand__word { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; }
.brand__word span { color: var(--blue); }

.nav { display: flex; align-items: center; gap: 8px 22px; flex: 1 1 auto; min-width: 0; margin-left: 8px; }
.nav__item { position: relative; padding: 14px 0; margin: -14px 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); font-size: 15px; font-weight: 400;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
}
.nav__link:hover { color: var(--blue); }
.nav__item--active > .nav__link { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); }
.nav__caret { font-size: 10px; }

.menu {
  position: absolute; left: -14px; top: 100%; padding-top: 12px;
  min-width: 320px; z-index: 50; display: none;
}
.nav__item[data-open="true"] .menu,
.lang[data-open="true"] .menu { display: block; }
.menu__panel {
  background: var(--white); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(31, 36, 48, .18); padding: 10px;
}
.menu__link { display: block; padding: 12px 14px; border-radius: 9px; color: var(--ink); }
.menu__link:hover { background: var(--cream); color: var(--ink); }
.menu__tag {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 3px;
}
.menu__title { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.15; }
.menu__all {
  display: block; margin-top: 6px; padding: 12px 14px;
  border-top: 1px solid var(--chrome-border);
  font-size: 14px; font-weight: 700; color: var(--blue);
}

.lang { position: relative; margin-left: auto; flex: none; padding: 14px 0; }
.lang__toggle {
  display: flex; align-items: center; gap: 5px; background: none; border: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--chrome-muted); cursor: pointer; padding: 4px 2px;
}
.lang__toggle:hover { color: var(--ink); }
.lang__caret { font-size: 8px; line-height: 1; opacity: .5; transition: transform .2s ease; }
.lang[data-open="true"] .lang__caret { transform: rotate(180deg); }
.lang .menu { left: auto; right: 0; min-width: 190px; padding-top: 8px; }
.lang__option {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 12px;
  border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 500;
}
.lang__option:hover { background: var(--cream); color: var(--ink); }
.lang__option[aria-current="true"] { background: var(--cream); font-weight: 700; }
.lang__option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lang__code { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--blue); width: 22px; flex: none; }

.masthead__cta { margin-left: 16px; flex: none; font-size: 15px; padding: 14px 26px; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--white); color: var(--ink); overflow: hidden; }

.hero__media { position: absolute; inset: 0; display: flex; justify-content: flex-end; }
.hero__stage { width: 74%; height: 100%; position: relative; }

.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s ease;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 24%, rgba(0,0,0,.6) 52%, rgba(0,0,0,1) 84%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 24%, rgba(0,0,0,.6) 52%, rgba(0,0,0,1) 84%);
}
.hero__slide[aria-hidden="false"] { opacity: 1; }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }

.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 34%, rgba(255,255,255,.3) 56%, rgba(255,255,255,0) 74%);
}

.hero__body { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; padding: 84px 40px 72px; }

.hero__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 26px; }
.hero__pips { display: flex; gap: 4px; flex: none; }
.hero__pips i { width: 9px; height: 9px; border-radius: 999px; display: block; }
.hero__kicker span {
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue);
}

.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(47px, 6.66vw, 97px); line-height: .9; letter-spacing: -.01em;
  margin: 0 0 14px; max-width: 16ch; color: var(--blue);
}
.hero h1 span { color: var(--ink); white-space: nowrap; }

.hero__tagline {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.16vw, 31px); line-height: 1.1;
  color: var(--ink); margin: 0 0 20px;
}
.hero__sub { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0 0 32px; max-width: 50ch; }

.hero__compare {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 24px;
  max-width: 660px; padding-bottom: 12px; margin: 0 0 18px;
}
.hero__compare a {
  font-size: 14px; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--blue); padding-bottom: 2px;
}
.hero__compare a:hover { color: var(--blue); }

.triad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 820px; margin: 0 0 32px; }
.triad__item { position: relative; }
.triad__link { display: flex; gap: 10px; align-items: baseline; color: var(--ink); }
.triad__link:hover { opacity: .7; color: var(--ink); }
.triad__num, .triad__title { font-family: var(--display); line-height: 1.15; font-size: 22px; }
.triad__num { font-weight: 700; flex: none; }
.triad__title { font-weight: 600; }

.triad__pop {
  position: absolute; z-index: 20; bottom: calc(100% + 12px);
  width: 280px; max-width: 660px; background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline); border-top: 4px solid var(--blue);
  border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.triad__item:hover .triad__pop,
.triad__item:focus-within .triad__pop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.triad__pop strong { display: block; font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.15; margin-bottom: 6px; }
.triad__pop p { display: block; font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 10px; }
.triad__pop .triad__short { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.triad__pop .triad__go { display: block; font-size: 13px; font-weight: 700; color: var(--amber); }

/* The dot is 9px because that is what the design wants; the button around it
   is 24px because that is what a thumb needs. Hit area, not appearance. */
.dots { display: flex; gap: 2px; margin: 0 0 16px; }
.dot {
  width: 24px; height: 24px; border-radius: 999px; background: none;
  border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: var(--line-2); transition: all .3s;
}
.dot[aria-current="true"]::after { width: 12px; height: 12px; background: var(--blue); }

.hero__actions {
  display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap;
  max-width: 660px; padding-top: 24px;
}
.badge-eight {
  flex: none; display: flex; align-items: center; gap: 10px;
  background: var(--yellow); color: var(--ink); border-radius: 16px;
  padding: 10px 16px; transform: rotate(-2.5deg);
}
.badge-eight b { font-family: var(--display); font-weight: 700; font-size: 31px; line-height: .85; }
.badge-eight span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }

.flash {
  position: absolute; z-index: 5; top: 0; right: 48px; margin: 0;
  background: var(--red); color: var(--white); text-align: center;
  padding: 16px 22px 22px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  box-shadow: 0 4px 8px rgba(31,36,48,.05), 0 26px 54px rgba(31,36,48,.13);
}
.flash b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .1em; line-height: 1.15; }
.flash i { display: block; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 27px; line-height: 1.1; }

/* Decorative hero shapes — only on wide viewports, matching the design's
   `shapes: showShapes && wide` rule. */
.hero__shapes { display: none; }
.hero__shapes > * { position: absolute; pointer-events: none; }

@keyframes snw-float { 0%,100% { transform: translateY(0) rotate(var(--r-deg, 0deg)); } 50% { transform: translateY(-16px) rotate(var(--r-deg, 0deg)); } }
@keyframes snw-drift { 0%,100% { transform: translate(0,0) rotate(var(--r-deg, 0deg)); } 50% { transform: translate(10px,12px) rotate(var(--r-deg, 0deg)); } }
@keyframes snw-spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (min-width: 1200px) {
  .hero__shapes { display: block; }
}

.shape-sun    { right: 5%;  top: 10%;    width: 180px; height: 180px; border-radius: 999px; background: var(--yellow); opacity: .92; animation: snw-float 7s ease-in-out infinite; }
.shape-square { right: 26%; bottom: 16%; width: 112px; height: 112px; border-radius: 16px; background: var(--coral); --r-deg: -12deg; animation: snw-float 9s ease-in-out infinite .8s; }
.shape-pill   { right: 9%;  bottom: 26%; width: 132px; height: 46px;  border-radius: 999px; background: var(--blue); --r-deg: 8deg; animation: snw-drift 11s ease-in-out infinite; }
.shape-ring   { right: 32%; top: 16%;    width: 86px;  height: 86px;  border-radius: 999px; border: 9px solid var(--white); animation: snw-float 8s ease-in-out infinite 1.4s; }
.shape-dots   { right: 20%; top: 40%;    width: 120px; height: 96px; opacity: .5;
                background-image: radial-gradient(var(--ink) 2.2px, transparent 2.2px); background-size: 18px 18px; }
.shape-orbit  { right: 3%;  bottom: 8%;  width: 64px;  height: 64px; animation: snw-spin 26s linear infinite; }
.shape-orbit i { position: absolute; inset: 0; border-radius: 999px; border: 3px dashed var(--blue); opacity: .65; }

/* --------------------------------------------------------------------------
   Why us
   -------------------------------------------------------------------------- */

.why__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px 48px; flex-wrap: wrap; margin-bottom: 34px;
}
.why__head > div:first-child { flex: 1 1 380px; min-width: 0; }
.why__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.why__aside p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 44ch; }
.why h2 { font-size: clamp(31px, 3.06vw, 43px); line-height: 1.1; }

.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 18px; }
.promise {
  background: var(--white); border-radius: var(--r); padding: 26px 24px 28px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px;
}
.promise__mark {
  position: relative; width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.promise__mark svg { position: absolute; inset: 0; width: 40px; height: 40px; }
.promise__mark span {
  position: relative; font-family: var(--display); font-weight: 700;
  font-size: 15px; line-height: 1;
}
.promise h3 { font-size: 21px; line-height: 1.15; margin-bottom: 6px; }
.promise p:not([class]) { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Pathway cards
   -------------------------------------------------------------------------- */

.rail-clip { overflow: hidden; }
.rail {
  /* Four pathways in a 2x2. Three across left the fourth alone on its own
     row, which read as a mistake rather than a fourth choice. */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin-inline: auto;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}

.card-path {
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--white);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-path:hover { transform: rotate(0deg) translateY(-6px) !important; box-shadow: var(--shadow-lg); }
.card-path__media { height: 190px; position: relative; overflow: hidden; border-bottom: 5px solid var(--accent, var(--blue)); }
.card-path__body { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 20px; flex: 1; position: relative; }
.card-path__num {
  position: absolute; right: 20px; top: -34px; width: 58px; height: 58px;
  border-radius: 999px; background: var(--accent, var(--blue)); border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(31,36,48,.10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1;
  color: var(--accent-fg, var(--white));
}
.card-path__tag { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.card-path__tag i { width: 9px; height: 9px; border-radius: 999px; background: var(--accent, var(--blue)); flex: none; }
.card-path__tag span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card-path h3 { font-size: 28px; line-height: 1.1; margin: 0 0 12px; max-width: 22ch; }
.card-path__body > div > p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 44ch; text-wrap: pretty; }

.label-mini {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.card-path__inside { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.card-path__details { display: grid; gap: 20px; }
.card-path__details[hidden] { display: none; }
.card-path__outcomes { background: var(--cream); border-radius: 12px; padding: 16px 18px; }
.card-path__outcomes div:last-child { font-size: 15px; line-height: 1.6; color: var(--ink); }
.card-path__facts { display: grid; gap: 12px; font-size: 15px; border-top: 1px solid rgba(0,0,0,.12); padding-top: 18px; }
.card-path__facts div { display: flex; justify-content: space-between; gap: 12px; }
.card-path__facts span { color: var(--muted); }

.card-path__toggle {
  margin-top: auto;
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; cursor: pointer; background: none; border: 0;
  border-top: 1px solid rgba(0,0,0,.12); padding: 16px 0 0;
  font-size: 14px; font-weight: 700; color: var(--blue); text-align: left;
}
.card-path__toggle:hover { color: var(--ink); }
/* inline-block, because a transform does nothing to an inline element and
   the caret had never actually turned over on any card. */
.card-path__caret { display: inline-block; font-size: 11px; line-height: 1; transition: transform .2s ease; }
.card-path__toggle[aria-expanded="true"] .card-path__caret { transform: rotate(180deg); }

.rail-nav { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.rail-arrow {
  width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; background: none;
}
.rail-arrow:hover { border-color: var(--blue); color: var(--blue); }

/* Bundles */
.bundle { border-radius: var(--r); padding: 28px 24px; text-align: center; }
.bundle__label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.bundle__price { font-family: var(--display); font-weight: 700; font-size: 50px; line-height: 1; }
.bundle__sub { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 6px 0 14px; }
.bundle__save { display: inline-block; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Focus builder (#register)
   -------------------------------------------------------------------------- */

.builder {
  margin-top: 56px; border: 1px solid var(--hairline); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.builder__head { padding: 28px 28px 0; }
.builder__head h3 { font-family: var(--display); font-weight: 600; font-size: 29px; margin-bottom: 6px; }
.builder__head p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 0; }

.tabs { display: flex; gap: 0 6px; flex-wrap: wrap; margin-top: 24px; border-bottom: 1px solid rgba(31,36,48,.14); }
.tab {
  font-size: 15px; font-weight: 700; padding: 12px 18px 13px; margin-bottom: -1px;
  border-radius: 12px 12px 0 0; cursor: pointer; background: transparent;
  color: var(--muted); border: 0; border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab:hover { background: var(--cream); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--cream); color: var(--ink); border-bottom-color: var(--accent, var(--blue)); }

.builder__table { margin-top: 24px; }
.builder__row { display: grid; grid-template-columns: 1fr 160px 200px; align-items: center; }
.builder__thead {
  background: var(--cream-2); color: var(--ink); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.builder__thead > div:nth-child(1) { padding: 16px 24px; }
.builder__thead > div:nth-child(2) { padding: 16px 12px; }
.builder__thead > div:nth-child(3) { padding: 16px 24px; }

.builder__group {
  border-top: 1px solid var(--rule); background: var(--cream); padding: 14px 24px;
  display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap;
}
.builder__group b { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.builder__group span { font-size: 14px; color: var(--muted); }

.builder__item { border-top: 1px solid var(--rule); background: var(--white); }
.builder__item > div > *:nth-child(1) { padding: 16px 24px 16px 40px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.builder__item > div > *:nth-child(2) { padding: 16px 12px; color: var(--muted); font-size: 15px; }
.builder__item > div > *:nth-child(3) { padding: 16px 24px; color: var(--muted); font-size: 15px; }
.builder__bullet { width: 7px; height: 7px; border-radius: 999px; flex: none; }

.builder__foot {
  border-top: 4px solid var(--accent, var(--blue)); background: var(--white); padding: 28px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px 40px; flex-wrap: wrap;
}
.builder__foot > div:first-child { flex: 1 1 400px; min-width: 0; }
.builder__summary { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 52ch; }
.builder__meta { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-top: 12px; }
.builder__actions { flex: none; display: flex; gap: 10px; flex-wrap: wrap; }

.stress { color: var(--amber); font-weight: 700; }

/* Also available */
.support {
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--cream);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.support h4 { font-family: var(--display); font-weight: 600; font-size: 24px; }
.support__meta { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.support p:not([class]) { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.support__cta {
  margin-top: auto; font-size: 15px; font-weight: 700; color: var(--ink);
  cursor: pointer; border: 0; background: none; padding: 0 0 2px;
  border-bottom: 2px solid var(--yellow); align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 24px; }
.teacher {
  border-radius: var(--r); overflow: hidden; background: var(--white);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.teacher__photo { padding: 26px 20px 0; display: flex; justify-content: center; }
.teacher__photo img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block; }
.teacher__body { padding: 22px 26px 28px; }
.teacher h3 { font-size: 22px; margin-bottom: 4px; }
.teacher__role { font-size: 14px; color: var(--blue); font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.teacher-card__qual, .teacher__qual, .bio__qual {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--amber); margin: 2px 0 0;
}
.bio__qual { font-size: 14px; margin: 4px 0 0; }
.teacher p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; border-top: 1px solid var(--rule); padding-top: 24px; }
.stat dt { font-family: var(--display); font-weight: 700; font-size: 29px; color: var(--blue); display: block; }
.stat dd { margin: 0; font-size: 15px; color: var(--muted); margin-top: 4px; display: block; }

/* --------------------------------------------------------------------------
   Well-being / academy
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  background: var(--white); border: 1px solid rgba(0,0,0,.12); border-radius: 999px;
  padding: 10px 18px; font-size: 15px; font-weight: 700; color: var(--ink);
}

.academy-card { border: 1px solid var(--hairline); border-radius: var(--r); padding: 24px; background: var(--cream); }
.academy-card h3 { font-size: 22px; margin-bottom: 8px; }
.academy-card p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   Prices and the brochure gate
   -------------------------------------------------------------------------- */

.refund-rule {
  max-width: 52ch; margin: 0 auto 36px; text-align: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0;
}
.refund-rule div { font-size: 18px; font-weight: 700; color: var(--amber); }

.gate { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; }

.trial-card { border: 2px solid var(--blue); border-radius: var(--r); padding: 28px; background: var(--cream); }
.trial-card__kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.trial-card__price { font-family: var(--display); font-weight: 700; font-size: 47px; line-height: 1; }
.trial-card p:not([class]) { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 8px 0 16px; }
.trial-card__actions { display: grid; gap: 10px; }

.brochure {
  border: 1px solid var(--hairline); border-radius: var(--r); padding: 28px;
  background: var(--white); box-shadow: var(--shadow-sm);
}
.brochure h3 { font-family: var(--display); font-weight: 600; font-size: 27px; line-height: 1.1; margin-bottom: 8px; }
.brochure > p:not([class]) { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
.brochure__form { display: grid; gap: 12px; max-width: 34ch; }
.brochure__hint { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 12px; max-width: 44ch; }
.brochure__hint[data-error="true"] { color: var(--error); }

.field {
  font-family: inherit; font-size: 16px; padding: 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  color: var(--ink); background: var(--white); outline: none; width: 100%;
}
.field:focus { border-color: var(--blue); }
.field[data-error="true"] { border-color: var(--error); }

.rates { border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 24px; }
.rates__row { display: grid; grid-template-columns: 2fr 1.2fr .9fr .9fr; }
.rates__head { background: var(--cream-2); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rates__row > div { padding: 16px 24px; }
.rates__body { border-top: 1px solid var(--rule); }
.rates__body > div:first-child { font-weight: 700; }
.rates__body > div:nth-child(2) { color: var(--muted); font-size: 15px; }
.rates__body > div:nth-child(3) { font-weight: 700; }
.rates__body > div:nth-child(4) { color: var(--blue); font-weight: 700; }

.info-card { border: 1px solid var(--hairline); border-radius: var(--r); padding: 24px; background: var(--white); }
.info-card--cream { background: var(--cream-2); border-color: transparent; }
.info-card h4 { font-family: var(--display); font-weight: 600; font-size: 22px; margin-bottom: 12px; }
.info-card ul { display: grid; gap: 10px; font-size: 15px; color: var(--muted); margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Bootcamps
   -------------------------------------------------------------------------- */

.bootcamp {
  background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; color: var(--ink);
}
.bootcamp:hover { box-shadow: var(--shadow-lg); color: var(--ink); }
.bootcamp--planned { opacity: .82; }
.bootcamp__media { height: 180px; position: relative; border-bottom: 5px solid var(--accent, var(--blue)); }
.bootcamp__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bootcamp__dates { font-family: var(--display); font-weight: 700; font-size: 31px; line-height: 1.1; margin-bottom: 4px; }
.bootcamp__name { font-size: 15px; font-weight: 700; }
.bootcamp__body > div:nth-child(2) { font-size: 15px; line-height: 1.6; color: var(--muted); }
.bootcamp__facts { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 15px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; }
.bootcamp__fee { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.bootcamp__fee > div:first-child { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.1; }
.bootcamp__early { font-size: 15px; font-weight: 700; color: var(--amber); }
.bootcamp__more { margin-top: auto; font-size: 15px; font-weight: 700; color: var(--blue); }

.bootcamp__tail {
  margin-top: 28px; border-top: 1px solid rgba(0,0,0,.14); padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.bootcamp__tail > div { max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--ink); }

/* The registration form, downloadable without leaving an address. The brochure
   gate guards the term fees; the camp form is a document a parent signs, so it
   is served plainly. */
.form-grab {
  margin-top: 28px; max-width: 88ch; background: var(--cream);
  border-left: 4px solid var(--blue); border-radius: 0 var(--r) var(--r) 0;
  padding: 24px 28px;
}
.form-grab h3 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 0 0 6px; }
.form-grab p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; max-width: 62ch; }
.form-grab__links { display: flex; gap: 12px; flex-wrap: wrap; }
.form-grab__inline {
  margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink);
  align-self: flex-start; border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Visit / practicalities
   -------------------------------------------------------------------------- */

.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.visit__map { border-radius: var(--r); overflow: hidden; height: 420px; position: relative; box-shadow: var(--shadow-md); }

.facts-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; cursor: pointer; background: var(--white); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 20px 24px; margin: 4px 0 8px; text-align: left;
}
.facts-toggle h2 { font-size: 31px; line-height: 1.1; }
.facts-toggle span { font-size: 15px; font-weight: 700; color: var(--blue); white-space: nowrap; }

.facts { display: grid; gap: 14px; font-size: 17px; line-height: 1.6; }
.facts[hidden] { display: none; }
.facts__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
.facts__row dt { color: var(--muted); }
.facts__row dd { margin: 0; font-weight: 700; }

/* --------------------------------------------------------------------------
   Booking panel (#trial)
   -------------------------------------------------------------------------- */

.booking {
  background: var(--cream-2); color: var(--ink); border-radius: var(--r);
  padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.booking h2 { font-size: 43px; line-height: 1.1; margin: 4px 0 16px; }
.booking__points { display: grid; gap: 10px; font-size: 15px; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.booking__refund { margin-top: 20px; border-left: 3px solid var(--blue); padding-left: 14px; font-size: 15px; font-weight: 700; }
.booking__cta { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.booking__cta p { font-size: 14px; line-height: 1.5; color: var(--muted); flex: 1 1 180px; min-width: 0; margin: 0; }

.offer-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(31,36,48,.12); }
.offer-tab {
  font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 999px;
  cursor: pointer; background: transparent; color: var(--muted);
  border: 1.5px solid rgba(31,36,48,.16);
}
.offer-tab[aria-selected="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

.form { background: var(--white); border-radius: var(--r); padding: 28px; display: grid; gap: 16px; }
/* The bootcamp tab: a link to the online registration form, in the form's place. */
.booking__register { background: var(--white); border-radius: var(--r); padding: 28px; display: grid; gap: 14px; justify-items: start; }
.booking__register[hidden] { display: none; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form__hint { font-size: 13px; line-height: 1.5; color: var(--muted); }
.form__hint[data-error="true"] { color: var(--error); }

.slots { display: grid; gap: 8px; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 16px; }
.slots[data-error="true"] { border-color: var(--error); }
.slots__legend { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.slots__note { font-size: 14px; line-height: 1.5; color: var(--muted); margin: -2px 0 4px; }
.slots__list { display: grid; gap: 2px; max-height: 196px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.slots__list label {
  display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink);
  cursor: pointer; padding: 6px 0; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.slots__list input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }

.confirm { background: var(--white); color: var(--ink); border-radius: var(--r); overflow: hidden; }
.confirm__head { background: var(--blue); color: var(--white); padding: 28px 28px 24px; }
.confirm__head b { font-family: var(--display); font-weight: 700; font-size: 29px; margin-bottom: 10px; display: block; }
.confirm__head p { font-size: 16px; line-height: 1.6; margin: 0; }
.confirm__body { padding: 28px 32px; display: grid; gap: 18px; }
.confirm__steps { display: grid; gap: 14px; }
.confirm__step { display: flex; gap: 14px; align-items: baseline; }
.confirm__step b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--blue); flex: none; }
.confirm__step div { font-size: 16px; line-height: 1.55; }
.confirm__small { font-size: 14px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }

/* --------------------------------------------------------------------------
   Weekly timetable
   -------------------------------------------------------------------------- */

.timetable { background: var(--white); border: 1.5px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.timetable__row { display: grid; grid-template-columns: 148px 1fr; border-top: 1px solid var(--line); }
.timetable__row:first-child { border-top: 0; }
.timetable__day {
  padding: 18px 20px; background: var(--cream-3); border-right: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--ink);
}
.timetable__day span { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 3px; }
.timetable__slots { padding: 14px 20px; display: grid; gap: 12px; align-content: center; }
.timetable__slot { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: baseline; }
.timetable__time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.timetable__what { font-size: 16px; line-height: 1.45; color: var(--ink); }
.timetable__what i { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: var(--accent, var(--muted-3)); margin-right: 9px; vertical-align: middle; }
.timetable__what span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 2px; padding-left: 18px; }
.timetable__row--club { background: var(--cream); }
.timetable__row--club .timetable__day { background: var(--cream-2); }
.timetable__flag {
  display: inline-block; margin-top: 6px; margin-left: 18px; padding: 4px 10px; border-radius: 999px;
  background: var(--blue); color: var(--white); font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
/* The homepage version: one row per day, no sub-labels, so an already long
   page carries the week without the pathway and age detail. */
.timetable--compact { display: grid; grid-template-columns: 1fr; }
.timetable--compact .timetable__row { border-top: 0; border-bottom: 1px solid var(--line); grid-template-columns: 116px 1fr; }
.timetable--compact .timetable__row:nth-last-child(-n+1) { border-bottom: 0; }
.timetable--compact .timetable__day { padding: 12px 16px; font-size: 16.5px; display: flex; align-items: center; }
.timetable--compact .timetable__slots { padding: 10px 16px; gap: 7px; }
.timetable--compact .timetable__slot { grid-template-columns: 104px 1fr; gap: 12px; }
.timetable--compact .timetable__time { font-size: 14px; }
.timetable--compact .timetable__what { font-size: 15px; }
.timetable--compact .timetable__flag { margin-top: 5px; font-size: 11.5px; padding: 3px 9px; }

.timetable__foot { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 16px 0 0; max-width: 70ch; }

@media (max-width: 700px) {
  .timetable__row { grid-template-columns: 1fr; }
  .timetable__day { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .timetable__slots { padding: 14px 16px; }
  .timetable__slot { grid-template-columns: 1fr; gap: 2px; }
  .timetable__what span, .timetable__flag { margin-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Daytime, footer, sticky bar
   -------------------------------------------------------------------------- */

.daytime-card { background: var(--white); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); }
.daytime-card b { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--blue); margin-bottom: 6px; display: block; }
.daytime-card h3 { font-size: 22px; margin-bottom: 6px; }
.daytime-card p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

.site-footer { background: var(--cream); color: var(--ink); padding: var(--pad-y) 0 calc(34px + 76px); }
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 48px; }
.site-footer h2 { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 20px; }
.site-footer p:not([class]) { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 24px; max-width: 34ch; }
.site-footer ul { display: grid; gap: 12px; font-size: 15px; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.site-footer ul a { color: var(--muted); }
.site-footer ul a:hover { color: var(--blue); }
.site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.site-footer__brand img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; flex: none; display: block; }
.site-footer__word { font-family: var(--display); font-weight: 700; font-size: 21px; }
.site-footer__word span { color: var(--blue); }
.site-footer__social { display: flex; gap: 16px; font-size: 13px; color: var(--muted-2); }
.site-footer__legal {
  max-width: 1180px; margin: 44px auto 0; padding: 22px 40px 0;
  border-top: 1px solid rgba(31,36,48,.12); font-size: 13px; color: var(--muted-2); text-align: center;
}

.conversion-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--chrome-bg); border-top: 1px solid var(--chrome-border);
  box-shadow: 0 -6px 24px rgba(31, 36, 48, .12);
}
.conversion-bar__inner {
  max-width: 1240px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.conversion-bar p { color: var(--chrome-fg); font-size: 15px; line-height: 1.4; margin: 0; }
.conversion-bar p span { color: var(--muted); }
.conversion-bar .btn { padding: 14px 28px; }
/* The five marks from the numbered reasons, scattered behind the offer so it
   sits in the same family rather than alone on a flat band. Decorative only,
   so they are aria-hidden and never catch a pointer. */
[data-promo] { position: relative; overflow: hidden; }
[data-promo] > .wrap { position: relative; z-index: 1; }
.promo-shapes { position: absolute; inset: 0; pointer-events: none; }
.promo-shapes svg {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  transform: translate(-50%, -50%) rotate(var(--r));
  opacity: .5;
}

@media (max-width: 1079px) {
  /* Below this the card fills the band and the shapes would only crowd it. */
  .promo-shapes { display: none; }
}

.promo.promo--offer {
  display: grid; grid-template-columns: 1.35fr auto; gap: 40px; align-items: center;
  background: var(--blue); color: var(--white); border: 0;
  border-radius: var(--r); padding: 40px 44px; box-shadow: var(--shadow-md);
}
.promo.promo--offer .promo__eyebrow {
  color: var(--yellow); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px;
}
.promo.promo--offer .promo__title {
  font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.06; margin: 0 0 14px; color: var(--white);
}
.promo.promo--offer .promo__body { font-size: 17px; line-height: 1.6; margin: 0 0 14px; color: rgba(255,255,255,.94); max-width: 54ch; }
.promo.promo--offer .promo__ask { font-size: 15px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.82); max-width: 54ch; }
.promo.promo--offer .promo__refund { display: block; font-weight: 700; color: var(--yellow); margin-top: 8px; }

.promo__price { text-align: center; flex: none; display: grid; gap: 14px; justify-items: center; }
.promo__price b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 62px; line-height: .95; color: var(--white);
}
.promo__price small { display: block; font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.8); margin-top: 4px; }
.promo.promo--offer .btn--primary { background: var(--white); color: var(--blue); }
.promo.promo--offer .btn--primary:hover { background: var(--yellow); color: var(--ink); }
.promo.promo--offer .link-quiet { color: rgba(255,255,255,.85); }
.promo.promo--offer .link-quiet:hover { color: var(--white); }

@media (max-width: 899px) {
  .promo.promo--offer { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; text-align: left; }
  .promo__price { justify-items: start; }
  .promo__price b { font-size: 52px; }
}

.promo {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  background: var(--white); border: 1.5px solid var(--line-2); border-radius: var(--r);
  padding: 34px 36px; box-shadow: var(--shadow-sm);
}
.promo__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 10px;
}
.promo__title { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; margin: 0 0 12px; }
.promo__body { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 10px; max-width: 62ch; }
.promo__ask  { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 62ch; }
.promo__actions { display: grid; gap: 12px; justify-items: center; flex: none; }

@media (max-width: 899px) {
  .promo { grid-template-columns: 1fr; padding: 26px 22px; gap: 22px; }
  .promo__actions { justify-items: stretch; }
}

.bundle__split {
  font-size: 15px; font-weight: 700; color: var(--amber);
  margin: -6px 0 0; letter-spacing: .01em;
}
.bundle--dark .bundle__split { color: var(--yellow); }

.conversion-bar__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.conversion-bar__link {
  font-size: 15px; font-weight: 700; color: var(--chrome-accent);
  border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap;
}
.conversion-bar__link:hover { border-bottom-color: var(--chrome-accent); color: var(--chrome-accent); }

/* --------------------------------------------------------------------------
   Responsive — mirrors the design's `narrow` (< 900px) breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 1079px) {
  .nav { gap: 6px 14px; }
  .nav__link { font-size: 14px; }
  .masthead__cta { display: none; }
}

@media (max-width: 899px) {
  :root { --pad-y: 88px; }

  .wrap { padding: 0 24px; }

  /* Header collapses to a disclosure menu */
  .masthead__inner { flex-wrap: wrap; gap: 12px 16px; padding: 14px 24px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    background: none; border: 1.5px solid var(--chrome-border); border-radius: 999px;
    padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  }
  .nav {
    display: none; flex-direction: column; align-items: stretch;
    width: 100%; margin: 0; gap: 0; order: 3;
  }
  .masthead[data-nav-open="true"] .nav { display: flex; }
  .nav__item { padding: 0; margin: 0; border-top: 1px solid var(--chrome-border); }
  .nav__link { display: flex; justify-content: space-between; width: 100%; padding: 14px 0; border-bottom: 0; font-size: 16px; }
  .menu { position: static; min-width: 0; padding: 0 0 12px; }
  .menu__panel { box-shadow: none; padding: 0; background: transparent; }
  .lang { margin-left: 0; }
  .topbar__inner { justify-content: flex-start; }

  .hero__stage { width: 100%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.96) 42%, var(--white) 100%);
  }
  /* Leave room for the "Starting September" flash, which sits top-right. */
  .hero__body { padding: 118px 24px 48px; }
  .flash { right: 16px; padding: 12px 16px 18px; }
  .flash b { font-size: 13px; }
  .flash i { font-size: 22px; }
  .hero__compare, .triad, .hero__actions { max-width: none; }
  .flash { right: 20px; }

  .triad { grid-template-columns: 1fr 1fr; gap: 18px; }
  /* The hover popover has no touch equivalent; the same copy is on the
     pathway cards further down, so it is dropped rather than inlined. */
  .triad__pop { display: none; }

  .grid--2, .grid--3, .grid--4, .grid--split, .visit, .booking, .gate { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .booking { padding: 28px; gap: 32px; }

  /* Pathway cards become a swipeable rail. The card is a little narrower than
     the track so the next one peeks in at the edge — without that, nothing on
     screen says there is more than one card. The step is read by the script,
     so the two can never drift apart. */
  .rail { display: flex; grid-template-columns: none; --card-w: 84%; }
  .rail > .card-path { flex: 0 0 var(--card-w); }
  .rail-nav { display: flex; }

  .builder__row, .builder__thead { grid-template-columns: 1fr; }
  .builder__thead { display: none; }
  .builder__item > div > *:nth-child(1) { padding: 14px 20px; }
  .builder__item > div > *:nth-child(2),
  .builder__item > div > *:nth-child(3) { padding: 0 20px 6px 37px; }
  .builder__item > div > *:nth-child(3) { padding-bottom: 14px; }
  .builder__foot { padding: 22px; }

  .rates__row { grid-template-columns: 1fr 1fr; }
  .rates__row > div { padding: 12px 18px; }
  .rates__head { display: none; }

  .facts__row { grid-template-columns: 1fr; gap: 2px; }
  .visit__map { height: 260px; }
  .section-title, .booking h2 { font-size: 34px; }
  .facts-toggle h2 { font-size: 26px; }

  .conversion-bar__inner { padding: 10px 16px; gap: 12px; }
  .conversion-bar p { font-size: 13px; }
  .conversion-bar p span { display: none; }
  .conversion-bar .btn { font-size: 15px; padding: 12px 20px; }
  .conversion-bar__actions { gap: 12px; }
  .conversion-bar__link { display: none; }
}

/* --------------------------------------------------------------------------
   Small phones
   At 320px the header alone was eating 309px, 44% of the screen, before a
   word of content: address and telephone wrapping onto two lines in the top
   bar, then the wordmark forcing the menu button onto a row of its own. The
   headline started at 515px. Everything below buys that space back.
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
  /* Small enough to sit beside Menu and the language switcher on one row. */
  .brand__word { font-size: 15.5px; letter-spacing: -.01em; }
}

@media (max-width: 359px) {
  /* Below this the row cannot hold it at any readable size. The mark itself
     carries the name. */
  .brand__word { display: none; }
}

@media (max-width: 560px) {
  /* The address and number are in the footer and on the contact page. In a
     strip above the logo they cost two lines and are read by nobody. */
  .topbar__facts { display: none; }
  .topbar { padding: 8px 0; font-size: 12.5px; }
  .topbar__inner { justify-content: center; gap: 8px; }
  .topbar__announce { justify-content: center; text-align: center; line-height: 1.35; }

  /* A smaller wordmark lets the logo, the menu button and the language
     switcher share one row instead of taking two. */
  .brand { gap: 10px; }
  .brand img { width: 36px; height: 36px; }
  .brand__word { font-size: 19px; }
  .to-top { right: 12px; }
  .masthead__inner { flex-wrap: nowrap; gap: 10px; padding: 10px 20px; }
  .nav-toggle { padding: 9px 13px; font-size: 13.5px; }
  .masthead[data-nav-open="true"] .nav { order: 3; }
  .masthead__inner:has(.nav[style]), .masthead[data-nav-open="true"] .masthead__inner { flex-wrap: wrap; }

  /* The flash was sized for a desktop corner and pushed the hero down. */
  .flash { padding: 9px 12px 14px; right: 12px; }
  .flash b { font-size: 12px; letter-spacing: .07em; }
  .flash i { font-size: 20px; }
  .hero__body { padding: 92px 20px 40px; }

  /* Letter-spaced caps are expensive on a narrow screen. */
  .hero__kicker span { font-size: 12.5px; letter-spacing: .07em; }

  .wrap { padding: 0 20px; }

  /* The bar's line was wrapping, which made it taller than the button. */
  .conversion-bar__inner { padding: 9px 14px; gap: 10px; min-width: 0; }
  .conversion-bar p { font-size: 12.5px; line-height: 1.3; min-width: 0; }
  .conversion-bar .btn { font-size: 13.5px; padding: 11px 14px; }
  .conversion-bar__actions { min-width: 0; }

  /* The dots already say which card you are on. */
  .rail-readout { display: none; }
}

/* Comfortable targets on touch screens, independent of width. */
@media (hover: none) and (pointer: coarse) {
  .lang__toggle { min-height: 44px; padding-inline: 10px; }
  .dots .dot { width: 44px; height: 44px; }
  .dots .dot::after { width: 9px; height: 9px; }
  .rail-arrow { min-width: 44px; min-height: 44px; }
  .card-path__toggle, .nav__link { min-height: 44px; }
  .support__cta { min-height: 44px; padding-block: 8px; }
  .offer-tab { min-height: 44px; }
  .conversion-bar .btn { min-height: 44px; }
  .nav-toggle { min-height: 44px; }
  .to-top { width: 48px; height: 48px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .booking { padding: 22px; }
}

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

/* ==========================================================================
   Interior pages
   ========================================================================== */

.page-hero { background: var(--white); padding: 88px 0 64px; position: relative; overflow: hidden; }
.page-hero--tint { background: var(--cream-2); padding: 44px 0 40px; }
.page-hero__kicker {
  font-size: 14px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 16px;
}
.page-hero--tint .page-hero__kicker { color: var(--amber); font-size: 13px; margin-bottom: 14px; }
.page-hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 6vw, 76px); line-height: .96; margin: 0 0 14px; color: var(--blue);
}
.page-hero--tint h1 { color: var(--ink); font-size: clamp(38px, 4.6vw, 56px); line-height: 1.02; margin-bottom: 12px; }
.page-hero__sub {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; color: var(--ink); margin: 0 0 20px;
}
.page-hero__lede { font-size: 19px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 60ch; text-wrap: pretty; }
.page-hero__facts {
  display: flex; gap: 14px 34px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(31, 36, 48, .12); font-size: 15px; color: var(--muted);
}
.page-hero__facts b { color: var(--ink); }

/* Interior hero with a rotating picture -------------------------------------
   The text keeps the left column; a panel of photographs turns beside it, on
   the same timer as the homepage hero. On a phone the picture drops below the
   words rather than competing with them. */

.page-hero--media .wrap {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center;
}
.page-hero--media .page-hero__lede { max-width: 46ch; }

.page-hero__media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-md); background: var(--cream-3);
}
.page-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.page-hero__slide[aria-hidden="false"] { opacity: 1; }
.page-hero__media .dots {
  position: absolute; left: 16px; bottom: 14px; margin: 0; z-index: 2;
}
.page-hero__media .dot::after { background: rgba(255, 255, 255, .55); }
.page-hero__media .dot[aria-current="true"] { background: var(--white); }

@media (max-width: 899px) {
  .page-hero--media .wrap { grid-template-columns: 1fr; gap: 28px; }
  .page-hero__media { aspect-ratio: 16 / 10; }
}

/* Programme cards ---------------------------------------------------------- */

.card-program {
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--white);
  box-shadow: var(--shadow-sm); overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.card-program__media { height: 170px; position: relative; border-bottom: 5px solid var(--accent, var(--blue)); }
.card-program__body { padding: 26px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.card-program__tag {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-text, var(--amber)); margin: 0;
}
.card-program h2, .card-program h3 { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.12; margin: 0 0 8px; }
.card-program__line { font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.card-program__body p:not([class]) { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }

.mini-label {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}

.prog-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prog-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.prog-badge {
  width: 30px; height: 24px; border-radius: 6px; background: var(--cream);
  border: 1px solid rgba(0, 0, 0, .10); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); flex: none;
}
.prog-bullet { width: 6px; height: 6px; border-radius: 999px; background: var(--accent, var(--blue)); flex: none; }

.tagchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tagchip { background: var(--chip-bg, var(--cream)); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.tagchip--live { background: #E1F0E6; color: #1B5E3F; font-weight: 700; }
.tagchip--soon { background: #EFEBE1; color: var(--muted); }

.spec { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 16px; display: grid; gap: 14px; }
.spec__row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin: 0; }
.spec__row span { color: var(--muted); }

.rail-readout { font-size: 14px; color: var(--muted); margin-left: 8px; }

/* The approach band, shared by the programme pages -------------------------- */

.approach {
  background: var(--cream-3); border-top: 1px solid rgba(0, 0, 0, .08);
  border-bottom: 1px solid rgba(0, 0, 0, .08); padding: 88px 0;
}
.approach__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
.approach h2 { font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1.05; max-width: 22ch; }
.approach p:not([class]) { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 20px; max-width: 56ch; }

/* "One pathway, or build your own" ------------------------------------------ */

.build-box {
  border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-sm);
  padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.build-box h2 { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; margin-bottom: 10px; }
.build-box > div > p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; max-width: 48ch; }
.build-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.build-mini { border: 1px solid var(--hairline); border-radius: 12px; padding: 20px 16px; text-align: center; }
.build-mini--fill { background: var(--cream-2); border-color: transparent; }
.build-mini--best { border: 2px solid var(--yellow); }
.build-mini__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.build-mini__n { font-family: var(--display); font-weight: 700; font-size: 32px; margin: 0; }
.build-mini__sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.build-mini__save { font-size: 12px; color: var(--amber); font-weight: 700; margin: 6px 0 0; }

/* Application wizard -------------------------------------------------------- */

.wizard { max-width: 900px; margin: 0 auto; padding: 36px 40px 80px; }
.wizard h2 { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; margin: 0 0 8px; }
.wizard__intro { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; max-width: 62ch; }

.steps { display: flex; gap: 8px; margin-bottom: 14px; }
.step { flex: 1 1 0; min-width: 0; }
.step__bar { height: 5px; border-radius: 999px; background: var(--line-2); }
.step__label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-3); margin: 9px 0 0;
}
.step[data-state="done"]    .step__bar { background: var(--yellow); }
.step[data-state="current"] .step__bar { background: var(--blue); }
.step[data-state="done"]    .step__label,
.step[data-state="current"] .step__label { color: var(--ink); }
.step-counter { font-size: 14px; color: var(--muted); margin: 0 0 26px; }

.choice {
  display: flex; align-items: flex-start; gap: 18px; width: 100%; text-align: left;
  border: 2px solid var(--line-2); background: var(--white); border-radius: var(--r);
  padding: 26px 28px; cursor: pointer; font: inherit; color: inherit;
}
.choice:hover { border-color: var(--blue); }
.choice[aria-pressed="true"], .choice[aria-checked="true"] { border-color: var(--blue); background: var(--cream); }
.choice[disabled] { cursor: not-allowed; opacity: .5; }
.choice__mark {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-2);
  color: var(--white); font-size: 14px; font-weight: 700; line-height: 19px; text-align: center;
  flex: none; margin-top: 3px;
}
.choice--radio .choice__mark { border-radius: 999px; }
.choice[aria-pressed="true"] .choice__mark,
.choice[aria-checked="true"] .choice__mark { border-color: var(--blue); background: var(--blue); }
.choice > span:last-child { display: block; min-width: 0; }
.choice__title { display: block; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0 0 5px; }
.choice__body { display: block; font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

.note { border-radius: 12px; padding: 16px 20px; font-size: 15px; line-height: 1.6; color: var(--muted); background: var(--cream); }
.note--good { background: var(--cream-3); color: var(--amber); }

.pill-set { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  border: 2px solid var(--line-2); background: var(--white); color: var(--ink); border-radius: 999px;
  padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pill:hover { border-color: var(--blue); }
.pill[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--white); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-label { display: grid; gap: 7px; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--ink); }
.field-label textarea { resize: vertical; }

.add-child {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  border: 2px dashed var(--line-2); background: none; border-radius: 999px; padding: 11px 22px;
  font-size: 15px; font-weight: 700; color: var(--blue); cursor: pointer; font-family: inherit;
}
.add-child:hover { border-color: var(--blue); background: var(--cream); }

.wizard__nav {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, .12);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.wizard__nav p:not([class]) { font-size: 14px; line-height: 1.5; color: var(--muted); flex: 1 1 220px; min-width: 0; margin: 0; }
.link-back { background: none; border: 0; font-size: 15px; font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit; }
.link-back:hover { color: var(--ink); }

.summary-box { margin-top: 28px; border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; }
.summary-box__head {
  background: var(--cream); padding: 14px 20px; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.summary-box dl { margin: 0; padding: 6px 20px 16px; }
.summary-box div {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: 15px;
}
.summary-box dt { color: var(--muted); }
.summary-box dd { margin: 0; font-weight: 700; }

.sent { border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.sent__head { background: var(--blue); color: var(--white); padding: 34px 34px 30px; }
.sent__head h2 { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1.05; margin: 0 0 10px; }
.sent__head p:not([class]) { font-size: 17px; line-height: 1.6; margin: 0 0 24px; max-width: 56ch; }
.sent__head .btn { background: var(--yellow); color: var(--ink); font-size: 17px; }
.sent__head .btn:hover { background: var(--yellow-hover); color: var(--ink); }
.sent__body { padding: 30px 34px 34px; }
.sent__body > p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 26px; max-width: 64ch; }
.sent__steps { display: grid; gap: 18px; margin: 0 0 28px; padding: 0; list-style: none; }
.sent__steps li { display: flex; gap: 16px; align-items: baseline; font-size: 16px; line-height: 1.6; }
.sent__steps b { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--blue); flex: none; }

/* Online camp registration -------------------------------------------------- */
/* One long form in the wizard's column, split into the same numbered parts as
   the PDF so a parent who has seen one recognises the other. */

.reg__part { border: 0; margin: 0 0 40px; padding: 0; min-width: 0; }
.reg__part legend {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0; margin-bottom: 18px;
  font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.15; color: var(--ink);
}
.reg__part legend > span {
  flex: none; width: 32px; height: 32px; border-radius: 999px; align-self: center;
  background: var(--blue); color: var(--white); font-size: 16px; line-height: 32px; text-align: center;
}
.reg__part legend small { font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--muted); }
.reg .field-label small { font-weight: 400; color: var(--muted); }
.reg .field[data-error="true"] { border-color: var(--error); }
.reg__stack { display: grid; gap: 14px; }
.reg__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.reg__note { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; max-width: 64ch; }
.reg__stack + .reg__note { margin: 14px 0 0; }

.check {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: 12px; padding: 14px 16px;
  background: var(--white); font-size: 16px; line-height: 1.55; color: var(--ink);
}
.check:hover { border-color: var(--blue); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.check:has(input:checked) { border-color: var(--blue); background: var(--cream); }
.check[data-error="true"] { border-color: var(--error); }
.reg__choices .check { padding: 12px 18px; font-weight: 700; }

.reg .wizard__nav p[data-camp-error] { color: var(--error); font-weight: 700; }

/* The honeypot: out of sight and out of the tab order, but still in the form,
   where a bot filling every field will find it. */
.reg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Prose pages (privacy, terms) ---------------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; margin: 44px 0 12px; }
.prose h3 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose > :first-child { margin-top: 0; }

@media (max-width: 899px) {
  .page-hero { padding: 56px 0 44px; }
  .page-hero__facts { gap: 10px 20px; }
  .approach { padding: 64px 0; }
  .approach__grid, .build-box, .field-grid { grid-template-columns: 1fr; }
  .approach h2 { font-size: 30px; }
  .build-box { padding: 24px; gap: 24px; }
  .build-minis { grid-template-columns: 1fr; }
  .wizard { padding: 28px 24px 64px; }
  .wizard h2 { font-size: 27px; }
  .steps { gap: 5px; }
  .step__label { font-size: 10px; letter-spacing: .02em; }
  .summary-box div { grid-template-columns: 1fr; gap: 2px; }
  .sent__head, .sent__body { padding: 24px; }
  .sent__head h2 { font-size: 28px; }
}

/* Prices page — brochure gate and the mocked-up PDF ------------------------- */

.gate-wide { display: grid; grid-template-columns: .72fr 1.28fr; gap: 24px; align-items: stretch; }

.price-hero {
  border: 2px solid var(--blue); background: var(--cream); border-radius: var(--r);
  padding: 32px 28px; display: flex; flex-direction: column;
}
.price-hero__kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; }
.price-hero__figure { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: .95; margin: 0; }
.price-hero__unit { font-size: 15px; font-weight: 700; color: var(--ink); margin: 4px 0 12px; }
.price-hero p:not([class]) { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 20px; }
.price-hero__actions { margin-top: auto; display: grid; gap: 10px; }

.gate-card {
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--white);
  box-shadow: var(--shadow-md); overflow: hidden;
  display: grid; grid-template-columns: 1.3fr .7fr;
}
.gate-card__body { padding: 32px 30px; }
.gate-card__kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red-dark); margin: 0 0 12px; }
.gate-card h2 { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.08; margin: 0 0 12px; }
.gate-card__lede { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; max-width: 46ch; }
.gate-contents { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.gate-contents li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.gate-contents b { font-family: var(--display); font-weight: 700; color: var(--blue); }

.gate-card__preview {
  background: var(--cream); padding: 32px 26px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.pdf-mock {
  width: 100%; max-width: 230px; background: var(--white); border-radius: 6px;
  box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(-2deg);
}
.pdf-mock__head { background: var(--cream-2); color: var(--ink); padding: 18px 18px 16px; }
.pdf-mock__head span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; }
.pdf-mock__head b { display: block; font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.02; }
.pdf-mock__head i { display: block; font-style: normal; font-size: 10px; color: var(--muted); margin-top: 6px; }
.pdf-mock__rows { padding: 16px 18px 20px; display: grid; gap: 9px; }
.pdf-mock__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-warm); }
.pdf-mock__row i { display: block; height: 7px; border-radius: 6px; background: var(--bar-warm); }
.pdf-mock__row i + i { filter: blur(2.2px); }
.gate-card__pages {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

.included { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.included > div { border-top: 3px solid var(--yellow); padding-top: 16px; }
.included h3 { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
.included p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

.bundle--dark { background: var(--ink); }
.bundle--dark .bundle__price { color: var(--white); }

.notes-row {
  margin-top: 24px; border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--white); padding: 28px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.notes-row dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.notes-row dd { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.cta-panel {
  background: var(--cream-2); color: var(--ink); border-radius: var(--r); padding: 44px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
.cta-panel h2 { font-family: var(--display); font-weight: 600; font-size: 42px; line-height: 1.05; margin: 0 0 14px; }

.relink { background: none; border: 0; padding: 20px 0 0; margin-top: auto; font: inherit; font-size: 14px; color: var(--muted-2); cursor: pointer; text-decoration: underline; text-align: left; }

@media (max-width: 899px) {
  .gate-wide, .gate-card, .included, .notes-row, .cta-panel { grid-template-columns: 1fr; }
  .included { gap: 20px; }
  .cta-panel { padding: 26px; gap: 24px; }
  .cta-panel h2 { font-size: 30px; }
  .price-hero__figure { font-size: 52px; }
  .gate-card h2 { font-size: 27px; }
}

/* About page ---------------------------------------------------------------- */

.teachers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.teacher-card {
  display: flex; gap: 18px; align-items: flex-start; width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 22px; cursor: pointer; font: inherit; color: inherit;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.teacher-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.teacher-card img, .teacher-card .slot--circle { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.teacher-card__name { display: block; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; margin-bottom: 2px; }
.teacher-card__role { display: block; font-size: 14px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.teacher-card__blurb { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-bottom: 10px; }
.teacher-card__more { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }

.gymi-callout {
  margin-top: 24px; background: var(--cream-2); border-radius: var(--r); padding: 28px 30px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.gymi-callout > div { flex: 1 1 380px; min-width: 0; }
.gymi-callout h3 { font-family: var(--display); font-weight: 600; font-size: 26px; margin: 0 0 8px; }
.gymi-callout p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }

.figures { display: grid; gap: 24px; }
.figures--3 { grid-template-columns: repeat(3, 1fr); }
.figures--2 { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
.figures figure { margin: 0; }
.figures .frame { position: relative; height: 230px; border-radius: var(--r); overflow: hidden; }
.figures figcaption { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 12px; }

.process { display: flex; flex-wrap: wrap; gap: 10px; }
.process__step {
  display: flex; align-items: center; gap: 9px; background: var(--white);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 18px 9px 9px; font-size: 15px; font-weight: 700;
}
.process__step b {
  width: 26px; height: 26px; border-radius: 999px; background: var(--blue); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none;
}

.question-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.question-card {
  background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 20px; font-size: 16px; font-weight: 700; color: var(--ink);
  transition: transform .2s ease;
}
.question-card:nth-child(odd) { transform: rotate(-1.2deg); }
.question-card:nth-child(even) { transform: rotate(1deg); }
.question-card:hover { transform: rotate(0deg) translateY(-4px); }

.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.value b { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--amber); display: block; margin-bottom: 8px; }
.value h3 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 0 0 6px; }
.value p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.promise-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.promise-list li { display: flex; gap: 10px; align-items: baseline; }
.promise-list span { color: var(--amber); font-weight: 700; flex: none; }

/* Teacher dialog ------------------------------------------------------------ */

.bio[open] { display: block; }
.bio {
  border: 0; padding: 0; max-width: 640px; width: calc(100% - 32px); border-radius: var(--r);
  box-shadow: var(--shadow-lg); color: var(--ink); background: var(--white);
}
.bio::backdrop { background: rgba(31, 36, 48, .55); }
.bio__head {
  display: flex; align-items: center; gap: 18px; padding: 26px 28px;
  border-bottom: 1px solid var(--line); background: var(--cream);
}
.bio__head img, .bio__initials { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.bio__initials {
  background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 24px;
}
.bio__name { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.1; margin: 0; }
.bio__role { font-size: 15px; font-weight: 700; color: var(--blue); margin: 4px 0 0; }
.bio__close {
  margin-left: auto; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line-2);
  background: none; font-size: 20px; line-height: 1; cursor: pointer; flex: none;
}
.bio__close:hover { background: var(--ink); color: var(--white); }
.bio__body { padding: 26px 28px 22px; display: grid; gap: 18px; max-height: 60vh; overflow-y: auto; }
.bio__body dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.bio__body dd { margin: 0; font-size: 16px; line-height: 1.65; }
.bio__nav {
  display: flex; justify-content: space-between; gap: 16px; padding: 16px 28px 22px;
  border-top: 1px solid var(--line);
}
.bio__nav button { background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.bio__nav button:hover { color: var(--ink); }

@media (max-width: 899px) {
  .teachers, .figures--3, .figures--2 { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr 1fr; }
  .gymi-callout { padding: 22px; }
  .bio__body { max-height: 55vh; }
}
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* Breadcrumb and split hero (Gymi, pathway pages) --------------------------- */

.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }

.badge-pill {
  display: inline-block; background: var(--ink); color: var(--white); border-radius: 999px;
  padding: 6px 16px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin: 0 0 16px;
}

.hero-split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: start; }
.hero-split__media { height: 340px; border-radius: var(--r); overflow: hidden; position: relative; }

.paper-card { background: var(--cream); border-radius: var(--r); padding: 30px 28px 32px; }
.paper-card__label {
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 12px;
}
.paper-card h3 { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1; margin: 0 0 12px; }
.paper-card p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }

.fee-table { border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.fee-table__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; }
.fee-table__head { background: var(--cream-2); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fee-table__head > div:nth-child(1) { padding: 16px 24px; }
.fee-table__head > div:nth-child(2), .fee-table__head > div:nth-child(3) { padding: 16px 12px; }
.fee-table__head > div:nth-child(4) { padding: 16px 24px; }
.fee-table__body { border-top: 1px solid var(--rule); background: var(--white); }
.fee-table__body > div:nth-child(1) { padding: 18px 24px; font-weight: 700; }
.fee-table__body > div:nth-child(2), .fee-table__body > div:nth-child(3) { padding: 18px 12px; color: var(--muted); font-size: 15px; }
.fee-table__body > div:nth-child(4) { padding: 18px 24px; font-weight: 700; color: var(--amber); }

@media (max-width: 899px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__media { height: 220px; }
  .fee-table__row { grid-template-columns: 1fr 1fr; }
  .fee-table__head { display: none; }
  .fee-table__body > div { padding: 10px 18px !important; }
  .fee-table__body > div:nth-child(1) { padding-top: 16px !important; }
  .fee-table__body > div:nth-child(4) { padding-bottom: 16px !important; }
}

/* Pathway pages ------------------------------------------------------------- */

.prog-table { border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.prog-table__row { display: grid; grid-template-columns: 1.7fr .8fr 1.2fr; align-items: center; }
.prog-table__head { background: var(--cream-2); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prog-table__head > div:nth-child(1) { padding: 16px 24px; }
.prog-table__head > div:nth-child(2) { padding: 16px 12px; }
.prog-table__head > div:nth-child(3) { padding: 16px 24px; }
.prog-table__body { border-top: 1px solid var(--rule); background: var(--white); }

/* A banded row that groups the rows under it — used where a pathway asks the
   child to choose one option from a set, rather than including them all. */
.prog-table__group {
  display: grid; grid-template-columns: 1.7fr 2fr; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--rule); background: var(--cream);
  padding: 13px 24px;
}
/* Not the pathway accent: yellow reads at 1.47:1 on cream and blue and red
   both fail AA too. The coloured bullets already carry the pathway's colour. */
.prog-table__group b { font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink); }
.prog-table__group span { font-size: 14.5px; color: var(--muted); }
@media (max-width: 700px) { .prog-table__group { grid-template-columns: 1fr; gap: 3px; } }

.prog-table__body > div:nth-child(1) { padding: 16px 24px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.prog-table__body > div:nth-child(2), .prog-table__body > div:nth-child(3) { padding: 16px 12px; color: var(--muted); font-size: 15px; }
.prog-table__foot {
  border-top: 1px solid var(--rule); background: var(--cream); padding: 20px 24px;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
}
.prog-table__foot > p { flex: 1 1 260px; min-width: 0; font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
.prog-table__terms {
  border-top: 4px solid var(--accent, var(--yellow)); background: var(--white); padding: 26px 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.prog-table__terms dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.prog-table__terms dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.skill-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; max-width: 900px; margin: 0; padding: 0; list-style: none; }
.skill-list li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.6; color: var(--ink); }
.skill-list span { width: 8px; height: 8px; border-radius: 999px; background: var(--accent, var(--yellow)); flex: none; }

.detail-rows { display: grid; gap: 16px; }
.detail-rows > div { display: grid; grid-template-columns: 260px 1fr; gap: 32px; border-top: 1px solid var(--rule); padding-top: 20px; }
.detail-rows dt { font-family: var(--display); font-weight: 600; font-size: 26px; }
.detail-rows dd { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 70ch; }

.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.phase { background: var(--white); border-radius: 12px; padding: 22px; }
.phase__when { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin: 0 0 8px; }
.phase h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0 0 8px; }
.phase p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

.big-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.big-chips li { background: var(--chip-bg, var(--cream-3)); border-radius: 999px; padding: 9px 18px; font-size: 16px; }

@media (max-width: 899px) {
  .prog-table__row, .prog-table__head { grid-template-columns: 1fr; }
  .prog-table__head { display: none; }
  .prog-table__body > div:nth-child(2), .prog-table__body > div:nth-child(3) { padding: 0 24px 6px 62px; }
  .prog-table__body > div:nth-child(3) { padding-bottom: 16px; }
  .prog-table__terms, .skill-list, .phases { grid-template-columns: 1fr; }
  .detail-rows > div { grid-template-columns: 1fr; gap: 8px; }
  .detail-rows dt { font-size: 22px; }
}

/* Speciality add-on -----------------------------------------------------------
   Gymivorbereitung is not one of the three pathways — it is an exam-timed
   course a family adds alongside them. It is deliberately shaped nothing like
   a pathway card: one wide panel, no number, no tilt, its own accent rail. */

.speciality {
  display: grid; grid-template-columns: 320px 1fr; gap: 0;
  background: var(--white); border: 1px solid var(--line);
  border-left: 6px solid var(--coral);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.speciality__media { position: relative; min-height: 260px; background: var(--cream-3); }
.speciality__body { padding: 34px 38px; display: grid; gap: 16px; align-content: center; }
.speciality__label {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral); margin: 0;
}
.speciality__body h3 {
  font-family: var(--display); font-weight: 700; font-size: 32px;
  line-height: 1.05; margin: 0; color: var(--ink);
}
.speciality__body > p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 56ch; }
.speciality__facts {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 4px;
  font-size: 15px; color: var(--muted);
}
.speciality__facts b { color: var(--ink); font-weight: 700; }
.speciality__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 6px; }

@media (max-width: 899px) {
  .speciality { grid-template-columns: 1fr; border-left-width: 5px; }
  .speciality__media { min-height: 190px; }
  .speciality__body { padding: 26px 24px; }
  .speciality__body h3 { font-size: 26px; }
}

/* Gallery ---------------------------------------------------------------------
   A masonry-ish grid of thumbnails behind an email gate, and a lightbox for
   looking at one properly. The gate is session-scoped like the brochure: it
   collects an address and opens for the visit, and is closed again next time. */

.shots {
  margin-top: 40px;
  columns: 4 260px; column-gap: 14px;
}
.shots .shot {
  display: block; width: 100%; padding: 0; margin: 0 0 14px;
  border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in;
  background: var(--cream-3); break-inside: avoid;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.shots .shot img { display: block; width: 100%; height: auto; }
.shots .shot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.shots .shot:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.lightbox {
  border: 0; padding: 0; background: rgba(21, 26, 38, .94); color: var(--white);
  max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
}
.lightbox::backdrop { background: rgba(21, 26, 38, .94); }
.lightbox img {
  display: block; max-width: 92vw; max-height: 84vh;
  margin: 6vh auto 0; border-radius: 10px; object-fit: contain;
}
.lightbox__close, .lightbox__nav {
  position: fixed; background: rgba(255, 255, 255, .12); color: var(--white);
  border: 0; border-radius: 999px; cursor: pointer; line-height: 1;
}
.lightbox__close { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__count {
  position: fixed; left: 0; right: 0; bottom: 22px; text-align: center;
  font-size: 14px; color: #C9CEDA; margin: 0;
}

@media (max-width: 899px) {
  .shots { columns: 2 150px; column-gap: 10px; }
  .shots .shot { margin-bottom: 10px; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 26px; }
  .lightbox img { max-height: 74vh; }
}

/* ==========================================================================
   Closing band
   The last thing on a page: one offer, two buttons, and a scatter of shapes
   that drift as the reader scrolls. Three motions share each sticker, so they
   are kept on separate properties and separate elements — otherwise whichever
   writes `transform` last wins:
     .sticker      transform  -> parallax, written inline by site.js
     .sticker      translate  -> the idle bob, a keyframe animation
     .sticker svg  transform  -> the entrance, a transition
   ========================================================================== */

.band { position: relative; overflow: hidden; padding: 108px 0 116px; text-align: center;
        background: var(--blue); color: var(--white); }
/* A deliberately narrow text column. The margins it leaves either side are
   where the stickers live, so art and copy can never collide. */
.band__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
.band h2 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5.2vw, 56px);
           line-height: 1.02; margin: 0 0 16px; letter-spacing: -.01em; }
.band p { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; margin: 0 auto 30px;
          max-width: 46ch; color: #DCE6FB; }
.band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.band__note { display: block; margin-top: 20px; font-size: 15px; }
.band__note a { color: #DCE6FB; }
.band .btn--primary { background: var(--yellow); color: var(--ink); }
.band .btn--primary:hover { background: var(--yellow-hover); }
.band .btn--ghost-blue { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.band .btn--ghost-blue:hover { background: rgba(255, 255, 255, .12); }

.stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sticker { position: absolute; display: block; will-change: transform;
           animation: bob 6s ease-in-out infinite; }
.sticker svg { display: block; width: 100%; height: 100%; }

/* Hidden only once the script has taken charge of revealing them, so a page
   with no JavaScript still shows the shapes rather than an empty band. */
.stickers.will-reveal .sticker svg { opacity: 0; transform: scale(.86); }
.stickers.will-reveal.is-in .sticker svg { opacity: 1; transform: none;
  transition: opacity var(--dur-slow) ease, transform .7s var(--ease); }
.stickers.will-reveal.is-in .sticker:nth-child(2) svg { transition-delay: .06s }
.stickers.will-reveal.is-in .sticker:nth-child(3) svg { transition-delay: .12s }
.stickers.will-reveal.is-in .sticker:nth-child(4) svg { transition-delay: .18s }
.stickers.will-reveal.is-in .sticker:nth-child(5) svg { transition-delay: .24s }

@keyframes bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -9px } }

/* Placement, all of it outside the 640px text column. Gaps allow for the bob:
   two shapes in opposite phase close 18px between them. */
.s-1 { left: 3%;   top: 13%;   width: 106px; height: 106px; animation-delay: -.4s; }
.s-2 { left: 7%;   top: 51%;   width: 74px;  height: 74px;  animation-delay: -1.8s; }
.s-3 { right: 3%;  top: 15%;   width: 96px;  height: 96px;  animation-delay: -2.3s; }
.s-4 { right: 8%;  top: 57%;   width: 68px;  height: 68px;  animation-delay: -.9s; }
.s-5 { left: 11%;  bottom: 11%; width: 58px; height: 58px;  animation-delay: -2.7s; }

@media (max-width: 899px) {
  /* A phone has no room beside the text, so the shapes sit above and below it
     instead, bleeding off the edges rather than crowding the headline. */
  .band { padding: 104px 0 92px; }
  .s-5 { display: none; }
  .s-1 { width: 64px; height: 64px; left: -16px; top: 16px;    bottom: auto; }
  .s-3 { width: 58px; height: 58px; right: -14px; top: 20px;   bottom: auto; }
  .s-2 { width: 46px; height: 46px; left: 6px;   top: auto; bottom: 22px; }
  .s-4 { width: 44px; height: 44px; right: 8px;  top: auto; bottom: 28px; }
}

/* The sticky bar has done its job by the time the band is on screen. */
.conversion-bar { transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.conversion-bar[data-yield="true"] { opacity: 0; transform: translateY(100%); pointer-events: none; }

/* Back to top ---------------------------------------------------------------
   Some of these pages run to twenty thousand pixels. The control appears once
   the reader is well past the first screen, and sits clear of the conversion
   bar rather than on top of it. */

.to-top {
  position: fixed; right: 20px; z-index: 55;
  bottom: calc(76px + 18px);            /* clears the conversion bar */
  width: 46px; height: 46px; border-radius: 999px;
  border: 1.5px solid var(--chrome-border);
  background: var(--white); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-md);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
              background var(--dur-fast) var(--ease);
}
.to-top[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--cream); }
.to-top:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* When the closing band is in view the conversion bar steps aside, so the
   button can drop with it rather than floating above empty space. */
.to-top[data-low="true"] { bottom: 18px; }

@media (max-width: 899px) {
  .to-top { right: 14px; width: 42px; height: 42px; bottom: calc(76px + 14px); }
  .to-top[data-low="true"] { bottom: 14px; }
}

/* ==========================================================================
   Reduced motion
   A blanket switch-off for anyone whose device asks for less movement. This
   sits last so it wins, and it means new animation can be added anywhere
   without having to remember the opt-out each time.
   ========================================================================== */

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


/* ── Sponsors & partnerships ────────────────────────────────────────────────
   A logo row, not a card grid. Each mark sits on its own tile so the two
   brands do not bleed into one another, and so the Labdoo wordmark — which
   is supplied white-on-transparent — gets the dark ground it was drawn for
   rather than being recoloured, which its brand rules would not allow.
   Appended after the reduced-motion block on purpose: that block is all
   !important, so nothing here overrides it. */

.partners__title {
  font-family: var(--display); font-weight: 600; font-size: 28px;
  line-height: 1.1; margin: 0 0 20px;
}
.partners {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;
}
.partners__item { margin: 0; }
.partners__logo {
  display: flex; align-items: center; justify-content: center;
  width: 272px; min-height: 104px; padding: 20px 28px;
  background: var(--white); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.partners__logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partners__logo--dark { background: var(--ink); }
.partners__logo img { display: block; max-width: 100%; height: auto; }

/* The homepage centres every section heading; the pathway and About pages set
   theirs flush left. One modifier rather than two components. */
.partners__title--centred { text-align: center; }
.partners--centred { justify-content: center; }

@media (max-width: 899px) {
  .partners { gap: 14px; }
  /* The item is the flex child, so it is the one that has to claim the row —
     width:100% on the tile alone resolves against a content-sized parent. */
  .partners__item { flex: 1 1 100%; }
  .partners__logo { width: 100%; }
}