/*
 * Stepped Care Solutions — "Adapting for Impact" design system.
 *
 * All classes use the sx- prefix to avoid collisions with main.css and
 * annual-report.css. All custom properties use --sx-* namespace.
 * Do NOT edit main.css or annual-report.css.
 *
 * Section order follows the approved prototype (home/index.html).
 * Responsive breakpoint: 960px (matches prototype exactly).
 * Prefers-reduced-motion block at the end.
 *
 * @package scs
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --sx-plum:        #32003D;
  --sx-plum-ink:    #1c0024;
  --sx-lav:         #8056D4;
  --sx-lav-wash:    #F2EEFB;
  --sx-lav-lt:      #C0ABEA;
  --sx-gold:        #FAAF00;
  --sx-gold-wash:   #FEF7E5;   /* banned as a bg on MARKETING sections; used only by editorial templates */
  --sx-teal:        #008096;
  --sx-teal-dk:     #006376;
  --sx-teal-wash:   #E5F2F5;
  --sx-rasp:        #E91346;
  --sx-cream:       #FEF7E5;   /* editorial warm canvas (Annual Report / Work Story), per ar-elite-art-direction.md */
  --sx-ink:         #211A25;
  --sx-body:        #4a4350;
  --sx-line:        #E6DFE9;
  --sx-white:       #ffffff;

  /* ── Section text-colour tokens — authoritative cascade vars.
     Every sx- section reads colour from these vars (colour: var(--sx-head) etc.)
     so the .sx-text--{key} override on the section ROOT wins at every specificity
     level — no source-order fragility. Defaults produce the current appearance
     when no text-colour key is chosen. Card-specific vars cascade from the
     section defaults but can be set independently if needed.
     ─────────────────────────────────────────────────────────── */
  --sx-head:        inherit;   /* h1/h2/h3 — resolved per-section below */
  --sx-body-txt:    inherit;   /* p/li body copy — resolved per-section below */
  --sx-eyebrow-txt: inherit;   /* .sx-eyebrow — resolved per-section below */
  --sx-card-head:   inherit;   /* card h3, falls back to --sx-head via section default */
  --sx-card-body:   inherit;   /* card p, falls back to --sx-body-txt */

  --sx-maxw:   1240px;
  --sx-gutter: clamp(22px, 5vw, 80px);
  --sx-pad-y:  clamp(84px, 11vh, 168px);
  --sx-r:      clamp(18px, 2.4vw, 30px);
  --sx-leaf:   clamp(38px, 6vw, 84px) var(--sx-r) clamp(38px, 6vw, 84px) var(--sx-r);
  --sx-shadow: 0 34px 80px -40px rgba(50, 0, 61, .5);

  /* ── Spacing scale (8px base — extends site-wide elite language) ── */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  40px;
  --sp-5:  64px;
  --sp-6:  96px;
  --sp-7:  128px;
  --sp-8:  192px;

  /* ── Page gutter (AR + future sections) ── */
  --sx-page-gutter: clamp(24px, 6vw, 96px);

  /* ── Editorial photo grade (near-invisible; trust the image) ── */
  --sx-photo-grade: saturate(0.96) contrast(1.03) brightness(1.01);
}

/* ============================================================
   SECTION TEXT-COLOUR DEFAULTS (2026-09-12)
   Per-section defaults for the inherited colour vars. Each
   section sets its own --sx-head / --sx-body-txt / --sx-eyebrow-txt
   to match its current rendered appearance. The .sx-text--{key}
   classes (below) override these on the section ROOT, which
   cascades to all descendants without specificity conflicts.

   Note: --sx-head / --sx-body-txt / --sx-eyebrow-txt are resolved
   to concrete values here. The :root defaults (inherit) are a
   safety fallback only — these section-level rules do the real work.
   ============================================================ */

/* Hero: white headline, near-white lead, gold eyebrow */
.sx-hero {
  --sx-head:        #ffffff;
  --sx-body-txt:    rgba(255, 255, 255, .9);
  --sx-eyebrow-txt: var(--sx-gold);
}

/* Photo band: gold headline, white body (over plum overlay on photo) */
.sx-band {
  --sx-head:        var(--sx-gold);
  --sx-body-txt:    #ffffff;
  --sx-eyebrow-txt: var(--sx-gold);
}

/* Intro/who: plum headings + body, teal-dk eyebrow */
.sx-who {
  --sx-head:        var(--sx-plum);
  --sx-body-txt:    var(--sx-plum);
  --sx-eyebrow-txt: var(--sx-teal-dk);
}

/* Approach: ink h2, plum h3/body, teal-dk eyebrow */
.sx-approach {
  --sx-head:        var(--sx-ink);
  --sx-body-txt:    var(--sx-body);
  --sx-eyebrow-txt: var(--sx-teal-dk);
  --sx-card-head:   var(--sx-plum);
  --sx-card-body:   var(--sx-body);
}

/* Results/Venn: ink h2, body-grey subtext, teal-dk eyebrow.
   Stat-sub (#32003D) and stat-desc (var --sx-body) keep their own
   hard values for the default case; .sx-text--{key} overrides via the
   direct child selectors in the text-colour blocks below. */
.sx-results {
  --sx-head:        var(--sx-ink);
  --sx-body-txt:    var(--sx-body);
  --sx-eyebrow-txt: var(--sx-teal-dk);
}

/* Services: teal-dk bg retinted in HOME_SERVICES_TEAL_BLOCK below;
   default vars match that block (white head, gold eyebrow, .85/.82 opacity body). */
.sx-services {
  --sx-head:        #ffffff;
  --sx-body-txt:    rgba(255, 255, 255, .85); /* lede paragraph + intro copy */
  --sx-eyebrow-txt: var(--sx-gold);
  --sx-card-head:   #ffffff;
  --sx-card-body:   rgba(255, 255, 255, .82); /* card paragraph */
}

/* Testimonials/quotes: plum bg, white text, gold eyebrow */
.sx-quotes {
  --sx-head:        #ffffff;
  --sx-body-txt:    #ffffff;
  --sx-eyebrow-txt: var(--sx-gold);
}

/* Training cards: lav-wash bg, ink h2, body body, teal-dk eyebrow, plum card h3 */
.sx-training {
  --sx-head:        var(--sx-ink);
  --sx-body-txt:    var(--sx-body);
  --sx-eyebrow-txt: var(--sx-teal-dk);
  --sx-card-head:   var(--sx-plum);
  --sx-card-body:   var(--sx-body);
}

/* CTA: plum bg, white text, gold eyebrow */
.sx-cta {
  --sx-head:        #ffffff;
  --sx-body-txt:    rgba(255, 255, 255, .9);
  --sx-eyebrow-txt: var(--sx-gold);
}

/* Rich text: ink headings, body copy, teal-dk eyebrow */
.sx-rich-text {
  --sx-head:        var(--sx-ink);
  --sx-body-txt:    var(--sx-body);
  --sx-eyebrow-txt: var(--sx-teal-dk);
}

/* Text-image: ink h2, body copy, teal-dk eyebrow (default white bg) */
.sx-ti {
  --sx-head:        var(--sx-ink);
  --sx-body-txt:    var(--sx-body);
  --sx-eyebrow-txt: var(--sx-teal-dk);
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* Editorial photo-grade utility — apply to any img that should render
   full-colour with the standard near-invisible grade. No multiply, no overlay. */
.ar-photo img {
  filter: var(--sx-photo-grade);
}

.sx-wrap {
  max-width: var(--sx-maxw);
  margin: 0 auto;
  padding: 0 var(--sx-gutter);
}

/* HARD backstop: no element (bleeding AR shapes, header nav, anything) may ever
   create horizontal scroll — that was pushing the sticky header logo off-screen.
   overflow-x:clip does NOT create a scroll container, so position:sticky still
   works. Applied to root + #main to catch overflow from inside AND outside #main. */
html, body { overflow-x: clip; }
#main { overflow-x: clip; }

/* Header logo: pull hard to the left edge so it's clearly, fully visible. */
.sx-brand {
  margin-left: calc(-1 * var(--sx-gutter) + 14px);
}

.sx-section {
  padding: var(--sx-pad-y) 0;
}

/* Work page (.wk-intro model section): the heading block sat flush against the
   body copy (0px gap). Add breathing room between the heading and the paragraphs
   so the section header and its body content are clearly separated (owner
   request 2026-09-29). */
.wk-intro .ab-p-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.sx-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  /* Token-driven: reads --sx-eyebrow-txt set per-section in SECTION TEXT-COLOUR
     DEFAULTS. Fallback = teal-dk (#006376) for WCAG 1.4.3 on light grounds
     (6.4:1; the lighter --sx-teal was 4.34:1, a fail). When a .sx-text--{key}
     override is applied on the section root it sets --sx-eyebrow-txt directly. */
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-eyebrow-txt, var(--sx-teal-dk));
  margin-bottom: 1.1rem;
  display: block;
}

/* Large eyebrow: boost to large/bold text size for WCAG compliance.
   Applied when eyebrow is on a saturated teal background with a light colour
   to meet the 3:1 minimum for large text. */
.sx-eyebrow--lg {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .12em;
}

/* ── Gold heading-rule (canonical) ──
   Single source for the short gold underline used under section headings.
   width/height/colour live here; each section supplies only its own margin
   (centered vs left) below. Quotes keeps a 2px hairline exception. */
.ab-rule,
.sx-rule {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--sx-gold);
  border-radius: 0;
  /* Standard vertical spacing — site-wide uniform (owner request 2026-09-29).
     Adjacent heading/body elements carry no top margin, so this alone sets the
     heading→bar and bar→body gaps. Left-aligned by default; centered sections
     add margin-left/right:auto only (they do NOT redeclare the vertical margin). */
  margin: clamp(1.3rem, 2.4vw, 1.7rem) 0;
}

/* ── Buttons ── */
.sx-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  text-decoration: none;
}

.sx-btn-lav {
  background: var(--sx-lav);
  color: #fff;
}
.sx-btn-lav:hover {
  background: #6f45c4;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(128, 86, 212, .7);
}

.sx-btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.sx-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
  transform: translateY(-2px);
}

.sx-btn-ghost-plum {
  background: transparent;
  color: var(--sx-plum);
  border-color: var(--sx-lav);
}
.sx-btn-ghost-plum:hover {
  background: var(--sx-lav);
  color: #fff;
  transform: translateY(-2px);
}

.sx-btn-gold {
  background: var(--sx-gold);
  color: var(--sx-plum-ink);
}
.sx-btn-gold:hover {
  background: #e59f00;
  transform: translateY(-2px);
}

/* ── Photo / figure tint ── */
/*
 * Soft plum directional gradient tint — keeps the photo mostly legible
 * (light desaturate ~40–60%, not full grayscale) with a plum overlay that
 * fades toward the subject. Design-system spec: NOT grayscale-multiply.
 */
.sx-figure {
  position: relative;
  border-radius: var(--sx-leaf);
  overflow: hidden;
  box-shadow: var(--sx-shadow);
  /* Define the frame shape so the object-fit:cover image below fills it with no
     collapse / white bar (the img uses height:100% and needs a sized parent). */
  aspect-ratio: 4 / 3;
}
.sx-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.02);
}
.sx-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(50, 0, 61, .42), rgba(128, 86, 212, .12) 55%, transparent);
  mix-blend-mode: multiply;
}

/* ============================================================
   HEADER  (cream sticky bar)
   ============================================================ */
.sx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sx-plum);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sx-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--sx-gutter);
}

.sx-brand {
  display: inline-flex;
  align-items: center;
}
.sx-brand img {
  height: 60px;
  width: auto;
  display: block;
}

.sx-nav-list {
  display: flex;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sx-nav-list a {
  font-weight: 700;
  font-size: .95rem;
  color: var(--sx-plum);
  opacity: .95;
  transition: opacity .15s, color .15s;
  text-decoration: none;
}
.sx-nav-list a:hover {
  opacity: 1;
  color: var(--sx-lav);
}

.sx-nav .sx-btn {
  padding: .7rem 1.4rem;
}

/* Mobile toggle — hidden on desktop, shown below 960px */
.sx-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  color: var(--sx-plum);
  font-size: 1.5rem;
  line-height: 1;
  aria-hidden: true;
}

/* ============================================================
   HERO
   ============================================================ */
.sx-hero {
  position: relative;
  background: var(--sx-plum);
  color: #fff;
  overflow: hidden;
  min-height: clamp(560px, 82vh, 860px);
  display: flex;
  align-items: center;
}

.sx-hero-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 68%;
  background-position: center 28%;
  background-size: cover;
  background-repeat: no-repeat;
  /* Feather the photo's own left edge to transparent so it dissolves into the
     plum panel — removes the hard vertical seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 52%);
}
/* Optional hero video fills the same masked photo panel; inherits the parent's
   left-edge feather (mask applies to the subtree) and sits under the .sx-hero
   ::after plum wash. object-position is set inline from the focal-point fields. */
.sx-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* When a hero video is present and motion is allowed, suppress the static
   background image behind the video so there is no photographic still flashing
   in before the video paints (plum panel shows during the brief buffer, then the
   video). The background image is retained under prefers-reduced-motion as the
   intended no-motion still fallback. */
@media (prefers-reduced-motion: no-preference) {
  .sx-hero-photo--has-video {
    background-image: none !important;
  }
}

.sx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Smooth plum wash: heavy on the text side, easing continuously across the
     photo with no stepped band. */
  background:
    linear-gradient(90deg,
      var(--sx-plum) 0%,
      rgba(50, 0, 61, .96) 28%,
      rgba(50, 0, 61, .78) 44%,
      rgba(50, 0, 61, .42) 64%,
      rgba(50, 0, 61, .18) 82%,
      rgba(50, 0, 61, .08) 100%
    ),
    radial-gradient(60% 80% at 12% 30%, rgba(128, 86, 212, .28), transparent 60%);
}

/* Board hero — same treatment as About, but the wash colour, veil opacity and
   focal point are ACF-driven (AR-style controls). Plum @ 100 reproduces the
   About wash exactly; other brand colours / opacities re-tint the veil, and the
   focal vars pan the photo. --sx-hero-rgb / --sx-hero-op / --sx-hero-focal are
   set inline on the section by template-board.php. */
.sx-hero--board .sx-hero-photo,
.sx-hero--svc .sx-hero-photo,
.sx-hero--acf .sx-hero-photo {
  background-position: var(--sx-hero-focal, center 28%);
}
/* Shared component: room under the title when there's no lead line. */
.sx-hero--acf .sx-btns { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.sx-hero--board::after,
.sx-hero--svc::after,
.sx-hero--acf::after {
  background:
    linear-gradient(90deg,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(1   * var(--sx-hero-op, 1))) 0%,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(.96 * var(--sx-hero-op, 1))) 28%,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(.78 * var(--sx-hero-op, 1))) 44%,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(.42 * var(--sx-hero-op, 1))) 64%,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(.18 * var(--sx-hero-op, 1))) 82%,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(.08 * var(--sx-hero-op, 1))) 100%
    ),
    radial-gradient(60% 80% at 12% 30%, rgba(128, 86, 212, .28), transparent 60%);
}

.sx-hero .sx-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

.sx-hero h1 {
  font-size: clamp(2.7rem, 6vw, 5.1rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -.01em;
  max-width: 15ch;
  font-family: 'Poppins', sans-serif;
  color: var(--sx-head); /* reads section default (#fff) or .sx-text--{key} override */
  margin: 0;
}

/* Each ACF headline line is its own block, so the line-1/2/3 fields map 1:1 to
   visual lines and never reflow into each other when the headline size changes. */
.sx-hero h1 .sx-hline { display: block; }
.sx-hero h1 .sx-lav  { color: var(--sx-lav-lt); }
.sx-hero h1 .sx-gold { color: var(--sx-gold); }

.sx-hero p.sx-lead {
  margin: 1.7rem 0 2.3rem;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--sx-body-txt); /* reads section default (rgba white .9) or override */
  max-width: 40ch;
  line-height: 1.6;
}

/* Home hero lead reads bold (owner 2026-10-09); scoped to Home — universal page hero (.sx-hero--acf) unchanged. */
.sx-hero:not(.sx-hero--acf) p.sx-lead { font-weight: 700; }

.sx-hero .sx-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   WHO WE ARE / INTRO + STATS (lavender-wash)
   Single authoritative .sx-who base. The freed globe/stats "feature band"
   descendant rules (.sx-who .sx-stat-row / .sx-globe-wrap / .sx-stats, plus
   the ≤640px overrides) live in the HOME ELEVATION block below — de-contained
   2026-09-12. Keep .sx-who defined here only, to avoid split/dead overrides.
   ============================================================ */
.sx-who {
  /* Hero → intro handoff: a soft plum-to-lavender-wash gradient over the wash.
     (The home section usually overrides this with an ACF inline background.) */
  background:
    linear-gradient(180deg,
      rgba(50, 0, 61, .08) 0%,
      rgba(50, 0, 61, .02) 6%,
      var(--sx-lav-wash) 20%
    ),
    var(--sx-lav-wash);
  text-align: center;
  position: relative;
  /* Globe is a freed, standalone object now — never clipped. */
  overflow: visible;
  padding-bottom: clamp(56px, 9vh, 110px);
}

.sx-who-inner {
  position: relative;
  z-index: 1;
  max-width: 66rem;
  margin: 0 auto;
  /* Breathing room above the intro heading/body. */
  padding-top: clamp(42px, 5vh, 72px);
}

.sx-who h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  /* Token-driven: reads --sx-head set on .sx-who (default: plum on lavender-wash,
     13:1 — AA pass). .sx-text--{key} on the section root overrides this var. */
  color: var(--sx-head);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}
.sx-who h2 em {
  font-style: italic;
  color: var(--sx-head);
}

.sx-who p {
  margin: 1.8rem auto 0;
  max-width: 54rem;
  color: var(--sx-body-txt);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

/* Stat row below the body copy */
.sx-stat-row {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(128, 86, 212, .24);
}

.sx-stat-row div {
  font-family: 'Poppins', sans-serif;
}
.sx-stat-row b {
  display: block;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--sx-lav); /* stat numbers stay lavender by default — not overridden by section text vars */
}
.sx-stat-row span {
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sx-body-txt); /* section body-txt var — picks up text-colour override */
  font-weight: 600;
}

/* ============================================================
   APPROACH (cream, split grid + hairline list)
   ============================================================ */
.sx-approach {
  background: var(--sx-white);
}

.sx-approach-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

.sx-approach h2 {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--sx-head);
  line-height: 1.02;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}

.sx-approach-list {
  margin-top: 2.2rem;
}

.sx-approach-item {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(50, 0, 61, .16);
}
.sx-approach-item:last-child {
  border-bottom: 1px solid rgba(50, 0, 61, .16);
}
.sx-approach-item h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sx-card-head);
  margin-bottom: .35rem;
  font-family: 'Poppins', sans-serif;
}
.sx-approach-item p {
  color: var(--sx-card-body);
  font-size: 1rem;
  margin: 0;
}

/* ============================================================
   PHOTO BAND (full-bleed, plum wash)
   ============================================================ */
.sx-band {
  position: relative;
  color: #fff;
  text-align: center;
  padding: clamp(96px, 14vh, 190px) 0;
  overflow: hidden;
}

.sx-band-bg {
  position: absolute;
  inset: 0;
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.8) contrast(1.03);
}

.sx-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(50, 0, 61, .32), rgba(50, 0, 61, .62) 78%),
    linear-gradient(180deg, rgba(50, 0, 61, .30), rgba(50, 0, 61, .50));
}

.sx-band .sx-wrap {
  position: relative;
  z-index: 2;
}

.sx-band h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  color: var(--sx-head); /* default: gold via .sx-band section var */
  line-height: 1.08;
  max-width: 20ch;
  margin: 0 auto;
  text-shadow: 0 4px 24px rgba(20, 0, 26, .8);
  font-family: 'Poppins', sans-serif;
}

.sx-band p {
  margin: 1.4rem auto 0;
  max-width: 44ch;
  color: var(--sx-body-txt); /* default: #fff via .sx-band section var */
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  text-shadow: 0 2px 14px rgba(20, 0, 26, .85);
}

/* ============================================================
   RESULTS / VENN (white, centred circles)
   ============================================================ */
.sx-results {
  background: var(--sx-white);
  text-align: center;
}

.sx-results-head h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--sx-head);
}
.sx-results-head p {
  margin: .9rem auto 0;
  color: var(--sx-body-txt);
  font-size: 1.15rem;
}

/*
 * Venn implementation — centred-circle technique per approved prototype.
 * Each .sx-stat::before is the translucent circle, centred behind its
 * stat via translate(-50%,-50%). Content sits above via z-index:1.
 */
.sx-venn {
  position: relative;
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

.sx-stat {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(300px, 36vw, 460px);
  padding: 1rem .5rem;
}

/* Centred translucent Venn circle behind each stat */
.sx-stat::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 36vw, 460px);
  height: clamp(280px, 36vw, 460px);
  border-radius: 50%;
  z-index: 0;
  mix-blend-mode: multiply;
}

.sx-s1::before { background: radial-gradient(circle, rgba(250, 175, 0, .34), rgba(250, 175, 0, .12) 66%, transparent 72%); }
.sx-s2::before { background: radial-gradient(circle, rgba(0, 128, 150, .28), rgba(0, 128, 150, .09) 66%, transparent 72%); }
.sx-s3::before { background: radial-gradient(circle, rgba(128, 86, 212, .30), rgba(128, 86, 212, .10) 66%, transparent 72%); }

/* All stat content above the circle */
.sx-stat > * { position: relative; z-index: 1; }

.sx-stat .sx-stat-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.15;
}
.sx-stat .sx-stat-sub {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--sx-plum); /* default: plum on white; text-colour overrides via .sx-text--{key} direct selectors */
  font-size: 1.125rem;   /* 18px — above the 16px floor: Venn supports read small next to the 96px numeral */
  margin: .25rem 0 .1rem;
}
.sx-stat .sx-stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 7vw, 6rem);
  line-height: 1;
  margin: .35rem 0 .55rem;
}
.sx-stat .sx-stat-desc {
  font-size: 1.125rem;   /* 18px — above the 16px floor: Venn supports read small next to the 96px numeral */
  color: var(--sx-body); /* default: body grey on white; text-colour overrides via .sx-text--{key} direct selectors */
  max-width: 22ch;
  margin: 0 auto;
}

/* Per-stat colour coding */
.sx-s1 .sx-stat-label, .sx-s1 .sx-stat-num { color: #b57e00; }
.sx-s2 .sx-stat-label, .sx-s2 .sx-stat-num { color: var(--sx-teal); }
.sx-s3 .sx-stat-label, .sx-s3 .sx-stat-num { color: var(--sx-lav); }

/* ============================================================
   SERVICES GRID (cream, lavender-wash cards + raspberry icons)
   ============================================================ */
.sx-services {
  background: var(--sx-white);
}

.sx-services-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(36px, 5vw, 72px);
}

.sx-services-lede h2 {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 800;
  color: var(--sx-head);
  line-height: 1.0;
  font-family: 'Poppins', sans-serif;
  margin: 0;
}
.sx-services-lede p,
.sx-services-intro {
  margin-top: 1.4rem;
  color: var(--sx-body-txt);
  font-weight: 500;
  font-size: 1.15rem;
  max-width: 26ch;
}

.sx-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 22px);
}

.sx-card {
  background: var(--sx-lav-wash);
  border-radius: var(--sx-r);
  padding: clamp(24px, 2.4vw, 34px);
  transition: transform .22s ease, box-shadow .22s ease;
}
.sx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -30px rgba(50, 0, 61, .45);
}

.sx-card-ico-img {
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  display: block;
}

.sx-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sx-card-head);
  margin-bottom: .5rem;
  font-family: 'Poppins', sans-serif;
}
.sx-card p {
  font-size: 1rem;   /* reading-copy floor 16px (was .98rem) */
  color: var(--sx-card-body);
  margin: 0;
}

/* Cards deep-link into the services accordion — reset link chrome, keep the
   card's own type colours (h3/p set their own), add a keyboard focus ring. */
a.sx-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.sx-card:focus-visible {
  outline: 3px solid var(--sx-lav);
  outline-offset: 3px;
}

/* ============================================================
   TESTIMONIALS / QUOTES (plum)
   ============================================================ */
.sx-quotes {
  background: var(--sx-plum);
  color: #fff;
  text-align: center;
}

.sx-quotes .sx-eyebrow {
  color: var(--sx-eyebrow-txt); /* default: gold via .sx-quotes section var */
}

.sx-quotes h2 {
  color: var(--sx-head);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  max-width: 24ch;
  margin: 0 auto clamp(40px, 6vh, 68px);
  font-family: 'Poppins', sans-serif;
}

.sx-quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 60px);
}

.sx-quotes blockquote {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sx-quotes q {
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--sx-body-txt); /* default: #fff via .sx-quotes section var */
  quotes: none;
}
.sx-quotes q::before,
.sx-quotes q::after { content: ''; }

.sx-quotes .sx-rule {
  height: 2px;
  margin: 1.6rem 0;
}
.sx-quotes cite {
  font-style: normal;
  font-size: .95rem;
  color: var(--sx-body-txt); /* default rgba(#fff,.82) via section var; opacity softened by .sx-quotes default */
  line-height: 1.5;
  opacity: .82; /* keeps the cite visually subordinate to the quote regardless of colour key */
}

/* ============================================================
   TRAINING CARDS (white)
   ============================================================ */
.sx-training {
  background: var(--sx-lav-wash);
}

.sx-training-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 68px);
}
.sx-training-head h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--sx-head);
}
.sx-training-head p {
  margin: .9rem auto 0;
  color: var(--sx-body-txt);
  max-width: 46ch;
}

.sx-tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.sx-tcard {
  background: var(--sx-white);
  /* Card corners follow the photo's leaf shape so the rounded edge of the
     photo IS the card edge — no cream showing behind the big top-left curve.
     Photo/filter/shape unchanged; only the card corner is matched. */
  border-radius: clamp(38px, 6vw, 84px) var(--sx-r) var(--sx-r) var(--sx-r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sx-tcard-ph {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  border-radius: var(--sx-leaf);
}
.sx-tcard-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.02);
}
.sx-tcard-ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(50, 0, 61, .4), transparent 60%);
  mix-blend-mode: multiply;
}

.sx-tcard-body {
  padding: clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sx-tcard-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sx-card-head); /* default plum via .sx-training section var */
  margin-bottom: .6rem;
  font-family: 'Poppins', sans-serif;
}
.sx-tcard-body p {
  font-size: 1rem;   /* reading-copy floor 16px (was .96rem) */
  color: var(--sx-card-body); /* default body via .sx-training section var */
  flex: 1;
  margin-bottom: 1.4rem;
}
.sx-tcard-body .sx-btn {
  align-self: flex-start;
  padding: .8rem 1.5rem;
}

/* ============================================================
   CTA (plum)
   ============================================================ */
.sx-cta {
  position: relative;
  background: var(--sx-plum);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.sx-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 80% 20%, rgba(128, 86, 212, .30), transparent 60%),
    radial-gradient(50% 80% at 10% 90%, rgba(0, 128, 150, .22), transparent 60%);
}

.sx-cta .sx-wrap {
  position: relative;
  z-index: 2;
  /* 58rem → 800px text area (after the 64px side padding), enough to keep
     "access and outcomes?" (758px @64px) on one line but too narrow for
     "Ready to improve access" (830px), so the H2 breaks as "Ready to improve"
     / "access and outcomes?" (owner 2026-09-10). */
  max-width: 58rem;
}

.sx-cta .sx-eyebrow {
  color: var(--sx-eyebrow-txt); /* default: gold via .sx-cta section var */
}
.sx-cta h2 {
  color: var(--sx-head); /* default: #fff via .sx-cta section var */
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.03;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  text-wrap: balance; /* even two-line split; keeps "access and outcomes?" whole */
}
.sx-cta p {
  margin: 1.3rem auto 0;
  color: var(--sx-body-txt); /* default: rgba(#fff,.9) via .sx-cta section var */
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  max-width: 38rem;
}
.sx-cta .sx-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  /* Own the gap above the buttons so it's consistent whether or not a body
     paragraph is present. Previously this space lived only on `.sx-cta p`
     margin-bottom, so CTAs with no body copy collapsed the gap to zero
     (owner 2026-09-10). */
  margin-top: 2.3rem;
}

/* ============================================================
   PARTNERS ARCHIVE PAGE
   Each category is its own full-bleed <section class="sx-section pt-group">;
   the background lives on the section element, so alternating grounds run
   edge-to-edge (the site-wide sx-section pattern) — never a boxed panel.
   ============================================================ */
.sx-partners-intro {
  background: var(--sx-white);
}

.pt-intro {
  max-width: 66ch;
  margin: 0 auto;
  color: var(--sx-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  text-align: center;
}

/* Full-bleed grounds. White by default; --lav = lavender-wash, edge-to-edge. */
.pt-group {
  background: var(--sx-white);
}
.pt-group--lav {
  background: var(--sx-lav-wash);
}

.pt-cat-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--sx-head, var(--sx-plum));
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--sx-gold);
  display: inline-block;
}

.pt-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}

.pt-item {
  position: relative;
  z-index: 0;
  background: var(--sx-white);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r);
  padding: clamp(20px, 2vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  transition: box-shadow .2s ease, transform .2s ease;
}
/* Raise the hovered card above its neighbours so the enlarged logo can spill
   past the card edge without being clipped by adjacent tiles. */
.pt-item:hover,
.pt-item:focus-within {
  z-index: 5;
  box-shadow: 0 12px 32px -14px rgba(50, 0, 61, .3);
  transform: translateY(-3px);
}

.pt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.pt-link:focus-visible {
  outline: 3px solid var(--sx-lav);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Logos sit greyscale at REST (full opacity, so nothing disappears — the earlier
   opacity:.7 was the readability problem, not the greyscale). On hover/focus they
   turn full colour AND zoom, so the fine bilingual wordmarks become legible. */
.pt-logo {
  max-width: 100%;
  max-height: 112px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  filter: grayscale(1);
  transition: filter .25s ease, transform .25s ease;
}
.pt-item:hover .pt-logo,
.pt-item:focus-within .pt-logo {
  filter: none;
  transform: scale(1.5);
}

/* Reduced motion: keep the greyscale→colour reveal (it's not motion), drop the
   lift and zoom. */
@media (prefers-reduced-motion: reduce) {
  .pt-item,
  .pt-logo {
    transition: filter .25s ease;
  }
  .pt-item:hover,
  .pt-item:focus-within {
    transform: none;
  }
  .pt-item:hover .pt-logo,
  .pt-item:focus-within .pt-logo {
    transform: none;
  }
}

/* Responsive: collapse to 2-up on tablet, 1-up on small phone */
@media (max-width: 960px) {
  .pt-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
  }
  .pt-cat-title {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
  }
  .pt-logo {
    max-height: 92px;
  }
}

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

/* ============================================================
   FOOTER (plum-ink)
   ============================================================ */
.sx-footer {
  background: var(--sx-plum-ink);
  color: rgba(255, 255, 255, .75);
  padding: clamp(56px, 7vh, 88px) 0 2.5rem;
}

.sx-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sx-footer-brand {
  color: #fff;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.sx-footer-brand img {
  height: 38px;
  width: auto;
  display: block;
}

.sx-footer-nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.sx-footer-nav a {
  font-size: .92rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
  text-decoration: none;
}
.sx-footer-nav a:hover {
  color: var(--sx-gold) !important; /* beat legacy main.css `footer a:hover{color:#fff !important}` — mirrors header nav fix */
}

.sx-footer-base {
  margin-top: 1.6rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .55);
}

/* ============================================================
   RICH TEXT (generic page block)
   ============================================================ */
.sx-rich-text {
  background: var(--sx-white);
}
.sx-rich-text .sx-rte-inner {
  max-width: 68ch;
  margin: 0 auto;
}
.sx-rich-text .sx-rte-inner h2,
.sx-rich-text .sx-rte-inner h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--sx-head);
}
.sx-rich-text .sx-rte-inner p {
  color: var(--sx-body-txt);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.sx-rich-text .sx-rte-inner a {
  color: var(--sx-lav);
  text-decoration: underline;
}

/* ============================================================
   HEADER LINKEDIN CTA — "Message us [in]"
   LinkedIn is a primary conversion channel; the tile is the
   recognizable LinkedIn mark rendered in brand colours.
   ============================================================ */
/* Header CTA cluster: the footer-style LinkedIn glyph sitting beside the
   Contact Us button, grouped so the pair reads as one unit with a little
   breathing room between them. */
.sx-header-cta {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.sx-header-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  color: rgba(255, 255, 255, .8);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.sx-header-li svg {
  width: 24px;
  height: 24px;
  display: block;
}
.sx-header-li:hover,
.sx-header-li:focus-visible {
  color: var(--sx-gold, #FAAF00);
  border-color: var(--sx-gold, #FAAF00);
  transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE  960px
   ============================================================ */
@media (max-width: 960px) {
  /* Header — hide nav + Contact button, show hamburger; keep the LinkedIn icon */
  .sx-nav-list,
  .sx-header-cta .sx-btn-ghost-plum {
    display: none;
  }

  /* Shrink the nav gap so the row fits without overflow */
  .sx-nav {
    gap: .375rem;
  }

  /* Scale the logo down for phones */
  .sx-brand img {
    height: 40px;
  }

  /* Push icon cluster to the right edge; tighten icon spacing */
  .sx-header-cta {
    margin-left: auto;
    gap: .375rem;
  }

  /* Smaller tap circles on mobile — still ≥38px tap target */
  .sx-header-li {
    width: 38px;
    height: 38px;
  }

  /* Reduce icon glyphs to match the smaller circles */
  .sx-header-li svg {
    width: 20px;
    height: 20px;
  }

  /* Hamburger: always visible; 44px tap target, glyph balanced against the ~38px header circles. */
  .sx-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
  }


  /* Mobile nav panel — shown when body.nav-open */
  body.nav-open .sx-nav-list {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--sx-plum);
    z-index: 49;
    padding: 5rem var(--sx-gutter) 2rem;
    gap: 1.6rem;
  }
  body.nav-open .sx-nav-list a {
    color: #fff;
    font-size: 1.25rem;
    opacity: 1;
  }

  /* Hero — full-width photo, linear overlay for legibility */
  .sx-hero-photo {
    width: 100%;
    opacity: .5;
  }
  .sx-hero::after {
    background: linear-gradient(180deg, rgba(50, 0, 61, .7), var(--sx-plum) 70%);
  }
  /* Board hero keeps its ACF-driven tint on mobile (vertical wash for the
     full-width photo). More specific than .sx-hero::after, so it must override
     here too. */
  .sx-hero--board::after,
  .sx-hero--svc::after,
  .sx-hero--acf::after {
    background: linear-gradient(180deg,
      rgba(var(--sx-hero-rgb, 50,0,61), calc(.7 * var(--sx-hero-op, 1))),
      rgba(var(--sx-hero-rgb, 50,0,61), var(--sx-hero-op, 1)) 70%);
  }

  /* Approach + Services — single column */
  .sx-approach-grid,
  .sx-services-grid {
    grid-template-columns: 1fr;
  }

  /* Venn — single column on mobile. Circle SIZE + vertical overlap are owned by
     the authoritative "Venn sizing" block later in this file (search: Venn
     sizing), not here, to avoid split/dead overrides. */
  .sx-venn {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Testimonials + Training — single column */
  .sx-quotes-grid,
  .sx-tgrid {
    grid-template-columns: 1fr;
  }

  /* Services cards — single column on small screens */
  .sx-cards {
    grid-template-columns: 1fr;
  }
}

/* Micro-breakpoint: logo trim for smallest phones (iPhone SE, small Android) */
@media (max-width: 360px) {
  .sx-brand img { height: 36px; }
}

/* ============================================================
   MOTION / MICRO-INTERACTIONS  (sx-motion.js)
   ============================================================ */

/* Scroll reveal — initial hidden state; JS adds sx-reveal, then sx-in when in view */
.sx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.sx-reveal.sx-in {
  opacity: 1;
  transform: none;
}

/* Header shadow on scroll */
.sx-header {
  transition: box-shadow .25s ease;
}
.sx-header.sx-scrolled {
  box-shadow: 0 8px 28px -14px rgba(50, 0, 61, .28);
}

/* Lavender button trailing arrow */
.sx-btn-lav::after {
  content: '→';
  margin-left: .1rem;
  transition: transform .2s ease;
}
.sx-btn-lav:hover::after {
  transform: translateX(4px);
}

/* ============================================================
   JUMP-NAV (in-page anchor menu, reused from .gc-jump)
   ============================================================ */
.gc-jump {
  background: var(--sx-plum);
  color: #fff;
  position: sticky;
  top: var(--sx-header-h, 96px);
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 28px -16px rgba(50, 0, 61, .5);
  transition: transform .28s ease;
}

.gc-jump--hidden {
  transform: translateY(calc(-100% - var(--sx-header-h, 96px)));
}

.gc-jump .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}

.gc-jump-label {
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sx-lav-lt, #C0ABEA);
  font-weight: 600;
}

.gc-jump-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gc-jump-links a {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}

.gc-jump-links a:hover,
.gc-jump-links a:focus-visible {
  background: #006b7d;
  border-color: #006b7d;
}

/* Reduced motion: disable transition */
@media (prefers-reduced-motion: reduce) {
  .gc-jump {
    transition: none;
  }
}

/* Desktop (>960px): toggle renders as label; links always visible */
@media (min-width: 961px) {
  .gc-jump-toggle {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--sx-lav-lt, #C0ABEA);
    cursor: default;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .gc-jump-chevron {
    display: none;
  }
  .gc-jump-links {
    display: flex !important;
  }
}

/* Mobile (≤960px): collapsible jump-nav */
@media (max-width: 960px) {
  .gc-jump .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .gc-jump-toggle {
    appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 14px var(--sx-gutter);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .gc-jump-toggle:focus-visible {
    outline: 2px solid var(--sx-lav-lt, #C0ABEA);
    outline-offset: -2px;
  }

  .gc-jump-chevron {
    flex-shrink: 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);        /* points right ">" (collapsed) */
    transition: transform .2s ease;
  }
  .gc-jump[aria-expanded="true"] .gc-jump-chevron,
  .gc-jump.is-open .gc-jump-chevron {
    transform: rotate(135deg);
  }

  .gc-jump-links {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0 var(--sx-gutter) 16px;
    list-style: none;
  }
  .gc-jump.is-open .gc-jump-links {
    display: flex;
  }
  .gc-jump.is-open .gc-jump-links a {
    display: block;
    text-align: left;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .gc-jump-chevron {
      transition: none;
    }
  }
}

/* ============================================================
   SCROLL-MARGIN-TOP (for anchor-link jumps with sticky header)
   ============================================================ */
.block,
.sx-section,
.sx-hero {
  scroll-margin-top: 190px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .sx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Accordion reduced-motion guard — disable toggle transitions for users who
   prefer reduced motion. Covers .sv-acc-icon (original Services accordion device)
   and the services/CW chevrons (2026-10-09 rebuild, tr-courses-mirrored). */
@media (prefers-reduced-motion: reduce) {
  .sv-acc-icon,
  .sv-svc-acc-chevron,
  .sv-cw-acc-chevron {
    transition: none;
  }
  .sv-acc-icon::before,
  .sv-acc-icon::after {
    transition: none;
  }
}

/* Plum header: light nav links + light Contact button (override legacy main.css) */
.sx-header .sx-nav-list a{color:#fff !important;opacity:.85}
.sx-header .sx-nav-list a:hover{color:var(--sx-gold) !important;opacity:1}
body.nav-open .sx-header .sx-nav-list a{color:#fff !important}
.sx-header .sx-btn-ghost-plum{color:#fff;border-color:rgba(255,255,255,.55)}
.sx-header .sx-btn-ghost-plum:hover{background:var(--sx-gold);border-color:var(--sx-gold);color:var(--sx-plum)}
.sx-header .sx-menu-toggle{color:#fff}

/* ===== Brand type system (Brand Guidelines §3): Inter = body, Poppins = display ===== */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.sx-btn { font-weight: 700; } /* CTA/buttons = Poppins Bold (§3.2) */

/* ============================================================
   SHAPE SYSTEM — reusable tokens (AR proof → site-wide)
   Clip-paths reference the inline SVG defs emitted once per
   AR page (single-annual_report.php). When the shape system
   rolls out site-wide, move the SVG defs to the global <head>.
   ============================================================ */
:root {
  /* ── Shape clip-path references ── */
  --sx-clip-burst:  url(#scs-burst);   /* full 8-petal pinwheel mark */
  --sx-clip-petal:  url(#scs-petal);   /* single teardrop petal (portrait mask) */
  /* Disc = border-radius:50% in CSS; no clip-path token needed.     */

  /* ── Duotone filter references ── */
  --sx-filter-plum: url(#scs-duotone-plum); /* shadows #32003D → highlights #FCF7EC */
  --sx-filter-gold: url(#scs-duotone-gold); /* shadows #6b4d00 → highlights #FFF3D6 */

  /* ── Burst scale for cover sections ── */
  /* See annual-report.css --ar-burst-scale for the full clamp cascade. */
  --sx-burst-bleed: 65%; /* target off-page bleed for hero burst accent */

  /* ── Shape motion timing ── */
  --sx-bloom-dur:   700ms;   /* petal/burst mask-in */
  --sx-settle-dur:  900ms;   /* burst rotation settle */
  --sx-bloom-ease:  ease-out;
}

/* ── Reusable shape wrapper classes ──────────────────────────────────── */

/* Generic shape image host — apply clip-path and duotone filter via child */
.ar-shape-img {
  position: relative;
  overflow: hidden; /* belt-and-suspenders alongside clip-path */
}

/* Petal mask — objectBoundingBox normalised, scales with element dimensions */
.ar-shape-img--petal {
  clip-path: var(--sx-clip-petal);
}

/* Burst host — userSpaceOnUse 250×250; must be exactly 250×250 px before scaling */
.ar-shape-img--burst {
  width: 250px;
  height: 250px;
  clip-path: var(--sx-clip-burst);
}

/* Disc — simple border-radius circle */
.ar-shape-img--disc {
  border-radius: 50%;
  overflow: hidden;
}

/* Leaf — reuses existing --sx-leaf border-radius token from :root */
.ar-shape-img--leaf {
  border-radius: var(--sx-leaf);
  overflow: hidden;
}

/* ── Ghost burst accent ──────────────────────────────────────────────── */
/* Reusable for section echoes. Apply colour + opacity + position inline. */
.ar-burst {
  display: block;
  width: 250px;
  height: 250px;
  clip-path: var(--sx-clip-burst);
  background: currentColor;
  pointer-events: none;
}

/* ── Duotone utility classes (site-wide use) ── */
/* Applied to <img> elements inside shape wrappers.
   SVG filter on the img; clip-path on the parent — never combine both
   on the same element (filter composition order breaks clip rendering). */
.sx-duotone-plum { filter: var(--sx-filter-plum); }
.sx-duotone-gold { filter: var(--sx-filter-gold); }

/* ── Petal bloom animation (site-wide reuse) ── */
/* JS fires .sx-petal-in via IntersectionObserver on any .sx-petal-host */
.sx-petal-host {
  clip-path: var(--sx-clip-petal);
  animation: sx-petal-bloom var(--sx-bloom-dur) var(--sx-bloom-ease) both;
  animation-play-state: paused;
}
.sx-petal-host.sx-petal-in {
  animation-play-state: running;
}
@keyframes sx-petal-bloom {
  from { clip-path: circle(0% at 50% 70%); }
  to   { clip-path: var(--sx-clip-petal); }
}

/* ── Reduced motion: shape animations degrade to instant-reveal ── */
@media (prefers-reduced-motion: reduce) {
  .sx-petal-host,
  .sx-petal-host.sx-petal-in,
  .ar-petal-host,
  .ar-petal-host.ar-petal-in,
  .ar-burst-host {
    animation: none !important;
    clip-path: var(--sx-clip-petal); /* stays fully revealed */
  }
  .ar-burst-host {
    clip-path: url(#scs-burst);
  }
}

/* ============================================================
   CANONICAL TYPE SCALE (2026-09-09)
   Single source of truth, standardized to the Annual Report
   reference (annual-report.css --ar-* scale). The site had 8
   different section-h2 sizes (2.7rem–4rem); this unifies each
   semantic level. Placed last so it out-cascades the per-section
   sizes at equal specificity.
   ============================================================ */
:root {
  --sx-t-h1:      clamp(3rem, 6vw, 5.1rem);      /* page hero H1 — 82px @1440, ~48px @768, never <30px */
  --sx-t-h2:      clamp(2.4rem, 5.5vw, 4rem);    /* section headline — 64px @1440, ~42px @768 */
  --sx-t-h3:      clamp(1.45rem, 1.7vw, 1.5rem); /* card / subsection — ~24px @1440, ~23px @768 (raised 2026-10-02) */
  --sx-t-lead:    clamp(1.125rem, 1.5vw, 1.4rem);/* lede — 18–22px, never below body */
  --sx-t-eyebrow: 1.15rem;                       /* label — 18.4px fixed */
  --sx-t-body:    1.125rem;                      /* reading copy floor — 18px (raised from 16px 2026-10-02) */
  --sx-t-small:   1rem;                          /* UI chrome floor — 16px (nothing renders below this) */
}
/* H1 — page hero */
.sx-hero h1 { font-size: calc(var(--sx-t-h1) * var(--sx-hero-h1-scale, 1)); }
/* H2 — every section headline, one size */
.sx-who h2, .sx-approach h2, .sx-band h2, .sx-results-head h2,
.sx-services-lede h2, .sx-quotes h2, .sx-training-head h2, .sx-cta h2,
.cn-header h2, .sx-topic-points h2, .sx-topic-offerings-section h2,
.sx-topic-stats-section h2, .sx-topic-acc-heading h2, .sv-sec2 h2,
.sx-partners-carousel h2 {
  font-size: var(--sx-t-h2);
  font-weight: 800;
}
/* H3 — sub-headings/cards, one size */
.sx-approach-item h3, .sx-card h3, .sx-tcard-body h3,
.sx-rich-text .sx-rte-inner h3, .sx-course-name {
  font-size: var(--sx-t-h3);
  font-weight: 700;
}
/* Eyebrow label — one size: token-driven, weight 600, uppercase, 0.14em tracking */
.sx-eyebrow {
  font-size: var(--sx-t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ============================================================
   ABOUT PAGE — WHO WE ARE (bespoke editorial two-column)
   Distinct from Home's centred stats+globe; shares only the
   design language (lavender ground, plum type, gold rule).
   ============================================================ */
/* About CTA runs heading → buttons (no body line), so the heading needs its
   own bottom margin for breathing room. Scoped to About; Home keeps its body. */
.ab-cta h2 { margin-bottom: clamp(2rem, 3.4vw, 2.8rem); }
.ab-cta p { margin-top: 0; }

.ab-intro { background: var(--sx-lav-wash); }
.ab-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}
.ab-intro-lead h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: var(--sx-t-h2, clamp(2.6rem, 5.5vw, 4rem));
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--sx-head, var(--sx-plum)); /* token-driven: About Heading-colour control, plum default */
  margin: .5rem 0 0;
}
/* .ab-intro-lead .ab-rule — inherits canonical spacing from the base (left-aligned) */
.ab-intro-body {
  color: var(--sx-body-txt, var(--sx-plum)); /* token-driven: About Body-text control, plum default */
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  line-height: 1.75;
  /* Align the body's first line with the top of the h2 heading, not the eyebrow.
     Offset = eyebrow line-box + its 1.1rem margin + the h2's .5rem top margin
     (all fixed rem, so stable across widths). Reset in the stacked layout below. */
  padding-top: 2.6rem;
}
.ab-intro-body p { margin: 0 0 1.15rem; }
.ab-intro-body p:last-child { margin: 0; }
@media (max-width: 820px) {
  .ab-intro-grid { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 28px); }
  .ab-intro-body { padding-top: 0; } /* stacked: no heading-alignment offset needed */
}

/* ============================================================
   ABOUT PAGE — SC2.0 GUIDING PRINCIPLES (two-column list)
   ============================================================ */
.ab-principles { background: var(--sx-white); }
.ab-model { background: var(--sx-lav-wash); }
.ab-model .ab-p-head { max-width: 60rem; margin: 0 auto 1.6rem; text-align: center; }
.ab-model .ab-p-head h2 { color: var(--sx-head, var(--sx-plum)); } /* token-driven: Heading-colour control */
.ab-model .ab-m-body,
.ab-model .ab-m-body p { color: var(--sx-body-txt, var(--sx-ink)); } /* token-driven: Body-text control */
.ab-model .ab-rule {
  margin-left: auto;
  margin-right: auto;   /* centered; vertical spacing inherited from canonical base */
}
.ab-model .ab-m-body {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.ab-model .ab-m-body p {
  font-size: 1.08rem;
  line-height: 1.75;
}
.ab-video {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 28px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(50, 0, 61, .12);
}
/* More breathing room between the model intro copy and the video (owner/Alexis
   request 2026-10-07). Scoped to the About "Our Model" section. */
.ab-model .ab-video { margin-top: clamp(48px, 6vw, 72px); }
.ab-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ab-principles .ab-p-head { max-width: 60rem; margin: 0 auto; text-align: center; }
.ab-principles .ab-p-head h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: var(--sx-t-h2, clamp(2.6rem, 5.5vw, 4rem));
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--sx-head, var(--sx-plum)); /* token-driven: About Heading-colour control, plum default */
  margin: .4rem 0 0;
}
.ab-principles .ab-rule {
  margin-left: auto;
  margin-right: auto;   /* centered; vertical spacing inherited from canonical base */
}
.ab-p-grid {
  list-style: none;
  padding: 0;
  margin: clamp(2.4rem, 5vw, 3.6rem) auto 0;
  max-width: 66rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.3rem, 2.6vw, 2rem) clamp(2rem, 5vw, 4.5rem);
}
.ab-p-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.ab-p-dot {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--sx-lav-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .05rem;
}
/* Brand icon, tinted plum via CSS mask (line-art SVG → plum strokes on the
   light disc) for legibility on white (owner 2026-09-10). */
.ab-p-ico {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--sx-plum);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.ab-p-text {
  color: var(--sx-body-txt, var(--sx-plum)); /* token-driven: About Body-text control, plum default */
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
}
@media (max-width: 760px) {
  .ab-p-grid { grid-template-columns: 1fr; }
}

/* Meet The Team band — solid-teal feature block, reusing the approved
   HOME_SERVICES_TEAL_BLOCK language (teal-dk ground, GOLD accents, white
   body). Owner 2026-09-12: teal bg, yellow + white type. Scoped to #team so
   other .section-title / .lede blocks are untouched. */
/* Standard WHITE section (owner 2026-09-25: staff section standardized to the
   site's white-background treatment — plum heading, muted-dark body — matching
   Guiding Principles / About intro so the person cards read consistently, not
   the old gold-on-teal design). */
#team { background: var(--sx-white); }
#team .section-title { color: var(--sx-plum); }
#team .head .ab-rule {                                   /* gold rule under the heading, matches other About sections */
  margin-left: auto;
  margin-right: auto;   /* centered; vertical spacing inherited from canonical base */
}
#team .lede { color: var(--sx-body); }
#team .person h3 {
   color: var(--sx-plum);                               /* plum name on white = high contrast */
   font-size: 1.2rem;
   font-weight: 700;
}
#team .person-role { color: var(--sx-teal); }           /* turquoise role line (owner 2026-09-25) */
#team .person-photo { width: 160px; height: 160px; }    /* larger headshot circles,
   scoped to the About team so Board/Governance portraits keep 132px. */
#team .person-bio,
#team .person-bio p { color: var(--sx-body); }

/* ============================================================
   HOME ACF PARITY — focal point, image filter, section bg
   (2026-09-10)

   Mirrors the AR treatment for hero and photo_band, and provides
   the empty-safe bg-override pattern for all 9 home layouts.

   CSS namespace: sx- only. annual-report.css / .ar-* are NOT
   loaded on the Home page and must not be referenced here.

   HERO FOCAL POINT
   The hero photo is a CSS background-image on .sx-hero-photo.
   background-position is set inline from PHP as
   "background-position: X% Y%". The existing hardcoded
   "background-position: center 28%" in .sx-hero-photo is
   OVERRIDDEN by the inline style when a row is present (inline
   style beats external CSS). Default values (50% 28%) reproduce
   the hardcoded default so legacy/empty rows are unchanged.

   HERO FILTER VEIL
   An extra brand-colour veil is layered on the photo via
   .sx-hero-photo::before. PHP writes --sx-hero-tint (rgba
   colour) to the section inline style. When the filter is
   "none" or unset, --sx-hero-tint is transparent — the
   ::before is invisible and the existing plum gradient
   (.sx-hero::after) is the only overlay, preserving today's
   exact look.

   PHOTO BAND FOCAL POINT
   .sx-band-bg background-position is driven by --sx-band-pos
   set inline from PHP. Default: 50% 42% (mirrors existing
   "center 42%" hardcoded in .sx-band-bg).

   PHOTO BAND FILTER
   .sx-band-bg filter is driven by --sx-band-filter (SVG
   duotone + brightness/contrast chain, or identity when none).
   .sx-band::after background (the scrim) is driven by
   --sx-band-scrim (radial veil, or transparent when none).
   When no filter is selected both vars fall back to the
   existing plum gradient, so legacy rows are unchanged.

   SECTION BACKGROUND COLOUR
   All 9 layouts: PHP writes background:<hex> inline on the
   <section> element when a colour is selected. Inline style
   beats the CSS class background, so no extra specificity
   rules are needed. When the field is blank/null, no inline
   style is emitted and the CSS class default applies exactly
   as before.

   EMPTY-SAFE CONTRACT
   All new fields have defaults (focal = 50/28 or 50/42,
   filter = none/0, bg = blank). Legacy rows (DB rows seeded
   before these fields existed) return null from get_sub_field(),
   which PHP guards to the same defaults. The rendered page
   is visually identical to today until an admin picks a value.
   ============================================================ */

/* ── Hero: focal point ─────────────────────────────────────── */
/* background-position is written inline from PHP; no extra CSS
   rule is needed. The existing hardcoded value in .sx-hero-photo
   is superseded by the inline style when ACF rows are present. */

/* ── Hero: brand filter veil ───────────────────────────────── */
/* ::before sits on top of the photo background, below the plum
   gradient (.sx-hero::after, z-index unset → stacking order).
   --sx-hero-tint is set inline (rgba colour string from PHP).
   When "none" is selected PHP writes transparent → veil invisible. */
.sx-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sx-hero-tint, transparent);
  pointer-events: none;
  /* Sits between the photo background and the .sx-hero::after gradient */
  z-index: 0;
}

/* ── Photo band: focal point ───────────────────────────────── */
/* --sx-band-pos drives background-position; written inline from PHP. */
.sx-band-bg {
  background-position: var(--sx-band-pos, center 42%);
}

/* ── Photo band: filter (duotone SVG + brightness/contrast) ── */
/* --sx-band-filter is set inline from PHP as a full filter value.
   Fallback reproduces the existing saturate(.8) contrast(1.03) look
   so no visual change when the field is empty/unset. */
.sx-band-bg {
  filter: var(--sx-band-filter, saturate(.8) contrast(1.03));
}

/* ── Photo band: scrim (replaces the hardcoded ::after overlay) */
/* --sx-band-scrim is the full background value for the scrim layer.
   Fallback = the existing radial+linear plum overlay from system.css.
   When filter is "none", PHP writes transparent → scrim invisible. */
.sx-band::after {
  background: var(
    --sx-band-scrim,
    radial-gradient(120% 100% at 50% 50%, rgba(50, 0, 61, .32), rgba(50, 0, 61, .62) 78%),
    linear-gradient(180deg, rgba(50, 0, 61, .30), rgba(50, 0, 61, .50))
  );
}

/* ── Section background colour (all 9 layouts) ─────────────── */
/* Brand-palette value→colour reference (informational; actual
   colouring is via inline style="background:#hex" from PHP).
   No extra CSS rule needed — inline style has highest specificity.

   Palette keys used by the *_bg selects (2026-09-12 — Cream and
   Sunflower wash REMOVED from all select choices per brand hard-rule):
     #FFFFFF  White
     #F2EEFB  Lavender wash
     #E5F2F5  Turquoise wash
     #EBE5EC  Plum wash
     #32003D  Plum (dark)

   Raspberry (#E91346) is excluded per brand rule (CTA/urgent only).
   Gold (#FAAF00) is a TEXT colour only, never a section background.
*/

/* ============================================================
   SECTION BACKGROUND TEXT MODE (2026-09-10)
   Luminance-based text-colour override for *_bg selects.

   PHP (inc/img-filter.php → scs_ar_text_class()) adds one of
   these classes to the <section> when a bg colour is chosen:
     .sx-bg--dark  → luminance < 0.35 → light text
     .sx-bg--light → luminance ≥ 0.35 → ink text (default look)

   Threshold matches scs_ar_text_class() exactly (0.35).
   Brand colours that trigger sx-bg--dark:
     #32003D (plum), #8056D4 (lavender), #008096 (turquoise),
     #FAAF00 (gold), #E91346 (raspberry), #211A25 (ink).
   Wash colours and white fall above the threshold → sx-bg--light.

   Empty-safe: no class is emitted when the field is blank,
   so these rules have zero impact on default section rendering.

   Namespace: sx- only. No .ar-* or annual-report.css dependency.
   ============================================================ */

/* ── Auto light/dark guard — sets the cascade VARS on the section root.
   Because .sx-bg--dark / .sx-bg--light are applied to the section element,
   setting the vars here cascades to all descendants (h1/h2/h3/p/cite etc.)
   through the `color: var(--sx-head)` etc. declarations on those elements.
   No direct child selectors needed — vars cascade for free. Does NOT touch
   layout, spacing, or border-radius.

   2026-09-12: primary mechanism is now VAR-setting (not direct color: decls).
   The direct decls below are kept as belt-and-suspenders for any element
   that has not yet been converted to read a var. ── */

/* Dark bg → light text */
.sx-bg--dark {
  --sx-head:        #fff;
  --sx-body-txt:    rgba(255, 255, 255, .9);
  --sx-eyebrow-txt: var(--sx-gold);
  --sx-card-head:   #fff;
  --sx-card-body:   rgba(255, 255, 255, .82);
}
/* Belt-and-suspenders direct selectors (elements not yet on a var) */
.sx-bg--dark .sx-eyebrow,
.sx-bg--dark h1,
.sx-bg--dark h2,
.sx-bg--dark h3,
.sx-bg--dark p,
.sx-bg--dark li,
.sx-bg--dark span,
.sx-bg--dark cite,
.sx-bg--dark label {
  color: #fff;
}
/* Stat numbers and labels on dark bg */
.sx-bg--dark .sx-stat-row b,
.sx-bg--dark .sx-stat-row span,
.sx-bg--dark .sx-stat-label,
.sx-bg--dark .sx-stat-num,
.sx-bg--dark .sx-stat-sub,
.sx-bg--dark .sx-stat-desc {
  color: #fff;
}
/* Divider lines on dark bg */
.sx-bg--dark .sx-stat-row {
  border-top-color: rgba(255, 255, 255, .24);
}
.sx-bg--dark .sx-approach-item {
  border-top-color: rgba(255, 255, 255, .2);
}
.sx-bg--dark .sx-approach-item:last-child {
  border-bottom-color: rgba(255, 255, 255, .2);
}

/* Light bg → ink text. Sets vars; direct decl not required (browser default). */
.sx-bg--light {
  --sx-head:        var(--sx-ink);
  --sx-body-txt:    var(--sx-body);
  --sx-eyebrow-txt: var(--sx-teal-dk);
  --sx-card-head:   var(--sx-plum);
  --sx-card-body:   var(--sx-body);
}
/* Class is otherwise a no-op — ink values are the browser/section defaults. */
.sx-bg--light .sx-eyebrow,
.sx-bg--light h1,
.sx-bg--light h2,
.sx-bg--light h3,
.sx-bg--light p {
  /* Inherits default ink values — no override needed. */
}

/* ============================================================
   EXPLICIT BRAND TEXT COLOUR CLASSES (2026-09-12, token-driven)
   Applied by scs_section_text_class() when an editor sets a
   *_text_color select to an explicit brand key (not empty/Auto).

   PRIMARY MECHANISM: set the --sx-* vars ON THE SECTION ROOT.
   Because every descendant colour is now `color: var(--sx-head)`
   etc., setting a var on the root cascades to all children
   regardless of source order — no specificity war, no !important.

   BELT-AND-SUSPENDERS: the direct `color:` selectors are kept
   so any element not yet reading a var also gets the override.
   Both approaches fire simultaneously; the var cascade wins for
   converted elements; the direct selectors cover unconverted ones.

   Empty-safe: these classes are never emitted when the field is
   blank, so they have zero impact on default section rendering.

   Hex values match scs_brand_color_hex() in inc/img-filter.php.
   ============================================================ */

/* White — all text white; eyebrow stays gold (works on any dark bg) */
.sx-text--white {
  --sx-head:        #FFFFFF;
  --sx-body-txt:    rgba(255, 255, 255, .9);
  --sx-eyebrow-txt: var(--sx-gold);
  --sx-card-head:   #FFFFFF;
  --sx-card-body:   rgba(255, 255, 255, .82);
}
.sx-text--white .sx-eyebrow,
.sx-text--white h1,
.sx-text--white h2,
.sx-text--white h3,
.sx-text--white p,
.sx-text--white li,
.sx-text--white span,
.sx-text--white cite,
.sx-text--white label,
.sx-text--white q {
  color: #FFFFFF;
}
.sx-text--white .sx-stat-row b,
.sx-text--white .sx-stat-row span,
.sx-text--white .sx-stat-label,
.sx-text--white .sx-stat-num,
.sx-text--white .sx-stat-sub,
.sx-text--white .sx-stat-desc {
  color: #FFFFFF;
}
.sx-text--white .sx-stat-row { border-top-color: rgba(255,255,255,.24); }
.sx-text--white .sx-approach-item { border-top-color: rgba(255,255,255,.2); }
.sx-text--white .sx-approach-item:last-child { border-bottom-color: rgba(255,255,255,.2); }

/* Gold (#FAAF00) */
.sx-text--gold {
  --sx-head:        #FAAF00;
  --sx-body-txt:    #FAAF00;
  --sx-eyebrow-txt: #FAAF00;
  --sx-card-head:   #FAAF00;
  --sx-card-body:   #FAAF00;
}
.sx-text--gold .sx-eyebrow,
.sx-text--gold h1,
.sx-text--gold h2,
.sx-text--gold h3,
.sx-text--gold p,
.sx-text--gold li,
.sx-text--gold span,
.sx-text--gold cite,
.sx-text--gold label,
.sx-text--gold q {
  color: #FAAF00;
}
.sx-text--gold .sx-stat-row b,
.sx-text--gold .sx-stat-row span,
.sx-text--gold .sx-stat-label,
.sx-text--gold .sx-stat-num,
.sx-text--gold .sx-stat-sub,
.sx-text--gold .sx-stat-desc {
  color: #FAAF00;
}

/* Turquoise (#008096) */
.sx-text--turquoise {
  --sx-head:        #008096;
  --sx-body-txt:    #008096;
  --sx-eyebrow-txt: #008096;
  --sx-card-head:   #008096;
  --sx-card-body:   #008096;
}
.sx-text--turquoise .sx-eyebrow,
.sx-text--turquoise h1,
.sx-text--turquoise h2,
.sx-text--turquoise h3,
.sx-text--turquoise p,
.sx-text--turquoise li,
.sx-text--turquoise span,
.sx-text--turquoise cite,
.sx-text--turquoise label,
.sx-text--turquoise q {
  color: #008096;
}
.sx-text--turquoise .sx-stat-row b,
.sx-text--turquoise .sx-stat-row span,
.sx-text--turquoise .sx-stat-label,
.sx-text--turquoise .sx-stat-num,
.sx-text--turquoise .sx-stat-sub,
.sx-text--turquoise .sx-stat-desc {
  color: #008096;
}

/* Lavender (#8056D4) */
.sx-text--lavender {
  --sx-head:        #8056D4;
  --sx-body-txt:    #8056D4;
  --sx-eyebrow-txt: #8056D4;
  --sx-card-head:   #8056D4;
  --sx-card-body:   #8056D4;
}
.sx-text--lavender .sx-eyebrow,
.sx-text--lavender h1,
.sx-text--lavender h2,
.sx-text--lavender h3,
.sx-text--lavender p,
.sx-text--lavender li,
.sx-text--lavender span,
.sx-text--lavender cite,
.sx-text--lavender label,
.sx-text--lavender q {
  color: #8056D4;
}
.sx-text--lavender .sx-stat-row b,
.sx-text--lavender .sx-stat-row span,
.sx-text--lavender .sx-stat-label,
.sx-text--lavender .sx-stat-num,
.sx-text--lavender .sx-stat-sub,
.sx-text--lavender .sx-stat-desc {
  color: #8056D4;
}

/* Plum (#32003D) */
.sx-text--plum {
  --sx-head:        #32003D;
  --sx-body-txt:    #32003D;
  --sx-eyebrow-txt: var(--sx-teal-dk); /* teal-dk eyebrow on plum text = 6.4:1 on white/wash */
  --sx-card-head:   #32003D;
  --sx-card-body:   var(--sx-body);    /* body copy = site body tone for readability */
}
.sx-text--plum .sx-eyebrow,
.sx-text--plum h1,
.sx-text--plum h2,
.sx-text--plum h3,
.sx-text--plum p,
.sx-text--plum li,
.sx-text--plum span,
.sx-text--plum cite,
.sx-text--plum label,
.sx-text--plum q {
  color: #32003D;
}
.sx-text--plum .sx-stat-row b,
.sx-text--plum .sx-stat-row span,
.sx-text--plum .sx-stat-label,
.sx-text--plum .sx-stat-num,
.sx-text--plum .sx-stat-sub,
.sx-text--plum .sx-stat-desc {
  color: #32003D;
}

/* Raspberry (#E91346) */
.sx-text--raspberry {
  --sx-head:        #E91346;
  --sx-body-txt:    #E91346;
  --sx-eyebrow-txt: #E91346;
  --sx-card-head:   #E91346;
  --sx-card-body:   #E91346;
}
.sx-text--raspberry .sx-eyebrow,
.sx-text--raspberry h1,
.sx-text--raspberry h2,
.sx-text--raspberry h3,
.sx-text--raspberry p,
.sx-text--raspberry li,
.sx-text--raspberry span,
.sx-text--raspberry cite,
.sx-text--raspberry label,
.sx-text--raspberry q {
  color: #E91346;
}
.sx-text--raspberry .sx-stat-row b,
.sx-text--raspberry .sx-stat-row span,
.sx-text--raspberry .sx-stat-label,
.sx-text--raspberry .sx-stat-num,
.sx-text--raspberry .sx-stat-sub,
.sx-text--raspberry .sx-stat-desc {
  color: #E91346;
}

/* Ink (#212121) */
.sx-text--ink {
  --sx-head:        #212121;
  --sx-body-txt:    #212121;
  --sx-eyebrow-txt: var(--sx-teal-dk); /* teal-dk eyebrow for distinction on ink sections */
  --sx-card-head:   #212121;
  --sx-card-body:   #212121;
}
.sx-text--ink .sx-eyebrow,
.sx-text--ink h1,
.sx-text--ink h2,
.sx-text--ink h3,
.sx-text--ink p,
.sx-text--ink li,
.sx-text--ink span,
.sx-text--ink cite,
.sx-text--ink label,
.sx-text--ink q {
  color: #212121;
}
.sx-text--ink .sx-stat-row b,
.sx-text--ink .sx-stat-row span,
.sx-text--ink .sx-stat-label,
.sx-text--ink .sx-stat-num,
.sx-text--ink .sx-stat-sub,
.sx-text--ink .sx-stat-desc {
  color: #212121;
}

/* ============================================================
   SERVICES PAGE  (intro, sections, accordion)
   ============================================================ */
/* Services hero has no lead line, so give the buttons room under the title. */
.sx-hero--svc .sx-btns { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

.sv-intro { background: var(--sx-lav-wash); }
/* Inherits .sx-wrap standard max-width (1240px, left-anchored) — site left-rail standard */
.sv-intro-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: var(--sx-head, var(--sx-plum));
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 22ch;
}
/* .sv-intro .ab-rule — inherits canonical spacing from the base (left-aligned) */
.sv-intro-body {
  color: var(--sx-body-txt, var(--sx-body));
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 68ch;
}
.sv-intro-body p { margin: 0 0 1rem; }
.sv-intro-body p:last-child { margin: 0; }

/* Section headline + body (shared by both H2 sections). */
.sv-headline {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--sx-head, var(--sx-plum));
  line-height: 1.25;
  margin: 0 0 1.1rem;
  max-width: 34ch;
}
.sv-body {
  max-width: 68ch;
  color: var(--sx-body-txt, var(--sx-body));
  font-size: 1.06rem;
  line-height: 1.7;
}
.sv-body p { margin: 0 0 1rem; }
.sv-services-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--sx-head, var(--sx-plum));
  margin: 2.6rem 0 1.1rem;
}

/* ── Accordion (native <details>) ── */
.sv-accordion {
  display: grid;
  gap: 14px;
}
.sv-acc-item {
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r);
  background: #fff;
  box-shadow: 0 10px 30px -26px rgba(50, 0, 61, .55);
  overflow: hidden;
}
.sv-acc-item[open] {
  border-color: var(--sx-lav);
  box-shadow: 0 22px 50px -30px rgba(128, 86, 212, .55);
}
.sv-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.4rem clamp(1.2rem, 2.4vw, 2rem);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sv-acc-head::-webkit-details-marker { display: none; }
.sv-acc-titles { display: flex; flex-direction: column; gap: .25rem; }
.sv-acc-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--sx-card-head, var(--sx-plum));
  line-height: 1.2;
}
.sv-acc-tagline {
  font-size: 1rem;   /* reading-copy floor 16px (was .98rem) */
  color: var(--sx-body);
  font-weight: 600;
}
/* +/− icon */
.sv-acc-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sx-lav-wash);
  transition: background .2s ease;
}
.sv-acc-icon::before,
.sv-acc-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--sx-plum);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.sv-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.sv-acc-item[open] .sv-acc-icon { background: var(--sx-lav); }
.sv-acc-item[open] .sv-acc-icon::before,
.sv-acc-item[open] .sv-acc-icon::after { background: #fff; }
.sv-acc-item[open] .sv-acc-icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.sv-acc-head:hover .sv-acc-title { color: var(--sx-lav); }

.sv-acc-panel {
  padding: 0 clamp(1.2rem, 2.4vw, 2rem) 1.8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
.sv-acc-item .sv-acc-figure img {
  width: 100%;
  border-radius: var(--sx-r);
  display: block;
}
.sv-acc-copy p { margin: 0 0 1rem; color: var(--sx-body); line-height: 1.7; }

/* ── Services + CW progressive-disclosure accordion (rebuilt 2026-10-09, .tr-courses mirrored) ── */

/* Service section accordion stack container */
/* Service cards live INSIDE the owner-colour-controlled "System Change" (#system-change)
   section — the ground comes from that section's ACF scheme (default white), NOT a
   hardcoded colour here. .sv-svc-stack is just the card-stack container that sits under
   the "Our services" header; grounds alternate lav→white→lav→plum down the page. */
.sv-svc-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
/* "Our services" group header — reuses the ab-p-head eyebrow + heading + gold-rule convention */
.sv-svc-stack-head {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.sv-svc-stack-head .sx-eyebrow { display: block; margin-bottom: .5rem; }
/* Subordinate to the section's main h2 (--sx-t-h2 is force-set !important on section
   headings, L4574) — scope + !important so "Our services" reads as a sub-header, not a
   second giant title. Sits above the card labels (22px) in the hierarchy. */
.sv-svc-stack-head .sv-svc-stack-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.4vw, 2rem) !important;
  line-height: 1.15;
  color: var(--sx-head, var(--sx-plum));
  margin: 0 0 .6rem;
}

/* Service section accordion (native <details>, white card on lav-wash ground) */
.sv-svc-acc {
  margin-top: 0;
  border: 1px solid var(--sx-line, rgba(50, 0, 61, .12));
  border-radius: var(--sx-r, 12px);
  background: #fff;
  box-shadow: 0 10px 30px -26px rgba(50, 0, 61, .55);  /* lift on the white ground (reuses .sv-acc-item device) */
  overflow: hidden;
  scroll-margin-top: clamp(80px, 12vh, 120px);  /* clear the sticky "on this page" nav when jumped to */
  transition: box-shadow .2s ease, border-color .2s ease;
}
.sv-svc-acc[open] {
  border-color: var(--sx-lav);
  box-shadow: 0 22px 50px -30px rgba(128, 86, 212, .5);
}
.sv-svc-acc:hover {
  border-color: var(--sx-lav);
}
.sv-svc-acc-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--sx-plum);
  background: var(--sx-lav-wash);   /* lavender header bar — persists as the card's header when expanded */
}
/* When open, the lavender header sits above the white panel; a hairline divides them */
.sv-svc-acc[open] .sv-svc-acc-head {
  border-bottom: 1px solid var(--sx-line);
}
.sv-svc-acc-head::-webkit-details-marker { display: none; }
.sv-svc-acc-badge {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;   /* 16px — chrome floor, matches .tr-courses-count */
  color: var(--sx-teal-dk);
  background: #fff;   /* white pill reads cleanly on the lavender header; teal text = turquoise accent */
  border-radius: 999px;
  padding: .2rem .7rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sv-svc-acc-label {
  font-size: 1.15rem;   /* 18.4px — clears the 18px reading floor */
  flex: 1 1 auto;
}
.sv-svc-acc-chevron {
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--sx-teal);   /* turquoise accent */
  border-bottom: 2.5px solid var(--sx-teal);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.sv-svc-acc[open] .sv-svc-acc-chevron {
  transform: rotate(-135deg);
}
.sv-svc-acc-head:hover .sv-svc-acc-label { color: var(--sx-teal-dk); }
.sv-svc-acc-head:focus-visible {
  outline: 2px solid var(--sx-teal-dk);
  outline-offset: 2px;
}

.sv-svc-acc-panel {
  /* breathing room: real top padding so the body isn't crammed under the lavender header */
  padding: 1.8rem 1.5rem 2rem;
  display: block;
}
.sv-svc-tagline {
  font-size: var(--sx-t-body, 1.125rem);
  color: var(--sx-body);
  font-weight: 600;
  margin: 0 0 1rem;
}
/* Breathing room inside the service card panels (owner: "let it breathe") — more space
   between body copy and the sub-heading, and around the purple callout box + button. */
.sv-svc-acc-panel .sv-svc-tagline { margin-bottom: 1.6rem; }
.sv-svc-acc-panel .sv-points-heading { margin: 2.4rem 0 1rem; }
.sv-svc-acc-panel .sv-note {
  margin: 2.4rem 0 2.2rem;   /* gap above (from the list) and below (to the button) */
  padding: 1.4rem 1.6rem;    /* roomier inside the callout */
}
/* In the accordion panel, all copy spans the full content width (match the bullet-list
   width) — drop the narrower 36ch tagline / 68ch body measures used in the full-section
   layout so the header, intro copy, and bullet block all share one width. */
.sv-svc-acc-panel .sv-svc-tagline,
.sv-svc-acc-panel .sv-body {
  max-width: none !important;   /* beats .sv-framing/.sv-svc .sv-body (same specificity, later in file) */
}
/* Service-card tagline reads as a heading, not body (Alexis via /tg 2026-10-09): beat the
   `main p` min-font enforcement (L4653) with panel-scoped specificity + !important. */
.sv-svc-acc-panel .sv-svc-tagline {
  font-size: clamp(1.4rem, 1.9vw, 1.75rem) !important;  /* ~22–28px, clearly > 17px body */
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .sv-svc-acc-chevron {
    transition: none;
  }
}

/* CW block accordion (native <details>, white card on lav-wash ground) */
.sv-cw-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 2rem;
}

.sv-cw-acc {
  margin-top: 0;
  border: 1px solid var(--sx-line, rgba(50, 0, 61, .12));
  border-radius: var(--sx-r, 12px);
  background: #fff;
  box-shadow: 0 10px 30px -26px rgba(50, 0, 61, .55);  /* match the service cards (.sv-acc-item device) */
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.sv-cw-acc[open] {
  border-color: var(--sx-lav);
  box-shadow: 0 22px 50px -30px rgba(128, 86, 212, .5);
}
/* CW header picks up the lavender-wash bar only when expanded (owner via /tg 2026-10-09):
   collapsed stays white so cards remain visible on the lavender section ground;
   open matches the .sv-svc-acc lavender-header device. */
.sv-cw-acc[open] .sv-cw-acc-head {
  background: var(--sx-lav-wash);
  border-bottom: 1px solid var(--sx-line);
}
.sv-cw-acc:hover {
  border-color: var(--sx-lav);
}
.sv-cw-acc-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--sx-plum);
}
.sv-cw-acc-head::-webkit-details-marker { display: none; }
.sv-cw-acc-label {
  font-size: var(--sx-t-body, 1.125rem);
  flex: 1 1 auto;
}
.sv-cw-acc-chevron {
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--sx-plum);
  border-bottom: 2.5px solid var(--sx-plum);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.sv-cw-acc[open] .sv-cw-acc-chevron {
  transform: rotate(-135deg);
}
.sv-cw-acc-head:hover .sv-cw-acc-label { color: var(--sx-lav); }
.sv-cw-acc-head:focus-visible {
  outline: 2px solid var(--sx-teal-dk);
  outline-offset: 2px;
}

.sv-cw-acc-panel {
  padding: 1.8rem 1.5rem 2rem;
  display: block;
}
.sv-cw-acc-panel .sv-points {
  margin: 0;
  gap: .5rem;
}

@media (prefers-reduced-motion: reduce) {
  .sv-cw-acc-chevron {
    transition: none;
  }
}

.sv-points-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--sx-plum);
  margin: 1.2rem 0 .7rem;
}
.sv-points {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.sv-points li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--sx-body);
  line-height: 1.6;
}
.sv-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sx-lav);
}
.sv-points li strong { color: var(--sx-plum); }
/* A linked point renders its label as a CTA pill (Training options). */
.sv-point-cta {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  color: #fff;
  background: var(--sx-lav);
  border-radius: 999px;
  padding: .34rem .9rem;
  margin-right: .5rem;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.sv-point-cta:hover { background: var(--sx-plum); transform: translateY(-1px); }
.sv-point-cta:focus-visible { outline: 2px solid var(--sx-plum); outline-offset: 2px; }
/* Rows that lead with a CTA button (Training) drop the bullet + indent, and get
   a touch more spacing, so each pill reads as its own CTA. */
.sv-points li:has(> .sv-point-cta) { padding-left: 0; margin-top: .2rem; }
.sv-points li:has(> .sv-point-cta)::before { display: none; }
.sv-note {
  background: var(--sx-lav-wash);
  border-radius: var(--sx-r);
  padding: 1rem 1.2rem;
  color: var(--sx-plum-ink);
  margin: 0 0 1.3rem;
}
.sv-acc-copy .sx-btn { margin-top: .4rem; }
.sx-acc-cta-wrap { margin: .25rem 0 0; }
/* Deep-linked sections (home cards → #service-…) clear the sticky header. */
.sv-acc-item { scroll-margin-top: clamp(80px, 12vh, 120px); }

/* ── Section 1 — System Change (heading + eyebrow colour controls) ── */
.sv-sec1 .ab-p-head h2 { color: var(--sx-head, var(--sx-plum)); }
.sv-sec1 .ab-p-head .sx-eyebrow { color: var(--sx-eyebrow-txt, var(--sx-teal-dk)); }
/* Space the gold accent below the heading (was margin:0 → crammed under the first
   word "Mental"; matches the Corporate Wellbeing section's spaced rule). */
/* .sv-sec1 .ab-p-head .ab-rule — inherits canonical spacing from the base (left-aligned) */

/* ── Section 2 — Corporate Wellbeing (dark teal feature) ── */
.sv-sec2 { background: var(--sx-teal-dk); color: #fff; }
.sv-sec2 .sx-eyebrow { color: var(--sx-eyebrow-txt, var(--sx-gold)); }
.sv-sec2 h2 { color: var(--sx-head, #fff); }
.sv-sec2 .ab-rule {
  background: var(--sx-accent, var(--sx-gold));   /* accent override; vertical spacing inherited from canonical base */
}
.sv-sec2-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.sv-sec2-figure {
  margin: 1.4rem 0 1.6rem;
}
.sv-sec2-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--sx-head, #fff);
  line-height: 1.3;
  margin: 0 0 1.3rem;
  max-width: 26ch;
}
.sv-sec2 .sv-body,
.sv-sec2 .sv-body p { color: var(--sx-body-txt, rgba(255, 255, 255, .86)); }
.sv-sec2-copy .sx-btn { margin-top: 1.5rem; }
.sv-cards-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sx-head, #fff);
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
}
.sv-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sv-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--sx-accent, var(--sx-gold));
  border-radius: var(--sx-r);
  padding: 1.15rem 1.35rem;
  transition: background .2s ease, transform .2s ease;
}
.sv-card:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
/* CW button: owner-selectable background + text colour (--sx-btn-bg / --sx-btn-txt). */
.sv-sec2 .sx-btn-gold {
  background: var(--sx-btn-bg, var(--sx-gold));
  color: var(--sx-btn-txt, var(--sx-plum-ink));
}
.sv-card-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--sx-head, #fff);
  margin-bottom: .35rem;
}
.sv-card-text { color: var(--sx-body-txt, rgba(255, 255, 255, .82)); line-height: 1.6; }

/* CW section: single column on phones so the copy + CTA + cards each get full width.
   Without this the 1fr 1fr grid stays 2-col at ~390px and the long CTA label wraps
   into a near-circular plum blob. Mirrors the .ab-p-grid collapse pattern. */
@media (max-width: 760px) {
  .sv-sec2-inner { grid-template-columns: 1fr; gap: clamp(1.6rem, 6vw, 2.4rem); }
  .sv-sec2-copy .sx-btn { width: auto; max-width: 100%; white-space: normal; }
}

/* ── Services v2 — promoted service sections (2026-10-02) ──────────────
   The /services/ accordion is dissolved into full stacked sections, each a
   data-nav-label anchor in the sticky jump-nav. Reuses sx- tokens, the ab-rule
   gold accent, sx-eyebrow, and the .sv-points hairline list. Grounds alternate
   white ↔ lavender for rhythm — no cream/yellow/gold fills (hard SCS rule). */
.sv-framing { background: #fff; }   /* white: sits between the lavender intro and the lavender first service — no two sequential grounds match */
.sv-framing .sv-headline { max-width: 60ch; }
.sv-framing .sv-body { max-width: 72ch; }

.sv-svc.is-ground-white { background: #fff; }
.sv-svc.is-ground-lav   { background: var(--sx-lav-wash); }
.sv-svc h2 { color: var(--sx-head, var(--sx-plum)); }
.sv-svc h2 { max-width: 60ch; }   /* heading measure guard — mirrors .sv-framing .sv-headline */

/* Governance Commitments — body subsection heading hierarchy.
   Authoritative copy lives HERE in enqueued system.css (a static file served
   with a filemtime ?ver), NOT in the template's inline <style>. Rationale: a
   CSS change here propagates via the ?ver bump + a single Varnish purge — no
   PHP opcache recompile. WPE FPM holds stale COMPILED templates across nodes
   and opcache_reset() is disabled, so inline-template CSS edits do not reliably
   go live. Higher specificity (.gc-sec .gc-body h2 = 0,2,1) + !important beats
   both the enforcement `main h2 !important` (0,0,2) and any stale inline rule,
   on every node regardless of opcache state. Title stays 64px; subsections tier. */
.gc-sec .gc-body h2 { font-size: clamp(1.75rem, 2vw, 2rem) !important; }
.gc-sec .gc-body h3 { font-size: var(--sx-t-h3, clamp(1.3rem, 1.5vw, 1.375rem)) !important; }
/* Section title lives in the narrow 300px sidebar column. The `main h2 !important`
   enforcement forces 64px, but "Commitment" at 64px is ~445px wide → overflows the
   300px column and collides with the body copy (overlap measured 81px). Size it to
   fit the column; still reads as the dominant section label above the 28px subsections. */
.gc-sec .gc-sec-head .section-title { font-size: clamp(2rem, 3vw, 2.5rem) !important; line-height: 1.12; }
.sv-svc .sx-eyebrow { color: var(--sx-eyebrow-txt, var(--sx-teal-dk)); }
.sv-svc .ab-rule { background: var(--sx-accent, var(--sx-gold)); }
.sv-svc { scroll-margin-top: clamp(80px, 12vh, 120px); }

/* .sv-svc-inner inherits .sx-wrap standard max-width (1240px, left-anchored) — site left-rail standard */
.sv-svc-tagline {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: var(--sx-head, var(--sx-plum));
  line-height: 1.3;
  margin: 0 0 1.1rem;
  max-width: 36ch;
}
.sv-svc .sv-body { max-width: 68ch; }

/* 2-col service sections with a photo */
.sv-svc-inner--2col {
  max-width: none;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sv-svc-inner--2col .sv-svc-copy { max-width: 60ch; }
.sv-svc-inner--2col.is-img-left .sv-svc-figure { order: -1; }
.sv-svc-figure { margin: 0; }
.sv-svc-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 32px -16px rgba(50, 0, 61, .35);
  display: block;
}

/* Training teaser — compact, two-up topic list, no photo */
/* .sv-svc--teaser .sv-svc-inner inherits .sx-wrap (left-anchored); teaser topic list stays 2-up */
.sv-topic-list {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  /* CSS multi-column (not grid): a 2-col grid coupled row heights across columns, so a
     2-line topic (e.g. the OAAT item) stretched its row and left a big gap below its
     1-line neighbour. Columns give even vertical rhythm regardless of item line-count. */
  column-count: 2;
  column-gap: 1.6rem;
}
.sv-topic-list li {
  position: relative; padding-left: 1.4rem;
  margin-bottom: .55rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;   /* keep a 2-line topic from splitting across columns */
  font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--sx-plum);
  line-height: 1.4;
}
.sv-topic-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sx-gold);
}

.sv-cw-block .sv-points { margin: 0; }
.sv-cw-cta { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
/* Outcomes get a gold check marker instead of the lavender dot */
.sv-points--check li::before {
  content: "\2713"; width: auto; height: auto; background: none; border-radius: 0;
  top: 0; left: 0; color: var(--sx-gold); font-weight: 700; line-height: 1.6;
}

@media (max-width: 860px) {
  .sv-svc-inner--2col { grid-template-columns: 1fr; gap: clamp(1.6rem, 6vw, 2.4rem); }
  .sv-svc-inner--2col.is-img-left .sv-svc-figure { order: 0; }
  .sv-topic-list { column-count: 1; }
}

/* ── Training page (/training/) — 2026-10-02 ──
   Reuses .sv-svc sections + grounds + .sx-course-* cards. Adds the "who it's
   for" block, the collapsible "Available courses" panel, and the no-courses
   interim callout. */
.tr-who {
  margin: 1.4rem 0 .4rem;
  padding: 1rem 1.2rem;
  background: rgba(50, 0, 61, .04);
  border-left: 3px solid var(--sx-teal-dk);
  border-radius: var(--sx-r, 10px);
}
.tr-who-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--sx-teal-dk);
  margin-bottom: .3rem;
}
.tr-who p { margin: 0; color: var(--sx-body); line-height: 1.6; }

.tr-courses {
  margin-top: 1.6rem;
  border: 1px solid var(--sx-line, rgba(50, 0, 61, .12));
  border-radius: var(--sx-r, 12px);
  background: #fff;
  overflow: hidden;
}
.tr-courses-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem 1.35rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--sx-plum);
}
.tr-courses-summary::-webkit-details-marker { display: none; }
.tr-courses-label { font-size: 1.1rem; }
.tr-courses-count {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--sx-teal-dk);
  background: var(--sx-lav-wash);
  border-radius: 999px;
  padding: .2rem .7rem;
}
.tr-courses-chevron {
  margin-left: auto;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--sx-plum);
  border-bottom: 2.5px solid var(--sx-plum);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.tr-courses[open] .tr-courses-chevron { transform: rotate(-135deg); }
.tr-courses .sx-course-grid { padding: 0 1.35rem 1.4rem; }
.tr-courses-summary:focus-visible { outline: 2px solid var(--sx-teal-dk); outline-offset: 2px; }

.tr-no-courses {
  margin-top: 1.6rem;
  padding: 1.6rem 1.8rem;
  background: var(--sx-lav-wash);
  border-radius: var(--sx-r, 12px);
}
.tr-no-courses-lead {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--sx-plum);
  margin: 0 0 .4rem;
}
.tr-no-courses p { color: var(--sx-body); line-height: 1.6; margin: 0 0 .3rem; }
.tr-no-courses .sx-btn { margin-top: 1rem; }

/* Mailing-list sign-up (no-course sections) */
.tr-signup {
  margin-top: 1.6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--sx-lav-wash);
  border-radius: var(--sx-r, 12px);
}
.tr-signup .tr-no-courses-lead {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--sx-plum);
  margin: 0 0 .3rem;
}
.tr-signup-intro { color: var(--sx-body); line-height: 1.6; margin: 0 0 1.2rem; }
.scs-training-signup-form { display: block; }
.scs-ts-legend { font-size: var(--sx-t-small); color: var(--sx-body); margin: 0 0 .9rem; }
.scs-ts-required { color: var(--sx-raspberry, #E91346); font-weight: 700; }
.scs-ts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.scs-ts-field { margin-bottom: 1rem; }
.scs-ts-field label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: var(--sx-t-small);
  color: var(--sx-plum);
  margin-bottom: .35rem;
}
.scs-ts-field input[type="text"],
.scs-ts-field input[type="email"] {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: var(--sx-t-body);
  color: var(--sx-ink, #16202D);
  padding: .7rem .85rem;
  background: #fff;
  border: 1px solid var(--sx-line, rgba(50, 0, 61, .18));
  border-radius: 10px;
}
.scs-ts-field input:focus-visible {
  outline: 2px solid var(--sx-teal-dk);
  outline-offset: 1px;
  border-color: var(--sx-teal-dk);
}
.scs-ts-field--consent { margin-top: .4rem; }
.scs-ts-consent-label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  font-size: var(--sx-t-small);
  color: var(--sx-body);
  line-height: 1.5;
}
.scs-ts-consent-label input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; }
.scs-ts-consent-label a { color: var(--sx-lav); text-decoration: underline; }
.scs-training-signup-form .sx-btn { margin-top: 1.2rem; }
/* Honeypot — off-screen, not display:none (keeps it in the a11y tree for bots) */
.scs-ts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Status banners */
.scs-ts-notice { padding: .9rem 1.1rem; border-radius: 10px; margin: 0 0 1.1rem; }
.scs-ts-notice p { margin: 0; line-height: 1.5; }
.scs-ts-notice--success { background: var(--sx-teal-wash, #E5F2F5); color: var(--sx-teal-dk); border: 1px solid rgba(0, 128, 150, .3); }
.scs-ts-notice--info { background: var(--sx-lav-wash); color: var(--sx-plum); border: 1px solid rgba(128, 86, 212, .3); }
.scs-ts-notice--error { background: #FDECEF; color: var(--sx-raspberry, #E91346); border: 1px solid rgba(233, 19, 70, .3); }
@media (max-width: 560px) {
  .scs-ts-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Work archive ── */
.wk-stories { background: var(--sx-lav-wash); }
/* Stats section — override sx-bg--dark's hard-set !important rules so colour controls win */
.wk-model-stats.sx-bg--dark .ab-p-head h2 {
  color: var(--sx-head, #fff);
}
.wk-model-stats.sx-bg--dark .sx-eyebrow {
  color: var(--sx-eyebrow-txt, var(--sx-gold));
}
.wk-model-stats.sx-bg--dark .sv-body,
.wk-model-stats.sx-bg--dark .sv-body p {
  color: var(--sx-body-txt, rgba(255, 255, 255, .9));
}

/* ── Connect page (2026-09-12 v3: lavender-banded copy sections) ──
   Owner: copy sectioned onto colour backgrounds, NO gold eyebrow over white.
   Page ground = lavender-wash. The two copy blocks are lavender panels (header
   lighter, methods deeper — brand --sx-lav at low alpha), with a PLUM eyebrow +
   headline + labels; gold is kept only as the thin rule accent. The form stays a
   centered white card so it pops off the lavender.
   Wrappers are <div> — NEVER bare <header> (main.css styles bare <header>
   tags as the sticky plum nav bar). */
.cn-contact {
  background: var(--sx-lav-wash);
  position: relative;
  overflow: hidden;
}
.cn-contact::before {
  content: "";
  position: absolute;
  top: clamp(-6rem, -4vw, -2rem);
  right: clamp(-8rem, -6vw, -3rem);
  width: clamp(320px, 46vw, 620px);
  height: clamp(320px, 46vw, 620px);
  background: url(../img/scs-symbol-grey.svg) no-repeat;
  background-size: contain;
  opacity: .08;
  z-index: 0;
  pointer-events: none;
}

.cn-column {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
  position: relative;
  z-index: 1;
}

/* ── Header panel (no box; content sits on lavender ground) ── */
.cn-header {
  padding: 0;
}
.cn-header .sx-eyebrow { color: var(--sx-plum); }
.cn-header h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: var(--sx-plum);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 22ch;
}
/* .cn-header .ab-rule — inherits canonical spacing from the base (left-aligned) */
.cn-lead {
  color: var(--sx-body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.75;
  max-width: 68ch;
}
.cn-lead p { margin: 0 0 1.1rem; }
.cn-lead p:last-child { margin: 0; }

/* ── Contact methods panel (deeper lavender block) ── */
.cn-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(128, 86, 212, .16);
  border: 1px solid rgba(128, 86, 212, .24);
  border-radius: var(--sx-r);
  overflow: hidden;
}
.cn-method {
  flex: 1;
  min-width: 180px;
  padding: clamp(1.2rem, 2vw, 1.5rem) clamp(1.5rem, 2.2vw, 2rem);
  border-right: 1px solid rgba(50, 0, 61, .14);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.cn-method:last-child { border-right: none; }
.cn-method-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sx-plum);
  opacity: .72;
}
.cn-method-value {
  color: var(--sx-plum);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  font-weight: 600;
  text-decoration: none;
}
a.cn-method-value:hover { color: var(--sx-lav); }

/* ── Form card (no box; content sits on lavender ground) ── */
.cn-card {
  padding: 0;
  max-width: 48rem;
  margin: 0 auto;
  width: 100%;
}
.cn-form-embed { width: 100%; }
.cn-form-embed iframe {
  display: block;
  width: 100%;
  border: none;
}

@media (max-width: 960px) {
  .cn-methods { flex-direction: column; }
  .cn-method { border-right: none; border-bottom: 1px solid rgba(50, 0, 61, .14); }
  .cn-method:last-child { border-bottom: none; }
}

/* ── Thank-you / confirmation page ── */
.ty-section { background: var(--sx-lav-wash); }
.ty-wrap { max-width: 52rem; }
.ty-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: var(--sx-plum);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.05;
  margin: 0;
}
/* .ty-wrap .ab-rule — inherits canonical spacing from the base (left-aligned) */
.ty-body {
  color: var(--sx-plum);
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.75;
}
.ty-body p { margin: 0 0 1.2rem; }
.ty-body p:first-child { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 600; }
.ty-body a { color: var(--sx-lav); text-decoration: underline; }
.ty-body a:hover { color: var(--sx-plum); }
.ty-home { margin-top: 1.4rem; }


/* ============================================================
   HOME_SERVICES_TEAL_BLOCK  (token-driven — 2026-09-12)
   'Our services' grid. Decoration now FOLLOWS the section colour
   context exactly like .sx-approach: the accent (card left-border,
   hover title, focus ring) reads --sx-eyebrow-txt and the icon fill
   reads --sx-head — the same resolved tokens every .sx-text--{key}
   and the auto .sx-bg--light / .sx-bg--dark guards already set. So
   changing the background/font colour moves the icons, card
   definition, eyebrow and hover WITH it, and no combination is ever
   stuck on gold. The default (no colour class) still renders the
   approved teal treatment: white headline, gold eyebrow, translucent
   cards with a gold left-border, white icons.

   Card SURFACE adapts to ground darkness: translucent-white on dark
   grounds; opaque white + hairline on light grounds so the card
   definition reads against a wash.
   ============================================================ */
.sx-services {
  background: var(--sx-teal-dk);
  color: #fff; /* fallback for any text not yet on a var */
  /* Card-surface tokens — dark-ground default (teal / plum / etc.). */
  --sx-svc-card:       rgba(255, 255, 255, .06);
  --sx-svc-line:       rgba(255, 255, 255, .14);
  --sx-svc-card-hover: rgba(255, 255, 255, .10);
}
/* Light grounds → opaque white cards with a hairline border, so the
   card definition reads against the wash. Grouped exactly like the
   .sx-text--{key} blocks; .sx-bg--light covers Auto mode on light bgs. */
.sx-services.sx-bg--light,
.sx-services.sx-text--plum,
.sx-services.sx-text--ink,
.sx-services.sx-text--turquoise,
.sx-services.sx-text--lavender,
.sx-services.sx-text--raspberry {
  --sx-svc-card:       #ffffff;
  --sx-svc-line:       var(--sx-line);
  --sx-svc-card-hover: #ffffff;
}
.sx-services .sx-card {
  background: var(--sx-svc-card);
  border: 1px solid var(--sx-svc-line);
  border-left: 3px solid var(--sx-eyebrow-txt); /* accent = eyebrow colour: gold on dark, brand hue on light */
  box-shadow: none;
}
.sx-services .sx-card:hover {
  background: var(--sx-svc-card-hover);
  transform: translateY(-4px);
  box-shadow: none;
}
.sx-services .sx-card h3 { transition: color .2s ease; }
/* Hover / focus accent follows the eyebrow colour — never a hard gold. */
.sx-services a.sx-card:hover h3,
.sx-services a.sx-card:focus-visible h3 { color: var(--sx-eyebrow-txt); }
.sx-services a.sx-card:focus-visible { outline-color: var(--sx-eyebrow-txt); }
/* Icon fill follows the heading colour. Mask technique so any brand hue
   is reachable — the source SVG is a single-colour plum stroke, used here
   only for its shape (alpha). */
.sx-services .sx-card-ico {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  background-color: var(--sx-head);
  -webkit-mask: var(--sx-ico) center / contain no-repeat;
  mask: var(--sx-ico) center / contain no-repeat;
}

/* ===== HOME ELEVATION (2026-09-11 → de-contained 2026-09-12) =====
   The .sx-who base (background handoff, overflow:visible, padding) lives in the
   WHO WE ARE block above as the single definition. Below: only the freed
   globe/stats "feature" descendant rules. */

/* Stats band (owner/Alexis 2026-09-12): the plum CARD read as "contained."
   Reframe — the globe becomes a standalone OBJECT on its own plum disc (so it
   looks pixel-identical: gold land, plum ocean, gold rim — the canvas is
   untouched), and the four stats are FREED onto the light ground (live is the
   ACF-set #EBE5EC; base wash is #F2EEFB) beside it, separated by a single
   hairline that reuses the Approach section's language. No box, no watermark. */

.sx-who .sx-stat-row {
  /* Strip the card entirely. */
  border-top: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: 0;

  /* Globe object (left) + freed stats (right), centred as a composition. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2.4rem, 5vw, 5rem);
  max-width: 1040px;
  margin: clamp(2.4rem, 5vh, 4rem) auto 0;
  padding: 0;
}

/* The globe as a standalone object. A plum DISC sized to the globe means the
   ocean reads plum exactly as before — the transparent canvas shows the disc
   through as the sea, so the globe is unchanged. The disc floats on a soft
   plum shadow instead of sitting inside a rectangle. */
.sx-who .sx-globe-wrap {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  width: clamp(210px, 25vw, 300px);
  aspect-ratio: 1 / 1;
  height: auto;
  background: var(--sx-plum);
  border-radius: 50%;
  box-shadow: 0 26px 62px -24px rgba(50, 0, 61, .5);
  pointer-events: none;
  line-height: 0;
  z-index: 0;
}

/* Freed stats: on the light ground, auto-fit to single or multi-stat layout.
   2026-10-01: collapsed to single stat "30M worldwide" — removed hairline,
   bumped text size. Hairline removed; padding-top reduced without border. */
.sx-who .sx-stats {
  flex: 1 1 380px;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  gap: clamp(1.5rem, 3vh, 2.4rem) clamp(1.6rem, 3vw, 2.6rem);
  padding-top: clamp(0.8rem, 2vh, 1.4rem);
  border-top: none;
  text-align: left;
  position: relative;
  z-index: 1;
}
.sx-who .sx-stats > div { position: relative; z-index: 1; }

/* Numbers: lavender on the light ground (#8056D4 on #EBE5EC ≈ 4:1 — AA pass for
   large text). Gold is now reserved for the globe: gold on the light ground
   would be ~1.5:1 (AA fail), so the earlier gold-on-plum numerals intentionally
   become lavender here. Specificity 0,3,1 beats the .sx-text--plum cascade. */
.sx-who.sx-text--plum .sx-stat-row b {
  color: var(--sx-lav);
  position: relative;
  z-index: 1;
}

/* The trailing "+" must ALWAYS sit on the same line as the number (e.g.
   "30 Million +") — never orphan onto its own line. 2026-10-01: bumped to
   reading-copy scale (1.6x desktop, 3vw fluid). 2026-10-02: enlarged to
   display-stat scale per stakeholder feedback — proportionate to globe. */
.sx-who .sx-stat-row b {
  white-space: nowrap;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
}

/* Labels: plum uppercase for hierarchy (#32003D on #EBE5EC ≈ 14:1 — AA pass). */
.sx-who.sx-text--plum .sx-stat-row span {
  color: var(--sx-plum);
  position: relative;
  z-index: 1;
}

/* Spinning Earth globe canvas (assets/js/earth-globe.js) — unchanged geometry.
   Gold land on a transparent sphere; the plum disc behind is the ocean. A faint
   gold glow lifts the land; the disc's own box-shadow carries the depth. */
.sx-who .sx-globe.sx-earth {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  position: relative;
  /* Muted to .45 — the current, approved globe look (do not brighten). Was a
     separate .sx-globe rule; co-located here so all globe styling lives together. */
  opacity: .45;
  filter: drop-shadow(0 0 14px rgba(250, 175, 0, .12));
}
.sx-who .sx-earth__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Phones: stack the globe object above the freed stats; stats stay a 2×2 grid. */
@media (max-width: 640px) {
  .sx-who { padding-bottom: clamp(40px, 6vh, 72px); }

  .sx-who .sx-stat-row {
    flex-direction: column;
    gap: clamp(2rem, 7vw, 2.8rem);
    padding: 0;
    margin: clamp(1.8rem, 4vh, 3rem) auto 0;
  }

  .sx-who .sx-globe-wrap {
    width: clamp(160px, 46vw, 220px);
  }

  .sx-who .sx-stats {
    flex: 0 0 auto;          /* don't stretch to fill the column — hug content */
    align-content: start;
    width: 100%;
    max-width: 420px;
    /* Single column on phones: two word-based numbers ("20 Million +") can't
       share a row narrow, so stack them — each keeps the "+" on its line. */
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 4vw, 1.8rem) clamp(1.6rem, 6vw, 2.4rem);
  }
}

/* ───── Venn circles: solid flat fills, crisp edge, NO outline (FIX 2) ───── */
/* Owner: kill the blurred edge, but no ring/border either — just a solid
   translucent disc with a hard edge. Flat fill + border-radius:50% already
   gives a crisp solid edge; overlaps still blend via multiply. No box-shadow. */
.sx-s1::before { background: rgba(50, 0, 61, .12); box-shadow: none; }
.sx-s2::before { background: rgba(0, 128, 150, .15); box-shadow: none; }
.sx-s3::before { background: rgba(128, 86, 212, .16); box-shadow: none; }

/* ───── Venn sizing: bigger, clearly OVERLAPPING circles (owner 2026-09-12) ─────
   Circles must read as a true Venn (visible overlap) AND be large enough to
   hold the "Upstream Intervention" label inside the disc. */
.sx-venn {
  max-width: clamp(980px, 86vw, 1120px);
}

.sx-stat::before {
  width: clamp(300px, 40vw, 480px);
  height: clamp(300px, 40vw, 480px);
}

.sx-stat {
  min-height: clamp(300px, 34vw, 440px);
}

/* Venn mobile: stacked discs still overlap vertically (keep the Venn) but
   GENTLY. Was circle ~327px over a 226px row (~100px overlap) — the multiply
   lens swallowed the text. Now the circle exceeds the row by only ~40px: a
   clear vesica intersection with breathing room around the labels/descriptions.
   Circle stays wide enough to hold the "Upstream Intervention" label inside. */
@media (max-width: 960px) {
  .sx-venn .sx-stat { min-height: clamp(212px, 60vw, 250px); }
  .sx-venn .sx-stat::before {
    width: clamp(252px, 70vw, 300px);
    height: clamp(252px, 70vw, 300px);
  }
}

/* ===== TOPIC PAGES 2026-09-12 ===================================================
   Bespoke layout for training topic pages (OAAT, SC2.0, DIDM).
   template-topic.php · group_scs_topic
   ============================================================================== */

/* ── Intro (white, two-column editorial layout) ─────────────────────────── */
.sx-topic-intro {
  background: #fff;
}
.sx-topic-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}
.sx-topic-intro-lead {
  display: flex;
  flex-direction: column;
}
.sx-topic-intro-lead .sx-eyebrow {
  color: var(--sx-eyebrow-txt, var(--sx-teal-dk));
  margin-bottom: 0.8rem;
}
.sx-topic-intro-lead h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: var(--sx-t-h2, clamp(2.6rem, 5.5vw, 4rem));
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--sx-head, var(--sx-plum));
  margin: 0;
}
.sx-topic-intro-body {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.72;
  color: var(--sx-body-txt, var(--sx-body));
}
.sx-topic-intro-body p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}
.sx-topic-intro-body p:last-child {
  margin-bottom: 0;
}
/* Graceful fallback: single centered body when no eyebrow/heading */
.sx-topic-intro-centered {
  max-width: 62rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 820px) {
  .sx-topic-intro-grid {
    grid-template-columns: 1fr;
    gap: clamp(18px, 4vw, 28px);
  }
}

/* ── Key points (lavender-wash, premium numbered card grid) ────────────── */
.sx-topic-points {
  background: var(--sx-lav-wash);
}
.sx-topic-points h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--sx-head, var(--sx-plum));
  line-height: 1.08;
  margin-bottom: clamp(1.8rem, 3.4vw, 2.6rem);
  text-align: center;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
/* Points now render as an accordion (reuses .sv-accordion / .sv-acc-item).
   Numbered card grid retired 2026-09-12 — owner disliked uneven boxes. A clean
   numeral badge sits LEFT of each summary title (SC2.0 is a numbered model). */
.sx-principles-acc {
  max-width: 900px;
  margin: 0 auto;
}
.sx-principle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sx-lav-wash);
  border: 1px solid var(--sx-lav);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sx-lav);
  line-height: 1;
  margin-right: 1.2rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sx-principle-item[open] .sx-principle-num {
  background: var(--sx-lav);
  color: #fff;
}
.sx-principle-item:hover .sx-principle-num {
  border-color: var(--sx-plum);
}
/* Numerals removed 2026-09-29 (owner). Centre the title, balancing the right
   +/− icon with an equal-width leading spacer so it sits truly centred. */
.sx-principles-acc .sv-acc-head::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
}
.sx-principles-acc .sv-acc-titles {
  flex: 1 1 auto;
  align-items: center;
  text-align: center;
}

/* ── Accordion (services / training / learning) — TEAL FEATURE BLOCK matching
   the home 'Our services' language for consistency: teal-dk ground, GOLD
   eyebrow, white heading, cards with a GOLD left-border + gold toggle icon. ─── */
.sx-topic-accordion-section {
  background: var(--sx-teal-dk);
}
.sx-topic-accordion-section .sx-eyebrow {
  color: var(--sx-eyebrow-txt, var(--sx-gold));
  display: block;
  text-align: center;
  margin: 0 auto .6rem;
}
.sx-topic-acc-heading {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--sx-head, #fff);
  line-height: 1.08;
  text-align: center;
  margin: 0 auto clamp(1.8rem, 3.4vw, 2.6rem);
  max-width: 24ch;
}
.sx-topic-acc {
  max-width: 900px;
  margin: 0 auto;
}
/* Gold left-border accent (the services-block motif); gold open glow. */
.sx-topic-acc .sv-acc-item { border-left: 3px solid var(--sx-accent, var(--sx-gold)); }
.sx-topic-acc .sv-acc-item[open] {
  border-color: var(--sx-line);
  border-left-color: var(--sx-accent, var(--sx-gold));
  box-shadow: 0 22px 50px -30px rgba(250, 175, 0, .45);
}
/* Gold toggle icon (closed = gold tint + plum bars; open = solid gold + plum). */
.sx-topic-acc .sv-acc-icon { background: rgba(250, 175, 0, .18); }
.sx-topic-acc .sv-acc-item[open] .sv-acc-icon { background: var(--sx-gold); }
.sx-topic-acc .sv-acc-item[open] .sv-acc-icon::before,
.sx-topic-acc .sv-acc-item[open] .sv-acc-icon::after { background: var(--sx-plum); }
/* Hover accent → teal (not lavender) so it stays in the teal/gold palette. */
.sx-topic-acc .sv-acc-head:hover .sv-acc-title { color: var(--sx-teal-dk); }
/* WYSIWYG content inside a topic accordion panel: match the site's list/link craft. */
.sx-topic-acc .sv-acc-copy ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}
.sx-topic-acc .sv-acc-copy li {
  color: var(--sx-body);
  line-height: 1.7;
  margin: 0 0 .35rem;
}
.sx-topic-acc .sv-acc-copy strong { color: var(--sx-plum); }
.sx-topic-acc .sv-acc-copy a { color: var(--sx-teal-dk); font-weight: 600; }

/* ── Offerings (white) ─────────────────────────────────────────────────────── */
/* ── Offerings → premium course-card catalog ───────────────────────────────
   White signature-leaf cards (border + soft shadow) on a plain white section,
   so paid courses read as a catalog, not a list. NO cream/yellow background.
   Reuses the site card language (leaf corner, plum/lavender/teal tokens,
   .sx-btn-lav CTA). */
.sx-topic-offerings-section {
  background: #fff;
}
.sx-topic-offerings-eyebrow {
  display: block;
  margin-bottom: .7rem;
}
.sx-topic-offerings-section h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--sx-head, var(--sx-plum));
  line-height: 1.08;
  margin-bottom: .6rem;
}
.sx-topic-offerings-note {
  font-size: 1rem;   /* reading-copy floor 16px (was .95rem) */
  color: var(--sx-body-txt, var(--sx-body));
  margin: 0 0 clamp(1.8rem, 3vw, 2.6rem);
  max-width: 42rem;
}
.sx-topic-offerings-eyebrow {
  color: var(--sx-eyebrow-txt, var(--sx-teal-dk));
}
.sx-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30%, 340px), 1fr));
  gap: clamp(18px, 1.8vw, 26px);
}
.sx-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  background: var(--sx-white);
  border: 1px solid var(--sx-line);
  border-radius: clamp(28px, 3.4vw, 44px) var(--sx-r) var(--sx-r) var(--sx-r);
  padding: clamp(24px, 2.4vw, 34px);
  box-shadow: 0 12px 34px -26px rgba(50, 0, 61, .45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sx-course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sx-shadow);
  border-color: transparent;
}
.sx-course-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.sx-course-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.15;
  letter-spacing: .02em;
  /* No uppercase transform: it mangles brand-cased terms like "eLearning" into
     "ELEARNING". Badges render the source casing (e.g. "Self-paced eLearning",
     "Facilitator-led"). */
  text-align: center;
  padding: .4rem .72rem;
  border-radius: 999px;
  /* wraps to 2 lines on narrow cards instead of pushing the price off the edge */
  white-space: normal;
}
.sx-course-badge--led {
  background: var(--sx-teal-wash);
  color: var(--sx-teal-dk);
  border: 1px solid rgba(0, 128, 150, .3);
}
.sx-course-badge--selfpaced {
  background: var(--sx-lav-wash);
  color: var(--sx-lav);
  border: 1px solid rgba(128, 86, 212, .3);
}
.sx-course-price {
  flex: 0 0 auto;            /* never shrink — the price stays intact, the badge yields */
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1;
  color: var(--sx-plum);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.sx-course-name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.12rem, 1.4vw, 1.3rem);
  font-weight: 700;
  color: var(--sx-plum);
  line-height: 1.22;
  margin: .1rem 0 0;
}
.sx-course-meta {
  flex: 1;
  font-size: .93rem;
  color: var(--sx-body);
  line-height: 1.6;
  margin: 0;
}
.sx-course-note {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--sx-lav);
  margin: 0;
}
.sx-course-cta {
  align-self: flex-start;
  margin-top: .5rem;
  padding: .85rem 1.5rem;
  font-size: 0.875rem;
}

/* ── Stats (plum, gold numerals, lavender-light labels) ────────────────────── */
/* Fresh class — does NOT reuse .sx-stat-row which hosts the home globe. */
/* Turquoise stats band — reuses the shipped .wk-model-stats language (teal-dk
   ground, GOLD numerals, glassy translucent cards, white labels). Owner
   2026-09-12: last section must be turquoise with better number display. */
.sx-topic-stats-section {
  background: var(--sx-teal-dk);
  color: var(--sx-body-txt, #fff);
  text-align: center;
}
.sx-topic-stats-section h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--sx-head, #fff);
  line-height: 1.1;
  margin-bottom: 2.4rem;
}
.sx-topic-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2×2 — wider cards, more room for labels */
  gap: clamp(1.6rem, 2.6vw, 2.4rem);
  max-width: 720px;
  margin: 0 auto;
}
.sx-topic-stat {
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  text-align: left;
  background: var(--tp-stat-card-bg, rgba(255, 255, 255, .07));
  border: 1px solid var(--tp-stat-card-bd, rgba(255, 255, 255, .20));
  border-radius: var(--sx-r);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .55);
  padding: clamp(1.8rem, 2.4vw, 2.4rem);
  transition: background .2s ease, border-color .2s ease;
}
.sx-topic-stat:hover {
  border-color: var(--tp-stat-card-bd, rgba(255, 255, 255, .35));
}
.sx-topic-stat b {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--tp-stat-num, var(--sx-gold)); /* AA-safe: gold #FAAF00 on teal-dk #006376 ≈ 5.2:1 (large) */
}
.sx-topic-stat span {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sx-body-txt, rgba(255, 255, 255, .9)); /* AA-safe: white .9 on teal-dk ≈ 9:1 */
  line-height: 1.5;
  max-width: none;
  text-align: left;
}

/* Before/After stat — a horizontal "15 → 3" comparison (e.g. wait times).
   The arrow carries the story; the AFTER value is gold (the win), the BEFORE
   value is a muted white so the improvement reads instantly. */
.sx-ba-compare {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-bottom: .2rem;
}
.sx-ba-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.sx-ba-col b {
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
}
.sx-ba-before { color: var(--tp-stat-before, rgba(255, 255, 255, .78)); }  /* the starting point, muted */
.sx-ba-after  { color: var(--tp-stat-num, var(--sx-gold)); }            /* the outcome, emphasized */
.sx-ba-key {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-body-txt, rgba(255, 255, 255, .8));
}
/* Gold chevron arrow between the two values */
.sx-ba-arrow {
  position: relative;
  width: clamp(28px, 4vw, 40px);
  height: 14px;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
.sx-ba-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--sx-accent, var(--sx-gold));
  transform: translateY(-50%);
}
.sx-ba-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 2px;
  width: 11px;
  height: 11px;
  border-top: 3px solid var(--sx-accent, var(--sx-gold));
  border-right: 3px solid var(--sx-accent, var(--sx-gold));
  transform: translateY(-50%) rotate(45deg);
}

/* Mobile: stats collapse to a single column; shrink the numerals. */
@media (max-width: 600px) {
  .sx-topic-stats {
    grid-template-columns: 1fr;
    max-width: 24rem;
  }
  .sx-topic-stat b {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }
  .sx-course-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== TOPIC PAGES — Direction A "Principle Frames" 2026-09-30 =================
   Always-visible framed key-point cards + optional per-section duotone imagery.
   Every image is optional; a blank field renders nothing (graceful no-image state). */

/* --- Key points: framed cards (replaces the collapsed accordion) --- */
.sx-topic-points-cards {
  display: grid;
  /* Single-column stack: one card per row, icon-left + text-right layout. */
  grid-template-columns: 1fr;
  gap: clamp(18px, 2vw, 28px);
  margin: clamp(24px, 3vw, 40px) auto 0;
  max-width: 780px;
}

/* Five-step colour cycle keyed to card order (1–5 repeating) */
.sx-topic-point-card:nth-of-type(5n+1) {
  --pt-card-bg: #EDE7FB;    /* lavender */
  --pt-chip-bg: #DDD0F5;    /* deeper lavender */
  --pt-ico-color: #7A3FD0;  /* purple */
}
.sx-topic-point-card:nth-of-type(5n+2) {
  --pt-card-bg: #E3F3EC;    /* mint green */
  --pt-chip-bg: #CDEADB;    /* deeper mint */
  --pt-ico-color: #2E9E6B;  /* green */
}
.sx-topic-point-card:nth-of-type(5n+3) {
  --pt-card-bg: #FBEEDD;    /* peach/cream (scoped override) */
  --pt-chip-bg: #F6E0C4;    /* deeper peach */
  --pt-ico-color: #E08A2B;  /* orange */
}
.sx-topic-point-card:nth-of-type(5n+4) {
  --pt-card-bg: #E4EEFB;    /* sky blue */
  --pt-chip-bg: #D2E2F6;    /* deeper blue */
  --pt-ico-color: #2F6FD0;  /* blue */
}
.sx-topic-point-card:nth-of-type(5n+5) {
  --pt-card-bg: #FBE6ED;    /* pink */
  --pt-chip-bg: #F6D2E0;    /* deeper pink */
  --pt-ico-color: #E0459A;  /* pink/magenta */
}

.sx-topic-point-card {
  background: var(--pt-card-bg, #fff);
  border: none;
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 12px 34px -16px rgba(50, 0, 61, .18);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
}
.sx-topic-point-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px -18px rgba(50, 0, 61, .28);
}

/* Circular icon chip wrapper: ~64px circle with deeper-tint background fill */
.sx-topic-point-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  background-color: var(--pt-chip-bg, #ddd0f5);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Masked glyph inside the chip: recoloured per card via background-color */
/* Text wrapper: title and body stack vertically beside the chip */
.sx-topic-point-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.sx-topic-point-ico {
  /* Icon SVG mask: centred, contain, recoloured per card */
  width: 32px;
  height: 32px;
  background-color: var(--pt-ico-color, #7A3FD0);
  -webkit-mask-size: 32px 32px;
  mask-size: 32px 32px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.sx-topic-point-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--sx-head, #32003D);
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 .5rem;
}
.sx-topic-point-body {
  color: var(--sx-body-txt, #2b2630);
  font-size: 1rem;         /* 16px — reading copy floor */
  line-height: 1.6;
  margin: 0;
}

/* --- Optional per-section duotone imagery --- */
.sx-topic-figure { margin: 0; }
.sx-topic-figure--intro     { margin-top: clamp(28px, 4vw, 48px); }
.sx-topic-figure--offerings { margin: 0 0 clamp(24px, 3vw, 38px); }
.sx-topic-figure--accordion {
  margin: 0 0 clamp(24px, 3vw, 38px);
  border: 2px solid var(--sx-accent, #FAAF00);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 44px -18px rgba(50, 0, 61, .34);
}
.sx-topic-duo {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
}
.sx-topic-figure--accordion .sx-topic-duo { border-radius: 0; }
.sx-topic-figure--intro .sx-topic-duo,
.sx-topic-figure--offerings .sx-topic-duo { aspect-ratio: 16 / 7; }
.sx-topic-figure--accordion .sx-topic-duo { aspect-ratio: 16 / 9; }
.sx-topic-figure .sx-topic-figure-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
/* SCS duotone signature: plum multiply over the desaturated image */
.sx-topic-duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #32003D;
  mix-blend-mode: multiply;
  opacity: .40;
  pointer-events: none;
}

/* --- Banded background imagery (stats, CTA): image sits behind content --- */
.sx-topic-stats-section.sx-has-bg,
.sx-cta.sx-has-bg { position: relative; overflow: hidden; }
.sx-topic-bg { position: absolute; inset: 0; z-index: 0; line-height: 0; }
.sx-topic-bg .sx-topic-duo { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.sx-topic-bg .sx-topic-bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
/* stronger veil behind text so white copy stays legible (WCAG AA) */
.sx-topic-bg .sx-topic-duo::after { opacity: .64; }
.sx-topic-stats-section.sx-has-bg > .sx-wrap,
.sx-cta.sx-has-bg > .sx-wrap { position: relative; z-index: 1; }

/* Responsive: stacked layout at all widths. Title+body already flex beside icon. */
@media (max-width: 680px) {
  .sx-topic-points-cards {
    max-width: 100%;
    margin-left: clamp(16px, 4vw, 32px);
    margin-right: clamp(16px, 4vw, 32px);
  }
  .sx-topic-point-card {
    flex-direction: column;
    align-items: stretch;
  }
  .sx-topic-point-chip {
    align-self: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sx-topic-point-card { transition: none; }
}

/* ============================================================================
   CAROUSEL SECTION (.sx-carousel)
   Horizontal scroll-snap carousel with two modes: images (linked) or cards
   (image + eyebrow + h3 + text). CSS scroll-snap only; no heavy JS.
   ============================================================================ */
.sx-carousel {
  --sx-head:        inherit;
  --sx-body-txt:    inherit;
  --sx-eyebrow-txt: inherit;
}

.sx-carousel .sx-car-head {
  margin-bottom: clamp(44px, 8vh, 88px);
  text-align: center;
}

.sx-carousel .sx-car-head h2 {
  margin: 0;
}

/* Scroll-snap track: horizontal, keyboard-accessible */
.sx-car-track {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 16px;
  /* Hide scrollbar but allow scroll */
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 0, 61, 0.2) transparent;
}

.sx-car-track::-webkit-scrollbar {
  height: 8px;
}

.sx-car-track::-webkit-scrollbar-track {
  background: transparent;
}

.sx-car-track::-webkit-scrollbar-thumb {
  background-color: rgba(50, 0, 61, 0.2);
  border-radius: 4px;
}

/* Individual carousel items: images mode */
.sx-car-item {
  flex: 0 0 clamp(280px, 40vw, 420px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  cursor: grab;
  transition: transform 0.2s ease-out;
  text-decoration: none;
  outline: none;
}

.sx-car-item:active {
  cursor: grabbing;
}

.sx-car-item--image {
  overflow: hidden;
  border-radius: var(--sx-r);
}

.sx-car-item--image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform 0.3s ease-out;
}

.sx-car-item--image:hover img {
  transform: scale(1.05);
}

/* Cards mode: image + content card */
.sx-car-item--card {
  overflow: hidden;
  border-radius: var(--sx-r);
  background: var(--sx-lav-wash);
  box-shadow: var(--sx-shadow);
}

.sx-car-card-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.sx-car-card-content {
  padding: clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
}

.sx-car-card-content .sx-eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sx-car-card-content h3 {
  margin: 0;
  line-height: 1.2;
}

.sx-car-card-content p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Hover effect for cards */
.sx-car-item--card:hover {
  box-shadow: 0 44px 100px -40px rgba(50, 0, 61, 0.6);
  transform: translateY(-4px);
}

/* Mobile: single-item view with full width */
@media (max-width: 960px) {
  .sx-car-track {
    gap: clamp(12px, 2.5vw, 20px);
  }

  .sx-car-item {
    flex: 0 0 clamp(240px, 85vw, 100%);
  }
}

/* ============================================================================
   CONTENT SECTION (.sx-content)
   Flexible layout block with 5 options: text_left_image_right,
   text_right_image_left, text_only, two_col, three_col.
   ============================================================================ */
.sx-content {
  --sx-head:        inherit;
  --sx-body-txt:    inherit;
  --sx-eyebrow-txt: inherit;
}

/* Single-content layouts (media + text) */
.sx-content--text_left_image_right .sx-content-single,
.sx-content--text_right_image_left .sx-content-single,
.sx-content--text_only .sx-content-single {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 80px);
  align-items: center;
}

.sx-content--text_right_image_left .sx-content-single {
  grid-template-columns: 1fr 1fr;
  /* Image is on the left visually via CSS order */
}

.sx-content--text_right_image_left .sx-con-image {
  order: -1;
}

.sx-content--text_only .sx-content-single {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Single-content text column */
.sx-con-text {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 24px);
}

.sx-con-text h2 {
  margin: 0;
}

.sx-con-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

.sx-con-body p {
  margin: 0 0 1em 0;
}

.sx-con-body p:last-child {
  margin-bottom: 0;
}

/* CTA button (single-content) */
.sx-con-cta {
  margin-top: clamp(12px, 2vw, 24px);
}

.sx-con-cta .sx-btn {
  display: inline-block;
}

/* Image (single-content, media layouts) */
.sx-con-image {
  overflow: hidden;
  border-radius: var(--sx-r);
}

.sx-con-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Multi-col layouts (two_col, three_col) */
.sx-content--two_col .sx-content-grid,
.sx-content--three_col .sx-content-grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(32px, 5vw, 64px);
}

.sx-content--two_col .sx-content-grid {
  grid-template-columns: 1fr 1fr;
}

.sx-content--three_col .sx-content-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Column (multi-col) */
.sx-con-column {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vw, 16px);
}

.sx-con-column .sx-eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sx-con-column h3 {
  margin: 0;
  line-height: 1.2;
}

.sx-con-col-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

.sx-con-col-body p {
  margin: 0 0 0.75em 0;
}

.sx-con-col-body p:last-child {
  margin-bottom: 0;
}

/* Responsive: mobile stacking */
@media (max-width: 960px) {
  /* Media layouts stack */
  .sx-content--text_left_image_right .sx-content-single,
  .sx-content--text_right_image_left .sx-content-single {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }

  .sx-content--text_right_image_left .sx-con-image {
    order: unset;
  }

  /* Multi-col grids become single column */
  .sx-content--two_col .sx-content-grid,
  .sx-content--three_col .sx-content-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
}

/* ============================================================================
   CANONICAL HEADING SCALE — ENFORCEMENT LAYER (single source of truth)
   Appended last so it out-cascades every per-section rule in BOTH system.css
   and main.css (system.css is enqueued after main.css). !important is used
   deliberately: it locks the type scale against a large thicket of legacy
   per-section clamps without hunting each one, and makes the scale the ONE
   place to change a heading size. Values come from the --sx-t-* tokens (:root
   ~L1726). EXCLUDED on purpose (do not add): UI chrome labels (.work-meta h2,
   .wc-date, .person-role, .svc-hero .crumb), the Annual Report editorial scale
   (.ar-*), and display numerals — see implementation-spec.md §E.
   ============================================================================ */

/* STRUCTURAL DEFAULTS: element-level rules (low specificity) so any heading
   in the main content area is canonical by default. Allows new blocks and
   pages to be correct automatically. Class-based exceptions below have higher
   specificity and will override these — no regression on component headings. */
main h1, .site-main h1 {
  font-size: var(--sx-t-h1) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
main h2, .site-main h2 {
  font-size: var(--sx-t-h2) !important;
  font-weight: 800 !important;
  text-transform: none !important;
}
main h3, .site-main h3 {
  font-size: var(--sx-t-h3) !important;
  font-weight: 700 !important;
}

/* Exclusions: these elements opt out of the structural default and use their
   own styles (footer text, reduced-motion labels, etc.). */
main .screen-reader-text, .site-main .screen-reader-text {
  font-size: inherit !important;
}
main .work-meta h2, .site-main .work-meta h2 {
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
}
/* Service accordion in-panel sub-label ("Common Consultation Topics Include" etc.) opts
   out of the card-scale h3 default (~23px) so it reads BELOW the card title (18.4px),
   not above it. */
main .sv-svc-acc-panel .sv-points-heading,
.site-main .sv-svc-acc-panel .sv-points-heading {
  font-size: 1.1rem !important;   /* ~17.6px — subordinate to the card title */
  font-weight: 700 !important;
}

/* H1 — every page hero, one size. Home hero scale reset to 100 in ACF data. */
.sx-hero h1 {
  font-size: calc(var(--sx-t-h1) * var(--sx-hero-h1-scale, 1)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.hero h1, .svc-hero h1 {           /* legacy heroes (main.css pages) */
  font-size: var(--sx-t-h1) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* H2 — every SECTION HEADER, one size + weight. */
.sx-who h2, .sx-approach h2, .sx-band h2, .sx-results-head h2,
.sx-services-lede h2, .sx-quotes h2, .sx-training-head h2, .sx-cta h2,
.cn-header h2, .sx-partners-carousel h2,
.sx-topic-intro-lead h2, .sx-topic-points h2, .sx-topic-offerings-section h2,
.sx-topic-stats-section h2, .sx-topic-acc-heading,
.sv-sec1 h2, .sv-sec2 h2, .sv-intro-title, .ab-p-head h2, .ab-intro-lead h2,
h2.section-title, .who-text h2, .band-plum h2, .outcomes .section-title,
.services h2, .svc-intro-head, .ei-intro-title, .gc-sec h2 {
  font-size: var(--sx-t-h2) !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

/* H3 — every CARD / SUBSECTION title, one size + weight.
   Includes card titles that are marked up as <h2> (work/news/report cards);
   they stay <h2> semantically but read at card scale, not section scale. */
.sx-approach-item h3, .sx-card h3, .sx-tcard-body h3,
.sx-rich-text .sx-rte-inner h3, .sx-course-name, .sx-topic-points h3,
.card h3, .inc-body h3, .board-bio h3, .work-card h3, .person h3,
.work-body h2, .card.channel h2, .post-body h2, .post-body h3,
.wc-title, .ev-title, .pod-title, .sv-services-heading, .sv-cards-heading,
.sx-rte-inner h2 {
  font-size: var(--sx-t-h3) !important;
  font-weight: 700 !important;
}

/* EYEBROW — one label style everywhere (kills the 12px hub variants). */
.sx-eyebrow, .eyebrow, .ei-intro-eyebrow, .gc-eyebrow, .ei-eyebrow {
  font-size: var(--sx-t-eyebrow) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
}

/* ============================================================================
   READING & CHROME FLOOR (2026-10-02 min-font increase — staff consensus text
   was too small, e.g. news excerpt .wc-summary was 15.2px, below the old floor).
   Reading copy → 18px; all UI chrome → 16px. Nothing renders below 16px.
   Same mechanism as the heading scale: !important beats legacy per-class sizes;
   chrome classes re-win over the reading default by class specificity.
   ============================================================================ */

/* READING COPY → 18px. Element defaults (content body) + known reading classes
   that carried their own sub-18 sizes (e.g. .wc-summary 0.95rem = 15.2px). */
main p, main li, main dd,
.sx-card p, .sx-tcard-body p, .sx-stat-sub, .sx-stat-desc,
.sv-acc-tagline, .sx-topic-offerings-note,
.wc-summary, .ev-excerpt, .ev-body p, .pod-excerpt, .pod-body p,
.sx-content p, .sx-car-item--card p, .inc-body p, .svc-intro p {
  font-size: var(--sx-t-body) !important;
}

/* Ledes keep their larger size (always ≥ body). */
.sx-lead, .sx-hero .sx-lead, .sx-hero-lead, [class*="intro-lead"] p {
  font-size: var(--sx-t-lead) !important;
}

/* UI CHROME FLOOR → 16px (raised from 14px). Wins over the reading default by
   class specificity, and covers chrome OUTSIDE <main> (footer, nav) too. */
.sx-btn, [class*="sx-btn"], .wf-submit,
header nav a, .sx-nav a, nav ul a,
.sx-footer p, .sx-footer a, .sx-footer li, .foot-meta, .sx-footer-base,
.wc-date, .wc-meta, .sx-course-meta, .work-meta dt, .work-meta dd,
.person-role, .pod-meta, .ev-meta, .ev-date, .pod-date,
cite, .quote .who2, .work-quote cite, .sx-quote cite,
.chip, [class*="chip"], .sx-tag, [class*="-tag"],
.svc-hero .crumb, .crumb,
.sx-filter label, .sx-filter select, .sx-filter button, .sx-filter a,
label, select, .sv-point-cta, .sx-course-badge, .pod-platform-label, .ev-platform-label {
  font-size: var(--sx-t-small) !important;
}

/* ============================================================================
   ANNUAL REPORT CARDS — read-link (2026-10-10)
   .ar-cards-link is the per-card "Read the YYYY Annual Report →" CTA inside
   the .work-card tiles on /annual-reports/. Styled as an inline arrow link
   (same tone as .ar-stories .ar-link in annual-report.css): plum body,
   semibold, lavender on hover, arrow nudges right on hover.
   Does NOT restyle the shared .work-card — only this link class is scoped.
   ============================================================================ */
.ar-cards-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: auto;
  padding-top: 4px;
  color: var(--sx-plum, #32003D);
  font-weight: 600;
  font-size: var(--sx-t-small, .875rem);
  text-decoration: none;
  transition: color .2s ease;
}
.ar-cards-link span {
  display: inline-block;
  transition: transform .2s ease;
}
.ar-cards-link:hover {
  color: var(--sx-lav, #8056D4);
}
.ar-cards-link:hover span {
  transform: translateX(4px);
}

/* ============================================================================
   ANNUAL REPORT CARDS — section ground + card definition + imageless tile (2026-10-10)
   Scoped entirely to .sx-arc-cards so the global .work-card (Work/News/Home/
   Search) is untouched.
   1. Lavender-wash band so white cards have a tinted ground to pop against.
      Hero above = photo hero; footer below = plum — no sequential-same-bg issue.
   2. Hairline border + asymmetric drop shadow + hover lift.
      Existing main.css traits (white bg, --sx-leaf radius, overflow:hidden)
      already apply; only border + shadow + transition are added here.
   3. Branded imageless cover tile — plum field with the white/gold SCS lockup —
      so a card with no report image reads as an intentional cover stand-in
      rather than an empty box. Overrides background only; aspect-ratio 16/10
      and top-radius from main.css L366 still apply.
   ============================================================================ */
.sx-arc-cards {
  background: var(--sx-lav-wash);
}

.sx-arc-cards .work-card {
  border: 1px solid var(--sx-line);
  box-shadow: 0 14px 38px -20px rgba(50, 0, 61, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sx-arc-cards .work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -20px rgba(50, 0, 61, .30);
}

.sx-arc-cards .work-card--no-thumb::before {
  background: var(--sx-plum) url('../img/logo-light.svg') center / 64% auto no-repeat;
}