/* ==========================================================================
   People Skills Wales — design system
   Palette drawn from Welsh hillsides: pine, mist, gorse, heather, lichen.
   Motif: two overlapping circles — the space between two people.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
/* Metric-matched fallback reduces layout shift while the font loads */
@font-face { font-family: "Geist Fallback"; src: local("Arial"); size-adjust: 102%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

:root {
  /* colour: confident blues — royal blue and navy, with sunflower, raspberry, cyan and periwinkle accents.
     (Token names are historic: "pine" = primary blue, "lichen" = cyan, "sky" = periwinkle.) */
  --pine: #1E4FD8;
  --pine-2: #2F62EE;
  --pine-3: #0B1F4D;
  --mist: #F3F6FD;
  --paper: #FFFFFF;
  --ink: #0F1B33;
  --ink-2: #46526B;
  --gorse: #FFC72C;
  --gorse-2: #F5B400;
  --gorse-tint: #FFF4CC;
  --sun-text: #FFE08A;
  --heather: #E5427F;
  --heather-2: #B8235A;
  --heather-tint: #FDE6EF;
  --lichen: #A5E8F2;
  --lichen-2: #22B8CF;
  --lichen-tint: #E0F5FA;
  --sky: #7C8CFF;
  --sky-2: #3B4CC9;
  --sky-tint: #ECEEFF;
  --brand-grad: linear-gradient(100deg, var(--heather) 0%, #FF8A3D 50%, var(--gorse) 100%);
  /* shown wherever an image slot's file hasn't been added yet */
  --img-fallback: radial-gradient(circle at 78% 30%, rgba(229, 66, 127, .55), transparent 42%), radial-gradient(circle at 92% 70%, rgba(255, 199, 44, .45), transparent 38%), linear-gradient(135deg, #1E4FD8 0%, #0B1F4D 100%);
  --line: rgba(15, 27, 51, .13);
  --line-light: rgba(237, 241, 236, .18);
  --focus-ring: var(--heather-2);

  /* type */
  /* One modern family throughout: Geist. Headings get weight and tight tracking; body stays open. */
  --f-display: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  --t-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --t-2xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --t-3xl: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);

  /* space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, .6rem + 3vw, 3rem);
  --max: 1280px;

  /* shape: pill for actions (echoes the circle), small radius for surfaces */
  --r-pill: 999px;
  --r-card: 6px;
  --r-panel: 10px;
  --shadow-1: 0 1px 2px rgba(11, 31, 77, .06), 0 8px 24px -12px rgba(11, 31, 77, .18);
  --shadow-2: 0 24px 60px -24px rgba(11, 31, 77, .35);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;
}

/* --------------------------------------------------------------- reset/base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11";
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: var(--t-2xl); letter-spacing: -.035em; }
h3 { font-size: var(--t-lg); letter-spacing: -.025em; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gorse); color: var(--ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .75rem 1.25rem;
  background: var(--gorse); color: var(--ink); font-weight: 600; border-radius: var(--r-pill);
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }

/* --------------------------------------------------------------- sections */
.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist); }
.section--lichen { background: var(--lichen-tint); }
.section--sky { background: var(--sky-tint); }
.section--blush { background: var(--heather-tint); }
.section--sun { background: var(--gorse-tint); }
.section--sky .course-card, .section--blush .course-card, .section--sun .course-card, .section--lichen .course-card,
.section--sky .article-card, .section--blush .testimonial, .section--sky .testimonial { background: var(--paper); }
.section--pine { background: var(--pine); color: var(--mist); --focus-ring: var(--gorse); }
.section--pine h2, .section--pine h3 { color: #fff; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section-head h2 { margin-bottom: .35em; }
.section-head--split {
  max-width: none; display: grid; gap: var(--s-5); align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-8); }
  .section-head--split > :last-child { justify-self: end; max-width: 30rem; }
}
.section-lead { font-size: var(--t-md); color: var(--ink-2); line-height: 1.55; max-width: 40rem; }
.section--pine .section-lead { color: rgba(237, 241, 236, .82); }
.display-h { font-size: var(--t-3xl); letter-spacing: -.04em; line-height: .98; font-weight: 620; }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font-family: var(--f-body); font-weight: 600; font-size: var(--t-sm); letter-spacing: .005em;
  text-decoration: none; line-height: 1.2; cursor: pointer; text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { --btn-bg: var(--gorse); --btn-fg: var(--ink); }
.btn-primary:hover { --btn-bg: #FFD457; box-shadow: 0 10px 24px -12px rgba(255, 199, 44, .75); }
.btn-dark { --btn-bg: var(--pine); --btn-fg: #fff; }
.btn-dark:hover { --btn-bg: var(--pine-2); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(15, 27, 51, .35); }
.btn-ghost:hover { --btn-bd: var(--ink); }
.btn-ghost-light { --btn-bg: rgba(255, 255, 255, .04); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: #fff; }
.btn-sm { min-height: 42px; padding: .55rem 1.15rem; font-size: var(--t-sm); }
.btn-lg { min-height: 56px; padding: .9rem 1.85rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-text { background: none; border: 0; padding: .5rem 0; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.icon { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------- brand */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--pine); }
.logo-mark { width: 40px; height: 30px; color: var(--pine); flex: none; }
.brand-word { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.brand-wales { font-weight: 400; }
.brand--light, .brand--light .logo-mark { color: #fff; }

/* --------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease), color .35s var(--ease);
}
.header-inner { height: 76px; display: flex; align-items: center; gap: var(--s-5); position: relative; transition: height .35s var(--ease); }
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: .25rem; list-style: none; }
.primary-nav > ul > li > a {
  display: block; padding: .5rem .8rem; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500; position: relative; transition: background-color .2s var(--ease);
}
.primary-nav > ul > li > a:hover { background: rgba(15, 27, 51, .06); }
.primary-nav > ul > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--heather);
}
.header-cta { flex: none; }
.menu-toggle {
  display: none; margin-left: auto; align-items: center; gap: .6rem; background: none; border: 0;
  padding: .6rem .25rem .6rem .75rem; min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--t-sm);
}
.menu-toggle-icon { position: relative; width: 22px; height: 12px; }
.menu-toggle-icon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle-icon span:first-child { top: 0; }
.menu-toggle-icon span:last-child { top: 10px; }
.menu-open .menu-toggle-icon span:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .menu-toggle-icon span:last-child { top: 5px; transform: rotate(-45deg); }

/* header over dark hero: light text until scrolled */
.has-dark-hero .site-header:not(.is-scrolled) { color: #fff; --focus-ring: var(--gorse); }
.has-dark-hero .site-header:not(.is-scrolled) .brand,
.has-dark-hero .site-header:not(.is-scrolled) .logo-mark { color: #fff; }
.has-dark-hero .site-header:not(.is-scrolled) .primary-nav > ul > li > a:hover { background: rgba(255, 255, 255, .12); }
.site-header.is-scrolled .header-inner { height: 64px; }
.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.menu-open .site-header { background: var(--pine) !important; color: #fff !important; box-shadow: none !important; }
.menu-open .site-header .brand, .menu-open .site-header .logo-mark { color: #fff !important; }

@media (max-width: 1080px) {
  .primary-nav, .header-cta, .topbar { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-call { display: grid; }
}
@media (min-width: 1081px) { :root { --header-h: 114px; } }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--pine); color: #fff;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem; display: flex; flex-direction: column;
  overflow-y: auto; --focus-ring: var(--gorse);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-links { list-style: none; }
.mobile-menu-links li { border-bottom: 1px solid var(--line-light); }
.mobile-menu-links a {
  display: block; padding: .85rem 0; font-family: var(--f-display); font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 600; letter-spacing: -.025em; text-decoration: none;
}
.mobile-menu-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.mobile-menu-phone { display: inline-flex; align-items: center; gap: .6rem; justify-content: center; text-decoration: none; padding: .5rem; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.is-opening { animation: menu-in .4s var(--ease-out) both; }
  .mobile-menu.is-opening .mobile-menu-links li { animation: rise .5s var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 45ms); }
}
@keyframes menu-in { from { clip-path: circle(0 at calc(100% - 40px) 38px); } to { clip-path: circle(150% at calc(100% - 40px) 38px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- hero (home) */
.hero {
  position: relative; isolation: isolate; color: #fff; overflow: hidden;
  min-height: max(640px, min(100svh, 980px)); display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 3rem) 0 clamp(5rem, 4rem + 4vw, 7.5rem);
  background: var(--pine-3); --focus-ring: var(--gorse);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media picture, .hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-video.is-playing { opacity: 1; }
.hero-overlay { position: absolute; inset: 0; }
/* Duotone wash: brings any footage into the brand palette, then a gradient for legibility */
.hero-overlay::before { content: ""; position: absolute; inset: 0; background: var(--pine); mix-blend-mode: multiply; opacity: .5; }
.hero-overlay::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 31, 77, .88) 0%, rgba(11, 31, 77, .6) 45%, rgba(30, 79, 216, .1) 100%),
    linear-gradient(0deg, rgba(11, 31, 77, .75) 0%, rgba(11, 31, 77, 0) 45%);
}
.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.motif { position: absolute; overflow: visible; }
.motif-a { fill: var(--heather); fill-opacity: .2; stroke: var(--heather); stroke-opacity: .85; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.motif-b { fill: var(--gorse); fill-opacity: .14; stroke: var(--gorse); stroke-opacity: .8; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.motif-lens { opacity: .7; }
.motif--hero { width: min(64vw, 1000px); right: -14vw; top: 50%; translate: 0 -46%; }
@media (max-width: 760px) { .motif--hero { width: 150vw; right: -75vw; top: 30%; opacity: .7; } }
.hero-inner { position: relative; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-sm); font-weight: 500;
  color: rgba(255, 255, 255, .88); margin-bottom: 1.5rem;
}
.hero-kicker::before { content: ""; width: 26px; height: 14px; flex: none;
  background: radial-gradient(circle at 7px 7px, var(--heather) 6.5px, transparent 7px), radial-gradient(circle at 19px 7px, var(--gorse) 6.5px, transparent 7px); }
.hero-h1 {
  font-size: clamp(2.6rem, .9rem + 6.2vw, 7rem); line-height: .95; letter-spacing: -.045em;
  font-weight: 600; margin: 0 0 1.75rem; color: #fff; text-wrap: initial;
}
.hero-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-line > span { display: inline-block; }
.hero-lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; max-width: 36rem; color: rgba(255, 255, 255, .9); margin-bottom: 2.25rem; }
.video-toggle {
  position: absolute; right: var(--gutter); bottom: 1.5rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(11, 31, 77, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--r-pill);
  padding: .5rem .9rem; min-height: 40px; font-size: var(--t-xs); font-weight: 600; cursor: pointer; backdrop-filter: blur(6px);
}
.video-toggle[hidden] { display: none; }
.video-toggle .video-toggle-play { display: none; }
.video-toggle[aria-pressed="true"] .video-toggle-play { display: inline; }
.video-toggle[aria-pressed="true"] .video-toggle-pause { display: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 1.25rem; width: 44px; height: 56px; margin-left: -22px; display: grid; place-items: center; }
.scroll-cue-line { width: 1.5px; height: 40px; background: rgba(255, 255, 255, .3); position: relative; overflow: hidden; }
.scroll-cue-line::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-line > span { animation: line-up 1s var(--ease-out) both; }
  .js .hero-line:nth-child(2) > span { animation-delay: .12s; }
  .js .hero-line:nth-child(3) > span { animation-delay: .24s; }
  .js .hero-kicker, .js .hero-lead, .js .hero-ctas { animation: fade-up .9s var(--ease-out) both; }
  .js .hero-kicker { animation-delay: .0s; }
  .js .hero-lead { animation-delay: .45s; }
  .js .hero-ctas { animation-delay: .55s; }
  .js .motif--hero .motif-a { animation: circle-in-a 1.8s var(--ease-out) both .15s; }
  .js .motif--hero .motif-b { animation: circle-in-b 1.8s var(--ease-out) both .15s; }
  .js .motif--hero .motif-lens { animation: lens-in 1.2s var(--ease-out) both .9s; }
  .scroll-cue-line::after { animation: cue 2.2s var(--ease) infinite 1.2s; }
  @supports (animation-timeline: scroll()) {
    .hero-shapes { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero-inner { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  }
}
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes circle-in-a { from { opacity: 0; transform: translateX(-80px); } }
@keyframes circle-in-b { from { opacity: 0; transform: translateX(80px); } }
@keyframes lens-in { from { opacity: 0; } }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }
@keyframes drift { to { transform: translateY(-14vh); } }
@keyframes hero-out { to { transform: translateY(6vh); opacity: .35; } }

/* --------------------------------------------------------------- value strip */
.value-strip { background: var(--paper); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); border-bottom: 1px solid var(--line); }
.value-h { font-size: var(--t-xl); max-width: 30ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.025em; }
.strip-list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.strip-list li { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.25rem 0 0; border-top: 2px solid var(--pine); margin-right: 1.25rem; }
.strip-icon { width: 34px; height: 34px; color: var(--pine); margin-bottom: .75rem; stroke-width: 1.4; }
.strip-title { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.2; }
.strip-text { font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 1000px) { .strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } .strip-list li:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .strip-list { grid-template-columns: 1fr; row-gap: 1.25rem; } .strip-list li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .9rem; padding-top: 1rem; margin-right: 0; } .strip-icon { margin: 0; width: 30px; height: 30px; } .strip-text { flex-basis: 100%; padding-left: calc(30px + .9rem); } }

/* --------------------------------------------------------------- philosophy */
.phil-grid { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 6rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .phil-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .phil-lead { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.phil-big { font-size: var(--t-lg); font-family: var(--f-display); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; margin-top: 1.5rem; }
.phil-lead > p:last-child { font-size: var(--t-md); color: var(--ink-2); max-width: 34rem; }
.phil-list-intro { font-size: var(--t-md); color: var(--ink-2); margin-bottom: 1rem; }
.phil-list { list-style: none; counter-reset: none; }
.phil-list li {
  font-family: var(--f-display); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
  padding: .55em 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .6em;
}
.phil-list li:last-child { border-bottom: 1px solid var(--line); }
.phil-list li::before {
  content: ""; flex: none; width: .9em; height: .5em;
  background: radial-gradient(circle at 25% 50%, var(--heather) 48%, transparent 50%), radial-gradient(circle at 75% 50%, var(--lichen-2) 48%, transparent 50%);
  opacity: .9;
}
.real-work { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.real-work-h { font-size: var(--t-xl); margin-bottom: 1.75rem; }
.real-work-grid { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.real-work-grid p { margin: 0; padding-top: 1.25rem; border-top: 2px solid var(--pine); color: var(--ink-2); }
.real-work-grid strong { display: block; color: var(--ink); font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; margin-bottom: .35rem; letter-spacing: -.01em; }

/* --------------------------------------------------------------- course categories + cards */
[data-tone="lichen"] { --tone: var(--lichen-2); --tone-tint: var(--lichen-tint); --tone-ink: var(--pine); }
[data-tone="gorse"] { --tone: var(--gorse); --tone-tint: var(--gorse-tint); --tone-ink: var(--ink); }
[data-tone="heather"] { --tone: var(--heather); --tone-tint: var(--heather-tint); --tone-ink: #fff; }

.course-cat { display: grid; gap: 1.5rem 3rem; padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid var(--line); }
.course-cat:last-child { padding-bottom: 0; }
@media (min-width: 960px) {
  .course-cat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .course-cat-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.course-cat-dot { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: var(--tone); margin-bottom: 1rem; position: relative; }
.course-cat-dot::after { content: ""; position: absolute; left: 14px; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--tone); }
.course-cat-name { font-size: var(--t-xl); letter-spacing: -.025em; }
.course-cat-head p { color: var(--ink-2); max-width: 32rem; }
.course-cat-count { font-size: var(--t-sm); font-weight: 600; color: var(--ink) !important; }
.course-cat-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .course-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd one out spans the row as a wide card, so there's never an orphan gap */
  .course-cat-grid > .course-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
  .course-cat-grid > .course-card:last-child:nth-child(odd) .course-card-text { margin-bottom: 0; grid-column: 1; max-width: 46ch; }
  .course-cat-grid > .course-card:last-child:nth-child(odd) .course-card-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
}

.course-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: 210px; padding: 1.5rem 1.5rem 1.4rem; border-radius: var(--r-card);
  background: var(--mist); color: var(--ink); text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.section--mist .course-card { background: var(--paper); }
.course-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tone-tint);
  clip-path: circle(0% at calc(100% - 2.6rem) calc(100% - 2.5rem));
  transition: clip-path .6s var(--ease-out);
}
.course-card-cat { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-bottom: .75rem; display: flex; align-items: center; gap: .45rem; }
.course-card-cat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }
.course-card-title { font-size: 1.45rem; margin: 0 0 .5rem; letter-spacing: -.02em; padding-right: 1rem; }
.course-card-text { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 1.25rem; max-width: 32ch; }
.course-card-go {
  margin-top: auto; align-self: flex-end; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
}
.section--mist .course-card-go { background: var(--mist); }
.course-card-go .icon { transition: transform .35s var(--ease); }
.course-card:hover, .course-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-1); text-decoration: none; }
.course-card:hover::before, .course-card:focus-visible::before { clip-path: circle(150% at calc(100% - 2.6rem) calc(100% - 2.5rem)); }
.course-card:hover .course-card-go, .course-card:focus-visible .course-card-go { background: var(--tone); border-color: var(--tone); color: var(--tone-ink); }
.course-card:hover .course-card-go .icon, .course-card:focus-visible .course-card-go .icon { transform: translateX(3px); }
@media (hover: none) { .course-card-go { background: var(--tone) !important; border-color: var(--tone) !important; color: var(--tone-ink) !important; } }

.card-grid-2, .card-grid-3, .card-grid-4 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------- training finder */
.finder { overflow: hidden; }
.finder::before { content: ""; position: absolute; width: 520px; aspect-ratio: 1; border-radius: 50%; left: -260px; bottom: -260px; border: 1.5px solid var(--line-light); }
.finder-wrap { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 5rem); position: relative; }
@media (min-width: 1000px) { .finder-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .finder-results { grid-column: 2; } }
.finder-intro h2 { font-size: var(--t-2xl); }
.finder-form { display: grid; gap: 2rem; }
.finder-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.finder-step legend { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; color: #fff; margin-bottom: 1rem; padding: 0; letter-spacing: -.015em; }
.finder-q-num { display: block; font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; color: var(--sun-text); margin-bottom: .35rem; letter-spacing: .01em; }
.finder-hint { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 400; color: rgba(241, 248, 245, .86); margin-left: .35rem; }
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1.05rem; border-radius: var(--r-pill);
  border: 1.5px solid rgba(237, 241, 236, .55); color: var(--mist); font-weight: 500; font-size: var(--t-sm);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.chip:hover span { border-color: var(--mist); }
.chip input:checked + span { background: var(--gorse); border-color: var(--gorse); color: var(--ink); }
.chip input:checked + span::before { content: ""; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
.chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.chip-group--light .chip span { border-color: #7A8599; color: var(--ink); }
.chip-group--light .chip:hover span { border-color: var(--ink); }
.chip-group--light .chip input:checked + span { background: var(--pine); border-color: var(--pine); color: #fff; }
.finder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.finder-actions .btn-text { color: var(--mist); }
.finder-error { color: var(--gorse); font-weight: 600; margin: 0; }
.finder-results { outline: none; }
.finder-results[hidden] { display: none; }
.finder-results-h { color: #fff; font-size: var(--t-xl); margin-bottom: .4rem; }
.finder-results-sub { color: rgba(237, 241, 236, .8); margin-bottom: 1.5rem; }
.finder-results .card-grid-3 { margin-bottom: 1.75rem; }
.finder-results .course-card { background: var(--mist); }
.finder-match { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin: -.5rem 0 1rem; }
@media (prefers-reduced-motion: no-preference) { .finder-results.is-in .course-card { animation: rise .55s var(--ease-out) both; } .finder-results.is-in .course-card:nth-child(2) { animation-delay: .08s; } .finder-results.is-in .course-card:nth-child(3) { animation-delay: .16s; } }

/* --------------------------------------------------------------- delivery */
.delivery-split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .delivery-split { grid-template-columns: 1fr 1fr; } }
.delivery-panel { border-radius: var(--r-panel); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); display: flex; flex-direction: column; }
.delivery-panel--lichen { background: var(--lichen-tint); }
.delivery-panel--mist { background: var(--sky-tint); }
.delivery-panel .illo { width: 100%; max-width: 360px; height: auto; margin: 0 auto 2rem; }
.delivery-panel h3 { font-size: var(--t-xl); }
.delivery-panel .btn-row { margin-top: auto; padding-top: 1.5rem; }
.tick-list { list-style: none; display: grid; gap: .65rem; margin-bottom: 1rem; }
.tick-list li { display: flex; gap: .7rem; align-items: flex-start; }
.tick-list .icon { color: var(--pine); margin-top: .2em; width: 20px; height: 20px; stroke-width: 2.2; }
.section--pine .tick-list .icon { color: var(--gorse); }
.tick-list--plain li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.tick-list--plain li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--heather); margin-top: .55em; flex: none; }

/* --------------------------------------------------------------- why / stats / steps */
.why-top { display: grid; gap: 2.5rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: end; }
@media (min-width: 960px) { .why-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.why-top .display-h { margin: 0; font-size: var(--t-2xl); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 2px solid var(--pine); padding-top: .75rem; }
.stats dd { margin: 0 0 .35rem; font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: .9; letter-spacing: -.04em; color: var(--pine); font-variant-numeric: tabular-nums; }
.stats dt { font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; line-height: 1.35; }
.why-grid { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.why-item { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.why-item h3 { font-size: 1.3rem; margin-bottom: .45rem; }
.why-item p { color: var(--ink-2); margin: 0; }
.process { margin-top: clamp(3.5rem, 3rem + 3vw, 6rem); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); background: var(--pine); color: var(--mist); border-radius: var(--r-panel); --focus-ring: var(--gorse); }
.process-h { color: #fff; font-size: var(--t-xl); margin-bottom: 2rem; }
.steps { list-style: none; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); counter-reset: s; }
.steps li { position: relative; }
.steps h3 { font-size: 1.2rem; margin-bottom: .35rem; color: inherit; }
.process .steps h3 { color: #fff; }
.steps p { margin: 0; font-size: var(--t-sm); opacity: .85; }
.step-n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 1rem;
  background: var(--gorse); color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 1.1rem;
}
.steps--light .step-n { background: var(--pine); color: #fff; }
.steps--light p { color: var(--ink-2); opacity: 1; }
@media (min-width: 900px) {
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -.75rem; height: 1.5px; background: currentColor; opacity: .2; }
}

/* --------------------------------------------------------------- testimonials */
.testimonial-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.testimonial { margin: 0; padding: 2rem; background: var(--mist); border-radius: var(--r-card); display: flex; flex-direction: column; position: relative; }
.testimonial::before { content: ""; width: 42px; height: 24px; margin-bottom: 1.25rem; background: radial-gradient(circle at 12px 12px, var(--heather) 11px, transparent 11.5px), radial-gradient(circle at 30px 12px, var(--gorse) 11px, transparent 11.5px); }
.testimonial blockquote { margin: 0 0 1.5rem; }
.testimonial blockquote p { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.35; letter-spacing: -.01em; font-weight: 500; margin: 0; }
.testimonial figcaption { margin-top: auto; display: flex; flex-direction: column; font-size: var(--t-sm); }
.testimonial figcaption span { color: var(--ink-2); }
.testimonial.is-placeholder { outline: 1.5px dashed rgba(229, 66, 127, .55); outline-offset: -1.5px; }
.placeholder-flag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; line-height: 1.2;
  color: var(--heather-2); background: var(--heather-tint); padding: .35rem .65rem; border-radius: var(--r-pill); margin-bottom: 1rem;
}
.testimonial .placeholder-flag { position: absolute; top: 1.6rem; right: 1.25rem; margin: 0; max-width: 60%; }

/* --------------------------------------------------------------- locations */
.locations-head { display: grid; gap: 1rem 3rem; margin-bottom: 2.5rem; }
@media (min-width: 900px) { .locations-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .locations-head h2 { margin: 0; } .locations-head p { margin: 0; } }
.place-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: 2rem; }
.place-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none;
  padding: 1rem 0; border-bottom: 1.5px solid rgba(30, 79, 216, .25);
  font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; letter-spacing: -.025em;
}
.place-list .icon { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.place-list a:hover { border-color: var(--pine); }
.place-list a:hover .icon { transform: translateX(5px); }

/* --------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 2rem 4rem; }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.faq-head h2 { font-size: var(--t-2xl); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); position: relative; transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; background: currentColor; transition: transform .3s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--pine); border-color: var(--pine); color: #fff; }
.faq-item[open] .faq-icon::after { transform: rotate(0); }
.faq-item summary:hover .faq-icon { border-color: var(--ink); }
.faq-a { padding: 0 3rem 1.5rem 0; color: var(--ink-2); max-width: 48rem; }
.faq-a p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-a { animation: fade-up .35s var(--ease-out); } }

/* --------------------------------------------------------------- CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(5rem, 4rem + 6vw, 9rem); --focus-ring: var(--gorse); }
.cta-band--pine { background: var(--pine); color: #fff; }
.cta-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.motif--cta { width: min(70vw, 900px); right: -18vw; top: 50%; translate: 0 -50%; }
@media (max-width: 760px) { .motif--cta { width: 160vw; right: -90vw; opacity: .6; } }
.cta-inner { max-width: var(--max); }
.cta-h { font-size: var(--t-3xl); color: #fff; letter-spacing: -.042em; line-height: .98; max-width: 14ch; font-weight: 620; }
.cta-text { font-size: var(--t-md); max-width: 34rem; color: rgba(255, 255, 255, .86); margin-bottom: 2rem; }

.inline-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem 1.75rem; background: var(--gorse-tint); border-radius: var(--r-card); border-left: 4px solid var(--gorse); }
.inline-cta p { margin: 0; flex: 1 1 22rem; font-weight: 500; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--pine-3); color: rgba(237, 241, 236, .82); padding-block: clamp(4rem, 3rem + 4vw, 6.5rem) 2rem; font-size: var(--t-sm); --focus-ring: var(--gorse); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-light); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-tagline { font-family: var(--f-display); color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; margin-top: 2rem; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
@media (min-width: 900px) { .footer-contact { align-items: flex-start; padding-top: .5rem; } }
.footer-contact p { font-size: var(--t-base); max-width: 30rem; }
.footer-big-link { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: #fff; font-weight: 600; letter-spacing: -.015em; word-break: break-word; }
.footer-contact .btn { margin-top: 1.25rem; }
.footer-cols { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 3rem; }
@media (min-width: 900px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-cols ul { list-style: none; display: grid; gap: .45rem; }
.footer-h { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; color: #fff; letter-spacing: 0; margin-bottom: 1rem; }
.footer-social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.footer-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-light); }
.footer-social a:hover { background: rgba(255, 255, 255, .08); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--line-light); font-size: var(--t-xs); }
.footer-legal p { margin: 0; }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* --------------------------------------------------------------- page heroes */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(2.5rem, 2rem + 4vw, 5.5rem)) 0 clamp(3.5rem, 3rem + 3vw, 6rem); }
.page-hero--light { background: var(--mist); }
.page-hero--dark { background: var(--pine); color: #fff; --focus-ring: var(--gorse); }
.page-hero--dark .page-lead { color: rgba(255, 255, 255, .86); }
.page-hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero-shapes span { position: absolute; border-radius: 50%; width: clamp(240px, 30vw, 440px); aspect-ratio: 1; top: 22%; }
@media (max-width: 760px) { .page-hero-shapes span { top: auto; bottom: -45%; } }
.page-hero-shapes span:first-child { right: 6vw; border: 1.5px solid var(--heather); opacity: .45; }
.page-hero-shapes span:last-child { right: -6vw; background: var(--lichen); opacity: .55; mix-blend-mode: multiply; }
.page-hero--dark .page-hero-shapes span:first-child { border: 0; background: var(--heather); opacity: .42; }
.page-hero--dark .page-hero-shapes span:last-child { background: var(--gorse); opacity: .38; mix-blend-mode: screen; }
.page-h1 { font-size: var(--t-3xl); letter-spacing: -.042em; line-height: .98; font-weight: 620; max-width: 18ch; margin-bottom: 1.5rem; }
.page-lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; max-width: 42rem; color: var(--ink-2); margin-bottom: 2rem; }
.page-hero .btn-row { margin-top: .5rem; }

.breadcrumbs { margin-bottom: 1.75rem; font-size: var(--t-xs); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; }
.breadcrumbs li:not(:last-child)::after { content: "/"; opacity: .45; margin-left: .25rem; }
.breadcrumbs a { text-decoration: none; opacity: .8; padding: .35rem 0; }
.breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.breadcrumbs [aria-current] { opacity: .95; font-weight: 600; }

.jump-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.jump-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem; border-radius: var(--r-pill); background: var(--paper); text-decoration: none; font-weight: 600; font-size: var(--t-sm); border: 1px solid var(--line); }
.jump-link:hover { border-color: var(--ink); }
.jump-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); }

/* course hero */
.course-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--pine); color: #fff; padding: calc(var(--header-h) + clamp(2rem, 1.5rem + 3vw, 4.5rem)) 0 clamp(3.5rem, 3rem + 3vw, 5.5rem); --focus-ring: var(--gorse); }
.course-hero-shapes { position: absolute; inset: 0; z-index: -1; }
.course-hero-shapes span { position: absolute; border-radius: 50%; width: clamp(300px, 34vw, 520px); aspect-ratio: 1; bottom: -30%; }
.course-hero-shapes span:first-child { right: 12%; background: var(--tone); opacity: .4; }
.course-hero-shapes span:last-child { right: calc(12% - clamp(150px, 17vw, 260px)); border: 1.5px solid var(--tone); opacity: .6; }
@media (max-width: 999px) { .course-hero-shapes span { bottom: auto; top: -20%; } }
.course-hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .course-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 4rem; } }
.course-hero .page-lead { color: rgba(255, 255, 255, .86); }
.course-hero-cat { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--t-sm); margin-bottom: 1rem; }
.course-hero-cat .course-cat-dot { width: 16px; height: 16px; margin: 0; }
.course-hero-cat .course-cat-dot::after { width: 16px; height: 16px; left: 8px; }
.course-hero-cat a { text-decoration: none; margin-left: .5rem; }
.course-hero-cat a:hover { text-decoration: underline; }
.glance { background: rgba(255, 255, 255, .06); border: 1px solid var(--line-light); border-radius: var(--r-panel); padding: 1.5rem 1.5rem .75rem; backdrop-filter: blur(8px); }
.glance-h { font-family: var(--f-body); font-size: var(--t-sm); color: #fff; font-weight: 600; letter-spacing: 0; margin-bottom: .75rem; }
.glance dl { margin: 0; }
.glance div { padding: .75rem 0; border-top: 1px solid var(--line-light); }
.glance dt { font-size: var(--t-xs); color: var(--sun-text); font-weight: 600; margin-bottom: .15rem; }

.glance dd { margin: 0; font-size: var(--t-sm); line-height: 1.45; }

/* course body */
.course-layout { display: grid; gap: 3rem; padding-block: clamp(3.5rem, 3rem + 3vw, 6rem); }
@media (min-width: 1000px) { .course-layout { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(3rem, 2rem + 4vw, 7rem); } .course-side { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } }
@media (max-width: 999px) { .course-side .toc { display: none; } .course-side { order: 2; } }
.toc-h { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-bottom: .75rem; }
.toc ol { list-style: none; border-left: 1.5px solid var(--line); }
.toc a { display: block; padding: .4rem 0 .4rem 1rem; margin-left: -1.5px; border-left: 1.5px solid transparent; text-decoration: none; font-size: var(--t-sm); color: var(--ink-2); transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.is-active { color: var(--ink); border-color: var(--heather); }
.side-cta { margin-top: 2rem; padding: 1.5rem; background: var(--mist); border-radius: var(--r-card); }
.side-cta p { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.side-phone { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.course-body > section { padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); border-bottom: 1px solid var(--line); }
.course-body > section:last-child { border: 0; margin: 0; padding: 0; }
.course-body h2 { font-size: var(--t-xl); }
.course-body .inline-cta { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.course-body .faq { grid-template-columns: 1fr; }
.course-body .faq-head h2 { font-size: var(--t-xl); }
.prose { max-width: 42rem; }
.prose p, .prose li { font-size: 1.0625rem; line-height: 1.7; }
.prose > p:first-of-type { font-size: var(--t-md); }
.prose--light { color: rgba(237, 241, 236, .88); }
.bullet-grid { list-style: none; display: grid; gap: .25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.bullet-grid li { padding: .75rem 0 .75rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; }
.bullet-grid li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 8px; height: 8px; border-radius: 50%; background: var(--heather); }
.topic-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-chips li { padding: .5rem 1rem; border-radius: var(--r-pill); background: var(--mist); font-size: var(--t-sm); font-weight: 500; }
.benefit-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.benefit-col { padding: 1.5rem; border-radius: var(--r-card); background: var(--mist); }
.benefit-col:last-child { background: var(--lichen-tint); }
.benefit-col h3 { font-size: 1.2rem; }
.benefit-col .tick-list { margin: 0; }
.delivery-mini { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 1.5rem; }
.delivery-mini-item { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-card); }
.delivery-mini-item h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; }
.delivery-mini-item h3 .icon { width: 28px; height: 28px; color: var(--pine); }
.delivery-mini-item p { font-size: var(--t-sm); color: var(--ink-2); }
.loc-links { list-style: none; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.loc-links a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.loc-links a:hover { text-decoration: underline; }
.loc-links--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* location pages */
.loc-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .loc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5rem; } }
.loc-aside { background: var(--mist); border-radius: var(--r-panel); padding: 1.75rem; align-self: start; }
.loc-aside h3 { font-size: 1.25rem; }
.nearby { margin-top: 1.75rem; }
.nearby h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.nearby p { color: var(--ink-2); margin: 0; }
.three-up { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.three-up > div { padding-top: 1.5rem; border-top: 2px solid var(--pine); }
.three-up p { color: var(--ink-2); margin: 0; }
.big-icon { width: 40px; height: 40px; color: var(--pine); margin-bottom: 1rem; stroke-width: 1.4; }
.all-courses-inline { margin-top: 3.5rem; }
.all-courses-inline h3 { font-size: 1.2rem; }

/* generic layouts */
.two-up { display: grid; gap: 2.5rem 5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.two-up h2 { font-size: var(--t-xl); }
.split-illo { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .split-illo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.split-illo h2 { font-size: var(--t-2xl); }
.illo-frame { border-radius: var(--r-panel); padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.illo-frame--lichen { background: var(--lichen-tint); }
.illo-frame--mist { background: var(--sky-tint); }
.illo-frame .illo { width: 100%; height: auto; }
.points-grid { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 1100px) { .points-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .points-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.point { padding-top: 1.25rem; border-top: 2px solid var(--pine); }
.point h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.point p { color: var(--ink-2); margin: 0; font-size: var(--t-sm); }

/* about */
.about-intro { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .about-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; } }
.about-intro .display-h { font-size: var(--t-2xl); }
.trainer { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .trainer { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 5rem; } }
.placeholder-photo { aspect-ratio: 4 / 5; border-radius: var(--r-panel); background: linear-gradient(160deg, var(--lichen-tint), var(--mist)); position: relative; display: grid; place-items: center; outline: 1.5px dashed rgba(229, 66, 127, .5); outline-offset: -1.5px; }
.trainer-mark { width: 45%; height: auto; color: var(--pine); opacity: .9; }
.placeholder-photo .placeholder-flag { position: absolute; top: 1rem; left: 1rem; }
.placeholder-block { padding: 1.25rem 1.5rem; background: var(--heather-tint); border-radius: var(--r-card); color: var(--heather-2); border: 1.5px dashed rgba(229, 66, 127, .5); }
.wales-block .display-h { font-size: var(--t-2xl); }

/* contact */
.page-hero--contact .page-h1 { max-width: 16ch; }
.contact-section { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5rem; } .contact-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } }
.contact-form { display: grid; gap: 1.5rem; }
.form-grid { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 600; font-size: var(--t-sm); padding: 0; }
.field legend { margin-bottom: .6rem; }
.req { color: var(--heather-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: var(--r-card); border: 1.5px solid #7A8599;
  background: var(--paper); font-size: 1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313211F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.75rem; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 4px rgba(30, 79, 216, .14); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B42318; }
.field-error { color: #B42318; font-size: var(--t-sm); font-weight: 600; margin: 0; }
.field-error[hidden] { display: none; }
.form-alert { padding: 1rem 1.25rem; border-radius: var(--r-card); background: #FDECEA; color: #8A1C12; font-weight: 600; }
.form-alert[hidden] { display: none; }
.form-alert.is-info { background: var(--lichen-tint); color: var(--pine); }
.form-privacy { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.contact-form .btn { justify-self: start; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-card { background: var(--pine); color: #fff; border-radius: var(--r-panel); padding: 1.75rem; --focus-ring: var(--gorse); }
.contact-card h2, .contact-next h2 { font-size: 1.4rem; }
.contact-card h2 { color: #fff; }
.contact-list { list-style: none; display: grid; gap: .9rem; }
.contact-list li { display: flex; align-items: center; gap: .75rem; }
.contact-list .icon { color: var(--gorse); }
.contact-list a { font-weight: 600; text-decoration: none; word-break: break-word; }
.contact-list a:hover { text-decoration: underline; }
.contact-next { margin-top: 2rem; }
.next-steps { list-style: none; display: grid; gap: 1.25rem; }
.next-steps li { display: flex; gap: 1rem; }
.next-steps .step-n { width: 36px; height: 36px; font-size: .95rem; margin: 0; flex: none; background: var(--pine); color: #fff; }
.next-steps h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.next-steps p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.contact-area { margin-top: 2rem; font-size: var(--t-sm); color: var(--ink-2); }

/* resources */
.featured-article { margin-bottom: 1rem; }
.article-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.article-card { position: relative; padding: 1.75rem; background: var(--mist); border-radius: var(--r-card); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.section--mist .article-card { background: var(--paper); }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.article-card h3 { font-size: 1.35rem; }
.article-card h3 a { text-decoration: none; }
.article-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.article-card h3 a:focus-visible { outline: none; }
.article-card:has(a:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.article-card p { color: var(--ink-2); font-size: var(--t-sm); }
.article-card .article-meta { margin-top: auto; margin-bottom: 0; }
.article-card--big { background: var(--pine); color: #fff; padding: clamp(2rem, 1.5rem + 3vw, 4rem); min-height: 320px; --focus-ring: var(--gorse); }
.article-card--big h3 { font-size: var(--t-2xl); max-width: 20ch; letter-spacing: -.03em; color: #fff; }
.article-card--big p { color: rgba(255, 255, 255, .82); font-size: var(--t-md); max-width: 40rem; }
.article-card--big .article-meta { color: rgba(255, 255, 255, .75); }
.article-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; }

.article-head { background: var(--mist); padding: calc(var(--header-h) + clamp(2rem, 1.5rem + 3vw, 4.5rem)) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.article-h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); letter-spacing: -.038em; line-height: 1.04; font-weight: 620; }
.article-standfirst { font-size: var(--t-md); color: var(--ink-2); max-width: 40rem; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
@media (min-width: 1000px) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 5rem; } .article-side { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } }
@media (max-width: 999px) { .article-side .toc { background: var(--mist); padding: 1.25rem; border-radius: var(--r-card); } }
.article-body { max-width: 44rem; }
.article-body h2 { font-size: var(--t-xl); margin-top: 2.25em; }
.article-body h3 { font-size: 1.3rem; margin-top: 1.75em; }
.article-body ul, .article-body ol { padding-left: 1.25rem; margin-bottom: 1.25em; display: grid; gap: .5rem; }
.article-body li::marker { color: var(--heather); }
.article-body a { color: var(--pine); font-weight: 600; text-decoration-color: var(--heather); }
.callout { padding: 1.25rem 1.5rem; border-radius: var(--r-card); background: var(--lichen-tint); border-left: 4px solid var(--pine); margin: 1.75em 0; }
.callout p { margin: 0; font-size: 1.0625rem; }
.callout--warn { background: var(--gorse-tint); border-color: var(--gorse-2); }

/* cookie banner */
.cookie-banner { position: fixed; z-index: 120; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); max-width: 470px;
  padding: 1.5rem; background: var(--paper); color: var(--ink); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(11, 31, 77, .45), 0 0 0 1px var(--line);
  max-height: calc(100vh - 2rem); overflow-y: auto; --focus-ring: var(--heather-2);
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.cookie-banner.is-in { opacity: 1; transform: none; }
.cookie-banner[hidden] { display: none; }
.cookie-top { display: flex; gap: 1rem; align-items: flex-start; }
.cookie-mark { width: 48px; height: 48px; flex: none; }
@media (prefers-reduced-motion: no-preference) { .cookie-banner.is-in .cookie-mark { animation: cookie-wobble 1s var(--ease-out) .25s; } }
@keyframes cookie-wobble { 0% { transform: rotate(-25deg) scale(.6); } 60% { transform: rotate(8deg) scale(1.05); } 100% { transform: none; } }
.cookie-h { font-size: 1.25rem; margin: .1rem 0 .35rem; }
.cookie-text { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.cookie-text a { color: var(--ink); font-weight: 600; }
.cookie-prefs { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.cookie-prefs[hidden] { display: none; }
.cookie-pref { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.cookie-pref p { margin: 0; font-size: var(--t-xs); color: var(--ink-2); }
.cookie-pref .cookie-pref-h { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.cookie-switch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; border: 0; padding: 0; background: #A8B3C7; cursor: pointer; transition: background-color .25s var(--ease); }
.cookie-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-out); }
.cookie-switch[aria-checked="true"], .cookie-switch.is-locked { background: var(--pine); }
.cookie-switch[aria-checked="true"] span, .cookie-switch.is-locked span { transform: translateX(20px); }
.cookie-switch.is-locked { opacity: .55; cursor: default; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.cookie-actions .btn { flex: 1 1 auto; }
.cookie-manage { flex-basis: 100%; text-align: left; font-size: var(--t-sm); padding: .35rem 0; }
.cookie-actions [data-consent="save"] { flex-basis: 100%; }
.cookie-actions [hidden] { display: none; }
.footer-link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.footer-link-btn:hover { text-decoration: underline; color: #fff; }
@media (max-width: 520px) { .cookie-banner { left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); padding: 1.25rem; } }

/* --------------------------------------------------------------- reveal */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
  /* only content that starts below the first screen is hidden, so the page is complete at rest */
  .js [data-reveal].will-reveal:not(.is-visible) { opacity: 0; transform: translateY(14px); }
}

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

/* --------------------------------------------------------------- small screens */
@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .hero { align-items: flex-end; min-height: max(600px, 100svh); }
  .hero .btn-lg { width: 100%; }
  .hero-ctas { flex-direction: column; }
  .scroll-cue { display: none; }
  .video-toggle { bottom: .75rem; right: .75rem; }
  .stats { grid-template-columns: 1fr; }
  .stats div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 1rem; }
  .stats dd { font-size: 2.75rem; min-width: 3.5rem; }
  .faq-a { padding-right: 0; }
  .cta-h { font-size: clamp(2.4rem, 10vw, 3rem); }
  .page-h1 { font-size: clamp(2.4rem, 10.5vw, 3.2rem); }
  .btn-lg { width: 100%; }
  .page-hero .btn-row, .course-hero .btn-row, .cta-band .btn-row { flex-direction: column; }
}

@media print {
  .site-header, .mobile-menu, .hero-media, .cta-band, .site-footer, .cookie-banner, .finder { display: none !important; }
  body { color: #000; }
}

/* cards placed on dark sections keep dark text */
.section--pine .course-card-title, .section--pine .course-card h3 { color: var(--ink); }

/* ==========================================================================
   Header top bar, phone, courses dropdown
   ========================================================================== */
.topbar { height: 38px; overflow: hidden; font-size: var(--t-xs); border-bottom: 1px solid rgba(255, 255, 255, .14);
  transition: height .35s var(--ease), opacity .25s var(--ease), border-color .35s var(--ease); }
.topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.topbar-note { margin: 0; opacity: .88; }
.topbar-links { list-style: none; display: flex; gap: 1.5rem; }
.topbar-links a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-weight: 500; }
.topbar-links a:hover { text-decoration: underline; }
.topbar-links .icon { width: 15px; height: 15px; color: var(--gorse); }
.has-light-hero .site-header:not(.is-scrolled) .topbar { border-color: var(--line); }
.has-light-hero .site-header:not(.is-scrolled) .topbar-links .icon { color: var(--pine); }
.site-header.is-scrolled .topbar { height: 0; opacity: 0; border-color: transparent; }

.header-call { display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-left: auto;
  background: var(--gorse); color: var(--ink); flex: none; }
.header-call .icon { width: 20px; height: 20px; }
.header-call + .menu-toggle { margin-left: 0; }

.nav-dd { display: flex; align-items: center; }
.nav-dd-btn { display: grid; place-items: center; width: 26px; height: 32px; margin-left: -.35rem; padding: 0; border: 0;
  background: none; color: inherit; cursor: pointer; border-radius: 6px; }
.nav-dd-btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-dd.is-open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-btn:hover { background: rgba(127, 127, 127, .12); }
.dd-panel {
  position: absolute; top: calc(100% - 6px); left: 50%; width: min(1080px, calc(100vw - 2 * var(--gutter)));
  translate: -50% 0; color: var(--ink); background: var(--paper); border-radius: 16px; box-shadow: 0 30px 80px -30px rgba(11, 31, 77, .45), 0 0 0 1px var(--line);
  padding: 1.75rem; visibility: hidden; opacity: 0; transform: translateY(10px) scale(.985); transform-origin: 50% 0;
  transition: opacity .22s var(--ease), transform .3s var(--ease-out), visibility 0s linear .3s; --focus-ring: var(--heather-2);
}
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.nav-dd.is-open .dd-panel { visibility: visible; opacity: 1; transform: none; transition: opacity .22s var(--ease), transform .35s var(--ease-out), visibility 0s; }
.dd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); gap: 1.75rem; }
.dd-cat { display: flex; align-items: flex-end; gap: .5rem; min-height: 3.6em; font-weight: 600; font-size: var(--t-sm); line-height: 1.3; margin: 0 0 .75rem; padding-bottom: .75rem; border-bottom: 2px solid var(--tone); }
.dd-cat .dd-dot { margin-bottom: .3em; }
.dd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); flex: none; }
.dd-col ul { list-style: none; display: grid; gap: .1rem; }
.dd-col a { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; margin-inline: -.5rem; border-radius: 8px; text-decoration: none; font-size: var(--t-sm); font-weight: 500; transition: background-color .2s var(--ease), padding-left .25s var(--ease); }
.dd-col a::before { content: ""; width: 0; height: 2px; background: var(--tone); transition: width .25s var(--ease); }
.dd-col a:hover, .dd-col a:focus-visible { background: var(--mist); }
.dd-col a:hover::before, .dd-col a:focus-visible::before { width: 12px; }
.dd-aside { background: var(--gorse-tint); border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.dd-aside p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.dd-aside .dd-aside-h { font-size: 1.1rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.dd-all { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-sm); font-weight: 600; text-decoration: none; margin-top: auto; }
.dd-all .icon { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.dd-all:hover .icon { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .nav-dd.is-open .dd-col li { animation: rise .45s var(--ease-out) both; }
  .nav-dd.is-open .dd-col li:nth-child(2) { animation-delay: .03s; } .nav-dd.is-open .dd-col li:nth-child(3) { animation-delay: .06s; }
  .nav-dd.is-open .dd-col li:nth-child(4) { animation-delay: .09s; } .nav-dd.is-open .dd-col li:nth-child(5) { animation-delay: .12s; }
}

/* mobile courses accordion */
.m-dd details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: .85rem 0; font-family: var(--f-display); font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 600; letter-spacing: -.035em; }
.m-dd details summary::-webkit-details-marker { display: none; }
.m-dd-icon { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-light); position: relative; flex: none; }
.m-dd-icon::before, .m-dd-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; transition: transform .3s var(--ease); }
.m-dd-icon::after { transform: rotate(90deg); }
.m-dd details[open] .m-dd-icon::after { transform: rotate(0); }
.m-dd-body { padding: 0 0 1.25rem; }
.m-dd-cat { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 600; margin: 1rem 0 .35rem; color: var(--sun-text); }
.m-dd-body ul { list-style: none; }
.m-dd-body ul a { display: block; padding: .45rem 0; text-decoration: none; font-size: 1.05rem; opacity: .92; }
.m-dd-all { display: inline-flex; align-items: center; gap: .45rem; margin: 1rem 1.25rem 0 0; font-weight: 600; text-decoration: none; }
.m-dd-all .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .m-dd details[open] .m-dd-body { animation: fade-up .35s var(--ease-out); } }

/* ==========================================================================
   Contact page: phone card, four inboxes, form states
   ========================================================================== */
.contact-ways { padding-block: clamp(3rem, 2rem + 3vw, 5rem) clamp(3rem, 2rem + 3vw, 5rem); }
.ways-grid { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .ways-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.phone-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; background: var(--pine); color: #fff;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); display: flex; flex-direction: column; gap: 1rem; --focus-ring: var(--gorse); }
.phone-card-shapes { position: absolute; inset: 0; z-index: -1; }
.phone-card-shapes span { position: absolute; width: 300px; aspect-ratio: 1; border-radius: 50%; bottom: -130px; right: -60px; background: var(--heather); opacity: .55; }
.phone-card-shapes span:last-child { right: -200px; background: var(--gorse); opacity: .5; mix-blend-mode: screen; }
.phone-card-label, .phone-card-hours { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; }
.phone-card-label .icon, .phone-card-hours .icon { color: var(--gorse); }
.phone-card-number { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 3.75rem); font-weight: 650; letter-spacing: -.045em; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; }
.phone-card-number:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.phone-card-hours { font-weight: 500; opacity: .92; }
.phone-card-text { margin: auto 0 0; max-width: 32ch; color: rgba(255, 255, 255, .9); }
.email-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .email-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-tone="teal"] { --tone: var(--lichen-2); --tone-tint: var(--lichen-tint); --tone-ink: var(--pine); }
[data-tone="sun"] { --tone: var(--gorse); --tone-tint: var(--gorse-tint); --tone-ink: var(--ink); }
[data-tone="raspberry"] { --tone: var(--heather); --tone-tint: var(--heather-tint); --tone-ink: #fff; }
[data-tone="sky"] { --tone: var(--sky); --tone-tint: var(--sky-tint); --tone-ink: var(--ink); }
.email-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem; border-radius: 18px;
  background: var(--tone-tint); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.email-card::after { content: ""; position: absolute; width: 140px; aspect-ratio: 1; border-radius: 50%; right: -50px; top: -60px; background: var(--tone); opacity: .25; transition: transform .6s var(--ease-out); }
.email-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.email-card:hover::after { transform: scale(1.35); }
.email-card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); margin-bottom: .5rem; position: relative; z-index: 1; }
.email-card-icon .icon { width: 22px; height: 22px; }
.email-card h3 { font-size: 1.25rem; margin: 0; }
.email-card p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.email-card-foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.email-card-address { font-weight: 600; font-size: .98rem; text-decoration: none; overflow-wrap: anywhere; color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); }
.email-card-address:hover { background-size: 100% 1.5px; }
.copy-btn { flex: none; min-height: 36px; padding: .35rem .85rem; border-radius: var(--r-pill); border: 1.5px solid rgba(15, 27, 51, .25); background: rgba(255, 255, 255, .7);
  font-size: var(--t-xs); font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.copy-btn:hover { border-color: var(--ink); background: #fff; }
.copy-btn.is-copied { background: var(--pine); border-color: var(--pine); color: #fff; }

.contact-form-h { font-size: var(--t-xl); margin-bottom: .35rem; }
.contact-form-lead { color: var(--ink-2); margin-bottom: 1.75rem; }
.contact-section .contact-form-wrap { background: var(--paper); border-radius: 18px; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: var(--shadow-1); }
.btn-send { position: relative; }
.btn-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(15, 27, 51, .25); border-top-color: var(--ink); }
.btn-send.is-busy .btn-spinner { display: inline-block; animation: spin .7s linear infinite; }
.btn-send.is-busy { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { text-align: left; padding-block: 1rem; outline: none; }
.form-success[hidden] { display: none; }
.success-mark { width: 72px; height: 72px; margin-bottom: 1.25rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.success-mark circle { stroke: var(--lichen-2); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 0; }
.success-mark path { stroke: var(--pine); stroke-width: 4; stroke-dasharray: 36; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) .success-mark circle { animation: draw-c .7s var(--ease-out) both; }
  .form-success:not([hidden]) .success-mark path { animation: draw-p .45s var(--ease-out) .55s both; }
  .form-success:not([hidden]) > *:not(svg) { animation: fade-up .6s var(--ease-out) .35s both; }
}
@keyframes draw-c { from { stroke-dashoffset: 151; } }
@keyframes draw-p { from { stroke-dashoffset: 36; } }
.form-success-h { font-size: var(--t-xl); }
.form-success-small { font-size: var(--t-sm); color: var(--ink-2); }
.form-success.is-preview .form-success-h::before { content: "Preview: "; color: var(--heather-2); }
.contact-list--plain { list-style: none; margin-top: 1.5rem; }
.contact-list--plain li { display: flex; gap: .6rem; align-items: center; }

/* ==========================================================================
   Animation layer (all motion is skipped for reduced-motion users)
   ========================================================================== */
/* reading progress on articles */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 110; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--brand-grad); transform-origin: 0 50%; transform: scaleX(0); }

/* button shine + arrow nudge */
.btn-primary { overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); }
.btn { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:hover::after { transform: translateX(120%); transition: transform .75s var(--ease); }
  /* hero circles drift gently once they've arrived */
  .js .motif--hero .motif-a { animation: circle-in-a 1.8s var(--ease-out) both .15s, float-a 14s ease-in-out 2s infinite alternate; }
  .js .motif--hero .motif-b { animation: circle-in-b 1.8s var(--ease-out) both .15s, float-b 16s ease-in-out 2s infinite alternate; }
  .motif--cta .motif-a { animation: float-a 14s ease-in-out infinite alternate; }
  .motif--cta .motif-b { animation: float-b 16s ease-in-out infinite alternate; }
  .page-hero-shapes span:first-child, .course-hero-shapes span:first-child, .phone-card-shapes span:first-child { animation: bob 12s ease-in-out infinite alternate; }
  .page-hero-shapes span:last-child, .course-hero-shapes span:last-child, .phone-card-shapes span:last-child { animation: bob 15s ease-in-out infinite alternate-reverse; }
  .illo .talk-a { animation: talk-a 3.2s ease-in-out infinite alternate; }
  .illo .talk-b { animation: talk-b 3.2s ease-in-out infinite alternate; }
  .illo .tile-live { animation: pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  /* value strip icons draw themselves in */
  .js .strip-list li.will-reveal .strip-icon > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .strip-list li.will-reveal.is-visible .strip-icon > * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .25s; }
  /* richer reveals for cards and headings */
  /* cards flip up in 3D */
  .js .course-card[data-reveal].will-reveal:not(.is-visible),
  .js .email-card[data-reveal].will-reveal:not(.is-visible),
  .js .article-card[data-reveal].will-reveal:not(.is-visible),
  .js .testimonial[data-reveal].will-reveal:not(.is-visible),
  .js .why-item[data-reveal].will-reveal:not(.is-visible),
  .js .point[data-reveal].will-reveal:not(.is-visible),
  .js .delivery-panel[data-reveal].will-reveal:not(.is-visible) { transform: perspective(1200px) translateY(26px) rotateX(-7deg); }
  .js .course-card[data-reveal], .js .email-card[data-reveal], .js .article-card[data-reveal], .js .testimonial[data-reveal],
  .js .why-item[data-reveal], .js .point[data-reveal], .js .delivery-panel[data-reveal] {
    transform-origin: 50% 100%; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
  /* list rows sweep in from the side */
  .js .phil-list > li[data-reveal].will-reveal:not(.is-visible) { transform: translateX(24px); }
  .js .place-list > li[data-reveal].will-reveal:not(.is-visible),
  .js .faq-item[data-reveal].will-reveal:not(.is-visible),
  .js .bullet-grid > li[data-reveal].will-reveal:not(.is-visible) { transform: translateX(-18px); }
  .js .phil-list > li::before { transition: transform .8s var(--ease-out) calc(var(--d, 0ms) + .25s); }
  .js .phil-list > li.will-reveal:not(.is-visible)::before { transform: scale(.4); }
  /* numbers pop */
  .js .stats > div[data-reveal].will-reveal:not(.is-visible) dd { transform: scale(.85); }
  .js .stats > div dd { transition: transform .9s var(--ease-out) calc(var(--d, 0ms) + .15s); transform-origin: 0 100%; }
  /* the line between steps draws itself */
  .js .steps > li.will-reveal::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-out) calc(var(--d, 0ms) + .4s); }
  .js .steps > li.will-reveal.is-visible::after { transform: scaleX(1); }
  .js .steps > li .step-n { transition: transform .7s var(--ease-out) calc(var(--d, 0ms) + .1s); }
  .js .steps > li.will-reveal:not(.is-visible) .step-n { transform: scale(.6); }

  /* headings slide up word by word */
  [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; padding-right: .02em; }
  [data-split] .w > span { display: inline-block; transform: translateY(70%); opacity: 0;
    transition: transform .8s var(--ease-out) calc(var(--wi, 0) * 35ms + 60ms), opacity .6s var(--ease-out) calc(var(--wi, 0) * 35ms + 60ms); }
  [data-split].is-split-in .w > span { transform: none; opacity: 1; }

  /* statement text fills word by word (opacity set by script) */
  .fw { transition: opacity .25s linear; }

  /* brand-circle wipe sections: keep content painted, clip set by script */
  .has-wipe { will-change: clip-path; }

}
@keyframes float-a { to { transform: translate(-14px, 10px); } }
@keyframes float-b { to { transform: translate(14px, -9px); } }
@keyframes bob { to { transform: translate(-10px, 8px) scale(1.02); } }
@keyframes talk-a { to { transform: translateX(-4px); } }
@keyframes talk-b { to { transform: translateX(4px); } }
@keyframes pulse { 50% { transform: scale(1.025); } }

/* brighter accents */
.hero-kicker { color: #fff; }
.value-h { background: none; }
.stats dd { background: linear-gradient(100deg, var(--pine) 10%, var(--heather) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .stats dd { color: var(--pine); } }
.course-card-title, .finder-results-h { letter-spacing: -.025em; }


/* ==========================================================================
   Video behind every page hero (same footage as the home page)
   ========================================================================== */
.has-video { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--pine-3); --focus-ring: var(--gorse); }
.has-video .hero-overlay::after {
  background:
    linear-gradient(90deg, rgba(11, 31, 77, .9) 0%, rgba(11, 31, 77, .66) 50%, rgba(30, 79, 216, .25) 100%),
    linear-gradient(0deg, rgba(11, 31, 77, .7) 0%, rgba(11, 31, 77, 0) 55%);
}
.has-video .page-hero-shapes, .has-video .course-hero-shapes { z-index: -1; }
.has-video .video-toggle { bottom: 1rem; }
.page-hero.has-video .page-lead, .article-head.has-video .article-standfirst { color: rgba(255, 255, 255, .88); }
.article-head.has-video .article-h1 { color: #fff; }
.article-head.has-video .article-meta { color: rgba(255, 255, 255, .78); }
.article-head.has-video .page-hero-shapes span:first-child { right: 4vw; background: var(--heather); opacity: .35; border: 0; }
.article-head.has-video .page-hero-shapes span:last-child { right: -8vw; background: var(--gorse); opacity: .3; mix-blend-mode: screen; }
.page-hero.has-video .btn-ghost, .article-head.has-video .btn-ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55); }
.page-hero.has-video .btn-dark { --btn-bg: var(--gorse); --btn-fg: var(--ink); }
.page-hero.has-video .jump-link { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.page-hero.has-video .jump-link:hover { border-color: #fff; }
@media (max-width: 640px) { .has-video .video-toggle, .hero .video-toggle { bottom: .6rem; right: .6rem; min-height: 34px; padding: .35rem .75rem; font-size: .72rem; } }

/* ==========================================================================
   Team skills questionnaire (home page)
   ========================================================================== */
.check-wrap { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 1000px) { .check-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .check-intro { position: sticky; top: calc(var(--header-h) + 2rem); } }
.check-intro h2 { font-size: var(--t-2xl); }
.check-legend { list-style: none; display: grid; gap: .5rem; margin: 1.5rem 0; }
.check-legend li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: var(--t-sm); }
.check-note { font-size: var(--t-sm); color: var(--ink-2); }
.check-card { background: var(--paper); border-radius: 20px; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); box-shadow: 0 30px 70px -40px rgba(11, 31, 77, .45), 0 0 0 1px rgba(15, 27, 51, .06); min-height: 420px; }
.check-head { display: grid; gap: .6rem; margin-bottom: 2rem; }
.check-head[hidden] { display: none; }
.check-count { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.check-bar { height: 6px; border-radius: 99px; background: var(--mist); overflow: hidden; }
.check-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lichen-2), var(--gorse), var(--heather)); transition: width .5s var(--ease-out); }
.check-form[hidden] { display: none; }
.check-q { border: 0; margin: 0; padding: 0; min-width: 0; outline: none; }
.js .check-q[hidden] { display: none; }
.check-q legend { padding: 0; margin-bottom: 1.75rem; display: block; }
.check-cat { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: .75rem; }
.check-statement { display: block; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.check-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.check-opt { position: relative; cursor: pointer; }
.check-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.check-opt span.check-opt-label { display: block; }
.check-opt { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem .5rem; border-radius: 14px; border: 1.5px solid rgba(15, 27, 51, .16);
  text-align: center; font-size: var(--t-sm); font-weight: 500; line-height: 1.25; transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); }
.check-opt:hover { border-color: var(--ink); transform: translateY(-2px); }
.check-opt-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7A8599; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.check-opt:has(input:checked) { border-color: var(--tone); background: var(--tone-tint); }
.check-opt input:checked + .check-opt-dot { border-color: var(--pine); background: var(--pine); box-shadow: inset 0 0 0 4px #fff; }
.check-opt:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.check-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.check-nav .btn-text:disabled { opacity: .35; cursor: default; }
.check-nav .btn:disabled { opacity: .4; cursor: default; transform: none; }
@media (max-width: 640px) {
  .check-scale { grid-template-columns: 1fr; }
  .check-opt { flex-direction: row; justify-content: flex-start; padding: .85rem 1rem; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .check-q.is-current { animation: check-in .45s var(--ease-out); }
  .check-results.is-in > * { animation: fade-up .6s var(--ease-out) both; }
  .check-results.is-in > *:nth-child(2) { animation-delay: .08s; } .check-results.is-in > *:nth-child(3) { animation-delay: .16s; }
  .check-results.is-in > *:nth-child(4) { animation-delay: .24s; } .check-results.is-in > *:nth-child(5) { animation-delay: .32s; }
  .check-results.is-in .check-track span { animation: grow 1.1s var(--ease-out) .25s both; }
}
@keyframes check-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes grow { from { width: 0; } }
.check-results { outline: none; }
.check-results[hidden] { display: none; }
.check-results-h { font-size: var(--t-xl); margin-bottom: 1.25rem; }
.check-rows { list-style: none; display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.check-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .45rem; font-weight: 600; }
.check-row-score { display: inline-flex; align-items: center; gap: .6rem; font-variant-numeric: tabular-nums; }
.check-pill { font-size: var(--t-xs); font-weight: 600; padding: .2rem .6rem; border-radius: 99px; background: var(--tone-tint); color: var(--ink); }
.check-track { height: 12px; border-radius: 99px; background: var(--mist); overflow: hidden; }
.check-track span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--tone); }
.check-sub { font-size: 1.15rem; margin-bottom: 1rem; }
.check-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 1.75rem; }
@media (min-width: 700px) { .check-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check-cards .course-card { min-height: 180px; background: var(--mist); }
.check-cards .course-card-title { font-size: 1.2rem; }

/* ==========================================================================
   Course explainer diagrams
   ========================================================================== */
.explainer { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1100px) { .explainer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.diagram { margin: 0; background: var(--paper); border-radius: 20px; padding: clamp(.75rem, .5rem + 1.5vw, 1.75rem); box-shadow: 0 24px 60px -36px rgba(11, 31, 77, .35), 0 0 0 1px var(--line); --tone: var(--pine); }

.dg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--f-body); }
.dg text { fill: var(--ink); letter-spacing: -.01em; }
.dg .dg-note { fill: var(--ink-2); }
.dg .dg-axis-label { fill: var(--ink-2); }
.dg-axis { fill: none; stroke: #A8B3C7; stroke-width: 2; }
.dg-arrowhead { fill: #7A8599; }
.dg-track, .dg-line, .dg-link { fill: none; stroke: var(--dg-accent, var(--pine)); stroke-width: 4; stroke-linecap: round; }
.dg-link { stroke-width: 3; }
.dg-spectrum { fill: none; stroke-width: 12; stroke-linecap: round; }
.dg-chevron { fill: none; stroke: var(--dg-accent, var(--pine)); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-pill { fill: var(--paper); stroke: var(--dg-accent, var(--pine)); stroke-width: 2.5; transition: fill .35s var(--ease), stroke .35s var(--ease); }
.dg-dot { fill: var(--paper); stroke: var(--dg-accent, var(--pine)); stroke-width: 4; transition: fill .35s var(--ease), r .35s var(--ease); }
.dg-leader { fill: none; stroke: #A8B3C7; stroke-width: 1.5; stroke-dasharray: 4 4; }
.dg-zone { fill: var(--mist); }
.dg-center-text { fill: var(--ink-2) !important; }
.dg-step { fill: var(--mist); stroke: var(--dg-accent, var(--pine)); stroke-width: 2; transition: fill .35s var(--ease); }
.dg-step-n { fill: var(--dg-accent, var(--pine)) !important; }
.dg-cell { fill: var(--mist); stroke: var(--dg-accent, var(--pine)); stroke-width: 2; transition: fill .35s var(--ease); }
.dg-ring { stroke: #fff; stroke-width: 3; transition: opacity .35s var(--ease), filter .35s var(--ease); }
.dg-ring-0 { fill: var(--pine); } .dg-ring-1 { fill: var(--lichen-2); opacity: .75; } .dg-ring-2 { fill: var(--lichen); opacity: .6; }
.dg-node.is-key .dg-dot { fill: var(--dg-accent, var(--pine)); }
/* step highlight (driven by the key beside the diagram) */
.dg-node.is-active .dg-pill, .dg-node.is-active .dg-step, .dg-node.is-active .dg-cell { fill: var(--dg-accent, var(--pine)); }
.dg-node.is-active .dg-pill + text, .dg-node.is-active text { fill: #fff; }
.dg-node.is-active .dg-dot { fill: var(--dg-accent, var(--pine)); }
.curve-diagram .dg-node.is-active text, .spectrum-diagram .dg-node.is-active text, .matrix-diagram .dg-node.is-active text, .rings-diagram .dg-node.is-active text { fill: var(--dg-accent, var(--pine)); }
.dg-node.is-active.dg-ring { filter: brightness(1.12) saturate(1.2); opacity: 1; }
.dg-node.is-active .dg-step-n { fill: #fff !important; }
.diagram[data-tone="gorse"] .dg-node.is-active .dg-pill + text, .diagram[data-tone="gorse"] .dg-node.is-active .dg-cell + text,
.diagram[data-tone="gorse"] .dg-node.is-active .dg-step ~ text { fill: var(--ink); }
.diagram figcaption { font-size: var(--t-xs); color: var(--ink-2); margin-top: .5rem; text-align: center; }

.dg-key { list-style: none; display: grid; gap: .5rem; counter-reset: k; }
.dg-key li { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding: .9rem 1rem; border-radius: 14px; cursor: pointer;
  border: 1.5px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.dg-key li:hover { background: var(--mist); }
.dg-key li.is-active { background: var(--paper); border-color: var(--tone, var(--pine)); box-shadow: 0 10px 30px -20px rgba(11, 31, 77, .5); }
.dg-key-mark { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  background: var(--mist); color: var(--pine); transition: background-color .3s var(--ease), color .3s var(--ease); }
.dg-key li.is-active .dg-key-mark { background: var(--tone, var(--pine)); color: var(--tone-ink, #fff); }
.dg-key strong { font-size: 1.05rem; letter-spacing: -.015em; }
.dg-key span.dg-key-text { color: var(--ink-2); font-size: var(--t-sm); }
.dg-key button { all: unset; display: contents; }

@media (prefers-reduced-motion: no-preference) {
  .js .diagram.will-reveal .dg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .diagram.will-reveal.is-visible .dg-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
  .js .diagram.will-reveal .dg-node, .js .diagram.will-reveal .dg-chevron, .js .diagram.will-reveal .dg-center { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.7); }
  .js .diagram.will-reveal.is-visible .dg-node, .js .diagram.will-reveal.is-visible .dg-chevron, .js .diagram.will-reveal.is-visible .dg-center {
    opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.5s + var(--i, 0) * .18s); }
  .js .diagram.will-reveal.is-visible .dg-center { transition-delay: 1.4s; }
}


/* ==========================================================================
   Image slots (img/people-skills-wales-1.png … -15.png)
   ========================================================================== */
[data-img] { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--pine-3); }
.imgbg { position: relative; isolation: isolate; }
.imgbg--dark { color: #fff; padding-block: var(--section-y); --focus-ring: var(--gorse); }
.imgbg--dark::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 31, 77, .92) 0%, rgba(11, 31, 77, .78) 50%, rgba(11, 31, 77, .55) 100%); }
.imgbg--dark h2, .imgbg--dark h3 { color: #fff; }
.imgbg--dark .section-lead { color: rgba(255, 255, 255, .86); }
.img-panel { border-radius: 20px; aspect-ratio: 4 / 3; width: 100%; max-width: 100%; position: relative; overflow: hidden; }
.img-panel--wide { aspect-ratio: 21 / 9; }
.img-panel .illo { position: absolute; inset: 12%; width: 76%; height: 76%; }
.img-panel.has-img .illo, [data-img].has-img .trainer-initials { display: none; }
.img-slot-label { position: absolute; left: .75rem; bottom: .75rem; z-index: 3; padding: .3rem .6rem; border-radius: 8px; font: 600 .72rem/1.3 var(--f-body);
  background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); pointer-events: none; max-width: calc(100% - 1.5rem); }
[data-img] { position: relative; }

/* course page: signs, session, scenes, reading, trainer */
.explainer-section .section-head { max-width: 52rem; }
.signs-list { list-style: none; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.signs-list li { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 14px; background: var(--mist); font-weight: 500; }
.signs-list .icon { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--pine); color: #fff; stroke-width: 2.5; }
.session-steps { list-style: none; display: grid; gap: 0; counter-reset: s; position: relative; }
.session-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 1.1rem; padding-bottom: 1.5rem; }
.session-steps li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.session-steps li:last-child::before { display: none; }
.session-steps .step-n { grid-row: span 2; margin: 0; background: var(--pine); color: #fff; }
.session-steps h3 { font-size: 1.15rem; margin: .55rem 0 .25rem; }
.session-steps p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.scenes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.scene { border-radius: 18px; padding: 1.5rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.scene-when { font-weight: 600; font-size: 1.15rem; color: var(--sun-text); margin-bottom: .6rem; letter-spacing: -.015em; }
.scene-when::before { content: "When "; color: rgba(255, 255, 255, .7); font-weight: 500; }
.scene-now { margin: 0; color: rgba(255, 255, 255, .92); }
.reading-list { list-style: none; display: grid; gap: .5rem; }
.reading-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--mist);
  text-decoration: none; font-weight: 600; transition: background-color .25s var(--ease); }
.reading-list a:hover { background: var(--lichen-tint); }
.reading-list .icon { flex: none; transition: transform .25s var(--ease); }
.reading-list a:hover .icon { transform: translateX(4px); }
.trainer-card { display: flex; gap: 1rem; align-items: center; margin-top: 1.25rem; padding: 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.trainer-card-photo { flex: none; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.trainer-initials { color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.trainer-card-label { margin: 0; font-size: var(--t-xs); color: var(--ink-2); font-weight: 600; }
.trainer-card-name { margin: 0; font-weight: 650; font-size: 1.1rem; letter-spacing: -.02em; }
.trainer-card-name a { text-decoration: none; }
.trainer-card-name a:hover { text-decoration: underline; }
.trainer-card-text { margin: .15rem 0 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.4; }
.trainer-card .img-slot-label { display: none; }

/* slot placements */
.phil-img { margin-top: 2rem; aspect-ratio: 5 / 4; }
.delivery-panel .delivery-img { aspect-ratio: 16 / 10; margin-bottom: 1.75rem; }
.delivery-img, .illo-frame.img-panel { --img-fallback: linear-gradient(135deg, var(--sky-tint) 0%, var(--lichen-tint) 100%); }
.delivery-panel .delivery-img .illo { margin: 0; max-width: none; }
.illo-frame.img-panel { padding: 0; aspect-ratio: 5 / 4; }
.why-banner { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-radius: 20px; overflow: hidden; padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; min-height: 280px; }
.why-banner-text { margin: 0; max-width: 22ch; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.cta-band.imgbg::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11, 31, 77, .94) 0%, rgba(11, 31, 77, .8) 45%, rgba(30, 79, 216, .45) 100%); }
.locations.imgbg--dark .place-list a { color: #fff; border-color: rgba(255, 255, 255, .3); }
.locations.imgbg--dark .place-list a:hover { border-color: #fff; }
.locations.imgbg--dark .section-lead { color: rgba(255, 255, 255, .86); }
.check.imgbg--dark .check-intro, .check.imgbg--dark .check-intro h2 { color: #fff; }
.check.imgbg--dark .check-note, .check.imgbg--dark .section-lead { color: rgba(255, 255, 255, .86); }
.check.imgbg--dark .check-card { color: var(--ink); --focus-ring: var(--heather-2); }
.featured-article.imgbg { border-radius: var(--r-card); overflow: hidden; }
.featured-article.imgbg .article-card--big { background: linear-gradient(90deg, rgba(11, 31, 77, .94) 0%, rgba(11, 31, 77, .78) 55%, rgba(11, 31, 77, .45) 100%); min-height: 380px; }
.about-img { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.scenes-section .section-head { max-width: 44rem; }

/* trainer + profile */
.trainer-photo.img-panel { aspect-ratio: 4 / 5; display: grid; place-items: center; }
.trainer-initials--lg { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); letter-spacing: -.04em; opacity: .9; }
.trainer-lead { font-size: var(--t-md); font-weight: 500; }
.trainer-copy h2 { font-size: var(--t-2xl); }
.topic-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.topic-card { position: relative; overflow: hidden; padding: 1.75rem; border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.topic-card::after { content: ""; position: absolute; width: 160px; aspect-ratio: 1; border-radius: 50%; right: -60px; top: -70px; background: var(--tone); opacity: .22; }
.topic-card-dot { display: block; width: 40px; height: 22px; margin-bottom: 1.25rem;
  background: radial-gradient(circle at 11px 11px, var(--tone) 10px, transparent 10.5px), radial-gradient(circle at 29px 11px, var(--pine) 10px, transparent 10.5px); }
.topic-card h3 { font-size: 1.3rem; }
.topic-card p { margin: 0; color: var(--ink-2); }
.format-list { list-style: none; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.format-list li { padding: 1.5rem 1.5rem 1.5rem 0; border-top: 2px solid var(--pine); }
.format-list h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.format-list p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* "What you can expect from us" (shown until genuine testimonials are added) */
.promise-list { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.promise-list li { padding: 1.75rem; border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px rgba(15, 27, 51, .06); }
.promise-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pine); color: #fff; margin-bottom: 1.1rem; }
.promise-mark .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.promise-list h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.promise-list p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* Legal pages */
.legal .prose > p.legal-updated { font-size: var(--t-xs); color: var(--ink-2); margin-bottom: 1.5rem; }
.legal .prose h2 { scroll-margin-top: 6rem; }
.table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--line); line-height: 1.5; }
.table-wrap thead th { background: #EEF2FD; color: var(--pine-3); font-weight: 600; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; white-space: nowrap; }