/* ============================================================================
   Staff Training design system (2026)
   Loads after vendored Bootstrap 5.3 and themes it via CSS custom properties.
   Hand-written, build-free. One system for every page.
   Layers:
     1. Tokens            — brand palette, type scale, spacing, radii, shadows
     2. Base              — typography, links, focus, media guards
     3. Bootstrap theming — component variable overrides
     4. Chrome            — topbar, navbar, subnav, footer
     5. Components        — pagehead, hero, cards, grids, forms, tables, misc
     6. Legacy layer      — makes untouched 2000s-era page markup render sanely
     7. Utilities, print
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Display face — Source Serif 4 variable (OFL). H1/H2 personality only. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-opsz-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root,
html[data-theme="light"] {
  color-scheme: light;

  /* brand teal (heritage #007580) — fixed; roles flip, not the scale */
  --st-teal-950: #022b2e;
  --st-teal-900: #043b3f;
  --st-teal-800: #045c64;
  --st-teal-700: #007580;
  --st-teal-600: #0a8a94;
  --st-teal-500: #16a0aa;
  --st-teal-400: #45b8c0;
  --st-teal-300: #7fd0d6;
  --st-teal-200: #b3e3e6;
  --st-teal-100: #d9f1f2;
  --st-teal-50:  #eff9f9;

  /* accent (heritage #FF4500, refined for contrast) — conversion shout only */
  --st-accent-700: #c2410c;
  --st-accent-600: #d9480f;
  --st-accent-500: #e8590c;
  --st-accent-100: #ffe8d9;

  /* neutrals — warmer paper so white product surfaces lift without box shadows */
  --st-ink:      #121f24;
  --st-body:     #334248;
  --st-muted:    #5c6c74;
  --st-line:     #e4e9eb;
  --st-surface:  #f4f2ec;
  --st-bg:       #ffffff;
  --st-card:     #ffffff;

  /* semantic */
  --st-success: #2b8a3e;
  --st-danger:  #c92a2a;
  --st-warning: #e67700;

  /* type — single family site-wide (Sharnelle: test one font, not serif+sans mix) */
  --st-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --st-font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --st-fs-xs:  0.8125rem;
  --st-fs-sm:  0.9rem;
  --st-fs-md:  1.0125rem;
  --st-fs-lg:  clamp(1.075rem, 1rem + 0.35vw, 1.2rem);
  --st-fs-h4:  clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --st-fs-h3:  clamp(1.25rem, 1.05rem + 0.75vw, 1.55rem);
  --st-fs-h2:  clamp(1.55rem, 1.2rem + 1.35vw, 2.15rem);
  --st-fs-h1:  clamp(1.85rem, 1.4rem + 2vw, 2.75rem);
  --st-fs-display: clamp(2.15rem, 1.55rem + 3.1vw, 3.85rem);

  /* geometry */
  --st-radius-sm: 0.45rem;
  --st-radius:    0.65rem;
  --st-radius-lg: 1rem;
  --st-space:     clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
  --st-container: 75rem;

  /* elevation — quieter defaults; lift on interaction only */
  --st-shadow-sm: 0 1px 2px rgba(2, 43, 46, 0.04);
  --st-shadow:    0 2px 8px rgba(2, 43, 46, 0.06), 0 12px 28px rgba(2, 43, 46, 0.07);
  --st-shadow-lg: 0 8px 20px rgba(2, 43, 46, 0.1), 0 24px 48px rgba(2, 43, 46, 0.12);

  /* portal chrome — brand cap stays teal; rail body is quiet product surface */
  --st-chrome-brand-bg: linear-gradient(105deg, #022b2e 0%, #045c64 55%, #007580 100%);
  --st-chrome-brand-bg-rail: linear-gradient(180deg, #022b2e 0%, #045c64 100%);
  --st-chrome-brand-fg: #ffffff;
  --st-chrome-bg: var(--st-bg);
  --st-chrome-fg: var(--st-ink);
  --st-chrome-muted: var(--st-muted);
  --st-chrome-line: var(--st-line);
  --st-chrome-hover: var(--st-teal-50);
  --st-chrome-active-bg: var(--st-teal-50);
  --st-chrome-active-fg: var(--st-teal-800);
  --st-chrome-active-bar: var(--st-teal-400);
  --st-chrome-ico: var(--st-teal-700);
  --st-chrome-wash-a: rgba(127, 208, 214, 0.16);
  --st-chrome-wash-b: rgba(232, 89, 12, 0.05);

  /* bootstrap root hooks */
  --bs-body-font-family: var(--st-font);
  --bs-body-color: var(--st-body);
  --bs-body-bg: var(--st-surface);
  --bs-link-color: var(--st-teal-700);
  --bs-link-hover-color: var(--st-teal-800);
  --bs-primary: var(--st-teal-700);
  --bs-primary-rgb: 0, 117, 128;
  --bs-border-color: var(--st-line);
  --bs-border-radius: var(--st-radius-sm);
  accent-color: var(--st-teal-700);
}

/* Dark theme — portals only (FOUC sets data-theme; public site stays light). */
html[data-theme="dark"] {
  color-scheme: dark;

  --st-ink:      #e8f0f1;
  --st-body:     #c5d0d4;
  --st-muted:    #8a9ba3;
  --st-line:     #2a3a3e;
  --st-surface:  #0f181a;
  --st-bg:       #152226;
  --st-card:     #1a282c;

  --st-success: #5dcc72;
  --st-danger:  #f07171;
  --st-warning: #f0a202;

  --st-teal-50:  #0d2a2e;
  --st-teal-100: #12353a;
  --st-teal-200: #1a4a50;

  --st-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --st-shadow:    0 2px 10px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  --st-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.4);

  --st-chrome-bg: #0c1517;
  --st-chrome-fg: #e8f0f1;
  --st-chrome-muted: #8a9ba3;
  --st-chrome-line: #243338;
  --st-chrome-hover: rgba(127, 208, 214, 0.12);
  --st-chrome-active-bg: rgba(0, 117, 128, 0.32);
  --st-chrome-active-fg: #b8e8eb;
  --st-chrome-active-bar: #7fd0d6;
  --st-chrome-ico: #7fd0d6;
  --st-chrome-wash-a: rgba(0, 117, 128, 0.18);
  --st-chrome-wash-b: rgba(0, 0, 0, 0.2);

  --bs-body-color: var(--st-body);
  --bs-body-bg: var(--st-surface);
  --bs-link-color: var(--st-teal-400);
  --bs-link-hover-color: var(--st-teal-300);
  --bs-border-color: var(--st-line);
  accent-color: var(--st-teal-400);
}

/* Shared theme toggle (rail foot / session row). Quiet chrome control. */
.st-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--st-chrome-line);
  background: transparent;
  color: var(--st-chrome-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.st-theme-toggle:hover {
  background: var(--st-chrome-hover);
  color: var(--st-chrome-active-fg);
  border-color: var(--st-chrome-active-bar);
}
.st-theme-toggle:focus-visible {
  outline: 2px solid var(--st-chrome-active-bar);
  outline-offset: 2px;
}
/* On teal brand bars (mobile appbar), invert the control. */
.tp-appbar .st-theme-toggle,
.lp-bar .st-theme-toggle,
.sec-appbar .st-theme-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(234, 250, 250, 0.88);
  background: rgba(255, 255, 255, 0.08);
}
.tp-appbar .st-theme-toggle:hover,
.lp-bar .st-theme-toggle:hover,
.sec-appbar .st-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

/* -------------------------------------------------------------------- base */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Always show the vertical scrollbar track so (a) navigating between short
     and tall pages doesn't shift the centred layout, and (b) short pages don't
     leave an empty gutter strip on the right. overflow-y:scroll fills that
     space with the (inactive) track rather than reserving blank space the way
     scrollbar-gutter:stable does; it's a no-op with overlay scrollbars. */
  overflow-y: scroll;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  line-height: 1.65;
  color: var(--st-body);
  background: var(--st-bg);
  overflow-x: clip; /* legacy content must never cause a horizontal scrollbar */
  margin: 0;
}

/* Sticky footer: the shell fills at least the viewport, and the main content
   grows to push the footer to the very bottom on short pages. */
body.st-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.st-shell > .st-main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--st-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-block: 0 0.55em;
  text-wrap: balance;
}
/* Display face on major headings — Inter stays for UI chrome & h3+ */
h1, .h1, h2, .h2 {
  font-family: var(--st-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--st-font);
  font-weight: 700;
}
h1, .h1 { font-size: var(--st-fs-h1); }
h2, .h2 { font-size: var(--st-fs-h2); }
h3, .h3 { font-size: var(--st-fs-h3); }
h4, .h4 { font-size: var(--st-fs-h4); }

p { margin-block: 0 1em; }

a {
  color: var(--st-teal-700);
  text-decoration: none;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--st-teal-800); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--st-teal-400);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }

::selection { background: var(--st-teal-200); color: var(--st-teal-950); }

.st-skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--st-teal-800);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--st-radius-sm) 0;
}
.st-skip-link:focus { left: 0; color: #fff; }

/* -------------------------------------------------- bootstrap 5.3 theming */
.btn { font-weight: 600; border-radius: var(--st-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--st-teal-700);
  --bs-btn-border-color: var(--st-teal-700);
  --bs-btn-hover-bg: var(--st-teal-800);
  --bs-btn-hover-border-color: var(--st-teal-800);
  --bs-btn-active-bg: var(--st-teal-900);
  --bs-btn-active-border-color: var(--st-teal-900);
  --bs-btn-disabled-bg: var(--st-teal-300);
  --bs-btn-disabled-border-color: var(--st-teal-300);
  --bs-btn-focus-shadow-rgb: 22, 160, 170;
}
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--st-accent-600);
  --bs-btn-border-color: var(--st-accent-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--st-accent-700);
  --bs-btn-hover-border-color: var(--st-accent-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-accent-700);
  --bs-btn-active-border-color: var(--st-accent-700);
  --bs-btn-focus-shadow-rgb: 232, 89, 12;
}
.btn-outline-primary {
  --bs-btn-color: var(--st-teal-700);
  --bs-btn-border-color: var(--st-teal-600);
  --bs-btn-hover-bg: var(--st-teal-700);
  --bs-btn-hover-border-color: var(--st-teal-700);
  --bs-btn-active-bg: var(--st-teal-800);
  --bs-btn-active-border-color: var(--st-teal-800);
  --bs-btn-focus-shadow-rgb: 22, 160, 170;
}
.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--st-line);
  --bs-btn-hover-bg: var(--st-surface);
  --bs-btn-hover-border-color: var(--st-line);
}
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-color: var(--st-teal-950);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--st-teal-950);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.form-control, .form-select {
  border-color: var(--st-line);
  border-radius: var(--st-radius-sm);
  padding: 0.7rem 0.95rem;
  color: var(--st-ink);
  background: var(--st-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 2.85rem;
}
.form-control:hover, .form-select:hover {
  border-color: var(--st-teal-200);
}
.form-control:focus, .form-select:focus {
  border-color: var(--st-teal-500);
  background: #fff;
  box-shadow: 0 0 0 0.25rem rgba(22, 160, 170, 0.16);
}
.form-control::placeholder { color: #8a9aa3; }
.form-label {
  font-weight: 600;
  color: var(--st-ink);
  margin-bottom: 0.4rem;
  font-size: var(--st-fs-sm);
}
.form-text { color: var(--st-muted); font-size: var(--st-fs-xs); }
textarea.form-control {
  min-height: 9rem;
  line-height: 1.55;
  resize: vertical;
}

.card {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-sm);
}
.card-header, .card-footer { background: var(--st-surface); border-color: var(--st-line); }

.modal-content { border: 0; border-radius: var(--st-radius); box-shadow: var(--st-shadow-lg); }
.modal-header { border-bottom-color: var(--st-line); }
.modal-footer { border-top-color: var(--st-line); }

.dropdown-menu {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  box-shadow: var(--st-shadow);
  padding-block: 0.4rem;
}
.dropdown-item { padding: 0.45rem 1rem; font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--st-teal-50); color: var(--st-teal-800); }
.dropdown-item.active { background: var(--st-teal-700); }

.badge.text-bg-primary, .badge.bg-primary { background-color: var(--st-teal-700) !important; }

.table { --bs-table-border-color: var(--st-line); }
.table thead th { color: var(--st-ink); background: var(--st-surface); }

/* ------------------------------------------------------------------ chrome */
/* top bar */
.st-topbar {
  background: linear-gradient(90deg, var(--st-teal-900), var(--st-teal-700));
  color: #fff;
  font-size: var(--st-fs-sm);
}
.st-topbar__inner {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: 0.45rem clamp(1rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.st-topbar a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  opacity: 0.95;
}
.st-topbar a:hover { opacity: 1; color: #fff; text-decoration: underline; }
.st-topbar__tagline {
  margin-left: auto;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
@media (max-width: 767.98px) {
  .st-topbar__tagline, .st-topbar__email { display: none; }
  .st-topbar__inner { justify-content: center; }
}

/* navbar */
.st-navbar {
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow 0.2s ease;
}
.st-navbar.is-stuck { box-shadow: var(--st-shadow); }
/* Wordmark logo (assets/brand/logo.png) */
.st-logo {
  display: block;
  height: 2.35rem;
  width: auto;
  max-width: min(14rem, 52vw);
  object-fit: contain;
}
.st-logo--mono {
  /* Legacy: invert colour logo on dark chrome if footer asset missing. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
  background: transparent;
}
/* Footer wordmark: already white on transparent (logo-footer.png). */
.st-logo--footer {
  filter: none;
  opacity: 1;
  background: transparent;
}
.st-footer__brand .st-logo {
  height: 2.6rem;
  max-width: 16rem;
  margin-bottom: 0.9rem;
  display: block;
  background: transparent;
}
.st-footer__brand .st-logo--footer {
  height: 2.75rem;
  max-width: 18rem;
}
.st-offcanvas .st-logo { height: 2rem; }

.st-navbar > .st-navbar__inner {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: 0.55rem clamp(1rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.st-brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.st-brand:hover { text-decoration: none; }
.st-brand svg { height: 44px; width: auto; display: block; }

.st-nav {
  display: none;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.st-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--st-radius-sm);
  color: var(--st-ink);
  font-weight: 600;
  font-size: var(--st-fs-sm);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
}
.st-nav__link:hover { background: var(--st-teal-50); color: var(--st-teal-800); text-decoration: none; }
.st-nav__link.is-active { color: var(--st-teal-700); }
/*
 * Active underline. Non-dropdown items use ::after.
 * Dropdown parents (Info) already use Bootstrap's ::after for the caret — if we
 * reuse ::after for the underline, the arrow vanishes and the bar shrinks on
 * every Info subpage. Put the underline on ::before for those instead.
 */
.st-nav__link.is-active:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  inset-inline: 0.7rem;
  bottom: 0.15rem;
  height: 3px;
  border-radius: 2px;
  background: var(--st-accent-500);
}
.st-nav__link.dropdown-toggle.is-active::before {
  content: "";
  position: absolute;
  inset-inline: 0.7rem;
  bottom: 0.15rem;
  height: 3px;
  border-radius: 2px;
  background: var(--st-accent-500);
}
/* Bootstrap caret — always present on Info, including when the parent is active */
.st-nav .dropdown-toggle::after {
  margin-left: 0.25rem;
  vertical-align: 0.15em;
}

.st-burger {
  margin-left: auto;
  border: 1px solid var(--st-line);
  background: var(--st-bg);
  border-radius: var(--st-radius-sm);
  padding: 0.45rem 0.65rem;
  color: var(--st-ink);
  font-size: 1.25rem;
  line-height: 1;
}
@media (min-width: 992px) {
  .st-nav { display: flex; }
  .st-burger { display: none; }
}

/* offcanvas (mobile drawer) */
.st-offcanvas .offcanvas-header { border-bottom: 1px solid var(--st-line); }
.st-offcanvas .offcanvas-body { padding: 0.75rem 0; display: flex; flex-direction: column; }
.st-offcanvas__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  color: var(--st-ink);
  font-weight: 600;
  text-decoration: none;
}
.st-offcanvas__link:hover { background: var(--st-teal-50); color: var(--st-teal-800); text-decoration: none; }
.st-offcanvas__link.is-active { color: var(--st-teal-700); box-shadow: inset 3px 0 0 var(--st-accent-500); }
.st-offcanvas__link .bi { color: var(--st-teal-600); font-size: 1.05rem; width: 1.4rem; text-align: center; }
.st-offcanvas__group {
  margin: 0.6rem 1.25rem 0.25rem;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-muted);
}
.st-offcanvas__cta { margin: 0.9rem 1.25rem 0.5rem; }

/* venue switcher — page-level pills on venue detail pages (not a chrome bar) */
.st-venue-switcher-wrap { padding-top: clamp(1.25rem, 3vw, 2rem); }
.st-venue-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.st-venue-switcher__label {
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-muted);
  margin-right: 0.35rem;
}
.st-venue-switcher a {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-teal-800);
  background: var(--st-teal-50);
  border: 1px solid var(--st-teal-100);
  text-decoration: none;
}
.st-venue-switcher a:hover { background: var(--st-teal-100); text-decoration: none; }
.st-venue-switcher a[aria-current="page"] {
  background: var(--st-teal-700);
  color: #fff;
  border-color: var(--st-teal-700);
}

/* venue detail — showcase + directions for a single location */
.st-venue {
  display: grid;
  gap: 1.75rem;
  margin-top: 1.25rem;
  padding-bottom: var(--st-space);
  align-items: start;
}
@media (min-width: 992px) {
  .st-venue {
    grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 1fr);
    gap: 2rem;
  }
  .st-venue__aside {
    position: sticky;
    top: 5rem; /* clear sticky .st-navbar */
  }
}
.st-venue__intro {
  font-size: var(--st-fs-lg);
  max-width: 58ch;
  margin-bottom: 0;
}
.st-venue-gallery {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 1.35rem 0 0;
}
.st-venue-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--st-radius);
  border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow-sm);
  background: var(--st-surface);
}
.st-venue-gallery--wide {
  grid-template-columns: 1fr;
}
.st-venue-gallery--wide img {
  aspect-ratio: 16 / 9;
  max-height: 22rem;
}
.st-venue-section {
  margin-top: 1.75rem;
}
.st-venue-section > h2 {
  font-size: var(--st-fs-h3);
  margin-bottom: 0.85rem;
}
.st-venue-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: venue-step;
  display: grid;
  gap: 0.7rem;
}
.st-venue-steps li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  counter-increment: venue-step;
  line-height: 1.5;
}
.st-venue-steps li::before {
  content: counter(venue-step);
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--st-teal-50);
  color: var(--st-teal-800);
  border: 1px solid var(--st-teal-100);
  font-weight: 700;
  font-size: var(--st-fs-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
}
.st-venue-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
}
.st-venue-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--st-fs-xs);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--st-teal-50);
  color: var(--st-teal-800);
  border: 1px solid var(--st-teal-100);
}
.st-venue-chip .bi { font-size: 0.95em; }
.st-venue-map {
  border-radius: var(--st-radius);
  overflow: hidden;
  border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow-sm);
  aspect-ratio: 4 / 3;
  min-height: 14rem;
  background: var(--st-surface);
}
.st-venue-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.st-venue__aside .st-card + .st-card,
.st-venue__aside .st-card + .st-venue-map,
.st-venue__aside .st-venue-map + .st-card {
  margin-top: 1rem;
}
.st-venue-note {
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.9rem;
  background: var(--st-surface);
  border-radius: var(--st-radius-sm);
  border-left: 3px solid var(--st-teal-400);
}
.st-venue-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.st-venue-check li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.st-venue-check .bi {
  flex: 0 0 auto;
  color: var(--st-teal-600);
  font-size: 1.15rem;
  margin-top: 0.1rem;
}

/* venues index — place cards + delivery modes */
.st-venues-modes {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .st-venues-modes { grid-template-columns: repeat(3, 1fr); }
}
.st-venues-mode {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
}
.st-venues-mode__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.st-venues-mode__icon--accent {
  background: var(--st-accent-100);
  color: var(--st-accent-600);
}
.st-venues-mode strong {
  display: block;
  color: var(--st-ink);
  font-size: var(--st-fs-sm);
  margin-bottom: 0.1rem;
}
.st-venues-mode span {
  display: block;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.45;
}

.st-places {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
  margin-top: 1.25rem;
}
@media (min-width: 576px) {
  .st-places { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .st-places { grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
}

a.st-place {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  overflow: hidden;
  box-shadow: var(--st-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.st-place:hover {
  transform: translateY(-4px);
  box-shadow: var(--st-shadow);
  border-color: var(--st-teal-300);
  color: inherit;
  text-decoration: none;
}
a.st-place:hover .st-place__go { gap: 0.55rem; }
a.st-place:hover .st-place__media img { transform: scale(1.03); }

.st-place__media {
  position: relative;
  /* Match legacy city heroes (1004×591) so mid-frame titles stay fully visible */
  aspect-ratio: 1004 / 591;
  overflow: hidden;
  background: linear-gradient(145deg, var(--st-teal-900), var(--st-teal-700));
}
.st-place__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
/* Soft cover for non-hero photos (e.g. Pretoria venue) that aren't 1004×591 */
.st-place__media--photo img {
  object-position: center 40%;
}
.st-place__media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1004 / 591;
  background:
    radial-gradient(40rem 20rem at 80% 0%, rgba(22, 160, 170, 0.35), transparent 55%),
    linear-gradient(145deg, var(--st-teal-900), var(--st-teal-700));
  color: #e6f4f5;
}
.st-place__media--icon .bi {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  opacity: 0.92;
}
.st-place__media--accent.st-place__media--icon {
  background:
    radial-gradient(40rem 20rem at 80% 0%, rgba(255, 180, 120, 0.28), transparent 55%),
    linear-gradient(145deg, #7a2e0a, var(--st-accent-600));
  color: #fff7f0;
}
.st-place__badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--st-teal-800);
  box-shadow: var(--st-shadow-sm);
}
.st-place__body {
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.2rem;
}
.st-place__city {
  font-size: var(--st-fs-h4);
  font-weight: 700;
  color: var(--st-ink);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.st-place__venue {
  margin: 0;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-teal-700);
}
.st-place__where {
  margin: 0.15rem 0 0;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
}
.st-place__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.95rem;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-teal-700);
  transition: gap 0.15s ease;
}

/* Virtual + in-house feature pair on the venues index */
.st-venues-alt {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.25rem;
}
@media (min-width: 768px) {
  .st-venues-alt { grid-template-columns: 1fr 1fr; }
}
.st-venues-alt .st-place__body { padding: 1.25rem 1.35rem 1.4rem; }
.st-venues-alt .st-place__city { font-size: var(--st-fs-h3); }
.st-venues-alt .st-place__lede {
  margin: 0.45rem 0 0;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.55;
  max-width: 42ch;
}

.st-venues-cta {
  margin-top: var(--st-space);
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--st-teal-600);
}

/* FAQ accordion (Bootstrap, themed) */
.st-faq .accordion-item {
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius) !important;
  overflow: hidden;
  margin-bottom: 0.65rem;
  background: var(--st-bg);
  box-shadow: var(--st-shadow-sm);
}
.st-faq .accordion-button {
  font-weight: 600;
  color: var(--st-ink);
  background: var(--st-bg);
  box-shadow: none;
  font-size: var(--st-fs-md);
  padding: 1rem 1.15rem;
}
.st-faq .accordion-button:not(.collapsed) {
  color: var(--st-teal-800);
  background: var(--st-teal-50);
}
.st-faq .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(22, 160, 170, 0.25);
  border-color: var(--st-teal-300);
}
.st-faq .accordion-button::after {
  background-size: 1rem;
}
.st-faq .accordion-body {
  color: var(--st-body);
  padding: 0.25rem 1.15rem 1.15rem;
  line-height: 1.65;
}
.st-faq .accordion-body p:last-child { margin-bottom: 0; }

/* Photo gallery grid */
.st-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 1.25rem;
  padding-bottom: var(--st-space);
}
@media (min-width: 576px) {
  .st-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .st-gallery { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.st-gallery__item {
  display: flex;
  flex-direction: column;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  overflow: hidden;
  box-shadow: var(--st-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.st-gallery__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--st-shadow);
  border-color: var(--st-teal-300);
}
.st-gallery__media {
  aspect-ratio: 4 / 3;
  background: var(--st-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.st-gallery__item:hover .st-gallery__media img { transform: scale(1.04); }
.st-gallery__cap {
  padding: 0.75rem 0.95rem;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  margin: 0;
  line-height: 1.4;
}

/* Document download card (company profile etc.) */
.st-doc-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.st-doc-card__icon {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--st-radius);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  border: 1px solid var(--st-teal-100);
}
.st-doc-card__body { flex: 1 1 16rem; min-width: 0; }
.st-doc-card__body h2 { margin-bottom: 0.35rem; }
.st-doc-card__body p { margin-bottom: 1rem; max-width: 48ch; }

/* Legal / policy page section anchors */
.st-policy-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 0;
}
.st-policy-nav a {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-teal-800);
  background: var(--st-teal-50);
  border: 1px solid var(--st-teal-100);
  text-decoration: none;
}
.st-policy-nav a:hover { background: var(--st-teal-100); text-decoration: none; }
.st-policy-section {
  margin-top: var(--st-space);
  scroll-margin-top: 5.5rem;
}
.st-policy-section h2 { margin-bottom: 0.75rem; }
.st-policy-section h3 {
  font-size: var(--st-fs-h4);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* section subnav (replaces the image-overlay strips) */
.st-subnav {
  background: var(--st-teal-50);
  border-bottom: 1px solid var(--st-teal-100);
}
.st-subnav__inner {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: 0.45rem clamp(1rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.st-subnav__label {
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-teal-800);
  margin-right: 0.5rem;
  white-space: nowrap;
}
.st-subnav a {
  white-space: nowrap;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-teal-800);
  text-decoration: none;
}
.st-subnav a:hover { background: var(--st-teal-200); text-decoration: none; }
.st-subnav a.is-active { background: var(--st-teal-700); color: #fff; }

/* footer */
.st-footer { background: var(--st-teal-950); color: #cfe0e2; margin-top: var(--st-space); }
.st-footer__main {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: var(--st-space) clamp(1rem, 3vw, 1.5rem) 2rem;
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.st-footer p, .st-footer li, .st-footer span { color: #cfe0e2; }
.st-footer h2 {
  color: #fff;
  font-size: var(--st-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.st-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.st-footer a { color: #cfe0e2; text-decoration: none; }
.st-footer a:hover { color: #fff; text-decoration: underline; }
.st-footer .bi { color: var(--st-teal-400); margin-right: 0.5rem; }
/* Branch lines: keep icon + city + suburb on one line when the column allows. */
.st-footer__main > div:last-child > ul li {
  white-space: nowrap;
}
.st-footer__brand svg { height: 40px; width: auto; margin-bottom: 0.9rem; }
.st-footer__blurb { font-size: var(--st-fs-sm); max-width: 26rem; }
.st-footer__social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.st-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.1rem;
}
.st-footer__social a:hover { background: var(--st-teal-700); color: #fff; text-decoration: none; }
.st-footer__social .bi { color: #fff; margin: 0; }
.st-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.st-footer__legal-inner {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--st-fs-xs);
}
.st-footer__legal a { margin-left: 1rem; }

/* -------------------------------------------------------------- components */
.st-main { display: block; }
.st-container {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  text-align: left;
}

.st-pagehead { padding-block: clamp(1rem, 2.5vw, 2rem) 0; }
/* Pageheads without a CTA row (the CTA row supplies its own bottom margin) need a
   backstop so the heading/lede don't butt directly against the next block. */
.st-pagehead:not(:has(.st-hero__ctas)) { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.st-pagehead h1 { margin-bottom: 0.35rem; }
.st-pagehead__lede { font-size: var(--st-fs-lg); color: var(--st-muted); max-width: 60ch; }
/* CTAs under a pagehead (quote / calendar etc.) need room before the next block */
.st-pagehead .st-hero__ctas {
  margin-top: 1.25rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.st-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(56rem 28rem at 100% -10%, rgba(22, 160, 170, 0.42), transparent 58%),
    radial-gradient(32rem 20rem at -5% 90%, rgba(232, 89, 12, 0.12), transparent 55%),
    linear-gradient(145deg, var(--st-teal-950) 0%, var(--st-teal-900) 45%, var(--st-teal-800) 100%);
  color: #e6f4f5;
}
.st-hero__inner {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: var(--st-space) clamp(1rem, 3vw, 1.5rem);
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 992px) { .st-hero__inner { grid-template-columns: 1.15fr 0.95fr; gap: 2.5rem; } }
.st-hero h1 {
  color: #fff;
  font-family: var(--st-font-display);
  font-size: var(--st-fs-display);
  font-weight: 600;
  margin-bottom: 0.65rem;
  line-height: 1.08;
}
.st-hero__lede { font-size: var(--st-fs-lg); max-width: 42ch; color: #cfe6e8; line-height: 1.55; }
.st-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.65rem; }
.st-hero .st-card { color: var(--st-body); }
.st-hero .st-card h2, .st-hero .st-card h3 { color: var(--st-ink); }
.st-hero__media {
  position: relative;
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  box-shadow: var(--st-shadow-lg);
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.15);
}
/* Hero photo only — do NOT match notice icons nested inside .st-hero__notice */
.st-hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/*
 * Notice rides the bottom of the photo as a soft gradient caption —
 * not a floating white card. No scroll; long copy is clamped.
 */
.st-hero__notice {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.75rem 1.1rem 1rem;
  background: linear-gradient(
    to top,
    rgba(2, 43, 46, 0.88) 0%,
    rgba(2, 43, 46, 0.62) 55%,
    rgba(2, 43, 46, 0) 100%
  );
  color: #e8f4f5;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  max-height: none;
}
.st-hero__notice h2 {
  font-family: var(--st-font);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.3rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.st-hero__notice__body {
  min-width: 0;
}
.st-hero__notice p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(232, 244, 245, 0.9);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* clamp so we never grow a scrollbar over the photo */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 575.98px) {
  .st-hero__notice { padding: 2.25rem 0.85rem 0.85rem; }
  .st-hero__notice h2 { font-size: 0.82rem; }
  .st-hero__notice p {
    font-size: 0.74rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}
.st-hero--slim .st-hero__inner { padding-block: clamp(1.75rem, 4vw, 3rem); display: block; }

/* Full-bleed section: breaks out of .st-container to span the window, while
   keeping its own content exactly on the container grid.

   The margin and the padding are deliberate mirror images of each other -
   `50% - 50vw` out, `50vw - 50%` back in - so whatever the margin pulls out,
   the padding puts back. The content box therefore always ends up exactly as
   wide as the container it escaped, at any viewport, and can never collapse.

   That symmetry is the whole point, and it is what the previous version got
   wrong. It paired the margin with `padding-inline: max(1rem, calc(50vw -
   (var(--st-container) / 2)))` and `width: 100vw`, but the element inherits a
   max-width cap from the container it is escaping, so it never actually
   reached 100vw while the padding was still computed as though it had. Past a
   viewport of about 2400px that padding exceeded the capped width, border-box
   sizing clamped the used width up to the padding, and the CONTENT BOX
   COLLAPSED TO ZERO - body copy rendering one word per line. Fine on a laptop,
   shattered on a wide monitor.

   max-width:none removes that cap. width:auto lets the negative margins alone
   decide the width, which keeps this correct when a scrollbar makes 100vw
   wider than the actual viewport. */
.st-fullbleed {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1rem, calc(50vw - 50%));
  border-radius: 0;
}

/* In-container subpages space plain sections with margin-top only, so a
   full-bleed band's tinted edge lands flush on the previous section's last
   line (and the next section's margin doubles up under it). Bands own their
   vertical gap instead; sibling margins collapse, so the boundary stays one
   --st-space. Full-bleed page layouts (homepage) are untouched. */
.st-container > .st-section.st-fullbleed { margin-block: var(--st-space); }

.st-section { padding-block: var(--st-space); }
.st-section--alt { background: var(--st-surface); }
.st-section--dark {
  background: linear-gradient(145deg, var(--st-teal-950), var(--st-teal-800));
  color: #d6ecee;
}
.st-section--dark h2, .st-section--dark h3 { color: #fff; }
.st-section--dark .st-kicker { color: var(--st-teal-300); }
.st-section__head { max-width: 40rem; margin-bottom: 2rem; }
.st-section__head p { color: var(--st-muted); max-width: 52ch; }
.st-kicker {
  display: inline-block;
  font-family: var(--st-font);
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--st-teal-600);
  margin-bottom: 0.5rem;
}

.st-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.st-grid--wide { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }

/* Cards — demoted: hairline only, no default elevation. Use for forms/widgets. */
.st-card {
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 1.35rem 1.4rem;
  box-shadow: none;
}
a.st-card { display: block; color: inherit; text-decoration: none; }
.st-card--hover { transition: border-color 0.15s ease, background 0.15s ease; }
.st-card--hover:hover {
  border-color: var(--st-teal-300);
  background: var(--st-teal-50);
  text-decoration: none;
}
.st-card--quiet {
  border-color: transparent;
  background: transparent;
  padding: 0.35rem 0;
  box-shadow: none;
}
.st-card--raised {
  box-shadow: var(--st-shadow);
  border-color: transparent;
}
.st-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
}
.st-card h3 { font-size: var(--st-fs-h4); margin-bottom: 0.4rem; }
.st-card p:last-child { margin-bottom: 0; }

.st-tile {
  position: relative;
  display: block;
  border-radius: var(--st-radius);
  overflow: hidden;
  box-shadow: var(--st-shadow-sm);
}
.st-tile img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; filter: grayscale(15%); }
.st-tile__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(transparent, rgba(2, 43, 46, 0.85));
  color: #fff;
  font-weight: 700;
}

/* forms */
.st-form { max-width: 44rem; }
.st-form .form-control, .st-form .form-select { margin-bottom: 0; }
.st-form__row { margin-bottom: 1.1rem; }
.st-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}
.st-form__actions .btn-lg {
  padding-inline: 1.5rem;
  min-height: 3rem;
}
.st-form-card {
  position: relative;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--st-teal-200), var(--st-teal-50) 40%, #fff 70%) border-box;
  border: 1px solid transparent;
  border-radius: var(--st-radius-lg);
  padding: clamp(1.4rem, 3.5vw, 2.15rem);
  box-shadow: var(--st-shadow);
  overflow: hidden;
}
.st-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--st-teal-700), var(--st-teal-400) 55%, var(--st-accent-500));
}
.st-form-card__head {
  margin-bottom: 1.35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--st-line);
}
.st-form-card__head h2 {
  font-size: var(--st-fs-h3);
  margin-bottom: 0.25rem;
}
.st-form-card__head p {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-fs-sm);
  max-width: 42ch;
}
.st-form-card__section {
  margin-bottom: 1.35rem;
}
.st-form-card__section-label {
  display: block;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--st-teal-700);
  margin-bottom: 0.75rem;
}

/* Math "captcha" — own it, don't hide it */
.st-human-check {
  display: grid;
  gap: 0.85rem;
  margin: 1.35rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: var(--st-radius);
  background:
    radial-gradient(18rem 10rem at 100% 0%, rgba(232, 89, 12, 0.08), transparent 55%),
    linear-gradient(145deg, var(--st-teal-50), #fff 60%);
  border: 1px dashed var(--st-teal-200);
}
.st-human-check__head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.st-human-check__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--st-teal-100);
  color: var(--st-accent-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--st-shadow-sm);
}
.st-human-check__title {
  display: block;
  font-weight: 700;
  color: var(--st-ink);
  font-size: var(--st-fs-sm);
  line-height: 1.3;
}
.st-human-check__sub {
  display: block;
  font-size: var(--st-fs-xs);
  color: var(--st-muted);
  margin-top: 0.15rem;
  line-height: 1.4;
}
.st-human-check__q {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}
.st-human-check__prompt {
  font-weight: 700;
  color: var(--st-teal-900);
  font-size: var(--st-fs-md);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.st-human-check__q .form-control {
  width: 6.5rem;
  max-width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: #fff;
  border-color: var(--st-teal-200);
}
.st-human-check__q .form-control:focus {
  border-color: var(--st-accent-500);
  box-shadow: 0 0 0 0.25rem rgba(232, 89, 12, 0.15);
}

/* Honeypot — hidden from humans, irresistible to dumb bots */
.st-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* contact detail list */
.st-contact-list { list-style: none; margin: 0.25rem 0 1.25rem; padding: 0; display: grid; gap: 0.9rem; }
.st-contact-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.st-contact-list .bi {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.st-contact-list__k {
  display: block;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--st-muted);
}

/* custom-validation hook: legacy page JS toggles .invalid-feedback-show to
   reveal a message. Bootstrap's .invalid-feedback is display:none by default,
   and this class was never defined — so error messages never appeared on the
   contact/booking forms. Define it (and let .is-invalid inputs reveal their
   sibling message the Bootstrap way too). */
.invalid-feedback-show { display: block; }

/* legacy validation hooks (existing page JS toggles these) */
.inputError {
  border-color: var(--st-danger) !important;
  box-shadow: 0 0 0 0.25rem rgba(201, 42, 42, 0.15) !important;
}
#errorMsgWrapper, .st-alert-error {
  display: none;
  background: #fdecec;
  border: 1px solid #f5c2c2;
  color: var(--st-danger);
  border-radius: var(--st-radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
#successMsgWrapper, .st-alert-success {
  display: none;
  background: #ebf7ee;
  border: 1px solid #c3e6cd;
  color: var(--st-success);
  border-radius: var(--st-radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}

/* team cards: see the "Meet the team" block at the end of this file */

/* values cards (mission page and friends) */
.values-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/* day-prompt cards (delegates) */
.st-card__icon--accent { background: var(--st-accent-100); color: var(--st-accent-600); }

/* vertical timeline (schedule / format) */
.st-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.st-timeline::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--st-teal-100);
}
.st-timeline li {
  position: relative;
  padding: 0 0 1.1rem 2rem;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.st-timeline li:last-child { padding-bottom: 0; }
.st-timeline li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--st-teal-600);
  box-shadow: 0 0 0 3px var(--st-teal-100);
}
.st-timeline__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--st-teal-800);
  min-width: 3.4rem;
}
.st-timeline__label { color: var(--st-body); }

/* spec / at-a-glance list */
.st-specs { display: grid; gap: 0; margin: 0; }
.st-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--st-line);
}
.st-specs > div:last-child { border-bottom: 0; }
.st-specs dt, .st-specs__key {
  font-weight: 600;
  color: var(--st-ink);
  margin: 0;
}
.st-specs dd, .st-specs__val {
  margin: 0;
  color: var(--st-muted);
  text-align: right;
}

/* two-up split that stacks on mobile */
.st-split { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .st-split { grid-template-columns: 1fr 1fr; } }

/* accreditation logo strip */
.st-accreditation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: 1rem;
}
.st-accreditation img { max-height: 90px; width: auto; }

/* ---- blog index ---- */
.blog-index-head { padding-bottom: 0.25rem; }
.blog-layout {
  display: grid;
  gap: 2rem;
  margin-top: 1.25rem;
  padding-bottom: var(--st-space);
  align-items: start;
}
@media (min-width: 992px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    gap: 2.25rem;
  }
  .blog-layout__aside {
    position: sticky;
    top: 5rem;
  }
}
.blog-feed { display: grid; gap: 0.85rem; }

/* Text-first cards: blog assets are ~120–250px icons, not photos.
   Keep illustrations as small badges so they stay sharp. */
.blog-card {
  margin: 0;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--st-shadow);
  border-color: var(--st-teal-300);
}
.blog-card__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem 1.1rem;
  align-items: start;
  padding: 1.05rem 1.15rem 1.15rem;
  color: inherit;
  text-decoration: none;
}
.blog-card__link:hover { color: inherit; text-decoration: none; }
.blog-card--featured {
  border-color: var(--st-teal-200);
  background: linear-gradient(135deg, var(--st-teal-50), #fff 55%);
}
.blog-card--featured .blog-card__link {
  padding: 1.25rem 1.35rem 1.35rem;
}
.blog-card__icon {
  flex: 0 0 auto;
  width: 8.6rem;
  height: 8.6rem;
  border-radius: var(--st-radius);
  background: #fff;
  border: 1px solid var(--st-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--st-shadow-sm);
}
.blog-card--featured .blog-card__icon {
  width: 10.5rem;
  height: 10.5rem;
}
.blog-card__icon img {
  width: 78%;
  height: 78%;
  object-fit: contain; /* never upscale/crop soft icons into mush */
  display: block;
  image-rendering: auto;
}
.blog-card__icon--empty {
  color: var(--st-teal-400);
  font-size: 1.75rem;
  background: var(--st-teal-50);
  border-color: var(--st-teal-100);
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.blog-card__meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st-teal-700);
}
.blog-card__source {
  color: var(--st-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.blog-card__title {
  font-size: var(--st-fs-h4);
  margin: 0;
  line-height: 1.3;
  color: var(--st-ink);
}
.blog-card--featured .blog-card__title { font-size: var(--st-fs-h3); }
.blog-card__excerpt {
  margin: 0;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card--featured .blog-card__excerpt { -webkit-line-clamp: 3; }
.blog-card__more {
  margin-top: 0.45rem;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-teal-700);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.blog-card:hover .blog-card__more { gap: 0.5rem; }
@media (max-width: 419.98px) {
  .blog-card__link { grid-template-columns: 1fr; }
  .blog-card__icon { width: 7rem; height: 7rem; }
  .blog-card--featured .blog-card__icon { width: 8.2rem; height: 8.2rem; }
}

.blog-search {
  position: relative;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.blog-search .bi-search {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-muted);
  pointer-events: none;
  z-index: 1;
}
.blog-search input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.95rem 0.7rem 2.55rem;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  font-size: var(--st-fs-md);
  color: var(--st-ink);
  background: var(--st-surface);
  min-height: 2.85rem;
}
.blog-search input:focus {
  outline: none;
  border-color: var(--st-teal-500);
  background: #fff;
  box-shadow: 0 0 0 0.25rem rgba(22, 160, 170, 0.16);
}
.blog-results {
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  margin-bottom: 1rem;
}
.blog-results__clear { margin-left: 0.5rem; font-weight: 600; white-space: nowrap; }
.blog-more { text-align: center; margin-top: 2rem; }
.blog-more__hint { margin: 0.75rem 0 0; font-size: var(--st-fs-sm); }
.blog-empty { text-align: center; padding: 2rem 1.5rem; }

.blog-aside-card {
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: 1.2rem 1.25rem 1.35rem;
  box-shadow: var(--st-shadow-sm);
  margin-bottom: 1rem;
}
.blog-aside-card--soft {
  background: linear-gradient(160deg, var(--st-teal-50), #fff 70%);
  border-color: var(--st-teal-100);
}
.blog-aside-card h2 { margin-bottom: 0.35rem; }
.blog-archive.st-faq .accordion-item { margin-bottom: 0.45rem; }
/* Month left; count badge + chevron flush right (Bootstrap puts ::after last). */
.blog-archive.st-faq .accordion-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.blog-archive__count {
  float: none;
  flex-shrink: 0;
  margin-left: auto; /* pin badge to the right, just before the chevron */
  font-size: var(--st-fs-xs);
  font-weight: 600;
  color: var(--st-muted);
  background: var(--st-teal-50);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  line-height: 1.35;
  min-width: 1.5rem;
  text-align: center;
}
/* Bootstrap defaults ::after to margin-left:auto — steal that for the badge. */
.blog-archive.st-faq .accordion-button::after {
  margin-left: 0.35rem;
  flex-shrink: 0;
}
.blog-archive__list {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.15rem !important;
}
.blog-archive__list a {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.55rem;
  align-items: baseline;
  font-size: var(--st-fs-sm);
  line-height: 1.35;
  color: var(--st-body);
  text-decoration: none;
}
.blog-archive__list a:hover { color: var(--st-teal-800); text-decoration: none; }
.blog-archive__list a:hover span:last-child { text-decoration: underline; }
.blog-archive__d {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--st-teal-600);
}

.st-form-consent {
  font-size: var(--st-fs-xs);
  color: var(--st-muted);
  margin: 0 0 1.15rem;
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
  background: var(--st-surface);
  border-radius: var(--st-radius-sm);
  border-left: 3px solid var(--st-teal-300);
}

/* ---- standalone login page (trainer portal) ---- */
.st-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(55rem 28rem at 15% -10%, rgba(22, 160, 170, 0.4), transparent 60%),
    linear-gradient(135deg, var(--st-teal-950), var(--st-teal-800) 72%);
}
.st-login__card {
  width: 100%;
  max-width: 26rem;
  background: var(--st-bg);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-lg);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  text-align: center;
}
.st-login__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
}
.st-login__brand:hover { text-decoration: none; }
.st-login__brand span { font-weight: 700; color: var(--st-ink); font-size: 1.15rem; letter-spacing: -0.01em; }
.st-login__card h1 { font-size: var(--st-fs-h2); margin-bottom: 0.3rem; }
.st-login__sub { color: var(--st-muted); margin-bottom: 1.75rem; }
.st-login__form { text-align: left; }
.st-login__field { position: relative; }
.st-login__field > .bi {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--st-muted);
  pointer-events: none;
}
.st-login__field .form-control { padding-left: 2.5rem; padding-right: 2.75rem; }
.st-login__toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--st-muted);
  padding: 0.4rem 0.55rem;
  line-height: 1;
}
.st-login__toggle:hover { color: var(--st-teal-700); }
.st-login__row { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0 1.5rem; }
.st-login__alert {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  text-align: left;
  background: #fdecec;
  border: 1px solid #f5c2c2;
  color: var(--st-danger);
  border-radius: var(--st-radius-sm);
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--st-fs-sm);
}
.st-login__alert .bi { margin-top: 0.1rem; }
.st-login__back {
  display: inline-block;
  margin-top: 1.75rem;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-muted);
  text-decoration: none;
}
.st-login__back:hover { color: var(--st-teal-700); }

/* ---- breadcrumbs (blog + reusable) ---- */
.st-crumbs {
  margin: 0 0 0.85rem;
}
.st-crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.15rem;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
}
.st-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
.st-crumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: 0.35rem;
  color: var(--st-line);
  font-weight: 500;
  speak: never;
}
.st-crumbs__item a {
  color: var(--st-muted);
  font-weight: 600;
  text-decoration: none;
}
.st-crumbs__item a:hover { color: var(--st-teal-700); text-decoration: none; }
.st-crumbs__item[aria-current="page"] span {
  color: var(--st-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(28rem, 70vw);
}

/* ---- blog article (/blog/{slug} → blog_post.php) ---- */
.st-article {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.st-article__head,
.st-article__body,
.st-article__foot { max-width: 46rem; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.5rem); }

.st-article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  margin-bottom: 1rem;
}
.st-article__back:hover { color: var(--st-teal-700); text-decoration: none; }
.st-article h1 { font-size: clamp(1.8rem, 1.4rem + 1.9vw, 2.7rem); margin-bottom: 1rem; }
.st-article__ext { font-size: 0.55em; vertical-align: middle; color: var(--st-muted); }

.st-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--st-line);
  color: var(--st-muted);
  font-size: var(--st-fs-sm);
}
.st-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  align-items: center;
}
.st-article__byline .bi { margin-right: 0.25rem; color: var(--st-teal-600); }
.st-article__tags {
  max-width: 46rem;
  margin: 1.75rem auto 0;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.st-article__tags-label {
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-muted);
  margin-right: 0.25rem;
}
.st-article__tag {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: var(--st-fs-xs);
  font-weight: 600;
  background: var(--st-teal-50);
  color: var(--st-teal-800);
  border: 1px solid var(--st-teal-100);
  text-decoration: none;
}
.st-article__tag:hover {
  background: var(--st-teal-100);
  text-decoration: none;
  color: var(--st-teal-900);
}
.st-article__share { display: flex; align-items: center; gap: 0.4rem; }
.st-article__share-label {
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.25rem;
}
.st-article__share a,
.st-article__share button {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.st-article__share a:hover,
.st-article__share button:hover {
  background: var(--st-teal-700);
  color: #fff;
  text-decoration: none;
}
.st-article__share a:focus-visible,
.st-article__share button:focus-visible {
  outline: 2px solid var(--st-teal-500);
  outline-offset: 2px;
}
/* Screen-only: print URL shown in print stylesheet */
.st-article__print-url { display: none; }

/*
 * Lede: modest icon upper-left, bold lead wraps to the right.
 * Blog assets are ~120–250px icons — not photography — so never hero-wide.
 */
.st-article__lede {
  display: flow-root; /* contain the float without a clearing div */
  margin: 0 0 1.5rem;
}
.st-article__thumb {
  float: left;
  width: clamp(7.5rem, 28vw, 10.5rem);
  margin: 0.15rem 1.35rem 0.85rem 0;
  padding: 0;
}
.st-article__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--st-radius);
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  padding: 0.65rem;
  box-shadow: none;
}
.st-article__thumb figcaption {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--st-muted);
  text-align: left;
  margin-top: 0.4rem;
}
.st-article__lead {
  font-family: var(--st-font);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.55;
  font-weight: 700;
  color: var(--st-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.st-article__lead br + br { display: block; content: ""; margin-top: 0.55em; }

.st-article__body {
  padding-top: 1.5rem;
  font-size: 1.075rem;
  line-height: 1.75;
  color: var(--st-body);
}
.st-article__body p { margin-bottom: 1.25em; }
.st-article__body h2 { font-size: var(--st-fs-h3); margin: 1.8em 0 0.5em; }
.st-article__body h3 { font-size: var(--st-fs-h4); color: var(--st-teal-800); margin: 1.6em 0 0.4em; }
.st-article__body ul, .st-article__body ol { padding-left: 1.4rem; margin-bottom: 1.25em; }
.st-article__body li { margin-bottom: 0.4em; }
.st-article__body > p img,
.st-article__body img:not(.st-article__thumb img) {
  max-width: 100%;
  height: auto;
  border-radius: var(--st-radius);
  margin-block: 1.25rem;
}
.st-article__body a { color: var(--st-teal-700); text-decoration: underline; }
.st-article__body b, .st-article__body strong { color: var(--st-ink); }

@media (max-width: 520px) {
  .st-article__thumb {
    width: 6.25rem;
    margin-right: 0.95rem;
    margin-bottom: 0.65rem;
  }
  .st-article__thumb img { padding: 0.45rem; }
  .st-article__lead { font-size: 1.02rem; }
}

/* Print: keep float so lede still reads as icon + dek */
@media print {
  .st-article__thumb {
    width: 5.5rem;
    margin-right: 0.85rem;
  }
  .st-article__thumb img {
    box-shadow: none;
    border-color: #ccc;
  }
}

.st-article__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--st-line);
}

/* recent-post cards (full-width row at the foot of an article) */
.st-recent-card {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.3rem 1.25rem;
}
.st-recent-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.st-recent-card__icon {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.st-recent-card__icon img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}
.st-recent-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--st-teal-600);
  margin: 0;
}
.st-recent-card h3 { font-size: var(--st-fs-h4); margin-bottom: 0.4rem; }
.st-recent-card__ex {
  margin: 0 0 0.75rem;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.st-recent-card__more {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--st-fs-sm);
  color: var(--st-teal-700);
}

/* Testimonials */
.st-testimonial-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .st-testimonial-grid { grid-template-columns: 1fr 1fr; }
}
.st-testimonial-card {
  margin: 0;
  padding: 1.35rem 1.4rem 1.25rem;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow-sm);
  border-top: 3px solid var(--st-teal-500);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.st-testimonial-card__quote {
  margin: 0;
  font-size: var(--st-fs-sm);
  line-height: 1.65;
  color: var(--st-body);
  flex: 1;
}
.st-testimonial-card__quote::before {
  content: "“";
  color: var(--st-teal-400);
  font-size: 1.6em;
  line-height: 0;
  margin-right: 0.1em;
  font-family: Georgia, serif;
}
.st-testimonial-card__foot {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--st-fs-sm);
  padding-top: 0.75rem;
  border-top: 1px solid var(--st-line);
}
.st-testimonial-video video {
  width: 100%;
  border-radius: var(--st-radius-sm);
  background: #000;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* HR resource download cards */
.st-hr-section { margin-top: 0.5rem; }
.st-hr-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.st-hr-card__img {
  width: 100%;
  max-height: 9rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.35rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-surface);
  border: 1px solid var(--st-line);
  padding: 0.35rem;
}
.st-hr-card__badge {
  width: 3rem;
  height: 3rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}
.st-hr-card h3 { margin: 0; }
.st-hr-card p { margin: 0; font-size: var(--st-fs-sm); flex: 1; }
.st-hr-card__go {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: var(--st-fs-sm);
  color: var(--st-teal-700);
}

/* full-width CTA banner */
.st-cta-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, var(--st-teal-50), var(--st-teal-100));
  border: 1px solid var(--st-teal-100);
  border-radius: var(--st-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.st-cta-banner__text h3 { margin-bottom: 0.35rem; }
.st-cta-banner__text p { margin: 0; color: var(--st-teal-900); max-width: 46ch; }
.st-cta-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* youtube facade */
.st-yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: var(--st-radius);
  overflow: hidden;
  cursor: pointer;
  background: #000 center / cover no-repeat;
  box-shadow: var(--st-shadow-sm);
}
.st-yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 43, 46, 0.25);
  transition: background 0.15s ease;
}
.st-yt:hover::after { background: rgba(2, 43, 46, 0.1); }
.st-yt__play {
  position: absolute;
  z-index: 1;
  inset: 0;
  margin: auto;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--st-teal-800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  padding-left: 0.3rem;
}
.st-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* back to top */
.st-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 0;
  background: var(--st-teal-700);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: var(--st-shadow);
  display: none;
  align-items: center;
  justify-content: center;
}
.st-top.is-visible { display: flex; }
.st-top:hover { background: var(--st-teal-800); }

/* content typography helpers */
.st-prose { max-width: 70ch; }
.st-prose img { border-radius: var(--st-radius); }
.st-prose h2, .st-prose h3 { margin-top: 1.6em; }
.st-prose ul, .st-prose ol { padding-left: 1.4rem; margin-bottom: 1em; }
.st-prose li { margin-bottom: 0.35em; }

/* data tables in content */
.st-table-wrap { overflow-x: auto; }
.st-content table:not([class]) { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.st-content table:not([class]) td, .st-content table:not([class]) th {
  border: 1px solid var(--st-line);
  padding: 0.6rem 0.8rem;
  vertical-align: top;
}
.st-content table:not([class]) tr:nth-child(even) { background: var(--st-surface); }

/* -------------------------------------------------------------- legacy layer
   Untouched pages carry 2000s markup: table scaffolds (#maintable/#inbody),
   <font>/<center>/bgcolor, image-overlay strip menus, old helper classes.
   These rules make that markup behave inside the modern shell until each
   page is reworked. Remove selectors here as pages stop needing them. */

/* flatten old table page-scaffolds to block flow so chrome spans full width */
#maintable, #maintable > tbody, #maintable > tbody > tr, #maintable > tbody > tr > td,
#maintable > tr, #maintable > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}
#inbody { text-align: left; }
#inbody[align="center"] { text-align: left; }
div[align="center"]#inbody > * { text-align: initial; }
#maincontent {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  text-align: left;
}
#maincontent .container-fluid { padding-inline: 0; }

/* old font-tag palette -> new palette */
font[color="#008080"], font[color="#007580"], font[color="teal"] { color: var(--st-teal-700); }
font[color="#FF4500"], font[color="#ff4500"], font[color="#FF6500"], font[color="#ff6500"],
font[color="#FF6600"], font[color="#ff6600"], font[color="orangered"] { color: var(--st-accent-600); }
font[color="#FFFFFF"], font[color="#ffffff"], font[color="white"] { color: #fff; }
font[size="1"] { font-size: var(--st-fs-xs); }
font[size="2"] { font-size: var(--st-fs-md); } /* legacy "body default" — read at modern base size */
font[size="3"] { font-size: var(--st-fs-md); }
font[size="4"] { font-size: var(--st-fs-h4); }
font[size="5"] { font-size: var(--st-fs-h3); }
font[size="6"] { font-size: var(--st-fs-h2); }

/* content-page polish: legacy pages all render inside #maincontent */
#maincontent { font-size: var(--st-fs-md); }
#maincontent p, #maincontent li { max-width: 78ch; }
#maincontent h2 { margin-top: 1.2em; }
#maincontent h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  margin-top: 0.5rem;
  background: linear-gradient(90deg, var(--st-accent-500), var(--st-teal-500));
}
#maincontent > .row-fluid:first-child h2::after,
#maincontent .col-12:first-child h2::after { margin-bottom: 0.25rem; }
#maincontent h3 { color: var(--st-teal-800); margin-top: 1.2em; }

/* decorative legacy photo strips (contact_us*.jpeg et al): render as a tidy
   media row instead of orphaned thumbnails */
#maincontent img[src*="contact_us"], .st-photostrip img {
  height: 110px;
  width: auto;
  object-fit: cover;
  border-radius: var(--st-radius-sm);
  margin: 0 0.4rem 0.75rem 0;
  box-shadow: var(--st-shadow-sm);
}

/* image-overlay strip menus (pages not yet migrated): render as chip bar */
.bg-img, .bg-imgmain, .bg-imginfo, .bg-imgvenue {
  background-image: none !important;
  background: var(--st-teal-50);
  border-block: 1px solid var(--st-teal-100);
  height: auto !important;
  min-height: 0 !important;
  padding: 0.45rem 0;
  margin-bottom: 1.25rem;
}
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background: transparent !important;
  overflow-x: auto;
}
.topnav a {
  float: none !important;
  display: inline-block;
  color: var(--st-teal-800) !important;
  background: transparent !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 999px;
  font-size: var(--st-fs-sm) !important;
  font-weight: 600;
  text-decoration: none;
}
.topnav a:hover { background: var(--st-teal-200) !important; }

/* legacy homepage/notice helpers still in page bodies */
.noticeBoard { max-width: 40rem; margin-inline: auto; text-align: left; }
.noticeTitle { font-weight: 700; color: var(--st-teal-800); }
.noticeImg { max-width: 64px; }

/* Bootstrap 5 gives plain (col-less) .row children width:100%; legacy rows
   relied on the BS4 behaviour of natural width. Restore it for unclassed divs
   carrying only inline padding/margin styles (the common legacy pattern). */
.row > div[style]:not([class]) { width: auto; flex: 0 0 auto; }

/* old sidebar link tables (menu_info) if any page still renders one */
.sidebar_links { width: 100%; }
.sidebar_links td { padding: 0.3rem 0; }

/* generic legacy guards */
table { max-width: 100%; }
td, th { word-break: normal; overflow-wrap: anywhere; }
center > table { margin-inline: auto; }
[bgcolor="#007580"] { background-color: var(--st-teal-700) !important; }

/* mobile overflow guards for fixed-width legacy form/content markup */
.st-content input, .st-content textarea, .st-content select { max-width: 100%; }
.st-content [style*="width"] { max-width: 100%; }
#contactPics { white-space: normal !important; display: flex; flex-wrap: wrap; gap: 0.35rem; }
#contactPics img { height: 72px; width: auto; border-radius: 0.5rem; }
@media (max-width: 767.98px) {
  .st-content .row > [class*="col-"] { min-width: 0; }
}

/* ------------------------------------------------- bootstrap 4 markup shims
   Legacy page bodies still use BS4-only class names. Shim the common ones so
   markup needn't churn; remove as pages are redesigned. */
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-inline: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-inline: 5px; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; gap: 0.5rem; }
.custom-select {
  display: block;
  width: 100%;
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right 0.75rem center / 8px 10px no-repeat;
  appearance: none;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.modal .close, .toast .close, .alert .close {
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--st-muted);
  opacity: 0.8;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem -0.25rem auto;
}
.modal .close:hover { color: var(--st-ink); opacity: 1; }
.badge-pill { border-radius: 999px; }
.jumbotron {
  background: var(--st-surface);
  border-radius: var(--st-radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}
.media { display: flex; align-items: flex-start; gap: 1rem; }
.media-body { flex: 1; }

/* --------------------------------------------------------------- utilities */
.st-muted { color: var(--st-muted); }
.st-teal { color: var(--st-teal-700); }
.st-accent { color: var(--st-accent-600); }
.st-mw-prose { max-width: 70ch; }
.st-divider { border: 0; border-top: 1px solid var(--st-line); margin-block: var(--st-space); }

/* ================================================================
   2026 flagship primitives — editorial layout, less card chrome
   ================================================================ */

/* Full-bleed band (content still in container) */
.st-band {
  width: 100%;
  padding-block: var(--st-space);
}
.st-band .st-container { max-width: var(--st-container); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.5rem); }

/* Editorial split: image + prose */
.st-split {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 900px) {
  .st-split { grid-template-columns: 1fr 1fr; gap: 2.75rem; }
  .st-split--flip .st-split__media { order: 2; }
  .st-split--flip .st-split__body { order: 1; }
}
.st-split__media {
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--st-surface);
  box-shadow: var(--st-shadow-sm);
}
.st-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-split__body h2 { margin-bottom: 0.55rem; }
.st-split__body p { max-width: 48ch; }
.st-split__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--st-teal-700);
  text-decoration: none;
}
.st-split__link:hover { color: var(--st-teal-900); gap: 0.55rem; text-decoration: none; }
.st-split__link .bi { transition: transform 0.15s ease; }
.st-split__link:hover .bi { transform: translateX(3px); }

/* Action / navigation rail — replaces icon-card grids */
.st-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--st-line);
}
.st-rail a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 1rem 0.15rem;
  border-bottom: 1px solid var(--st-line);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease, padding-left 0.12s ease;
}
.st-rail a:hover {
  background: linear-gradient(90deg, var(--st-teal-50), transparent 70%);
  padding-left: 0.45rem;
  text-decoration: none;
  color: inherit;
}
.st-rail__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  font-size: 1.1rem;
}
.st-rail__text strong {
  display: block;
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  color: var(--st-ink);
  font-weight: 700;
  margin-bottom: 0.1rem;
}
.st-rail__text span {
  display: block;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.4;
}
.st-rail__chev { color: var(--st-teal-500); font-size: 1rem; }

/* Horizontal command chips */
.st-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.st-commands a,
.st-commands button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--st-line);
  background: #fff;
  color: var(--st-ink);
  font-weight: 600;
  font-size: var(--st-fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.st-commands a:hover,
.st-commands button:hover {
  border-color: var(--st-teal-300);
  background: var(--st-teal-50);
  color: var(--st-teal-900);
  text-decoration: none;
}
.st-commands .bi { color: var(--st-teal-600); }

/* Proof / stats strip */
.st-proof {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .st-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
.st-stat {
  padding: 0.25rem 0;
  border-left: 2px solid var(--st-teal-400);
  padding-left: 0.9rem;
}
.st-stat__value {
  font-family: var(--st-font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  font-weight: 600;
  color: var(--st-ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.st-stat__label {
  margin-top: 0.2rem;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.35;
  max-width: 16ch;
}
.st-section--dark .st-stat { border-left-color: var(--st-teal-400); }
.st-section--dark .st-stat__value { color: #fff; }
.st-section--dark .st-stat__label { color: #b7d5d8; }

/* Pills / meta chips */
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--st-teal-50);
  color: var(--st-teal-800);
  border: 1px solid var(--st-teal-100);
  white-space: nowrap;
}
.st-pill--seta {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: var(--st-accent-700);
  border-color: #fed7aa;
}
.st-pill--dark {
  background: rgba(255, 255, 255, 0.12);
  color: #e8f5f6;
  border-color: rgba(255, 255, 255, 0.18);
}

/* Pull quote — not a card */
.st-pullquote {
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.15rem;
  border-left: 3px solid var(--st-accent-500);
  max-width: 36rem;
}
.st-pullquote p {
  font-family: var(--st-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.65rem);
  font-weight: 550;
  line-height: 1.35;
  color: var(--st-ink);
  margin: 0 0 0.65rem;
  letter-spacing: -0.015em;
}
.st-pullquote cite {
  font-style: normal;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  font-weight: 600;
}

/* Final CTA band */
.st-cta-band {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(40rem 20rem at 90% 0%, rgba(232, 89, 12, 0.18), transparent 55%),
    linear-gradient(135deg, var(--st-teal-950), var(--st-teal-800));
  color: #d8eef0;
  text-align: center;
}
/* Nested .st-container defaults to text-align:left — reassert band centering. */
.st-cta-band .st-container {
  text-align: center;
}
.st-cta-band h2 {
  color: #fff;
  font-family: var(--st-font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  margin-bottom: 0.5rem;
}
.st-cta-band p {
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: 1.35rem;
  color: #c3e0e3;
}
/* Philosophy line above the band heading (beats .st-cta-band p specificity) */
.st-cta-band .st-cta-band__quote {
  max-width: none;
  margin-bottom: 0.85rem;
  font-family: var(--st-font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  font-weight: 600;
  color: #fff;
  opacity: 0.92;
}
.st-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Quiet contact facts (sidebar) */
.st-facts {
  display: grid;
  gap: 1rem;
}
.st-facts__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--st-line);
}
.st-facts__item:last-child { border-bottom: 0; padding-bottom: 0; }
.st-facts__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--st-teal-50);
  color: var(--st-teal-700);
}
.st-facts__k {
  display: block;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-muted);
  margin-bottom: 0.15rem;
}
.st-facts__v { color: var(--st-ink); font-weight: 600; }
.st-facts__v a { font-weight: 700; }

/* Media figure with caption */
.st-figure { margin: 0; }
.st-figure img {
  width: 100%;
  border-radius: var(--st-radius-lg);
  display: block;
}
.st-figure figcaption {
  margin-top: 0.55rem;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
}

/* Scroll reveal (progressive; no-JS = fully visible).
   .js is set on <html> by st.js. */
html.js [data-st-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
html.js [data-st-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-st-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Client logo wall — one mark per cell on a fixed grid (21 = 7×3 at desktop).
   Optical normalisation: wide wordmarks run shorter, compact emblems taller,
   so every mark reads at roughly equal visual weight. Sole definition. */
.st-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.9rem 1.5rem;
  align-items: center;
  justify-items: center;
  opacity: 0.72;
  filter: grayscale(1);
}
@media (min-width: 640px) {
  .st-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .st-logos { grid-template-columns: repeat(7, 1fr); gap: 2.25rem 1.75rem; }
}
.st-logos img {
  max-height: 2.5rem;   /* normal: aspect ~1.8–3.2 */
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.st-logos img.st-logo--w { max-height: 1.75rem; } /* wide wordmarks (aspect > 3.2) */
.st-logos img.st-logo--t { max-height: 3.4rem; }  /* compact/tall emblems (aspect < 1.8) */

/* Path list for learnership destinations */
.st-path {
  display: grid;
  gap: 0.65rem;
}
@media (min-width: 768px) {
  .st-path { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
.st-path a {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--st-radius);
  border: 1px solid var(--st-line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  min-height: 100%;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.st-path a:hover {
  border-color: var(--st-teal-300);
  background: var(--st-teal-50);
  text-decoration: none;
  color: inherit;
}
.st-path a strong {
  font-family: var(--st-font);
  color: var(--st-ink);
  font-size: var(--st-fs-md);
}
.st-path a span { font-size: var(--st-fs-sm); color: var(--st-muted); line-height: 1.4; }
.st-path a .bi-arrow-right { color: var(--st-teal-600); margin-top: auto; padding-top: 0.5rem; }

/* Pagehead atmosphere wash */
.st-pagehead--photo {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 3rem);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1rem, calc(50vw - (var(--st-container) / 2)));
  background:
    linear-gradient(105deg, rgba(244, 242, 236, 0.97) 35%, rgba(244, 242, 236, 0.82) 70%, rgba(244, 242, 236, 0.55)),
    var(--st-pagehead-img, none) center / cover no-repeat;
  border-bottom: 1px solid var(--st-line);
}

/* Inline page footer CTA — replaces the old border-left st-card strip */
.st-callout {
  margin-top: var(--st-space);
  padding: 1.5rem 0 0.25rem;
  border-top: 1px solid var(--st-line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.st-callout__text { flex: 0 0 auto; min-width: 0; max-width: 42rem; }
.st-callout__text h2 {
  font-family: var(--st-font);
  font-size: var(--st-fs-h4);
  margin: 0 0 0.25rem;
}
.st-callout__text p { margin: 0; color: var(--st-muted); font-size: var(--st-fs-sm); max-width: 48ch; }
.st-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  flex: 0 0 auto;
}

/* Value / principle grid — hairline cells, not icon cards */
.st-values {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--st-line);
}
@media (min-width: 700px) {
  .st-values { grid-template-columns: 1fr 1fr; }
}
.st-values__item {
  padding: 1.15rem 1.1rem 1.15rem 0;
  border-bottom: 1px solid var(--st-line);
}
@media (min-width: 700px) {
  .st-values__item:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--st-line); }
  .st-values__item:nth-child(even) { padding-left: 1.5rem; }
}
.st-values__item h3 {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  margin: 0 0 0.35rem;
}
.st-values__item p {
  margin: 0;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.5;
  max-width: 40ch;
}

/* Flagship homepage — full-width intro, then two-column benefits + pullquote.
   Hierarchy: kicker → h2 title → bold pathway subhead → body prose. */
.st-flagship-intro {
  max-width: none;
  margin-bottom: 2rem;
}
.st-flagship-intro h2 {
  margin-bottom: 0.35rem;
}
/* 3.3 — subheading under the series title: smaller than h2, a touch firmer than body */
.st-flagship-subhead {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--st-ink);
  margin: 0 0 0.85rem;
  letter-spacing: -0.005em;
  max-width: none;
}
.st-flagship-subhead strong {
  font-weight: 600; /* keep the <strong> from going full 700 */
}
.st-flagship-intro__body {
  margin: 0;
  max-width: none; /* full content width (container), not section-head / 52ch */
  color: var(--st-muted);
  font-size: var(--st-fs-md);
  font-weight: 400;
  line-height: 1.6;
}
.st-split--start { align-items: start; }
/* Pullquote is short; centre it against the taller benefit column so the
   right half doesn't read as empty at the bottom. */
.st-split--start .st-pullquote { align-self: center; }

/* Icon benefit list (flagship / value props) */
.st-benefit-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.st-benefit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
.st-benefit-list__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  font-size: 1.1rem;
  flex: 0 0 auto;
}
.st-benefit-list li strong {
  display: block;
  font-size: var(--st-fs-md);
  color: var(--st-ink);
  margin-bottom: 0.15rem;
}
.st-benefit-list li span span {
  display: block;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.45;
  max-width: 40ch;
}

/* Learner Support — Prepare / Learn / Grow
   Restrained step cards: icon medallion + "Step N" eyebrow + colour rhythm,
   with a hairline chevron between cards on wide screens to read as a sequence. */
.st-journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 800px) {
  .st-journey {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
.st-journey__step {
  --st-journey-accent: var(--st-teal-600);
  --st-journey-wash: var(--st-teal-50);
  --st-journey-line: var(--st-teal-200);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 1.15rem 1.1rem 1.15rem 1rem;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  border-left: 3px solid var(--st-journey-accent);
}
/* Hairline chevron in the gutter between steps (wide screens only) */
@media (min-width: 800px) {
  .st-journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.7rem;
    top: 2.35rem;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--st-line);
    border-right: 2px solid var(--st-line);
    transform: rotate(45deg);
  }
}
/* 1 → 2 quiet teal progression; 3 (Grow) warms to brand accent */
.st-journey__step--1 {
  --st-journey-accent: var(--st-teal-500);
  --st-journey-wash: var(--st-teal-50);
  --st-journey-line: var(--st-teal-100);
}
.st-journey__step--2 {
  --st-journey-accent: var(--st-teal-700);
  --st-journey-wash: #e6f4f5;
  --st-journey-line: var(--st-teal-200);
}
.st-journey__step--3 {
  --st-journey-accent: var(--st-accent-500);
  --st-journey-wash: #fff3e8;
  --st-journey-line: #ffd8bf;
}
.st-journey__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--st-journey-accent);
  background: var(--st-journey-wash);
  border: 1px solid var(--st-journey-line);
  flex: 0 0 auto;
  margin-top: 0.1rem;
}
.st-journey__eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--st-journey-accent);
}
.st-journey__content h3 {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--st-ink);
}
.st-journey__tagline {
  margin: 0 0 0.55rem;
  font-size: var(--st-fs-sm);
  font-weight: 600;
  color: var(--st-body);
  line-height: 1.4;
}
.st-journey__content > p {
  margin: 0 0 0.55rem;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.5;
  max-width: 36ch;
}
.st-journey__focus {
  margin: 0 !important;
  padding-top: 0.45rem;
  border-top: 1px solid var(--st-line);
  font-size: var(--st-fs-sm);
  color: var(--st-body) !important;
  line-height: 1.45;
}
.st-journey__focus strong {
  color: var(--st-ink);
  font-weight: 600;
}

/* Learner Support — grouped offerings: white tiles + colour as group signal only */
.st-offer-groups {
  display: grid;
  gap: 1.25rem;
  align-items: start; /* each group sizes to its own content — no stretched single tiles */
}
@media (min-width: 800px) {
  .st-offer-groups { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
}
.st-offer-group {
  --st-offer-accent: var(--st-teal-600);
  --st-offer-wash: var(--st-teal-50);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 0 0 0 0.85rem;
  border-left: 3px solid var(--st-offer-accent);
  background: transparent;
}
.st-offer-group--learn { --st-offer-accent: var(--st-teal-600); --st-offer-wash: var(--st-teal-50); }
.st-offer-group--measure { --st-offer-accent: var(--st-accent-500); --st-offer-wash: #fff3e8; }
.st-offer-group--resources { --st-offer-accent: var(--st-teal-800); --st-offer-wash: var(--st-teal-50); }
.st-offer-group__head h3 {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--st-ink);
}
.st-offer-group__head p {
  margin: 0;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.45;
  max-width: 36ch;
}
.st-offer-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.st-offer-group__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1.05rem;
  border-radius: var(--st-radius);
  border: 1px solid var(--st-line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.st-offer-tile__icon {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--st-offer-wash);
  color: var(--st-offer-accent);
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.st-offer-tile__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.st-offer-group__list a:hover {
  border-color: var(--st-offer-accent);
  background: var(--st-teal-50);
  text-decoration: none;
  color: inherit;
}
.st-offer-group--measure .st-offer-group__list a:hover {
  background: #fff8f3;
}
.st-offer-group--resources .st-offer-group__list a:hover {
  background: var(--st-teal-50);
}
.st-offer-group__list strong {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  color: var(--st-ink);
}
.st-offer-tile__text > span {
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.4;
}

/* Specs list (about / seta) without card chrome */
.st-specs {
  display: grid;
  gap: 0.65rem 0;
}
.st-specs > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--st-line);
  font-size: var(--st-fs-sm);
}
.st-specs > div:last-child { border-bottom: 0; padding-bottom: 0; }
.st-specs__key {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--st-muted);
}
.st-specs__val { color: var(--st-ink); font-weight: 600; }

/* Doc download hero (company profile) */
.st-doc {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--st-line);
  border-bottom: 1px solid var(--st-line);
}
@media (min-width: 700px) {
  .st-doc { grid-template-columns: auto 1fr; gap: 1.75rem; }
}
.st-doc__icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--st-radius);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
}
.st-doc h2 { margin-bottom: 0.35rem; }
.st-doc p { margin: 0 0 1rem; color: var(--st-muted); max-width: 48ch; }

/* FAQ: quieter accordion */
.st-faq .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--st-line);
  background: transparent;
}
.st-faq .accordion-button {
  font-weight: 700;
  font-size: var(--st-fs-md);
  color: var(--st-ink);
  background: transparent;
  box-shadow: none;
  padding: 1rem 0;
}
.st-faq .accordion-button:not(.collapsed) {
  color: var(--st-teal-800);
  background: transparent;
  box-shadow: none;
}
.st-faq .accordion-button:focus { box-shadow: none; outline: none; }
.st-faq .accordion-button:focus-visible {
  outline: 3px solid var(--st-teal-400);
  outline-offset: 2px;
}
.st-faq .accordion-button::after { margin-left: 0.75rem; }
.st-faq .accordion-body {
  padding: 0 0 1.15rem;
  color: var(--st-body);
  font-size: var(--st-fs-sm);
  max-width: 52ch;
}
.st-faq .accordion-body p:last-child { margin-bottom: 0; }

/* Venue place tiles — quieter hover */
.st-place {
  box-shadow: none;
}
.st-place:hover {
  box-shadow: none;
  border-color: var(--st-teal-300);
}

/* Venue detail aside — keep useful box but lighter */
.st-venue__aside .st-card {
  box-shadow: none;
  border-color: var(--st-line);
  background: var(--st-surface);
}
.st-venue__aside .st-card h2,
.st-venue__aside .st-card .h4 {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
}

/* Testimonial videos without heavy cards */
.st-testimonial-video {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.st-testimonial-video video {
  width: 100%;
  border-radius: var(--st-radius);
  background: #000;
  display: block;
}
.st-testimonial-card {
  border: 0;
  border-top: 3px solid var(--st-teal-400);
  background: transparent;
  padding: 1rem 0 1.25rem;
  box-shadow: none;
}

/* Full-bleed CTA helper when inside .st-container */
.st-cta-band--breakout {
  margin-top: var(--st-space);
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* ------------------------------------------------------------------ errors (404 / 500)
   Flat brand mascot + clear exits. Full-bleed under the site chrome. */
.st-error-body .st-main {
  padding-bottom: 0;
}
.st-error {
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(127, 208, 214, 0.2), transparent 55%),
    radial-gradient(700px 360px at 100% 0%, rgba(232, 89, 12, 0.06), transparent 50%),
    var(--st-surface);
  border-top: 1px solid var(--st-line);
}
.st-error__inner {
  max-width: var(--st-container);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1rem, 3vw, 1.5rem) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .st-error__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.75rem;
  }
}
.st-error__code {
  font-family: var(--st-font-display);
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--st-teal-700);
  margin: 0 0 0.35rem;
  opacity: 0.9;
}
.st-error--500 .st-error__code {
  color: var(--st-accent-600);
}
.st-error__copy .st-kicker {
  margin-bottom: 0.45rem;
}
.st-error__copy h1 {
  font-family: var(--st-font-display);
  font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--st-ink);
  margin: 0 0 0.65rem;
  line-height: 1.15;
}
.st-error__lede {
  font-size: var(--st-fs-lg);
  color: var(--st-muted);
  max-width: 40ch;
  line-height: 1.55;
  margin: 0;
}
.st-error__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}
.st-error__art {
  margin: 0;
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  border: 1px solid var(--st-line);
  background: var(--st-bg);
  box-shadow: var(--st-shadow);
}
.st-error__art img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
@media (max-width: 899px) {
  .st-error__inner {
    text-align: center;
  }
  .st-error__lede {
    margin-inline: auto;
  }
  .st-error__ctas {
    justify-content: center;
  }
  .st-error__art {
    order: -1;
    max-width: 28rem;
    margin-inline: auto;
  }
}

@media print {
  .st-topbar,
  .st-navbar,
  .st-subnav,
  .st-footer,
  .st-top,
  .st-hero__ctas,
  .st-article__back,
  .st-article__share,
  .st-article__foot,
  .st-article__ext,
  .st-cta-band,
  /* Below-article blocks on blog_read (recent posts + CTA) */
  .st-article + .st-section {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .st-article {
    padding-top: 0;
    padding-bottom: 0;
  }

  .st-article__meta {
    border-bottom-color: #ccc;
    justify-content: flex-start;
  }

  .st-article__print-url {
    display: block !important;
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: #444;
    word-break: break-all;
  }

  .st-article__thumb figcaption {
    color: #444;
  }
}

/* ==========================================================================
   Flagship — The Leadership Impact Series (public /fsp)
   Two-column hero, four proof points, Silver/Platinum pathway cards, CTA.
   Teal is the site accent; Platinum introduces a warm orange (--fsp-orange),
   defined here as a scoped token so the rest of the page keeps site tokens.
   Theme-aware: light values on :root, dark overrides under [data-theme=dark].
   ========================================================================== */
:root {
  --fsp-orange:        #ef6c1a;   /* Platinum warm orange (icon fills, badge) */
  --fsp-orange-strong: #d9480f;   /* deeper fill for hover/emphasis */
  --fsp-orange-soft:   #fdece0;   /* tint behind checklist icons */
  --fsp-orange-ink:    #c2410c;   /* orange text that stays readable on light */
}
html[data-theme="dark"] {
  --fsp-orange:        #f5843c;
  --fsp-orange-strong: #ef6c1a;
  --fsp-orange-soft:   #3a2317;
  --fsp-orange-ink:    #f6a468;
}

/* --- Hero: copy left, circular image right --- */
.fsp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1rem, 2.5vw, 2rem) 0;
}
@media (min-width: 900px) {
  .fsp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.fsp-hero__copy h1 { margin: 0 0 0.6rem; }
.fsp-hero__tagline {
  color: var(--st-teal-700);
  font-weight: 600;
  font-size: var(--st-fs-lg);
  line-height: 1.45;
  max-width: 42ch;
  margin: 0 0 1rem;
}
.fsp-hero__intro {
  color: var(--st-body);
  font-size: var(--st-fs-md);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 0 0.9rem;
}
.fsp-hero .st-hero__ctas { margin-top: 1.4rem; }
.fsp-hero__media { display: flex; justify-content: center; }
.fsp-hero__circle {
  width: clamp(15rem, 34vw, 24rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--st-card);
  box-shadow: 0 0 0 1px var(--st-teal-200), var(--st-shadow);
}
.fsp-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info-pack CTA: one section title (the left column). The form card carries only
   its intro line — the duplicate heading is gone — and the block is tightened so
   the form doesn't tower over the copy beside it. */
/* Info-pack form opens in #fspPackModal from the hero CTA (no duplicate CTA band). */
#fspPackModal .st-human-check { margin-top: 1.1rem; }

/* --- Four proof points --- */
.fsp-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.35rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .fsp-proof { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .fsp-proof { grid-template-columns: repeat(4, 1fr); } }
.fsp-proof__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
@media (min-width: 900px) {
  .fsp-proof__item + .fsp-proof__item {
    border-left: 1px solid var(--st-line);
    padding-left: 1.5rem;
  }
}
.fsp-proof__icon { color: var(--st-teal-600); font-size: 1.7rem; line-height: 1; margin-top: 0.05rem; }
.fsp-proof__text strong { display: block; color: var(--st-ink); font-size: var(--st-fs-md); margin-bottom: 0.2rem; }
.fsp-proof__text span { display: block; color: var(--st-muted); font-size: var(--st-fs-sm); line-height: 1.45; }

/* --- Pathways: intro, then two equal cards --- */
.fsp-paths-head { text-align: center; max-width: 62rem; margin: 0 auto 1.75rem; }
.fsp-paths-head h2 { margin: 0 0 0.6rem; }
.fsp-paths-head > p { color: var(--st-muted); max-width: 70ch; margin: 0 auto; }
.fsp-pathways {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .fsp-pathways { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.fsp-card {
  --fsp-card-accent: var(--st-teal-700);
  --fsp-card-soft: var(--st-teal-50);
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: var(--st-shadow-sm);
}
.fsp-card--silver   { --fsp-card-accent: var(--st-teal-700); --fsp-card-soft: var(--st-teal-50); }
.fsp-card--platinum { --fsp-card-accent: var(--fsp-orange-ink); --fsp-card-soft: var(--fsp-orange-soft); }

.fsp-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  padding-bottom: 1.1rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--st-line);
}
.fsp-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.6rem;
  background: var(--fsp-card-accent);
}
.fsp-card--platinum .fsp-card__icon { background: var(--fsp-orange); }
.fsp-card__name {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fsp-card-accent);
  line-height: 1.05;
}
.fsp-card__sub {
  margin: 0.2rem 0 0.6rem;
  font-weight: 600;
  color: var(--fsp-card-accent);
  font-size: var(--st-fs-sm);
}
.fsp-card__badge {
  display: inline-block;
  background: var(--fsp-card-accent);
  color: #fff;
  font-size: var(--st-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.72rem;
  border-radius: var(--st-radius-sm);
  line-height: 1.1;
}
.fsp-card--platinum .fsp-card__badge { background: var(--fsp-orange); }

.fsp-checklist { list-style: none; margin: 0; padding: 0; }
.fsp-checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--st-line);
}
.fsp-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.fsp-check__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  background: var(--fsp-card-soft);
  color: var(--fsp-card-accent);
}
.fsp-check__text { align-self: center; }
.fsp-check__text strong {
  display: block;
  color: var(--st-ink);
  font-size: var(--st-fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.fsp-check__text span {
  display: block;
  color: var(--st-muted);
  font-size: var(--st-fs-xs);
  line-height: 1.4;
  margin-top: 0.12rem;
}
.fsp-check__text em { font-style: italic; }

/* --- Info-pack form: pathway radios --- */
.fsp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fsp-fieldset > .form-label { margin-bottom: 0.5rem; }
.fsp-radio-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.fsp-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--st-fs-sm);
  color: var(--st-body);
  cursor: pointer;
}
.fsp-radio input { margin: 0; }

/* ==================================================================== /team
   Meet the Team — the ONE definitive block for this page. The two older
   .team-card rule sets (one circular+greyscale, one borderless hairline)
   were deleted; this replaces both. Borders, not shadows. Tight radii.
   Nothing here depends on :hover to be reachable.
   -------------------------------------------------------------------- */

/* --- section heads (icon disc + heading + intro) --- */
.team-sec { margin-top: var(--st-space); }
.team-sec + .team-sec,
.team-sec--ruled {
  border-top: 1px solid var(--st-line);
  padding-top: var(--st-space);
}
.team-sec__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.team-sec__icon {
  flex: 0 0 auto;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  border: 1px solid var(--st-teal-200);
  background: var(--st-teal-50);
  color: var(--st-teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.team-sec__head h2 {
  font-family: var(--st-font);
  font-size: var(--st-fs-h3);
  color: var(--st-teal-700);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.team-sec__head p {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-fs-sm);
  max-width: 64ch;
  line-height: 1.55;
}

/* --- people grid: 2 up on phones, 3 on tablets, 4 across on desktop --- */
.team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 720px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
}
@media (min-width: 1000px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 0.9rem 1.35rem;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  box-shadow: none;
}
.team-card__media {
  flex: 0 0 auto;
  width: clamp(5.5rem, 22vw, 7.5rem);
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--st-teal-50);
  border: 1px solid var(--st-teal-100);
}
.team-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* headshots crop from the top — centre-cropping cuts foreheads off */
  object-position: center 22%;
}
/* Brand silhouette fallback is already framed; do not shift it. */
.team-card__media img.team-card__placeholder { object-position: center; }
.team-card__name {
  font-family: var(--st-font);
  font-size: var(--st-fs-md);
  font-weight: 700;
  color: var(--st-ink);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.team-card__role {
  margin: 0;
  font-size: var(--st-fs-sm);
  color: var(--st-muted);
  line-height: 1.4;
}

/* --- testimonials: scroll-snap track, 3 up on desktop --- */
/* Flex, not grid: grid-auto-columns with a percentage max still lets the
   tracks shrink to fit inside a scroll container, which squashed all twelve
   cards onto one screen. flex-basis + flex-shrink:0 overflows properly. */
.tq__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 0.75rem;
}
.tq__card {
  flex: 0 0 100%;          /* one per screen; 2 then 3 at the widths below */
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.3rem 1.35rem 1.15rem;
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  box-shadow: none;
}
@media (min-width: 700px) {
  .tq__card { flex-basis: calc((100% - 1rem) / 2); }
}
@media (min-width: 1000px) {
  .tq__card { flex-basis: calc((100% - 2rem) / 3); }
}
.tq__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  line-height: 0.55;
  height: 1.1rem;
  color: var(--st-teal-500);
}
.tq__body {
  margin: 0;
  flex: 1;
  font-size: var(--st-fs-sm);
  line-height: 1.65;
  color: var(--st-body);
}
/* Cards stay equal height at every width so the attributions line up and the
   frame does not jump as you page. That only works because the excerpts are
   kept to a similar length (116-285 chars); a 450-char quote left the short
   ones sitting in a tall empty box. */
.tq__foot {
  font-style: normal;
  font-size: var(--st-fs-sm);
  padding-top: 0.85rem;
  border-top: 1px solid var(--st-line);
}
.tq__who { display: block; font-weight: 700; color: var(--st-ink); }
.tq__title { display: block; color: var(--st-muted); font-size: var(--st-fs-xs); }
.tq__co { display: block; color: var(--st-teal-700); font-weight: 600; font-size: var(--st-fs-xs); }

/* Nav is revealed by the carousel script — no dead buttons without JS,
   where the track stays a plain horizontal scroller. */
.tq__nav { display: none; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.tq[data-tq-ready] .tq__nav { display: flex; }
.tq__btn {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--st-teal-700);
  background: var(--st-bg);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  cursor: pointer;
}
.tq__btn:hover:not(:disabled),
.tq__btn:focus-visible:not(:disabled) {
  background: var(--st-teal-50);
  border-color: var(--st-teal-300);
}
.tq__btn:disabled { opacity: 0.35; cursor: default; }
.tq__track:focus-visible {
  outline: 3px solid var(--st-teal-400);
  outline-offset: 3px;
}

/* --- closing contact bar --- */
.team-cta {
  margin-top: var(--st-space);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--st-teal-50);
  border: 1px solid var(--st-teal-200);
  border-radius: var(--st-radius-sm);
}
.team-cta__icon {
  flex: 0 0 auto;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  background: var(--st-teal-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.team-cta__text { flex: 1 1 16rem; min-width: 0; }
.team-cta__text h2 {
  font-family: var(--st-font);
  font-size: var(--st-fs-h4);
  color: var(--st-ink);
  margin: 0 0 0.2rem;
}
.team-cta__text p {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--st-fs-sm);
  max-width: 52ch;
}
.team-cta__action { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 560px) {
  .team-cta { padding: 1.15rem 1.15rem 1.25rem; }
  .team-cta__action { margin-left: 0; flex-basis: 100%; }
  .team-cta__action .btn { width: 100%; justify-content: center; }
}