/* ==========================================================================
   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;
  --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; }
.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-end;
  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(3, 1fr); gap: 28px; max-width: 660px; 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); }

.dots { display: flex; gap: 8px; margin: 0 0 22px; }
.dot {
  width: 9px; height: 9px; border-radius: 999px; background: var(--line-2);
  border: 0; padding: 0; cursor: pointer; transition: all .3s;
}
.dot[aria-current="true"] { 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;
  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 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  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; 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); }
.card-path__caret { 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 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 b { font-family: var(--display); font-weight: 700; font-size: 29px; color: var(--blue); display: block; }
.stat span { 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); }

/* --------------------------------------------------------------------------
   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; }
.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; }

/* --------------------------------------------------------------------------
   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; }

/* --------------------------------------------------------------------------
   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; gap: 22px; }
  /* 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; }
}

@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 { 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; }

.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; }

/* 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); }
.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;
  }
}