/* ============================================================
   Apex Speaking — brand system

   IDENTITY
   The mark is an apex: a peak with a smaller peak rising beneath
   it. That one shape is the whole visual language — it is the
   logo, the bullet on every section label, the divider between
   sections, the watermark, and the edge that cuts the dark band
   into the page. Nothing decorative appears that isn't derived
   from it.

   COLOUR
   One continuous background spans the entire page and shifts
   through a range of blue-white tints as you scroll, so sections
   never read as stacked blocks. Sections themselves are
   transparent — only the dark band interrupts, and it does so
   through an apex-shaped edge rather than a straight line.

   TYPE
   Bricolage Grotesque for display — a contemporary grotesque with
   slightly irregular terminals, so headlines have character
   without becoming decorative. Inter for text.
   Both self-hosted; the page makes no external requests.
   ============================================================ */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/display.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("fonts/text.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand blue, taken from the mark */
  --blue: #3b76f8;
  --blue-deep: #2455cf;
  --blue-soft: rgba(59, 118, 248, 0.08);

  /* the background range the page travels through */
  --tint-0: #ffffff;
  --tint-1: #f3f6fe;
  --tint-2: #eaf0fe;
  --ink-deep: #0a1020;

  --ink: #0f1524;
  --ink-2: #596071;
  --on-dark: #eef2fb;
  --on-dark-2: #939cb0;

  --line: rgba(15, 21, 36, 0.10);
  --line-dark: rgba(255, 255, 255, 0.14);

  --display: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --sans: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --maxw: 1140px;
  --radius: 18px;
  --peak: 88px;   /* height of the apex cut on the dark band */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--tint-0);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* one background for the whole document — scroll drives its colour */
.bg-layer {
  position: fixed; inset: 0; z-index: -2;
  background: var(--tint-0);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.032em;
}

.accent { color: var(--blue); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- film grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   MOTION — initial states
   ============================================================ */
.motion-ready [data-fade] { opacity: 0; }
.motion-ready [data-stagger] > * { opacity: 0; }
.motion-ready .mark-stroke { opacity: 0; }
.motion-ready .orb { opacity: 0; }
.motion-ready .flow-rule { transform: scaleX(0); }
.motion-ready .flow-mark { opacity: 0; }

.w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.w-i { display: inline-block; will-change: transform; }
.motion-ready .w-i { transform: translateY(110%); }

.magnetic, .card, .step, .pillar, .peak { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready [data-fade],
  .motion-ready [data-stagger] > * { opacity: 1; }
  .motion-ready .w-i { transform: none; }
  .motion-ready .orb { opacity: 0.55; }
  .motion-ready .flow-rule { transform: none; }
  .motion-ready .flow-mark { opacity: 1; }
  .cursor-glow { display: none !important; }
  .orb { animation: none !important; }
  .caret { display: none !important; }
  /* the bar still appears and hides, it just doesn't slide */
  .sticky-cta { transition: none; }
}

/* ---------- cursor glow ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  border-radius: 50%;
  pointer-events: none; z-index: 9998; opacity: 0;
  background: radial-gradient(circle, rgba(59, 118, 248, 0.13), transparent 66%);
  will-change: transform;
}

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 100; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--blue);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ============================================================
   NAV
   ============================================================ */
/* A floating pill rather than a full-width bar — the page background runs
   underneath it, which keeps the continuous-colour idea intact. */
.nav {
  position: sticky; top: 14px; z-index: 50;
  max-width: calc(var(--maxw) + 40px); margin: 14px auto 0; padding: 0 20px;
}
.nav-inner {
  padding: 0 12px 0 22px;
  height: 62px; display: flex; align-items: center; gap: 20px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(15, 21, 36, 0.07);
  border-radius: 980px;
  transition: box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.nav.scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 21, 36, 0.1);
  box-shadow: 0 12px 40px rgba(15, 21, 36, 0.09);
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-family: var(--display);
  font-size: 1.28rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink);
}
.wordmark em { font-style: normal; font-weight: 500; color: var(--blue); }
.mark { width: 23px; height: 23px; overflow: visible; }
.mark-fill { fill: var(--blue); }
.mark.big { width: 44px; height: 44px; margin: 0 auto 28px; }
.mark-stroke { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; }

/* logo left · links centred · CTA right */
.wordmark { flex: none; }
.nav-right { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 28px; }
.nav-links > a {
  text-decoration: none; font-size: 0.94rem; font-weight: 450; color: var(--ink-2);
  transition: color .25s ease; position: relative; white-space: nowrap;
}
.nav-links > a:not(.nav-cta) > span { position: relative; display: inline-block; }
.nav-links > a:not(.nav-cta) > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links > a:not(.nav-cta):hover { color: var(--ink); }
.nav-links > a:not(.nav-cta):hover > span::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav-cta {
  color: #fff !important; background: var(--blue); text-decoration: none;
  padding: 10px 20px; border-radius: 980px; font-weight: 500; font-size: 0.92rem;
  white-space: nowrap; transition: background .25s ease;
}
.nav-cta:hover { background: var(--blue-deep); }
.nav-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 26px 208px;
  text-align: center;
  /* pull the wash up behind the floating nav so the very top of the page
     carries colour instead of sitting on flat white */
  margin-top: -90px;
  padding-top: 186px;
}
/* colour that starts at the top edge of the document */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 720px;
  pointer-events: none;
  background:
    radial-gradient(1200px 560px at 50% -6%, rgba(59, 118, 248, 0.20), transparent 64%),
    linear-gradient(180deg, rgba(59, 118, 248, 0.10), rgba(59, 118, 248, 0) 460px);
}

/* announcement pill */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 8px 7px 14px; margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(59, 118, 248, 0.22);
  border-radius: 980px; text-decoration: none;
  font-size: 0.88rem; color: var(--ink-2); letter-spacing: -0.01em;
  transition: border-color .25s ease, background .25s ease;
}
.pill:hover { border-color: var(--blue); background: #fff; }
.pill strong { color: var(--ink); font-weight: 600; }
.pill-sub { color: var(--ink-2); }
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none;
  box-shadow: 0 0 0 4px rgba(59, 118, 248, 0.16);
}
.pill-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 0.74rem;
  transition: transform .25s ease;
}
.pill:hover .pill-arrow { transform: translateX(2px); }
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.orb-1 {
  width: 660px; height: 660px; top: -160px; left: 2%;
  background: radial-gradient(circle, rgba(59, 118, 248, 0.34), transparent 70%);
  animation: drift-1 26s ease-in-out infinite;
}
.orb-2 {
  width: 560px; height: 560px; top: -120px; right: 0%;
  background: radial-gradient(circle, rgba(120, 160, 255, 0.32), transparent 70%);
  animation: drift-2 32s ease-in-out infinite;
}
.orb-3 {
  width: 520px; height: 520px; top: 90px; left: 34%;
  background: radial-gradient(circle, rgba(59, 118, 248, 0.20), transparent 70%);
  animation: drift-3 38s ease-in-out infinite;
}
.aurora.paused .orb { animation-play-state: paused; }

@keyframes drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(90px, 60px, 0) scale(1.12); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-110px, 70px, 0) scale(1); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(70px, -60px, 0) scale(1.15); }
}

.hero-peaks { position: absolute; inset: auto 0 -10px 0; height: 330px; pointer-events: none; }
.hero-peaks svg { width: 100%; height: 100%; overflow: visible; }
.peak { fill: rgba(59, 118, 248, 0.05); }
.peak.p2 { fill: rgba(59, 118, 248, 0.08); }
.peak.p3 { fill: rgba(59, 118, 248, 0.04); }

.hero-inner { position: relative; max-width: 1000px; margin: 0 auto; }

.hero h1 {
  font-size: clamp(3.2rem, 7.6vw, 5.7rem);
  font-weight: 600; line-height: 0.95; letter-spacing: -0.042em;
  margin-bottom: 28px;
}

.lede {
  font-size: clamp(1.14rem, 1.55vw, 1.3rem); color: var(--ink-2);
  max-width: 650px; margin: 0 auto 42px; line-height: 1.6;
  letter-spacing: -0.012em;
}

.hero-actions { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.hero .kicker { justify-content: center; }
.hero .kicker::after { display: none; }

.scroll-hint {
  position: absolute; bottom: 48px; left: 50%; margin-left: -0.5px;
  width: 1px; height: 54px; overflow: hidden; background: rgba(15, 21, 36, 0.09);
}
.scroll-hint-line {
  display: block; width: 100%; height: 40%;
  background: linear-gradient(180deg, transparent, var(--blue));
}

/* ---------- section label: apex mark · label · rule ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
}
.kicker::before {
  content: ""; flex: none; width: 11px; height: 11px; background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
.kicker::after { content: ""; flex: 1; max-width: 90px; height: 1px; background: var(--line); }
/* the full label is too long for a phone; a shorter one swaps in below 720px */
.k-short { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font-weight: 500; font-size: 1.02rem; letter-spacing: -0.012em;
  padding: 14px 28px; border-radius: 980px;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.btn > span { display: inline-block; will-change: transform; }
.btn-lg { padding: 16px 34px; font-size: 1.08rem; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-secondary { color: var(--blue); border: 1px solid rgba(59, 118, 248, 0.32); }
.btn-secondary:hover { border-color: var(--blue); background: var(--blue-soft); }

/* ============================================================
   FLOW DIVIDER — the mark, carrying the eye between sections
   ============================================================ */
.flow {
  display: flex; align-items: center; gap: 20px;
  max-width: 620px; margin: 0 auto; padding: 0 26px;
}
.flow-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform-origin: 50% 50%;
}
.flow-mark { flex: none; width: 15px; height: 15px; }
.flow-mark path { fill: var(--blue); opacity: 0.65; }

/* ============================================================
   STRIP
   ============================================================ */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 34px 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.strip-item { display: flex; flex-direction: column; gap: 3px; }
.strip-item strong {
  font-family: var(--display); font-weight: 600; font-size: 1.26rem;
  letter-spacing: -0.03em; line-height: 1.15;
}
.strip-item span { font-size: 0.94rem; color: var(--ink-2); }

/* ============================================================
   SECTIONS — transparent, so the page background flows through
   ============================================================ */
/* overflow is clipped because the ghost watermark deliberately hangs off the
   right edge; without this it widens the document and adds a scrollbar */
.section { position: relative; padding: 124px 26px; overflow: hidden; }
.section-inner { position: relative; max-width: var(--maxw); margin: 0 auto; }
.section-inner.narrow { max-width: 740px; }

.section-head { margin-bottom: 66px; max-width: 700px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head.center .kicker::after { display: none; }
.section h2 { font-size: clamp(2.2rem, 4.3vw, 3.4rem); margin-bottom: 18px; }
.section-head .lede { margin-left: 0; margin-right: 0; max-width: 660px; margin-bottom: 0; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

.watermark {
  position: absolute; pointer-events: none; opacity: 0.045;
  width: 460px; right: -90px; top: 50%; transform: translateY(-50%);
}
.watermark path { fill: var(--blue); }

/* ---------- split layout ---------- */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 76px; align-items: start; }
.split-body p { margin-bottom: 20px; font-size: 1.1rem; line-height: 1.68; color: var(--ink-2); }
.split-body strong { color: var(--ink); font-weight: 600; }

.cred-list { list-style: none; margin-top: 32px; }
.cred-list li {
  position: relative; padding: 15px 0 15px 30px;
  border-top: 1px solid var(--line); font-size: 1.02rem;
}
.cred-list li::before {
  content: ""; position: absolute; left: 2px; top: 22px;
  width: 10px; height: 10px; background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card {
  position: relative; isolation: isolate; overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 40px 36px;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.spotlight::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(59, 118, 248, 0.10), transparent 65%);
  opacity: 0; transition: opacity .4s ease;
}
.spotlight:hover::before { opacity: 1; }
.card:hover { box-shadow: 0 22px 60px rgba(15, 21, 36, 0.09); border-color: rgba(59, 118, 248, 0.3); }
.card-num {
  font-family: var(--display); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.04em; color: var(--blue); display: block; margin-bottom: 16px;
}
.card h3 { font-size: 1.46rem; margin-bottom: 12px; }
.card p { color: var(--ink-2); font-size: 1.03rem; line-height: 1.64; }

/* ---------- courses ---------- */
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.course {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 34px 30px 28px;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.course:hover { box-shadow: 0 22px 60px rgba(15, 21, 36, 0.09); border-color: rgba(59, 118, 248, 0.3); }
.course-num {
  display: block; margin-bottom: 12px;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.06em; color: var(--blue);
}
.course h3 { font-size: 1.86rem; margin-bottom: 12px; }
.course-top p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.62; }

/* which formats a course runs in */
.course-formats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tag {
  font-size: 0.78rem; font-weight: 500; color: var(--blue);
  background: var(--blue-soft); border: 1px solid rgba(59, 118, 248, 0.18);
  padding: 6px 12px; border-radius: 980px;
}
.course-list { list-style: none; margin: 22px 0 24px; flex: 1; }
.course-list li {
  position: relative; padding: 9px 0 9px 24px;
  font-size: 0.97rem; border-top: 1px solid var(--line);
}
.course-list li::before {
  content: ""; position: absolute; left: 1px; top: 16px;
  width: 9px; height: 9px; background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
.course-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--ink-2);
}
.course-link {
  color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: opacity .2s ease;
}
.course-link:hover { opacity: 0.7; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 840px; }
.faq {
  border-top: 1px solid var(--line);
}
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -0.025em; color: var(--ink);
  transition: color .25s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.faq-icon {
  position: relative; flex: none; width: 18px; height: 18px;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--blue);
  transform: translate(-50%, -50%);
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-icon::before { width: 14px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 14px; }
.faq[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-body { padding: 0 0 26px; max-width: 680px; }
.faq-body p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.66; }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.member {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .35s ease, border-color .35s ease;
}
.member:hover { box-shadow: 0 22px 60px rgba(15, 21, 36, 0.09); border-color: rgba(59, 118, 248, 0.28); }

/* circular headshot over the brand's peak motif, so the panel isn't empty */
.member-figure {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 44px 0 38px;
  background:
    radial-gradient(200px 150px at 50% 46%, rgba(255, 255, 255, 0.75), transparent 70%),
    linear-gradient(160deg, rgba(59, 118, 248, 0.12), rgba(59, 118, 248, 0.03));
  border-bottom: 1px solid var(--line);
}
.member-peaks {
  position: absolute; inset: auto 0 0 0;
  width: 100%; height: 66%; display: block;
}
.member-peaks path { fill: rgba(59, 118, 248, 0.09); }
.member-peaks path:nth-child(2) { fill: rgba(59, 118, 248, 0.13); }

.member img {
  position: relative; z-index: 1;
  width: 200px; height: 200px; border-radius: 50%;
  object-fit: cover; display: block; border: 6px solid #fff;
  box-shadow: 0 14px 38px rgba(15, 21, 36, 0.16);
}

.member-body { padding: 30px 30px 32px; }
.member-body h3 { font-size: 1.5rem; margin-bottom: 4px; }
.member-role {
  font-size: 0.76rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 16px;
}
.member-about { color: var(--ink-2); font-size: 1rem; line-height: 1.65; margin-bottom: 22px; }
.member-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.member-list { list-style: none; }
.member-list li {
  position: relative; padding: 7px 0 7px 24px;
  font-size: 0.97rem; color: var(--ink-2);
}
.member-list li::before {
  content: ""; position: absolute; left: 1px; top: 14px;
  width: 9px; height: 9px; background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
/* italic text marks content still to be filled in */
.member em { color: var(--ink-2); opacity: .75; }

/* ---------- pillars ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar {
  position: relative; isolation: isolate; overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 36px 32px;
  transition: box-shadow .35s ease;
}
.pillar:hover { box-shadow: 0 22px 60px rgba(15, 21, 36, 0.09); }
.pillar h3 { font-size: 1.34rem; margin-bottom: 12px; }
.pillar h3::before {
  content: ""; display: block; width: 16px; height: 16px; margin-bottom: 16px;
  background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
.pillar p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.64; }

.note {
  margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 1.03rem; max-width: 660px;
}

/* ---------- steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius); padding: 40px 34px;
  transition: box-shadow .35s ease;
}
.step:hover { box-shadow: 0 22px 60px rgba(15, 21, 36, 0.09); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 1.06rem; margin-bottom: 22px;
}
.step h3 { font-size: 1.34rem; margin-bottom: 11px; }
.step p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.64; }

/* ---------- detail list ---------- */
.detail-list { margin-bottom: 40px; }
.detail-list > div {
  display: grid; grid-template-columns: 148px 1fr; gap: 22px;
  align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.detail-list > div:last-child { border-bottom: 1px solid var(--line); }
.detail-list dt {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
}
.detail-list dd { color: var(--ink-2); font-size: 1.06rem; line-height: 1.56; }

/* ============================================================
   QUOTE BAND — the mark cut into the page as an edge
   ============================================================ */
.quote-band {
  position: relative;
  background: var(--ink-deep);
  color: var(--on-dark);
  text-align: center;
  margin-top: calc(var(--peak) * -1);
  /* The notch only cuts the top edge at the sides; under the apex it cuts
     nothing. Compensating for much of it left the quote sitting low in the
     band, so the top clears the notch by a quarter of its height and the
     bottom carries slightly more, which reads as optically centred. */
  padding: calc(122px + var(--peak) * 0.25) 26px 146px;
  clip-path: polygon(0 var(--peak), 50% 0, 100% var(--peak), 100% 100%, 0 100%);
}
.quote-inner { will-change: transform; }
.quote-band blockquote p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  letter-spacing: -0.032em;
  max-width: 900px; margin: 0 auto 26px; line-height: 1.2;
}
.quote-band cite { font-style: normal; font-size: 0.98rem; color: var(--on-dark-2); }

.typeline { position: relative; }
.caret {
  display: none; width: 3px; height: 0.92em; margin-left: 4px;
  background: var(--blue); vertical-align: -0.12em; border-radius: 1px;
}
.typeline.typing .caret { display: inline-block; animation: blink 1s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding-bottom: 136px; }
.contact-actions { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.contact-mail { text-align: center; color: var(--ink-2); font-size: 1.02rem; }
.contact-mail a { color: var(--blue); font-weight: 500; text-decoration: none; }
.contact-mail a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   ENQUIRY MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }

.modal-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 16, 32, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative; width: 100%; max-width: 620px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--tint-0); border-radius: 26px;
  padding: 40px 40px 36px;
  box-shadow: 0 40px 100px rgba(10, 16, 32, 0.35);
  will-change: transform;
}

.modal-close {
  position: absolute; top: 18px; right: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  transition: background .2s ease;
}
.modal-close:hover { background: rgba(15, 21, 36, 0.06); }
.modal-close svg {
  width: 18px; height: 18px; fill: none;
  stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round;
}

.modal-head { text-align: center; margin-bottom: 28px; }
.modal-head .mark { width: 30px; height: 30px; margin: 0 auto 16px; }
.modal-head h2 { font-size: 2rem; margin-bottom: 10px; }
.modal-head p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; max-width: 420px; margin: 0 auto; }

/* ---------- form ---------- */
.enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* display:grid would otherwise beat the hidden attribute once the form is sent */
.enquiry[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  letter-spacing: -0.005em;
}
.field .opt { font-weight: 400; color: var(--ink-2); }

.field input, .field select, .field textarea {
  font: inherit; font-size: 0.98rem; color: var(--ink);
  background: var(--tint-1); border: 1px solid transparent;
  border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--tint-0);
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 118, 248, 0.16);
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23596071' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.field.invalid input, .field.invalid select {
  border-color: #d7263d; box-shadow: 0 0 0 3px rgba(215, 38, 61, 0.12);
}
.field-error { font-size: 0.8rem; color: #d7263d; }

.modal-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--line);
}
.form-note { color: var(--ink-2); font-size: 0.86rem; }
.send-error {
  flex-basis: 100%; margin-top: 4px;
  font-size: 0.9rem; line-height: 1.5; color: #d7263d;
}
.send-error a { color: #d7263d; font-weight: 600; }
.enquiry.sending { opacity: 0.6; pointer-events: none; }

/* ---------- sent confirmation ---------- */
.modal-done { position: relative; text-align: center; padding: 12px 0 4px; }
.modal-done[hidden] { display: none; }

/* the burst spills outside the card, so the panel stops clipping once sent */
.modal-panel.is-done { overflow: visible; }

/* confetti: mostly the apex mark in brand blues, with a few emoji mixed in */
.confetti { position: absolute; left: 50%; top: 30px; width: 0; height: 0; pointer-events: none; }
.confetti-bit {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px;
  will-change: transform, opacity;
}
.confetti-bit svg { width: 100%; height: 100%; }
.confetti-bit svg path { fill: currentColor; }
.confetti-bit.is-emoji { width: auto; height: auto; font-size: 18px; line-height: 1; }

.done-emoji { display: inline-block; will-change: transform; }
.done-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--blue-soft); margin-bottom: 20px;
}
.done-tick svg {
  width: 26px; height: 26px; fill: none;
  stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.modal-done h3 { font-size: 1.7rem; margin-bottom: 10px; }
.modal-done p {
  color: var(--ink-2); font-size: 1rem; line-height: 1.55;
  max-width: 380px; margin: 0 auto 24px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink-deep); color: var(--on-dark); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 76px 26px 40px; }

.footer-top {
  position: relative;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 44px;
  padding-bottom: 48px;
}
.footer-brand { max-width: 300px; }
.footer .wordmark.small { font-size: 1.24rem; color: var(--on-dark); margin-bottom: 14px; }
.footer-tag { color: var(--on-dark-2); font-size: 0.98rem; line-height: 1.55; margin-bottom: 22px; }

.socials { display: flex; gap: 10px; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  transition: background .25s ease, transform .25s ease;
}
.socials a:hover { background: var(--blue); transform: translateY(-2px); }
.socials svg {
  width: 18px; height: 18px; fill: none;
  stroke: var(--on-dark); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.footer-col h4 {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.footer-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.footer-col a {
  color: var(--on-dark-2); text-decoration: none; font-size: 0.97rem;
  transition: color .22s ease;
}
.footer-col a:hover { color: var(--on-dark); }
.footer-contact p { color: var(--on-dark-2); font-size: 0.97rem; line-height: 1.5; }
.footer-contact strong {
  display: block; color: var(--on-dark); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px;
}

.to-top {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background .25s ease, border-color .25s ease;
}
.to-top:hover { background: var(--blue); border-color: var(--blue); }
.to-top svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--on-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p { color: var(--on-dark-2); font-size: 0.88rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .nav-links { gap: 20px; }
  .nav-links > a { font-size: 0.88rem; }
  .watermark { display: none; }
}

@media (max-width: 980px) {
  .course-grid, .team-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .to-top { top: auto; bottom: 0; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .steps, .pillar-grid { grid-template-columns: 1fr; }
  .strip-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 720px) {
  :root { --peak: 52px; }
  body { font-size: 16px; }
  .section { padding: 74px 22px; }
  .card-grid { grid-template-columns: 1fr; }
  .detail-list > div { grid-template-columns: 1fr; gap: 5px; }
  .cursor-glow { display: none; }
  .scroll-hint { bottom: 28px; }
  .hero-actions, .contact-actions { gap: 14px; }

  /* ---- type: the desktop clamp floors are too large on a phone ---- */
  .hero h1 { font-size: 2.3rem; line-height: 1.03; letter-spacing: -0.035em; margin-bottom: 22px; }
  /* swap in the short label so it holds one line */
  .k-long { display: none; }
  .k-short { display: inline; }
  /* the desktop line breaks strand single words at this width — let it wrap */
  .hero h1 br, .section h2 br { display: none; }
  /* keep the announcement on one line, at a tappable height */
  .pill { white-space: nowrap; max-width: 100%; padding: 10px 9px 10px 16px; }
  .pill-sub { display: none; }
  .section h2 { font-size: 2rem; }
  .lede { font-size: 1.06rem; }
  .quote-band blockquote p { font-size: 1.5rem; }
  .course h3 { font-size: 1.6rem; }
  .faq summary { font-size: 1.08rem; padding: 20px 0; }
  .section-head { margin-bottom: 40px; }
  .split { gap: 32px; }

  /* The label wraps to two lines on a phone, which left the chevron
     stranded beside a block of text. Flow it inline with the words instead. */
  .kicker {
    display: block; margin-bottom: 16px;
    font-size: 0.7rem; letter-spacing: 0.11em;
  }
  .kicker::before { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; width: 9px; height: 9px; }
  .kicker::after { display: none; }

  /* the hero was running most of a screen tall with dead space under the
     buttons, so the peaks and the bottom padding both come down */
  .hero-peaks { height: 200px; }
  .scroll-hint { height: 38px; bottom: 22px; }
  .pill { margin-bottom: 24px; }

  /* strip: smaller type so the four items stop wrapping unevenly */
  .strip-inner { padding: 26px 22px; gap: 20px 16px; }
  .strip-item strong { font-size: 1.04rem; letter-spacing: -0.025em; }
  .strip-item span { font-size: 0.85rem; }

  /* modal fills more of a small screen and stacks to one column */
  .modal { padding: 0; align-items: flex-end; }
  .modal-panel {
    max-width: none; border-radius: 24px 24px 0 0;
    padding: 32px 22px 28px; max-height: 92vh;
  }
  .modal-head h2 { font-size: 1.7rem; }
  .enquiry { grid-template-columns: 1fr; }
  .modal-foot .btn { width: 100%; text-align: center; }

  /* ---- touch targets: everything tappable gets to ~44px ---- */
  .nav-cta { padding: 12px 18px; }
  .socials a { width: 44px; height: 44px; }
  .course-link { display: inline-block; padding: 11px 0; }
  .footer-col a { padding: 3px 0; }

  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; width: 44px; height: 44px;
    background: none; border: none; cursor: pointer; padding: 0;
  }
  .nav-toggle span {
    width: 22px; height: 1.5px; background: var(--ink);
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
  }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .nav { top: 10px; margin-top: 10px; padding: 0 14px; }
  .nav-inner { padding: 0 8px 0 16px; height: 58px; gap: 8px; }
  .nav-cta { font-size: 0.86rem; }
  .wordmark { font-size: 1.1rem; gap: 8px; }
  .mark { width: 20px; height: 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 34px; padding-bottom: 78px; }
  .footer-inner { padding: 60px 22px 34px; }
  .footer-bottom { justify-content: center; text-align: center; }
  /* clear the floating nav, which is ~78px tall including its offset */
  .hero { margin-top: -80px; padding: 148px 22px 84px; }

  .nav-links {
    position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--line); border-radius: 22px;
    padding: 8px 22px 18px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 15px 4px; font-size: 1.04rem; border-bottom: 1px solid var(--line); }
  .nav-links > a:last-child { border-bottom: none; }
  /* Enquire sits in the pill, not in the dropdown, so it takes no top margin
     — that margin used to push it out of the bar's vertical centre. */
  .nav-cta { padding: 11px 16px; }
}

/* ============================================================
   DOCUMENT PAGES (privacy, terms) + 404
   ============================================================ */
.doc-page .nav { position: sticky; }
.doc { padding: 150px 26px 110px; }
.doc-inner { max-width: 760px; margin: 0 auto; }

.crumbs { margin-bottom: 34px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs li { font-size: 0.9rem; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--blue); opacity: .5;
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); transform: rotate(90deg);
}
.crumbs a { color: var(--blue); text-decoration: none; font-weight: 500; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

.doc h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin-bottom: 12px; }
.doc-meta {
  font-size: 0.78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 34px;
}
.doc-lead {
  font-size: 1.14rem; line-height: 1.65; color: var(--ink-2);
  padding-bottom: 30px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.doc h2 {
  font-size: 1.42rem; margin: 42px 0 14px;
}
.doc p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.7; margin-bottom: 16px; }
.doc ul { list-style: none; margin: 0 0 18px; }
.doc ul li {
  position: relative; padding: 7px 0 7px 26px;
  color: var(--ink-2); font-size: 1.04rem; line-height: 1.6;
}
.doc ul li::before {
  content: ""; position: absolute; left: 1px; top: 15px;
  width: 9px; height: 9px; background: var(--blue);
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
}
.doc a { color: var(--blue); font-weight: 500; }

.doc-footer { margin-top: 0; }
.doc-footer .footer-bottom { border-top: none; padding-top: 0; }
.doc-footer .footer-bottom a { color: var(--on-dark-2); text-decoration: none; }
.doc-footer .footer-bottom a:hover { color: var(--on-dark); }

/* ---------- 404 ---------- */
.notfound {
  min-height: 76vh; display: flex; align-items: center; justify-content: center;
  padding: 140px 26px 90px; text-align: center;
}
.notfound-inner { max-width: 640px; }
.notfound-mark { width: 56px; height: 56px; margin: 0 auto 26px; }
.notfound-mark path { fill: var(--blue); }
.notfound .kicker { justify-content: center; }
.notfound .kicker::after { display: none; }
.notfound h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 20px; }
.notfound .lede { margin-bottom: 34px; }
.notfound .hero-actions { justify-content: center; margin-bottom: 44px; }
.notfound-links {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.notfound-links a {
  color: var(--ink-2); text-decoration: none; font-size: 0.96rem;
  transition: color .2s ease;
}
.notfound-links a:hover { color: var(--blue); }

/* ============================================================
   STICKY MOBILE CTA
   A persistent way to enquire without scrolling back up. Hidden
   on desktop, where the nav CTA is always visible anyway.
   ============================================================ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  /* driven by a class, not the JS animation loop, so the bar still works
     if Motion fails to load or frames are throttled */
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta .btn { display: block; width: 100%; text-align: center; padding: 15px 20px; }
.sticky-cta-note {
  display: block; text-align: center; margin-top: 7px;
  font-size: 0.78rem; color: var(--ink-2);
}

@media (max-width: 720px) {
  .sticky-cta { display: block; }
  /* keep the footer clear of the bar */
  .footer-inner { padding-bottom: 104px; }
  .doc { padding: 128px 22px 80px; }
  .doc h2 { font-size: 1.28rem; margin-top: 34px; }
  .notfound { padding: 120px 22px 70px; }
  .notfound .hero-actions .btn { width: 100%; text-align: center; }
}