/* ============================================================================
   MemberSavi — Landing "Rovix-grade" depth layer  (ADDITIVE OVERRIDE)
   ----------------------------------------------------------------------------
   Loaded LAST on the landing template, so selectors here win the cascade over
   the base landing-*.css files. Reversible: remove 'landing-rovix' from the
   $landing_css_files array in functions.php to fully revert.

   Design direction (approved 2026-05-31): align with the Rovix consulting
   template — forest-green + GOLD accent, alternating dark/light section rhythm,
   editorial depth — while keeping BMF brand defaults and the existing dynamic
   /editable section data. DM Serif Display headlines + Manrope body.

   PHASE 1 (this file, so far): cinematic DARK HERO + bolder gold accent system.
   Subsequent phases extend the same layer down the page (tiers, process, why,
   cta) — each scoped to its section id so nothing else is disturbed.

   All colour comes from tokens so a future client re-skins via CiviCRM settings:
     --ms-primary / --ds-forest-2  (green)   --ds-forest (near-black forest)
     --ds-gold (accent)                       --ms-secondary (red, sparing)
   ============================================================================ */

/* Manrope body face — loaded here so it's guaranteed on the landing regardless
   of which font enqueue wins (theme vs. the CiviCRM core dynamic loader). Must
   precede all style rules (only the header comment may come before @import). */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

/* ── Extra tokens this layer introduces (gold scale + dark-section palette) ── */
:root {
  --rx-forest-900: #06281a;                 /* deepest forest, hero base        */
  --rx-forest-800: #0a2818;                 /* = --ds-forest                    */
  --rx-forest-700: #0e3a25;                 /* raised dark panels               */
  --rx-gold:       var(--ms-accent, var(--ds-gold, #C9A961)); /* accent (admin-set) */
  --rx-gold-200:   rgba(201,169,97,0.22);   /* gold tint                        */
  --rx-gold-400:   rgba(201,169,97,0.45);   /* gold hairline                    */
  --rx-on-dark:    rgba(255,255,255,0.92);  /* primary text on dark             */
  --rx-on-dark-mut:rgba(255,255,255,0.62);  /* muted text on dark               */
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO  →  dark, cinematic, gold-accented
   The base hero is light (.ms-hero on #FAFBFC). We repaint it forest-dark with
   a layered radial mesh + grain, flip the type to off-white DM Serif, and make
   the primary CTA gold. The paired photos gain a gold offset frame.
   ════════════════════════════════════════════════════════════════════════════ */

.ms-hero {
  /* Layered forest backdrop: two green glows + a faint gold wash + base. */
  background:
    radial-gradient(1200px 760px at 0% 0%,   rgba(20,97,57,0.55),  transparent 60%),
    radial-gradient(1000px 760px at 100% 100%, rgba(14,58,37,0.65), transparent 60%),
    radial-gradient(680px 460px at 78% 18%,   rgba(201,169,97,0.14), transparent 65%),
    linear-gradient(155deg, var(--rx-forest-900) 0%, var(--rx-forest-800) 55%, #08311f 100%)
    !important;
  color: var(--rx-on-dark) !important;
}

/* Grain overlay — lift the multiply-blend a touch and brighten so it reads on
   dark (the base file's grain is tuned for a light bg). */
.ms-hero::before {
  opacity: 0.06 !important;
  mix-blend-mode: screen !important;
}

/* Soft floating gold blob instead of green, top-right, for warmth. */
.ms-hero::after {
  background: radial-gradient(circle at 30% 30%, rgba(201,169,97,0.22), transparent 65%) !important;
}

/* Eyebrow → gold uppercase with a gold rule. */
.ms-hero .ms-section__eyebrow {
  color: var(--rx-gold) !important;
  letter-spacing: 0.16em;
}
.ms-hero .ms-section__eyebrow::before {
  background: var(--rx-gold) !important;
  opacity: 1 !important;
  width: 28px !important;
}

/* Headline → off-white DM Serif, large. */
.ms-hero .ms-section__headline,
.ms-hero .ms-section__headline--display {
  color: #ffffff !important;
  font-family: var(--ds-font-display, 'DM Serif Display', Georgia, serif) !important;
}
/* A single gold word-accent: the base markup has no span, so we tint the whole
   lede instead and let the headline stay pure white for maximum contrast. */
.ms-hero .ms-section__lede {
  color: var(--rx-on-dark-mut) !important;
}

/* Left accent rule → gold gradient. */
.ms-hero__accent {
  background: linear-gradient(to bottom, var(--rx-gold), rgba(201,169,97,0.25)) !important;
}
/* Paired red bar on the panel edge stays as the sparing red note — keep it. */

/* Primary CTA → solid gold with forest-dark text (Rovix's signature button). */
.ms-hero .ms-button--primary {
  background: var(--rx-gold) !important;
  border-color: var(--rx-gold) !important;
  color: var(--rx-forest-900) !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px rgba(201,169,97,0.28);
}
.ms-hero .ms-button--primary:hover,
.ms-hero .ms-button--primary:active {
  background: #d8bb78 !important;
  border-color: #d8bb78 !important;
  color: var(--rx-forest-900) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(201,169,97,0.36);
}

/* Secondary "View requirements" → off-white ghost link, gold on hover. */
.ms-hero .ms-hero__secondary-link {
  color: var(--rx-on-dark) !important;
}
.ms-hero .ms-hero__secondary-link:hover {
  color: var(--rx-gold) !important;
}

/* Credibility chips → translucent dark glass with gold edge. */
.ms-hero .ms-cred-chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--rx-gold-400) !important;
  color: var(--rx-on-dark) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
}
.ms-hero .ms-cred-chip:hover {
  border-color: var(--rx-gold) !important;
  background: rgba(255,255,255,0.10) !important;
}
.ms-hero .ms-cred-chip__logo {
  background: #ffffff !important;          /* keep SAQA mark legible */
}
.ms-hero .ms-cred-chip__dot { background: var(--rx-gold) !important; }
.ms-hero .ms-cred-chip__sep { background: rgba(255,255,255,0.18) !important; }

/* Scroll indicator → muted light. */
.ms-hero .ms-hero__scroll { color: var(--rx-on-dark-mut) !important; }

/* Decoratives on the text panel: green dot-matrix is invisible on dark — switch
   to a faint gold matrix; keep the red stripe note on the photo. */
.ms-hero__panel::after {
  background-image: radial-gradient(circle, rgba(201,169,97,0.40) 1.5px, transparent 0) !important;
}
.ms-hero__media-inner::after {        /* corner bracket → gold */
  border-left-color: var(--rx-gold) !important;
  border-bottom-color: var(--rx-gold) !important;
}

/* Paired photos → warm gold offset frame + deeper shadow for cinematic lift. */
.ms-hero__media--paired .ms-paired-photo {
  position: relative;
}
.ms-hero__media--paired .ms-paired-photo::before {
  content: '';
  position: absolute;
  inset: -14px -14px auto auto;
  width: 64%;
  height: 70%;
  border: 1.5px solid var(--rx-gold-400);
  border-radius: 14px;
  z-index: 0;
  pointer-events: none;
}
.ms-hero__media--paired figure img {
  box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
}

/* Stat badge (when it shows): forest card, gold number — reads on the dark hero. */
.ms-hero__stat-badge {
  background: var(--rx-forest-700) !important;
  border-color: var(--rx-gold-400) !important;
}
.ms-hero__stat-num   { color: var(--rx-gold) !important; }
.ms-hero__stat-label { color: var(--rx-on-dark-mut) !important; }
.ms-hero__year-label { color: var(--rx-on-dark-mut) !important; }

/* The landing header sits over the dark hero — the auth-aware nav already uses
   the dark gradient, which now blends seamlessly into the hero below it. */


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 1b — Hero "boxed across" alignment + extra creative elements
   ════════════════════════════════════════════════════════════════════════════ */

/* ── BOXING ─────────────────────────────────────────────────────────────────
   Align the hero CONTENT to the same 1280px container as every section below,
   while the dark background still bleeds full-width. Result: the left edge of
   the headline lines up vertically with the "Established 1976" eyebrow in the
   About section, and the photo is kept inside the 1280 box on ultrawide screens.

   max(gutter, (100vw-1280)/2):
     < 768px  → 1.5rem gutter        (calc is negative)
     768–1279 → 2.5rem gutter        (calc still negative)
     ≥ 1280px → (100vw-1280)/2       → flush to the container edge
*/
.ms-hero__panel {
  padding-inline-start: max(1.5rem, calc((100vw - 1280px) / 2)) !important;
}
@media (min-width: 768px) {
  .ms-hero__panel {
    padding-inline-start: max(2.5rem, calc((100vw - 1280px) / 2)) !important;
  }
}
@media (min-width: 1280px) {
  .ms-hero__media--paired {
    padding-inline-end: max(1.5rem, calc((100vw - 1280px) / 2)) !important;
  }
}
/* Keep the headline measure tidy now that it's container-aligned. */
.ms-hero .ms-section__intro { max-width: 36rem; }

/* ── CREATIVE 1 — Rotating credential seal ──────────────────────────────────
   Gold circular-text seal with a centred check mark, overlapping the top-left of
   the photo composition (Rovix uses a rotating badge in the same spot). Pure
   decoration; aria-hidden in markup. Honours reduced motion. */
.ms-hero__seal {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 118px;
  height: 118px;
  z-index: 12;
  pointer-events: none;
}
/* Forest disc behind the centre mark so it reads over any photo. */
.ms-hero__seal::before {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  background: rgba(6, 40, 26, 0.82);
  border: 1px solid var(--rx-gold-400);
  box-shadow: 0 8px 24px rgba(0,0,0,0.40);
  backdrop-filter: blur(2px);
  z-index: 1;
}
.ms-hero__seal svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  animation: ms-seal-spin 24s linear infinite;
}
.ms-hero__seal text {
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
  font-size: 9.6px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--rx-gold);
}
.ms-hero__seal-mark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--rx-gold);
}
@keyframes ms-seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ms-hero__seal svg { animation: none; }
}

/* ── CREATIVE 2 — Floating "verified credential" card ────────────────────────
   Sits bottom-left over the photo (the slot the suppressed stat badge would use).
   Forest card, gold icon — signals NLRD verifiability, the product's core promise. */
.ms-hero__cred-card {
  position: absolute;
  bottom: -16px;
  left: -24px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--rx-forest-700);
  border: 1px solid var(--rx-gold-400);
  border-radius: 13px;
  padding: 12px 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  pointer-events: none;
}
.ms-hero__cred-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rx-gold-200);
  color: var(--rx-gold);
  font-size: 19px;
  flex-shrink: 0;
}
.ms-hero__cred-text { display: flex; flex-direction: column; line-height: 1.25; }
.ms-hero__cred-text strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
}
.ms-hero__cred-text small {
  color: var(--rx-on-dark-mut);
  font-size: 11px;
  font-family: var(--ms-font-body, 'Urbanist', sans-serif);
}

/* ── CREATIVE 3 — Second drifting gold aura for depth (additive orb) ─────────
   The base .ms-hero::after is one green/gold blob top-right; add a counter-
   drifting one bottom-left via a dedicated element so we don't clobber pseudos. */
.ms-hero__aura {
  position: absolute;
  bottom: -180px;
  left: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(201,169,97,0.16), transparent 65%);
  filter: blur(48px);
  z-index: 0;
  pointer-events: none;
  animation: ms-aura-drift 22s ease-in-out infinite alternate;
}
@keyframes ms-aura-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,-26px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-hero__aura { animation: none; }
}

/* ── Responsive: shrink + reposition creative elements on stacked layouts ──── */
@media (max-width: 1023px) {
  .ms-hero__seal { width: 92px; height: 92px; top: -16px; left: -10px; }
  .ms-hero__seal text { font-size: 8px; }
  .ms-hero__seal-mark { font-size: 23px; }
  .ms-hero__cred-card { left: 6px; bottom: -12px; padding: 10px 13px; }
}
@media (max-width: 600px) {
  .ms-hero__seal { display: none; } /* avoid crowding the small-screen photo */
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 1c — Readability + CTA visibility pass
   The base hero centres content in a tall 80vh grid with 160px vertical padding,
   which pushes the CTA row low (sometimes below the fold). Pull everything toward
   the top, tighten the headline, and raise text contrast on the dark backdrop.
   ════════════════════════════════════════════════════════════════════════════ */

/* Align hero content to the top (with breathing room under the sticky nav) rather
   than vertically centring it — guarantees the CTA row is visible on first paint. */
.ms-hero--split { min-height: auto !important; }
.ms-hero__panel {
  justify-content: flex-start !important;
  padding-top: clamp(3rem, 7vh, 5.5rem) !important;
  padding-bottom: clamp(3rem, 7vh, 5rem) !important;
  gap: clamp(1.25rem, 2.4vw, 1.9rem) !important;   /* tighter stack = CTAs higher */
}

/* Headline — balanced, readable. Slightly smaller cap than the base 4.5rem so the
   full sentence reads on 2–3 lines without dominating, line-height opened a touch
   for legibility on the dark backdrop. */
.ms-hero .ms-section__headline--display {
  font-size: clamp(2.25rem, 3.8vw, 3.6rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  max-width: 20ch !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);     /* lift off the photo glow */
}

/* Lede — raise contrast from .62 → .82 so the supporting line is comfortably
   readable, and cap its measure. */
.ms-hero .ms-section__lede {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(1.0625rem, 1.3vw, 1.2rem) !important;
  line-height: 1.6 !important;
  max-width: 46ch !important;
}

/* Eyebrow — brighten gold a touch for AA contrast on dark. */
.ms-hero .ms-section__eyebrow { color: #d8bb78 !important; }

/* CTA row — ensure it never wraps awkwardly and the gold button reads as the
   single loudest element. Secondary link gets a clear gold underline-on-hover. */
.ms-hero__actions { margin-top: clamp(0.5rem, 1.5vw, 1rem) !important; }
.ms-hero .ms-hero__secondary-link {
  color: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid transparent;
}
.ms-hero .ms-hero__secondary-link:hover {
  color: #d8bb78 !important;
  border-bottom-color: #d8bb78;
}

/* Credibility chips — readable text + a clearer divider on dark. */
.ms-hero .ms-cred-chip__text { color: #ffffff !important; }

/* The drifting auras are decorative; make sure they never sit ON TOP of text. */
.ms-hero__aura,
.ms-hero::after { z-index: 0 !important; }
.ms-hero__panel,
.ms-hero__media { position: relative; z-index: 2; }

/* Tablet/mobile: the photo stacks ABOVE the text in the base layout. Keep the
   text block comfortably padded and the creative badges from overlapping copy. */
@media (max-width: 1023px) {
  .ms-hero__panel {
    padding-top: clamp(2rem, 5vh, 3.5rem) !important;
    padding-bottom: clamp(2.5rem, 6vh, 4rem) !important;
    text-align: left;
  }
  .ms-hero .ms-section__headline--display {
    font-size: clamp(2rem, 6.5vw, 3rem) !important;
    max-width: 22ch !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2 — Rovix language down the page (tiers · process · why · cpd · CTA)
   Additive + reversible. Light sections keep green as the brand base; GOLD is the
   accent; red stays sparing. Body copy moves to Manrope (loaded in functions.php).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Manrope body copy across the landing (display headings stay DM Serif) ──── */
.ms-landing-wrap .body-lede,
.ms-landing-wrap .ms-checklist__item,
.ms-landing-wrap .ms-tier-card__role,
.ms-landing-wrap .ms-tier-card__meta-row,
.ms-landing-wrap .ms-tier-card__copy,
.ms-landing-wrap .ms-numbered-list__body,
.ms-landing-wrap .ms-process-desc,
.ms-landing-wrap .eyebrow,
.ms-landing-wrap .text-link-arrow,
.ms-landing-wrap .ms-about-stat__label {
  font-family: 'Manrope', var(--ms-font-body, 'Urbanist', sans-serif) !important;
}

/* ── Shared: gold section eyebrow accent on light sections ──────────────────── */
.ms-landing-wrap .eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--rx-gold, #C9A961);
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.9;
}
.ms-landing-wrap .eyebrow-on-dark::before { background: var(--rx-gold, #C9A961); }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 4 — THREE DESIGNATION TIER CARDS  (Rovix "What We Offer")
   ════════════════════════════════════════════════════════════════════════════ */

/* Gold ghost numbers (were translucent white over the photo). */
#ms-designations .ms-tier-card__num {
  color: rgba(201, 169, 97, 0.85) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.30);
}

/* Gold hover ring + lift on every card. */
#ms-designations .ms-tier-card {
  border: 1px solid rgba(20, 97, 57, 0.08);
  transition: box-shadow .3s cubic-bezier(.2,0,.2,1),
              transform .3s cubic-bezier(.2,0,.2,1),
              border-color .3s ease !important;
}
#ms-designations .ms-tier-card:hover {
  border-color: var(--rx-gold-400, rgba(201,169,97,0.45)) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.06),
              0 18px 50px rgba(20,97,57,.16),
              0 0 0 1px var(--rx-gold-400, rgba(201,169,97,0.45)) !important;
}

/* Role label → gold uppercase. */
#ms-designations .ms-tier-card__role { color: var(--rx-gold-700, #9c7d34) !important; }

/* Meta values keyed with a subtle gold left tick for scanability. */
#ms-designations .ms-tier-card__meta-value { color: #1a202c !important; }

/* Tier CTA link → gold with arrow slide. */
#ms-designations .ms-tier-card__cta .text-link-arrow { color: var(--rx-gold-700, #9c7d34) !important; }
#ms-designations .ms-tier-card__cta .text-link-arrow:hover { color: #6f5a25 !important; }

/* CTD flagship: retune the existing --gold variant from RED glow → GOLD frame
   (gold is now the accent; red stays sparing for the role label only). */
#ms-designations .ms-tier-card--gold {
  box-shadow: 0 1px 2px rgba(0,0,0,.06),
              0 6px 28px rgba(201,169,97,.22) !important;
}
#ms-designations .ms-tier-card--gold:hover {
  border-color: var(--rx-gold, #C9A961) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.06),
              0 20px 56px rgba(201,169,97,.34),
              0 0 0 1.5px var(--rx-gold, #C9A961) !important;
}
#ms-designations .ms-tier-card--gold .ms-tier-card__photo::after {
  background: linear-gradient(135deg, rgba(201,169,97,.30), transparent 55%) !important;
}
#ms-designations .ms-tier-card--gold .ms-tier-card__role { color: #882421 !important; }
/* Gold "Flagship" ribbon on the CTD card. */
#ms-designations .ms-tier-card--gold .ms-tier-card__inner::before {
  content: 'Flagship';
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  font-family: 'Manrope', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a2818;
  background: var(--rx-gold, #C9A961);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(201,169,97,.4);
}


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 6 — PROCESS TIMELINE (dark forest)  → gold nodes, brighter copy
   ════════════════════════════════════════════════════════════════════════════ */

/* Number disc → solid gold fill with forest-dark numerals (Rovix node style). */
#ms-process .ms-process-number-wrap {
  background-color: var(--rx-gold, #C9A961) !important;
  border-color: var(--rx-gold, #C9A961) !important;
}
#ms-process .ms-process-number { color: #0a2818 !important; }
#ms-process .ms-process-item:hover .ms-process-number-wrap {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 6px rgba(201,169,97,.18) !important;
}
/* Connecting hairline → gold, slightly stronger. */
#ms-process .ms-process-list::before {
  background: linear-gradient(to right,
    rgba(201,169,97,0) 0%, rgba(201,169,97,.55) 12%,
    rgba(201,169,97,.55) 88%, rgba(201,169,97,0) 100%) !important;
}
/* Body copy contrast up. */
#ms-process .ms-process-desc { color: rgba(255,255,255,.78) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 7 — WHY BMF (light)  → gold numerals
   ════════════════════════════════════════════════════════════════════════════ */

#ms-why .ms-numbered-list__num { color: var(--rx-gold-700, #9c7d34) !important; }
#ms-why .ms-numbered-list__num::after { background-color: var(--rx-gold, #C9A961) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 3 — ABOUT (light)  → gold checklist ticks, gold stat accent
   ════════════════════════════════════════════════════════════════════════════ */

#ms-about .ms-checklist__icon { color: var(--rx-gold-700, #9c7d34) !important; }
/* Keep the green "50 years" stat green; the SAQA stat stays red — already a nice
   2-colour pair. Add a thin gold rule above the stats block for cohesion. */
#ms-about .ms-about-stats { border-top-color: rgba(201,169,97,.35) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   SECTION 9 — FINAL CTA  → DARK FOREST BOOKEND (mirrors the hero)
   The base section is white (.bg-surface). Repaint it forest-dark with a gold
   button so the page opens and closes on the same cinematic note.
   ════════════════════════════════════════════════════════════════════════════ */

#ms-cta.section-final {
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(20,97,57,0.55), transparent 60%),
    radial-gradient(680px 420px at 50% 100%, rgba(201,169,97,0.14), transparent 60%),
    linear-gradient(160deg, var(--rx-forest-900, #06281a), var(--rx-forest-800, #0a2818)) !important;
  isolation: isolate;
}
#ms-cta .eyebrow { color: var(--rx-gold, #C9A961) !important; }
#ms-cta .h-display,
#ms-cta #ms-cta-heading { color: #ffffff !important; }
#ms-cta .body-lede { color: rgba(255,255,255,.82) !important; }

/* Primary button → gold with forest-dark text (matches hero CTA). */
#ms-cta .btn-primary {
  background-color: var(--rx-gold, #C9A961) !important;
  color: #0a2818 !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px rgba(201,169,97,.28);
}
#ms-cta .btn-primary:hover {
  background-color: #d8bb78 !important;
  color: #0a2818 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(201,169,97,.36);
}
/* "Already a member? Sign in" → readable light link, gold on hover. */
#ms-cta a.text-muted,
#ms-cta .text-muted { color: rgba(255,255,255,.66) !important; }
#ms-cta a.hover\:text-ink:hover { color: var(--rx-gold, #C9A961) !important; }

/* The CTA's decorative ring/dot were tuned for white — soften for dark. */
#ms-cta .ms-cta-card::before { border-color: rgba(201,169,97,.22) !important; }
#ms-cta .ms-cta-card::after  { background: var(--rx-gold, #C9A961) !important;
                               box-shadow: 0 0 0 6px rgba(201,169,97,.14) !important; }
#ms-cta-heading::after { background: var(--rx-gold, #C9A961) !important; }

/* Gold-scale tokens used above (extend the Phase-1 set). */
:root {
  --rx-gold-700: var(--ms-accent-text, #9c7d34);   /* darker accent, text on light (AA) */
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2b — BALANCE RED (#882421) on the LIGHT sections
   Red was only appearing on the CTD role + SAQA stat. This weaves it in as a
   deliberate third accent on white areas — paired with gold/green, never noisy.
   Scoped to light sections only (hero + process + final-CTA stay forest/gold).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --rx-red:      var(--ms-secondary, #882421);
  --rx-red-200:  rgba(136, 36, 33, 0.14);
  --rx-red-400:  rgba(136, 36, 33, 0.40);
}

/* ── Section eyebrows on light sections: pair gold rule + red dot ──────────────
   The eyebrow already gets a gold lead rule (Phase 2). Add a small red end-dot so
   each light-section kicker carries BOTH brand accents. */
#ms-about .eyebrow::after,
#ms-designations .eyebrow::after,
#ms-why .eyebrow::after,
#ms-cpd .eyebrow::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--rx-red, #882421);
  vertical-align: middle;
  margin-left: 10px;
}

/* ── ABOUT — checklist ticks alternate gold / red for rhythm ──────────────────
   (1st & 3rd gold, 2nd & 4th red) — keeps green out of the tick so the green
   "50 years" stat stays the hero of the section. */
#ms-about .ms-checklist__item:nth-child(2) .ms-checklist__icon,
#ms-about .ms-checklist__item:nth-child(4) .ms-checklist__icon {
  color: var(--rx-red, #882421) !important;
}

/* ── DESIGNATIONS — give CTP & CTM a quiet red top-accent line so all three
   cards read as a set with the (red-roled) CTD, instead of CTD being an island.
   A 3px red rule animates in on hover. */
#ms-designations .ms-tier-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rx-red, #882421);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,0,.2,1);
  z-index: 6;
  opacity: 0.85;
}
#ms-designations .ms-tier-card:hover::after { transform: scaleX(1); }
/* CTD keeps its red rule always-on (it's the flagship) */
#ms-designations .ms-tier-card--gold::after { transform: scaleX(1); opacity: 1; }

/* Tier meta: the LAST meta row (fee / CPD) gets a red value to draw the eye to
   the commercially-relevant figure. */
#ms-designations .ms-tier-card__meta-row:last-child .ms-tier-card__meta-value {
  color: var(--rx-red, #882421) !important;
}

/* ── WHY BMF — numbered-list underline tick: alternate gold / red ─────────────
   Phase 2 set the tick gold; alternate even items to red so the list has both. */
#ms-why .ms-numbered-list__item:nth-child(2) .ms-numbered-list__num::after,
#ms-why .ms-numbered-list__item:nth-child(4) .ms-numbered-list__num::after {
  background-color: var(--rx-red, #882421) !important;
}

/* ── CPD section — the small red ring accents already exist (inline style).
   Add a red left-border to the editorial card heading rule for presence. */
#ms-cpd #ms-cpd-heading {
  position: relative;
  padding-left: 18px;
}
#ms-cpd #ms-cpd-heading::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--rx-gold, #C9A961), var(--rx-red, #882421));
}

/* ── Marquee band (dark) — already has green top / red bottom hairline + gold
   dots. Nudge the dots to alternate gold/red for a richer ticker. */
.ms-marquee:not(.ms-marquee--light) .ms-marquee__dot:nth-child(4n) { color: var(--rx-red, #882421); }

/* ── Shared link-arrow hover on light sections → red (was gold-only) so the
   interaction colour carries the secondary brand too. Tier CTAs keep gold. */
#ms-about .text-link-arrow:hover,
#ms-why .text-link-arrow:hover {
  color: var(--rx-red, #882421) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 3 — Final micro-polish (body weight, hovers, motion details)
   Quality-only. No new colours; refines what's already there.
   ════════════════════════════════════════════════════════════════════════════ */

/* Manrope reads best at 450–500 for body; bump the lede/body weight a touch and
   tighten tracking slightly for an editorial feel. */
.ms-landing-wrap .body-lede { font-weight: 450; letter-spacing: -0.003em; }
.ms-landing-wrap .ms-tier-card__copy,
.ms-landing-wrap .ms-numbered-list__body { font-weight: 450; }

/* Eyebrows: a hair more tracking now that body is Manrope. */
.ms-landing-wrap .eyebrow,
.ms-landing-wrap .eyebrow-on-dark { letter-spacing: 0.14em; }

/* Buttons — arrow nudges right on hover (Rovix micro-interaction). */
.ms-hero .ms-button__icon,
#ms-cta .btn-primary .ph { transition: transform .25s cubic-bezier(.2,0,.2,1); }
.ms-hero .ms-button--primary:hover .ms-button__icon,
#ms-cta .btn-primary:hover .ph { transform: translateX(4px); }

/* Tier card photos already zoom on hover; add a subtle gold sheen sweep. */
#ms-designations .ms-tier-card__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(201,169,97,0.18) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2,0,.2,1);
}
#ms-designations .ms-tier-card:hover .ms-tier-card__photo::before { transform: translateX(120%); }

/* Credibility chips: gentle stagger-friendly lift already exists; smooth the
   logo so it doesn't jump on hover. */
.ms-hero .ms-cred-chip { transition: transform .22s cubic-bezier(.2,0,.2,1), border-color .22s, background .22s; }

/* Process nodes: subtle pulse-ready scale on hover already set; add a soft gold
   ground-glow under each node for depth on the dark band. */
#ms-process .ms-process-number-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(201,169,97,0.22), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}
#ms-process .ms-process-item:hover .ms-process-number-wrap::after { opacity: 1; }

/* Section headlines: a touch more line-height on the big light-section h2s for
   readability now that they sit among more accents. */
.ms-landing-wrap .h-h1 { line-height: 1.18; }

/* Final CTA button: ensure the icon inherits the forest-dark colour. */
#ms-cta .btn-primary .ph { color: #0a2818; }

/* Smooth focus ring in brand gold for keyboard users across landing CTAs. */
.ms-landing-wrap a:focus-visible,
.ms-hero a:focus-visible {
  outline: 3px solid var(--rx-gold, #C9A961);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #ms-designations .ms-tier-card__photo::before,
  .ms-hero .ms-button__icon,
  #ms-cta .btn-primary .ph { transition: none; transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 4 — Mobile responsiveness pass (audit + fixes)
   Curl can't see layout; these address the real small-screen risks introduced by
   the dark hero, creative decoratives, boxing math, and the dark CTA bookend.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Horizontal-overflow guard ──────────────────────────────────────────────
   Several decoratives are absolutely positioned with negative offsets (aura,
   seal, cred-card, gold photo frame). The hero clips them (overflow:hidden), but
   belt-and-braces: never let the landing cause a horizontal scrollbar. */
.ms-landing-wrap { overflow-x: clip; }

@media (max-width: 1023px) {
  /* Hero text panel: comfortable gutters both sides (boxing only set the start). */
  .ms-hero__panel {
    padding-inline: clamp(1.25rem, 5vw, 2rem) !important;
  }
  /* Lede: a touch larger min for legibility on phones. */
  .ms-hero .ms-section__lede { font-size: clamp(1rem, 3.6vw, 1.15rem) !important; }

  /* CTA row: stack full-width on narrow screens so taps are easy and nothing
     wraps awkwardly; keep them inline once there's room. */
  .ms-hero__actions { width: 100%; }
}

@media (max-width: 560px) {
  .ms-hero__actions { flex-direction: column; align-items: stretch; gap: 12px !important; }
  .ms-hero .ms-button--primary { justify-content: center; width: 100%; }
  .ms-hero__secondary-link { justify-content: center; }
  /* Credibility chips wrap to their own rows cleanly. */
  .ms-hero__credibility { gap: 10px !important; }
}

/* ── Hero photo composition on mobile ───────────────────────────────────────
   The gold offset frame (::before) and cred-card can crowd a small photo. Pull
   the frame in and keep the cred-card inside the photo's footprint. */
@media (max-width: 767px) {
  .ms-hero__media--paired .ms-paired-photo::before { inset: -8px -8px auto auto; width: 55%; height: 60%; }
  .ms-hero__cred-card { left: 0; bottom: -10px; padding: 9px 12px; }
  .ms-hero__cred-icon { width: 32px; height: 32px; font-size: 17px; }
  .ms-hero__cred-text strong { font-size: 12px; }
  .ms-hero__cred-text small { font-size: 10px; }
  /* The drifting aura: shrink so it never dominates a small viewport. */
  .ms-hero__aura { width: 280px; height: 280px; bottom: -120px; left: -90px; }
}

/* ── Tier cards: ghost number + Flagship ribbon spacing on 1-col mobile ─────── */
@media (max-width: 1023px) {
  #ms-designations .ms-tier-card__num { font-size: 60px; top: 12px; left: 16px; }
  #ms-designations .ms-tier-card--gold .ms-tier-card__inner::before { top: 12px; right: 12px; }
}

/* ── Process timeline: it switches to horizontal scroll-snap on mobile (base).
   Make the gold nodes + scroll affordance comfortable. ───────────────────────*/
@media (max-width: 1023px) {
  #ms-process .ms-process-number-wrap { width: 56px; height: 56px; margin-bottom: 20px; }
  #ms-process .ms-process-number { font-size: 20px; }
}

/* ── Final CTA bookend on mobile: trim the huge 200px padding + keep the dashed
   ring from overflowing. ────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  #ms-cta.section-final { padding: 72px 20px !important; }
  #ms-cta .ms-cta-card::before { top: -24px; left: -12px; right: -12px; bottom: -24px; }
  #ms-cta .btn-primary { width: 100%; justify-content: center; }
}

/* ── Marquee: already shrinks to 44px height (base). Ensure the gold/red dots
   keep adequate spacing at small sizes. ─────────────────────────────────────*/
@media (max-width: 767px) {
  .ms-marquee__dot { padding: 0 20px; }
}

/* ── About: two-image composition + stats grid stack cleanly (base handles the
   photo); ensure the stats 2-col doesn't crush on small phones. ─────────────*/
@media (max-width: 420px) {
  #ms-about .ms-about-stats { grid-template-columns: 1fr; }
}

/* ── Section vertical rhythm: the base .section is 64px/24px on mobile — fine.
   Just make sure the dark hero doesn't leave an awkward gap before the marquee. */
@media (max-width: 1023px) {
  .ms-hero--split { min-height: auto !important; }
}