@charset "UTF-8";
/* =========================================================
   SuperTech (STICS) — main stylesheet
   Compiles to main.css. CSS custom properties + color-mix();
   rem/em units (1px reserved for hairline borders).
   ========================================================= */
/* Foundation */
/* =========================================================
   Design tokens — CSS custom properties only (no SCSS vars).
   Few base colors; light/dark shades derived with color-mix().
   Units are rem/em (1px reserved for hairline borders).
   Brand: SuperTech (STICS) — Sora typeface, primary blue.
   ========================================================= */
:root {
  /* --- Base palette (kept intentionally small) --- */
  --color-primary: #093eaa; /* brand blue */
  --color-accent: #7090e2; /* lighter blue accent (on dark) */
  --color-sky: #33bbff; /* bright sky-blue accent (CTA icon tiles) */
  --color-ink: #101214; /* near-black text / footer bg */
  --color-muted: #5b6976; /* secondary text */
  --color-surface: #f5f7fa; /* tinted section background */
  --color-line: #e5e9ee; /* hairline borders */
  --color-white: #ffffff;
  --color-gold: #e8a83a; /* sparing warm accent (ratings) */
  --color-orange: #e8a83a; /* hero highlight accent */
  --color-wa: #25d366; /* WhatsApp green */
  --color-green: #1f9d6b; /* pass / positive result */
  --color-red: #d6453f; /* fail / negative result */
  /* --- Derived shades (color-mix, kept to a minimum) --- */
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 82%, #000);
  --color-primary-deep: color-mix(in srgb, var(--color-primary) 64%, #000);
  --color-ink-soft: color-mix(in srgb, var(--color-ink) 80%, var(--color-muted));
  --color-muted-soft: color-mix(in srgb, var(--color-muted) 68%, var(--color-white));
  --color-placeholder: color-mix(in srgb, var(--color-muted-soft) 80%, var(--color-white)); /* form/search placeholders: a touch lighter than muted-soft */
  --color-line-soft: color-mix(in srgb, var(--color-line) 55%, var(--color-white));
  --color-surface-2: color-mix(in srgb, var(--color-surface) 62%, var(--color-line));
  --color-tint: color-mix(in srgb, var(--color-primary) 8%, var(--color-white));
  --color-tint-2: color-mix(in srgb, var(--color-primary) 16%, var(--color-white));
  /* On-dark helpers (over ink / primary surfaces) */
  --on-dark: color-mix(in srgb, var(--color-white) 82%, transparent);
  --on-dark-soft: color-mix(in srgb, var(--color-white) 62%, transparent);
  --on-dark-faint: color-mix(in srgb, var(--color-white) 45%, transparent);
  --on-dark-line: color-mix(in srgb, var(--color-white) 12%, transparent);
  --on-dark-fill: color-mix(in srgb, var(--color-white) 7%, transparent);
  /* --- Typography --- */
  --font-base: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-base: 1rem;
  --lh-base: 1.6;
  /* fluid type scale */
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 4.4rem);
  --fs-h1: clamp(2.1rem, 1.55rem + 2.6vw, 3.1rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.9vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.22rem);
  --fs-eyebrow: 0.72rem;
  /* --- Radius --- */
  --r-sm: 0.5rem; /* 8px  */
  --r: 0.75rem; /* 12px */
  --r-lg: 1.125rem; /* 18px */
  --r-xl: 1.625rem; /* 26px */
  --r-pill: 62.5rem;
  /* --- Shadows (rem, tinted via color-mix) --- */
  --shadow-sm: 0 0.0625rem 0.125rem color-mix(in srgb, var(--color-ink) 6%, transparent),
  0 0.0625rem 0.1875rem color-mix(in srgb, var(--color-ink) 5%, transparent);
  --shadow: 0 0.375rem 1.125rem color-mix(in srgb, var(--color-ink) 7%, transparent),
  0 0.125rem 0.375rem color-mix(in srgb, var(--color-ink) 5%, transparent);
  --shadow-lg: 0 1.5rem 3.75rem -1.125rem color-mix(in srgb, var(--color-primary) 26%, transparent),
  0 0.625rem 1.5rem -0.75rem color-mix(in srgb, var(--color-ink) 13%, transparent);
  --shadow-primary: 0 0.875rem 1.875rem -0.625rem color-mix(in srgb, var(--color-primary) 45%, transparent);
  /* --- Layout --- */
  --container: 81rem; /* 1296px */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-py: clamp(3rem, 2rem + 4vw, 5rem); /* unified section vertical padding */
  --header-h: 4.75rem; /* 76px */
  --topbar-h: 2.375rem; /* 38px */
  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.2s var(--ease);
}

/* =========================================================
   Base reset, typography, layout helpers, utilities
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

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

/* Scroll lock for overlays (search modal / mobile drawer / video lightbox).
   Removing the scrollbar would let the page + pinned header jump sideways by the
   scrollbar's width, so we pad that exact width back in. assets/js/main.js
   (lockScroll) measures the scrollbar BEFORE locking and sets --sbw. */
html.no-scroll, body.no-scroll {
  overflow: hidden;
}

html.no-scroll {
  padding-right: var(--sbw, 0px);
}

/* Freeze the page exactly where it is while an overlay is open. JS sets --lock-top
   to -scrollY; fixing body here keeps the content visually still (no jump) and stops
   the browser clamping scrollTop to 0, which would also flip the header's is-scrolled
   state. The scrollbar-width gap (--sbw) is held on the right so nothing shifts
   sideways; the header keeps its own fixed override (see _header.scss). */
html.no-scroll body {
  position: fixed;
  top: var(--lock-top, 0px);
  left: 0;
  right: var(--sbw, 0px);
  padding-top: var(--lock-head-h, 0px);
}

/* Lenis smooth scroll (assets/js/vendor/lenis.min.js). Native scroll is kept,
   so the sticky header and GSAP ScrollTrigger pins keep working. */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Fragment-linked targets clear the full sticky header (topbar + navbar) on
   native hash navigation: direct #links, reloads with a #hash, and
   reduced-motion users where Lenis is off. In-page anchor clicks already offset
   via Lenis (assets/js/main.js), so this governs only the native scroll path. */
:target {
  scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overflow-y: auto;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

input, select, textarea {
  font-family: inherit;
}

ul, ol {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

p {
  margin: 0;
}

:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 0.15rem;
  border-radius: 0.15rem;
}

::selection {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section vertical padding — apply on every <section> instead of per-section
   padding. One unified rhythm; pick the sides with the suffix. */
.sec_pt {
  padding-top: var(--sec-py);
}

.sec_pb {
  padding-bottom: var(--sec-py);
}

.sec_ptb {
  padding-block: var(--sec-py);
}

.section-surface {
  background: var(--color-surface);
}

.stack-sm > * + * {
  margin-top: 0.625rem;
}

.stack > * + * {
  margin-top: 1.125rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.flex {
  display: flex;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Type scale ---------- */
.display {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--color-primary-deep);
}

.h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-primary-deep);
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-primary-deep);
}

.h2 em {
  font-style: normal;
  color: var(--color-primary);
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-primary-deep);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  line-height: 1.6;
  font-weight: 400;
}

.muted {
  color: var(--color-muted);
}

.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* ---------- Eyebrow (pill kicker) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-primary-dark);
  background: var(--color-tint);
  border: 1px solid var(--color-tint-2);
  padding: 0.4375rem 0.875rem 0.4375rem 0.75rem;
  border-radius: var(--r-pill);
}

.eyebrow::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem var(--color-tint-2);
}

.eyebrow.is-light {
  color: var(--color-white);
  background: var(--on-dark-fill);
  border-color: var(--on-dark-line);
}

.eyebrow.is-light::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* eyebrow with a leading icon instead of the dot */
.eyebrow.has-ic::before {
  display: none;
}

.eyebrow.has-ic svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* ---------- Section header ---------- */
.sec_head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.sec_head-text {
  max-width: 56ch;
}

.sec_head .h1, .sec_head .h2 {
  margin-top: 0.875rem;
}

.sec_head p {
  margin-top: 0.875rem;
}

.sec_head.is-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sec_head.is-center .sec_head-text {
  margin-inline: auto;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ---------- Misc utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden {
  display: none !important;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.3s var(--ease-out);
}

.btn:hover svg {
  transform: translateX(0.25rem);
}

.btn:active {
  transform: translateY(0.0625rem);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

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

.btn-dark:hover {
  background: color-mix(in srgb, var(--color-ink) 85%, var(--color-primary));
}

.btn-wa {
  background: var(--color-wa);
  color: var(--color-white);
}

.btn-wa:hover {
  background: color-mix(in srgb, var(--color-wa) 88%, #000);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: color-mix(in srgb, var(--color-ink) 22%, var(--color-white));
}

.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-tint);
}

.btn-light {
  background: var(--color-white);
  color: var(--color-ink);
}

.btn-light:hover {
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

/* Ghost buttons placed on dark / primary surfaces */
.btn-on-dark {
  background: var(--on-dark-fill);
  color: var(--color-white);
  border-color: var(--on-dark-line);
}

.btn-on-dark:hover {
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  border-color: var(--on-dark-faint);
}

.btn-on-blue {
  background: transparent;
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-white) 40%, transparent);
}

.btn-on-blue:hover {
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
  border-color: var(--color-white);
}

.btn-lg {
  padding: 1rem 1.875rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.625rem 1rem;
  font-size: 0.85rem;
}

.btn-block {
  width: 100%;
}

/* =========================================================
   Badges, chips, pills
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.badge-soft {
  background: var(--color-surface-2);
  color: var(--color-ink-soft);
}

.badge-gold {
  background: color-mix(in srgb, var(--color-gold) 22%, var(--color-white));
  color: color-mix(in srgb, var(--color-gold) 60%, #000);
}

.badge svg {
  width: 0.9rem;
  height: 0.9rem;
}

.badge.has-dot::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.chip svg {
  width: 1rem;
  height: 1rem;
}

.chip:hover {
  color: var(--color-primary-dark);
  background: var(--color-tint);
}

.chip[aria-selected=true], .chip.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   Form controls
   ========================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.field label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-ink-soft);
}

.field-hint {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.field .req {
  color: var(--color-primary);
}

.input, .select, .textarea {
  width: 100%;
  padding: 0.8125rem 1rem;
  border-radius: 0.5em;
  border: 0.1rem solid var(--color-line);
  background: var(--color-white);
  font-size: 1rem;
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.input::placeholder, .textarea::placeholder {
  color: var(--color-placeholder);
  font-weight: 300;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.textarea {
  resize: vertical;
  min-height: 8.125rem;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6976' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}

/* show a disabled placeholder option in muted "placeholder" grey, like inputs;
   a real selection returns the field to the normal ink colour */
.select:has(option[value=""]:checked) {
  color: var(--color-placeholder);
  font-weight: 300;
}

.select option {
  color: var(--color-ink);
  font-weight: 400;
}

.select option[value=""] {
  color: var(--color-placeholder);
  font-weight: 300;
}

.form-grid {
  display: grid;
  gap: 1.125rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

@media (max-width: 34rem) {
  .form-row {
    grid-template-columns: 1fr;
  }
}
.form-note {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.form-note a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* validation — server-side errors surfaced inline on a field */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--color-red);
}

.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus {
  border-color: var(--color-red);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-red) 82%, #000);
}

.field-error svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.08rem;
  color: var(--color-red);
}

/* honeypot — kept in the DOM for bots, removed from sight and the a11y tree */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Pill search box */
.search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-white);
  border-radius: 0.4em;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border: 1px solid var(--color-line);
  transition: border-color var(--transition);
}

.search:focus-within {
  border-color: var(--color-primary);
}

.search svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-muted);
  flex: none;
}

.search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  min-width: 0;
  color: var(--color-ink);
}

.search input::placeholder {
  color: var(--color-placeholder);
  font-weight: 300;
}

/* =========================================================
   Generic cards, image placeholders, avatars
   ========================================================= */
.card {
  background: var(--color-white);
  border: color-mix(in srgb, var(--color-primary), white 75%) 1px solid;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), border-color var(--transition);
}

.card-hover:hover {
  transform: translateY(-0.375rem);
  border-color: var(--color-tint-2);
}

/* Striped image placeholder — drop an <img> inside to fill it */
.ph {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: inherit;
}

.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.ph.is-dark {
  background: color-mix(in srgb, var(--color-primary) 70%, #000);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-white) 5%, transparent) 0 0.75rem, transparent 0.75rem 1.5rem);
}

.ph.is-dark::after {
  color: var(--on-dark-soft);
  border-color: var(--on-dark-faint);
  background: var(--on-dark-fill);
}

/* Avatar / initials */
.avatar {
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid var(--color-tint-2);
  flex: none;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Shared components: toast, inner page hero, breadcrumb,
   stats band, marquee strip
   ========================================================= */
/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translate(-50%, 1.5rem);
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.875rem 1.375rem;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out);
  z-index: 200;
  max-width: calc(100vw - 2rem);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent);
  flex: none;
}

.toast.is-error svg {
  color: var(--color-red);
}

/* ---------- Inner-page hero (deep blue) ---------- */
.page_hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
}

.page_hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 55%), radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--color-primary) 60%, #000), transparent 55%);
  pointer-events: none;
}

.page_hero .container {
  position: relative;
}

.page_hero-eyebrow {
  margin-bottom: 1.25rem;
}

.page_hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-white);
  max-width: 20ch;
}

.page_hero-text {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--on-dark);
  max-width: 51ch;
  font-weight: 300;
}

.page_hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

.page_hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.page_hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
}

.page_hero-tag svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-accent);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--on-dark-soft);
  margin-bottom: 1.125rem;
}

.breadcrumb a:hover {
  color: var(--color-white);
}

.breadcrumb svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.6;
}

.breadcrumb [aria-current] {
  color: var(--color-white);
}

/* Light-background variant — for pages without the dark page_hero (e.g. FAQ). */
.breadcrumb.is-ink {
  color: var(--color-muted);
}

.breadcrumb.is-ink a {
  color: var(--color-muted);
}

.breadcrumb.is-ink a:hover {
  color: var(--color-primary);
}

.breadcrumb.is-ink [aria-current] {
  color: var(--color-ink);
}

/* ---------- Stats band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stat {
  text-align: center;
  padding: 0.5rem;
}

.stat-num {
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-ink);
}

.stat-num .u {
  color: var(--color-primary);
}

.stat-label {
  margin-top: 0.625rem;
  font-size: 0.92rem;
  color: var(--color-muted);
  font-weight: 500;
}

.stats.is-on-dark .stat-num {
  color: var(--color-white);
}

.stats.is-on-dark .stat-num .u {
  color: var(--color-accent);
}

.stats.is-on-dark .stat-label {
  color: var(--on-dark);
}

@media (max-width: 40rem) {
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1rem;
  }
}
/* ---------- Marquee strip ---------- */
.marquee {
  overflow: hidden;
  background: var(--color-surface);
  border-block: 1px solid var(--color-line);
  font-size: calc(0.65rem + 0.25vw);
  padding-block: 1.2em 1em;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  animation: marqueeScroll 42s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: inline-flex;
  align-items: center;
}

.marquee-item {
  font-size: 1rem;
  font-weight: 400;
}

.marquee-sep {
  color: var(--color-sky);
  font-size: 1.25em;
  margin: 0 1rem;
}

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}
/* Shared chrome */
/* =========================================================
   Site header: top bar, navbar, mega menu, search modal,
   mobile drawer. Behaviour is driven by data-* hooks in JS.
   ========================================================= */
.header_wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-white) 86%, transparent);
  backdrop-filter: saturate(160%) blur(0.875rem);
  border-bottom: 1px solid var(--color-line);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

.header_wrap.is-scrolled {
  box-shadow: 0 0.5rem 1.875rem -1rem color-mix(in srgb, var(--color-ink) 22%, transparent);
}

/* While a full-screen overlay locks scrolling (search modal, mobile drawer,
   video lightbox), `html.no-scroll { overflow:hidden }` breaks position:sticky:
   on a scrolled page the header reverts to the document top and disappears above
   the viewport. Pin it to the viewport so it stays in place behind the overlay. */
html.no-scroll .header_wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--sbw, 0px);
}

/* ---------- Top utility bar ---------- */
.topbar_wrap {
  background: var(--color-primary);
  color: var(--on-dark);
  font-size: 0.8rem;
}

.topbar_wrap-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--topbar-h);
}

.topbar_wrap a {
  color: var(--on-dark);
  transition: color var(--transition);
}

.topbar_wrap a:hover {
  color: var(--color-white);
}

.topbar_wrap-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar_wrap-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.topbar_wrap-item svg {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.8;
}

.topbar_wrap-sep {
  color: var(--on-dark-faint);
}

@media (max-width: 56rem) {
  .topbar_wrap-item.is-optional,
  .topbar_wrap-sep,
  .topbar_wrap-loc-pre {
    display: none;
  }
  .topbar_wrap-group {
    gap: 0.875rem;
  }
}
/* ---------- Navbar ---------- */
.nav_wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.brand-mark {
  width: 3.25em;
  height: 3.25em;
  flex: none;
  overflow: hidden;
  box-shadow: var(--shadow-primary);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-name span {
  color: var(--color-primary);
}

.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--color-muted);
  font-weight: 500;
  margin-top: 0.2rem;
  line-height: 1;
}

.nav_wrap-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav_wrap-item {
  position: relative;
}

.nav_wrap-item.has-mega {
  position: static;
}

.nav_wrap-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--color-ink-soft);
  transition: color var(--transition), background var(--transition);
}

.nav_wrap-link:hover,
.nav_wrap-item.is-open .nav_wrap-link,
.nav_wrap-link.is-current {
  color: var(--color-primary-dark);
  background: var(--color-tint);
}

.nav_wrap-link .chev {
  width: 0.9375rem;
  height: 0.9375rem;
  transition: transform 0.3s var(--ease);
}

.nav_wrap-item.is-open .nav_wrap-link .chev {
  transform: rotate(180deg);
}

.nav_wrap-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
}

.nav_wrap-search {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: color-mix(in srgb, var(--color-line), black 15%) 1px solid;
  background: var(--color-white);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  flex: none;
}

.nav_wrap-search svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.nav_wrap-search:hover, .nav_wrap-search.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-tint);
}

/* ---------- Shared morphing dropdown (Courses / Institute) ---------- */
/* one centred panel that resizes its height (morph) and crossfades panes */
.navdrop_wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.375rem);
  width: min(64rem, 93vw);
  padding-top: 0.0625rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.32s var(--ease-out), visibility 0.24s;
  z-index: 120;
}

.navdrop_wrap.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navdrop_wrap-panel {
  position: relative;
  height: 0;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  transition: height 0.4s var(--ease-out);
}

.navdrop_wrap-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.625rem;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.38s var(--ease-out);
}

.navdrop_wrap-pane.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .navdrop_wrap-panel {
    transition: none;
  }
  .navdrop_wrap-pane {
    transition: opacity 0.15s;
    transform: none;
  }
}
.mega_wrap-layout {
  display: grid;
  grid-template-columns: 1fr 17.5rem;
  gap: 1.75rem;
  align-items: stretch;
}

.mega_wrap-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem 2rem;
}

.mega_wrap-cols.is-three {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;
}

.mega_wrap-coltitle {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-soft);
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.mega_wrap-link {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: var(--r);
  transition: background var(--transition);
}

.mega_wrap-link:hover {
  background: var(--color-surface);
}

.mega_wrap-link:hover .mega_wrap-ic {
  background: var(--color-primary);
  color: var(--color-white);
}

.mega_wrap-ic {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.625rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  transition: background var(--transition), color var(--transition);
}

.mega_wrap-ic svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.mega_wrap-lt {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-ink);
}

.mega_wrap-ld {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* feature / promo card inside mega */
.mega_wrap-feature {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
}

.mega_wrap-feature-img {
  width: 100%;
  height: 11.5rem;
  object-fit: cover;
  /* fade the bottom edge so the photo blends into the blue card */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.mega_wrap-feature-body {
  padding: 1.125rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mega_wrap-feature-tag {
  /* push the whole text block down so it sits just above the button */
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: var(--color-white);
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
}

.mega_wrap-feature-h {
  color: var(--color-white);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0.75rem 0 0.375rem;
}

.mega_wrap-feature-p {
  font-size: 0.82rem;
  color: var(--on-dark);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.mega_wrap-promo {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--r-lg);
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  background-image: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--color-accent) 36%, transparent), transparent 60%);
}

.mega_wrap-promo h4 {
  color: var(--color-white);
  margin: 0.75rem 0 0.375rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.mega_wrap-promo p {
  font-size: 0.86rem;
  color: var(--on-dark);
  line-height: 1.5;
}

.mega_wrap-promo .badge {
  background: var(--on-dark-line);
  color: var(--color-white);
}

/* keep the real content above the watermark */
.mega_wrap-promo > div, .mega_wrap-promo > .btn {
  position: relative;
  z-index: 1;
}

/* muted decorative quote watermark, top-right */
.mega_wrap-promo-quote {
  position: absolute;
  top: 0.625rem;
  right: 0.875rem;
  z-index: 0;
  color: var(--color-white);
  opacity: 0.14;
  pointer-events: none;
}

.mega_wrap-promo-quote svg {
  width: 4.75rem;
  height: 4.75rem;
}

.mega_wrap-foot {
  margin-top: 1.25rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.mega_wrap-foot-note {
  font-size: 0.85rem;
  color: var(--color-muted);
  max-width: 48ch;
}

.mega_wrap-foot-note strong {
  color: var(--color-ink);
}

@media (max-width: 62rem) {
  .mega_wrap-layout {
    grid-template-columns: 1fr;
  }
  .mega_wrap-feature {
    display: none;
  }
}
/* ---------- Burger ---------- */
.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  border: 1px solid var(--color-line);
  background: var(--color-white);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
}

.burger span {
  width: 1.25rem;
  height: 0.125rem;
  background: var(--color-ink);
  border-radius: 0.125rem;
  transition: 0.3s var(--ease);
}

.burger.is-x span:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.burger.is-x span:nth-child(2) {
  opacity: 0;
}

.burger.is-x span:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* ---------- Search modal (command palette) ---------- */
.search_wrap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3.5rem, 12vh, 8.75rem) 1.25rem 1.25rem;
  visibility: hidden;
}

/* No wrapper fade: the backdrop must cover the header the instant the modal opens.
   A slow fade leaves the header visible through the translucent backdrop while it
   re-paints (sticky -> fixed under the scroll lock), which reads as a flicker. The
   dialog keeps its own entrance transition below — same approach as the video modal. */
.search_wrap.is-open {
  visibility: visible;
}

.search_wrap-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  backdrop-filter: blur(0.25rem);
}

.search_wrap-dialog {
  position: relative;
  width: min(40rem, 100%);
  display: flex;
  flex-direction: column;
  max-height: min(36rem, 80vh);
  background: var(--color-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-0.875rem) scale(0.98);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease);
}

.search_wrap.is-open .search_wrap-dialog {
  transform: none;
  opacity: 1;
}

.search_wrap-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
  flex: none;
}

.search_wrap-head > svg {
  width: 1.3125rem;
  height: 1.3125rem;
  color: var(--color-muted);
  flex: none;
}

.search_wrap-input {
  flex: 1;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-ink);
  background: transparent;
  min-width: 0;
}

.search_wrap-input::placeholder {
  color: var(--color-placeholder);
  font-weight: 300;
}

.search_wrap-esc {
  flex: none;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3125rem 0.5625rem;
  border-radius: 0.4375rem;
}

.search_wrap-esc:hover {
  color: var(--color-ink);
  border-color: var(--color-muted-soft);
}

.search_wrap-body {
  overflow-y: auto;
  padding: 0.5rem;
  flex: 1;
}

.search_wrap-group {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-soft);
  font-weight: 600;
  padding: 0.875rem 0.75rem 0.4375rem;
}

.search_wrap-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--r);
  transition: background 0.18s var(--ease);
}

.search_wrap-result.is-active, .search_wrap-result:hover {
  background: var(--color-tint);
}

.search_wrap-result-ic {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.625rem;
  background: var(--color-surface-2);
  color: var(--color-primary-dark);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.search_wrap-result.is-active .search_wrap-result-ic, .search_wrap-result:hover .search_wrap-result-ic {
  background: var(--color-primary);
  color: var(--color-white);
}

.search_wrap-result-ic svg {
  width: 1.125rem;
  height: 1.125rem;
}

.search_wrap-result-text {
  flex: 1;
  min-width: 0;
}

.search_wrap-result-title {
  display: block;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search_wrap-result-meta {
  display: block;
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--color-muted);
  margin-top: 0.0625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search_wrap-result-type {
  flex: none;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted-soft);
  background: var(--color-surface-2);
  padding: 0.25rem 0.5625rem;
  border-radius: var(--r-pill);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.search_wrap-result.is-active .search_wrap-result-type, .search_wrap-result:hover .search_wrap-result-type {
  color: var(--color-primary-dark);
  background: var(--color-white);
}

.search_wrap-result-go {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  color: var(--color-muted-soft);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), color 0.18s var(--ease);
}

.search_wrap-result-go svg {
  width: 1rem;
  height: 1rem;
}

.search_wrap-result.is-active .search_wrap-result-go, .search_wrap-result:hover .search_wrap-result-go {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary-dark);
}

.search_wrap-empty {
  padding: 2.25rem 1.25rem;
  text-align: center;
  color: var(--color-muted);
  line-height: 1.7;
}

.search_wrap-empty a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.search_wrap-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  flex: none;
  flex-wrap: wrap;
}

.search_wrap-kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.76rem;
  color: var(--color-muted);
}

.search_wrap-kbd kbd {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 0.3125rem;
  padding: 0.125rem 0.375rem;
  color: var(--color-ink-soft);
}

.search_wrap-foot-spacer {
  flex: 1;
}

.search_wrap-all {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.search_wrap-all svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

@media (max-width: 34rem) {
  .search_wrap-foot .search_wrap-kbd, .search_wrap-foot-spacer {
    display: none;
  }
}
/* ---------- Mobile drawer ---------- */
.mnav_wrap {
  position: fixed;
  inset: calc(var(--topbar-h) + var(--header-h)) 0 0 0;
  z-index: 95;
  background: var(--color-white);
  overflow-y: auto;
  display: none;
  transform: translateX(100%);
  transition: transform 0.38s var(--ease-out);
  border-top: 1px solid var(--color-line);
}

body.mnav-open .mnav_wrap {
  transform: translateX(0);
}

.mnav_wrap-inner {
  padding: 1.5rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
}

.mnav_wrap .search {
  margin-bottom: 1.375rem;
  box-shadow: none;
}

.mnav_wrap-links {
  display: flex;
  flex-direction: column;
}

.mnav_wrap-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9375rem 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-line-soft);
  color: var(--color-ink);
}

.mnav_wrap-links.is-sub a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  padding: 0.75rem 0.25rem;
}

.mnav_wrap-sec {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-soft);
  font-weight: 600;
  margin: 1.5rem 0 0.375rem;
}

.mnav_wrap-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.mnav_wrap-contact {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-ink-soft);
  font-weight: 600;
}

.mnav_wrap-contact svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-primary);
}

/* ---------- Responsive: collapse to mobile ---------- */
@media (max-width: 64rem) {
  .nav_wrap-menu, .navdrop_wrap {
    display: none;
  }
  .burger {
    display: flex;
  }
  .mnav_wrap {
    display: block;
  }
}
/* Keep the Apply CTA beside the burger on tablets, but hide it on phones
   (≤575px) where the masthead row gets too tight. !important is needed to beat
   `.btn { display: inline-flex !important }` in _buttons.scss. */
@media (max-width: 35.9375rem) {
  .nav_wrap-cta {
    display: none !important;
  }
}
/* =========================================================
   Site footer: blue CTA band + dark main + bottom bar
   ========================================================= */
.footer_wrap {
  --footer-line: color-mix(in srgb, var(--color-white) 8%, transparent);
  background: var(--color-ink);
  color: var(--on-dark-soft);
  font-weight: 300;
}

.footer_wrap a {
  color: var(--on-dark-soft);
  transition: all var(--transition);
  display: inline-block;
}

.footer_wrap a:hover {
  color: var(--color-white);
}

/* ---------- CTA band ---------- */
.footer_wrap-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

.footer_wrap-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(70% 120% at 50% -20%, color-mix(in srgb, var(--color-white) 16%, transparent), transparent 60%);
  pointer-events: none;
}

.footer_wrap-cta-inner {
  position: relative;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.footer_wrap-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1.375rem;
}

.footer_wrap-cta-eyebrow span {
  width: 1.75rem;
  height: 1px;
  background: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.footer_wrap-cta-title {
  color: var(--color-white);
  font-size: clamp(2rem, 1.5rem + 3vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.footer_wrap-cta-sub {
  color: var(--on-dark);
  font-size: var(--fs-lead);
  line-height: 1.6;
  margin: 1.125rem auto 0;
  max-width: 52ch;
}

.footer_wrap-cta-btns {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.125rem;
}

.footer_wrap-cta .btn-light {
  color: var(--color-primary-dark);
}

/* Keep the white CTA button's text dark on hover: the generic `.footer_wrap a:hover`
   link rule (white text) out-specifies the base .btn-light:hover, so the button text
   would otherwise turn white-on-white. This (0,3,0) rule wins it back. */
.footer_wrap-cta .btn-light:hover {
  color: var(--color-primary-dark);
}

/* ---------- Dark main ---------- */
.footer_wrap-main {
  padding-block: clamp(3.375rem, 2rem + 5vw, 5.25rem);
}

.footer_wrap-top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 1rem + 6vw, 6rem);
  align-items: start;
}

.footer_wrap-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.375rem;
}

.footer_wrap-brand-text {
  display: flex;
  flex-direction: column;
}

.footer_wrap-brand-name {
  font-weight: 600;
  font-size: 1.25em;
  letter-spacing: -0.03em;
  color: var(--color-white);
  line-height: 1;
}

.footer_wrap-brand-name span {
  color: var(--color-accent);
}

.footer_wrap-brand-sub {
  font-size: 0.75em;
  letter-spacing: 0.01em;
  color: var(--on-dark-soft);
  font-weight: 300;
  margin-top: 0.25em;
}

.footer_wrap-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 52ch;
  color: var(--on-dark-soft);
}

.footer_wrap-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.875rem;
}

.footer_wrap-stats > div {
  display: flex;
  flex-direction: column;
}

.footer_wrap-stat-n {
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1;
}

.footer_wrap-stat-l {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  font-weight: 600;
  margin-top: 0.5rem;
}

.footer_wrap-why h4 {
  color: var(--color-white);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.125rem;
}

.footer_wrap-tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  max-width: 30rem;
}

.footer_wrap-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  font-size: 0.84rem;
  color: var(--on-dark);
}

.footer_wrap-tags svg {
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  color: var(--color-accent);
}

.footer_wrap-follow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.875rem;
}

.footer_wrap-follow-lbl {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  font-weight: 600;
}

.footer_wrap-social {
  display: flex;
  gap: 0.625rem;
}

.footer_wrap-social a {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}

.footer_wrap-social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-0.125rem);
}

.footer_wrap-social svg {
  width: 1rem;
  height: 1rem;
}

.footer_wrap-rule {
  border: 0;
  height: 1px;
  background: var(--footer-line);
  margin-block: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
}

/* ---------- Link columns ---------- */
.footer_wrap-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2.25rem;
}

.footer_wrap h4 {
  color: var(--color-white);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.375rem;
}

.fcol ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  font-size: 0.92rem;
}

.fcol ul a:hover {
  padding-left: 0.1875rem;
}

.footer_wrap-reach {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.footer_wrap-reach li {
  display: flex;
  gap: 0.8125rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--on-dark-soft);
}

.footer_wrap-reach-ic {
  width: 1.25rem;
  flex: none;
  color: var(--color-accent);
  margin-top: 0.0625rem;
}

.footer_wrap-reach-ic svg {
  width: 1.125rem;
  height: 1.125rem;
}

.footer_wrap-reach-lbl {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* ---------- Bottom bar ---------- */
.footer_wrap-bar {
  padding-bottom: 2.5rem;
}

.footer_wrap-bar-inner {
  border-top: 1px solid var(--footer-line);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--on-dark-faint);
}

.footer_wrap-badges {
  display: flex;
  gap: 1.375rem;
  flex-wrap: wrap;
}

@media (max-width: 67.5rem) {
  .footer_wrap-cols {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.25rem 1.75rem;
  }
  .fcol.is-reach {
    grid-column: 1/-1;
  }
}
@media (max-width: 51rem) {
  .footer_wrap-top {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
@media (max-width: 39rem) {
  .footer_wrap-cols {
    grid-template-columns: 1fr 1fr;
  }
  .footer_wrap-stats {
    gap: 1.75rem;
  }
}
@media (max-width: 27rem) {
  .footer_wrap-cols {
    grid-template-columns: 1fr;
  }
}
/* Shared course card */
/* =========================================================
   Course card (home explorer + related courses)
   Icon accent on the left; a content column on the right with
   category, single-line title, a duration · mode pill badge and
   a two-line blurb. The whole card is one click target via the
   stretched title link.
   ========================================================= */
.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.375rem 1.375rem;
}

/* hover: no lift, no shadow — only a border tint */
.ccard.card-hover:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-primary);
}

/* Popular badge — top-right, amber highlight */
.ccard-pop {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  background: #f5a623;
  color: var(--color-white);
}

/* icon accent + content column */
.ccard-grid {
  display: flex;
  align-items: stretch;
  gap: 0.875rem;
}

.ccard-ico {
  flex: none;
  align-self: flex-start;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.ccard-ico svg {
  width: 1.375rem;
  height: 1.375rem;
}

/* content column */
.ccard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.ccard-headtext {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-right: 1rem;
}

.ccard-cat {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* title clamped to a single line; its link is stretched over the whole card */
.ccard-title {
  font-size: 1.12rem;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccard-title a {
  color: inherit;
}

.ccard-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ccard:hover .ccard-title a {
  color: var(--color-primary-dark);
}

/* duration & mode as two separate light-blue badges */
.ccard-meta {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4375rem;
}

.ccard-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  background: var(--color-tint);
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
}

.ccard-meta svg {
  width: 0.8125rem;
  height: 0.8125rem;
  color: var(--color-primary);
}

/* description clamped to two lines */
.ccard-blurb {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Pages */
/* =========================================================
   Home page — faithful to the SuperTech design
   ========================================================= */
.stars {
  color: var(--color-gold);
  letter-spacing: 0.08em;
  line-height: 1;
}

.is-flip {
  transform: rotate(180deg);
}

/* ---------- Hero carousel (crossfade + dissolving photo) ---------- */
.hero_wrap {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-primary);
  background: linear-gradient(116deg, var(--color-primary-deep) 0%, var(--color-primary) 52%, color-mix(in srgb, var(--color-primary) 64%, var(--color-accent)) 100%);
}

.hero_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(40% 62% at 7% 20%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 62%), radial-gradient(42% 60% at 98% 96%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 62%);
}

.hero_wrap-viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Swiper drives the carousel: .hero_wrap-track is the .swiper-wrapper (flex) and
   .hero_wrap-slide is the .swiper-slide. The crossfade (opacity + stacking) is
   owned by Swiper's fade effect, so the slide only carries layout + height.
   Swiper's autoHeight (set in home.js) sizes the viewport to the active slide,
   so a shorter slide never leaves a blue gap under the photo on mobile. */
.hero_wrap-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(29.375rem, 60vh, 40rem);
}

@media (prefers-reduced-motion: no-preference) {
  .hero_wrap-slide.swiper-slide-active .hero_wrap-eyebrow {
    animation: heroUp 0.6s var(--ease-out) both 0.1s;
  }
  .hero_wrap-slide.swiper-slide-active .hero_wrap-title {
    animation: heroLeft 0.7s var(--ease-out) both 0.18s;
  }
  .hero_wrap-slide.swiper-slide-active .hero_wrap-lead {
    animation: heroUp 0.6s var(--ease-out) both 0.3s;
  }
  .hero_wrap-slide.swiper-slide-active .hero_wrap-cta {
    animation: heroUp 0.6s var(--ease-out) both 0.4s;
  }
  .hero_wrap-slide.swiper-slide-active .hero_wrap-proof {
    animation: heroUp 0.6s var(--ease-out) both 0.5s;
  }
  .hero_wrap-slide.swiper-slide-active .hero_wrap-media-img {
    animation: heroZoom 7s var(--ease-out) both;
  }
}
@keyframes heroUp {
  from {
    opacity: 0;
    transform: translateY(1.375rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroLeft {
  from {
    opacity: 0;
    transform: translateX(-1.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroZoom {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}
.hero_wrap-slide-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero_wrap-content {
  max-width: 38rem;
  padding-block: clamp(2.875rem, 5vw, 4.5rem);
}

.hero_wrap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  padding: 0.4375rem 1rem 0.4375rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--on-dark);
  margin-bottom: 1.375rem;
}

.hero_wrap-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-orange) 55%, transparent);
  animation: heroPulse 2.4s infinite;
}

@keyframes heroPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-orange) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--color-orange) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.hero_wrap-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-white);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.hero_wrap-title .hl {
  color: var(--color-white);
}

.hero_wrap-lead {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--on-dark);
  line-height: 1.6;
  margin-top: 1.25rem;
  max-width: 46ch;
}

.hero_wrap-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8125rem;
  margin-top: 2rem;
}

.hero_wrap-proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.125rem;
}

.hero_wrap-avatars {
  display: flex;
  cursor: pointer;
}

.hero_wrap-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 0.125rem solid var(--color-primary-deep);
  margin-left: -0.75rem;
  transition: transform 0.25s var(--ease);
}

.hero_wrap-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero_wrap-avatar:first-child {
  margin-left: 0;
}

.hero_wrap-proof-text {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  font-size: 0.9rem;
  color: var(--on-dark);
  line-height: 1.4;
}

.hero_wrap-proof-text strong {
  color: var(--color-white);
  font-weight: 700;
}

.hero_wrap-proof-text .stars {
  color: #ffc53d;
  font-size: 0.9rem;
}

/* Full-bleed photo: the media spans the whole hero, and a left->right mask fades
   the photo so the LEFT shows the hero's own blue gradient with just a faint hint
   of the photo (slightly transparent), while the RIGHT reveals the photo fully. */
.hero_wrap-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero_wrap-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.13) 42%, rgba(0, 0, 0, 0.5) 55%, black 65%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.13) 42%, rgba(0, 0, 0, 0.5) 55%, black 65%);
}

.hero_wrap-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

.hero_wrap-controls {
  position: absolute;
  bottom: clamp(1rem, 2.2vw, 1.625rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero_wrap-nav {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5625rem;
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  border: 1px solid var(--on-dark-faint);
  color: var(--color-white);
  display: grid;
  place-items: center;
  backdrop-filter: blur(0.3125rem);
  transition: background 0.2s, border-color 0.2s;
}

.hero_wrap-nav:hover {
  background: color-mix(in srgb, var(--color-white) 22%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 50%, transparent);
}

.hero_wrap-nav svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.hero_wrap-dots {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}

/* Swiper tags the dots container as .swiper-pagination (absolute, full-width).
   Override that so it stays an inline bar centred between the nav arrows. */
.hero_wrap-controls .hero_wrap-dots {
  position: static;
  width: auto;
  margin: 0;
  transform: none;
}

.hero_wrap-dot {
  position: relative;
  width: 0.3125rem;
  height: 0.3125rem;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--color-white) 32%, transparent);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, width 0.4s var(--ease);
}

.hero_wrap-dot:hover {
  background: color-mix(in srgb, var(--color-white) 55%, transparent);
}

.hero_wrap-dot.is-active {
  width: 3rem;
  background: color-mix(in srgb, var(--color-white) 30%, transparent);
  border-radius: 0.0625rem;
}

.hero_wrap-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.0625rem;
  background: var(--color-orange);
  transform-origin: left;
  transform: scaleX(0);
}

@media (prefers-reduced-motion: no-preference) {
  .hero_wrap-dot.is-active::after {
    animation: heroDotFill 6s linear forwards;
  }
  .hero_wrap.is-paused .hero_wrap-dot.is-active::after {
    animation-play-state: paused;
  }
}
@keyframes heroDotFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (max-width: 61.25rem) {
  .hero_wrap-content {
    max-width: 28.75rem;
  }
}
@media (max-width: 47.5rem) {
  .hero_wrap {
    padding-bottom: 3rem;
  }
  .hero_wrap-slide {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero_wrap-media {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 15rem;
    order: 1;
  }
  .hero_wrap-media-img {
    -webkit-mask-image: none;
    mask-image: none;
    object-position: 85% 50%;
  }
  .hero_wrap-slide-inner {
    order: 2;
  }
  .hero_wrap-content {
    max-width: none;
    padding-block: 2.375rem 1.375rem;
  }
  .hero_wrap-eyebrow {
    display: none;
  }
  .hero_wrap-cta {
    display: none;
  }
  .hero_wrap-controls {
    bottom: 0.75rem;
  }
}
/* ---------- Approach + CTA cards ---------- */
.appr_wrap {
  background: #0a47c2;
  color: var(--color-white);
}

.appr_wrap-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.95fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
}

.appr_wrap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  white-space: nowrap;
  padding: 0.5rem 1.15rem 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.appr_wrap-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: none;
  background: var(--color-orange);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-orange) 55%, transparent);
  animation: heroPulse 2.4s infinite;
}

.appr_wrap-title {
  font-size: clamp(1.5rem, 1.25rem + 2.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--color-white);
}

.appr_wrap-lead {
  margin-top: clamp(1.25rem, 0.8rem + 1vw, 1.875rem);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.6;
  max-width: 44ch;
  color: color-mix(in srgb, var(--color-white) 86%, transparent);
}

.appr_wrap-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.cta_card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--color-white) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
  color: var(--color-white);
  transition: background 0.22s, border-color 0.22s;
}

.cta_card:hover {
  background: color-mix(in srgb, var(--color-white) 9%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 22%, transparent);
}

.cta_card-ic {
  flex: none;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 0.8125rem;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: var(--color-sky);
  box-shadow: 0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--color-sky) 70%, transparent);
}

.cta_card-ic svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.22s var(--ease-out);
}

.cta_card:hover .cta_card-ic svg {
  transform: scale(1.15);
}

.cta_card-tx {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}

.cta_card-t {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cta_card-s {
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--color-white) 64%, transparent);
  line-height: 1.4;
}

.cta_card-go {
  flex: none;
  margin-left: auto;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
  display: grid;
  place-items: center;
  color: var(--color-white);
  transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s var(--ease-out);
}

.cta_card-go svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.cta_card:hover .cta_card-go {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

@media (max-width: 47.5rem) {
  .appr_wrap-grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- Success stories ---------- */
.stories_wrap-head {
  text-align: center;
  margin-inline: auto;
  max-width: 60ch;
  margin-bottom: 2.125rem;
}

.stories_wrap-head .h2 {
  margin-top: 0.875rem;
}

.stories_wrap-head .lead {
  margin-top: 0.75rem;
}

.stories_wrap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.125rem;
}

.story {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-primary-deep);
  box-shadow: var(--shadow);
  transition: box-shadow 0.3s var(--ease);
}

.story:hover {
  box-shadow: var(--shadow-lg);
}

.story-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.story:hover .story-media img {
  transform: scale(1.06);
}

.story-grad {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-primary-deep) 86%, transparent) 0%, color-mix(in srgb, var(--color-primary-deep) 30%, transparent) 38%, transparent 64%);
}

.story-dur {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  pointer-events: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-ink) 50%, transparent);
  backdrop-filter: blur(0.375rem);
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
}

.story-play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.story-play-ic {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-white) 94%, transparent);
  box-shadow: 0 0.75rem 2rem -0.5rem color-mix(in srgb, var(--color-primary-deep) 65%, transparent);
  transition: transform 0.25s var(--ease-out), background 0.2s;
}

.story-play-ic svg {
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.15rem;
}

.story:hover .story-play-ic {
  transform: scale(1.09);
  background: var(--color-white);
}

.story-info {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9375rem;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  color: var(--color-white);
}

.story-rating {
  color: var(--color-gold);
  font-size: 0.82rem;
  letter-spacing: 0.125rem;
}

.story-name {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

.story-role {
  font-size: 0.78rem;
  color: var(--on-dark);
}

/* carousel controls (arrows + dots) — hero indicator style, recoloured for the light section */
.stories_wrap-controls {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.stories_wrap-nav {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5625rem;
  flex: none;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.stories_wrap-nav:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-tint);
}

.stories_wrap-nav svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.stories_wrap-dots {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
}

.stories_wrap-dot {
  width: 0.3125rem;
  height: 0.3125rem;
  padding: 0;
  border: 0;
  border-radius: 0.0625rem;
  background: color-mix(in srgb, var(--color-ink) 22%, transparent);
  cursor: pointer;
  transition: background 0.3s, width 0.4s var(--ease);
}

.stories_wrap-dot:hover {
  background: color-mix(in srgb, var(--color-ink) 42%, transparent);
}

.stories_wrap-dot.is-active {
  width: 1.75rem;
  background: var(--color-orange);
}

/* never stacked: below the 4-up grid it becomes a horizontal carousel */
@media (max-width: 64rem) {
  .stories_wrap-grid {
    display: flex;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .stories_wrap-grid::-webkit-scrollbar {
    display: none;
  }
  .story {
    flex: 0 0 46%;
    scroll-snap-align: center;
    aspect-ratio: 4/3;
  }
  .stories_wrap-controls {
    display: flex;
  }
}
@media (max-width: 47.5rem) {
  .stories_wrap-grid {
    gap: 0.875rem;
  }
  .story {
    flex: 0 0 84%;
    aspect-ratio: 16/10;
  }
}
/* ---------- Course explorer ---------- */
.explorer_wrap {
  background: #f0f8ff;
}

.explorer_wrap-search {
  max-width: 20rem;
}

.explorer_wrap-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.explorer_wrap-tabs {
  display: inline-flex;
  overflow-y: auto;
  gap: 0.25rem;
  padding: 0.375rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r);
}

@media (max-width: 40rem) {
  .explorer_wrap-search {
    max-width: none;
    width: 100%;
  }
}
.explorer_wrap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.125rem;
}

/* One card per row below 767px (rule placed AFTER the base so it wins the cascade). */
@media (max-width: 47.9375rem) {
  .explorer_wrap-grid {
    grid-template-columns: 1fr;
  }
}
.explorer_wrap-empty {
  text-align: center;
  padding: 3.75rem 1.25rem;
  color: var(--color-muted);
}

.explorer_wrap-empty a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ---------- Showcase band ---------- */
.showcase_wrap {
  background: var(--color-primary);
}

.showcase_wrap-media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.showcase_wrap-media img {
  width: 100%;
  height: clamp(16rem, 34vw, 28rem);
  object-fit: cover;
  display: block;
}

/* ---------- History (scroll-pinned year scrubber) ---------- */
/* Natural band height (NOT full-screen). JS pins it centred in the viewport
   while the years scrub horizontally, then releases — no fixed height needed
   here, GSAP holds it in place during the pin. */
.history_wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
}

.history_wrap-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.history_wrap-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 0.5rem;
}

.history_wrap-years-wrap {
  position: relative;
  width: 100%;
  margin-top: 0.625rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  padding-top: 1rem;
}

.history_wrap-caret {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 0.375rem solid transparent;
  border-right: 0.375rem solid transparent;
  border-top: 0.5rem solid var(--color-sky);
  pointer-events: none;
}

.history_wrap-years {
  display: flex;
  align-items: center;
  gap: clamp(2.875rem, 7vw, 6rem);
  padding-block: 0.5rem;
  will-change: transform;
}

.history_wrap-yr {
  flex: none;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: color-mix(in srgb, var(--color-white) 16%, transparent);
  transition: color 0.35s var(--ease);
}

.history_wrap-yr.is-on {
  color: var(--color-white);
}

.history_wrap-texts {
  position: relative;
  width: min(38.75rem, 86vw);
  height: 7.375rem;
  margin-top: 1rem;
}

.history_wrap-panel {
  position: absolute;
  inset: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(0.625rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

.history_wrap-panel.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.history_wrap-pt {
  font-size: clamp(1.2rem, 0.9rem + 1.4vw, 1.6rem);
  font-weight: 600;
  color: var(--color-white);
}

.history_wrap-pd {
  margin-top: 0.625rem;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.05rem);
  line-height: 1.55;
  color: var(--on-dark);
  max-width: 52ch;
  margin-inline: auto;
}

.history_wrap-rail {
  position: relative;
  width: min(26.25rem, 72vw);
  height: 0.25rem;
  background: color-mix(in srgb, var(--color-white) 18%, transparent);
  margin-top: 1rem;
}

.history_wrap-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--color-sky);
  transition: width 0.1s linear;
}

@media (max-width: 40rem) {
  .history_wrap-texts {
    height: 9.375rem;
  }
}
/* ---------- Why us ---------- */
.why_wrap-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}

.why_wrap-head .h2 {
  margin-top: 0.875rem;
}

.why_wrap-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-primary-dark);
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

.why_wrap-cta svg {
  width: 1.0625rem;
  height: 1.0625rem;
  transition: transform 0.2s var(--ease);
}

.why_wrap-cta:hover svg {
  transform: translateX(0.25rem);
}

.why_wrap-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(3rem, 1rem + 5vw, 6rem);
}

.why_wrap-feat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.375rem;
  align-items: start;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2rem) 0;
  border-top: 1px solid var(--color-line);
  transition: padding-left 0.35s var(--ease);
}

.why_wrap-feat:hover {
  padding-left: 0.625rem;
}

.why_wrap-feat:nth-child(1), .why_wrap-feat:nth-child(2) {
  border-top: 0;
}

.why_wrap-feat-i {
  display: flex;
  align-items: baseline;
}

.why_wrap-feat-ic {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-primary);
  flex: none;
}

.why_wrap-feat-ic svg {
  width: 2.25rem;
  height: 2.25rem;
}

.why_wrap-feat-b h3 {
  font-size: 1.16rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.4375rem;
  font-weight: 600;
  transition: color 0.25s var(--ease);
}

.why_wrap-feat:hover .why_wrap-feat-b h3 {
  color: var(--color-primary);
}

.why_wrap-feat-b p {
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.why_wrap-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.75rem);
  margin-top: clamp(3rem, 2rem + 2vw, 4.5rem);
  padding-top: clamp(2.75rem, 1.5rem + 2vw, 3.75rem);
  border-top: 1px solid var(--color-line);
  justify-items: center;
  text-align: center;
}

.why_wrap-stat-n {
  font-size: clamp(2rem, 1.75rem + 5vw, 4rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.why_wrap-stat-n .u {
  color: var(--color-primary);
}

.why_wrap-stat-l {
  margin-top: 1.125rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
}

@media (max-width: 51.25rem) {
  .why_wrap-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .why_wrap-feats {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .why_wrap-feat:nth-child(2) {
    border-top: 1px solid var(--color-line);
  }
  .why_wrap-stats {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.5rem;
  }
}
/* ---------- How it works (orange, overlapping cards) ---------- */
.how_wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
}

.how_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(60% 70% at 90% 0%, color-mix(in srgb, var(--color-white) 14%, transparent), transparent 55%), radial-gradient(55% 65% at 0% 100%, color-mix(in srgb, #7a1e00 36%, transparent), transparent 55%);
}

.how_wrap-media {
  position: relative;
  width: 100%;
  height: clamp(17.5rem, 34vw, 28.75rem);
}

.how_wrap-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: 50% 20%;
}

.how_wrap .container {
  position: relative;
  z-index: 2;
}

.how_wrap-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.125rem;
  margin-top: clamp(-6.875rem, -9vw, -5rem);
}

.how_card {
  background: var(--color-white);
  border-radius: var(--r-lg);
  padding: 1.625rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.how_card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.375rem;
}

.how_card-n {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  line-height: 1;
}

.how_card-arrow {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.6875rem;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.how_card-arrow svg {
  width: 1.1875rem;
  height: 1.1875rem;
}

.how_card:hover .how_card-arrow {
  background: var(--color-primary);
  color: var(--color-white);
}

.how_card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5625rem;
  font-weight: 600;
}

.how_card p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.how_wrap-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: flex-start;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.how_wrap-intro .eyebrow.is-light {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 28%, transparent);
}

.how_wrap-intro .eyebrow.is-light::before {
  background: var(--color-white);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-white) 25%, transparent);
}

.how_wrap-intro-title {
  color: var(--color-white);
  margin-top: 0.875rem;
  font-weight: 600;
}

.how_wrap-intro-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.how_wrap-intro-text {
  font-size: var(--fs-lead);
  color: var(--color-white);
  opacity: 0.92;
}

.how_wrap-intro-right .btn {
  margin-top: 1.25rem;
}

@media (max-width: 56rem) {
  .how_wrap-cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: clamp(-5.625rem, -10vw, -3.75rem);
  }
  .how_wrap-intro {
    grid-template-columns: 1fr;
    gap: 1.125rem;
  }
}
@media (max-width: 37.5rem) {
  .how_wrap-cards {
    grid-template-columns: 1fr;
    margin-top: -3rem;
  }
}
/* ---------- Split / campus ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.split-media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
}

.split-title {
  margin-top: 0.875rem;
}

.split-text {
  margin-top: 0.875rem;
}

.split-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.usp-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.usp {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.usp-ic {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  display: grid;
  place-items: center;
  flex: none;
}

.usp-ic svg {
  width: 1.125rem;
  height: 1.125rem;
}

.usp h4 {
  font-size: 1rem;
  margin-bottom: 0.125rem;
  font-weight: 600;
}

.usp p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
}

@media (max-width: 56rem) {
  .split {
    grid-template-columns: 1fr;
  }
  .split-media {
    max-width: 34rem;
  }
}
/* ---------- Testimonials carousel (Swiper.js) ---------- */
.cflow_wrap {
  position: relative;
}

/* Avatar strip — custom centred coverflow (always 7 across, active centred, loops) */
.cflow_wrap-avatars {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto clamp(1.625rem, 4vw, 2.5rem);
  overflow: hidden;
}

.cflow_wrap-ava-track {
  display: flex;
  will-change: transform;
  transition: transform 0.5s var(--ease-out);
}

.cflow_wrap-ava-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.4rem;
}

.cflow_wrap-ava {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.55;
  transform: scale(0.86);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease-out), filter 0.35s var(--ease);
}

.cflow_wrap-ava img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cflow_wrap-ava:hover {
  opacity: 0.85;
  transform: scale(0.94);
  filter: grayscale(0);
}

.cflow_wrap-ava.is-active {
  opacity: 1;
  transform: scale(1.12);
  filter: grayscale(0);
}

/* Quote cards — main Swiper */
.cflow_wrap-stage {
  position: relative;
  padding-block: 0.875rem;
}

.cflow_wrap-stage .swiper-slide {
  height: auto;
  display: flex;
}

.cflow_wrap-card {
  position: relative;
  width: 100%;
  background: white;
  border: #ccc 1px solid;
  border-radius: var(--r-lg);
  padding: clamp(1.375rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  opacity: 0.42;
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease), background 0.55s var(--ease), border-color 0.55s var(--ease);
  cursor: pointer;
}

.swiper-slide-active .cflow_wrap-card {
  transform: scale(1);
  opacity: 1;
  background: var(--color-white);
  border-color: var(--color-line);
  cursor: default;
}

.cflow_wrap-stars {
  display: flex;
  gap: 0.1875rem;
  color: var(--color-gold);
  margin-bottom: 1.125rem;
  font-size: 1.5em;
}

.cflow_wrap-quote {
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--color-muted-soft);
  transition: color 0.55s var(--ease);
  flex: 1 1 auto;
}

.swiper-slide-active .cflow_wrap-quote {
  color: var(--color-ink);
}

.cflow_wrap-who {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  margin-top: clamp(1.375rem, 3vw, 2rem);
}

.cflow_wrap-av {
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}

.cflow_wrap-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cflow_wrap-cname {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-ink);
}

.cflow_wrap-role {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.1875rem;
}

/* Static grid variant (testimonials page): pin the active-card look — no carousel scale/dim. */
.cflow_wrap-card.is-static {
  transform: none;
  opacity: 1;
  background: var(--color-white);
  border-color: var(--color-line);
  cursor: default;
}

.cflow_wrap-card.is-static .cflow_wrap-quote {
  color: var(--color-ink);
}

/* Controls — same style as hero / stories nav */
.cflow_wrap-arrows {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.cflow_wrap-arrow {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5625rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.cflow_wrap-arrow:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-tint);
}

.cflow_wrap-arrow svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.cflow_wrap-arrow.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .cflow_wrap-ava {
    width: 2.5rem;
    height: 2.5rem;
  }
}
/* ---------- Blog preview ---------- */
.posts_wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.125rem;
}

.post_card {
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.post_card:hover {
  border-color: var(--color-primary);
}

.post_card-media {
  aspect-ratio: 16/10;
  border-radius: 0;
}

.post_card-media img {
  transition: transform 0.5s var(--ease-out);
}

.post_card:hover .post_card-media img {
  transform: scale(1.06);
}

.post_card-body {
  padding: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.post_card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.post_card-date {
  font-size: 0.82rem;
  color: var(--color-muted);
}

.post_card-body h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 600;
}

.post_card-body p {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.55;
  flex: 1;
}

.post_card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary-dark);
  margin-top: 0.25rem;
}

.post_card-read svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition);
}

.post_card:hover .post_card-read svg {
  transform: translateX(0.25rem);
}

/* ---------- Video lightbox ---------- */
.vlb_wrap {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 5vw, 3.5rem);
}

.vlb_wrap.is-open {
  display: flex;
}

.vlb_wrap-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-primary-deep) 80%, transparent);
  backdrop-filter: blur(0.4375rem);
}

.vlb_wrap-dialog {
  position: relative;
  width: min(57.5rem, 100%);
}

.vlb_wrap-close {
  position: absolute;
  top: -3.125rem;
  right: 0;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  color: var(--color-white);
  display: grid;
  place-items: center;
  transition: background 0.2s;
}

.vlb_wrap-close:hover {
  background: color-mix(in srgb, var(--color-white) 26%, transparent);
}

.vlb_wrap-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.vlb_wrap-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}

.vlb_wrap-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vlb_wrap-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--color-white);
  padding: 1.5rem;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--color-primary) 70%, var(--color-accent)), var(--color-primary-deep));
}

.vlb_wrap-empty-ic {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
  margin-bottom: 0.375rem;
}

.vlb_wrap-empty-ic svg {
  width: 1.625rem;
  height: 1.625rem;
}

.vlb_wrap-empty strong {
  font-size: 1.1rem;
  font-weight: 700;
}

.vlb_wrap-empty span {
  font-size: 0.85rem;
  color: var(--on-dark-soft);
}

/* =========================================================
   Courses listing page
   ========================================================= */
.courses_wrap-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.courses_wrap-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.375rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r);
}

.courses_wrap-search {
  max-width: 20rem;
  box-shadow: var(--shadow-sm);
}

.courses_wrap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.625rem;
}

/* Related-courses variant: stretch the cards to fill the row (2 -> 50/50, 3 -> thirds)
   instead of auto-fill, which leaves empty tracks and shrinks them to a third. */
.courses_wrap-grid.is-fill {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* One card per row below 767px (covers the related-courses .ccard grid). */
@media (max-width: 47.9375rem) {
  .courses_wrap-grid, .courses_wrap-grid.is-fill {
    grid-template-columns: 1fr;
  }
}
.courses_wrap-empty {
  text-align: center;
  padding: 3.75rem 1.25rem;
  color: var(--color-muted);
}

.courses_wrap-empty a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

@media (max-width: 40rem) {
  .courses_wrap-search {
    max-width: none;
    width: 100%;
  }
}
/* =========================================================
   Courses listing — alternating (zig-zag) course rows
   ========================================================= */
.crow_wrap {
  display: grid;
  gap: clamp(2.75rem, 1.5rem + 4vw, 5rem);
}

.crow_wrap-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
}

/* even rows: image on the right (zig-zag) */
.crow_wrap-item:nth-child(even) .crow_wrap-media {
  order: 2;
}

/* ---- media ---- */
.crow_wrap-media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.crow_wrap-media .ph {
  position: absolute;
  inset: 0;
}

.crow_wrap-media img {
  transition: transform 0.6s var(--ease-out);
}

.crow_wrap-media:hover img {
  transform: scale(1.04);
}

.crow_wrap-pop {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.34rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 700;
  background: #f5a623;
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.crow_wrap-pop svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* ---- body ---- */
.crow_wrap-body {
  min-width: 0;
}

.crow_wrap-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-weight: 500;
}

.crow_wrap-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.crow_wrap-meta svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-primary);
}

.crow_wrap-meta .dot {
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  background: var(--color-muted-soft);
}

.crow_wrap-title {
  margin-top: 0.7rem;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary-deep);
}

.crow_wrap-title a:hover {
  color: var(--color-primary);
}

.crow_wrap-sched {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.36rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.crow_wrap-sched svg {
  width: 0.9rem;
  height: 0.9rem;
}

.crow_wrap-blurb {
  margin-top: 1rem;
  max-width: 54ch;
  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.crow_wrap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.crow_wrap-tag {
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-sm);
  background: var(--color-surface-2);
  color: var(--color-ink-soft);
}

.crow_wrap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

@media (max-width: 51.25rem) {
  .crow_wrap-item {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* stacked: image always on top */
  .crow_wrap-item:nth-child(even) .crow_wrap-media {
    order: 0;
  }
}
/* =========================================================
   Courses listing — value props ("more than a course")
   ========================================================= */
.cwhy_wrap-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
}

.cwhy_wrap-intro {
  max-width: 60ch;
}

.cwhy_wrap-intro .h2 {
  margin-top: 0.875rem;
}

.cwhy_wrap-intro .lead {
  margin-top: 1rem;
}

.cwhy_wrap-head .btn {
  white-space: nowrap;
}

.cwhy_wrap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}

.cwhy_wrap-card {
  padding: clamp(1.5rem, 1rem + 1vw, 1.9rem);
}

.cwhy_wrap-card:hover {
  box-shadow: var(--shadow);
}

.cwhy_wrap-ic {
  display: inline-flex;
  color: var(--color-primary);
}

.cwhy_wrap-ic svg {
  width: 1.75rem;
  height: 1.75rem;
}

.cwhy_wrap-ct {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.cwhy_wrap-cd {
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 64rem) {
  .cwhy_wrap-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 51.25rem) {
  .cwhy_wrap-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
@media (max-width: 40rem) {
  .cwhy_wrap-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Course detail page
   ========================================================= */
.course_wrap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 1rem + 3vw, 3.75rem);
  align-items: start;
}

.course_wrap-main {
  min-width: 0;
}

/* ---- cover image ---- */
.course_wrap-cover {
  position: relative;
  display: block;
  aspect-ratio: 2/1;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.course_wrap-cover .ph {
  position: absolute;
  inset: 0;
}

/* ---- section blocks + hairline dividers ---- */
.course_wrap-block + .course_wrap-block {
  margin-top: clamp(2rem, 1.5rem + 1vw, 2.75rem);
  padding-top: clamp(2rem, 1.5rem + 1vw, 2.75rem);
  border-top: 1px solid var(--color-line);
}

.course_wrap-block > h2 {
  margin-bottom: 1.1rem;
}

.course_wrap-sub {
  margin-top: -0.35rem;
  margin-bottom: 1.4rem;
  color: var(--color-muted);
  font-size: 0.98rem;
}

.course_wrap-prose p {
  color: var(--color-ink-soft);
  line-height: 1.75;
}

.course_wrap-prose p + p {
  margin-top: 1rem;
}

/* ---- what you'll learn — 2-col check list ---- */
.course_wrap-learn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.5rem;
}

.outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.outcome svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--color-primary);
  margin-top: 0.12rem;
}

.outcome span {
  font-size: 0.96rem;
}

/* ---- curriculum accordion (native <details>) ---- */
.course_wrap-curric {
  display: grid;
  gap: 0.75rem;
}

.mod {
  border: 1px solid var(--color-line);
  border-radius: var(--r);
  background: var(--color-white);
  overflow: hidden;
  transition: border-color var(--transition);
}

.mod[open] {
  border-color: var(--color-tint-2);
}

.mod-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
}

.mod-sum::-webkit-details-marker {
  display: none;
}

.mod-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mod-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mod-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-ink);
}

.mod-ic {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-tint);
  flex: none;
  transition: background var(--transition);
}

.mod-ic::before, .mod-ic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.125rem;
  border-radius: 1px;
  background: var(--color-primary-dark);
  transform: translate(-50%, -50%);
  transition: opacity var(--transition), background var(--transition);
}

.mod-ic::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mod[open] .mod-ic {
  background: var(--color-primary);
}

.mod[open] .mod-ic::before {
  background: var(--color-white);
}

.mod[open] .mod-ic::after {
  opacity: 0;
}

.mod-body {
  padding: 0 1.25rem 1.25rem;
  display: grid;
  gap: 0.65rem;
}

/* ---- outcomes — filled 2-col cards ---- */
.course_wrap-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.ocard {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  background: var(--color-tint);
  border: 1px solid var(--color-tint-2);
  border-radius: var(--r);
}

.ocard svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-primary);
}

.ocard span {
  font-size: 0.94rem;
  font-weight: 500;
}

/* ---- prerequisites callout ---- */
.course_wrap-prereq {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 1vw, 2.75rem);
  padding: 1.25rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
}

.course_wrap-prereq-ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  flex: none;
  box-shadow: var(--shadow-sm);
}

.course_wrap-prereq-ic svg {
  width: 1.2rem;
  height: 1.2rem;
}

.course_wrap-prereq-h {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.course_wrap-prereq p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* ---- hero category chip ---- */
.course_hero-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-white);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
}

.course_hero-cat svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent);
}

/* ---- enroll card (sticky aside) ---- */
.enroll_card {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  padding: 1.5rem;
}

.enroll_card-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.enroll_card-cat svg {
  width: 0.9rem;
  height: 0.9rem;
}

.enroll_card-h {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-top: 0.85rem;
}

.enroll_card-note {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.35rem;
  margin-bottom: 1.1rem;
  line-height: 1.5;
}

.enroll_card .btn {
  margin-top: 0.6rem;
}

.enroll_card-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.enroll_card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 0.9rem;
}

.enroll_card-row:first-child {
  border-top: 1px solid var(--color-line-soft);
}

.enroll_card-row .k {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
}

.enroll_card-row .k svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.enroll_card-row .v {
  font-weight: 600;
  text-align: right;
}

.enroll_card-fee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  background: var(--color-tint);
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background var(--transition);
}

.enroll_card-fee:hover {
  background: var(--color-tint-2);
}

.enroll_card-fee > span {
  margin-right: auto;
}

.enroll_card-fee svg {
  width: 1rem;
  height: 1rem;
}

.enroll_card-fee svg:last-child {
  transition: transform 0.3s var(--ease-out);
}

.enroll_card-fee:hover svg:last-child {
  transform: translateX(0.25rem);
}

.enroll_card-contact {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line-soft);
  display: grid;
  gap: 0.85rem;
}

.enroll_card-contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.enroll_card-contact-ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  flex: none;
  transition: background var(--transition), color var(--transition);
}

.enroll_card-contact-ic.is-wa {
  background: color-mix(in srgb, var(--color-wa) 14%, var(--color-white));
  color: var(--color-wa);
}

.enroll_card-contact-ic svg {
  width: 1.05rem;
  height: 1.05rem;
}

.enroll_card-contact-row:hover .enroll_card-contact-ic {
  background: var(--color-primary);
  color: var(--color-white);
}

.enroll_card-contact-row:hover .enroll_card-contact-ic.is-wa {
  background: var(--color-wa);
  color: var(--color-white);
}

.enroll_card-contact-t {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.enroll_card-contact-t .k {
  font-size: 0.76rem;
  color: var(--color-muted);
}

.enroll_card-contact-t .v {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-ink);
}

/* ---- responsive ---- */
@media (max-width: 60rem) {
  .course_wrap-layout {
    grid-template-columns: 1fr;
  }
  .enroll_card {
    position: static;
  }
}
@media (max-width: 40rem) {
  .course_wrap-learn, .course_wrap-outcomes {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   About page
   ========================================================= */
/* ---------- Our story (image + copy + checklist) ---------- */
.story_wrap {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.story_wrap-media img {
  width: 100%;
  aspect-ratio: 5/4.2;
  object-fit: cover;
  border-radius: var(--r-xl);
  object-position: 60% 50%;
}

.story_wrap-title {
  margin-top: 0.875rem;
}

.story_wrap-copy p {
  margin-top: 1rem;
  color: var(--color-muted);
  line-height: 1.75;
}

.story_wrap-checks {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.1rem;
}

.story_check {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.story_check-ic {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 0.15rem;
}

.story_check-ic svg {
  width: 1rem;
  height: 1rem;
}

.story_check h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: var(--color-ink);
}

.story_check p {
  margin-top: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.55;
}

@media (max-width: 56rem) {
  .story_wrap {
    grid-template-columns: 1fr;
  }
  .story_wrap-media {
    order: -1;
    max-width: 34rem;
  }
}
/* ---------- Mission & vision (deep-blue cards) ---------- */
.mv_wrap {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
}

.mv_card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem);
  border-radius: var(--r-xl);
  color: var(--color-white);
  background: linear-gradient(155deg, var(--color-primary), var(--color-primary-deep));
  box-shadow: var(--shadow-lg);
}

.mv_card.is-deep {
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-primary) 58%, #000), var(--color-ink));
}

.mv_card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 60%);
}

.mv_card > * {
  position: relative;
}

.mv_card-ic {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.mv_card-ic svg {
  width: 1.5rem;
  height: 1.5rem;
}

.mv_card h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  color: var(--color-white);
  margin-bottom: 0.6rem;
}

.mv_card p {
  color: var(--on-dark);
  line-height: 1.7;
  font-size: 0.98rem;
  max-width: 46ch;
}

@media (max-width: 48rem) {
  .mv_wrap {
    grid-template-columns: 1fr;
  }
}
/* ---------- Why families choose us (heading + accordion / image) ---------- */
.choose_wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

.choose_wrap-title {
  margin-top: 0.875rem;
}

.choose_acc {
  margin-top: 1.75rem;
  border-top: 1px solid var(--color-line);
}

.acc {
  border-bottom: 1px solid var(--color-line);
}

.acc-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0.25rem;
}

.acc-sum::-webkit-details-marker {
  display: none;
}

.acc-n {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.acc-t {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary-deep);
  transition: color var(--transition);
}

.acc:hover .acc-t {
  color: var(--color-primary);
}

.acc[open] .acc-t {
  color: var(--color-primary);
}

.acc-ic {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.acc-ic::before, .acc-ic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.14rem;
  border-radius: 1px;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
  transition: opacity var(--transition), transform var(--transition);
}

.acc-ic::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acc[open] .acc-ic::after {
  opacity: 0;
}

.acc-body {
  padding: 0 0 1.25rem 2.45rem;
}

.acc-body p {
  color: var(--color-muted);
  line-height: 1.65;
  font-size: 0.95rem;
  max-width: 52ch;
}

.choose_wrap-media img {
  width: 100%;
  aspect-ratio: 4/4.3;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

@media (max-width: 56rem) {
  .choose_wrap {
    grid-template-columns: 1fr;
  }
  .choose_wrap-media {
    max-width: 34rem;
  }
}
/* ---------- In-page CTA band (rounded blue panel) ---------- */
.cta_band {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: var(--r-xl);
  padding: clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 3rem);
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
  box-shadow: var(--shadow-lg);
}

.cta_band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 60%);
}

.cta_band > * {
  position: relative;
}

.cta_band-title {
  font-size: var(--fs-h2);
  color: var(--color-white);
}

.cta_band-text {
  margin: 1rem auto 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--on-dark);
}

.cta_band-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ---------- Inside-the-campus bento gallery ---------- */
.gallery_wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  height: clamp(26rem, 42vw, 36rem);
}

.gallery_wrap-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--color-surface-2);
}

.gallery_wrap-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.gallery_wrap-item:hover img {
  transform: scale(1.05);
}

.gallery_wrap-item.is-lead {
  grid-row: 1/span 2;
}

@media (max-width: 52rem) {
  .gallery_wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: clamp(8.5rem, 26vw, 11rem);
    height: auto;
  }
  .gallery_wrap-item.is-lead {
    grid-column: 1/-1;
    grid-row: span 2;
  }
}
@media (max-width: 30rem) {
  .gallery_wrap {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(10rem, 52vw, 13rem);
  }
  .gallery_wrap-item.is-lead {
    grid-column: auto;
    grid-row: span 1;
  }
}
/* ---------- The people (instructor mini-cards) ---------- */
.people_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.person_card {
  text-align: center;
  padding: 2.25rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), border-color var(--transition);
}

.person_card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow);
  border-color: var(--color-tint-2);
}

.person_card-av {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto 1.1rem;
  font-size: 1.4rem;
}

.person_card-name {
  font-size: 1.15rem;
}

.person_card-role {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.person_card-sub {
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 0.5rem;
}

@media (max-width: 40rem) {
  .people_wrap {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin-inline: auto;
  }
}
/* ---------- Values grid (shared with careers.php) ---------- */
.values_wrap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.value_card {
  padding: 1.75rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  background: var(--color-white);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease), border-color var(--transition);
}

.value_card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow);
  border-color: var(--color-tint-2);
}

.value_card-ic {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.value_card-ic svg {
  width: 1.5rem;
  height: 1.5rem;
}

.value_card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.value_card p {
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* =========================================================
   Faculty / team page
   ========================================================= */
/* ---------- Tier heading ---------- */
.fac_tier-title {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  color: var(--color-primary-deep);
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* ---------- Member grid (4-up, groups stay left-aligned) ---------- */
.fac_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 64rem) {
  .fac_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 44rem) {
  .fac_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 26rem) {
  .fac_grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- Member card ---------- */
.fac_card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), border-color var(--transition);
}

.fac_card:hover {
  transform: translateY(-0.375rem);
  box-shadow: var(--shadow);
  border-color: var(--color-tint-2);
}

.fac_card-photo {
  aspect-ratio: 1/1;
  background: var(--color-surface-2);
  overflow: hidden;
}

.fac_card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.fac_card:hover .fac_card-photo img {
  transform: scale(1.04);
}

.fac_card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.05rem 1.1rem 1.25rem;
}

.fac_card-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-ink);
}

.fac_card-role {
  margin-top: 0.15rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.fac_card-points {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.45rem;
}

.fac_card-point {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.fac_card-point svg {
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.08rem;
  color: var(--color-primary);
  flex: none;
}

.fac_card-tags {
  margin-top: auto;
  padding-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------- Join-the-team split ---------- */
.join_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.join_wrap-title {
  margin-top: 0.875rem;
}

.join_wrap-text {
  margin-top: 1rem;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 46ch;
}

.join_wrap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

.join_wrap-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

@media (max-width: 56rem) {
  .join_wrap {
    grid-template-columns: 1fr;
  }
  .join_wrap-media {
    max-width: 36rem;
  }
}
/* =========================================================
   Careers / jobs page
   ========================================================= */
/* ---------- Section head note (right of "Current openings") ---------- */
.careers_note {
  max-width: 20rem;
  text-align: right;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.careers_note a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.careers_note a:hover {
  color: var(--color-primary);
}

@media (max-width: 48rem) {
  .careers_note {
    max-width: none;
    text-align: left;
  }
}
/* ---------- Topic filter ---------- */
.careers_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.careers_filter .chip {
  border-radius: var(--r-pill);
  border: 1px solid var(--color-line);
  background: var(--color-white);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.careers_filter .chip:hover {
  background: var(--color-tint);
  border-color: var(--color-tint-2);
  color: var(--color-primary-dark);
}

.careers_filter .chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* ---------- Job rows ---------- */
.joblist {
  display: grid;
  gap: 0.85rem;
}

.jobrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem) clamp(1.25rem, 1rem + 1vw, 1.65rem);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.jobrow:hover {
  border-color: var(--color-tint-2);
  box-shadow: var(--shadow-sm);
}

.jobrow-ic {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.jobrow-ic svg {
  width: 1.25rem;
  height: 1.25rem;
}

.jobrow-main {
  flex: 1;
  min-width: 0;
}

.jobrow-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
}

.jobrow-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.jobrow-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.jobrow-meta svg {
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.85;
}

.jobrow-desc {
  margin-top: 0.5rem;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.jobrow-aside {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.joblist-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 2rem + 3vw, 3.75rem) 1.5rem;
  background: var(--color-white);
  border: 1px dashed var(--color-tint-2);
  border-radius: var(--r-lg);
}

.joblist-empty-ic {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-primary);
}

.joblist-empty-ic svg {
  width: 1.5rem;
  height: 1.5rem;
}

.joblist-empty-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-ink);
}

.joblist-empty-text {
  max-width: 44ch;
  margin-top: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.joblist-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (max-width: 48rem) {
  .jobrow {
    flex-wrap: wrap;
  }
  .jobrow-aside {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.35rem;
  }
}
/* ---------- Benefits grid (reuses .value_card) ---------- */
.benefits_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 60rem) {
  .benefits_grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 38rem) {
  .benefits_grid {
    grid-template-columns: 1fr;
  }
}
/* ---------- How hiring works (numbered steps) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.step-n {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-primary);
}

.step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}

.step p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted);
}

@media (max-width: 60rem) {
  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 34rem) {
  .steps {
    grid-template-columns: 1fr;
  }
}
/* ---------- Open-application email line (within .join_wrap content) ---------- */
.careers_email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.careers_email svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.careers_email a {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.careers_email a:hover {
  color: var(--color-primary-dark);
}

/* =========================================================
   Fees page
   ========================================================= */
/* ---------- Breadcrumb on the light page header ---------- */
.fees_crumb {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.fees_crumb a {
  color: var(--color-muted);
}

.fees_crumb a:hover {
  color: var(--color-primary-dark);
}

.fees_crumb [aria-current] {
  color: var(--color-ink);
  font-weight: 600;
}

.fees_crumb svg {
  opacity: 0.5;
}

/* ---------- Fee board (header row + course rows) ---------- */
.fees_board {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.fees_board-head, .fee_row {
  display: grid;
  /* Fixed widths on cols 2-4 so the header and every row (separate grids)
     share identical column boundaries; only the course column flexes. */
  grid-template-columns: minmax(0, 1fr) 12rem 11rem 6.5rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
}

.fees_board-head {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  padding-block: 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.fees_board-head .t-right {
  text-align: right;
}

.fee_row {
  grid-template-areas: "course mode price action";
  border-bottom: 1px solid var(--color-line-soft);
  transition: background var(--transition);
}

.fee_row:last-child {
  border-bottom: 0;
}

.fee_row:hover {
  background: var(--color-surface);
}

/* Course cell */
.fee_row-course {
  grid-area: course;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.fee_row-ic {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.fee_row-ic svg {
  width: 1.3rem;
  height: 1.3rem;
}

.fee_row-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.fee_row-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
}

.fee_row-name:hover {
  color: var(--color-primary-dark);
}

.fee_row-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.fee_row-pop {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-pill);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-gold) 60%, #000);
  background: color-mix(in srgb, var(--color-gold) 20%, var(--color-white));
}

.fee_row-pop svg {
  width: 0.7rem;
  height: 0.7rem;
}

/* Mode + schedule cell */
.fee_row-mode {
  grid-area: mode;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.fee_row-mode-v {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.fee_row-mode-d {
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* Price + duration cell (grouped) */
.fee_row-price {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  text-align: right;
}

.fee_row-reg {
  font-size: 0.82rem;
  color: var(--color-muted-soft);
  text-decoration: line-through;
}

.fee_row-fee {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary-deep);
}

.fee_row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin-top: 0.25rem;
}

.fee_row-dur {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.fee_row-dur svg {
  width: 0.85rem;
  height: 0.85rem;
}

.fee_row-save {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-pill);
  color: color-mix(in srgb, var(--color-wa) 52%, #000);
  background: color-mix(in srgb, var(--color-wa) 15%, var(--color-white));
}

/* Apply action */
.fee_row-action {
  grid-area: action;
  justify-self: end;
}

.fee_row-apply {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-sm);
  background: var(--color-tint);
  border: 1px solid var(--color-tint-2);
  color: var(--color-primary-dark);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.fee_row-apply svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s var(--ease-out);
}

.fee_row-apply:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.fee_row-apply:hover svg {
  transform: translateX(0.25rem);
}

.fee_row-apply:active {
  transform: translateY(0.0625rem);
}

/* Foot note under the board */
.fees_foot {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.fees_foot a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.fees_foot a:hover {
  color: var(--color-primary);
}

/* ---------- Stacked cards on smaller screens ---------- */
@media (max-width: 56rem) {
  .fees_board-head {
    display: none;
  }
  .fee_row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "course course" "mode   mode" "price  action";
    align-items: start;
    gap: 0.85rem 1rem;
    padding: 1.15rem 1.25rem;
  }
  .fee_row-price {
    align-items: flex-start;
    align-self: center;
    text-align: left;
  }
  .fee_row-meta {
    justify-content: flex-start;
  }
  .fee_row-action {
    align-self: center;
    justify-self: end;
  }
}
/* ---------- Good-to-know benefit cards ---------- */
.fees_benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 64rem) {
  .fees_benefits {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 34rem) {
  .fees_benefits {
    grid-template-columns: 1fr;
  }
}
.fbenefit {
  position: relative;
  overflow: hidden;
  padding: 1.85rem 1.6rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), border-color var(--transition);
}

.fbenefit::before {
  content: "";
  position: absolute;
  top: -45%;
  right: -45%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}

.fbenefit:hover {
  transform: translateY(-0.4rem);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-tint-2);
}

.fbenefit:hover::before {
  opacity: 1;
}

.fbenefit-n {
  position: absolute;
  top: 0.55rem;
  right: 1.05rem;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-primary);
  opacity: 0.07;
  user-select: none;
}

.fbenefit-ic {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-deep));
  box-shadow: 0 0.5rem 1.25rem -0.45rem color-mix(in srgb, var(--color-primary) 60%, transparent);
  margin-bottom: 1.15rem;
  transition: transform 0.35s var(--ease-out);
}

.fbenefit:hover .fbenefit-ic {
  transform: translateY(-0.15rem) scale(1.06);
}

.fbenefit-ic svg {
  width: 1.5rem;
  height: 1.5rem;
}

.fbenefit h3 {
  position: relative;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.fbenefit p {
  position: relative;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* =========================================================
   Form pages (apply, book a demo, contact) + verify
   ========================================================= */
.formpage_wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

@media (max-width: 56rem) {
  .formpage_wrap {
    grid-template-columns: 1fr;
  }
}
.formpage_wrap-info > * + * {
  margin-top: 1rem;
}

.formpage_wrap-info p {
  color: var(--color-muted);
  line-height: 1.7;
}

.info_list {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}

.info_item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.info_item-ic {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.info_item-ic svg {
  width: 1.15rem;
  height: 1.15rem;
}

.info_item .k {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.info_item .v {
  font-weight: 600;
}

.info_item .v a:hover {
  color: var(--color-primary-dark);
}

.formpage_wrap-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.formpage_wrap-card h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.4rem;
}

.formpage_wrap-card > p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.formpage_wrap-card .form-grid {
  margin-top: 1.25rem;
}

.formpage_wrap-card .btn {
  margin-top: 0.25rem;
}

/* contact — reach-us list */
.contact_reach-h {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.contact_reach {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.contact_reach-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--color-line);
}

.contact_reach-ic {
  flex: none;
  color: var(--color-primary);
  margin-top: 0.1rem;
}

.contact_reach-ic svg {
  width: 1.4rem;
  height: 1.4rem;
}

.contact_reach-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact_reach-text .k {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

.contact_reach-text .v {
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.contact_reach-text .v a:hover {
  color: var(--color-primary-dark);
}

.contact_reach-text .v-sub {
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.contact_follow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.contact_follow-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.contact_follow-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact_follow-links a {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  transition: background var(--transition), color var(--transition);
}

.contact_follow-links a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.contact_follow-links svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* contact — message card */
.contact_form {
  box-shadow: var(--shadow);
}

.contact_form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-line);
}

.contact_form-head h2 {
  margin-bottom: 0.3rem;
}

.contact_form-head p {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.contact_form .form-grid {
  margin-top: 0;
}

.contact_form-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--color-tint);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.contact_form-badge svg {
  width: 0.95rem;
  height: 0.95rem;
}

.contact_form-opt {
  color: var(--color-muted);
  font-weight: 400;
}

/* contact — map */
.contact_map {
  position: relative;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.contact_map-frame {
  display: block;
  width: 100%;
  height: clamp(20rem, 38vw, 30rem);
  border: 0;
}

/* keep the embedded map interactive even while Lenis smooth-scroll is active
   (the global Lenis rule sets iframe pointer-events:none) */
.lenis.lenis-smooth .contact_map-frame {
  pointer-events: auto;
}

@media (max-width: 40rem) {
  .contact_map-frame {
    height: 15rem;
  }
}
/* =========================================================
   Brochure download page
   ========================================================= */
.broch_wrap {
  align-items: center;
}

/* form heading wrapper (hidden by site-forms.js on success); restores the
   intro-paragraph style the old direct-child `.formpage_wrap-card > p` gave it */
.broch_wrap-head p {
  margin-top: 0.4rem;
  color: var(--color-muted);
  font-size: 0.95rem;
}

.broch_wrap-list {
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
  display: grid;
  gap: 1.1rem;
}

.broch_wrap-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
  font-size: 0.98rem;
}

.broch_wrap-check {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.05rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.broch_wrap-check svg {
  width: 0.95rem;
  height: 0.95rem;
}

.broch_wrap-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.broch_wrap-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-line);
  background: var(--color-white);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.broch_wrap-tag svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-primary);
}

/* version chooser (radio cards) */
.broch_wrap-versions-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.broch_wrap-versions-field legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.broch_wrap-versions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.broch_wrap-opt {
  position: relative;
  display: flex;
  cursor: pointer;
}

.broch_wrap-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.broch_wrap-opt-in {
  flex: 1;
  padding: 1rem;
  border-radius: var(--r);
  border: 0.1rem solid var(--color-line);
  background: var(--color-white);
  transition: border-color var(--transition), background var(--transition);
}

.broch_wrap-opt:hover .broch_wrap-opt-in {
  border-color: var(--color-tint-2);
}

.broch_wrap-opt input:checked + .broch_wrap-opt-in {
  border-color: var(--color-primary);
  background: var(--color-tint);
}

.broch_wrap-opt input:focus-visible + .broch_wrap-opt-in {
  outline: 0.1875rem solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 0.15rem;
}

.broch_wrap-opt-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.broch_wrap-opt-ic {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}

.broch_wrap-opt-ic svg {
  width: 1.25rem;
  height: 1.25rem;
}

.broch_wrap-opt input:checked + .broch_wrap-opt-in .broch_wrap-opt-ic {
  background: var(--color-primary);
  color: var(--color-white);
}

.broch_wrap-opt-dot {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 0.125rem solid color-mix(in srgb, var(--color-ink) 22%, var(--color-white));
  background: var(--color-white);
  transition: border-color var(--transition);
}

.broch_wrap-opt-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform var(--transition);
}

.broch_wrap-opt input:checked + .broch_wrap-opt-in .broch_wrap-opt-dot {
  border-color: var(--color-primary);
}

.broch_wrap-opt input:checked + .broch_wrap-opt-in .broch_wrap-opt-dot::after {
  transform: scale(1);
}

.broch_wrap-opt-tag {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.broch_wrap-opt-h {
  display: block;
  margin-top: 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.broch_wrap-opt-d {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.83rem;
  color: var(--color-muted);
  line-height: 1.5;
}

@media (max-width: 24rem) {
  .broch_wrap-versions {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Verify certificate page (centred, light)
   ========================================================= */
.verify_wrap-sec {
  position: relative;
  overflow: hidden;
}

.verify_wrap-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 38% at 50% -8%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%);
}

.verify_wrap-sec .container {
  position: relative;
}

/* breadcrumb on a light surface */
.verify_wrap-crumb {
  justify-content: center;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}

.verify_wrap-crumb a {
  color: var(--color-muted);
}

.verify_wrap-crumb a:hover {
  color: var(--color-primary-dark);
}

.verify_wrap-crumb [aria-current] {
  color: var(--color-ink);
  font-weight: 600;
}

.verify_wrap-crumb svg {
  opacity: 0.5;
}

/* unwrap the JS crumb spans so the injected chevron + name align as real flex items */
.verify_wrap-crumb [data-verify-crumb-base], .verify_wrap-crumb [data-verify-crumb-name] {
  display: contents;
}

/* centred head */
.verify_wrap-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.verify_wrap .eyebrow::before {
  display: none;
}

.verify_wrap-head .eyebrow svg {
  width: 0.95rem;
  height: 0.95rem;
}

.verify_wrap-title {
  font-size: calc(var(--fs-h1) * 0.75);
  color: var(--color-primary-deep);
  letter-spacing: -0.03em;
  margin-top: 1.25rem;
}

.verify_wrap-text {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.6;
}

/* stage */
.verify_wrap-stage {
  max-width: 47rem;
  margin: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) auto 0;
}

/* human-check (rate-limit captcha gate — shown only when challenged) */
.verify_challenge {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.verify_challenge-ic {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.verify_challenge-ic svg {
  width: 1.4rem;
  height: 1.4rem;
}

.verify_challenge-h {
  font-size: 1.3rem;
  color: var(--color-primary-deep);
  letter-spacing: -0.01em;
}

.verify_challenge-text {
  margin-top: 0.5rem;
  color: var(--color-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.verify_challenge-box {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  min-height: 4.875rem;
}

/* search bar */
.verify_bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  background: var(--color-white);
  border: color-mix(in srgb, var(--color-line), black 10%) 0.1rem solid;
  border-radius: 0.75em;
  transition: border-color var(--transition);
}

.verify_bar:focus-within {
  border-color: var(--color-primary);
}

.verify_bar-ic {
  flex: none;
  display: flex;
  color: var(--color-muted);
}

.verify_bar-ic svg {
  width: 1.25rem;
  height: 1.25rem;
}

.verify_bar-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1.05rem;
  color: var(--color-ink);
  padding: 0.55rem 0;
  letter-spacing: 0.01em;
}

.verify_bar-input::placeholder {
  color: var(--color-placeholder);
  font-weight: 300;
}

.verify_bar-btn {
  flex: none;
  border-radius: 0.5em;
}

/* feature row */
.verify_wrap-feats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 0.5rem + 2vw, 3rem);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

.verify_wrap-feat {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.verify_wrap-feat svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-primary);
}

/* loading */
.verify_load {
  text-align: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0;
}

.verify_load-doc {
  position: relative;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1.5rem;
}

.verify_load-doc-page {
  position: absolute;
  inset: 0.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0.9rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: verifyFloat 2.4s var(--ease) infinite;
}

.verify_load-doc-line {
  height: 0.4rem;
  border-radius: var(--r-pill);
  background: var(--color-tint-2);
  animation: verifyLine 2s var(--ease) infinite;
}

.verify_load-doc-line:nth-child(1) {
  width: 55%;
}

.verify_load-doc-line:nth-child(2) {
  width: 100%;
  animation-delay: 0.18s;
}

.verify_load-doc-line:nth-child(3) {
  width: 85%;
  animation-delay: 0.36s;
}

.verify_load-doc-line:nth-child(4) {
  width: 65%;
  animation-delay: 0.54s;
}

.verify_load-doc-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.8rem;
  height: 0.18rem;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  box-shadow: 0 0 0.6rem 0.05rem color-mix(in srgb, var(--color-primary) 50%, transparent);
  animation: verifyScan 2s var(--ease) infinite;
}

.verify_load-doc-badge {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  animation: verifyPulse 2s var(--ease) infinite;
}

.verify_load-doc-badge svg {
  width: 1.2rem;
  height: 1.2rem;
  animation: verifyLens 2s var(--ease) infinite;
}

.verify_load-h {
  font-size: 1.4rem;
  color: var(--color-primary-deep);
}

.verify_load-status {
  margin-top: 0.4rem;
  color: var(--color-muted);
}

.verify_load-bar {
  position: relative;
  width: min(20rem, 75%);
  height: 0.4rem;
  margin: 1.5rem auto 0;
  border-radius: var(--r-pill);
  background: var(--color-surface-2);
  overflow: hidden;
}

.verify_load-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--color-primary);
  transition: width 0.5s var(--ease);
}

.verify_load-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 55%, transparent), transparent);
  transform: translateX(-100%);
  animation: verifyShimmer 2s var(--ease) infinite;
}

@keyframes verifyFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3rem);
  }
}
@keyframes verifyScan {
  0% {
    top: 0.8rem;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 0.9rem);
    opacity: 0;
  }
}
@keyframes verifyLine {
  0%, 100% {
    background: var(--color-tint-2);
  }
  45% {
    background: color-mix(in srgb, var(--color-primary) 55%, var(--color-white));
  }
}
@keyframes verifyPulse {
  0% {
    box-shadow: var(--shadow), 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent);
  }
  70%, 100% {
    box-shadow: var(--shadow), 0 0 0 0.6rem color-mix(in srgb, var(--color-primary) 0%, transparent);
  }
}
@keyframes verifyLens {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
@keyframes verifyShimmer {
  0% {
    transform: translateX(-100%);
  }
  60%, 100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .verify_load-doc-page, .verify_load-doc-line, .verify_load-doc-badge, .verify_load-doc-badge svg, .verify_load-bar::after, .verify_card {
    animation: none;
  }
  .verify_load-doc-scan {
    display: none;
  }
}
/* result card */
.verify_card {
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem -0.85rem color-mix(in srgb, var(--color-primary) 16%, transparent), 0 0.25rem 0.6rem -0.3rem color-mix(in srgb, var(--color-ink) 8%, transparent);
  animation: verifyCardIn 0.45s var(--ease-out) both;
}

@keyframes verifyCardIn {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.verify_card-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.3rem) clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-white)), color-mix(in srgb, var(--color-primary) 5%, var(--color-white)));
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, var(--color-line));
}

.verify_card-check {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: grid;
  place-items: center;
  box-shadow: 0 0.25rem 0.6rem -0.15rem color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.verify_card-check svg {
  width: 1.25rem;
  height: 1.25rem;
}

.verify_card-headtext {
  margin-right: auto;
}

.verify_card-headtext h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-primary-deep);
}

.verify_card-headtext p {
  margin-top: 0.15rem;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.verify_card-badge {
  flex: none;
  padding: 0.32rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-white));
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* icon-only save/print action in the header */
.verify_card-print {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-white));
  background: var(--color-tint);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.verify_card-print:hover {
  background: var(--color-tint-2);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.verify_card-print:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  outline-offset: 0.15rem;
}

.verify_card-print svg {
  width: 1.15rem;
  height: 1.15rem;
}

.verify_card.is-invalid .verify_card-head {
  background: color-mix(in srgb, var(--color-orange) 12%, var(--color-white));
  border-bottom-color: color-mix(in srgb, var(--color-orange) 18%, var(--color-line));
}

.verify_card.is-invalid .verify_card-check {
  background: var(--color-orange);
  box-shadow: 0 0.25rem 0.6rem -0.15rem color-mix(in srgb, var(--color-orange) 50%, transparent);
}

.verify_card.is-invalid .verify_card-badge {
  border-color: color-mix(in srgb, var(--color-orange) 45%, var(--color-white));
  color: color-mix(in srgb, var(--color-orange) 72%, #000);
}

/* not passed — genuine record, result below the pass mark */
.verify_card.is-failed .verify_card-head {
  background: color-mix(in srgb, var(--color-red) 10%, var(--color-white));
  border-bottom-color: color-mix(in srgb, var(--color-red) 16%, var(--color-line));
}

.verify_card.is-failed .verify_card-check {
  background: var(--color-red);
  box-shadow: 0 0.25rem 0.6rem -0.15rem color-mix(in srgb, var(--color-red) 50%, transparent);
}

.verify_card.is-failed .verify_card-badge {
  border-color: color-mix(in srgb, var(--color-red) 45%, var(--color-white));
  color: color-mix(in srgb, var(--color-red) 72%, #000);
}

.verify_card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.25rem;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
}

.verify_card-field {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.verify_card-field-ic {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.verify_card-field-ic svg {
  width: 1rem;
  height: 1rem;
}

.verify_card-field .k {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-muted);
}

.verify_card-field .v {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink);
  word-break: break-word;
}

.verify_card-body {
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  border-top: 1px solid var(--color-line);
}

.verify_card-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 0.65rem;
}

.verify_card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 0.88rem;
}

.verify_card-row > span:first-child {
  color: var(--color-ink-soft);
}

.verify_card-score {
  color: var(--color-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.verify_card-score b {
  color: var(--color-ink);
  font-weight: 600;
}

.verify_card-total {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--color-tint);
  border-radius: var(--r);
}

.verify_card-grade {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  background: var(--color-primary);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.verify_card-total-main {
  margin-right: auto;
}

.verify_card-pct {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink);
}

.verify_card-status {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.verify_card-total-score {
  white-space: nowrap;
  font-size: 1rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.verify_card-total-score b {
  color: var(--color-ink);
  font-weight: 600;
}

/* pass / fail colouring of the score summary bar */
.verify_card-total.is-pass {
  background: color-mix(in srgb, var(--color-green) 9%, var(--color-white));
}

.verify_card-total.is-pass .verify_card-grade {
  background: var(--color-green);
}

.verify_card-total.is-pass .verify_card-status {
  color: color-mix(in srgb, var(--color-green) 68%, #000);
}

.verify_card-total.is-fail {
  background: color-mix(in srgb, var(--color-red) 9%, var(--color-white));
}

.verify_card-total.is-fail .verify_card-grade {
  background: var(--color-red);
}

.verify_card-total.is-fail .verify_card-status {
  color: color-mix(in srgb, var(--color-red) 68%, #000);
}

.verify_card-invalid-body {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  text-align: center;
}

.verify_card-invalid-body p {
  color: var(--color-muted);
  line-height: 1.7;
  font-size: 0.92rem;
  max-width: 44ch;
  margin-inline: auto;
}

.verify_card-invalid-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.verify_card-invalid-body a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* invalid/error/blocked cards get a centered body with a full-size action button */
.verify_card-invalid-body .verify_card-foot-actions {
  justify-content: center;
  margin-top: 1.35rem;
}

.verify_card-invalid-body .verify_card-foot-actions .btn {
  padding: 0.8125rem 1.375rem;
  font-size: 0.95rem;
  border-radius: var(--r);
}

.verify_card-invalid-body .verify_card-foot-actions .btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.verify_card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.85rem clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
  border-top: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 50%, var(--color-white));
}

.verify_card-foot-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.verify_card-foot-note svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-primary);
}

.verify_card-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.verify_card-foot-actions .btn {
  padding: 0.55rem 1rem;
  font-size: 0.84rem;
  border-radius: var(--r-sm);
}

.verify_card-foot-actions .btn svg {
  width: 1rem;
  height: 1rem;
}

/* outline buttons sit in their light-blue (hover) look by default */
.verify_card-foot-actions .btn-ghost {
  background: var(--color-tint);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.verify_card-foot-actions .btn-ghost:hover {
  background: var(--color-tint-2);
  border-color: var(--color-primary-dark);
}

/* multi-result picker (a student with several courses) */
.verify_select-list {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
}

.verify_select-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border: color-mix(in srgb, var(--color-line), black 10%) 1px solid;
  border-radius: var(--r);
  background: var(--color-white);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.verify_select-row:hover {
  border-color: var(--color-primary);
  background: var(--color-tint);
  box-shadow: var(--shadow-sm);
}

.verify_select-row:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 0.15rem;
}

.verify_select-row-ic {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary);
}

.verify_select-row-ic svg {
  width: 1.1rem;
  height: 1.1rem;
}

.verify_select-row-main {
  margin-right: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.verify_select-row-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-ink);
}

.verify_select-row-sub {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.verify_select-badge {
  flex: none;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.verify_select-badge.is-pass {
  background: color-mix(in srgb, var(--color-green) 14%, var(--color-white));
  color: color-mix(in srgb, var(--color-green) 70%, #000);
}

.verify_select-badge.is-fail {
  background: color-mix(in srgb, var(--color-red) 14%, var(--color-white));
  color: color-mix(in srgb, var(--color-red) 70%, #000);
}

.verify_select-row-go {
  flex: none;
  color: var(--color-muted);
  display: flex;
}

.verify_select-row-go svg {
  width: 1.05rem;
  height: 1.05rem;
}

.verify_select-row:hover .verify_select-row-go {
  color: var(--color-primary);
}

@media (max-width: 46rem) {
  .verify_card-grid {
    grid-template-columns: 1fr 1fr;
  }
  .verify_card-grid-spacer {
    display: none;
  }
}
@media (max-width: 30rem) {
  .verify_card-grid {
    grid-template-columns: 1fr;
  }
  .verify_bar {
    flex-wrap: wrap;
    padding: 0.5em;
  }
  .verify_bar-btn {
    width: 100%;
  }
}
/* print-only letterhead + disclaimer (hidden on screen) */
.verify_print-logo, .verify_print-disclaimer {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }
  /* print the card only — drop chrome, actions, and the section glow */
  .header_wrap, .footer_wrap, .verify_wrap-feats, .verify_wrap-crumb, .verify_card-foot-actions, .verify_card-print, [data-verify-pane=form], [data-verify-pane=loading] {
    display: none !important;
  }
  .verify_wrap-sec::before {
    display: none;
  }
  .verify_wrap-sec {
    padding: 0 !important;
  }
  .container {
    max-width: none;
    padding-inline: 0;
  }
  .verify_wrap-stage {
    max-width: none;
    margin: 0;
  }
  /* keep the card flat and force its colours to render */
  .verify_card {
    box-shadow: none;
    border: 1px solid var(--color-line);
    animation: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .verify_card-check {
    box-shadow: none;
  }
  /* letterhead logo at the top */
  .verify_print-logo {
    display: block;
    text-align: center;
    margin-bottom: 7mm;
  }
  .verify_print-logo img {
    height: 13mm;
    width: auto;
  }
  /* disclaimer at the foot */
  .verify_print-disclaimer {
    display: block;
    margin-top: 7mm;
    padding-top: 4mm;
    border-top: 1px solid var(--color-line);
    font-size: 0.68rem;
    line-height: 1.55;
    color: var(--color-muted);
    text-align: center;
  }
}
/* =========================================================
   Apply page (blue aside + sectioned form)
   ========================================================= */
.apply_wrap-crumb {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.apply_wrap-crumb.is-center {
  justify-content: center;
}

.apply_wrap-crumb a {
  color: var(--color-muted);
}

.apply_wrap-crumb a:hover {
  color: var(--color-primary-dark);
}

.apply_wrap-crumb [aria-current] {
  color: var(--color-ink);
  font-weight: 600;
}

.apply_wrap-crumb svg {
  opacity: 0.5;
}

.apply_wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
}

/* blue aside */
.apply_wrap-aside {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--color-primary);
  color: var(--color-white);
}

.apply_wrap-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(60% 45% at 100% 0%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 60%), radial-gradient(55% 50% at 0% 100%, color-mix(in srgb, var(--color-primary) 55%, #000), transparent 60%);
}

.apply_wrap-aside > * {
  position: relative;
}

.apply_wrap-aside-h {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.apply_wrap-aside-text {
  margin-top: 1rem;
  color: var(--on-dark);
  line-height: 1.6;
}

.apply_wrap-aside-rule {
  border: 0;
  border-top: 1px solid var(--on-dark-line);
  margin: clamp(1.5rem, 1rem + 1.5vw, 2rem) 0;
}

.apply_wrap-aside-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-dark-soft);
}

.apply_steps {
  margin-top: 1.25rem;
}

.apply_step {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.apply_step:last-child {
  padding-bottom: 0;
}

.apply_step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.84rem;
  top: 1.9rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--on-dark-line);
}

.apply_step-n {
  position: relative;
  z-index: 1;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 600;
}

.apply_step-b h4 {
  font-size: 1rem;
  color: var(--color-white);
  font-weight: 600;
}

.apply_step-b p {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--on-dark-soft);
  line-height: 1.5;
}

.apply_wrap-aside-contacts {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2rem);
}

.apply_contact {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r);
  background: var(--on-dark-fill);
  border: 1px solid var(--on-dark-line);
  transition: background var(--transition);
}

.apply_contact:hover {
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
}

.apply_contact-ic {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  color: var(--color-white);
}

.apply_contact.is-wa .apply_contact-ic {
  background: var(--color-wa);
}

.apply_contact-ic svg {
  width: 1.15rem;
  height: 1.15rem;
}

.apply_contact-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.apply_contact-t .k {
  font-size: 0.78rem;
  color: var(--on-dark-soft);
}

.apply_contact-t .v {
  font-weight: 600;
  color: var(--color-white);
}

/* form sits directly on the page surface — no card/box */
.apply_wrap-form {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.apply_form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-line);
}

.apply_form-head h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.3rem;
}

.apply_form-head p {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.apply_form-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--color-tint);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.apply_form-badge svg {
  width: 0.95rem;
  height: 0.95rem;
}

.apply_form {
  display: grid;
  gap: 1.75rem;
}

.apply_sec-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.apply_sec-n {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  background: var(--color-tint);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.apply_sec-lbl {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.apply_field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

/* segmented control */
.apply_seg-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.apply_seg {
  position: relative;
  display: flex;
  cursor: pointer;
}

.apply_seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.apply_seg-btn {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.4rem;
  border-radius: var(--r);
  border: 0.1rem solid var(--color-line);
  background: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.apply_seg:hover .apply_seg-btn {
  border-color: var(--color-tint-2);
}

.apply_seg input:checked + .apply_seg-btn {
  border-color: var(--color-primary);
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.apply_seg input:focus-visible + .apply_seg-btn {
  outline: 0.1875rem solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 0.15rem;
}

.apply_form-submit {
  display: grid;
  gap: 0.85rem;
}

.apply_form-fine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.apply_form-fine svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

/* ---- shared form feedback (apply / book-demo / contact) ---- */
/* reCAPTCHA checkbox slot */
.form_captcha {
  display: grid;
  gap: 0.5rem;
}

.form_captcha .g-recaptcha {
  min-height: 4.875rem;
}

/* submit button busy state (set by site-forms.js during the fetch) */
.btn.is-loading {
  opacity: 0.85;
  cursor: progress;
}

.btn-spinner {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.55em;
  vertical-align: -0.18em;
  border: 0.16em solid color-mix(in srgb, currentColor 32%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btnSpin 0.65s linear infinite;
}

@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner {
    animation-duration: 1.4s;
  }
}
/* whole-form error banner (e.g. a save failure) */
.form_error {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--color-red) 7%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-red) 28%, var(--color-line));
  color: color-mix(in srgb, var(--color-red) 78%, #000);
  font-size: 0.88rem;
  line-height: 1.5;
}

.form_error svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  color: var(--color-red);
}

/* inline danger notice (e.g. out-of-area block). Uses its own class so the JS
   clearErrors() (which strips .form_error) leaves it intact across submits. */
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--color-red) 7%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-red) 28%, var(--color-line));
  color: color-mix(in srgb, var(--color-red) 78%, #000);
  font-size: 0.86rem;
  line-height: 1.5;
}

.form-notice[hidden] {
  display: none;
}

.form-notice svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  color: var(--color-red);
}

/* success panel — replaces the form after a submission lands */
.form_success {
  text-align: center;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) 1rem;
}

.form_success-ic {
  width: 4.25rem;
  height: 4.25rem;
  margin: 1rem auto 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-green);
  color: var(--color-white);
}

.form_success-ic svg {
  width: 2rem;
  height: 2rem;
  stroke-width: 3;
}

.form_success h2 {
  font-size: var(--fs-h3);
  color: var(--color-primary-deep);
  letter-spacing: -0.01em;
}

.form_success p {
  margin: 0.65rem auto 0;
  max-width: 32rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.form_success p a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.form_success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-block: 1.25rem 1.5rem;
}

@media (max-width: 56rem) {
  .apply_wrap {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Book-a-demo — light aside variant + extras
   (shares the apply_* admissions-form module above)
   ========================================================= */
.apply_wrap-aside.is-light {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-white));
  background-image: radial-gradient(80% 65% at 0% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 65%);
  border: color-mix(in srgb, var(--color-primary), white 65%) 1px solid;
}

.apply_wrap-aside.is-light::before {
  display: none;
}

.apply_wrap-aside.is-light .eyebrow {
  background: var(--color-white);
  border-color: var(--color-line);
}

.apply_wrap-aside.is-light .apply_wrap-aside-h {
  color: var(--color-primary-deep);
}

.apply_wrap-aside.is-light .apply_wrap-aside-text {
  color: var(--color-muted);
}

.apply_wrap-aside.is-light .apply_wrap-aside-rule {
  border-top-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-white));
}

.apply_wrap-aside.is-light .apply_wrap-aside-lbl {
  color: var(--color-muted);
}

.apply_wrap-aside.is-light .apply_step:not(:last-child)::before {
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-white));
}

.apply_wrap-aside.is-light .apply_step-n {
  background: var(--color-primary);
  color: var(--color-white);
}

.apply_wrap-aside.is-light .apply_step-b h4 {
  color: var(--color-ink);
}

.apply_wrap-aside.is-light .apply_step-b p {
  color: var(--color-muted);
}

.apply_wrap-aside.is-light .apply_contact {
  background: var(--color-white);
  border-color: var(--color-line);
  box-shadow: var(--shadow-sm);
}

.apply_wrap-aside.is-light .apply_contact:hover {
  border-color: var(--color-tint-2);
}

.apply_wrap-aside.is-light .apply_contact-ic {
  background: var(--color-tint);
  color: var(--color-primary);
}

.apply_wrap-aside.is-light .apply_contact.is-wa .apply_contact-ic {
  background: color-mix(in srgb, var(--color-wa) 16%, var(--color-white));
  color: var(--color-wa);
}

.apply_wrap-aside.is-light .apply_contact-t .k {
  color: var(--color-muted);
}

.apply_wrap-aside.is-light .apply_contact-t .v {
  color: var(--color-ink);
}

.apply_seg-group.is-2 {
  grid-template-columns: 1fr 1fr;
}

.apply_seg-btn.is-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding-block: 0.7rem;
}

.apply_seg-btn.is-stacked strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.apply_seg-btn.is-stacked small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
}

.apply_seg input:checked + .apply_seg-btn.is-stacked small {
  color: var(--color-primary-dark);
}

/* form sits directly on the page surface — no card/box (unlike apply) */
.bookdemo_form {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.bookdemo_form-head {
  margin-bottom: 1.75rem;
}

.bookdemo_form-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.bookdemo_form-head h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0;
}

.bookdemo_form-head p {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =========================================================
   Job application — simple centred form (no hero)
   ========================================================= */
.jobapply_wrap {
  max-width: 44rem;
  margin-inline: auto;
}

.jobapply_wrap-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 1.75rem + 2vw, 3.75rem);
}

.jobapply_wrap-head .eyebrow {
  margin-bottom: 1rem;
}

.jobapply_wrap-title {
  font-size: var(--fs-h2);
  color: var(--color-primary-deep);
  letter-spacing: -0.02em;
}

.jobapply_wrap-text {
  margin-top: 0.85rem;
  color: var(--color-muted);
  line-height: 1.65;
}

/* selected-role confirmation chip */
.jobapply_role {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--r);
  background: var(--color-tint);
  border: 1px solid var(--color-tint-2);
}

.jobapply_role-ic {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--color-white);
  color: var(--color-primary);
}

.jobapply_role-ic svg {
  width: 1.2rem;
  height: 1.2rem;
}

.jobapply_role-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.jobapply_role-t .k {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.jobapply_role-t .v {
  font-weight: 700;
  color: var(--color-ink);
}

/* native file input, styled to match the form controls */
.jobapply_file {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r);
  border: 2px dashed color-mix(in srgb, var(--color-primary) 40%, var(--color-tint-2));
  background: var(--color-tint);
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.jobapply_file:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-tint));
}

.jobapply_file:focus, .jobapply_file:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-tint);
}

.jobapply_file::file-selector-button {
  margin-right: 0.85rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.jobapply_file:hover::file-selector-button {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* =========================================================
   flatpickr — branded calendar (Book a demo: Preferred date).
   Base layout from assets/css/vendor/flatpickr.min.css; these
   rules (scoped via .stics-fp added in datepicker.js) restyle it.
   The day grid is rebuilt with CSS grid so columns stay aligned,
   nothing clips, and days render as true circles.
   ========================================================= */
/* visible (alt) input: calendar glyph + pointer cursor */
.dp-field {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6976' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  padding-right: 2.75rem;
}

/* popover shell */
.flatpickr-calendar.stics-fp {
  width: 20.5rem;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  padding: 0.5rem 0.65rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  box-shadow: 0 1.5rem 3rem -1rem color-mix(in srgb, var(--color-ink) 30%, transparent), 0 0.4rem 0.8rem -0.4rem color-mix(in srgb, var(--color-ink) 12%, transparent);
  font-family: inherit;
}

.flatpickr-calendar.stics-fp.arrowTop::before {
  border-bottom-color: var(--color-line);
}

.flatpickr-calendar.stics-fp.arrowTop::after {
  border-bottom-color: var(--color-white);
}

.flatpickr-calendar.stics-fp.arrowBottom::before {
  border-top-color: var(--color-line);
}

.flatpickr-calendar.stics-fp.arrowBottom::after {
  border-top-color: var(--color-white);
}

/* header: prev | "June 2026" | next */
.stics-fp .flatpickr-months {
  padding: 0.2rem 0 0.55rem;
  align-items: center;
}

.stics-fp .flatpickr-months .flatpickr-month {
  height: 2.25rem;
  color: var(--color-ink);
}

.stics-fp .flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  left: 0;
  width: 100%;
  height: 2.25rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}

.stics-fp .flatpickr-current-month .cur-month {
  margin: 0;
  font-weight: 700;
  color: var(--color-ink);
}

.stics-fp .flatpickr-current-month .numInputWrapper {
  width: 3.6ch;
}

.stics-fp .flatpickr-current-month input.cur-year {
  padding: 0;
  font-weight: 700;
  color: var(--color-ink);
}

.stics-fp .numInputWrapper span {
  display: none;
} /* hide year up/down spinners */
.stics-fp .numInputWrapper:hover {
  background: transparent;
}

.stics-fp .flatpickr-prev-month,
.stics-fp .flatpickr-next-month {
  top: 0.2rem;
  height: 2rem;
  width: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--color-ink-soft);
  transition: background var(--transition), color var(--transition);
}

.stics-fp .flatpickr-prev-month {
  left: 0.2rem;
}

.stics-fp .flatpickr-next-month {
  right: 0.2rem;
}

.stics-fp .flatpickr-prev-month:hover,
.stics-fp .flatpickr-next-month:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

.stics-fp .flatpickr-prev-month svg,
.stics-fp .flatpickr-next-month svg {
  width: 0.8rem;
  height: 0.8rem;
}

.stics-fp .flatpickr-prev-month svg path,
.stics-fp .flatpickr-next-month svg path {
  fill: currentColor;
}

/* fill the calendar width so the columns line up and nothing clips */
.stics-fp .flatpickr-innerContainer,
.stics-fp .flatpickr-rContainer,
.stics-fp .flatpickr-weekdays,
.stics-fp .flatpickr-weekdaycontainer,
.stics-fp .flatpickr-days,
.stics-fp .dayContainer {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

.stics-fp .flatpickr-weekdays {
  height: 2.1rem;
}

/* weekday headers + day grid: matching 7-column CSS grids */
.stics-fp .flatpickr-weekdaycontainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0 0.1rem;
}

.stics-fp span.flatpickr-weekday {
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stics-fp .dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem 0.1rem;
  padding: 0;
}

.stics-fp .flatpickr-day {
  width: auto;
  max-width: none;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 500;
}

.stics-fp .flatpickr-day:hover,
.stics-fp .flatpickr-day:focus {
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.stics-fp .flatpickr-day.today {
  color: var(--color-primary);
  font-weight: 700;
}

.stics-fp .flatpickr-day.today:hover {
  background: var(--color-tint);
  color: var(--color-primary-dark);
}

.stics-fp .flatpickr-day.selected,
.stics-fp .flatpickr-day.selected:hover,
.stics-fp .flatpickr-day.selected:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
}

.stics-fp .flatpickr-day.prevMonthDay,
.stics-fp .flatpickr-day.nextMonthDay {
  color: var(--color-muted-soft);
}

.stics-fp .flatpickr-day.flatpickr-disabled,
.stics-fp .flatpickr-day.flatpickr-disabled:hover {
  color: color-mix(in srgb, var(--color-muted) 40%, var(--color-white));
  background: transparent;
  cursor: default;
}

/* =========================================================
   Content pages: testimonials, blog
   ========================================================= */
/* testimonials grid — reuses the home page testimonial card (.cflow_wrap-card.is-static, see _home.scss) */
.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.125rem;
}

/* blog — featured split card */
.blog_feature {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.blog_feature .ph {
  min-height: 20rem;
  height: 100%;
  border-radius: 0;
}

.blog_feature-body {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog_feature-body h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem);
  color: var(--color-primary-deep);
  line-height: 1.18;
  margin: 0.85rem 0;
}

.blog_feature-body p {
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

@media (max-width: 48rem) {
  .blog_feature {
    grid-template-columns: 1fr;
  }
  .blog_feature .ph {
    min-height: 14rem;
  }
}
/* blog — topic filter */
.blog_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.blog_filter .chip {
  border-radius: var(--r-pill);
  border: 1px solid var(--color-line);
  background: var(--color-white);
  padding: 0.55rem 1.1rem;
  color: var(--color-muted);
}

.blog_filter .chip:hover {
  background: var(--color-tint);
  border-color: var(--color-tint-2);
  color: var(--color-primary-dark);
}

.blog_filter .chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

/* blog — grid */
.blog_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.625rem;
}

/* blog — empty state + load more */
.blog_empty {
  text-align: center;
  color: var(--color-muted);
  padding: 2.5rem 0;
}

.link-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.link-btn:hover {
  color: var(--color-primary);
}

.blog_more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* =========================================================
   Blog post detail (post.php)
   ========================================================= */
/* ---------- Hero (light, centered) ---------- */
.post_hero {
  text-align: center;
}

.post_hero-inner {
  max-width: 50rem;
  margin-inline: auto;
}

.post_crumb {
  justify-content: center;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.post_crumb a {
  color: var(--color-muted);
}

.post_crumb a:hover {
  color: var(--color-primary-dark);
}

.post_crumb [aria-current] {
  color: var(--color-ink);
  font-weight: 600;
}

.post_crumb svg {
  opacity: 0.5;
}

.post_hero-tag {
  margin-bottom: 1.1rem;
}

.post_hero-title {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-primary-deep);
}

.post_hero-excerpt {
  margin: 1.1rem auto 0;
  max-width: 44rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.post_hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.post_hero-by {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-ink);
}

.post_hero-av {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.72rem;
}

.post_hero-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--color-muted-soft);
}

/* ---------- Cover ---------- */
.post_cover {
  max-width: 62rem;
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.post_cover img {
  width: 100%;
  aspect-ratio: 16/8.4;
  object-fit: cover;
}

/* ---------- Article body + prose ---------- */
.post_body {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem);
}

.post_prose {
  color: var(--color-ink-soft);
}

.post_prose > * + * {
  margin-top: 1.25rem;
}

.post_prose p {
  font-size: 1.05rem;
  line-height: 1.85;
}

.post_prose-lead {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.post_prose h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
  color: var(--color-primary-deep);
  margin-top: 2.5rem;
}

.post_prose h3 {
  font-size: 1.2rem;
  color: var(--color-ink);
  margin-top: 2rem;
}

.post_prose ul, .post_prose ol {
  padding-left: 1.35rem;
  display: grid;
  gap: 0.55rem;
}

.post_prose li {
  line-height: 1.7;
}

.post_prose li::marker {
  color: var(--color-primary);
}

.post_prose strong {
  color: var(--color-ink);
  font-weight: 700;
}

.post_prose a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.post_prose a:hover {
  color: var(--color-primary);
}

.post_prose blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-tint);
  border-left: 0.1875rem solid var(--color-primary);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-primary-deep);
}

.post_prose img {
  width: 100%;
  border-radius: var(--r-lg);
}

/* ---------- Share ---------- */
.post_share {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.post_share-lbl {
  font-size: 0.92rem;
  font-weight: 600;
}

.post_share-links {
  display: flex;
  gap: 0.5rem;
}

.post_share-links a {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.post_share-links a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-0.15rem);
}

.post_share-links svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* ---------- Prev / next pager (simple text links) ---------- */
.post_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.post_nav-link {
  font-weight: 600;
  color: var(--color-primary-dark);
  transition: color var(--transition);
}

.post_nav-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.post_nav-sep {
  color: var(--color-muted-soft);
}

/* =========================================================
   Legal pages (privacy, terms, refund) + 404
   ========================================================= */
.legal_wrap {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}

.legal_toc {
  position: sticky;
  top: calc(var(--topbar-h) + var(--header-h) + 1.5rem);
}

.legal_toc ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.legal_toc a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--color-muted);
  font-size: 0.9rem;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.legal_toc a:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.legal_toc a.is-active {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.legal_meta {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.legal_prose h2 {
  font-size: var(--fs-h3);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 1.5rem);
}

.legal_prose h2:first-child {
  margin-top: 0;
}

.legal_prose p {
  color: var(--color-ink-soft);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.legal_prose ul {
  margin: 0 0 1rem 1.25rem;
  color: var(--color-ink-soft);
  line-height: 1.8;
}

.legal_prose li {
  margin-bottom: 0.4rem;
}

.legal_prose a {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 56rem) {
  .legal_wrap {
    grid-template-columns: 1fr;
  }
  .legal_toc {
    position: static;
  }
}
/* 404 / empty */
.error_wrap {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.error_wrap-code {
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--color-primary);
  line-height: 1;
}

.error_wrap-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* =========================================================
   FAQ page — reuses the native <details> accordion (.mod)
   from the course curriculum; only layout + the help panel
   are page-specific here.
   ========================================================= */
.faq_wrap {
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
}

.faq_wrap-head {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
  margin-bottom: clamp(0.75rem, 0.25rem + 1.5vw, 1.75rem);
}

.faq_wrap-head .breadcrumb {
  margin-bottom: 0;
}

.faq_wrap-head .eyebrow {
  justify-self: center;
} /* hug content, centered in the grid */
.faq_wrap-intro {
  max-width: 42rem;
  margin-inline: auto;
}

.faq_wrap-group {
  display: grid;
  gap: 1rem;
}

.faq_wrap-grouptitle {
  color: var(--color-ink);
}

.faq_wrap-list {
  display: grid;
  gap: 0.75rem;
}

/* Closing "still have questions" panel */
.faq_wrap-help {
  padding: 2rem 1.5rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  background: var(--color-tint);
  border-color: var(--color-tint-2);
}

.faq_wrap-help p {
  max-width: 34rem;
  color: var(--color-ink-soft);
}

.faq_wrap-help-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

/*# sourceMappingURL=main.css.map */