/* ==========================================================================
   Millport Villas — Residential Care Facility for the Elderly
   Custom stylesheet (loads after Bootstrap 5)
   ========================================================================== */

/* ---------- 1. Design tokens ----------
   Warm luxury palette: deep forest as the anchor, terracotta for warmth,
   brass for premium accents, warm stone grounds. The --mv-navy/--mv-sage/
   --mv-gold names are kept as aliases so all eight pages recolour at once
   without touching a single line of HTML.
   ------------------------------------------------------------------ */
:root {
  /* Core palette */
  --mv-forest: #2C3B33;
  --mv-forest-dark: #1E2A24;
  --mv-forest-light: #3F5449;
  --mv-terracotta: #B5653F;
  --mv-terracotta-dark: #96502F;
  --mv-terracotta-soft: #F2E1D8;
  --mv-brass: #C9A227;
  --mv-brass-dark: #A2801A;
  --mv-stone: #EFE7DA;
  --mv-stone-deep: #E3D7C5;

  /* Semantic aliases (legacy names → new palette) */
  --mv-navy: var(--mv-forest);
  --mv-navy-dark: var(--mv-forest-dark);
  --mv-navy-light: var(--mv-forest-light);
  --mv-sage: var(--mv-terracotta);
  --mv-sage-dark: var(--mv-terracotta-dark);
  --mv-sage-soft: var(--mv-terracotta-soft);
  --mv-gold: var(--mv-brass);
  --mv-gold-dark: var(--mv-brass-dark);
  --mv-cream: var(--mv-stone);
  --mv-cream-deep: var(--mv-stone-deep);

  --mv-charcoal: #2B2B2B;
  --mv-muted: #6B6155;
  --mv-border: #DED3C2;
  --mv-white: #FFFFFF;

  --mv-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --mv-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Type scale ----
     One ladder for the whole site. Every heading, eyebrow and body size below
     resolves to one of these steps, so a section title is the same size on
     every page whether it sits on stone, on navy or over a parallax image.
     Sizes are fluid (clamp) so the hierarchy holds from 360px to 1600px. */

  /* Display / headings */
  --mv-fs-hero:     clamp(2.4rem, 5.6vw, 4.4rem);   /* page hero h1 only      */
  --mv-fs-h1:       clamp(2.1rem, 5vw, 3.5rem);     /* inner-page h1          */
  --mv-fs-h2:       clamp(1.75rem, 3.6vw, 2.6rem);  /* every section title    */
  --mv-fs-h3:       clamp(1.25rem, 2.2vw, 1.6rem);  /* sub-section heading    */
  --mv-fs-h4:       1.2rem;                         /* card / item heading    */
  --mv-fs-h5:       1.05rem;                        /* compact card heading   */

  /* Body copy */
  --mv-fs-lead:     clamp(1.08rem, 1.3vw, 1.22rem); /* intros, standfirsts    */
  --mv-fs-body:     1.0625rem;                      /* default running text   */
  --mv-fs-sm:       .95rem;                         /* card copy, captions    */
  --mv-fs-xs:       .85rem;                         /* meta, fine print       */

  /* Uppercase eyebrows and labels */
  --mv-fs-eyebrow:  .78rem;
  --mv-ls-eyebrow:  .14em;

  /* Heading rhythm — shared so hierarchy reads the same everywhere */
  --mv-lh-head:     1.22;
  --mv-lh-tight:    1.15;   /* large display headings only */
  --mv-lh-body:     1.75;
  --mv-lh-snug:     1.6;    /* card copy */
  --mv-ls-head:     -.015em;

  /* Restrained radii: still soft enough to feel residential, tight enough to
     read as considered rather than playful. */
  --mv-radius: 10px;
  --mv-radius-lg: 16px;
  --mv-radius-xl: 22px;
  /* Buttons and other pill-shaped controls */
  --mv-radius-btn: 8px;

  /* Warm-tinted shadows: neutral grey shadows look cheap over stone */
  --mv-shadow-sm: 0 4px 16px rgba(44, 59, 51, .07);
  --mv-shadow: 0 14px 38px rgba(44, 59, 51, .11);
  --mv-shadow-lg: 0 28px 70px rgba(44, 59, 51, .18);
  --mv-transition: .35s cubic-bezier(.22, .61, .36, 1);
  --mv-header-h: 86px;

  /* Shared premium card system (contact tiles, feature cards, hero cards,
     sidebar boxes). A faint warm wash so cards read as a distinct surface on
     white sections as well as on stone/cream ones. */
  --mv-card-surface: linear-gradient(180deg, #fff 0%, #FDFBF7 100%);
  --mv-card-hairline: 1px solid rgba(201, 162, 39, .18);
  --mv-card-shadow: 0 1px 2px rgba(44, 59, 51, .04), 0 10px 30px rgba(44, 59, 51, .06);
  --mv-card-shadow-hover: 0 2px 4px rgba(44, 59, 51, .05), 0 22px 48px rgba(44, 59, 51, .11);
}

/* ---------- 2. Base ---------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mv-header-h) + 16px); }

body {
  font-family: var(--mv-font-body);
  /* Larger base size: primary audience includes seniors 60+ */
  font-size: var(--mv-fs-body);
  line-height: var(--mv-lh-body);
  color: var(--mv-charcoal);
  background-color: var(--mv-white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .mv-display {
  font-family: var(--mv-font-head);
  color: var(--mv-navy);
  font-weight: 600;
  line-height: var(--mv-lh-head);
  letter-spacing: var(--mv-ls-head);
}

h1 { font-size: var(--mv-fs-h1); line-height: var(--mv-lh-tight); }
h2 { font-size: var(--mv-fs-h2); }
h3 { font-size: var(--mv-fs-h3); }
h4 { font-size: var(--mv-fs-h4); }
h5 { font-size: var(--mv-fs-h5); }
h6 { font-size: var(--mv-fs-eyebrow); }

/* Bootstrap's .h1–.h6 helpers are used to downgrade headings for document
   outline reasons (e.g. an <h2> that must *look* like a card heading).
   Point them at the same ladder so they never diverge from the real tags. */
.h1 { font-size: var(--mv-fs-h1) !important; }
.h2 { font-size: var(--mv-fs-h2) !important; }
.h3 { font-size: var(--mv-fs-h3) !important; }
.h4 { font-size: var(--mv-fs-h4) !important; }
.h5 { font-size: var(--mv-fs-h5) !important; }
.h6 { font-size: var(--mv-fs-eyebrow) !important; }
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mv-font-head);
  font-weight: 600;
  line-height: var(--mv-lh-head);
  letter-spacing: var(--mv-ls-head);
  color: var(--mv-navy);
}

/* ---- Split-colour headings -------------------------------------------
   Every heading runs in the primary forest tone and closes on the brass
   accent: the opening clause stays primary, the final phrase is wrapped
   in <span class="hl"> and lifts to #C9A227, italic — the same treatment
   the hero h1 already uses, generalised so every section title on every
   page reads as one system.

   Inherits font-family, size, weight and letter-spacing from the heading
   it sits inside, so the type scale and rhythm are untouched.

   One accent tone site-wide (--mv-brass / #C9A227) on both light and dark
   grounds, so the highlight is identical everywhere it appears. */
.hl {
  color: var(--mv-brass);
  font-style: italic;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

p { margin-bottom: 1.1rem; }

a { color: var(--mv-navy); text-decoration: none; transition: color var(--mv-transition); }
a:hover, a:focus { color: var(--mv-gold-dark); }

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

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

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.accordion-button:focus-visible {
  outline: 3px solid var(--mv-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--mv-navy);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--mv-radius) var(--mv-radius);
  transition: top .25s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- 3. Utilities ---------- */
.bg-cream { background-color: var(--mv-cream) !important; }
.bg-cream-deep { background-color: var(--mv-cream-deep) !important; }
.bg-navy { background-color: var(--mv-navy) !important; }
.bg-sage-soft { background-color: var(--mv-sage-soft) !important; }

.text-navy { color: var(--mv-navy) !important; }
.text-gold { color: var(--mv-gold-dark) !important; }
.text-sage { color: var(--mv-sage-dark) !important; }
.text-muted-2 { color: var(--mv-muted) !important; }

.section { padding: clamp(3.5rem, 4vw, 6.5rem) 0;}
.section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.lead-2 { font-size: var(--mv-fs-lead); line-height: var(--mv-lh-body); color: var(--mv-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mv-gold-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--mv-gold);
  display: inline-block;
}
.eyebrow.eyebrow-center::before { display: none; }

/* Every section heading on the site — whatever the section's background or
   block class — resolves to this one rule. Variants below may change colour,
   measure or alignment, but never the size, weight or rhythm. */
.section-title,
.mv-trust__title,
.mv-values__title,
.mv-mission-banner__title,
.mv-parallax__title {
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h2);
  font-weight: 600;
  line-height: var(--mv-lh-tight);
  letter-spacing: var(--mv-ls-head);
  margin-bottom: 1rem;
}
.section-intro { max-width: 720px; font-size: var(--mv-fs-lead); line-height: var(--mv-lh-body); color: var(--mv-muted); }
.section-head-center { text-align: center; }
.section-head-center .section-intro { margin-inline: auto; }

.rule-gold { width: 64px; height: 3px; background: var(--mv-gold); border-radius: 3px; border: 0; opacity: 1; }

/* ---------- 4. Buttons ---------- */
.btn {
  font-family: var(--mv-font-body);
  font-weight: 600;
  border-radius: var(--mv-radius-btn);
  padding: .85rem 1.9rem;
  transition: all var(--mv-transition);
  border-width: 2px;
}
.btn-lg { padding: 1rem 2.3rem; font-size: 1.05rem; }

.btn-gold { background: var(--mv-gold); border-color: var(--mv-gold); color: #33270F; }
.btn-gold:hover, .btn-gold:focus {
  background: var(--mv-gold-dark);
  border-color: var(--mv-gold-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(201, 162, 39, .40);
}

.btn-navy { background: var(--mv-navy); border-color: var(--mv-navy); color: #fff; }
.btn-navy:hover, .btn-navy:focus {
  background: var(--mv-navy-dark);
  border-color: var(--mv-navy-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--mv-shadow);
}

.btn-outline-navy { border-color: var(--mv-navy); color: var(--mv-navy); background: transparent; }
.btn-outline-navy:hover, .btn-outline-navy:focus { background: var(--mv-navy); color: #fff; transform: translateY(-2px); }

.btn-outline-cream { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn-outline-cream:hover, .btn-outline-cream:focus { background: #fff; color: var(--mv-navy); border-color: #fff; }

.btn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--mv-navy);
}
.btn-link-arrow .arrow { transition: transform var(--mv-transition); }
.btn-link-arrow:hover .arrow { transform: translateX(5px); }

/* ---------- 5. Header ---------- */
.mv-topbar {
  background: var(--mv-navy);
  color: rgba(255, 255, 255, .85);
  font-size: var(--mv-fs-xs);
  padding: .5rem 0;
}
.mv-topbar a { color: rgba(255, 255, 255, .9); }
.mv-topbar a:hover { color: var(--mv-gold); }

.mv-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mv-border);
  transition: box-shadow var(--mv-transition), padding var(--mv-transition);
}
.mv-header.is-stuck { box-shadow: var(--mv-shadow-sm); }

.mv-navbar { padding-block: .85rem; transition: padding var(--mv-transition); }
.mv-header.is-stuck .mv-navbar { padding-block: .5rem; }

.mv-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  /* The mark must never be squeezed by neighbouring nav items. */
  flex: 0 0 auto;
  max-width: 100%;
}
/* Both marks are logo.png at 2098x749 (~2.8:1), driven from a single
   --mv-logo-h, with aspect-ratio deriving the width, so the complete emblem +
   wordmark is always laid out at its true proportions — never clipped, never
   stretched. */
.mv-brand__logo {
  display: block;
  height: var(--mv-logo-h, 55px);
  width: auto;
  aspect-ratio: 2098 / 749;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  image-rendering: -webkit-optimize-contrast;
  transition: height var(--mv-transition);
}
.mv-header.is-stuck .mv-brand__logo { --mv-logo-h: 64px; }
@media (max-width: 991.98px) {
  .mv-brand__logo,
  .mv-header.is-stuck .mv-brand__logo { --mv-logo-h: 40px; }
}
@media (max-width: 575.98px) {
  .mv-brand__logo,
  .mv-header.is-stuck .mv-brand__logo { --mv-logo-h: 34px; }
}

.mv-nav .nav-link {
  font-weight: 600;
  color: var(--mv-charcoal);
  padding: .6rem 1rem !important;
  position: relative;
}
.mv-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .3rem;
  height: 2px;
  background: var(--mv-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mv-transition);
}
.mv-nav .nav-link:hover::after,
.mv-nav .nav-link.active::after { transform: scaleX(1); }
.mv-nav .nav-link.active { color: var(--mv-navy); }

.navbar-toggler { border: 2px solid var(--mv-border); border-radius: 8px; padding: .45rem .7rem; }
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .mv-nav { padding-top: 1rem; border-top: 1px solid var(--mv-border); margin-top: .85rem; }
  .mv-nav .nav-link { padding: .75rem .25rem !important; }
  .mv-nav .nav-link::after { left: .25rem; right: auto; width: 26px; }
  .mv-header .navbar-collapse .btn { width: 100%; margin-top: .75rem; }
}

/* ---------- 6. Media placeholders ---------- */
.mv-media {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--mv-sage-soft), var(--mv-cream-deep));
  box-shadow: var(--mv-shadow);
}
.mv-media::before { content: ""; display: block; padding-top: 68%; }
.mv-media--square::before { padding-top: 100%; }
.mv-media--portrait::before { padding-top: 126%; }
.mv-media--wide::before { padding-top: 56.25%; }
.mv-media--tall::before { padding-top: 142%; }

.mv-media__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  padding: 1rem;
  color: var(--mv-navy);
  font-size: var(--mv-fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  opacity: .72;
}
.mv-media__label svg { width: 34px; height: 34px; opacity: .55; }
.mv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Image-layer parallax: the photograph is taller than its frame and bleeds
   top and bottom, so the JS transform can drift it inside the mask without
   ever exposing an edge. With no JS it simply sits centred and still. */
.mv-media--parallax img {
  top: -12%;
  bottom: auto;
  height: 124%;
  will-change: transform;
}
/* ---------- Mission & Philosophy — cinematic full-bleed parallax banner ----
   A single premium banner: the photograph runs edge to edge behind a warm
   forest scrim, the mission copy sits in a spacious editorial column, and the
   four philosophy points sit over the image as open icon-led columns — no
   cards, no boxes, nothing competing with the photograph. */
.mv-mission-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  color: #fff;
  background: var(--mv-forest-dark);
}

/* Over-tall media wrapper so the parallax shift never reveals an edge */
.mv-mission-banner__media {
  position: absolute;
  inset: -14% 0;
  z-index: -3;
  pointer-events: none;
}
.mv-mission-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
}

/* Elegant dark overlay: warm forest, deeper at the foot so the cards read */
.mv-mission-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(30, 42, 36, .82) 0%, rgba(30, 42, 36, .68) 42%, rgba(30, 42, 36, .88) 100%),
    linear-gradient(90deg, rgba(30, 42, 36, .55) 0%, rgba(30, 42, 36, .18) 60%);
}
/* A slow brass bloom keeps the darkness warm rather than grey */
.mv-mission-banner__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 16% 22%, rgba(201, 162, 39, .16) 0%, rgba(201, 162, 39, 0) 70%),
    radial-gradient(42% 38% at 88% 82%, rgba(181, 101, 63, .14) 0%, rgba(181, 101, 63, 0) 72%);
}

.mv-mission-banner__inner { position: relative; }
.mv-mission-banner__head {
  max-width: 95ch;
  margin: 0 0 clamp(2.75rem, 5vw, 4rem);
}
.eyebrow--light { color: var(--mv-brass); }

/* Single-line headline: the copy is 46 characters, so the size is driven by
   viewport width rather than a fixed ramp, and the title opts out of the head
   column's measure so it can run the full container width. `white-space:
   nowrap` holds the line together on the wide layouts; below the lg
   breakpoint it is released, since no readable size fits 46 characters on a
   phone. */
.mv-mission-banner__title {
  /* size/weight/rhythm inherited from the shared section-title rule */
  color: #fff;
  margin: clamp(.85rem, 1.6vw, 1.15rem) 0 clamp(1.35rem, 2.4vw, 1.9rem);
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .mv-mission-banner__title { white-space: normal; }
}
/* .mv-mission-banner__title::after {
  content: "";
  display: block;
  width: 78px; height: 1px;
  margin: clamp(1.4rem, 2.6vw, 1.9rem) 0 0;
  background: linear-gradient(90deg, var(--mv-brass), rgba(201, 162, 39, 0));
} */
.mv-mission-banner__lead {
  font-size: var(--mv-fs-lead);
  line-height: var(--mv-lh-body);
  color: rgba(255, 255, 255, .8);
  /* max-width: 48ch; */
  margin: 0 0 clamp(1.9rem, 3.2vw, 2.5rem);
}

/* Mission statement as a quiet pull-quote, not a card */
.mv-mission-banner__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--mv-font-head);
  font-style: italic;
  font-size: var(--mv-fs-h4);
  line-height: 1.6;
  letter-spacing: -.012em;
  color: rgba(255, 255, 255, .95);
  /* max-width: 44ch; */
}
.mv-mission-banner__mark {
  display: block;
  font-family: var(--mv-font-head);
  font-size: 3.2rem;
  line-height: .5;
  color: var(--mv-brass);
  opacity: .55;
  margin-bottom: -0.4rem;
}

/* Philosophy points — open icon-led columns, divided by brass hairlines.
   Deliberately unboxed: the photograph stays the surface, the text simply
   sits on it. */
.mv-philosophy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(201, 162, 39, .28);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}
.mv-philosophy__item {
  padding: 0 clamp(1.1rem, 2.2vw, 2rem);
  border-left: 1px solid rgba(255, 255, 255, .13);
}
.mv-philosophy__item:first-child { border-left: 0; padding-left: 0; }
.mv-philosophy__item:last-child { padding-right: 0; }

/* A quiet brass outline mark — no filled chips, nothing that reads as a badge */
.mv-philosophy__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: clamp(.95rem, 1.7vw, 1.3rem);
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, .45);
  color: var(--mv-brass);
  transition: border-color var(--mv-transition), color var(--mv-transition), transform var(--mv-transition);
}
.mv-philosophy__icon svg { width: 1.2rem; height: 1.2rem; }
.mv-philosophy__item:hover .mv-philosophy__icon {
  border-color: var(--mv-brass);
  transform: translateY(-3px);
}
.mv-philosophy h3 {
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h5);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 .5rem;
}
.mv-philosophy p {
  margin: 0;
  font-size: var(--mv-fs-sm);
  line-height: 1.68;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 991.98px) {
  .mv-philosophy { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 4vw, 2.75rem); }
  .mv-philosophy__item { padding-inline: clamp(1rem, 2.5vw, 1.75rem); }
  .mv-philosophy__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mv-philosophy__item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 575.98px) {
  .mv-philosophy { grid-template-columns: 1fr; row-gap: 2rem; }
  .mv-philosophy__item { border-left: 0; padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-media--parallax img { top: 0; height: 100%; transform: none !important; }
  .mv-mission-banner__media { inset: 0; }
  .mv-mission-banner__media img { transform: none !important; }
}

/* ---------- 7. Hero (cinematic full-bleed) ----------
   The exterior photograph carries the section; a forest scrim keeps the
   headline legible over the sky. Trust cards overlap the lower edge so the
   next section tucks under them.
   ------------------------------------------------------------------ */
.mv-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 13vw, 10rem) 0 0;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.mv-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  z-index: -2;
}
.mv-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(30, 42, 36, .90) 0%, rgba(30, 42, 36, .68) 38%,
                    rgba(30, 42, 36, .22) 66%, rgba(30, 42, 36, .04) 100%),
    linear-gradient(to top, rgba(30, 42, 36, .42), transparent 38%);
}

.mv-hero__inner { position: relative; z-index: 2; }
.mv-hero__content { max-width: 750px; padding-bottom: clamp(4rem, 9vw, 7rem); }

.mv-hero h1 {
  color: #fff;
  font-size: var(--mv-fs-hero);
  letter-spacing: -.02em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(20, 28, 24, .45);
}
.mv-hero h1 span,
.mv-hero h1 .hl { color: var(--mv-brass); font-style: italic; }

.mv-hero__lead {
  font-size: var(--mv-fs-lead);
  line-height: var(--mv-lh-body);
  color: rgba(255, 255, 255, .88);
  max-width: 750px;
  margin-top: 1.4rem;
}

.mv-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.mv-hero__call { margin: 1.8rem 0 0; color: rgba(255, 255, 255, .78); font-size: var(--mv-fs-sm); }
.mv-hero__call a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.45); }
.mv-hero__call a:hover { color: var(--mv-brass); border-color: var(--mv-brass); }

.mv-hero__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.mv-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  font-size: var(--mv-fs-xs); font-weight: 600;
  color: #fff;
}
.mv-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mv-brass); }

/* Floating trust cards */
.mv-hero__cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: calc(clamp(3rem, 7vw, 6rem) * -1);
  transform: translateY(42%);
}
/* Hero cards share the premium tile language of .mv-contact-tile, with a
   translucent backdrop so the hero image still reads behind them. */
.mv-hero-card {
  position: relative;
  height: 100%;
  padding: 2rem 1.75rem 1.9rem;
  border: 0;
  border-radius: var(--mv-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(44, 59, 51, .05), 0 18px 46px rgba(44, 59, 51, .14);
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--mv-card-hairline);
  pointer-events: none;
}
.mv-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(44, 59, 51, .06), 0 30px 64px rgba(44, 59, 51, .18);
}
.mv-hero-card__icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .45);
  color: var(--mv-gold-dark);
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  transition: background var(--mv-transition), color var(--mv-transition), border-color var(--mv-transition);
}
.mv-hero-card:hover .mv-hero-card__icon {
  background: var(--mv-navy);
  border-color: var(--mv-navy);
  color: var(--mv-gold);
}
.mv-hero-card__icon svg { width: 21px; height: 21px; }
.mv-hero-card h2 {
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mv-muted);
  margin: 0 0 .55rem;
}
.mv-hero-card p {
  margin: 0;
  font-size: var(--mv-fs-sm);
  line-height: 1.6;
  color: var(--mv-charcoal);
}

@media (max-width: 575.98px) {
  .mv-hero-card { padding: 1.6rem 1.35rem; }
}

@media (max-width: 991.98px) {
  .mv-hero__cards { grid-template-columns: 1fr; gap: 1rem; transform: translateY(6%); margin-bottom: 0; }
  .mv-hero { margin-bottom: clamp(2rem, 5vw, 3rem); }
  .mv-hero__content { padding-bottom: clamp(2.5rem, 7vw, 4rem); }
}
@media (max-width: 575.98px) {
  .mv-hero__actions .btn { width: 100%; }
}

/* ---------- 8. Page banner (interior pages) ---------- */
.mv-banner {
  position: relative;
  background:
    radial-gradient(1200px 400px at 15% 0%, rgba(201, 162, 39, .16), transparent 60%),
    linear-gradient(125deg, var(--mv-forest-dark) 0%, var(--mv-forest) 52%, var(--mv-forest-light) 100%);
  color: #fff;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* Hairline rule under the banner picks up the brass accent */
.mv-banner::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-brass), var(--mv-terracotta) 55%, transparent);
}
.mv-banner::after {
  content: "";
  position: absolute;
  right: -120px; bottom: -180px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181, 101, 63, .34), transparent 70%);
}
.mv-banner h1 { color: #fff; position: relative; z-index: 2; }
.mv-banner p { color: rgba(255, 255, 255, .84); max-width: 640px; position: relative; z-index: 2; }
.mv-banner .eyebrow { color: var(--mv-gold); }
.mv-banner .eyebrow::before { background: var(--mv-gold); }

.breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); margin-bottom: 0; position: relative; z-index: 2; }
.breadcrumb a { color: rgba(255, 255, 255, .85); }
.breadcrumb a:hover { color: var(--mv-gold); }
.breadcrumb-item.active { color: var(--mv-gold); }

/* ---------- 9. Cards ---------- */
/* Feature cards follow the same premium tile system as .mv-contact-tile:
   soft white wash, hairline brass frame, no heavy border, lifted shadow. */
.mv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 2.4rem 2rem 2.2rem;
  border: 0;
  border-radius: var(--mv-radius-lg);
  background: var(--mv-card-surface);
  box-shadow: var(--mv-card-shadow);
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--mv-card-hairline);
  pointer-events: none;
}
.mv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mv-card-shadow-hover);
}

.mv-card__icon {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .45);
  color: var(--mv-gold-dark);
  display: grid; place-items: center;
  margin-bottom: 1.4rem;
  transition: background var(--mv-transition), color var(--mv-transition), border-color var(--mv-transition);
}
.mv-card:hover .mv-card__icon {
  background: var(--mv-navy);
  border-color: var(--mv-navy);
  color: var(--mv-gold);
}
.mv-card__icon svg { width: 24px; height: 24px; }
.mv-card h3 {
  font-size: var(--mv-fs-h4);
  line-height: var(--mv-lh-head);
  margin-bottom: .7rem;
  color: var(--mv-navy);
}
.mv-card p {
  font-size: var(--mv-fs-sm);
  line-height: 1.68;
  color: var(--mv-muted);
}
.mv-card p:last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
  .mv-card { padding: 1.9rem 1.5rem; }
}

/* Accent variant: a contained brass hairline at the top edge, sitting inside
   the card's rounded corners rather than a hard 4px border. */
.mv-card--gold-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--mv-radius-lg) var(--mv-radius-lg) 0 0;
  background: linear-gradient(90deg, var(--mv-brass), var(--mv-terracotta));
}

/* USP strip */
.mv-usp {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff;
  border-radius: var(--mv-radius);
  padding: 1.5rem;
  border: 1px solid var(--mv-border);
  height: 100%;
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-usp:hover { transform: translateY(-4px); box-shadow: var(--mv-shadow-sm); }
.mv-usp .icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--mv-cream-deep);
  color: var(--mv-gold-dark);
}
.mv-usp h3 { font-size: var(--mv-fs-h5); margin-bottom: .25rem; }
.mv-usp p { font-size: var(--mv-fs-sm); margin-bottom: 0; color: var(--mv-muted); }

/* Feature list */
.mv-checklist { list-style: none; padding: 0; margin: 0; }
.mv-checklist li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .85rem;
}
.mv-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mv-sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8F6B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* --- Trust band ----------------------------------------------------------
   The four proof points read as a single engraved row rather than four
   separate cards: a brass hairline rule above the band, vertical hairlines
   between the figures, and a quiet ring-set icon over each number. The
   numerals are the loudest thing on the band — oversized Fraunces in brass,
   with the unit ("h", "+", ":1") set smaller so the digit carries the weight. */
.mv-trust {
  position: relative;
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
  overflow: hidden;
}
/* A very soft brass wash in the upper corners keeps the flat forest panel
   from reading as a solid block behind the numbers. */
.mv-trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 46% at 12% 0%, rgba(201, 162, 39, .13) 0%, rgba(201, 162, 39, 0) 70%),
    radial-gradient(48% 44% at 90% 6%, rgba(201, 162, 39, .09) 0%, rgba(201, 162, 39, 0) 72%);
  pointer-events: none;
}
.mv-trust > .container { position: relative; }

.mv-trust__head { text-align: center; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.mv-trust__head .eyebrow { color: var(--mv-gold); margin-bottom: .85rem; }
.mv-trust__head .eyebrow::before { background: var(--mv-gold); }
.mv-trust__title {
  /* size/weight/rhythm inherited from the shared section-title rule */
  color: var(--mv-white);
  max-width: 34ch;
  margin: 0 auto;
}

/* Hairline grid: borders live on the items so they collapse cleanly when the
   grid reflows to two columns and then one. */
.mv-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(201, 162, 39, .28);
}

.mv-stat {
  text-align: center;
  padding: clamp(2rem, 3.5vw, 2.75rem) 1.25rem clamp(1.5rem, 2.5vw, 2rem);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.mv-trust__grid > .mv-stat:first-child { border-left: 0; }

.mv-stat__icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, .34);
  background: rgba(201, 162, 39, .08);
  color: var(--mv-gold);
}
.mv-stat__icon svg { width: 20px; height: 20px; display: block; }

.mv-stat__num {
  font-family: var(--mv-font-head);
  font-size: clamp(2.75rem, 5.4vw, 4.15rem);
  font-weight: 700;
  color: var(--mv-gold);
  line-height: .95;
  letter-spacing: -.02em;
  /* Lining figures of an even width so the four numerals sit on one baseline */
  font-variant-numeric: lining-nums tabular-nums;
}
.mv-stat__unit {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: .06em;
}

.mv-stat__label {
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mv-white);
  margin-top: 1.1rem;
}
.mv-stat__note {
  font-size: var(--mv-fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
  margin: .5rem auto 0;
  max-width: 24ch;
}

/* Light variant, for the same band over stone/white sections */
.mv-stat--light .mv-stat__num { color: var(--mv-navy); }
.mv-stat--light .mv-stat__label { color: var(--mv-navy); }
.mv-stat--light .mv-stat__note { color: var(--mv-muted); }

@media (max-width: 991.98px) {
  .mv-trust__grid { grid-template-columns: repeat(2, 1fr); }
  /* Re-draw the dividers for a 2-up grid: no left border on either first
     column item, and a top hairline on the second row. */
  .mv-trust__grid > .mv-stat:nth-child(odd) { border-left: 0; }
  .mv-trust__grid > .mv-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }
}

@media (max-width: 575.98px) {
  .mv-trust__grid { grid-template-columns: 1fr; }
  .mv-trust__grid > .mv-stat { border-left: 0; }
  .mv-trust__grid > .mv-stat + .mv-stat { border-top: 1px solid rgba(255, 255, 255, .1); }
}

/* ---------- 10. Service detail rows ---------- */
.mv-service-row { padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--mv-border); }
.mv-service-row:last-child { border-bottom: 0; }
.mv-service-row .mv-service-num {
  font-family: var(--mv-font-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--mv-cream-deep);
  line-height: 1;
  margin-bottom: .5rem;
}

/* ---------- 11. Caregivers ----------
   Profile cards read as one set: equal-height columns, a portrait framed to a
   consistent crop, and a brass hairline that wipes in on hover to match the
   service cards above. The photograph sits inside the card rather than above
   it so the whole tile lifts as a single object.
   ------------------------------------------------------------------ */
.mv-person {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: linear-gradient(170deg, #fff 0%, #fff 64%, var(--mv-stone) 100%);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: 1.5rem 1.35rem 1.75rem;
  overflow: hidden;
  transition: transform var(--mv-transition), box-shadow var(--mv-transition), border-color var(--mv-transition);
}
.mv-person::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-brass), var(--mv-terracotta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.mv-person:hover { transform: translateY(-7px); box-shadow: var(--mv-shadow); border-color: var(--mv-terracotta-soft); }
.mv-person:hover::after { transform: scaleX(1); }

/* The portrait keeps its own subtle frame; the card supplies the shadow. */
.mv-person .mv-media {
  border-radius: var(--mv-radius);
  margin-bottom: 1.15rem;
  box-shadow: none;
  border: 1px solid var(--mv-border);
}
.mv-person .mv-media img {
  object-position: 50% 22%;   /* keep faces off the top crop line */
  transition: transform var(--mv-transition);
}
.mv-person:hover .mv-media img { transform: scale(1.04); }

.mv-person h3 { font-size: var(--mv-fs-h4); margin-bottom: .35rem; }
.mv-person .role {
  font-size: var(--mv-fs-eyebrow);
  color: var(--mv-sage-dark);
  font-weight: 700;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 0;
}
/* Hairline rule between the role and the summary, sized to the text block */
.mv-person .role::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin: .85rem auto 0;
  background: var(--mv-brass);
  opacity: .55;
  transition: width var(--mv-transition), opacity var(--mv-transition);
}
.mv-person:hover .role::after { width: 46px; opacity: 1; }
.mv-person p { font-size: var(--mv-fs-sm); color: var(--mv-muted); margin-top: .8rem; margin-bottom: 0; }

@media (max-width: 575.98px) {
  .mv-person { padding: 1.15rem 1rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-person,
  .mv-person::after,
  .mv-person .mv-media img,
  .mv-person .role::after { transition: none; }
  .mv-person:hover { transform: none; }
  .mv-person:hover .mv-media img { transform: none; }
}

/* ---------- 12. Gallery ---------- */
.mv-gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }
.mv-filter-btn {
  border: 2px solid var(--mv-border);
  background: #fff;
  color: var(--mv-navy);
  border-radius: 999px;
  padding: .55rem 1.4rem;
  font-weight: 600;
  font-size: var(--mv-fs-sm);
  transition: all var(--mv-transition);
}
.mv-filter-btn:hover { border-color: var(--mv-sage); }
.mv-filter-btn.active { background: var(--mv-navy); border-color: var(--mv-navy); color: #fff; }

.mv-gallery-item { transition: opacity .3s ease, transform .3s ease; }
.mv-gallery-item.is-hidden { display: none; }

.mv-gallery-figure {
  position: relative;
  border-radius: var(--mv-radius);
  overflow: hidden;
  display: block;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
  background: transparent;
}
.mv-gallery-figure .mv-media { border-radius: var(--mv-radius); box-shadow: none; }
.mv-gallery-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(to top, rgba(31, 58, 95, .88), transparent);
  color: #fff;
  font-weight: 600;
  font-size: var(--mv-fs-sm);
  text-align: left;
  transform: translateY(6px);
  opacity: 0;
  transition: all var(--mv-transition);
}
.mv-gallery-figure:hover figcaption,
.mv-gallery-figure:focus-visible figcaption { transform: translateY(0); opacity: 1; }

/* ---------- 13. Testimonials ---------- */
.mv-quote {
  background: #fff;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: 2.6rem 2.2rem 2.2rem;
  height: 100%;
  position: relative;
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-quote:hover { transform: translateY(-5px); box-shadow: var(--mv-shadow); }
.mv-quote::before {
  content: "\201C";
  font-family: var(--mv-font-head);
  font-size: 4.5rem;
  color: var(--mv-gold);
  opacity: .35;
  position: absolute;
  top: .4rem; right: 1.4rem;
  line-height: 1;
}
.mv-quote__stars { color: var(--mv-gold); letter-spacing: .12em; margin-bottom: .9rem; }
.mv-quote blockquote {
  position: relative;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h4);
  line-height: var(--mv-lh-snug);
  color: var(--mv-forest);
  margin-bottom: 1.5rem;
}
.mv-quote__person { display: flex; align-items: center; gap: .85rem; border-top: 1px solid var(--mv-border); padding-top: 1.1rem; }
.mv-quote__avatar {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 50%;
  background: var(--mv-sage-soft);
  color: var(--mv-navy);
  display: grid; place-items: center;
  font-family: var(--mv-font-head);
  font-weight: 700;
}
.mv-quote__person strong { display: block; color: var(--mv-navy); }
.mv-quote__person span { font-size: var(--mv-fs-xs); color: var(--mv-muted); }

.mv-approval-note {
  font-size: var(--mv-fs-xs);
  color: var(--mv-muted);
  background: var(--mv-cream);
  border-left: 3px solid var(--mv-gold);
  padding: .75rem 1rem;
  border-radius: 0 6px 6px 0;
}

/* ---------- 14. Blog ---------- */
.mv-post {
  height: 100%;
  background: #fff;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-post:hover { transform: translateY(-6px); box-shadow: var(--mv-shadow); }
.mv-post .mv-media { border-radius: 0; box-shadow: none; }
.mv-post__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.mv-post__meta { font-size: var(--mv-fs-xs); color: var(--mv-muted); display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .7rem; }
.mv-post__cat {
  display: inline-block;
  background: var(--mv-sage-soft);
  color: var(--mv-sage-dark);
  border-radius: 999px;
  padding: .2rem .8rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mv-post h3 { font-size: var(--mv-fs-h4); margin-bottom: .6rem; }
.mv-post h3 a { color: var(--mv-navy); }
.mv-post h3 a:hover { color: var(--mv-gold-dark); }
.mv-post p { font-size: var(--mv-fs-sm); color: var(--mv-muted); }
.mv-post .btn-link-arrow { margin-top: auto; }

.mv-article { font-size: var(--mv-fs-body); }
.mv-article h2 { margin-top: 2.4rem; margin-bottom: 1rem; }
.mv-article h3 { margin-top: 1.9rem; margin-bottom: .8rem; }
.mv-article ul, .mv-article ol { margin-bottom: 1.3rem; padding-left: 1.3rem; }
.mv-article li { margin-bottom: .5rem; }
.mv-article blockquote {
  border-left: 4px solid var(--mv-gold);
  background: var(--mv-cream);
  padding: 1.4rem 1.6rem;
  border-radius: 0 var(--mv-radius) var(--mv-radius) 0;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h4);
  line-height: var(--mv-lh-snug);
  color: var(--mv-navy);
  margin: 1.8rem 0;
}

/* Sidebar boxes use the same premium tile treatment, at a quieter scale. */
.mv-sidebar-box {
  position: relative;
  padding: 1.8rem 1.6rem;
  border: 0;
  border-radius: var(--mv-radius-lg);
  background: var(--mv-card-surface);
  box-shadow: var(--mv-card-shadow);
  margin-bottom: 1.5rem;
}
.mv-sidebar-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--mv-card-hairline);
  pointer-events: none;
}
.mv-sidebar-box h3 {
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mv-muted);
  margin: 0 0 1.1rem;
}
.mv-sidebar-list { list-style: none; padding: 0; margin: 0; }
.mv-sidebar-list li { border-bottom: 1px solid rgba(201, 162, 39, .16); }
.mv-sidebar-list li:last-child { border-bottom: 0; }
.mv-sidebar-list a { display: flex; justify-content: space-between; gap: .75rem; padding: .65rem 0; font-size: var(--mv-fs-sm); font-weight: 500; }

.mv-tag {
  display: inline-block;
  border: 1px solid var(--mv-border);
  background: #fff;
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .82rem;
  margin: 0 .35rem .55rem 0;
  color: var(--mv-muted);
}
.mv-tag:hover { background: var(--mv-navy); color: #fff; border-color: var(--mv-navy); }

/* ---------- 15. Forms ---------- */
.mv-form-card {
  background: #fff;
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  border: 1px solid var(--mv-border);
}
.form-label { font-weight: 600; color: var(--mv-navy); font-size: var(--mv-fs-sm); margin-bottom: .4rem; }
.form-label .req { color: #B3261E; }
.form-control, .form-select {
  border: 2px solid var(--mv-border);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: 1rem;
  color: var(--mv-charcoal);
  background-color: #fff;
  transition: border-color var(--mv-transition), box-shadow var(--mv-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mv-sage);
  box-shadow: 0 0 0 4px rgba(143, 175, 139, .22);
}
.form-control::placeholder { color: #9AA3A9; }
.form-text { font-size: var(--mv-fs-xs); color: var(--mv-muted); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #B3261E; }
.invalid-feedback { font-size: var(--mv-fs-xs); }

.mv-form-success {
  display: none;
  background: var(--mv-sage-soft);
  border: 1px solid var(--mv-sage);
  color: #2F4A2B;
  border-radius: var(--mv-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.mv-form-success.is-visible { display: block; }

/* ---------- 16. Contact / location ---------- */
.mv-contact-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  height: 100%;
  padding: 2rem 1.75rem 1.9rem;
  border: 0;
  border-radius: var(--mv-radius-lg);
  background: var(--mv-card-surface);
  box-shadow: var(--mv-card-shadow);
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-contact-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--mv-card-hairline);
  pointer-events: none;
}
.mv-contact-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--mv-card-shadow-hover);
}
.mv-contact-tile .icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .45);
  color: var(--mv-gold-dark);
  display: grid; place-items: center;
  transition: background var(--mv-transition), color var(--mv-transition), border-color var(--mv-transition);
}
.mv-contact-tile:hover .icon {
  background: var(--mv-navy);
  border-color: var(--mv-navy);
  color: var(--mv-gold);
}
.mv-contact-tile h2,
.mv-contact-tile h3,
.mv-contact-tile .mv-tile-label {
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mv-muted);
  margin: 0 0 .55rem;
}
.mv-contact-tile > div { width: 100%; }
.mv-contact-tile p, .mv-contact-tile a {
  font-size: var(--mv-fs-sm);
  line-height: 1.6;
  margin-bottom: 0;
  color: var(--mv-charcoal);
  overflow-wrap: break-word;
}
.mv-contact-tile a {
  display: inline-block;
  font-weight: 500;
  color: var(--mv-navy);
  transition: color .2s ease;
}
.mv-contact-tile a[href^="tel:"] { white-space: nowrap; }
.mv-contact-tile a:hover { color: var(--mv-gold-dark); }
.mv-contact-tile p.mt-1,
.mv-contact-tile p + p {
  margin-top: .6rem !important;
  font-size: var(--mv-fs-xs);
  line-height: 1.55;
  color: var(--mv-muted);
}

@media (max-width: 575.98px) {
  .mv-contact-tile { padding: 1.6rem 1.35rem; gap: .75rem; }
}

.mv-map {
  position: relative;
  height: 100%;
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
  min-height: 420px;
  background: var(--mv-sage-soft);
  display: grid;
  place-items: stretch;
  border: 1px solid var(--mv-border);
  box-shadow: 0 18px 40px rgba(31, 58, 95, .10);
}
.mv-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

@media (max-width: 991.98px) {
  .mv-map, .mv-map iframe { min-height: 340px; }
}

/* ---------- 17. Accordion (FAQ) ---------- */
.accordion-item {
  border: 1px solid rgba(222, 211, 194, .8);
  border-radius: var(--mv-radius-lg) !important;
  margin-bottom: .85rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(44, 59, 51, .04);
  transition: box-shadow var(--mv-transition), border-color var(--mv-transition),
              transform var(--mv-transition);
}
.accordion-item:last-child { margin-bottom: 0; }
.accordion-item:hover { box-shadow: 0 12px 30px rgba(44, 59, 51, .09); }
/* The open card lifts clear of the stack — one obvious focal point. */
.accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(181, 101, 63, .3);
  box-shadow: 0 20px 48px rgba(44, 59, 51, .13);
}
.accordion-button {
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h5);
  font-weight: 600;
  line-height: var(--mv-lh-head);
  letter-spacing: var(--mv-ls-head);
  color: var(--mv-navy);
  background: #fff;
  padding: 1.35rem 1.6rem;
  gap: 1rem;
  transition: color var(--mv-transition), background var(--mv-transition);
}
.accordion-button:hover { color: var(--mv-terracotta-dark); }
.accordion-button:not(.collapsed) {
  background: #fff;
  color: var(--mv-navy);
  box-shadow: none;
  padding-bottom: .9rem;
}
/* Chevron sits in a soft disc so the row has a clear affordance. */
.accordion-button::after {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  background-color: var(--mv-cream);
  background-size: 1rem 1rem;
  background-position: center;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3B33' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform var(--mv-transition), background-color var(--mv-transition);
}
.accordion-button:not(.collapsed)::after {
  background-color: var(--mv-terracotta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.accordion-collapse { transition: height .45s cubic-bezier(.22, .61, .36, 1); }
.accordion-body {
  padding: 0 1.6rem 1.5rem;
  color: var(--mv-muted);
  font-size: var(--mv-fs-sm);
  line-height: 1.75;
  max-width: 60ch;
}
.accordion-body a { color: var(--mv-terracotta-dark); text-underline-offset: 3px; }

/* FAQ section layout — sticky aside with a supporting image */
.mv-faq-aside { position: sticky; top: calc(var(--mv-header-h) + 2rem); }
.mv-faq-aside .section-title { margin-bottom: .75rem; }
.mv-faq-aside .lead-2 { margin-bottom: 0; max-width: 34ch; }

.mv-faq-figure {
  position: relative;
  margin: 1.75rem 0 1.5rem;
  border-radius: var(--mv-radius-xl);
  overflow: hidden;
  box-shadow: var(--mv-shadow);
}
.mv-faq-figure img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.mv-faq-figure:hover img { transform: scale(1.04); }
.mv-faq-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.5rem 1.35rem;
  background: linear-gradient(to top, rgba(30, 42, 36, .88), rgba(30, 42, 36, 0));
  color: #fff;
  font-size: var(--mv-fs-sm);
  line-height: 1.5;
}
.mv-faq-figure-kicker {
  display: block;
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--mv-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mv-brass);
  margin-bottom: .3rem;
}
.mv-faq-cta { margin-top: .25rem; }

@media (max-width: 991.98px) {
  .mv-faq-aside { position: static; }
  .mv-faq-figure img { height: 240px; }
}

/* ---------- 18. CTA band ---------- */
.mv-cta {
  position: relative;
  background: linear-gradient(120deg, var(--mv-navy) 0%, var(--mv-navy-light) 100%);
  color: #fff;
  border-radius: var(--mv-radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  overflow: hidden;
}
.mv-cta::after {
  content: "";
  position: absolute;
  left: -90px; bottom: -160px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .30), transparent 70%);
}
.mv-cta h2 { color: #fff; position: relative; z-index: 2; }
.mv-cta p { color: rgba(255, 255, 255, .85); position: relative; z-index: 2; }
.mv-cta .mv-cta__actions { position: relative; z-index: 2; }

.mv-cta-full { background: linear-gradient(120deg, var(--mv-navy) 0%, var(--mv-navy-light) 100%); color: #fff; }
.mv-cta-full h2 { color: #fff; }
.mv-cta-full p { color: rgba(255, 255, 255, .85); }

/* ---------- 19. Footer ---------- */
.mv-footer { background: var(--mv-navy-dark); color: rgba(255, 255, 255, .75); padding-top: clamp(3rem, 6vw, 4.5rem); }
.mv-footer h3 { color: #fff; font-size: var(--mv-fs-h5); margin-bottom: 1.2rem; }
.mv-footer a { color: rgba(255, 255, 255, .75); }
.mv-footer a:hover { color: var(--mv-gold); }
/* Footer sits on a dark ground. The brand mark is dark green, so rather than
   recolouring it (which would flatten the emblem), sit it on a light chip. */
/* The artwork is near-black green (#132F2A), so on the navy footer it still
   needs the light chip to stay legible. The PNG carries ~10% of its own
   whitespace margin, so the chip's padding is tighter than the SVG's was and
   the height runs a little larger to keep the mark optically the same size. */
.mv-brand__logo--light {
  --mv-logo-h: 58px;
  background: #F7F6F1;
  border-radius: 12px;
  padding: .3rem .5rem;
  /* content-box keeps the padding a frame around the mark rather than eating
     into it, so the aspect-ratio box stays true to the file. */
  box-sizing: content-box;
}
@media (max-width: 575.98px) {
  .mv-brand__logo--light { --mv-logo-h: 46px; padding: .25rem .4rem; }
}
.mv-footer-list { list-style: none; padding: 0; margin: 0; }
.mv-footer-list li { margin-bottom: .6rem; }
.mv-footer-contact li { display: flex; gap: .7rem; margin-bottom: .9rem; }
.mv-footer-contact svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: .35rem; color: var(--mv-gold); }
.mv-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  font-size: var(--mv-fs-xs);
}
.mv-social { display: flex; gap: .6rem; }
.mv-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: grid; place-items: center;
  transition: all var(--mv-transition);
}
.mv-social a:hover { background: var(--mv-gold); color: var(--mv-navy-dark); transform: translateY(-3px); }
.mv-social svg { width: 18px; height: 18px; }

/* ---------- 20. Back to top ---------- */
.mv-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--mv-navy);
  color: var(--mv-gold);
  display: grid; place-items: center;
  box-shadow: var(--mv-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--mv-transition);
  z-index: 1040;
}
.mv-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mv-top:hover { background: var(--mv-gold); color: var(--mv-navy); }

/* ---------- 21. Animations ---------- */
[data-animate] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
[data-animate].is-in { opacity: 1; transform: none; }
[data-animate="fade-left"] { transform: translateX(-26px); }
[data-animate="fade-right"] { transform: translateX(26px); }
[data-animate="zoom"] { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 22. Pagination ---------- */
.pagination { gap: .4rem; }
.page-link {
  border: 2px solid var(--mv-border);
  border-radius: 8px !important;
  color: var(--mv-navy);
  font-weight: 600;
  padding: .6rem 1rem;
}
.page-link:hover { background: var(--mv-cream); color: var(--mv-navy); border-color: var(--mv-sage); }
.page-item.active .page-link { background: var(--mv-navy); border-color: var(--mv-navy); color: #fff; }
.page-item.disabled .page-link { color: #9AA3A9; background: #fff; }

/* ---------- 23. Print ---------- */
@media print {
  .mv-header, .mv-topbar, .mv-footer, .mv-top, .mv-cta, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
}

/* ---------- Lightbox image ---------- */
.mv-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--mv-radius);
}

/* Hero exterior: bias the crop upward so the house, not the driveway, fills the frame. */
.mv-hero__visual .mv-media img { object-position: 50% 38%; }

/* ---------- 24. Brand story / intro ---------- */
/* Extra breathing room above the story so it reads as a fresh chapter rather
   than a continuation of the hero cards that sit directly above it. */
.mv-intro { padding-top: clamp(5rem, 10vw, 9rem); }

/* Bottom padding must clear the square inset (its height = its width) so the
   overlap stays inside the column instead of bleeding into the next section. */
.mv-intro__media { position: relative; padding-bottom: 110px; padding-right: 2.5rem; }
.mv-intro__media > .mv-media--portrait { border-radius: var(--mv-radius-xl); }

/* Smaller image overlaps the primary one, offset to the lower right */
.mv-intro__media-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: 220px;
  border-radius: var(--mv-radius-lg);
  border: 6px solid #fff;
  box-shadow: var(--mv-shadow-lg);
  background: none;   /* hide the .mv-media placeholder gradient behind the photo */
}

.mv-intro__stat {
  position: absolute;
  left: -14px;
  bottom: 22%;
  background: var(--mv-forest);
  color: #fff;
  border-radius: var(--mv-radius);
  box-shadow: var(--mv-shadow-lg);
  padding: 1rem 1.3rem;
  max-width: 190px;
}
.mv-intro__stat strong {
  display: block;
  font-family: var(--mv-font-head);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--mv-brass);
}
.mv-intro__stat span { font-size: var(--mv-fs-xs); color: rgba(255, 255, 255, .82); line-height: 1.45; display: block; margin-top: .3rem; }

.mv-pillars { display: grid; gap: 1.4rem; margin-top: 2rem; }
.mv-pillar { padding-left: 1.2rem; border-left: 3px solid var(--mv-terracotta-soft); }
.mv-pillar h3 {
  font-size: var(--mv-fs-h5);
  margin-bottom: .35rem;
  color: var(--mv-terracotta-dark);
}
.mv-pillar p { margin: 0; color: var(--mv-muted); font-size: var(--mv-fs-sm); }

@media (max-width: 991.98px) {
  .mv-intro__media { padding-right: 0; padding-bottom: 0; }
  .mv-intro__media-inset { display: none; }
  .mv-intro__stat { left: auto; right: 14px; bottom: 14px; }
}

/* ---------- 25. Life at Millport Villas — mosaic ---------- */
.mv-mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: repeat(2, 230px);
  gap: 1rem;
}
.mv-mosaic__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-shadow-sm);
}
.mv-mosaic__item--tall { grid-row: span 2; }
.mv-mosaic__item--wide { grid-column: span 2; }

.mv-mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.mv-mosaic__item:hover img { transform: scale(1.06); }

.mv-mosaic__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.3rem 1.2rem;
  color: #fff;
  background: linear-gradient(to top, rgba(30, 42, 36, .92), rgba(30, 42, 36, .55) 55%, transparent);
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--mv-transition), opacity var(--mv-transition);
}
.mv-mosaic__item:hover figcaption,
.mv-mosaic__item:focus-within figcaption { transform: none; opacity: 1; }

.mv-mosaic__item figcaption strong {
  display: block;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h5);
  margin-bottom: .15rem;
}
.mv-mosaic__item figcaption span { font-size: var(--mv-fs-xs); color: rgba(255, 255, 255, .84); }

/* Touch devices have no hover, so captions stay visible */
@media (hover: none) {
  .mv-mosaic__item figcaption { transform: none; opacity: 1; }
}

@media (max-width: 991.98px) {
  .mv-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 190px); }
  .mv-mosaic__item--tall { grid-row: span 2; }
  .mv-mosaic__item--wide { grid-column: span 2; }
}
@media (max-width: 575.98px) {
  .mv-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(4, 210px); }
  .mv-mosaic__item--tall, .mv-mosaic__item--wide { grid-row: auto; grid-column: auto; }
}

/* ---------- 26. Parallax banner (Why Families Choose Us) ----------
   Full-bleed cinematic band. The background image is oversized vertically
   (top/bottom bleed) so the JS transform can move it without exposing an
   edge; if JS never runs the image simply sits still and centred.
   ------------------------------------------------------------------ */
.mv-parallax {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 11vw, 7rem) 0;
  background: var(--mv-forest-dark);
  color: #fff;
}
.mv-parallax__bg {
  position: absolute;
  top: -18%; left: 0; right: 0;
  height: 136%;
  z-index: -2;
  will-change: transform;
}
.mv-parallax__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
/* Warm dark scrim: forest at the edges, softer in the middle so the
   photograph still reads, plus a vignette for the cinematic falloff. */
.mv-parallax__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(30, 42, 36, .55) 0%, rgba(30, 42, 36, .82) 72%, rgba(30, 42, 36, .9) 100%),
    linear-gradient(180deg, rgba(30, 42, 36, .78) 0%, rgba(30, 42, 36, .6) 38%, rgba(30, 42, 36, .88) 100%);
}
.mv-parallax__inner { position: relative; }

.mv-parallax .eyebrow-light { color: var(--mv-brass); }
/* The headline is given a wider measure than a typical display line (28ch
   rather than 20ch) so it breaks into two generous lines instead of three
   cramped ones, and steps up in size to hold the extra width. `text-wrap:
   balance` keeps the two lines close to even. */
.mv-parallax__title {
  /* size/weight/rhythm inherited from the shared section-title rule */
  color: #fff;
  max-width: 28ch;
  margin-inline: auto;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(20, 28, 24, .45);
}
.mv-parallax__lead {
  color: rgba(255, 255, 255, .86);
  font-size: var(--mv-fs-lead);
  line-height: var(--mv-lh-body);
  max-width: 74ch;
  margin: clamp(1.35rem, 2.2vw, 1.75rem) auto 0;
}

.mv-parallax__points { margin-top: clamp(1.75rem, 5vw, 3rem); }
.mv-parallax__point {
  height: 100%;
  padding: 1.75rem 1.6rem;
  border-radius: var(--mv-radius-lg);
  border: 1px solid rgba(255, 255, 255, .16);
  /* Frosted glass over the photograph; the solid fallback below keeps the
     text legible in browsers without backdrop-filter. */
  background: rgba(30, 42, 36, .38);
  transition: transform var(--mv-transition), background var(--mv-transition), border-color var(--mv-transition);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .mv-parallax__point {
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.mv-parallax__point:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 162, 39, .55);
}
.mv-parallax__point h3 {
  color: #fff;
  font-size: var(--mv-fs-h5);
  margin-bottom: .5rem;
}
.mv-parallax__point p {
  color: rgba(255, 255, 255, .8);
  font-size: var(--mv-fs-sm);
  margin-bottom: 0;
}
.mv-parallax__point--cta { border-color: rgba(201, 162, 39, .4); }
.mv-parallax__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  font-weight: 600;
  color: var(--mv-brass);
  text-decoration: none;
}
.mv-parallax__link svg { width: 18px; height: 18px; transition: transform var(--mv-transition); }
.mv-parallax__link:hover { color: #fff; }
.mv-parallax__link:hover svg { transform: translateX(4px); }

.mv-parallax__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

@media (max-width: 575.98px) {
  .mv-parallax__point { padding: 1.4rem 1.25rem; }
  .mv-parallax__actions .btn { width: 100%; }
}

/* Parallax is motion: hold the image still when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .mv-parallax__bg { transform: none !important; }
}

/* ---------- Dining & Nutrition (home) ----------
   Editorial split: a large framed plate photo anchors the row, the copy sits
   in a warm card beside it. Stone-to-white wash keeps it distinct from the
   neighbouring sections without another flat colour block.
   ------------------------------------------------------------------ */
.mv-dine {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FDFBF7 0%, var(--mv-stone) 55%, #FDFBF7 100%);
}
.mv-dine__wash {
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(52vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .16) 0%, rgba(201, 162, 39, 0) 68%);
  pointer-events: none;
}
.mv-dine .container { position: relative; z-index: 1; }
.mv-dine .section-intro { max-width: 640px; }

/* Framed photo */
.mv-dine__frame {
  position: relative;
  margin: 0;
  padding: clamp(.65rem, 1.4vw, 1rem);
  border-radius: calc(var(--mv-radius-xl) + 8px);
  background: var(--mv-card-surface);
  border: var(--mv-card-hairline);
  box-shadow: var(--mv-card-shadow);
  transition: box-shadow var(--mv-transition), transform var(--mv-transition);
}
.mv-dine__frame:hover {
  transform: translateY(-4px);
  box-shadow: var(--mv-card-shadow-hover);
}
.mv-dine__frame .mv-media {
  border-radius: var(--mv-radius-xl);
  box-shadow: none;
}
.mv-dine__frame .mv-media img {
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.mv-dine__frame:hover .mv-media img { transform: scale(1.045); }

/* Caption plate — floats over the lower-left corner of the photo */
.mv-dine__caption {
  position: absolute;
  left: clamp(1.5rem, 4vw, 2.75rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  right: clamp(1.5rem, 4vw, 2.75rem);
  max-width: 24rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--mv-radius);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-left: 3px solid var(--mv-gold);
  box-shadow: 0 16px 40px rgba(44, 59, 51, .18);
}
.mv-dine__caption strong {
  display: block;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h5);
  color: var(--mv-forest);
  line-height: 1.2;
}
.mv-dine__caption span {
  display: block;
  margin-top: .25rem;
  font-size: var(--mv-fs-xs);
  color: var(--mv-muted);
}

/* Copy list */
.mv-dine__list { list-style: none; padding: 0; margin: 0; }
.mv-dine__list li {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(201, 162, 39, .2);
}
.mv-dine__list li:first-child { padding-top: 0; }
.mv-dine__list li:last-child { border-bottom: 0; }

.mv-dine__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201, 162, 39, .12);
  color: var(--mv-gold-dark);
  transition: background var(--mv-transition), color var(--mv-transition), transform var(--mv-transition);
}
.mv-dine__ico svg { width: 21px; height: 21px; }
.mv-dine__list li:hover .mv-dine__ico {
  background: var(--mv-gold);
  color: #fff;
  transform: translateY(-2px);
}

.mv-dine__body {
  font-size: var(--mv-fs-sm);
  color: var(--mv-muted);
  line-height: 1.65;
}
.mv-dine__body strong {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h5);
  font-weight: 600;
  color: var(--mv-forest);
  line-height: 1.3;
}

/* Closing invitation */
.mv-dine__invite {
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.35rem;
  border-radius: var(--mv-radius);
  background: rgba(255, 255, 255, .72);
  border: var(--mv-card-hairline);
  font-size: var(--mv-fs-sm);
  color: var(--mv-muted);
}
.mv-dine__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .35rem;
  font-weight: 600;
  color: var(--mv-terracotta-dark);
  text-decoration: none;
  white-space: nowrap;
}
.mv-dine__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--mv-transition);
}
.mv-dine__link:hover { color: var(--mv-forest); }
.mv-dine__link:hover svg { transform: translateX(4px); }

@media (max-width: 991.98px) {
  .mv-dine__caption { max-width: none; }
}
@media (max-width: 575.98px) {
  .mv-dine__caption {
    position: static;
    margin-top: .9rem;
    backdrop-filter: none;
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mv-dine__frame,
  .mv-dine__frame .mv-media img,
  .mv-dine__ico,
  .mv-dine__link svg { transition: none; }
  .mv-dine__frame:hover { transform: none; }
  .mv-dine__frame:hover .mv-media img { transform: none; }
}

/* ---------- Family Voices (home testimonials) ----------
   One featured quote carries the emotional weight; two supporting cards sit
   beneath it. Deliberately not a three-up grid — the hierarchy is the point.
   ------------------------------------------------------------------ */
.mv-voices {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--mv-stone) 0%, #FDFBF7 62%, var(--mv-stone) 100%);
}
.mv-voices__wash {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: min(78vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .13) 0%, rgba(201, 162, 39, 0) 65%);
  pointer-events: none;
}
.mv-voices .container { position: relative; z-index: 1; }
.mv-voices .section-intro { max-width: 660px; }

/* Shared quote card */
.mv-voice {
  position: relative;
  height: 100%;
  margin: 0;
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.75rem, 3vw, 2.25rem);
  border-radius: var(--mv-radius-xl);
  background: var(--mv-card-surface);
  border: var(--mv-card-hairline);
  box-shadow: var(--mv-card-shadow);
  transition: transform var(--mv-transition), box-shadow var(--mv-transition);
}
.mv-voice::after {
  /* brass hairline that draws in on hover */
  content: "";
  position: absolute;
  left: clamp(1.6rem, 3vw, 2.4rem);
  right: clamp(1.6rem, 3vw, 2.4rem);
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mv-gold), var(--mv-terracotta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mv-transition);
}
.mv-voice:hover {
  transform: translateY(-5px);
  box-shadow: var(--mv-card-shadow-hover);
}
.mv-voice:hover::after { transform: scaleX(1); }

/* Oversized decorative quote mark */
.mv-voice__mark {
  position: absolute;
  top: clamp(.2rem, 1vw, .6rem);
  right: clamp(1.2rem, 3vw, 2rem);
  font-family: var(--mv-font-head);
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 1;
  color: var(--mv-gold);
  opacity: .16;
  pointer-events: none;
  user-select: none;
}

.mv-voice__stars {
  color: var(--mv-gold);
  letter-spacing: .18em;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}

.mv-voice blockquote {
  position: relative;
  margin: 0 0 1.75rem;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h4);
  font-weight: 400;
  line-height: 1.62;
  color: var(--mv-forest);
}

/* Attribution */
.mv-voice__person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 162, 39, .22);
}
.mv-voice__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: var(--mv-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--mv-forest);
  background: linear-gradient(145deg, var(--mv-sage-soft), var(--mv-stone-deep));
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .35), 0 0 0 5px rgba(255, 255, 255, .9), 0 6px 18px rgba(44, 59, 51, .12);
}
.mv-voice__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mv-voice__id strong {
  display: block;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h5);
  color: var(--mv-forest);
  line-height: 1.3;
}
.mv-voice__id span {
  display: block;
  margin-top: .15rem;
  font-size: var(--mv-fs-xs);
  color: var(--mv-muted);
}

/* Featured variant */
.mv-voice--feature {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 4.5vw, 3.6rem) clamp(1.75rem, 4.5vw, 3.6rem) clamp(2rem, 3.5vw, 2.75rem);
  text-align: center;
  background:
    linear-gradient(180deg, #fff 0%, #FBF7EF 100%);
  box-shadow: 0 2px 4px rgba(44, 59, 51, .05), 0 30px 64px rgba(44, 59, 51, .13);
}
.mv-voice--feature::after { transform-origin: center; }
.mv-voice--feature .mv-voice__mark {
  top: clamp(-.4rem, -.5vw, 0rem);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  opacity: .13;
}
.mv-voice--feature blockquote {
  font-size: var(--mv-fs-h3);
  line-height: 1.5;
  max-width: 46rem;
  margin-inline: auto;
}
.mv-voice--feature .mv-voice__person {
  justify-content: center;
  border-top: 0;
  padding-top: 0;
  text-align: left;
}
.mv-voice--feature .mv-voice__person::before {
  /* short brass rule in place of the full-width divider */
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -1.6rem;
  width: 56px;
  height: 2px;
  background: var(--mv-gold);
  opacity: .5;
}
.mv-voice--feature .mv-voice__avatar {
  width: 68px;
  height: 68px;
  font-size: 1.45rem;
}

/* Closing note + CTA */
.mv-voices__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.mv-voices__foot-text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--mv-fs-xs);
  color: var(--mv-muted);
}

@media (max-width: 575.98px) {
  .mv-voice--feature .mv-voice__person { flex-direction: column; text-align: center; gap: .75rem; }
  .mv-voices__foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-voice,
  .mv-voice::after { transition: none; }
  .mv-voice:hover { transform: none; }
  .mv-voice:hover::after { transform: scaleX(1); }
  .mv-voice--feature:hover::after { transform: translateX(0) scaleX(1); }
}

/* ==================================================================
   ABOUT — OUR VALUES (editorial)
   Asymmetric two-column: a sticky lead column set against a
   numbered, rule-separated list. No cards, no boxes.
   ================================================================== */
.mv-values {
  position: relative;
  background: var(--mv-cream);
  overflow: hidden;
}
.mv-values::before {
  /* oversized watermark numeral-free tint wash */
  content: "";
  position: absolute;
  top: -12%;
  right: -14%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(201, 162, 39, .10), transparent 68%);
  pointer-events: none;
}
.mv-values > .container { position: relative; z-index: 1; }

.mv-values__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* ---- Lead column ---- */
.mv-values__lead { position: sticky; top: calc(var(--mv-header-h) + 2.5rem); }

.mv-values__title {
  /* size/weight/rhythm inherited from the shared section-title rule */
  color: var(--mv-navy);
  margin: .35rem 0 0;
}
.mv-values__title em {
  font-style: italic;
  color: var(--mv-gold-dark);
}

.mv-values__standfirst {
  margin: 1.35rem 0 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--mv-gold);
  font-size: var(--mv-fs-lead);
  line-height: 1.75;
  color: var(--mv-muted);
  max-width: 26rem;
}

.mv-values__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  padding-bottom: .4rem;
  font-family: var(--mv-font-body);
  font-size: var(--mv-fs-eyebrow);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mv-navy);
  border-bottom: 1px solid var(--mv-border);
  transition: color var(--mv-transition), border-color var(--mv-transition);
}
.mv-values__cta svg { transition: transform var(--mv-transition); }
.mv-values__cta:hover,
.mv-values__cta:focus-visible { color: var(--mv-gold-dark); border-color: var(--mv-gold); }
.mv-values__cta:hover svg,
.mv-values__cta:focus-visible svg { transform: translateX(4px); }

/* ---- Numbered list ---- */
.mv-values__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.mv-value {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--mv-border);
  transition: background var(--mv-transition);
}
.mv-value:first-child { border-top: 0; padding-top: 0; }
.mv-value:last-child { padding-bottom: 0; }

.mv-value__num {
  font-family: var(--mv-font-head);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--mv-gold);
  text-stroke: 1px var(--mv-gold);
  transition: color var(--mv-transition);
}
.mv-value:hover .mv-value__num { color: var(--mv-gold); }

.mv-value__name {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .5rem;
  font-family: var(--mv-font-head);
  font-size: var(--mv-fs-h4);
  font-weight: 600;
  color: var(--mv-navy);
}
.mv-value__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--mv-sage);
}
.mv-value__body p {
  margin: 0;
  max-width: 38rem;
  font-size: var(--mv-fs-sm);
  line-height: 1.75;
  color: var(--mv-muted);
}

@media (max-width: 991.98px) {
  .mv-values__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .mv-values__lead { position: static; }
  .mv-values__standfirst { max-width: none; }
}

@media (max-width: 575.98px) {
  .mv-value { grid-template-columns: 1fr; gap: .5rem; }
  .mv-value__num { font-size: 1.25rem; -webkit-text-stroke: 0; text-stroke: 0; color: var(--mv-gold); }
}

@media (prefers-reduced-motion: reduce) {
  .mv-values__cta,
  .mv-values__cta svg,
  .mv-value,
  .mv-value__num { transition: none; }
}

/* ==========================================================================
   30. RESPONSIVE LAYER
   ==========================================================================
   Appended last so it cascades over the component rules above without
   editing them. Ordered largest -> smallest (max-width queries), so each
   narrower breakpoint inherits everything set by the wider ones.

   Target widths: 1440, 1366, 1280, 1199, 1024, 991, 768, 575, 480, 425,
   375, 320.

   Baseline (>1440px) is the existing desktop design, untouched. The fluid
   clamp() type scale in section 1 already handles most size interpolation;
   what follows is the layout, density and spacing work that clamps cannot
   express — column counts, overlap offsets, sticky behaviour and the
   touch-target floor.
   ------------------------------------------------------------------ */

/* ---------- 30.1 Global guards (all widths) ---------- */

/* Nothing may push the page sideways. `body{overflow-x:hidden}` in section 2
   hides a horizontal overflow but does not prevent it; these keep the
   offenders inside the viewport in the first place. */
img, svg, video, canvas { max-width: 100%; }
.mv-media img,
.mv-mosaic__item img,
.mv-hero__bg,
.mv-parallax__bg img,
.mv-mission-banner__media img { max-width: none; }

/* Long unbroken strings — email addresses, phone numbers, URLs — are the
   usual cause of a stubborn 320px overflow. */
p, li, dd, figcaption, blockquote, .mv-card p, .mv-post__body p { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---------- 30.2 <=1440px — large desktop ---------- */
@media (max-width: 1440px) {
  /* The hero trust cards overlap the section below by 42% of their height.
     Below 1440 the hero is shorter, so the overlap is eased to keep the
     cards clear of the headline above and the copy beneath. */
  .mv-hero__cards { transform: translateY(38%); }
  .mv-hero-card { padding: 1.85rem 1.6rem 1.75rem; }
}

/* ---------- 30.3 <=1366px — common laptop ---------- */
@media (max-width: 1366px) {
  .mv-hero__content { max-width: 680px; }
  .mv-hero__cards { gap: 1.1rem; transform: translateY(34%); }

  /* The mosaic rows are fixed pixel heights, so they must step down with the
     viewport or the tiles grow disproportionately tall relative to the
     narrowing columns. */
  .mv-mosaic { grid-template-rows: repeat(2, 215px); }

  /* Philosophy columns lose their generous inline padding first — the text
     is what needs the room, not the gutters. */
  .mv-philosophy__item { padding-inline: clamp(.9rem, 1.8vw, 1.5rem); }
}

/* ---------- 30.4 <=1280px — small laptop ---------- */
@media (max-width: 1280px) {
  :root { --mv-header-h: 80px; }

  .mv-hero__cards { gap: 1rem; transform: translateY(30%); }
  .mv-hero-card { padding: 1.65rem 1.4rem 1.55rem; }
  .mv-hero-card__icon { width: 40px; height: 40px; flex: 0 0 40px; margin-bottom: .9rem; }

  /* Nav links tighten before the toggler appears at 991px, so the full item
     set plus the CTA still fits one line without wrapping the brand. */
  .mv-nav .nav-link { padding: .6rem .7rem !important; }
  .mv-nav .nav-link::after { left: .7rem; right: .7rem; }

  .mv-mosaic { grid-template-rows: repeat(2, 200px); gap: .9rem; }
  .mv-card { padding: 2.1rem 1.75rem 1.95rem; }
  .mv-service-row .mv-service-num { font-size: 2.6rem; }
}

/* ---------- 30.5 <=1199px — Bootstrap lg: portrait tablet & narrow laptop -- */
@media (max-width: 1199.98px) {
  /* The banner's decorative circle is 460px wide and sits outside the right
     edge; at this width it starts to drive horizontal overflow. */
  .mv-banner::after { width: 340px; height: 340px; right: -130px; bottom: -150px; }

  .mv-hero__cards { transform: translateY(24%); }
  .mv-hero__content { max-width: 620px; }

  /* Four stat columns become cramped well before the 991px reflow; the
     dividers are redrawn for a 2-up grid here instead. */
  .mv-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .mv-trust__grid > .mv-stat:nth-child(odd) { border-left: 0; }
  .mv-trust__grid > .mv-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .1); }

  /* Philosophy drops to 2-up at the same point, matching the stats rhythm. */
  .mv-philosophy { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 4vw, 2.75rem); }
  .mv-philosophy__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .mv-philosophy__item:nth-child(even) { padding-right: 0; }

  /* 46 characters will not hold one line here. */
  .mv-mission-banner__title { white-space: normal; }

  .mv-values__grid { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .mv-values__lead { position: static; }
  .mv-values__standfirst { max-width: none; }

  .mv-mosaic { grid-template-rows: repeat(2, 185px); }
  .mv-footer .mv-footer-list { margin-bottom: 1.25rem; }
}

/* ---------- 30.6 <=1024px — landscape tablet / iPad ---------- */
@media (max-width: 1024px) {
  :root { --mv-header-h: 76px; }

  .mv-hero { padding-top: clamp(4rem, 11vw, 7rem); }
  .mv-hero__content { max-width: 100%; padding-bottom: clamp(2.5rem, 7vw, 4.5rem); }
  .mv-hero__lead { max-width: 60ch; }

  /* Trust cards ease further out of overlap: at this width the offset
     collides with the copy above it. */
  .mv-hero__cards { transform: translateY(16%); gap: .9rem; }

  .mv-parallax { height: auto; }
  .mv-parallax__title { max-width: 24ch; }
  .mv-parallax__lead { max-width: 60ch; }

  .mv-mosaic { grid-template-rows: repeat(2, 170px); }
  .mv-service-row { padding-block: clamp(2rem, 5vw, 3rem); }
  .mv-card { padding: 2rem 1.65rem 1.85rem; }
}

/* ---------- 30.7 <=991px — Bootstrap md: collapsed nav, single column ------ */
@media (max-width: 991.98px) {
  :root { --mv-header-h: 72px; }

  /* The collapsed menu can exceed the viewport on short landscape phones,
     so it scrolls inside the header rather than pushing the page. */
  .mv-header .navbar-collapse {
    max-height: calc(100vh - var(--mv-header-h) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Every nav row clears the 44px touch-target minimum. */
  .mv-nav .nav-link { padding: .85rem .25rem !important; min-height: 44px; display: flex; align-items: center; }
  .navbar-toggler { min-width: 44px; min-height: 44px; }

  /* Hero cards stack; the overlap is removed entirely so nothing is clipped. */
  .mv-hero__cards { grid-template-columns: 1fr; transform: none; margin-bottom: 0; margin-top: 2rem; }

  .mv-parallax__points > [class*="col"] + [class*="col"] { margin-top: 1rem; }
  .mv-mosaic { grid-template-rows: repeat(3, 190px); }

  /* Decorative circles are pure overflow risk on narrow screens. */
  .mv-banner::after { display: none; }
}

/* ---------- 30.8 <=768px — tablet portrait / large phone ---------- */
@media (max-width: 768px) {
  :root { --mv-header-h: 68px; }

  /* Stats and philosophy go fully single-column here: two columns of
     uppercase labels at this width break awkwardly mid-word. */
  .mv-trust__grid { grid-template-columns: 1fr; }
  .mv-trust__grid > .mv-stat { border-left: 0; }
  .mv-trust__grid > .mv-stat + .mv-stat { border-top: 1px solid rgba(255, 255, 255, .1); }
  .mv-stat__note { max-width: 32ch; }

  .mv-philosophy { grid-template-columns: 1fr; row-gap: 2rem; }
  .mv-philosophy__item { border-left: 0; padding-inline: 0; }

  .mv-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 165px); gap: .75rem; }

  /* Captions are hover-revealed on desktop; on touch they stay visible, so
     they need to be legible rather than cinematic. */
  .mv-mosaic__item figcaption { padding: 1rem .9rem .85rem; }

  .mv-service-row .mv-service-num { font-size: 2.25rem; }
  .mv-values__standfirst { padding-left: 1rem; }

  /* Footer columns stack with breathing room instead of colliding. */
  .mv-footer-list { margin-bottom: 1.75rem; }
  .mv-footer-bottom { text-align: center; }
  .mv-footer-bottom > * + * { margin-top: .5rem; }
  .mv-social { justify-content: center; }
}

/* ---------- 30.9 <=575px — Bootstrap sm: phone ---------- */
@media (max-width: 575.98px) {
  :root { --mv-header-h: 64px; }

  /* A consistent 16px page gutter at phone widths.

     The padding is set directly rather than through `--bs-gutter-x`. That
     variable cannot be used here: `.row` redeclares it from its own `g-*`
     class, so a value set on the container is overridden inside every row.
     The container's padding would shrink while the row kept its 3rem
     negative margin, and each row would then escape the container by the
     difference. Section 30.15 clamps the rows to match this padding. */
  .container, .container-fluid,
  .container-sm, .container-md, .container-lg, .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Full-width primary actions are easier to hit and read as intentional
     rather than as buttons that happen to have wrapped. */
  .mv-hero__actions,
  .mv-cta__actions,
  .mv-parallax__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .mv-hero__actions .btn,
  .mv-cta__actions .btn,
  .mv-parallax__actions .btn { width: 100%; justify-content: center; }

  /* Every interactive control clears the 44px touch minimum. */
  .btn, .mv-filter-btn, .mv-social a { min-height: 44px; }
  .mv-filter-btn { padding-inline: 1rem; }

  .mv-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(4, 200px); }
  .mv-mosaic__item figcaption { transform: none; opacity: 1; }

  /* The back-to-top button moves inboard so it does not sit under a
     thumb resting on the screen edge. */
  .mv-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }

  /* Service numbers become a quiet label rather than a display figure. */
  .mv-service-row .mv-service-num { font-size: 1.9rem; margin-bottom: .25rem; }

  .mv-quote, .mv-voice { padding: 1.5rem 1.25rem; }
  .mv-contact-tile { padding: 1.5rem 1.25rem; }
  .mv-sidebar-box { padding: 1.35rem 1.15rem; }
  .mv-form-card { padding: 1.5rem 1.15rem; }

  /* Gallery filters scroll horizontally instead of stacking into a tall
     column that pushes the grid below the fold. */
  .mv-gallery-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .5rem;
    padding-bottom: .5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mv-gallery-filters::-webkit-scrollbar { display: none; }
  .mv-gallery-filters .mv-filter-btn { flex: 0 0 auto; }
}

/* ---------- 30.10 <=480px — standard phone ---------- */
@media (max-width: 480px) {
  /* Hero type steps below the fluid floor: the clamp minimum is tuned for
     readability at 375px+, and four lines of 2.4rem is too tall here. */
  .mv-hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  .mv-hero__lead { font-size: 1.02rem; margin-top: 1.1rem; }
  .mv-hero__badges { gap: .45rem; margin-bottom: 1.2rem; }
  .mv-badge { padding: .4rem .8rem; font-size: .76rem; }

  .mv-card { padding: 1.6rem 1.25rem; }
  .mv-card__icon { width: 46px; height: 46px; flex: 0 0 46px; margin-bottom: 1.1rem; }

  .mv-mosaic { grid-template-rows: repeat(4, 180px); }
  .mv-stat__num { font-size: clamp(2.4rem, 13vw, 3.1rem); }

  /* The numbered value rows lose their number column at 575px; tighten the
     remaining rhythm so the list does not run excessively long. */
  .mv-value { padding-block: 1.25rem; }

  .mv-person { padding: 1.1rem .95rem 1.25rem; }
  .mv-post__body { padding: 1.25rem 1.1rem; }
}

/* ---------- 30.11 <=425px ---------- */
@media (max-width: 425px) {
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }

  .mv-hero h1 { font-size: clamp(1.85rem, 8.8vw, 2.25rem); }
  .mv-mosaic { grid-template-rows: repeat(4, 165px); }

  /* Breadcrumbs wrap rather than overflow the banner. */
  .breadcrumb { flex-wrap: wrap; font-size: .82rem; }

  .mv-philosophy__icon { width: 2.25rem; height: 2.25rem; }
  .mv-parallax__point { padding: 1.25rem 1.1rem; }
  .mv-mission-banner__mark { font-size: 2.6rem; }
}

/* ---------- 30.12 <=375px — iPhone SE / mini ---------- */
@media (max-width: 375px) {
  :root { --mv-header-h: 60px; }

  .mv-brand__logo { --mv-logo-h: 32px; }
  .mv-hero h1 { font-size: 1.75rem; }
  .mv-hero__lead { font-size: .98rem; }

  .mv-mosaic { grid-template-rows: repeat(4, 150px); }
  .mv-card { padding: 1.4rem 1.1rem; }
  .mv-card h3 { font-size: 1.1rem; }

  .mv-stat__num { font-size: 2.6rem; }
  .mv-service-row .mv-service-num { font-size: 1.7rem; }

  .mv-badge { font-size: .72rem; padding: .35rem .7rem; }
}

/* ---------- 30.13 <=320px — smallest supported ---------- */
@media (max-width: 320px) {
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

  .mv-brand__logo { --mv-logo-h: 28px; }
  .mv-brand { gap: .5rem; }

  .mv-hero h1 { font-size: 1.6rem; letter-spacing: -.01em; }
  .mv-hero__lead { font-size: .94rem; }

  /* At 320px the tel: nowrap in section 15 is the one rule that can still
     force a scrollbar, so it is released here. */
  .mv-contact-tile a[href^="tel:"],
  .mv-dine__link { white-space: normal; }

  .mv-mosaic { grid-template-rows: repeat(4, 135px); }
  .mv-card { padding: 1.25rem 1rem; }
  .mv-stat__num { font-size: 2.25rem; }
  .mv-stat__note { max-width: none; }

  .btn { font-size: .9rem; padding-inline: 1rem; }
  .mv-top { width: 42px; height: 42px; right: .75rem; bottom: .75rem; }
}

/* ---------- 30.14 Landscape phones ----------
   Short viewports: the hero's vertical clamp padding is generous enough to
   push the headline off a 380px-tall landscape screen entirely. */
@media (max-height: 480px) and (orientation: landscape) {
  .mv-hero { padding-top: 3rem; }
  .mv-hero__content { padding-bottom: 2rem; }
  .mv-header .navbar-collapse { max-height: calc(100vh - var(--mv-header-h)); }
}

/* ---------- 30.15 Bootstrap gutter tuning ----------
   The layouts lean on `g-5` (3rem) to give the desktop grid its editorial
   air. Once the columns stack that gutter becomes dead vertical space
   between a photograph and the paragraph it belongs to, which reads as a
   section break rather than a pair. These step it down so stacked columns
   stay visually grouped.

   `--bs-gutter-x` must be stepped down in step with the container padding,
   because the two are two halves of the same mechanism: the container pads
   by half the gutter and the row pulls back by the other half. Bootstrap's
   own `.container` padding is `--bs-gutter-x * .5`, so setting the variable
   on the container keeps the pair balanced automatically. A `g-5` row left
   at 3rem inside a 28px-padded container escapes its container by 10px per
   side — which is exactly the overflow this block removes. */
/* Above the md breakpoint Bootstrap's .container keeps its default 24px
   inline padding while a `g-5` row asks for a 3rem (48px) gutter, so the
   row overhangs the container by 12px per side. Capping the gutter at 48px
   only helps once the padding matches; the container padding is widened
   instead, which preserves the intended 3rem gap between columns. */
@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    padding-left: 24px;
    padding-right: 24px;
  }
  .row.row.g-5, .row.row.g-lg-5 { --bs-gutter-x: 3rem; }
}

/* The horizontal gutter is capped to twice the container's inline padding,
   because the row's negative margin is half the gutter and must be fully
   absorbed by that padding. Selectors repeat `.row` to outweigh Bootstrap's
   own `.g-5`/`.g-lg-5` declarations, which would otherwise keep the gutter
   at 3rem and push each row past the container edge. The vertical gutter is
   free to differ: stacked columns need less air than side-by-side ones. */
/* Container padding 16px -> gutter ceiling 32px (2rem). Bootstrap's own
   default container padding is 12px here, which is too little to absorb a
   2rem gutter, so the padding is raised to match rather than shrinking the
   gutter further and losing the gap between columns. */
@media (max-width: 991.98px) {
  .container, .container-fluid,
  .container-sm, .container-md, .container-lg, .container-xl {
    padding-left: 16px;
    padding-right: 16px;
  }
  .row.row, .row.row[class*="g-"] { --bs-gutter-x: 2rem; }
  .row.row.g-5, .row.row.g-lg-5 { --bs-gutter-y: 2rem; }
  .row.row.g-4, .row.row.g-lg-4 { --bs-gutter-y: 1.5rem; }
}
/* Container padding 16px -> gutter ceiling 32px. */
@media (max-width: 575.98px) {
  .row.row, .row.row[class*="g-"] { --bs-gutter-x: 32px; }
  .row.row.g-5, .row.row.g-lg-5 { --bs-gutter-y: 1.5rem; }
  .row.row.g-4, .row.row.g-lg-4 { --bs-gutter-y: 1.25rem; }
}
/* Container padding 14px -> gutter ceiling 28px. */
@media (max-width: 425px) {
  .row.row, .row.row[class*="g-"] { --bs-gutter-x: 28px; }
}
/* Container padding 12px -> gutter ceiling 24px. */
@media (max-width: 320px) {
  .row.row, .row.row[class*="g-"] { --bs-gutter-x: 24px; }
}

/* ---------- 30.16 Stacked column ordering ----------
   Alternating sections use `flex-lg-row-reverse` so the photograph swaps
   sides down the page. When the row stacks, the reverse no longer applies
   and every section falls back to source order, which is correct: on a
   phone the image should lead and the copy follow, consistently. This is
   recorded rather than changed — the fallback is the desired behaviour. */

/* ---------- 30.17 Flex/grid minimum-size floor ----------
   A flex item's `min-width` defaults to `auto`, which resolves to the
   content's intrinsic minimum — so a column will refuse to shrink below its
   widest unbreakable child and push past the container instead of wrapping.
   Bootstrap's `.col-*` classes are flex items, so any column whose content
   has a wide intrinsic minimum (a long heading, a `nowrap` run, a wide
   inline-flex group) overflows the row rather than reflowing inside it.

   Setting `min-width: 0` restores the expected behaviour: the column shrinks
   to its share of the row and its content wraps. `min-height: 0` does the
   same for the block axis. This is the single rule that keeps every page
   inside the viewport at 320px. */
.row > * { min-width: 0; }

/* Grid containers have the same default on their items. */
.mv-philosophy__item,
.mv-trust__grid > *,
.mv-values__grid > *,
.mv-value > *,
.mv-mosaic__item,
.mv-hero__cards > * { min-width: 0; }

/* Flex rows that carry their own layout need the same floor so a long word
   or a nowrap phrase cannot force the row wider than its parent. */
.mv-usp, .mv-checklist li, .mv-footer-contact li,
.mv-post__meta, .mv-quote__person, .mv-voice__person { min-width: 0; }
.mv-usp > *, .mv-checklist li > *, .mv-footer-contact li > * { min-width: 0; }