/* ==========================================================================
   MEDVETS — Design System
   Built on Bootstrap 5.3. Everything project-specific is prefixed .mv-
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Base & typography
   3.  Buttons & links
   4.  Header / navigation
   5.  Hero
   6.  Sections & headings
   7.  Cards
   8.  Features, stats, steps
   9.  Banners & breadcrumbs
   10. CTA bands
   11. Forms & enlistment wizard
   12. Footer
   13. Utilities, motion & responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand */
  --mv-green: #3f5231;
  --mv-green-dark: #2b3a20;
  --mv-green-deep: #1c2716;
  --mv-green-light: #5c7546;
  --mv-sage: #6c7a70;
  --mv-gold: #b07d23;
  --mv-gold-light: #d3a145;
  --mv-red: #8a1f24;
  --mv-red-dark: #6b171b;
  --mv-navy: #13324b;
  --mv-navy-dark: #0c2233;
  --mv-charcoal: #262223;
  --mv-ink: #1c1a1a;

  /* Neutrals */
  --mv-cream: #f7f4ec;
  --mv-cream-2: #efeade;
  --mv-line: #ddd7c8;
  --mv-body: #4a4744;
  --mv-muted: #7a746d;
  --mv-white: #ffffff;
  /* Oswald is kept only for big numeric callouts (stat figures, splash error
     codes) where a condensed face still earns its place as an accent. Every
     heading, button and label reads Inter now instead of leaning on an
     uppercase display face to carry hierarchy. */
  --mv-font-display: "Oswald", sans-serif;
  --mv-font-body: "Inter", sans-serif;
  --mv-font-head: "Inter", sans-serif;
  --bs-font-sans-serif: var(--mv-font-body);
  --bs-body-font-family: var(--mv-font-body);
  --bs-font-monospace: var(--mv-font-body);

  /* Space & shape — modern/minimal: generous rounding, no boxy 4px corners */
  --mv-radius: 12px;
  --mv-radius-lg: 20px;
  /* Form controls sit a touch softer than the radius used for cards. Its own
     token rather than a raw value because anything that attaches to a field —
     input-group addons, the password-reveal button — has to match it or the
     joined corners disagree. */
  --mv-radius-field: 10px;
  --mv-section-y: clamp(2.6rem, 5vw, 4.5rem);
  --mv-shadow-sm: 0 2px 10px rgba(28, 26, 26, 0.05);
  --mv-shadow: 0 8px 24px -10px rgba(28, 26, 26, 0.14);
  --mv-shadow-lg: 0 20px 45px -18px rgba(28, 26, 26, 0.2);
  --mv-header-h: 76px;

  /* Per-theme accents, switched by .mv-t-* */
  --mv-accent: var(--mv-green);
  --mv-accent-dark: var(--mv-green-dark);
}

.mv-t-green {
  --mv-accent: #3f5231;
  --mv-accent-dark: #2b3a20;
}
.mv-t-gold {
  --mv-accent: #b07d23;
  --mv-accent-dark: #8c6317;
}
.mv-t-navy {
  --mv-accent: #13324b;
  --mv-accent-dark: #0c2233;
}
.mv-t-red {
  --mv-accent: #8a1f24;
  --mv-accent-dark: #6b171b;
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mv-header-h) + 20px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--mv-font-body);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--mv-body);
  background: var(--mv-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.mv-display {
  font-family: var(--mv-font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mv-ink);
  text-wrap: balance;
}

h1,
.h1 {
  font-size: clamp(1.7rem, 3.1vw, 2.4rem);
}
h2,
.h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}
h3,
.h3 {
  font-size: clamp(1.04rem, 1.4vw, 1.15rem);
  font-weight: 600;
}
h4 {
  font-size: 0.98rem;
  font-weight: 600;
}

p {
  margin-bottom: 1.1rem;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--mv-green);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover {
  color: var(--mv-gold);
}

img {
  max-width: 100%;
  height: auto;
}

/* The only inline code on the site is a CSS media-feature name on the
   accessibility page. Bootstrap would set it in its monospace stack and its
   default magenta, i.e. an extra typeface and an off-brand colour for one
   token. It reads as a token from the tint and the tracking instead. */
code,
kbd,
samp,
pre {
  font-family: var(--mv-font-body);
  font-size: 0.9em;
  letter-spacing: 0.01em;
  color: var(--mv-green-dark);
}
code {
  background: var(--mv-cream-2);
  border: 1px solid var(--mv-line);
  border-radius: 2px;
  padding: 0.08em 0.36em;
}

::selection {
  background: var(--mv-gold);
  color: #fff;
}

/* Focus visibility — never remove, only restyle */
:focus-visible {
  outline: 3px solid var(--mv-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.mv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--mv-green);
  color: #fff;
  padding: 0.85rem 1.4rem;
  font-family: var(--mv-font-head);
  font-weight: 600;
}
.mv-skip:focus {
  left: 0;
  color: #fff;
}

/* Eyebrow */
.mv-kicker {
  font-family: var(--mv-font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-gold);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.mv-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--mv-gold);
  flex: none;
}
.mv-sec-head--center .mv-kicker {
  justify-content: center;
}
.mv-kicker--light {
  color: var(--mv-gold-light);
}
.mv-kicker--light::before {
  background: var(--mv-gold-light);
}

.mv-lead {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--mv-body);
}

.mv-tag {
  display: inline-block;
  font-family: var(--mv-font-head);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-accent);
  background: color-mix(in srgb, var(--mv-accent) 12%, transparent);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}

/* ==========================================================================
   3. BUTTONS & LINKS
   ========================================================================== */
.btn {
  --bs-btn-border-radius: 999px;
  font-family: var(--mv-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  /* Counting the 1.5px border and the line box this lands at ~45px, so the
     default and .btn-lg stay above a 44px tap target. .btn-sm sits below that
     by design — it is a desktop/secondary size, and the thumb-sized mobile
     targets are .mv-actionbar and the full-width CTAs. */
  padding: 0.62rem 1.6rem;
  border-width: 1.5px;
  border-radius: 999px;
  transition:
    transform 0.16s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.btn:hover {
  box-shadow: var(--mv-shadow-sm);
}
.btn:active {
  transform: translateY(1px);
}
.btn-sm {
  padding: 0.46rem 1.1rem;
  font-size: 0.83rem;
}
.btn-lg {
  padding: 0.72rem 2.2rem;
  font-size: 1.04rem;
}

.btn-mv-green {
  background: var(--mv-green);
  border-color: var(--mv-green);
  color: #fff;
}
.btn-mv-green:hover,
.btn-mv-green:focus {
  background: var(--mv-green-dark);
  border-color: var(--mv-green-dark);
  color: #fff;
  box-shadow: var(--mv-shadow-sm);
}

.btn-mv-gold {
  background: var(--mv-gold);
  border-color: var(--mv-gold);
  color: #fff;
}
.btn-mv-gold:hover,
.btn-mv-gold:focus {
  background: #8c6317;
  border-color: #8c6317;
  color: #fff;
}

.btn-mv-red {
  background: var(--mv-red);
  border-color: var(--mv-red);
  color: #fff;
}
.btn-mv-red:hover,
.btn-mv-red:focus {
  background: var(--mv-red-dark);
  border-color: var(--mv-red-dark);
  color: #fff;
}

.btn-mv-navy {
  background: var(--mv-navy);
  border-color: var(--mv-navy);
  color: #fff;
}
.btn-mv-navy:hover,
.btn-mv-navy:focus {
  background: var(--mv-navy-dark);
  border-color: var(--mv-navy-dark);
  color: #fff;
}

.btn-mv-outline {
  background: transparent;
  border-color: var(--mv-green);
  color: var(--mv-green);
}
.btn-mv-outline:hover,
.btn-mv-outline:focus {
  background: var(--mv-green);
  color: #fff;
}

.btn-mv-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}
.btn-mv-outline-light:hover,
.btn-mv-outline-light:focus {
  background: #fff;
  border-color: #fff;
  color: var(--mv-ink);
}

.btn-mv-light {
  background: #fff;
  border-color: #fff;
  color: var(--mv-green-dark);
}
.btn-mv-light:hover,
.btn-mv-light:focus {
  background: var(--mv-cream-2);
  border-color: var(--mv-cream-2);
  color: var(--mv-green-deep);
}

.btn-mv-accent {
  background: var(--mv-accent);
  border-color: var(--mv-accent);
  color: #fff;
}
.btn-mv-accent:hover,
.btn-mv-accent:focus {
  background: var(--mv-accent-dark);
  border-color: var(--mv-accent-dark);
  color: #fff;
}

/* Arrow link */
.mv-link {
  font-family: var(--mv-font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mv-link i {
  transition: transform 0.2s ease;
}
.mv-link:hover {
  color: var(--mv-gold);
}
.mv-link:hover i {
  transform: translateX(4px);
}
.mv-link--light {
  color: rgba(255, 255, 255, 0.85);
}
.mv-link--light:hover {
  color: #fff;
}

/* ==========================================================================
   4. HEADER / NAVIGATION
   ========================================================================== */
.mv-topbar {
  background: var(--mv-green-deep);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  padding: 0.45rem 0;
}
.mv-topbar a {
  color: rgba(255, 255, 255, 0.8);
}
.mv-topbar a:hover {
  color: var(--mv-gold-light);
}
.mv-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mv-topbar__pillars {
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  opacity: 0.8;
  margin: 0;
}
.mv-topbar__links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  list-style: none;
  padding: 0;
}
.mv-topbar__links li {
  display: flex;
}
.mv-topbar__links .mv-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.22);
}

.mv-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--mv-line);
  transition: box-shadow 0.25s ease;
}
.mv-header.is-stuck {
  box-shadow: 0 6px 24px -12px rgba(28, 26, 26, 0.35);
}

.mv-navbar {
  padding: 0.55rem 0;
}

/* Logo lock-up */
.mv-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--mv-charcoal);
}
.mv-logo svg {
  width: 46px;
  height: 44px;
  display: block;
  flex: none;
}
/* The pentagon mark is inlined into the document, so its wordmark is real text
   that the page's webfont applies to. Styled here rather than with a
   font-family presentation attribute on the <text> so it tracks the token. */
.mv-logo svg text {
  font-family: var(--mv-font-display);
}
.mv-logo__type {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.mv-logo__name {
  font-family: var(--mv-font-head);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--mv-green);
}
.mv-logo__sub {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mv-muted);
  margin-top: 0.22rem;
  font-weight: 600;
}
.navbar-brand:hover .mv-logo__name {
  color: var(--mv-green-dark);
}
.mv-logo--light {
  color: #fff;
}
.mv-logo--light .mv-logo__name {
  color: #fff;
}
.mv-logo--light .mv-logo__sub {
  color: rgba(255, 255, 255, 0.6);
}
.mv-logo--lg svg {
  width: 64px;
  height: 61px;
}
.mv-logo--lg .mv-logo__name {
  font-size: 2.1rem;
}

/* Artwork lock-up (light surfaces only) */
.mv-logo-img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
  transition: opacity 0.18s ease;
}
.navbar-brand:hover .mv-logo-img {
  opacity: 0.82;
}
.mv-logo-img--sm {
  height: 38px;
}

/* Reversed lock-up for the dark footer. The supplied artwork is a 3:2 canvas
   with wide transparent padding around the mark, so it is sized by width (not
   height like the header lock-up) and the negative margins claw back that
   padding so it optically aligns with the copy beneath it. */
.mv-logo-img--footer {
  width: 240px;
  height: auto;
  margin: -1.7rem 0 -1.2rem -1rem;
}

/* Desktop nav */
.mv-nav .nav-link {
  font-family: var(--mv-font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mv-charcoal);
  padding: 0.6rem 0.85rem !important;
  position: relative;
}
.mv-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  background: var(--mv-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.mv-nav .nav-link:hover,
.mv-nav .nav-link:focus,
.mv-nav .nav-link.active,
.mv-nav .nav-link.show {
  color: var(--mv-green);
}
.mv-nav .nav-link:hover::after,
.mv-nav .nav-link.active::after,
.mv-nav .nav-link.show::after {
  transform: scaleX(1);
}
.mv-nav .dropdown-toggle::after {
  margin-left: 0.35rem;
  vertical-align: 0.12em;
  border-top-width: 0.35em;
}

.mv-nav .dropdown-menu {
  border: 0;
  border-top: 3px solid var(--mv-gold);
  border-radius: 0 0 var(--mv-radius) var(--mv-radius);
  box-shadow: var(--mv-shadow);
  padding: 0.5rem;
  min-width: 268px;
  margin-top: 0.3rem;
}
/* Invisible bridge over the margin-top gap above, so moving the pointer
   from the nav-link down into the menu never leaves the hoverable area
   (which would otherwise close the menu mid-transit). */
.mv-nav .dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.3rem;
  height: 0.3rem;
}
.mv-nav .dropdown-item {
  font-size: 0.9rem;
  padding: 0.55rem 0.8rem;
  border-radius: calc(var(--mv-radius) - 4px);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--mv-charcoal);
  white-space: normal;
}
.mv-nav .dropdown-item i {
  color: var(--mv-gold);
  font-size: 1rem;
  width: 1.2rem;
  flex: none;
}
.mv-nav .dropdown-item:hover,
.mv-nav .dropdown-item:focus {
  background: var(--mv-cream);
  color: var(--mv-green);
}
.mv-nav .dropdown-item.active {
  background: var(--mv-green);
  color: #fff;
}
.mv-nav .dropdown-item.active i {
  color: #fff;
}
.mv-nav .dropdown-header {
  font-family: var(--mv-font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-muted);
  padding: 0.5rem 0.8rem 0.3rem;
}

@media (min-width: 992px) {
  .mv-nav .dropdown:hover > .dropdown-menu {
    display: block;
    animation: mvDrop 0.18s ease both;
  }
}
@keyframes mvDrop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mv-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile toggler */
.mv-burger {
  border: 1.5px solid var(--mv-line);
  background: #fff;
  border-radius: var(--mv-radius);
  width: 46px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.mv-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--mv-charcoal);
  transition: 0.2s;
}

/* Offcanvas mobile nav */
.mv-offcanvas {
  width: min(340px, 88vw);
  background: var(--mv-cream);
}
.mv-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--mv-line);
}
.mv-offcanvas .nav-link {
  font-family: var(--mv-font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 0.25rem;
  color: var(--mv-charcoal);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mv-offcanvas .nav-link.active {
  color: var(--mv-green);
}
.mv-offcanvas .accordion-button {
  font-family: var(--mv-font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 0.25rem;
  background: transparent;
  color: var(--mv-charcoal);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mv-offcanvas .accordion-button:not(.collapsed) {
  color: var(--mv-green);
  background: transparent;
}
.mv-offcanvas .accordion-item {
  background: transparent;
  border: 0;
}
.mv-offcanvas .accordion-body {
  padding: 0.25rem 0 0.75rem 0.6rem;
}
.mv-offcanvas .accordion-body a {
  display: block;
  padding: 0.42rem 0;
  font-size: 0.92rem;
  color: var(--mv-body);
}
.mv-offcanvas .accordion-body a:hover {
  color: var(--mv-green);
}

/* Sticky mobile action bar — the flowchart's "always visible actions" */
.mv-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  display: none;
  background: #fff;
  border-top: 1px solid var(--mv-line);
  box-shadow: 0 -6px 22px -12px rgba(0, 0, 0, 0.35);
  padding: 0.5rem;
  gap: 0.45rem;
}
.mv-actionbar .btn {
  flex: 1;
  padding: 0.68rem 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
@media (max-width: 767.98px) {
  .mv-actionbar {
    display: flex;
  }
  body {
    padding-bottom: 66px;
  }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
/* Light split hero: copy + CTAs on one side, the photo as a contained,
   rounded card on the other (reusing .mv-split__media) rather than a dark
   full-bleed photo with a heavy scrim. Keeps the page light from the first
   screen and lets the hero sit at a normal section height instead of forcing
   extra padding to make a full-bleed image moment work. */

/* .mv-hero {
  position: relative;
  background: linear-gradient(180deg, var(--mv-cream) 0%, var(--mv-white) 100%);
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
}
.mv-hero__title {
  color: var(--mv-ink);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-bottom: 1.2rem;
}
.mv-hero__title em {
  font-style: normal;
  color: var(--mv-green);
  display: block;
}
.mv-hero__mission {
  border-left: 4px solid var(--mv-gold);
  padding: 0.2rem 0 0.2rem 1.15rem;
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  color: var(--mv-body);
  max-width: 48ch;
  margin-bottom: 1.9rem;
}
.mv-hero__mission strong {
  display: block;
  font-family: var(--mv-font-head);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
  color: var(--mv-gold);
}
.mv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}
.mv-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--mv-line);
}
.mv-hero__meta div {
  display: flex;
  flex-direction: column;
}
.mv-hero__meta b {
  font-family: var(--mv-font-display);
  font-size: 1.2rem;
  color: var(--mv-green);
  line-height: 1;
}
.mv-hero__meta span {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-muted);
  margin-top: 0.35rem;
} */
.mv-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.mv-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 14px 28px;
  margin: 0;
}
.mv-hero {
  position: relative;
  min-height: 680px;

  display: flex;
  align-items: center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #fff;
  overflow: hidden;
}

.mv-hero__overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(15, 30, 13, 0.92) 0%,
    rgba(15, 30, 13, 0.78) 40%,
    rgba(15, 30, 13, 0.35) 70%,
    rgba(15, 30, 13, 0.15) 100%
  );
}

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

.mv-hero__title {
  color: #fff;
  font-size: clamp(3rem, 4vw, 5.5rem);
  line-height: 0.98;
  font-weight: 800;
  margin: 20px 0 30px;
}

.mv-hero__title em {
  display: block;
  color: #c58b2a;
  font-style: normal;
}

.mv-hero__mission {
  max-width: 650px;
  padding-left: 20px;
  border-left: 4px solid #c58b2a;

  color: #fff;
  font-size: 18px;
  line-height: 1.7;
}

.mv-hero__mission strong {
  display: block;
  color: #c58b2a;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mv-hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.mv-hero__meta {
  display: flex;
  gap: 70px;

  margin-top: 50px;
  padding-top: 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.mv-hero__meta div {
  display: flex;
  flex-direction: column;
}

.mv-hero__meta b {
  color: #d19a32;
  font-size: 30px;
}

.mv-hero__meta span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mv-path {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--mv-line);
  border-top: 5px solid var(--mv-accent);
  border-radius: var(--mv-radius-lg);
  padding: 2rem 1.9rem 1.7rem;
  box-shadow: var(--mv-shadow);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
}
.mv-path:hover {
  transform: translateY(-6px);
  box-shadow: var(--mv-shadow-lg);
}
.mv-path__num {
  font-family: var(--mv-font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mv-accent);
  display: block;
  margin-bottom: 0.5rem;
}
.mv-path h2 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  margin-bottom: 0.6rem;
  color: var(--mv-ink);
}
.mv-path p {
  color: var(--mv-body);
  font-size: 0.92rem;
  margin-bottom: 1.3rem;
}
.mv-path__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.mv-path__list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.3rem 0;
  font-size: 0.93rem;
}
.mv-path__list i {
  color: var(--mv-accent);
  margin-top: 0.3rem;
  flex: none;
}
.mv-path__ghost {
  position: absolute;
  right: -10px;
  bottom: -22px;
  font-size: 7rem;
  line-height: 1;
  color: var(--mv-accent);
  opacity: 0.07;
  pointer-events: none;
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */
.mv-section {
  padding: var(--mv-section-y) 0;
  position: relative;
}
.mv-section--tint {
  background: var(--mv-cream);
}
.mv-section--tint2 {
  background: var(--mv-cream-2);
}
.mv-section--dark {
  background: var(--mv-green-deep);
  color: rgba(255, 255, 255, 0.82);
}
.mv-section--dark h2,
.mv-section--dark h3 {
  color: #fff;
}
.mv-section--navy {
  background: var(--mv-navy-dark);
  color: rgba(255, 255, 255, 0.82);
}
.mv-section--navy h2,
.mv-section--navy h3 {
  color: #fff;
}
.mv-section--sm {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
}

.mv-sec-head {
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.mv-sec-head--center {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.mv-sec-head--center .mv-sec-head__lead {
  margin-inline: auto;
}
.mv-sec-head__title {
  margin-bottom: 0.8rem;
}
.mv-sec-head__lead {
  font-size: 0.95rem;
  color: var(--mv-muted);
  max-width: 68ch;
  margin: 0;
}
.mv-section--dark .mv-sec-head__lead,
.mv-section--navy .mv-sec-head__lead {
  color: rgba(255, 255, 255, 0.68);
}

/* Rich prose block used on mission / story / legal pages */
.mv-prose {
  font-size: 0.8rem;
  max-width: 74ch;
}
.mv-prose h2 {
  margin: 2.2rem 0 0.8rem;
  font-size: clamp(1.15rem, 1.7vw, 1.38rem);
  letter-spacing: 0.03em;
}
.mv-prose h3 {
  margin: 1.7rem 0 0.6rem;
  font-size: 1.05rem;
  color: var(--mv-body);
}
.mv-prose > :first-child {
  margin-top: 0;
}
.mv-prose ul,
.mv-prose ol {
  padding-left: 1.1rem;
  margin-bottom: 1.2rem;
}
.mv-prose li {
  margin-bottom: 0.5rem;
}
.mv-prose blockquote {
  border-left: 4px solid var(--mv-gold);
  background: var(--mv-cream);
  border-radius: 0 var(--mv-radius) var(--mv-radius) 0;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
  font-family: var(--mv-font-head);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--mv-ink);
}
.mv-prose blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--mv-font-body);
  font-weight: 500;
  font-size: 0.85rem;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mv-muted);
}

/* Checklist */
.mv-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mv-checklist li {
  position: relative;
  padding: 0.45rem 0 0.45rem 2rem;
  font-size: 0.8rem;
}
.mv-checklist li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 0.45rem;
  color: var(--mv-accent);
  font-size: 1.05rem;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */
.mv-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  box-shadow: var(--mv-shadow-sm);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.mv-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--mv-shadow);
  border-color: color-mix(in srgb, var(--mv-accent) 30%, transparent);
}
/* Mission cards run several to a view (carousel, grid, related strip) with a
   different theme per mission — a badge each is a nice wayfinding touch, but
   every card also flashing its own hover colour turned one glance at the grid
   into four fighting hues. Hover feedback stays a single calm green regardless
   of the card's theme; a mission's own detail page still gets its one accent
   throughout (that page never renders as a .mv-card--mission itself). */
.mv-card--mission:hover {
  border-color: color-mix(in srgb, var(--mv-green) 30%, transparent);
}
.mv-card--mission .mv-card__icon {
  background: var(--mv-green);
}

.mv-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--mv-cream-2);
}
.mv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.mv-card:hover .mv-card__media img {
  transform: scale(1.05);
}
.mv-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 22, 18, 0.5), transparent 55%);
}

/* A circular badge straddling the media/body seam — half sunk into the photo,
   half resting on the card — rather than a square tucked into the photo's own
   corner. Left-aligned with the body's own padding so it lines up with the
   title and text beneath it instead of floating dead-center. */
.mv-card__icon {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mv-accent);
  color: #fff;
  font-size: 1.3rem;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.4);
}

.mv-card__body {
  padding: 1.1rem 1.4rem 0.5rem;
  flex: 1 1 auto;
}
.mv-card__title {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.mv-card__title a {
  color: var(--mv-ink);
}
.mv-card__title a:hover {
  color: var(--mv-accent);
}
.mv-card__text {
  color: var(--mv-body);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}
/* Mission descriptions run one to three lines; reserving that much space up
   front keeps a short card from growing an empty gap before the buttons when
   it is row-stretched to match a longer neighbour. */
.mv-card--mission .mv-card__text {
  min-height: 4.3rem;
}
.mv-card__foot {
  padding: 0.6rem 1.4rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  border-top: 1px solid var(--mv-line);
  margin-top: 0.3rem;
}
.mv-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.mv-card__date {
  font-size: 0.8rem;
  color: var(--mv-muted);
  letter-spacing: 0.04em;
}
.mv-card--compact .mv-card__media {
  aspect-ratio: 16 / 8;
}
/* No action buttons to share the row with in compact mode — "Learn More" can
   read at its normal size instead of the cramped nowrap scale. */
.mv-card--compact .mv-link {
  font-size: 0.85rem;
}

/* Mission cards run 4-up on desktop, so they need to read noticeably smaller
   than the other card types: shorter media, a smaller badge icon, tighter
   type and a slimmer action row so both buttons fit one narrow column. */
.mv-card--mission .mv-card__media {
  aspect-ratio: 16 / 9;
}
.mv-card--mission .mv-card__icon {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 1.1rem;
  font-size: 1.05rem;
}
.mv-card--mission .mv-card__body {
  padding: 0.9rem 1.1rem 0.4rem;
}
.mv-card--mission .mv-card__title {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}
.mv-card--mission .mv-card__text {
  font-size: 0.85rem;
  min-height: 3.8rem;
}
.mv-card--mission .mv-card__foot {
  padding: 0.5rem 0.9rem 0.8rem;
  flex-wrap: nowrap;
  gap: 0.35rem;
}
.mv-card--mission .mv-card__actions {
  flex-wrap: nowrap;
  gap: 0.3rem;
}
.mv-card--mission .mv-card__actions .btn {
  padding: 0.28rem 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mv-card--mission .mv-link {
  font-size: 0.7rem;
  gap: 0.25rem;
  white-space: nowrap;
}

/* ==========================================================================
   8. FEATURES, STATS, STEPS
   ========================================================================== */
.mv-feature {
  height: 100%;
  background: #fff;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-lg);
  padding: 1rem;
  box-shadow: var(--mv-shadow-sm);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.mv-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--mv-shadow);
}
.mv-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--mv-radius);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--mv-accent) 12%, transparent);
  color: var(--mv-accent);
  font-size: 1rem;
}
.mv-feature__title {
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
}
.mv-feature__text {
  font-size: 0.8rem;
  margin: 0;
  color: var(--mv-body);
}
.mv-section--dark .mv-feature,
.mv-section--navy .mv-feature {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.mv-section--dark .mv-feature__text,
.mv-section--navy .mv-feature__text {
  color: rgba(255, 255, 255, 0.72);
}
.mv-section--dark .mv-feature__icon,
.mv-section--navy .mv-feature__icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--mv-gold-light);
}

/* Stats
   -------------------------------------------------------------------------
   A band of figures is punctuation between two sections, not a section in its
   own right, so it gets its own shorter padding rather than .mv-section--sm:
   that section padding plus the cells' own padding stacked into a block taller
   than the numbers warranted at every width.

   The band colour is exposed as --mv-band-bg because .mv-stat has to paint it
   too. The rules between cells are the 1px grid gaps showing the .mv-stats
   background through, which only reads as hairlines while the cells above it
   are opaque — transparent cells let that 14% white cover the whole grid and
   turned the band into one pale slab. Themed pages override the variable. */
.mv-stats-band {
  --mv-band-bg: var(--mv-green-deep);
  background: var(--mv-band-bg);
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
}
.mv-stats {
  display: grid;
  /* 140px, not 170px: it keeps four figures on one row further down the range
     and pairs them two-up instead of one-up on a 320px screen. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.mv-stat {
  background: var(--mv-band-bg, transparent);
  padding: clamp(0.95rem, 1.7vw, 1.3rem) 0.8rem;
  text-align: center;
}
.mv-stat__icon {
  font-size: 1.05rem;
  color: var(--mv-gold-light);
  display: block;
  margin-bottom: 0.4rem;
}
.mv-stat__num {
  display: block;
  font-family: var(--mv-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1;
  color: #fff;
}
.mv-stat__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.mv-stats--light {
  background: var(--mv-line);
}
.mv-stats--light .mv-stat {
  background: #fff;
}
.mv-stats--light .mv-stat__num {
  color: var(--mv-green);
}
.mv-stats--light .mv-stat__label {
  color: var(--mv-muted);
}
.mv-stats--light .mv-stat__icon {
  color: var(--mv-gold);
}

/* Numbered process steps */
.mv-steps {
  counter-reset: mvstep;
  display: grid;
  gap: 1.5rem;
}
.mv-step {
  position: relative;
  padding-left: 4.2rem;
}
.mv-step::before {
  counter-increment: mvstep;
  content: counter(mvstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.2rem;
  font-family: var(--mv-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mv-gold);
  width: 52px;
  height: 52px;
  border: 2px solid var(--mv-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
}
.mv-step h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}
.mv-step p {
  font-size: 0.8rem;
  margin: 0;
}

/* Compact step list: a small numbered circle beside its text instead of a big
   absolute-positioned counter, so a 4-step list can share a row with other
   content instead of needing a full section's height to itself. */
.mv-steps--compact {
  gap: 1.1rem;
}
.mv-steps--compact .mv-step {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-left: 0;
}
.mv-steps--compact .mv-step::before {
  content: none;
}
.mv-step__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--mv-line);
  display: grid;
  place-items: center;
  font-family: var(--mv-font-display);
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--mv-gold);
  background: #fff;
}
.mv-steps--compact .mv-step h3 {
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}
.mv-steps--compact .mv-step p {
  font-size: 0.8rem;
  color: var(--mv-muted);
}

/* Ways-to-serve quick grid: icon + label only, no description — a dense
   reference list that sits comfortably beside other columns instead of a
   full row of description-carrying cards. */
.mv-ways-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.mv-ways-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: #fff;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mv-ink);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.mv-ways-item:hover {
  border-color: var(--mv-green);
  box-shadow: var(--mv-shadow-sm);
  color: var(--mv-ink);
}
.mv-ways-item__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--mv-radius);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mv-green) 10%, transparent);
  color: var(--mv-green);
  font-size: 1rem;
}

/* Split image + copy block */
.mv-split__media {
  position: relative;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  box-shadow: var(--mv-shadow);
}
.mv-split__media img {
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.mv-split__badge {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  display: inline-block;
  background: var(--mv-gold);
  color: #fff;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: var(--mv-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  box-shadow: var(--mv-shadow);
}

/* Partner logo grid */
.mv-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 108px;
  padding: 1.2rem 1rem;
  background: #fff;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  font-family: var(--mv-font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  color: var(--mv-sage);
  transition: 0.2s ease;
}
.mv-partner:hover {
  color: var(--mv-green);
  border-color: var(--mv-green);
  transform: translateY(-3px);
}

/* Testimonial */
.mv-quote {
  background: #fff;
  border: 1px solid var(--mv-line);
  border-left: 4px solid var(--mv-gold);
  border-radius: var(--mv-radius-lg);
  padding: 1.8rem;
}
.mv-quote__mark {
  font-size: 2rem;
  color: var(--mv-gold);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}
.mv-quote p {
  font-size: 1.02rem;
  color: var(--mv-ink);
}
.mv-quote footer {
  margin-top: 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-muted);
}

/* Accordion (FAQ) */
.mv-accordion .accordion-item {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.mv-accordion .accordion-button {
  font-family: var(--mv-font-head);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--mv-ink);
  background: #fff;
  padding: 1.1rem 1.3rem;
}
.mv-accordion .accordion-button:not(.collapsed) {
  background: var(--mv-cream);
  color: var(--mv-green);
  box-shadow: none;
}
.mv-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: var(--mv-gold);
}
.mv-accordion .accordion-body {
  padding: 0 1.3rem 1.3rem;
  font-size: 0.8rem;
  color: var(--mv-body);
}

/* ==========================================================================
   9. BANNERS & BREADCRUMBS
   ========================================================================== */
.mv-banner {
  position: relative;
  isolation: isolate;
  background: var(--mv-green-deep) var(--mv-banner-img) center/cover no-repeat;
  color: #fff;
  padding: clamp(3.4rem, 6vw, 5.2rem) 0 clamp(2.9rem, 4.9vw, 4.4rem);
}
.mv-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    96deg,
    rgba(20, 28, 16, 0.95),
    rgba(20, 28, 16, 0.72) 60%,
    rgba(20, 28, 16, 0.5)
  );
}
.mv-banner--navy .mv-banner__overlay {
  background: linear-gradient(
    96deg,
    rgba(10, 26, 40, 0.95),
    rgba(10, 26, 40, 0.7) 60%,
    rgba(10, 26, 40, 0.48)
  );
}
.mv-banner--gold .mv-banner__overlay {
  background: linear-gradient(
    96deg,
    rgba(48, 34, 10, 0.95),
    rgba(48, 34, 10, 0.72) 60%,
    rgba(48, 34, 10, 0.5)
  );
}
.mv-banner--red .mv-banner__overlay {
  background: linear-gradient(
    96deg,
    rgba(46, 12, 14, 0.95),
    rgba(46, 12, 14, 0.72) 60%,
    rgba(46, 12, 14, 0.5)
  );
}
.mv-banner__inner {
  position: relative;
}
.mv-banner__title {
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 0.7rem;
}
.mv-banner__lead {
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
  margin: 0;
}

.mv-crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mv-crumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}
.mv-crumbs li + li::before {
  content: "/";
  color: rgba(255, 255, 255, 0.35);
}
.mv-crumbs a {
  color: rgba(255, 255, 255, 0.82);
}
.mv-crumbs a:hover {
  color: var(--mv-gold-light);
}
.mv-crumbs [aria-current] {
  color: var(--mv-gold-light);
}

/* ==========================================================================
   9b. CAROUSEL
   A scroll-snap flex track: native swipe on touch, and a plain scrollable
   strip if JS never runs. --mv-cv is the number of cards in view; the inline
   --mv-cv-lg from mv_carousel() sets the desktop count.
   ========================================================================== */
.mv-carousel {
  --mv-cv: 1;
  --mv-cv-gap: 1rem;
  position: relative;
}
@media (min-width: 576px) {
  .mv-carousel {
    --mv-cv: 2;
  }
}
@media (min-width: 992px) {
  .mv-carousel {
    --mv-cv: var(--mv-cv-lg, 3);
    --mv-cv-gap: 1.5rem;
  }
}

.mv-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* negative margin + padding so card shadows are not clipped by overflow */
  margin: -0.6rem;
  padding: 0.6rem;
}
.mv-carousel__viewport::-webkit-scrollbar {
  display: none;
}
.mv-carousel__viewport:focus-visible {
  outline: 3px solid var(--mv-gold);
  outline-offset: 2px;
}

.mv-carousel__track {
  display: flex;
  gap: var(--mv-cv-gap);
  align-items: stretch;
}
.mv-carousel__item {
  flex: 0 0 calc((100% - (var(--mv-cv) - 1) * var(--mv-cv-gap)) / var(--mv-cv));
  scroll-snap-align: start;
}
.mv-carousel__item > * {
  height: 100%;
}

.mv-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.8rem;
}
.mv-carousel__nav[hidden] {
  display: none;
}
.mv-carousel__btn {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  padding: 0;
  border: 2px solid var(--mv-line);
  background: #fff;
  color: var(--mv-green);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.mv-carousel__btn:hover,
.mv-carousel__btn:focus-visible {
  background: var(--mv-green);
  border-color: var(--mv-green);
  color: #fff;
}
.mv-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.mv-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mv-line);
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}
.mv-carousel__dot.is-active {
  width: 26px;
  border-radius: 999px;
  background: var(--mv-green);
}

@media (prefers-reduced-motion: reduce) {
  .mv-carousel__viewport {
    scroll-behavior: auto;
  }
}

/* Filter chips
   -------------------------------------------------------------------------
   A horizontally-scrolling row of pill toggles (e.g. story programme filters).
   Scrolls sideways instead of wrapping so the active state stays scannable
   as a single line even when the list of options is long. */
.mv-filter-bar {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -0.2rem 1.5rem;
  padding: 0.2rem;
}
.mv-filter-bar::-webkit-scrollbar {
  display: none;
}
.mv-filter-bar__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  width: max-content;
}
.mv-chip {
  flex: none;
  white-space: nowrap;
  font-family: var(--mv-font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--mv-line);
  background: #fff;
  color: var(--mv-body);
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.mv-chip:hover {
  border-color: var(--mv-green);
  color: var(--mv-green);
}
.mv-chip.is-active {
  background: var(--mv-green);
  border-color: var(--mv-green);
  color: #fff;
}

/* ==========================================================================
   10. CTA BANDS
   ========================================================================== */
/* Light tinted bands, not solid saturated blocks: enough of a colour shift to
   read as a distinct moment (and still map red=advocacy, green=closing, etc.)
   without adding another dark section to the page. Buttons carry the actual
   saturated colour, which is where a call-to-action should draw the eye. */
.mv-cta {
  padding: clamp(2.8rem, 5vw, 4.2rem) 0;
  color: var(--mv-ink);
  position: relative;
  overflow: hidden;
}
.mv-cta--red {
  background: color-mix(in srgb, var(--mv-red) 8%, var(--mv-cream));
}
.mv-cta--green {
  background: color-mix(in srgb, var(--mv-green) 8%, var(--mv-cream));
}
.mv-cta--navy {
  background: color-mix(in srgb, var(--mv-navy) 8%, var(--mv-cream));
}
.mv-cta--gold {
  background: color-mix(in srgb, var(--mv-gold) 10%, var(--mv-cream));
}
.mv-cta::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border: 40px solid rgba(28, 26, 26, 0.035);
  border-radius: 50%;
  pointer-events: none;
}
.mv-cta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.8rem;
}
.mv-cta__copy {
  max-width: 60ch;
}
.mv-cta__title {
  color: var(--mv-ink);
  margin-bottom: 0.5rem;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}
.mv-cta__lead {
  color: var(--mv-body);
  margin: 0;
}
.mv-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ==========================================================================
   11. FORMS & ENLISTMENT WIZARD
   ========================================================================== */
/* A field label is service text: it names the input and then gets out of the
   way. These were set in the display face, uppercased and tracked out at .08em
   — the same recipe as .mv-kicker — so every label read as a section eyebrow
   and shouted over the heading above the form. Body face at a small semibold
   puts them back in scale. The markup already writes them in sentence case
   ("First name", "Card number"), so dropping text-transform is all it takes. */
.form-label {
  font-family: var(--mv-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mv-charcoal);
  margin-bottom: 0.32rem;
}
.mv-req {
  color: var(--mv-red);
  font-weight: 400;
}

/* A couple of legends head a whole group of fields rather than naming one
   control ("Your details", "Payment"). They shared .form-label, so shrinking
   labels to service text left them with nothing to divide the form by. Keeping
   these in the display face is what gives the labels beneath something to be
   quieter than. */
.mv-fieldset-title {
  font-family: var(--mv-font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-charcoal);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mv-line);
}

/* Fields land at ~40px tall rather than ~48px: the old 0.72rem block padding
   was set against Bootstrap's 1.5 line-height, and the two compounded. */
.form-control,
.form-select {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-field);
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--mv-ink);
  background-color: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
/* The shorthand above would otherwise flatten Bootstrap's right-hand padding
   and run long option text underneath the chevron. */
.form-select {
  padding-right: 2rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mv-green);
  box-shadow: 0 0 0 0.2rem rgba(63, 82, 49, 0.14);
}
.form-control::placeholder {
  color: #a9a49c;
}

/* Anything joined to a field has to track its height, radius and 1px border,
   or the pair reads as two different components bolted together. .btn is 2px
   and much wider by default because it is normally standalone. */
.input-group {
  --bs-border-radius: var(--mv-radius-field);
}
.input-group-text {
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  border-color: var(--mv-line);
  background: var(--mv-cream);
  color: var(--mv-muted);
}
.input-group > .btn {
  --bs-btn-border-radius: var(--mv-radius-field);
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  border-width: 1px;
}

.form-text {
  font-size: 0.78rem;
  color: var(--mv-muted);
}
.form-check-input:checked {
  background-color: var(--mv-green);
  border-color: var(--mv-green);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(63, 82, 49, 0.18);
  border-color: var(--mv-green);
}
.form-check-label {
  font-size: 0.9rem;
}

/* iOS Safari zooms the viewport when a focused field's text is under 16px, and
   never zooms back out. Only the phone range needs the bump, and at this size
   it also keeps the tap target comfortable. */
@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .input-group-text {
    font-size: 1rem;
  }
}

.mv-formcard {
  background: #fff;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
}
.mv-demo-note {
  font-size: 0.84rem;
  color: var(--mv-muted);
  background: var(--mv-cream);
  border: 1px dashed var(--mv-line);
  border-radius: var(--mv-radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.5rem;
}
.mv-demo-note i {
  color: var(--mv-gold);
  margin-right: 0.3rem;
}

/* Selectable option tiles (Steps 1–3) */
/* Self-sizing tile grid for choice groups.
   Replaces fixed Bootstrap columns (col-6 col-md-3 …), which fix the column
   count per breakpoint and leave ragged rows whenever one label wraps to two
   lines. auto-fit picks the column count from the space available, and grid's
   default stretch alignment makes every tile in a row match the tallest.
   Tune the breakpoint-free column count per group with --mv-choice-min.
   The inner min() stops a tile wider than its container from overflowing. */
.mv-choice-grid {
  --mv-choice-min: 170px;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--mv-choice-min), 100%), 1fr)
  );
  gap: 0.5rem;
}

.mv-choice {
  /* A <label> is inline by default, so outside a grid it shrinks to its text
     and a set of tiles comes out ragged. Blockify it so the tile always fills
     whatever cell it is placed in. */
  display: block;
  position: relative;
  height: 100%;
}
.mv-choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
/* The tile is a control, not a card: it should read as one line of choice at a
   glance. It was carrying card-scale padding (1.35rem), a 2px border and a
   1.7rem icon, which stacked to ~130px of box around ~55px of content. The
   border is 1px now and the selected state re-thickens it with a ring instead,
   so choosing an option cannot reflow the grid. */
.mv-choice__box {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.28rem;
  padding: 0.8rem 0.75rem;
  background: #fff;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius-lg);
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.mv-choice__box i {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--mv-sage);
  transition: color 0.18s ease;
}
/* Uppercase display face is kept deliberately: these behave like buttons, and
   .btn sets its labels the same way. It is only the scale that comes down. */
.mv-choice__box b {
  font-family: var(--mv-font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mv-charcoal);
  line-height: 1.25;
}
.mv-choice__box small {
  font-size: 0.74rem;
  color: var(--mv-muted);
  line-height: 1.35;
}
.mv-choice input:hover + .mv-choice__box {
  border-color: var(--mv-green-light);
  transform: translateY(-2px);
  box-shadow: var(--mv-shadow-sm);
}
.mv-choice input:focus-visible + .mv-choice__box {
  outline: 3px solid var(--mv-gold);
  outline-offset: 2px;
}
.mv-choice input:checked + .mv-choice__box {
  border-color: var(--mv-green);
  background: color-mix(in srgb, var(--mv-green) 6%, #fff);
  box-shadow:
    inset 0 0 0 1px var(--mv-green),
    0 6px 16px -10px rgba(63, 82, 49, 0.55);
}
.mv-choice input:checked + .mv-choice__box i {
  color: var(--mv-green);
}
.mv-choice input:checked + .mv-choice__box::after {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  top: 0.3rem;
  right: 0.45rem;
  color: var(--mv-green);
  font-size: 0.8rem;
  line-height: 1;
}

/* Row tiles are a single line of text beside an icon, so they need no more
   height than that line. Padding is tightened further here because the label
   and its sub sit side-by-side with the icon rather than stacked under it. */
.mv-choice--row .mv-choice__box {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
}
.mv-choice--row .mv-choice__box i {
  font-size: 1.15rem;
  flex: none;
}
/* A shade smaller and tighter than the stacked variant. The row has an icon
   and the checkmark competing for the same line, and at the 3-up width the
   longest label ("Patient Rights Enforcement") wrapped to two lines and left
   its whole grid row taller than the one above it. */
.mv-choice--row .mv-choice__box b {
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}
.mv-choice--row .mv-choice__box > div {
  display: flex;
  flex-direction: column;
  /* Long labels must wrap inside the tile rather than push the checkmark. */
  min-width: 0;
  padding-right: 0.4rem;
}

/* Wizard progress */
.mv-wizard__progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 2.2rem;
  position: relative;
}
.mv-wizard__progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 3px;
  background: var(--mv-line);
  z-index: 0;
}
.mv-wizard__bar {
  position: absolute;
  left: 0;
  top: 19px;
  height: 3px;
  background: var(--mv-green);
  z-index: 1;
  width: 0;
  transition: width 0.35s ease;
}
.mv-wstep {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
}
.mv-wstep__dot {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mv-line);
  display: grid;
  place-items: center;
  font-family: var(--mv-font-display);
  font-size: 0.95rem;
  color: var(--mv-muted);
  transition: 0.25s ease;
}
.mv-wstep__label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-muted);
  display: block;
  line-height: 1.3;
}
.mv-wstep.is-active .mv-wstep__dot {
  border-color: var(--mv-green);
  color: var(--mv-green);
  box-shadow: 0 0 0 5px rgba(63, 82, 49, 0.12);
}
.mv-wstep.is-active .mv-wstep__label {
  color: var(--mv-green);
  font-weight: 600;
}
.mv-wstep.is-done .mv-wstep__dot {
  background: var(--mv-green);
  border-color: var(--mv-green);
  color: #fff;
}
.mv-wstep.is-done .mv-wstep__dot::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
}
.mv-wstep.is-done .mv-wstep__dot span {
  display: none;
}
@media (max-width: 575.98px) {
  .mv-wstep__label {
    display: none;
  }
  .mv-wizard__progress::before,
  .mv-wizard__bar {
    top: 19px;
  }
}

.mv-wizard__panel {
  display: none;
  animation: mvFade 0.3s ease both;
}
.mv-wizard__panel.is-active {
  display: block;
}
@keyframes mvFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mv-wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mv-line);
}
.mv-panel-head {
  margin-bottom: 1.5rem;
}
.mv-panel-head h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  margin-bottom: 0.4rem;
}
.mv-panel-head p {
  color: var(--mv-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Review list on the final step */
.mv-review {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mv-review li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--mv-line);
  font-size: 0.95rem;
}
.mv-review dt,
.mv-review b {
  font-family: var(--mv-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.8rem;
  color: var(--mv-muted);
}
.mv-review span {
  color: var(--mv-ink);
  text-align: right;
}

/* Mission Accepted */
.mv-accepted {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
}
.mv-accepted__seal {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0 auto 1.6rem;
  background: var(--mv-green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  box-shadow: 0 0 0 10px rgba(63, 82, 49, 0.12);
  animation: mvPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes mvPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* The block above is scaled for the full-width enlist wizard. Dropped into a
   ~480px auth card (forgot-password / reset-password) the 108px seal and the
   uppercase h2 swamp it, so scale the whole thing down about a third. The
   card already supplies its own padding — this only needs to space itself
   from the copy above. */
.mv-auth .mv-accepted {
  padding: 0.5rem 0 0;
}
.mv-auth .mv-accepted__seal {
  width: 66px;
  height: 66px;
  margin: 0 auto 1.1rem;
  font-size: 2rem;
  box-shadow: 0 0 0 6px rgba(63, 82, 49, 0.12);
}
.mv-auth .mv-accepted h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.mv-auth .mv-accepted p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Donation amount grid */
.mv-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}
.mv-amount {
  position: relative;
}
.mv-amount input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.mv-amount__box {
  /* A <span> defaults to inline, which ignores height and splits the border
       into fragments — block keeps each tier a single equal-height card. */
  display: block;
  border: 2px solid var(--mv-line);
  border-radius: var(--mv-radius-lg);
  padding: 1rem 0.8rem;
  text-align: center;
  background: #fff;
  height: 100%;
  transition: 0.18s ease;
}
.mv-amount__box b {
  display: block;
  font-family: var(--mv-font-display);
  font-size: 1.6rem;
  color: var(--mv-ink);
  line-height: 1;
}
.mv-amount__box small {
  display: block;
  font-size: 0.76rem;
  color: var(--mv-muted);
  margin-top: 0.45rem;
  line-height: 1.35;
}
.mv-amount input:hover + .mv-amount__box {
  border-color: var(--mv-gold-light);
}
.mv-amount input:checked + .mv-amount__box {
  border-color: var(--mv-gold);
  background: #fffaf0;
  box-shadow: 0 10px 26px -14px rgba(176, 125, 35, 0.8);
}
.mv-amount input:checked + .mv-amount__box b {
  color: var(--mv-gold);
}

/* Toggle pill (one-time / monthly) */
.mv-toggle {
  display: inline-flex;
  background: var(--mv-cream-2);
  border-radius: 999px;
  padding: 0.3rem;
  gap: 0.25rem;
}
.mv-toggle label {
  position: relative;
}
.mv-toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.mv-toggle span {
  display: block;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-family: var(--mv-font-display);
  font-size: 0.88rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mv-muted);
  transition: 0.2s ease;
}
.mv-toggle input:checked + span {
  background: var(--mv-green);
  color: #fff;
  box-shadow: var(--mv-shadow-sm);
}

/* Auth pages */
.mv-auth {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: var(--mv-cream);
}
.mv-auth__card {
  width: 100%;
  max-width: 480px;
}

/* The auth cards navigate almost entirely through text links now that the
   secondary outline buttons are gone. The global `a` rule strips underlines,
   which would leave colour as the only thing marking them interactive — not
   enough on its own, and invisible to anyone who cannot separate the sage
   green from the body grey. Weight makes them read as links at a glance, and
   the underline on hover/focus confirms it. :not(.btn) keeps the password
   toggle and any real buttons out of it. */
.mv-auth .mv-formcard a:not(.btn) {
  font-weight: 600;
}
.mv-auth .mv-formcard a:not(.btn):hover,
.mv-auth .mv-formcard a:not(.btn):focus-visible {
  text-decoration: underline;
}
.mv-auth__aside {
  background: linear-gradient(150deg, var(--mv-green-deep), var(--mv-green));
  color: #fff;
  border-radius: var(--mv-radius-lg);
  padding: 2.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The form card carries the page h1 as .h3, so on the tightened scale it fell
   below the marketing aside sitting next to it. Size the pair against each
   other rather than letting the global scale decide. */
.mv-auth .mv-formcard h1 {
  font-size: 1.45rem;
}
.mv-auth__aside h2 {
  color: #fff;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
}
.mv-auth__aside ul {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
}
.mv-auth__aside li {
  display: flex;
  gap: 0.7rem;
  padding: 0.45rem 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}
.mv-auth__aside i {
  color: var(--mv-gold-light);
  margin-top: 0.25rem;
}

.mv-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--mv-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 1.4rem 0;
}
.mv-divider::before,
.mv-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mv-line);
}

/* Alerts */
.mv-alert {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--mv-radius);
  padding: 0.95rem 3rem 0.95rem 1.1rem;
  font-size: 0.8rem;
}
.mv-alert i {
  font-size: 1.1rem;
  margin-top: 0.1rem;
}
.mv-alert--success {
  background: #f0f6ec;
  border-color: var(--mv-green);
  color: #2f4223;
}
.mv-alert--info {
  background: #eef4f9;
  border-color: var(--mv-navy);
  color: #17384f;
}
.mv-alert--warning {
  background: #fdf6e8;
  border-color: var(--mv-gold);
  color: #6b4c12;
}
.mv-alert--danger {
  background: #fbeeee;
  border-color: var(--mv-red);
  color: #6d2124;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
/* Newsletter — a column inside the footer rather than its own full-bleed band,
   so the foot of the page is a single dark zone. Fields are tinted translucent
   instead of solid white: three stacked white boxes would read as sheets of
   paper on the dark footer, and it leaves the Subscribe button as the only
   solid element in the column. */
.mv-footer__nl-lead {
  margin-bottom: 1rem;
}
.mv-footer__nl .form-control {
  background-color: #fff;
  border: 1px solid var(--mv-line);
  color: var(--mv-ink);
}
.mv-footer__nl .form-control::placeholder {
  color: var(--mv-muted);
}
.mv-footer__nl .form-control:focus {
  background-color: #fff;
  border-color: var(--mv-gold);
  box-shadow: 0 0 0 0.2rem rgba(176, 125, 35, 0.16);
  color: var(--mv-ink);
}
.mv-footer__nl-note {
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.8rem 0 0;
  color: var(--mv-muted);
}
.mv-footer__nl-note a {
  color: var(--mv-body);
  text-decoration: underline;
}

/* On submit the script swaps the form for .mv-accepted, which is sized for a
   full-width page. Compact it so it fits the footer column. */
.mv-footer .mv-accepted {
  text-align: left;
  padding: 0;
}
.mv-footer .mv-accepted__seal {
  width: 48px;
  height: 48px;
  margin: 0 0 0.9rem;
  font-size: 1.5rem;
  box-shadow: 0 0 0 6px rgba(63, 82, 49, 0.18);
}
.mv-footer .mv-accepted h2 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.mv-footer .mv-accepted p {
  font-size: 0.88rem;
  margin-left: 0;
}
.mv-footer .mv-accepted .mv-demo-note {
  font-size: 0.78rem;
}

.mv-footer {
  background: var(--mv-cream);
  border-top: 1px solid var(--mv-line);
  color: var(--mv-body);
  padding: clamp(3rem, 5vw, 4.5rem) 0 0;
  font-size: 0.93rem;
}
.mv-footer h3 {
  color: var(--mv-ink);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
  padding-bottom: 0.7rem;
  position: relative;
}
.mv-footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--mv-gold);
}
.mv-footer a {
  font-size: 0.8rem;
  color: var(--mv-body);
}
.mv-footer a:hover:not(.btn) {
  color: var(--mv-green);
}
.mv-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mv-footer__links li {
  margin-bottom: 0.55rem;
}
.mv-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}
.mv-footer__contact li {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}
.mv-footer__contact i {
  color: var(--mv-gold);
  margin-top: 0.25rem;
  flex: none;
}
.mv-footer__blurb {
  max-width: 34ch;
  font-size: 0.8rem;
  margin: 1.2rem 0 1.4rem;
}

.mv-social {
  display: flex;
  gap: 0.5rem;
}
.mv-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--mv-radius);
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--mv-line);
  color: var(--mv-charcoal);
  font-size: 1rem;
  transition: 0.2s ease;
}
.mv-social a:hover {
  background: var(--mv-gold);
  border-color: var(--mv-gold);
  color: #fff;
  transform: translateY(-3px);
}

.mv-footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.3rem 0;
  border-top: 1px solid var(--mv-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
}
.mv-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mv-totop {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 1032;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--mv-green);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: var(--mv-shadow);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s ease;
}
.mv-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mv-totop:hover {
  background: var(--mv-gold);
}
@media (min-width: 768px) {
  .mv-totop {
    bottom: 22px;
  }
}

/* ==========================================================================
   13. UTILITIES, MOTION & RESPONSIVE
   ========================================================================== */
.mv-bleed-top {
  margin-top: calc(var(--mv-section-y) * -1);
}
.mv-maxw-prose {
  max-width: 74ch;
}
.mv-rounded {
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}
.mv-shadow {
  box-shadow: var(--mv-shadow);
}
.mv-text-gold {
  color: var(--mv-gold) !important;
}
.mv-text-green {
  color: var(--mv-green) !important;
}
.mv-bg-cream {
  background: var(--mv-cream) !important;
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mv-card,
  .mv-feature,
  .mv-path,
  .btn {
    transition: none !important;
  }
  .mv-accepted__seal {
    animation: none;
  }
}

/* 404 / coming soon */
.mv-splash {
  min-height: 74vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--mv-green-deep);
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(3rem, 8vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
.mv-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px 400px at 50% 0%,
    rgba(176, 125, 35, 0.2),
    transparent 70%
  );
}
.mv-splash__inner {
  position: relative;
  max-width: 640px;
}

/* .mv-splash stays dark for 404 / coming-soon. Both it and .mv-footer are
   --mv-green-deep, so without a hairline they fuse into a single slab. */
.mv-splash + .mv-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Member landing page — a light section rather than the dark splash. It holds
   far more than a 404 does (a three-card row plus actions), so it needs the
   width the 640px splash never had.
   -------------------------------------------------------------------------- */
.mv-member__inner {
  max-width: 940px;
}
.mv-logo-img--member {
  height: 54px;
  margin-bottom: 1.6rem;
}
.mv-splash h1 {
  color: #fff;
}
.mv-splash__code {
  font-family: var(--mv-font-display);
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: 0.04em;
  margin-bottom: -0.4rem;
}
@media (max-width: 991px) {
  .mv-hero {
    min-height: 720px;
    background-position: 65% center;
  }

  .mv-hero__overlay {
    background: linear-gradient(
      90deg,
      rgba(15, 30, 13, 0.92),
      rgba(15, 30, 13, 0.65)
    );
  }

  .mv-hero__title {
    font-size: 3rem;
  }

  .mv-hero__meta {
    gap: 25px;
    flex-wrap: wrap;
  }

  .mv-hero__actions {
    flex-wrap: wrap;
  }
}
@media (max-width: 991.98px) {
  .mv-paths {
    margin-top: 2.5rem;
  }
  .mv-hero__meta {
    gap: 1.2rem 1.8rem;
  }
}
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }

  .mv-cta__actions {
    width: 100%;
  }
  .mv-cta__actions .btn {
    flex: 1 1 100%;
  }
  .mv-card__foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .mv-card__actions {
    width: 100%;
  }
  .mv-card__actions .btn {
    flex: 1;
  }
  .mv-step {
    padding-left: 3.6rem;
  }
  .mv-step::before {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
}

@media print {
  .mv-header,
  .mv-topbar,
  .mv-footer,
  .mv-actionbar,
  .mv-totop,
  .mv-cta {
    display: none !important;
  }
  body {
    padding-bottom: 0;
  }
}