/* ==========================================================================
   GCA — Global Continuum Academy
   Palette sampled from client screenshots:
     cream page bg   #F5F1E6
     header bg       #FAF9F4
     navy            #0E2136   (panels, footer text bg)
     navy darker     #081923   (footer)
     gold            #C89A44   (accents, buttons, numerals)
     teal            #2F6E6C   (eyebrows, links, CTA band)
     beige panel     #EDE5D8   (FAQ section)
   ========================================================================== */

:root {
  --cream: #FAF7EF;
  --header-bg: #FDFCF8;
  --navy: #0E2136;
  --navy-deep: #081923;
  --gold: #C89A44;
  --gold-deep: #B4863A;
  --teal: #2F6E6C;
  --teal-deep: #275C5A;
  --beige: #F1EBDF;
  --ink: #17222D;
  --ink-soft: #4B5661;
  --line: rgba(14, 33, 54, 0.12);
  --line-light: rgba(255, 255, 255, 0.14);
  --white: #FFFFFF;

  --serif: "Lora", "Iowan Old Style", "Georgia", serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;

  --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  margin: 0 0 0.5em;
  line-height: 1.15;
  font-weight: 600;
}

p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px;
}

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

/* ---------- Header ---------- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 56;
  /* Deliberately no backdrop-filter/transform/filter/will-change on this
     element itself — any of those would make it the "containing block"
     for the position:fixed mobile nav drawer nested inside it (see
     nav.main-nav below), which breaks the header's own position:sticky
     on scroll in Safari/iOS the moment the drawer is toggled. The frosted
     -glass look is applied on ::before instead — see the vibrancy-pass
     block further down. */
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: auto; height: 60px; }
.brand strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.brand small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
nav.main-nav { display: flex; align-items: center; gap: 28px; }
nav.main-nav a {
  font-size: 0.92rem;
  color: var(--navy);
  font-weight: 500;
}
nav.main-nav a:hover { color: var(--teal); }
.nav-cta {
  background: var(--navy);
  color: var(--white) !important;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
}
.nav-cta:hover { background: #0A1928; }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.94rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.button:active { transform: translateY(1px); }
.button.primary { background: var(--navy); color: var(--white); }
.button.primary:hover { background: #0A1928; }
.button.secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.button.secondary:hover { background: rgba(14,33,54,0.06); }
.button.gold { background: var(--gold); color: var(--navy-deep); }
.button.gold:hover { background: var(--gold-deep); }
.button.outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.button.outline-light:hover { background: rgba(255,255,255,0.08); }
.button.block { width: 100%; justify-content: center; }
.button.whatsapp { background: #25D366; color: #06331B; }
.button.whatsapp:hover { background: #1EBE59; }

/* ---------- Hero ---------- */
.hero { background: var(--cream); padding: 72px 0 56px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
}
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.hero-copy h1 {
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  max-width: 14ch;
}
.hero-copy h1 em { color: var(--teal); font-style: italic; }
.hero-lead { font-size: 1.05rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin: 22px 0 16px; flex-wrap: wrap; }
.microcopy { font-size: 0.83rem; color: var(--ink-soft); opacity: 0.85; }

.hero-panel {
  background: var(--navy);
  border-radius: 14px;
  padding: 34px 30px 30px;
  color: var(--white);
  position: relative;
}
.orbit-mark {
  position: absolute;
  top: -26px; right: 26px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 0.95rem;
  border: 4px solid var(--cream);
}
.panel-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 6px 0 18px;
}
.hero-panel ol { display: flex; flex-direction: column; }
.hero-panel li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-light);
}
.hero-panel li:first-child { border-top: none; padding-top: 0; }
.hero-panel li span { color: var(--gold); font-weight: 700; font-size: 0.85rem; }
.hero-panel li strong { display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.hero-panel li small { display: block; color: rgba(255,255,255,0.72); font-size: 0.85rem; margin-top: 2px; }

/* ---------- Proof strip ---------- */
.proof-strip { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.proof-grid p {
  margin: 0; padding: 26px 32px;
  border-left: 1px solid var(--line);
}
.proof-grid p:first-child { border-left: none; padding-left: 0; }
.proof-grid strong { display: block; font-family: var(--serif); color: var(--navy); font-size: 1.05rem; margin-bottom: 4px; }
.proof-grid span { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Dark section (central goal) ---------- */
.section-dark { background: var(--navy); color: var(--white); padding: 76px 0; }
.section-dark h2 { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.78); }
.goal-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
.goal-grid h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); max-width: 16ch; }
.goal-side { padding-top: 8px; }
.link-gold { color: var(--gold); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.link-gold:hover { text-decoration: underline; }

/* ---------- Pathway cards ---------- */
.pathways-section { padding: 64px 0 24px; }
.pathways-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--navy); }
.pathway-card {
  background: var(--navy);
  color: var(--white);
  padding: 34px 34px 30px;
  position: relative;
}
.pathway-card + .pathway-card { border-left: 1px solid var(--line-light); }
.pathway-card.highlighted { box-shadow: inset 0 3px 0 var(--gold); }
.pathway-badge {
  position: absolute; top: 26px; right: 26px;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  font-weight: 700;
}
.pathway-card .eyebrow { color: var(--gold); }
.pathway-card h3 { color: var(--white); font-size: 1.5rem; max-width: 20ch; }
.pathway-price { font-family: var(--serif); color: var(--gold); font-size: 1.6rem; margin: 6px 0 14px; }
.pathway-desc { color: rgba(255,255,255,0.78); max-width: 42ch; }
.pathway-features { margin: 18px 0 24px; }
.pathway-features li {
  padding: 11px 0;
  border-top: 1px solid var(--line-light);
  color: rgba(255,255,255,0.9);
  font-size: 0.93rem;
  display: flex; gap: 10px;
}
.pathway-features li::before { content: "•"; color: var(--gold); }
.pathways-note {
  border-left: 3px solid var(--gold);
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  padding: 20px 26px;
  font-size: 0.9rem;
  margin-top: 0;
}
.pathways-note-wrap { border: 1px solid var(--navy); border-top: none; }

/* ---------- Outcome / testimonial ---------- */
.outcome-section { padding: 72px 0; }
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.outcome-grid h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); max-width: 15ch; }
.testimonial-card {
  background: var(--white);
  border-left: 4px solid var(--gold);
  padding: 28px 30px;
  position: relative;
  box-shadow: 0 1px 3px rgba(14,33,54,0.06);
}
.testimonial-card .quote-mark { font-family: var(--serif); font-size: 2.6rem; color: var(--line); position: absolute; top: 8px; right: 20px; }
.testimonial-card blockquote { margin: 0 0 14px; font-family: var(--serif); font-size: 1.15rem; color: var(--navy); font-style: italic; }
.testimonial-card cite { font-style: normal; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.testimonial-caveat { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; }

.profiles-panel { background: var(--navy); color: var(--white); border-radius: 10px; padding: 26px 26px 8px; }
.profiles-panel .eyebrow { color: var(--teal); filter: brightness(1.6); }
.profiles-panel h3 { color: var(--white); font-size: 1.35rem; }
.profiles-panel > p { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.profiles-list li a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 4px;
  border-top: 1px solid var(--line-light);
  color: var(--white);
  font-size: 0.95rem;
}
.profiles-list li:last-child a { border-bottom: none; }
.profiles-list li a:hover { color: var(--gold); }

/* ---------- Wider continuum programme cards ---------- */
.continuum-section { padding: 72px 0; }
.continuum-head { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.continuum-head h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); max-width: 16ch; }
.programme-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); }
.programme-card { background: var(--white); padding: 32px; border: 1px solid var(--line); margin: -1px 0 0 -1px; }
.programme-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.programme-number { color: var(--teal); font-weight: 700; font-size: 0.85rem; }
.programme-price { font-weight: 700; font-size: 0.85rem; color: var(--navy); text-transform: uppercase; letter-spacing: 0.02em; }
.programme-card h3 { font-size: 1.3rem; }
.programme-features li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-soft);
  display: flex; gap: 8px;
}
.programme-features li::before { content: "•"; color: var(--gold); }
.programme-card .cta-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 20px; color: var(--teal); font-weight: 700; font-size: 0.92rem; }
.programme-card .cta-link:hover { text-decoration: underline; }

/* ---------- Our standard ---------- */
.standard-section { background: var(--navy); color: var(--white); padding: 0; }
.standard-grid { display: grid; grid-template-columns: 1fr 1fr; }
.standard-left { padding: 76px 48px 76px 0; }
.standard-left h2 { color: var(--white); font-size: clamp(2rem, 3.4vw, 2.6rem); }
.standard-left p { color: rgba(255,255,255,0.78); max-width: 40ch; }
.standard-right { border-left: 1px solid var(--line-light); }
.standard-item { padding: 30px 0 30px 40px; border-top: 1px solid var(--line-light); display: grid; grid-template-columns: 40px 1fr; gap: 6px; }
.standard-item:first-child { border-top: none; }
.standard-item .num { color: var(--gold); font-weight: 700; font-family: var(--serif); }
.standard-item h3 { color: var(--white); font-size: 1.15rem; margin-bottom: 6px; }
.standard-item p { color: rgba(255,255,255,0.75); font-size: 0.92rem; margin: 0; max-width: 42ch; }

/* ---------- How the pathway works ---------- */
.how-section { padding: 76px 0; }
.how-section .eyebrow { color: var(--teal); }
.how-section h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); max-width: 20ch; }
/* Steps are a sticky rail (numbered dots + a scroll-filled progress line)
   running down a single stacked list of steps — same structure on mobile
   and desktop, so the rail always has something real to track. */
.steps-body {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.steps-rail {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  height: fit-content;
}
.steps-rail-track {
  position: relative;
  width: 3px;
  height: 200px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.steps-rail-fill {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--gold), var(--teal));
  border-radius: 3px;
}
.steps-rail-tag {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}
.steps-grid { position: relative; display: flex; flex-direction: column; gap: 36px; }
.steps-grid::before {
  content: "";
  position: absolute;
  top: 17px; bottom: 17px; left: 17px;
  width: 2px;
  background: var(--line);
}
.step-item { position: relative; z-index: 1; display: grid; grid-template-columns: 34px 1fr; gap: 20px; align-items: start; }
.step-item .num {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--navy);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700;
}
.step-item h3 { font-size: 1.1rem; }
.step-item p { font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq-section { background: var(--beige); padding: 76px 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.faq-grid .eyebrow { color: var(--teal); }
.faq-grid h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 4px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: var(--teal); font-size: 1.3rem; font-family: var(--sans); flex-shrink: 0; margin-left: 16px; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 4px 22px; color: var(--ink-soft); max-width: 62ch; }
.faq-item .faq-answer a { color: var(--teal); font-weight: 600; text-decoration: underline; }

/* ---------- Next step / CTA band ---------- */
.cta-band { padding: 0 0 76px; }
.cta-inner {
  background: var(--teal);
  border-radius: 4px;
  padding: 48px 46px;
  display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap;
  color: var(--white);
}
.cta-inner .eyebrow { color: var(--gold); }
.cta-inner h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); max-width: 26ch; margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.7); padding: 56px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 34px; }
.footer-brand strong { display: block; font-family: var(--serif); color: var(--white); font-size: 1.05rem; }
.footer-brand span { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.footer-col h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 10px; font-family: var(--sans); font-weight: 700; }
.footer-col p { font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px; font-size: 0.82rem; flex-wrap: wrap; gap: 10px;
}
.footer-bottom a:hover { color: var(--white); }

/* ---------- Fees & Payment page ---------- */
.page-hero { background: var(--cream); padding: 56px 0 44px; }
.back-link { color: var(--teal); font-weight: 600; font-size: 0.9rem; display: inline-block; margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); max-width: 20ch; }
.page-hero p { max-width: 60ch; }

.fees-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; padding: 0 0 60px; align-items: start; }
.fee-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 26px;
  margin-bottom: 16px;
  display: flex; justify-content: space-between; gap: 20px; align-items: flex-start;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.fee-card:hover { box-shadow: 0 14px 32px rgba(14,33,54,0.1); transform: translateY(-2px); border-color: transparent; }
.fee-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.fee-card p { font-size: 0.9rem; margin: 0 0 10px; max-width: 56ch; }
.fee-card .cta-link { color: var(--teal); font-weight: 600; font-size: 0.85rem; display: inline-flex; gap: 5px; transition: gap .18s ease; }
.fee-card:hover .cta-link { gap: 9px; }
.fee-price { color: var(--teal); font-weight: 700; white-space: nowrap; font-size: 0.95rem; }

.checkout-panel { background: var(--navy); color: var(--white); border-radius: 6px; padding: 30px 28px; position: sticky; top: 100px; }
.checkout-panel .eyebrow { color: var(--gold); }
.checkout-panel h2 { color: var(--white); font-size: 1.6rem; }
.checkout-panel > p { color: rgba(255,255,255,0.78); font-size: 0.9rem; }
.checkout-steps { margin: 16px 0 20px; }
.checkout-steps li {
  padding: 9px 0 9px 26px;
  position: relative;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
  border-top: 1px solid var(--line-light);
}
.checkout-steps li:first-child { border-top: none; }
.checkout-steps li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.checkout-warning {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 16px 18px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
  border-radius: 4px;
}
.checkout-panel .fineprint { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 12px; }

.payment-accounts { margin-top: 40px; }
.account-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  padding: 22px 26px;
  margin-bottom: 16px;
}
.account-card h4 { font-family: var(--sans); font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.account-card .account-name { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.account-card pre {
  white-space: pre-wrap; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft);
  margin: 0 0 8px; background: none; padding: 0;
}
.account-card .note { font-size: 0.82rem; color: var(--teal); }

.info-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 60px; }
.info-box { background: var(--beige); border-left: 3px solid var(--gold); padding: 22px 24px; }
.info-box h4 { font-family: var(--serif); color: var(--navy); font-size: 1.05rem; margin-bottom: 8px; }
.info-box p { font-size: 0.88rem; margin: 0; }

/* ---------- WhatsApp floating button ---------- */
.wa-float {
  position: fixed;
  bottom: 22px; right: 22px;
  background: #25D366;
  color: #06331B;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 50;
  font-size: 1.6rem;
}
.wa-float:hover { transform: scale(1.05); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .goal-grid, .outcome-grid, .continuum-head, .standard-grid,
  .faq-grid, .fees-layout { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid p { border-left: none; border-top: 1px solid var(--line); padding-left: 0; }
  .proof-grid p:first-child { border-top: none; }
  .pathways-grid, .programme-grid { grid-template-columns: 1fr; }
  .pathway-card + .pathway-card { border-left: none; border-top: 1px solid var(--line-light); }
  .standard-left { padding: 56px 0; }
  .standard-right { border-left: none; border-top: 1px solid var(--line-light); }
  .standard-item { padding-left: 0; grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .checkout-panel { position: static; }
}

@media (max-width: 680px) {
  .shell { padding: 0 20px; }
  .nav-wrap { padding: 14px 20px; }
  .brand img { height: 46px; }
  .steps-body { grid-template-columns: 44px 1fr; gap: 22px; }
  .steps-rail { top: 76px; }
  .steps-rail-track { height: 140px; }
  .steps-rail-tag { font-size: 0.62rem; }
  .step-item { grid-template-columns: 30px 1fr; gap: 14px; }
  .step-item .num { width: 30px; height: 30px; font-size: 0.88rem; }
  .steps-grid::before { top: 15px; bottom: 15px; left: 15px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .fee-card { flex-direction: column; }
}

/* ==========================================================================
   Mobile header + hamburger — animated icon, full-height off-canvas drawer,
   scrim, staggered link entrance. Shares the same --grain/--ease/--shadow
   tokens as the rest of the vibrancy pass so it doesn't look bolted on.
   ========================================================================== */
.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(8, 25, 35, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
  z-index: 52;
}
.nav-scrim.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: opacity .3s var(--ease);
}
body.gca-nav-open { overflow: hidden; }

@media (max-width: 680px) {
  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 40px; height: 40px;
    background: none; border: none; padding: 0; cursor: pointer;
    position: relative; z-index: 60;
  }
  .nav-toggle span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--navy);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }
  .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Once the drawer is open the toggle sits on top of the dark navy panel,
     so the bars need to switch from navy to white or the "X" disappears
     against the drawer background. */
  .nav-toggle.is-active span { background: var(--white); }

  nav.main-nav {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 340px);
    padding: 104px 30px 40px; gap: 2px;
    background-image: var(--grain), linear-gradient(165deg, var(--navy), #0a1a2c);
    background-repeat: repeat, no-repeat;
    background-size: 160px 160px, cover;
    box-shadow: -24px 0 60px rgba(0,0,0,.28);
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    z-index: 55;
  }
  nav.main-nav.is-open { transform: translateX(0); }
  nav.main-nav a {
    width: 100%;
    padding: 15px 0;
    font-family: var(--serif);
    font-size: 1.2rem;
    color: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    opacity: 0; transform: translateX(16px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  nav.main-nav.is-open a { opacity: 1; transform: translateX(0); }
  nav.main-nav a:nth-child(1) { transition-delay: .06s; }
  nav.main-nav a:nth-child(2) { transition-delay: .11s; }
  nav.main-nav a:nth-child(3) { transition-delay: .16s; }
  nav.main-nav a:nth-child(4) { transition-delay: .21s; }
  nav.main-nav a:nth-child(5) { transition-delay: .26s; }
  nav.main-nav a:nth-child(6) { transition-delay: .31s; }
  nav.main-nav a::after { display: none; } /* skip the desktop underline-on-hover */
  nav.main-nav a.nav-cta {
    width: auto; margin-top: 18px; border-bottom: none;
    box-shadow: var(--shadow-gold);
  }
}

/* ==========================================================================
   Enrolment forms (added — forms/index.php, forms/form.php, forms/thank-you.php)
   ========================================================================== */

.form-banner {
  margin-top: 18px; background: var(--beige); border-left: 3px solid var(--gold);
  padding: 14px 18px; font-size: 0.92rem; color: var(--ink); max-width: 74ch;
}

/* Forms landing page */
.forms-list-section { padding: 10px 0 70px; }
.forms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.form-card {
  display: block; background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 26px 24px; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.form-card:hover { box-shadow: 0 10px 28px rgba(14,33,54,0.1); transform: translateY(-2px); }
.form-card .eyebrow { color: var(--teal); font-size: 0.78rem; }
.form-card h3 { font-size: 1.2rem; margin-bottom: 14px; }
.form-card-fees { margin-bottom: 16px; }
.form-card-fees li {
  display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem;
  color: var(--ink-soft); padding: 6px 0; border-top: 1px dashed var(--line);
}
.form-card-fees li:first-child { border-top: none; }
.form-card-fees strong { color: var(--navy); white-space: nowrap; }
.form-card .cta-link { color: var(--teal); font-weight: 600; font-size: 0.9rem; }

/* Form page */
.form-page { padding: 10px 0 80px; }
.form-shell { max-width: 820px; }
.form-alert {
  background: #FBEAE7; color: #9C3626; border: 1px solid #F1C7BF; border-radius: 6px;
  padding: 12px 16px; font-size: 0.9rem; margin-bottom: 20px;
}
.form-section {
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 26px 28px; margin-bottom: 20px;
}
.form-section h2 { font-size: 1.1rem; margin-bottom: 12px; }
.form-section h3 { font-size: 0.95rem; }
.form-section > p { font-size: 0.92rem; }

.bullet-list li {
  position: relative; padding-left: 20px; font-size: 0.92rem; color: var(--ink-soft);
  margin-bottom: 8px;
}
.bullet-list li::before { content: "•"; color: var(--gold); position: absolute; left: 0; font-weight: 700; }

.numbered-list { padding-left: 20px; list-style: decimal; }
.numbered-list li { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 8px; padding-left: 4px; }

/* Radio/checkbox option lists (programme + payment selection) */
.option-list { display: grid; gap: 12px; }
.option-item {
  display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 16px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.option-item:hover { border-color: var(--gold); }
.option-item input[type="radio"] { width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; }
.option-item .option-label { flex: 1; font-size: 0.92rem; color: var(--ink); }
.option-item .option-fee { font-family: var(--serif); color: var(--gold); font-weight: 600; white-space: nowrap; }
.option-list.compact .option-item { padding: 10px 14px; }
.option-item:has(input:checked) { border-color: var(--gold); background: rgba(200,154,68,0.06); }

/* Text fields */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; }
.field.field-wide { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 11px 13px; font: inherit; color: var(--ink);
  background: var(--cream); width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }
.field textarea { min-height: 90px; resize: vertical; }
.field.has-error input, .field.has-error textarea { border-color: #C1584B; }
.field-error { color: #9C3626; font-size: 0.8rem; margin-top: 5px; }

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

/* Consent checkboxes / radios */
.checkbox-row, .radio-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 0.9rem; color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.checkbox-row:first-of-type, .radio-row:first-of-type { border-top: none; }
.checkbox-row input, .radio-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; }
.checkbox-row.has-error { color: #9C3626; }

/* Honeypot — hidden from real visitors, present for bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.form-submit-row { text-align: center; padding: 10px 0 0; }
.form-submit-row .fineprint { max-width: 46ch; margin: 12px auto 0; text-align: center; }

/* Thank-you page */
.thank-you-hero { padding: 80px 0; }
.thank-you-actions { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ==========================================================================
   Forms — vibrancy pass (v2). Same palette throughout — only motion, depth,
   gradients built from the existing --gold/--teal/--navy/--cream variables,
   and richer interaction states are added. No new colours introduced.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .form-section, .form-card { opacity: 0; transform: translateY(18px); }
  .form-section.in-view, .form-card.in-view {
    animation: gcaRise .6s cubic-bezier(.22,.68,0,1.01) forwards;
  }
  @keyframes gcaRise { to { opacity: 1; transform: translateY(0); } }
}
/* In wizard mode the step itself already animates in (gcaStepIn above) —
   skip the separate per-section scroll-reveal so a step's sections don't
   flash invisible-then-fade every time you land on it. */
body.js-wizard .wizard-step .form-section { opacity: 1; transform: none; animation: none; }

/* Sticky scroll-progress bar along the very top of the viewport while
   filling out a form. Pure decoration + orientation cue — same two brand
   accent colours as everything else. */
.gca-progress-track {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 999;
  background: rgba(14,33,54,0.06); pointer-events: none;
}
.gca-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width .12s linear;
  box-shadow: 0 0 10px rgba(200,154,68,0.55);
}

/* ==========================================================================
   Step wizard — one group of questions per screen instead of one long
   scroll. Hidden by default (progressive enhancement): if JS never runs,
   .wizard-nav stays hidden and every .wizard-step is shown stacked, one
   after another, exactly like the old single long form.
   ========================================================================== */
.wizard-progress { display: none; }
body.js-wizard .wizard-progress { display: block; margin-bottom: 18px; }
.wizard-progress__current {
  font-family: var(--serif); font-weight: 600; color: var(--navy);
  font-size: 1rem; margin-bottom: 12px; text-align: center;
}
.wizard-dots {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 4px; list-style: none; padding: 0; margin: 0; counter-reset: none;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.wizard-dots__item {
  flex: 1 1 0; min-width: 64px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; cursor: pointer; opacity: 0.55; transition: opacity .2s ease;
  background: none; border: none; padding: 0;
}
.wizard-dots__item.is-done { opacity: 0.85; }
.wizard-dots__item.is-current { opacity: 1; }
.wizard-dots__item:hover { opacity: 0.9; }
.wizard-dots__item.is-locked { cursor: default; }
.wizard-dots__item.is-locked:hover { opacity: 0.55; }
.wizard-dots__num {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 0.85rem; color: var(--navy);
  background: var(--white); border: 2px solid var(--line); transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.wizard-dots__item.is-current .wizard-dots__num {
  border-color: var(--gold); background: linear-gradient(145deg, var(--gold), var(--teal)); color: var(--white);
  box-shadow: 0 4px 12px rgba(47,110,108,0.28);
}
.wizard-dots__item.is-done .wizard-dots__num { border-color: var(--teal); color: var(--teal); background: rgba(47,110,108,0.08); }
.wizard-dots__label { font-size: 0.72rem; color: var(--ink-soft); text-align: center; white-space: nowrap; }
.wizard-dots__item.is-current .wizard-dots__label { color: var(--navy); font-weight: 600; }
@media (max-width: 640px) {
  .wizard-dots__label { display: none; }
  .wizard-dots__item { min-width: 34px; }
}

/* Steps: hidden entirely until JS marks one active. Without JS this rule
   never applies, so every step just renders inline, stacked, as before. */
body.js-wizard .wizard-step { display: none; }
body.js-wizard .wizard-step.is-active {
  display: block; animation: gcaStepIn .35s cubic-bezier(.22,.68,0,1.01);
}
@keyframes gcaStepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  body.js-wizard .wizard-step.is-active { animation: none; }
}

.wizard-nav {
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  margin: 4px 0 24px;
}
body.js-wizard .wizard-nav { display: flex; }
.wizard-nav--final { justify-content: flex-start; }
.wizard-nav__back { flex: 0 0 auto; }
.wizard-nav__next { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 480px) {
  .wizard-nav .button { padding: 11px 18px; font-size: 0.9rem; }
}

/* Section numbering + left accent, using a CSS counter so no markup
   changes are required on any of the five forms. Resets per wizard step
   so a step with several read-only sections (overview/terms) numbers
   1, 2, 3 within itself rather than continuing a form-wide count. */
.wizard-step { counter-reset: gcasection; }
.form-section {
  position: relative; counter-increment: gcasection;
  overflow: hidden; padding-left: 84px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.form-section::before {
  content: counter(gcasection);
  position: absolute; left: 26px; top: 26px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: var(--white);
  background: linear-gradient(145deg, var(--gold), var(--teal));
  box-shadow: 0 4px 14px rgba(47,110,108,0.28);
}
.form-section::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--teal));
  opacity: 0; transition: opacity .25s ease;
}
.form-section:hover { box-shadow: 0 14px 34px rgba(14,33,54,0.09); }
.form-section:hover::after,
.form-section:focus-within::after { opacity: 1; }
.form-section:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,154,68,0.14), 0 14px 34px rgba(14,33,54,0.09);
}
@media (max-width: 640px) {
  .form-section { padding-left: 22px; padding-top: 66px; }
  .form-section::before { left: 20px; top: 20px; }
}

/* Fee pills — turn the plain fee text into a bolder gradient badge. */
.option-item .option-fee {
  background: linear-gradient(120deg, var(--gold), var(--gold-deep));
  color: var(--white); padding: 5px 12px; border-radius: 999px;
  font-size: 0.85rem; box-shadow: 0 3px 10px rgba(200,154,68,0.35);
  transition: transform .18s ease;
}

/* Option cards — richer selected state with a pop-in check badge. */
.option-item {
  position: relative; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.option-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,33,54,0.08); }
.option-item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, rgba(200,154,68,0.10), rgba(47,110,108,0.10));
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.option-item:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,154,68,0.16), 0 10px 24px rgba(14,33,54,0.10);
  transform: translateY(-2px);
}
.option-item:has(input:checked)::before { opacity: 1; }
.option-item:has(input:checked) .option-fee { transform: scale(1.06); }
.option-item::after {
  content: "✓"; position: absolute; right: 16px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--teal); color: var(--white); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.4); transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.option-list.compact .option-item::after { right: 14px; }
.option-item:has(input:checked)::after { opacity: 1; transform: scale(1); }
.option-list.compact .option-item .option-label { padding-right: 30px; }
.option-item .option-label { padding-right: 46px; display: block; }

/* Checkbox / radio consent rows — small lift + tint on check. */
.checkbox-row, .radio-row { transition: background .15s ease; border-radius: 6px; }
.checkbox-row:has(input:checked), .radio-row:has(input:checked) {
  background: rgba(200,154,68,0.07);
}

/* Inputs — glowing focus ring instead of a flat border colour swap. */
.field input:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(200,154,68,0.18);
}
.field { transition: transform .15s ease; }
.field:focus-within label { color: var(--gold-deep); }
.field label { transition: color .15s ease; }

/* Shake animation for a section JS flags as incomplete on submit attempt. */
@keyframes gcaShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.form-section.gca-shake { animation: gcaShake .5s; border-color: #C1584B; }

/* Submit button — sheen sweep on hover + loading state. */
.form-submit-row .button.gold {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--gold), var(--gold-deep));
  box-shadow: 0 10px 26px rgba(200,154,68,0.3);
}
.form-submit-row .button.gold::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
}
.form-submit-row .button.gold:hover::before { animation: gcaSheen 1s ease forwards; }
@keyframes gcaSheen { to { left: 130%; } }
.form-submit-row .button.gold[disabled] {
  opacity: 0.85; cursor: progress; pointer-events: none;
}
.form-submit-row .button.gold .gca-spinner {
  display: none; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff;
  animation: gcaSpin .7s linear infinite;
}
.form-submit-row .button.gold[disabled] .gca-spinner { display: inline-block; }
@keyframes gcaSpin { to { transform: rotate(360deg); } }

/* Sticky mobile CTA — quick access to submit without scrolling all the way. */
.gca-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
  background: var(--white); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(14,33,54,0.08);
  transform: translateY(110%); transition: transform .25s ease;
  display: none;
}
.gca-sticky-cta.is-visible { transform: translateY(0); }
.gca-sticky-cta .button { width: 100%; justify-content: center; }
@media (max-width: 760px) {
  .gca-sticky-cta { display: block; }
  .form-page { padding-bottom: 90px; }
}

/* Forms landing page — staggered entrance + livelier hover. */
.form-card {
  position: relative; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.form-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.form-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px rgba(14,33,54,0.14); }
.form-card:hover::before { transform: scaleX(1); }
.form-card .cta-link { display: inline-flex; align-items: center; gap: 6px; transition: gap .18s ease; }
.form-card:hover .cta-link { gap: 10px; }
.forms-grid .form-card:nth-child(1) { animation-delay: .05s; }
.forms-grid .form-card:nth-child(2) { animation-delay: .12s; }
.forms-grid .form-card:nth-child(3) { animation-delay: .19s; }
.forms-grid .form-card:nth-child(4) { animation-delay: .26s; }
.forms-grid .form-card:nth-child(5) { animation-delay: .33s; }

/* Thank-you page — celebratory check mark + confetti burst, brand colours only. */
.ty-check {
  width: 84px; height: 84px; margin: 0 auto 18px;
}
.ty-check circle {
  fill: none; stroke: var(--teal); stroke-width: 3;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: gcaDrawCircle .6s ease forwards;
}
.ty-check path {
  fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: gcaDrawCheck .35s .55s ease forwards;
}
@keyframes gcaDrawCircle { to { stroke-dashoffset: 0; } }
@keyframes gcaDrawCheck { to { stroke-dashoffset: 0; } }

.ty-confetti { position: relative; height: 0; }
.ty-confetti span {
  position: absolute; top: 0; left: 50%; width: 8px; height: 8px; border-radius: 2px;
  background: var(--gold); opacity: 0;
  animation: gcaConfetti 1.1s ease-out forwards;
}
.ty-confetti span:nth-child(odd) { background: var(--teal); }
.ty-confetti span:nth-child(3n) { background: var(--navy); border-radius: 50%; }
@keyframes gcaConfetti {
  0% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--tr)); }
}

.thank-you-actions .button.whatsapp {
  box-shadow: 0 0 0 rgba(37,211,102,0.4);
  animation: gcaPulse 2.2s ease-in-out 1.4s 3;
}
@keyframes gcaPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ==========================================================================
   Site-wide vibrancy pass — homepage, fees page, header & footer.
   Same palette only (--cream/--navy/--gold/--teal/--beige) — adds gradients,
   soft glass, gentle pattern backdrops, motion and rounder shapes so the
   whole site reads as premium, not just the forms.
   ========================================================================== */

:root {
  --gold-08: rgba(200, 154, 68, 0.08);
  --gold-14: rgba(200, 154, 68, 0.14);
  --teal-08: rgba(47, 110, 108, 0.08);
  --teal-14: rgba(47, 110, 108, 0.14);
  --navy-04: rgba(14, 33, 54, 0.04);
  --navy-08: rgba(14, 33, 54, 0.08);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Layered "soft" shadows: a tight low-opacity contact layer plus a wide,
     faint ambient layer, instead of one hard-edged shadow. Reads as soft
     depth rather than a flat drop-shadow. Tinted per surface (navy/gold/
     teal) rather than generic grey, so it stays inside the site's palette. */
  --shadow-sm: 0 1px 2px rgba(14,33,54,.05);
  --shadow-md: 0 2px 6px rgba(14,33,54,.05), 0 16px 32px -12px rgba(14,33,54,.14);
  --shadow-lg: 0 4px 12px rgba(14,33,54,.05), 0 32px 64px -20px rgba(14,33,54,.20);
  --shadow-gold: 0 2px 8px rgba(200,154,68,.12), 0 20px 42px -14px rgba(200,154,68,.35);
  --shadow-teal: 0 2px 8px rgba(47,110,108,.12), 0 20px 42px -14px rgba(47,110,108,.38);

  /* Fine film-grain noise, baked at ~5% alpha inside the SVG itself so it can be
     dropped in as a plain extra background layer — no blend-mode or stacking
     tricks needed. Cheap (one shared data URI, tiled 160px) and reads as a
     subtle editorial texture on the navy panels rather than a flat fill. */
  --grain: 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* Quiet page-wide backdrop: layered soft gradients + a faint dot grid,
   never competing with the cream page background. */
body {
  background:
    radial-gradient(760px 460px at 96% -10%, var(--gold-08), transparent 60%),
    radial-gradient(900px 540px at -10% 6%, var(--teal-08), transparent 55%),
    var(--cream);
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--navy-08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(1100px 700px at 20% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(1100px 700px at 20% 0%, #000 0%, transparent 72%);
  opacity: .5;
}

@keyframes gcaFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gcaFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes gcaGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,154,68,.35); } 50% { box-shadow: 0 0 0 10px rgba(200,154,68,0); } }

/* Header — soft glass on scroll, same navy/cream palette.
   The blur lives on ::before, NOT on .site-header itself — see the note
   on the base .site-header rule above for why (backdrop-filter on the
   sticky element would break its own stickiness on mobile once the nav
   drawer, which is position:fixed inside it, gets toggled). */
.site-header { background: transparent; }
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(250, 249, 244, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* No backdrop-filter support: fall back to a plain solid header instead
     of a see-through one with nothing blurred behind it. */
  .site-header::before { background: var(--header-bg); }
}
nav.main-nav a { position: relative; transition: color .18s var(--ease); }
nav.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: right .22s var(--ease);
}
nav.main-nav a:hover::after { right: 0; }
.nav-cta { box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Buttons — soft rounding, gradient fills, gentle lift + sheen */
.button { border-radius: 10px; position: relative; overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); }
.button.primary { background: linear-gradient(135deg, #16324f, var(--navy)); box-shadow: var(--shadow-md); }
.button.primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--shadow-lg); }
.button.gold { background: linear-gradient(135deg, #dab568, var(--gold)); box-shadow: var(--shadow-gold); }
.button.gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold), var(--shadow-lg); }
.button.secondary:hover { transform: translateY(-2px); }
.button.outline-light:hover { transform: translateY(-2px); }
.button::before {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.button:hover::before { animation: gcaSheenBtn .9s ease forwards; }
@keyframes gcaSheenBtn { to { left: 130%; } }

/* Hero */
.hero-panel {
  border-radius: 18px;
  background-image: var(--grain), linear-gradient(160deg, var(--navy) 0%, #123049 100%);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
  box-shadow: var(--shadow-lg);
  animation: gcaFadeUp .6s var(--ease) both;
}
.orbit-mark {
  background: linear-gradient(135deg, #dab568, var(--gold));
  box-shadow: var(--shadow-gold);
  animation: gcaFloat 7s var(--ease) infinite;
}
.hero-copy { animation: gcaFadeUp .55s var(--ease) both; }
.hero-panel li { transition: padding-left .2s var(--ease); }
.hero-panel li:hover { padding-left: 6px; }

/* Proof strip */
.proof-strip p { transition: transform .2s var(--ease); }
.proof-strip p:hover { transform: translateY(-2px); }

/* Dark / goal section — subtle gradient + glow instead of flat navy */
.section-dark {
  background-image: var(--grain),
              radial-gradient(900px 500px at 85% 0%, rgba(200,154,68,.14), transparent 60%),
              radial-gradient(700px 500px at 0% 100%, rgba(47,110,108,.22), transparent 55%),
              linear-gradient(180deg, var(--navy), #0a1a2c);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 160px 160px, auto, auto, auto;
}
.link-gold { transition: gap .2s var(--ease); }
.link-gold:hover { gap: 10px; }

/* Pathway cards */
.pathway-card {
  background-image: var(--grain), linear-gradient(160deg, var(--navy), #123049);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pathway-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pathway-card.highlighted { box-shadow: inset 0 3px 0 var(--gold), 0 0 40px -14px rgba(200,154,68,.45); }
.pathway-badge { background: linear-gradient(135deg, rgba(200,154,68,.35), rgba(255,255,255,.08)); }

/* Testimonial + profiles panel */
.testimonial-card { border-radius: 10px; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.profiles-panel {
  background-image: var(--grain), linear-gradient(165deg, var(--navy), #123049);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
  box-shadow: var(--shadow-lg);
}
.profiles-list li a { transition: gap .2s var(--ease), color .2s var(--ease); }
.profiles-list li a:hover { gap: 4px; }

/* Programme cards */
.programme-card { border-radius: 10px; overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.programme-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.programme-card .cta-link { transition: gap .2s var(--ease); }
.programme-card:hover .cta-link { gap: 10px; }

/* Cursor-tracked glow — a radial highlight that follows the pointer over the
   pathway/programme cards. --mx/--my are set from JS on mousemove (px,
   relative to the card); pure CSS/opacity fade otherwise, so it costs nothing
   until a pointer is actually over the card. Skipped on touch via the JS
   (hover:hover) guard, so no stale glow gets stuck after a tap. */
.pathway-card, .programme-card { position: relative; overflow: hidden; }
.pathway-card::before, .programme-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(200,154,68,.24), transparent 70%);
}
.programme-card::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(47,110,108,.14), transparent 70%);
}
.pathway-card:hover::before, .programme-card:hover::before { opacity: 1; }

/* Standard section — gradient number badges */
.standard-item .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #8a6a2e);
  color: var(--navy-deep); font-size: .95rem;
}

/* Steps — the sticky rail (built in the markup/base rules above) is the
   signature moment now: a gold→teal fill that grows with real scroll
   progress through the section, plus each step's numeral filling in solid
   gold as you pass it. .steps-body fades in on first scroll into view via
   the same reveal observer as the enrolment form; the rail fill itself is
   scroll-linked continuously by site.js, not a one-shot reveal. */
.steps-body { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.steps-body.in-view { opacity: 1; transform: translateY(0); }
.step-item .num { transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.step-item:hover .num { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px -10px rgba(200,154,68,.5); }
.step-item.is-active .num {
  background: linear-gradient(135deg, var(--gold), #8a6a2e);
  border-color: transparent;
  color: var(--navy-deep);
  box-shadow: 0 10px 22px -10px rgba(200,154,68,.55);
}

/* FAQ */
.faq-item summary .icon {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-08); transition: transform .3s var(--ease), background .2s var(--ease);
}
.faq-item[open] summary .icon { background: var(--gold-14); }
.faq-item .faq-answer { animation: gcaFadeUp .3s var(--ease); }

/* CTA band — gradient instead of flat teal */
.cta-inner {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep) 70%);
  box-shadow: var(--shadow-teal);
}

/* Footer */
.site-footer {
  background-image: var(--grain), linear-gradient(180deg, var(--navy-deep), #050e15);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
}
.footer-col h4, .footer-brand strong { position: relative; }

/* Our standard — was a flat navy fill; give it the same gradient + grain
   treatment as the other navy panels so the texture reads consistently
   wherever the panel appears, not just on cards. */
.standard-section {
  background-image: var(--grain), linear-gradient(160deg, var(--navy), #0a1a2c);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
}

/* WhatsApp float — soft breathing glow so it feels alive, not static */
.wa-float { animation: gcaGlow 2.6s ease-in-out infinite; transition: transform .2s var(--ease); }
.wa-float:hover { transform: scale(1.08); }

/* Fees page */
.fee-card { border-radius: 10px; }
.checkout-panel {
  border-radius: 12px;
  background-image: var(--grain), linear-gradient(165deg, var(--navy), #123049);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, cover;
  box-shadow: 0 24px 50px -22px rgba(14,33,54,.45);
}
.checkout-warning { border-radius: 8px; }
.account-card { border-radius: 8px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.account-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(14,33,54,.18); }
.info-box { border-radius: 8px; transition: transform .2s var(--ease); }
.info-box:hover { transform: translateY(-2px); }

/* Gentle entrance for the big section headers as the page loads */
.hero, .proof-strip, .section-dark, .pathways-section, .outcome-section,
.continuum-section, .standard-section, .how-section, .faq-section, .cta-band {
  animation: gcaFadeUp .5s var(--ease) both;
}