/* GENERATED by tools/build_nvy.py from the Nvy theme skeleton, 2026-10-17T11:41:40Z. Do not edit. */
/* ════════════════════════════════════════════════════════════
   MVS — Atoms Bundle (generated)
   ────────────────────────────────────────────────────────────
   Auto-generated by mvs/_build/bundle-atoms.ps1
   DO NOT EDIT — edit the per-atom style.css then re-run the script.
   Generated: 2026-05-22 12:13:23
   ════════════════════════════════════════════════════════════ */

/* ── mvsTitle ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsTitle
 * CLASS: .mvsTitle
 *
 * Rendered as h1–h6 depending on opt.tag.
 * Type scale (clamp sizes, weights, line-heights) in _typography.css.
 *
 * VARIABLE CASCADE
 *   --mvs-title-color-o   Level 2 — module/organism context override
 *   --title-color         Level 3 — theme default (inherits from heading context)
 *   --hs-primary          Level 4 — brand fallback
 */

.mvsTitle {
  --color: var(--mvs-title-color-o, var(--title-color, var(--heading-color)));
  color: var(--color);
  margin-block: 0; /* Spacing set by parent, never by atom */
}


/* ── mvsPreTitle ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsPreTitle
 * CLASS: .mvsPreTitle
 *
 * Label above the heading. Uppercase, muted colour.
 * Colour context controlled via opt.class on the element.
 *
 * VARIABLE CASCADE
 *   --mvs-pretitle-color-o    Level 2 override
 *   --pre-title-color         Level 3 theme default
 */

.mvsPreTitle {
  --color:       var(--mvs-pretitle-color-o,      var(--pre-title-color,       inherit));
  --size:        var(--mvs-pretitle-size-o,        var(--pre-title-size,        0.75rem));
  --weight:      var(--mvs-pretitle-weight-o,      var(--pre-title-weight,      600));
  --line-height: var(--mvs-pretitle-line-height-o, var(--pre-title-line-height, 1.1));
  --transform:   var(--mvs-pretitle-transform-o,   var(--pre-title-transform,   uppercase));
  --tracking:    var(--mvs-pretitle-tracking-o,    var(--pre-title-tracking,    0.1em));

  color:            var(--color);
  font-size:        var(--size);
  font-weight:      var(--weight);
  line-height:      var(--line-height);
  text-transform:   var(--transform);
  letter-spacing:   var(--tracking);
  margin-block: 0;
}


/* ── mvsSubTitle ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsSubTitle
 * CLASS: .mvsSubTitle
 *
 * Supporting text beneath a heading.
 *
 * VARIABLE CASCADE
 *   --mvs-subtitle-color-o    Level 2 override
 *   --sub-title-color         Level 3 theme default
 */

.mvsSubTitle {
  --color:       var(--mvs-subtitle-color-o,      var(--sub-title-color,       inherit));
  --size:        var(--mvs-subtitle-size-o,        var(--sub-title-size,        1.125em));
  --weight:      var(--mvs-subtitle-weight-o,      var(--sub-title-weight,      400));
  --style:       var(--mvs-subtitle-style-o,       var(--sub-title-style,       italic));
  --opacity:     var(--mvs-subtitle-opacity-o,     var(--sub-title-opacity,     0.5));
  --line-height: var(--mvs-subtitle-line-height-o, var(--sub-title-line-height, 1.5));

  color:        var(--color);
  font-size:    var(--size);
  font-weight:  var(--weight);
  font-style:   var(--style);
  opacity:      var(--opacity);
  line-height:  var(--line-height);
  margin-block: 0;
}


/* ── mvsRichText ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsRichText
 * CLASS: .mvsRichText
 *
 * Body copy block. HubSpot richtext output.
 * Supports: p, ul, ol, a, strong, em, blockquote.
 *
 * VARIABLE CASCADE
 *   --mvs-richtext-color-o   Level 2 override
 *   --richtext-color         Level 3 theme default
 */

.mvsRichText {
  --color:  var(--mvs-richtext-color-o,  var(--richtext-color,  inherit));
  --size:   var(--mvs-richtext-size-o,   var(--richtext-size,   inherit));
  --weight: var(--mvs-richtext-weight-o, var(--richtext-weight, 400));

  color:       var(--color);
  font-size:   var(--size);
  font-weight: var(--weight);
  margin-block: 0;
}

/* Reset first/last child margins — spacing owned by parent */
.mvsRichText > *:first-child { margin-top: 0 !important; }
.mvsRichText > *:last-child  { margin-bottom: 0 !important; }


/* ── mvsButton ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsButton
 * ─────────────────────────────────────────────────────────
 * MACRO:  mvsButton(btn)
 * CLASS:  .mvsButton
 *
 * VARIABLE CASCADE (3 levels)
 *   --mvs-btn-[prop]       Level 1 — computed value used by element
 *   --mvs-btn-[prop]-o     Level 2 — context override (set by parent)
 *   --button-[prop]        Level 3 — theme default from portal/root
 */

.mvsButton,
.mvsDummyButton {
  /* Computed variables — override these at Level 2 for context-specific changes */
  --mvs-btn-padding:      var(--mvs-btn-padding-o,      var(--button-padding,       var(--atom-large) var(--molecule-small)));
  --mvs-btn-font-size:    var(--mvs-btn-font-size-o,    var(--button-font-size,     1rem));
  --mvs-btn-font-weight:  var(--mvs-btn-font-weight-o,  var(--button-font-weight,   600));
  --mvs-btn-line-height:  var(--mvs-btn-line-height-o,  var(--button-line-height,   1.2));
  --mvs-btn-radius:       var(--mvs-btn-radius-o,       var(--button-border-radius, var(--global-radius-xl)));
  --mvs-btn-transition:   var(--mvs-btn-transition-o,   var(--button-transition));

  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;

  padding: var(--mvs-btn-padding);
  font-size: var(--mvs-btn-font-size);
  font-weight: var(--mvs-btn-font-weight);
  font-family: var(--font-family-base);
  line-height: var(--mvs-btn-line-height);
  letter-spacing: normal;

  border: var(--button-border-width, 1px) solid transparent;
  border-radius: var(--mvs-btn-radius);

  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--mvs-btn-transition);
  box-sizing: border-box;
}

.mvsButton:hover { text-decoration: none; }

.mvsDummyButton,
.mvsButton--no-link { cursor: default; }

.mvsButton i,
.mvsDummyButton i {
  font-size: 0.875em;
  transition: transform var(--global-trans);
}

.mvsButton:hover i { transform: translateX(0.25em); }

/* Text-only — no padding, no background */
.mvsButton.button-text,
.mvsDummyButton.button-text {
  padding-inline: 0;
  padding-block: 0;
}


/* ── Colour variants ────────────────────────────────────── */

.mvsButton.button-primary.button-default,
.mvsButton.button-primary.button-default:visited {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: var(--button-border-width) solid var(--button-primary-border);
}
.mvsButton.button-primary.button-default:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text-hover);
  border-color: var(--button-primary-bg-hover);
}

.mvsButton.button-primary.button-hollow,
.mvsButton.button-primary.button-hollow:visited {
  background-color: transparent;
  color: var(--button-primary-bg);
  border: var(--button-hollow-border-width) solid var(--button-primary-border);
}
.mvsButton.button-primary.button-hollow:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text-hover);
  border-color: var(--button-primary-bg-hover);
}

.mvsButton.button-primary.button-text,
.mvsButton.button-primary.button-text:visited {
  background-color: transparent;
  color: var(--button-primary-bg);
  border: var(--button-border-width) solid transparent;
}
.mvsButton.button-primary.button-text:hover:not(:disabled):not(.mvsButton--no-link) {
  color: var(--button-primary-bg-hover);
}


.mvsButton.button-secondary.button-default,
.mvsButton.button-secondary.button-default:visited {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: var(--button-border-width) solid var(--button-secondary-border);
}
.mvsButton.button-secondary.button-default:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text-hover);
  border-color: var(--button-secondary-bg-hover);
}

.mvsButton.button-secondary.button-hollow,
.mvsButton.button-secondary.button-hollow:visited {
  background-color: transparent;
  color: var(--button-secondary-bg);
  border: var(--button-hollow-border-width) solid var(--button-secondary-border);
}
.mvsButton.button-secondary.button-hollow:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-secondary-bg-hover);
  color: var(--button-secondary-text-hover);
  border-color: var(--button-secondary-bg-hover);
}

.mvsButton.button-secondary.button-text,
.mvsButton.button-secondary.button-text:visited {
  background-color: transparent;
  color: var(--button-secondary-bg);
  padding-inline: 0;
}
.mvsButton.button-secondary.button-text:hover:not(:disabled):not(.mvsButton--no-link) {
  color: var(--button-secondary-bg-hover);
}


.mvsButton.button-tertiary.button-default,
.mvsButton.button-tertiary.button-default:visited {
  background-color: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
  border: var(--button-border-width) solid var(--button-tertiary-border);
}
.mvsButton.button-tertiary.button-default:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-text-hover);
  border-color: var(--button-tertiary-bg-hover);
}

.mvsButton.button-tertiary.button-hollow,
.mvsButton.button-tertiary.button-hollow:visited {
  background-color: transparent;
  color: var(--button-tertiary-bg);
  border: var(--button-hollow-border-width) solid var(--button-tertiary-border);
}
.mvsButton.button-tertiary.button-hollow:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-text-hover);
  border-color: var(--button-tertiary-bg-hover);
}

.mvsButton.button-tertiary.button-text,
.mvsButton.button-tertiary.button-text:visited {
  background-color: transparent;
  color: var(--button-tertiary-bg);
  padding-inline: 0;
}
.mvsButton.button-tertiary.button-text:hover:not(:disabled):not(.mvsButton--no-link) {
  color: var(--button-tertiary-bg-hover);
}


.mvsButton.button-light.button-default,
.mvsButton.button-light.button-default:visited {
  background-color: var(--button-light-bg);
  color: var(--button-light-text);
  border: var(--button-border-width) solid var(--button-light-border);
}
.mvsButton.button-light.button-default:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-light-bg-hover);
  color: var(--button-light-text-hover);
  border-color: var(--button-light-bg-hover);
}

.mvsButton.button-light.button-hollow,
.mvsButton.button-light.button-hollow:visited {
  background-color: transparent;
  color: var(--button-light-bg);
  border: var(--button-hollow-border-width) solid var(--button-light-border);
}
.mvsButton.button-light.button-hollow:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-light-bg-hover);
  color: var(--button-light-text-hover);
  border-color: var(--button-light-bg-hover);
}

.mvsButton.button-light.button-text,
.mvsButton.button-light.button-text:visited {
  background-color: transparent;
  color: var(--button-light-bg);
  padding-inline: 0;
}
.mvsButton.button-light.button-text:hover:not(:disabled):not(.mvsButton--no-link) {
  color: var(--button-light-bg-hover);
}


.mvsButton.button-dark.button-default,
.mvsButton.button-dark.button-default:visited {
  background-color: var(--button-dark-bg);
  color: var(--button-dark-text);
  border: var(--button-border-width) solid transparent;
}
.mvsButton.button-dark.button-default:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-dark-bg-hover);
  color: var(--button-dark-text-hover);
}

.mvsButton.button-dark.button-hollow,
.mvsButton.button-dark.button-hollow:visited {
  background-color: transparent;
  color: var(--button-dark-bg);
  border: var(--button-hollow-border-width) solid var(--button-dark-border);
}
.mvsButton.button-dark.button-hollow:hover:not(:disabled):not(.mvsButton--no-link) {
  background-color: var(--button-dark-bg-hover);
  color: var(--button-dark-text-hover);
  border-color: var(--button-dark-bg-hover);
}

.mvsButton.button-dark.button-text,
.mvsButton.button-dark.button-text:visited {
  background-color: transparent;
  color: var(--button-dark-bg);
  border: var(--button-border-width) solid transparent;
  padding-inline: 0;
}


/* ── Size modifiers ─────────────────────────────────────── */
/*    Changing font-size scales em padding, radius, icon     */

.mvsButton--sm { font-size: 0.875rem; }
.mvsButton--lg { font-size: 1.125rem; }


/* ── Button group ────────────────────────────────────────── */

.mvsButton__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--text-align, left);
  gap: var(--mvsButton__group-gap, 0.75rem);
}

@container stage (width < 1024px) {
  .mvsButton__group {
    justify-content: var(--text-align-md, var(--text-align, left));
  }
}

@container stage (width < 640px) {
  .mvsButton__group {
    justify-content: var(--text-align-sm, var(--text-align-md, var(--text-align, left)));
  }
}

.mvsButton__group--gap-sm  { --mvsButton__group-gap: 0.5rem; }
.mvsButton__group--gap-lg  { --mvsButton__group-gap: 1.25rem; }
.mvsButton__group--stack   { flex-direction: column; align-items: flex-start; }


/* ── Disabled state ─────────────────────────────────────── */
.mvsButton:disabled {
  opacity: var(--button-disabled-opacity);
  cursor: not-allowed;
  background: var(--button-disabled-background);
  border-color: var(--button-disabled-background);
  color: var(--button-disabled-text);
}


/* ── mvsImage ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsImage
 * CLASS: .mvsImage
 *
 * VARIABLE CASCADE
 *   --mvs-image-radius-o       Level 2 override
 *   --global-image-radius      Level 3 theme default (32px)
 *
 * Default radius: TL:0  TR:var(--global-image-radius)
 *                 BL:var(--global-image-radius)  BR:0
 * This diagonal pattern is the MVS brand signature.
 * Override --global-image-radius per client in their _override.css.
 */

/* Native ratio — overrides forced aspect-ratio */
.mvsImage--native {
  aspect-ratio: auto;
  height: auto;
}

.mvsImage {
  --radius: var(--mvs-image-radius-o, var(--global-image-radius, var(--global-radius-lg)));

  border-radius: var(--mvs-corner-accent, 0) var(--radius) var(--mvs-corner-accent, 0) var(--radius);
  width: 100%;
  display: block;
  height: auto;
  overflow: clip;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* ── mvsSlider ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsSlider
 * CLASS: .mvsSlider
 *
 * Two transition modes:
 *   Default            — slide-level crossfade (images, single-content slides)
 *   .mvsSlider--cards  — per-child stagger cascade (slides with multiple card children)
 *
 * JS reads --mvs-slider-trans to know when to clean up classes.
 * Set on the element: default 0.5, cards mode 1.6.
 */

.mvsSlider {
  --radius: var(--mvs-image-radius-o, var(--global-image-radius, var(--global-radius-lg)));
  --slider-color: var(--mvs-controls-color-o, var(--mvs-title-color-o, var(--title-color, var(--heading-color))));
  --mvs-slider-trans: 0.5;

  position: relative;
  width: 100%;
  overflow: clip;
  border-radius: var(--mvs-corner-accent, 0) var(--radius) var(--mvs-corner-accent, 0) var(--radius);
}

.mvsSlider--cards {
  --mvs-slider-trans: 1.6;
}

.mvsSlider__track {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.mvsSlider__slide {
  position: relative;
}

.mvsSlider__track .mvsSlider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
}

.mvsSlider__track .mvsSlider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}


/* ── Default: dissolve — new fades in OVER the old ────────── */
/*    Entering slide is z-index 2 and animates opacity 0 → 1. */
/*    Leaving slide stays fully opaque underneath as a back-  */
/*    drop, so there's no flash of empty space behind the     */
/*    fading-in image.                                        */

@keyframes mvsSlide-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mvsSlider__slide.is-entering {
  animation: mvsSlide-in 0.5s ease both;
  z-index: 2;
  pointer-events: none;
}

.mvsSlider__slide.is-leaving {
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}


/* ── Cards mode: per-child stagger ───────────────────────── */
/*    Override slide-level animation; children do the work.   */

@keyframes mvsCard-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(25%); }
}

@keyframes mvsCard-in {
  from { opacity: 0; transform: translateY(-25%); }
  to   { opacity: 1; transform: translateY(0); }
}

.mvsSlider--cards .mvsSlider__slide.is-leaving,
.mvsSlider--cards .mvsSlider__slide.is-entering {
  animation: none;
  opacity: 1;
}

.mvsSlider--cards .mvsSlider__slide.is-leaving > * {
  animation: mvsCard-out 0.5s ease both;
}

.mvsSlider--cards .mvsSlider__slide.is-entering > * {
  animation: mvsCard-in 0.5s ease both;
}

/* Leaving stagger */
.mvsSlider--cards .mvsSlider__slide.is-leaving > *:nth-child(1) { animation-delay: 0s; }
.mvsSlider--cards .mvsSlider__slide.is-leaving > *:nth-child(2) { animation-delay: 0.12s; }
.mvsSlider--cards .mvsSlider__slide.is-leaving > *:nth-child(3) { animation-delay: 0.24s; }
.mvsSlider--cards .mvsSlider__slide.is-leaving > *:nth-child(4) { animation-delay: 0.36s; }
.mvsSlider--cards .mvsSlider__slide.is-leaving > *:nth-child(5) { animation-delay: 0.48s; }
.mvsSlider--cards .mvsSlider__slide.is-leaving > *:nth-child(6) { animation-delay: 0.60s; }

/* Entering stagger — offset so old cards are partially gone before new ones drop in */
.mvsSlider--cards .mvsSlider__slide.is-entering > *:nth-child(1) { animation-delay: 0.4s; }
.mvsSlider--cards .mvsSlider__slide.is-entering > *:nth-child(2) { animation-delay: 0.52s; }
.mvsSlider--cards .mvsSlider__slide.is-entering > *:nth-child(3) { animation-delay: 0.64s; }
.mvsSlider--cards .mvsSlider__slide.is-entering > *:nth-child(4) { animation-delay: 0.76s; }
.mvsSlider--cards .mvsSlider__slide.is-entering > *:nth-child(5) { animation-delay: 0.88s; }
.mvsSlider--cards .mvsSlider__slide.is-entering > *:nth-child(6) { animation-delay: 1.00s; }


/* ── Caption ─────────────────────────────────────────────── */

.mvsSlider__caption {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8em;
  padding: 0.3em 0.75em;
  border-radius: var(--global-radius-sm, 0.25rem);
  margin: 0;
  max-width: calc(100% - 1.5rem);
}


/* ── Controls row — prev | dots | next ───────────────────── */

.mvsSlider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--molecule-tiny);
}

.mvsSlider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--mvs-btn-radius);
  border: var(--button-border-width) solid var(--slider-color);
  background: transparent;
  color: var(--slider-color);
  cursor: pointer;
  transition: background var(--global-trans), color var(--global-trans), border-color var(--global-trans);
}

.mvsSlider__btn:hover {
  border-color: var(--hs-secondary);
  color: var(--hs-secondary);
}


/* ── Dots ────────────────────────────────────────────────── */

.mvsSlider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 20%;
}

.mvsSlider__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--slider-color);
  opacity: 0.25;
  cursor: pointer;
  transition: opacity var(--global-trans), transform var(--global-trans);
}

.mvsSlider__dot.is-active {
  opacity: 1;
  transform: scale(1.3);
}


/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mvsSlider__slide.is-entering,
  .mvsSlider--cards .mvsSlider__slide.is-leaving > *,
  .mvsSlider--cards .mvsSlider__slide.is-entering > * {
    animation: none;
  }
}


/* ── mvsVideo ─────────────────────────────────────────── */
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


.mvsVideo {
	border-radius: 100vw;
	width: 80px;
	height: 80px;
	display: grid;
}

/* ── mvsPlayButton ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsPlayButton
 * CLASS: .mvsPlayButton
 *
 * Size driven by font-size — width is 1.5em.
 * Default: ~42px. Med: ~62px.
 *
 * VARIABLE CASCADE
 *   --mvs-play-bg-o     Level 2 override
 *   --hs-primary--80pc  Level 3 theme default
 */

.mvsPlayButton {
  --bg:    var(--mvs-play-bg-o,    var(--hs-primary--80pc));
  --bg-hv: var(--mvs-play-bg-hv-o, var(--hs-primary));
  --color: var(--mvs-play-color-o, var(--hs-white));

  display: grid;
  place-items: center;
  width: 1.5em;
  aspect-ratio: 1 / 1;
  font-size: 3em; /* default size driver */
  border-radius: 100%;
  background-color: var(--bg);
  color: var(--color);
  cursor: pointer;
  transition: background-color var(--global-trans);
  border: none;
}

.mvsPlayButton i { padding-left: 6%; }

.mvsPlayButton:hover {
  background-color: var(--bg-hv);
  text-decoration: none;
  color: var(--color);
}

.mvsPlayButton--med { font-size: 4em; }


/* ── mvsIcon ─────────────────────────────────────────── */
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


.mvsIcon {
  --icon-stroke: var(--icon-color-o, white);
  --icon-fill: var(--icon-color-o, white);
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	display: grid;
	grid-template:
  [full-start] var(--atom-large) [icon-start] auto [icon-end] var(--atom-large) [full-end] /
  [full-start] var(--atom-large) [icon-start] auto [icon-end] var(--atom-large) [full-end];
}

.mvsIcon svg {
	display: block;
	aspect-ratio: 1/1;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 10;
	grid-area: icon;
}


.mvsIcon:after {
	content: '';
	display: block;
	grid-area: full;
	background: var(--title-color-o, var(--hs-primary));
	opacity: 0.2;
	border-radius: var(--global-radius-lg, 1.5em) var(--mvs-corner-accent, 0) var(--global-radius-lg, 1.5em) var(--global-radius-lg, 1.5em);
}

/* ── mvsPill ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsPill
 * CLASS: .mvs-pill
 *
 * Solid/outline label in primary, secondary, or tertiary colour.
 *
 * VARIABLE CASCADE
 *   --mvs-pill-radius-o    Level 2 override
 *   --global-radius-md     Level 3 default (16px chip)
 */

.mvs-pill {
  --radius: var(--mvs-pill-radius-o, var(--global-radius-md));

  display: block;
  width: 100%;
  text-align: center;
  border: 0 none;
  border-radius: var(--radius);
  padding: var(--atom-small) var(--atom-large);
  transition: background-color var(--global-trans), color var(--global-trans);
}

.mvs-pill.type-full    { border-radius: var(--global-radius-xl); }
.mvs-pill.type-inline  { width: max-content; display: inline-block; }

.mvs-pill.theme-primary   { color: var(--hs-primary--text-over);   background-color: var(--hs-primary); }
.mvs-pill.theme-secondary { color: var(--hs-secondary--text-over); background-color: var(--hs-secondary); }
.mvs-pill.theme-tertiary  { color: var(--hs-tertiary--text-over);  background-color: var(--hs-tertiary); }

.mvs-pill.style-outline                { border: 1px solid; background-color: transparent; }
.mvs-pill.style-outline.theme-primary  { color: var(--hs-primary); }
.mvs-pill.style-outline.theme-secondary{ color: var(--hs-secondary); }
.mvs-pill.style-outline.theme-tertiary { color: var(--hs-tertiary); }


/* ── mvsTag ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsTag
 * CLASS: .mvs-tag
 *
 * Taxonomy/category label.
 * Uses --global-image-radius for the diagonal brand radius.
 */

.mvs-tag,
a.mvs-tag {
  border-radius: var(--global-image-radius);
  display: block;
  font-size: var(--font-size-xxsm);
  padding-block: 0.5em;
  padding-inline: 1em;
  background: var(--hs-primary--light);
  color: var(--hs-primary--text-over);
  text-decoration: none;
  transition: background-color var(--global-trans);
}

a.mvs-tag:hover { background: var(--hs-primary); }


/* ── mvsListFancy ─────────────────────────────────────────── */
ul.fancy-list,
.fancy-list > ul{
	list-style: none;
	padding-left: 0;

	display: grid;
	gap: var(--molecule-small);
}

ul.fancy-list > li,
.fancy-list > ul > li{
	border-left: 3px solid var(--hs-primary);
	margin-left: 0;
	padding-left: var(--margin-base);
}


/* ── mvsPersonDetail ─────────────────────────────────────────── */
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


a.person-detail {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--atom-standard);
	color: inherit;
}

.person-detail__icon {
	
}


.person-detail__label {
	
}

/* ── mvsAccordion ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsAccordion
 * CLASS: .mvsAccordion
 *
 * Colour modifier:  mvsAccordion--[primary|secondary|tertiary|light|dark]
 * Style modifier:   mvsAccordion--[hollow|filled]
 * (No modifier = hollow look in currentColor — matches existing default)
 */

.mvsAccordion {
  width: 100%;
}

/* Filled — gap between items instead of borders */
.mvsAccordion--filled {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mvsAccordion--filled .mvsAccordion__item {
  border: none;
}


/* ── Item dividers (hollow / no style) ───────────────────── */

.mvsAccordion__item {
  border-bottom: var(--button-border-width, 1px) solid currentColor;
  border-top-right-radius: 0;
  transition: border-top-right-radius var(--global-trans), border-color var(--global-trans);
}

.mvsAccordion__item:first-child {
  border-top: var(--button-border-width, 1px) solid currentColor;
}

.mvsAccordion__item.is-open {
  border-top-right-radius: var(--global-radius-lg);
}

.mvsAccordion .mvsAccordion__item.is-open,
.mvsAccordion .mvsAccordion__item.is-closed:has(+ .is-open) {
  border-bottom-color: transparent;
}

.mvsAccordion .mvsAccordion__item.is-open:first-child {
  border-top-color: transparent;
}

.mvsAccordion__item.is-open:last-child > .mvsAccordion__body > .mvsAccordion__body-inner > .mvsAccordion__body-content {
  margin-bottom: 0;
}


/* ── Header (question button) ────────────────────────────── */

.mvsAccordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--atom-standard);
  width: 100%;
  padding: var(--molecule-tiny) var(--molecule-small);
  background: transparent;
  color: var(--mvs-title-color-o, inherit);
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 400;
  font-family: var(--font-family-base);
  border-top-right-radius: 0;
  transition: background var(--global-trans), color var(--global-trans), border-top-right-radius var(--global-trans);
}

.mvsAccordion__item.is-open > .mvsAccordion__header {
  border-top-right-radius: var(--global-radius-lg);
}

.mvsAccordion__header .fa-chevron-down {
  flex-shrink: 0;
  font-size: 0.875em;
  transition: transform var(--global-trans);
}

.mvsAccordion__item.is-open > .mvsAccordion__header .fa-chevron-down {
  transform: rotate(180deg);
}


/* ── Body (answer) — grid-row height animation ───────────── */

.mvsAccordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--global-trans);
}

.mvsAccordion__item.is-open > .mvsAccordion__body {
  grid-template-rows: 1fr;
}

.mvsAccordion__body-inner {
  overflow: hidden;
}

.mvsAccordion__body-content {
  color: var(--mvs-richtext-color-o, inherit);
  border-bottom-left-radius: 0;
  margin-bottom: 0;
  transition: border-bottom-left-radius var(--global-trans), margin-bottom var(--global-trans);
}

.mvsAccordion__item.is-open > .mvsAccordion__body > .mvsAccordion__body-inner > .mvsAccordion__body-content {
  border-bottom-left-radius: var(--global-radius-lg);
  margin-bottom: var(--molecule-standard);
}

/* Padding lives on the content wrapper — never on body-inner,
   as padding would add height even when the grid is at 0fr.  */

.mvsAccordion--hollow .mvsAccordion__body-content,
.mvsAccordion:not(.mvsAccordion--filled) .mvsAccordion__body-content {
  padding: var(--molecule-standard) var(--molecule-small);
}

.mvsAccordion--filled .mvsAccordion__body-content {
  padding: var(--molecule-standard) var(--molecule-small);
}

.mvsAccordion__body-content h1,
.mvsAccordion__body-content h2,
.mvsAccordion__body-content h3,
.mvsAccordion__body-content h4,
.mvsAccordion__body-content h5,
.mvsAccordion__body-content h6 {
  color: var(--mvs-title-color-o, var(--heading-color, var(--hs-primary)));
  font-family: var(--font-family-heading);
}

.mvsAccordion__body-content h1,
.mvsAccordion__body-content h2,
.mvsAccordion__body-content h3,
.mvsAccordion__body-content h4 {
  font-weight: 400;
}

.mvsAccordion__body-content > *:first-child {
  padding-top: 0;
  margin-top: 0;
}

.mvsAccordion__body-content > *:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

.mvsAccordion__body-content img {
  --radius: var(--mvs-image-radius-o, var(--global-image-radius, var(--global-radius-lg)));

  display: block;
  max-width: 600px !important;
  width: 100%;
  height: auto;
  border-radius: var(--mvs-corner-accent, 0) var(--radius) var(--mvs-corner-accent, 0) var(--radius);
  overflow: clip;
  margin-inline: auto;
  margin-block: var(--molecule-standard);
}


/* ══════════════════════════════════════════════════════════
   COLOUR + STYLE VARIANTS
   Mirrors the button system: --button-[colour]-[prop] vars.
   ══════════════════════════════════════════════════════════ */

/* ── Colour tokens — set on the variant class ────────────── */

.mvsAccordion--primary   { --ac-bg: var(--button-primary-bg);   --ac-bg-h: var(--button-primary-bg-hover);   --ac-txt: var(--button-primary-text);   --ac-txt-h: var(--button-primary-text-hover);   --ac-bdr: var(--button-primary-border); }
.mvsAccordion--secondary { --ac-bg: var(--button-secondary-bg); --ac-bg-h: var(--button-secondary-bg-hover); --ac-txt: var(--button-secondary-text); --ac-txt-h: var(--button-secondary-text-hover); --ac-bdr: var(--button-secondary-border); }
.mvsAccordion--tertiary  { --ac-bg: var(--button-tertiary-bg);  --ac-bg-h: var(--button-tertiary-bg-hover);  --ac-txt: var(--button-tertiary-text);  --ac-txt-h: var(--button-tertiary-text-hover);  --ac-bdr: var(--button-tertiary-border); }
.mvsAccordion--dark      { --ac-bg: var(--button-dark-bg);      --ac-bg-h: var(--button-dark-bg-hover);      --ac-txt: var(--button-dark-text);      --ac-txt-h: var(--button-dark-text-hover);      --ac-bdr: var(--button-dark-border, var(--button-dark-bg)); }

/* ── Shared rules — primary / secondary / tertiary / dark ── */

.mvsAccordion--primary .mvsAccordion__item,
.mvsAccordion--secondary .mvsAccordion__item,
.mvsAccordion--tertiary .mvsAccordion__item,
.mvsAccordion--dark .mvsAccordion__item {
  border-color: var(--ac-bdr);
}

.mvsAccordion--primary.mvsAccordion--hollow .mvsAccordion__header,
.mvsAccordion--secondary.mvsAccordion--hollow .mvsAccordion__header,
.mvsAccordion--tertiary.mvsAccordion--hollow .mvsAccordion__header,
.mvsAccordion--dark.mvsAccordion--hollow .mvsAccordion__header {
  color: var(--mvs-title-color-o, var(--ac-bg));
}

.mvsAccordion--primary.mvsAccordion--hollow .mvsAccordion__header:hover,
.mvsAccordion--primary.mvsAccordion--hollow .mvsAccordion__item.is-open > .mvsAccordion__header,
.mvsAccordion--secondary.mvsAccordion--hollow .mvsAccordion__header:hover,
.mvsAccordion--secondary.mvsAccordion--hollow .mvsAccordion__item.is-open > .mvsAccordion__header,
.mvsAccordion--tertiary.mvsAccordion--hollow .mvsAccordion__header:hover,
.mvsAccordion--tertiary.mvsAccordion--hollow .mvsAccordion__item.is-open > .mvsAccordion__header,
.mvsAccordion--dark.mvsAccordion--hollow .mvsAccordion__header:hover,
.mvsAccordion--dark.mvsAccordion--hollow .mvsAccordion__item.is-open > .mvsAccordion__header {
  background: var(--ac-bg);
  color: var(--ac-txt);
}

.mvsAccordion--primary.mvsAccordion--filled .mvsAccordion__header,
.mvsAccordion--secondary.mvsAccordion--filled .mvsAccordion__header,
.mvsAccordion--tertiary.mvsAccordion--filled .mvsAccordion__header,
.mvsAccordion--dark.mvsAccordion--filled .mvsAccordion__header {
  background: var(--ac-bg);
  color: var(--mvs-title-color-o, var(--ac-txt));
  padding-inline: var(--molecule-small);
}

.mvsAccordion--primary.mvsAccordion--filled .mvsAccordion__header:hover,
.mvsAccordion--primary.mvsAccordion--filled .mvsAccordion__item.is-open > .mvsAccordion__header,
.mvsAccordion--secondary.mvsAccordion--filled .mvsAccordion__header:hover,
.mvsAccordion--secondary.mvsAccordion--filled .mvsAccordion__item.is-open > .mvsAccordion__header,
.mvsAccordion--tertiary.mvsAccordion--filled .mvsAccordion__header:hover,
.mvsAccordion--tertiary.mvsAccordion--filled .mvsAccordion__item.is-open > .mvsAccordion__header,
.mvsAccordion--dark.mvsAccordion--filled .mvsAccordion__header:hover,
.mvsAccordion--dark.mvsAccordion--filled .mvsAccordion__item.is-open > .mvsAccordion__header {
  background: var(--ac-bg-h);
  color: var(--ac-txt-h);
}

.mvsAccordion--primary .mvsAccordion__body-content,
.mvsAccordion--secondary .mvsAccordion__body-content,
.mvsAccordion--tertiary .mvsAccordion__body-content,
.mvsAccordion--dark .mvsAccordion__body-content {
  background: color-mix(in srgb, var(--ac-bg) 8%, transparent);
}


/* ── Light — special case (white bg needs inverted logic) ── */

.mvsAccordion--light .mvsAccordion__item {
  border-color: var(--hs-tertiary--dark, #BBBCBC);
}

.mvsAccordion--light.mvsAccordion--hollow .mvsAccordion__header {
  color: var(--mvs-title-color-o, var(--button-light-text));
}
.mvsAccordion--light.mvsAccordion--hollow .mvsAccordion__header:hover,
.mvsAccordion--light.mvsAccordion--hollow .mvsAccordion__item.is-open > .mvsAccordion__header {
  background: rgba(255, 255, 255, 0.25);
}

.mvsAccordion--light.mvsAccordion--filled .mvsAccordion__header {
  background: var(--button-light-bg);
  color: var(--button-light-text);
  padding-inline: var(--molecule-small);
}
.mvsAccordion--light.mvsAccordion--filled .mvsAccordion__header:hover,
.mvsAccordion--light.mvsAccordion--filled .mvsAccordion__item.is-open > .mvsAccordion__header {
  background: var(--button-light-bg-hover);
  color: var(--button-light-text-hover);
}

.mvsAccordion--light .mvsAccordion__body-content {
  background: color-mix(in srgb, var(--hs-tertiary, #F0F0F2) 40%, transparent);
}


/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mvsAccordion__body,
  .mvsAccordion__item,
  .mvsAccordion__header,
  .mvsAccordion__header .fa-chevron-down,
  .mvsAccordion__body-content {
    transition: none;
  }
}


/* ── mvsModal ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsModal
 * CLASS: dialog.mvsModal
 *
 * Uses native <dialog> element.
 * showModal() / close() in mvsModal.js.
 * ::backdrop provided natively by the browser.
 */

dialog.mvsModal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--modal-radius, var(--mvs-corner-accent, 0) var(--global-radius-md) var(--global-radius-md) var(--global-radius-md));
  background: var(--modal-body-bg, #fff);
  color: var(--modal-body-color, inherit);
  width: min(90vw, 720px);
  max-height: 90dvh;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);

  /* Transition — opacity driven by .is-open */
  opacity: 0;
  transition: opacity 0.25s ease, display 0.25s ease allow-discrete;
}

dialog.mvsModal.is-open {
  opacity: 1;
}

/* Starting style for open transition */
@starting-style {
  dialog.mvsModal.is-open {
    opacity: 0;
  }
}

dialog.mvsModal::backdrop {
  background: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.75));
  backdrop-filter: blur(var(--modal-backdrop-blur, 15px));
  -webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 15px));
  opacity: 0;
  transition: opacity 0.25s ease, display 0.25s ease allow-discrete;
}

dialog.mvsModal.is-open::backdrop {
  opacity: 1;
}

@starting-style {
  dialog.mvsModal.is-open::backdrop {
    opacity: 0;
  }
}

/* ── Inner layout ────────────────────────────────────────── */

.mvsModal__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
}

.mvsModal__body {
  overflow-y: auto;
  padding: var(--molecule-large);
}

/* ── Close button ────────────────────────────────────────── */

.mvsModal__close {
  position: absolute;
  top: var(--atom-standard);
  right: var(--atom-standard);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--modal-close-bg, rgba(0, 0, 0, 0.15));
  color: var(--modal-close-label, #fff);
  cursor: pointer;
  transition: background var(--global-trans), color var(--global-trans);
}

.mvsModal__close:hover {
  background: var(--modal-close-bg-hover, rgba(0, 0, 0, 0.4));
  color: var(--modal-close-label-hover, #fff);
}

/* ── Lightbox variant ────────────────────────────────────── */
/* Breakout width, no padding, no radius — edge to edge      */

dialog.mvsModal--lightbox {
  width: min(95vw, var(--mvs-breakout-max-width, 1400px));
  max-height: 95dvh;
  background: #000;
  border-radius: 0;
  padding: 0;
}

.mvsModal--lightbox .mvsModal__inner {
  position: relative;
}

.mvsModal--lightbox .mvsModal__body {
  padding: 0;
}


/* ── mvsCard ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsCard
 * CLASS: .mvsCard
 *
 * Overlap layout: image and body share a row of --card-padding height,
 * so the body slides up over the bottom edge of the image.
 *
 * Grid rows:
 *   [image-start] auto [body-start gap-start] --card-padding [image-end gap-end] auto [body-end]
 *
 * Structure:
 *   .mvsCard
 *     .mvsCard__image        — full-bleed image (rows 1–2)
 *     .mvsCard__body         — padded content grid (rows 2–3), overlaps image
 *       .mvsCard__pre-title  — date / category label
 *       .mvsCard__title      — heading
 *       .mvsCard__divider    — decorative rule
 *       .mvsCard__text       — body copy
 *       .mvsCard__action     — button / link
 *
 * VARIABLE CASCADE
 *   --mvs-card-bg-o          card background
 *   --mvs-card-radius-o      corner radius
 *   --mvs-card-padding-o     body padding (also controls overlap depth)
 */

.mvsCard {
  --mvs-card-image-ratio-o: 6 / 5;
  --card-bg:      var(--mvs-card-bg-o,      var(--hs-white, #fff));
  --card-radius:  var(--mvs-card-radius-o,  var(--global-radius-md));
  --card-padding: var(--mvs-card-padding-o, clamp(1rem, 3vw, 2rem));

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:
    [image-start] auto
    [body-start gap-start] var(--card-padding)
    [image-end gap-end] 1fr
    [body-end];
  background: var(--card-bg);
  border-radius: var(--card-radius) var(--mvs-corner-accent, 0) var(--card-radius) var(--card-radius);
  overflow: clip;
  height: 100%;
}


/* ── Image — spans rows 1–2 ──────────────────────────────── */

.mvsCard__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mvs-card-image-ratio-o, 6 / 5) !important;
  object-fit: cover;
  border-radius: 0;
  grid-column: 1;
  grid-row: image-start / image-end;
  transition: transform var(--global-trans);
}


/* ── Image overlay — gradient fade from primary at bottom ── */

.mvsCard__image-overlay {
  display: block;
  grid-column: 1;
  grid-row: image-start / image-end;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--hs-primary) 40%, transparent) 0%,
    transparent 50%
  );
}


/* ── Body — spans rows 2–3, overlaps image ───────────────── */

.mvsCard__body {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  /* pre-title | title | divider | text | action */
  gap: var(--atom-standard);
  padding: var(--card-padding);
  align-content: start;
  grid-column: 1;
  grid-row: body-start / body-end;
  background: var(--card-bg);
  border-radius: var(--card-radius) var(--mvs-corner-accent, 0) var(--mvs-corner-accent, 0) var(--mvs-corner-accent, 0);
  position: relative;
  z-index: 1;
}


/* ── Pre-title ───────────────────────────────────────────── */

.mvsCard__pre-title {
  color: var(--mvs-pretitle-color-o, var(--pre-title-color, var(--hs-primary)));
  font-size: var(--pre-title-size, 0.75rem);
  font-weight: var(--pre-title-weight, 600);
  letter-spacing: var(--pre-title-tracking, 0.1em);
  text-transform: var(--pre-title-transform, uppercase);
  line-height: 1.1;
  margin: 0;
}


/* ── Title ───────────────────────────────────────────────── */

.mvsCard__title {
  color: var(--mvs-title-color-o, var(--title-color, var(--hs-primary)));
  font-size: var(--h3-font-size, 1.375rem);
  font-weight: 400;
  font-family: var(--font-family-heading);
  line-height: 1.25;
  margin: 0;
  transition: color var(--global-trans);
}


/* ── Divider — decorative spacer ─────────────────────────── */

.mvsCard__divider {
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--mvs-card-divider-color-o, var(--hs-primary));
  opacity: 0.3;
  margin-block: var(--atom-tiny);
  border: none;
  transition: background var(--global-trans), opacity var(--global-trans);
}


/* ── Body text ───────────────────────────────────────────── */

.mvsCard__text {
  color: var(--mvs-richtext-color-o, var(--richtext-color, inherit));
  font-size: var(--richtext-size, 1rem);
  font-weight: var(--richtext-weight, 400);
  line-height: 1.6;
  margin: 0;
  align-self: start;
}


/* ── Action ──────────────────────────────────────────────── */

.mvsCard__action {
  align-self: end;
  padding-top: var(--atom-standard);
}


/* ── Dummy button — card-owned CTA label ─────────────────── */
/*    Uses mvsDummyButton base styles. No own hover state.    */
/*    Colour transition driven by parent card hover below.    */

.button-dummy {
  color: var(--button-primary-bg, var(--hs-primary));
  pointer-events: none;
  transition: color var(--global-trans);
}


/* ── Linked card — hover effects ─────────────────────────── */

a.mvsCard,
.mvsCard--linked {
  text-decoration: none;
  box-shadow: var(--box-shadow, 0 4px 16px rgba(0, 0, 0, 0.10));
  transition: box-shadow var(--global-trans);
}

:is(a.mvsCard, .mvsCard--linked):hover                    { box-shadow: var(--box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.22)); }
:is(a.mvsCard, .mvsCard--linked):hover .mvsCard__image    { transform: scale(1.05); }
:is(a.mvsCard, .mvsCard--linked):hover .mvsCard__title    { color: var(--hs-secondary); }
:is(a.mvsCard, .mvsCard--linked):hover .mvsCard__divider  { background: var(--hs-secondary); opacity: 1; }
:is(a.mvsCard, .mvsCard--linked):hover .button-dummy      { color: var(--hs-secondary); }
:is(a.mvsCard, .mvsCard--linked):hover .button-dummy i    { transform: translateX(0.25em); }


/* ── mvsMiniCard ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsMiniCard
 * CLASS: .mvsMiniCard
 *
 * Text-only card with coloured / gradient background.
 * Three-layer grid: background spans all rows; title and
 * content sit in their own rows layered on top.
 *
 * Grid rows:
 *   [bg-start title-start] 1fr [title-end content-start] 1fr [content-end bg-end]
 *
 * Structure:
 *   .mvsMiniCard
 *     .mvsMiniCard__bg         — full-card colour / gradient layer
 *     .mvsMiniCard__title-area — top half: title centred vertically
 *       h3.mvsMiniCard__title
 *     .mvsMiniCard__content    — bottom half: sub-title + body
 *       .mvsMiniCard__sub-title
 *       .mvsMiniCard__text
 *
 * VARIABLE CASCADE
 *   --mini-bg            background value (color or gradient)
 *   --mini-bg-opacity    0–1 opacity for the bg layer
 *   --mini-title-c       title colour override
 *   --mini-subtitle-c    sub-title colour override
 *   --mini-body-c        body colour override
 *   --mvs-card-radius-o  corner radius (shared with mvsCard)
 *   --mvs-card-padding-o body padding  (shared with mvsCard)
 */

.mvsMiniCard {
  --card-radius:  var(--mvs-card-radius-o,  var(--global-radius-md));
  --card-padding: var(--mvs-card-padding-o, clamp(1rem, 3vw, 2rem));

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:
    [bg-start title-start] 1fr
    [title-end content-start] 1fr
    [content-end bg-end];
  border-radius: var(--mvs-corner-accent, 0) var(--card-radius) var(--mvs-corner-accent, 0) var(--card-radius);
  overflow: clip;
  height: 100%;
  min-height: 14rem;
}


/* ── Background layer — spans full card, opacity-isolated ─── */

.mvsMiniCard__bg {
  grid-column: 1;
  grid-row: bg-start / bg-end;
  background: var(--mini-bg, var(--card-bg, var(--hs-white, #fff)));
  opacity: var(--mini-bg-opacity, 1);
}


/* ── Title area — top half, centred ──────────────────────── */

.mvsMiniCard__title-area {
  grid-column: 1;
  grid-row: title-start / title-end;
  display: flex;
  align-items: center;
  padding: var(--card-padding) var(--card-padding) calc(var(--card-padding) / 2);
  position: relative;
  z-index: 1;
}

.mvsMiniCard__title {
  color: var(--mini-title-c, var(--mvs-title-color-o, var(--title-color, var(--hs-primary))));
  font-size: var(--h2-font-size, clamp(1.5rem, 3vw, 2rem));
  font-weight: 400;
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin: 0;
}


/* ── Content area — bottom half ──────────────────────────── */

.mvsMiniCard__content {
  grid-column: 1;
  grid-row: content-start / content-end;
  display: flex;
  flex-direction: column;
  gap: var(--atom-standard);
  padding: calc(var(--card-padding) / 2) var(--card-padding) var(--card-padding);
  position: relative;
  z-index: 1;
}

.mvsMiniCard__sub-title {
  color: var(--mini-subtitle-c, var(--mvs-pretitle-color-o, var(--pre-title-color, var(--hs-primary))));
  font-size: var(--pre-title-size, 0.75rem);
  font-weight: var(--pre-title-weight, 600);
  letter-spacing: var(--pre-title-tracking, 0.1em);
  text-transform: var(--pre-title-transform, uppercase);
  line-height: 1.1;
  margin: 0;
}

.mvsMiniCard__text {
  color: var(--mini-body-c, var(--mvs-richtext-color-o, var(--richtext-color, inherit)));
  font-size: 1rem;
  font-weight: var(--richtext-weight, 400);
  line-height: 1.5;
  margin: 0;
}


/* ── Hover ───────────────────────────────────────────────── */

a.mvsMiniCard,
.mvsMiniCard--linked {
  text-decoration: none;
  box-shadow: var(--box-shadow, 0 4px 16px rgba(0, 0, 0, 0.10));
  transition: box-shadow var(--global-trans), transform var(--global-trans);
  will-change: transform;
  cursor: pointer;
}

:is(a.mvsMiniCard, .mvsMiniCard--linked):hover {
  transform: scale(1.025);
  box-shadow: var(--box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.22));
}


/* ── mvsIconCard ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsIconCard
 * CLASS: .mvsIconCard
 *
 * Two-section card: coloured top (icon or stat), white bottom (label).
 *
 * Structure:
 *   .mvsIconCard
 *     .mvsIconCard__top    — coloured bg, centred content
 *       img.mvsIconCard__icon  — SVG / image
 *       span.mvsIconCard__stat — large number
 *     .mvsIconCard__label  — white bg, centred text
 *
 * VARIABLE CASCADE
 *   --icon-bg          top section background colour
 *   --icon-content-c   icon CSS filter colour / stat colour
 *   --icon-label-c     label text colour
 *   --mvs-card-radius-o  shared corner radius
 *   --mvs-card-padding-o shared padding
 */

.mvsIconCard {
  --card-radius:  var(--mvs-card-radius-o,  var(--global-radius-md));
  --card-padding: var(--mvs-card-padding-o, clamp(1rem, 3vw, 2rem));

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  border-radius: var(--mvs-corner-accent, 0) var(--card-radius) var(--mvs-corner-accent, 0) var(--card-radius);
  overflow: clip;
  height: 100%;
  width: 100%;
}


/* ── Top section ─────────────────────────────────────────── */

.mvsIconCard__top {
  background: var(--icon-bg, var(--hs-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--card-padding);
  min-height: 10rem;
}

.mvsIconCard__icon {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.mvsIconCard__stat {
  display: flex;
  align-items: baseline;
  color: var(--icon-content-c, #fff);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  font-family: var(--font-family-heading);
  line-height: 1;
}

.mvsIconCard__stat .mvsCounter__prefix,
.mvsIconCard__stat .mvsCounter__suffix {
  font-weight: 600;
}


/* ── Label section ───────────────────────────────────────── */

.mvsIconCard__label {
  background: var(--hs-white, #fff);
  padding: var(--atom-large) var(--card-padding);
  min-height: calc(2 * 1.3em + 2 * var(--atom-large));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--icon-label-c, var(--hs-primary));
  font-size: var(--h4-font-size, 1rem);
  font-weight: 600;
  line-height: 1.3;
}


/* ── Hover — linked cards only ───────────────────────────── */

a.mvsIconCard,
.mvsIconCard--linked {
  text-decoration: none;
  box-shadow: var(--box-shadow, 0 4px 16px rgba(0, 0, 0, 0.10));
  transition: box-shadow var(--global-trans);
}

a.mvsIconCard:hover,
.mvsIconCard--linked:hover {
  box-shadow: var(--box-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18));
}


/* ── mvsTeamCard ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsTeamCard
 * CLASS: .mvsTeamCard
 *
 * Team member card: circular photo, name, role/org,
 * contact details, optional bio CTA (modal or link).
 *
 * Structure:
 *   .mvsTeamCard
 *     .mvsTeamCard__photo-wrap
 *       img.mvsTeamCard__photo
 *     .mvsTeamCard__body
 *       .mvsTeamCard__name       — h3 or opts.name_tag
 *       .mvsTeamCard__role-line  — role + org
 *         .mvsTeamCard__role
 *         .mvsTeamCard__org
 *       .mvsTeamCard__actions    — row of up to 3 icon buttons (call, email, bio)
 *
 * VARIABLE CASCADE
 *   --mvsTeamCard-photo-size    diameter of circular photo (default 7rem)
 *   --mvs-card-bg-o             card background
 *   --mvs-card-radius-o         corner radius
 *   --mvs-card-padding-o        card padding
 */

.mvsTeamCard {
  --card-radius:  var(--mvs-card-radius-o,  var(--global-radius-md));
  --card-padding: var(--mvs-card-padding-o, clamp(1rem, 3vw, 2rem));
  --photo-size:   var(--mvsTeamCard-photo-size, 12rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--atom-largest);
  padding: var(--card-padding);
  background: var(--mvs-card-bg-o, var(--hs-white, #fff));
  border-radius: var(--card-radius) var(--mvs-corner-accent, 0) var(--card-radius) var(--card-radius);
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}


/* ── Photo ───────────────────────────────────────────────── */

.mvsTeamCard__photo-wrap {
  flex-shrink: 0;
  width: var(--photo-size);
  height: var(--photo-size);
  border-radius: 50% 50% 50% var(--mvs-corner-accent, 0);
  overflow: clip;
  background: var(--hs-grey-light, #e8e8e8);
}

.mvsTeamCard__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Placeholder silhouette when no photo */
.mvsTeamCard__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--hs-grey, #aaa);
  font-size: calc(var(--photo-size) * 0.45);
}


/* ── Body ────────────────────────────────────────────────── */

.mvsTeamCard__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--atom-tiny, 0.375rem);
  flex: 1;
  width: 100%;
}


/* ── Name ────────────────────────────────────────────────── */

.mvsTeamCard__name {
  color: var(--mvs-title-color-o, var(--title-color, var(--hs-primary)));
  font-size: var(--h3-font-size, 1.375rem);
  font-weight: 400;
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin: 0 0 var(--atom-tiny);
}


/* ── Role / Organisation ─────────────────────────────────── */

.mvsTeamCard__role-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  margin-bottom: var(--atom-standard);
}

.mvsTeamCard__role {
  color: var(--mvs-pretitle-color-o, var(--pre-title-color, var(--hs-primary)));
  font-size: var(--pre-title-size, 0.75rem);
  font-weight: var(--pre-title-weight, 600);
  letter-spacing: var(--pre-title-tracking, 0.1em);
  text-transform: var(--pre-title-transform, uppercase);
  line-height: 1.2;
}

.mvsTeamCard__org {
  color: var(--mvs-richtext-color-o, var(--richtext-color, inherit));
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.3;
}


/* ── Icon action row ─────────────────────────────────────── */

.mvsTeamCard__actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-top: var(--atom-standard);
}

/* Circular icon button — extends mvsButton classes, just forces circular shape */
.mvsTeamCard__action-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--mvs-btn-radius) !important;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.mvsTeamCard__action-icon:hover i {
  transform: none;
}

/* ── Tooltip ─────────────────────────────────────────────── */

.mvsTeamCard__action-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.85);
  background: var(--button-dark-bg, #333);
  color: var(--hs-white, #fff);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.3em 0.65em;
  border-radius: var(--global-radius-sm, 0.25rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--global-trans), transform var(--global-trans);
  z-index: 10;
}

.mvsTeamCard__action-icon[data-tooltip]:hover::after,
.mvsTeamCard__action-icon[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.mvsTeamCard__action-icon:hover {
  background-color: var(--button-secondary-bg-hover) !important;
  border-color: var(--button-secondary-bg-hover) !important;
  color: var(--button-secondary-text-hover) !important;
}


/* ── Modal header ────────────────────────────────────────── */

.mvsTeamCard__modal-header {
  display: flex;
  align-items: center;
  gap: var(--atom-large, 1.5rem);
  padding-bottom: var(--atom-large, 1.5rem);
  margin-bottom: var(--atom-large, 1.5rem);
  border-bottom: 1px solid var(--hs-grey-light, #e8e8e8);
}

.mvsTeamCard__modal-photo-wrap {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: clip;
  background: var(--hs-grey-light, #e8e8e8);
}

.mvsTeamCard__modal-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mvsTeamCard__modal-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.mvsTeamCard__modal-name {
  color: var(--mvs-title-color-o, var(--title-color, var(--hs-primary)));
  font-size: var(--h3-font-size, 1.375rem);
  font-weight: 400;
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin: 0;
}

.mvsTeamCard__modal-role {
  color: var(--mvs-pretitle-color-o, var(--pre-title-color, var(--hs-primary)));
  font-size: var(--pre-title-size, 0.75rem);
  font-weight: var(--pre-title-weight, 600);
  letter-spacing: var(--pre-title-tracking, 0.1em);
  text-transform: var(--pre-title-transform, uppercase);
  line-height: 1.2;
  margin: 0;
}

.mvsTeamCard__modal-org {
  color: var(--mvs-richtext-color-o, var(--richtext-color, inherit));
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

.mvsTeamCard__modal-bio {
  color: var(--mvs-richtext-color-o, var(--richtext-color, inherit));
  font-size: var(--richtext-size, 1rem);
  line-height: 1.6;
}

.mvsTeamCard__modal-bio > * + * {
  margin-top: 1em;
}


/* ── Hover — linked / interactive cards ─────────────────── */

a.mvsTeamCard,
.mvsTeamCard--linked {
  text-decoration: none;
  box-shadow: var(--box-shadow, 0 4px 16px rgba(0, 0, 0, 0.10));
  transition: box-shadow var(--global-trans);
}

a.mvsTeamCard:hover,
.mvsTeamCard--linked:hover {
  box-shadow: var(--box-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18));
}


/* ── mvsNumberCard ─────────────────────────────────────────── */
/*
 * MVS ATOM — mvsNumberCard
 * CLASS: .mvsNumberCard
 *
 * Numbered pillar card: badge number, title, body copy.
 * Background is an opacity-isolated layer so bg opacity
 * never bleeds onto text (same pattern as mvsMiniCard).
 *
 * Structure:
 *   .mvsNumberCard
 *     .mvsNumberCard__bg         — full-card colour / gradient layer
 *     .mvsNumberCard__badge      — number circle
 *     .mvsNumberCard__title      — h3 or opts.title_tag
 *     .mvsNumberCard__text       — body copy
 *
 * VARIABLE CASCADE
 *   --mini-bg            background value (color or gradient) — shared with mvsMiniCard
 *   --mini-bg-opacity    0–1 opacity for the bg layer        — shared with mvsMiniCard
 *   --mini-title-c       title colour override               — shared with mvsMiniCard
 *   --mini-body-c        body colour override                — shared with mvsMiniCard
 *   --num-bg             badge background colour
 *   --num-c              badge number colour
 *   --mvs-card-radius-o  corner radius
 *   --mvs-card-padding-o card padding
 */

.mvsNumberCard {
  --card-radius:  var(--mvs-card-radius-o,  var(--global-radius-md));
  --card-padding: var(--mvs-card-padding-o, clamp(1rem, 3vw, 2rem));

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--atom-standard, 0.75rem);
  padding: var(--card-padding);
  border-radius: var(--mvs-corner-accent, 0) var(--card-radius) var(--mvs-corner-accent, 0) var(--card-radius);
  overflow: clip;
  height: 100%;
  box-sizing: border-box;
}


/* ── Background layer — opacity-isolated ─────────────────── */

.mvsNumberCard__bg {
  position: absolute;
  inset: 0;
  background: var(--mini-bg, var(--card-bg, var(--hs-white, #fff)));
  opacity: var(--mini-bg-opacity, 1);
  z-index: 0;
}


/* ── Bring content above bg ──────────────────────────────── */

.mvsNumberCard__badge,
.mvsNumberCard__title,
.mvsNumberCard__text {
  position: relative;
  z-index: 1;
}


/* ── Number badge ────────────────────────────────────────── */

.mvsNumberCard__badge {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--num-bg, var(--hs-primary));
  color: var(--num-c, var(--hs-white, #fff));
  font-size: 1.125rem;
  font-weight: 700;
  font-family: var(--font-family-heading);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
}


/* ── Title ───────────────────────────────────────────────── */

.mvsNumberCard__title {
  color: var(--mini-title-c, var(--mvs-title-color-o, var(--title-color, var(--hs-primary))));
  font-size: var(--h3-font-size, 1.375rem);
  font-weight: 400;
  font-family: var(--font-family-heading);
  line-height: 1.2;
  margin: 0;
}


/* ── Body copy ───────────────────────────────────────────── */

.mvsNumberCard__text {
  color: var(--mini-body-c, var(--mvs-richtext-color-o, var(--richtext-color, inherit)));
  font-size: 1rem;
  font-weight: var(--richtext-weight, 400);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.mvsNumberCard__text > * + * {
  margin-top: 0.75em;
}


/* ── Hover — linked cards ────────────────────────────────── */

a.mvsNumberCard,
.mvsNumberCard--linked {
  text-decoration: none;
  box-shadow: var(--box-shadow, 0 4px 16px rgba(0, 0, 0, 0.10));
  transition: box-shadow var(--global-trans), transform var(--global-trans);
  will-change: transform;
  cursor: pointer;
}

:is(a.mvsNumberCard, .mvsNumberCard--linked):hover {
  transform: scale(1.025);
  box-shadow: var(--box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.22));
}